/* ============================================================
   清风SaaS平台 · 前台统一设计系统 qingfeng-ui.css
   玻璃拟态 + 渐变 + 移动优先 · 版权: yunxi/湖北呈袖网络科技有限公司
   ============================================================ */

/* ===== Reset & Base ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
    --qf-primary:#00d4ff;
    --qf-primary-dark:#0aa2c9;
    --qf-primary-light:rgba(0,212,255,.16);
    --qf-accent:#ff2d78;
    --qf-accent-light:rgba(255,45,120,.16);
    --qf-gradient:linear-gradient(135deg,#00d4ff 0%,#7c3aed 100%);
    --qf-gradient-blue:linear-gradient(135deg,#00d4ff,#7c3aed);
    --qf-gradient-warm:linear-gradient(135deg,#f7c948,#ff2d78);
    --qf-text:#e7ecf5;
    --qf-text-secondary:#b6c2d6;
    --qf-muted:#8492a8;
    --qf-line:rgba(255,255,255,.09);
    --qf-bg:#070a12;
    --qf-card:rgba(17,23,38,.72);
    --qf-card-solid:#111726;
    --qf-shadow:0 10px 30px rgba(0,0,0,.35);
    --qf-shadow-lg:0 20px 60px rgba(0,0,0,.55);
    --qf-radius:20px;
    --qf-radius-sm:14px;
    --qf-radius-xs:10px;
    --qf-glass:rgba(17,23,38,.5);
    --qf-glass-border:rgba(255,255,255,.07);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei','Helvetica Neue',sans-serif;
    color:var(--qf-text);
    background:var(--qf-bg);
    min-height:100vh;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
a{-webkit-tap-highlight-color:transparent;text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit;border:none;background:none}
input,textarea,select{font-family:inherit;outline:none}
img{max-width:100%;display:block}

/* ===== Page Layout ===== */
.qf-page{max-width:520px;margin:0 auto;padding:0 16px calc(96px + env(safe-area-inset-bottom));position:relative}
.qf-page-full{position:fixed;inset:0;width:100%;max-width:520px;margin:0 auto;padding:14px 14px calc(96px + env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* ===== Glass Background ===== */
.qf-glass-bg{
    position:fixed;inset:0;z-index:-2;pointer-events:none;
    background:
        radial-gradient(circle at 15% 5%,rgba(0,212,255,.14),transparent 35%),
        radial-gradient(circle at 85% 10%,rgba(124,58,237,.16),transparent 32%),
        linear-gradient(180deg,#070a12 0%,#0a0e17 50%,#070a12 100%);
}
.qf-glass-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(124,58,237,.06),rgba(255,45,120,.03))}

/* ===== Page Header ===== */
.qf-header{
    margin-top:16px;padding:14px 18px;
    background:var(--qf-glass);
    backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);
    border-radius:var(--qf-radius);border:1px solid var(--qf-glass-border);
    box-shadow:var(--qf-shadow);
    display:flex;align-items:center;gap:12px;
}
.qf-header .qf-back{
    width:34px;height:34px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    color:var(--qf-text-secondary);text-decoration:none;
    transition:background .2s;flex-shrink:0;
}
.qf-header .qf-back:active{background:rgba(0,0,0,.06)}
.qf-header .qf-back svg{width:20px;height:20px}
.qf-header h1{flex:1;font-size:17px;font-weight:700;color:var(--qf-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qf-header .qf-header-right{display:flex;gap:8px;align-items:center;flex-shrink:0}

/* ===== Cards ===== */
.qf-card{
    margin-top:14px;padding:18px;
    background:var(--qf-glass);
    backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);
    border-radius:var(--qf-radius);border:1px solid var(--qf-glass-border);
    box-shadow:var(--qf-shadow);
}
.qf-card-solid{background:var(--qf-card-solid);border:1px solid var(--qf-line)}
.qf-card-title{font-size:16px;font-weight:700;color:var(--qf-text);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.qf-card-title .qf-badge{margin-left:auto}

/* ===== Badge ===== */
.qf-badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700}
.qf-badge-primary{background:var(--qf-primary-light);color:var(--qf-primary-dark)}
.qf-badge-success{background:#d1fae5;color:#059669}
.qf-badge-warning{background:#fef3c7;color:#d97706}
.qf-badge-danger{background:#fee2e2;color:#dc2626}
.qf-badge-muted{background:rgba(255,255,255,.08);color:#94a3b8}
.qf-badge-accent{background:var(--qf-accent-light);color:var(--qf-accent)}

/* ===== Buttons ===== */
.qf-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    height:46px;padding:0 20px;border-radius:var(--qf-radius-sm);
    font-size:15px;font-weight:700;color:#fff;
    background:var(--qf-gradient-blue);
    box-shadow:0 8px 22px rgba(37,99,235,.2);
    transition:transform .15s,box-shadow .2s,opacity .2s;
    -webkit-tap-highlight-color:transparent;
}
.qf-btn:active{transform:scale(.96)}
.qf-btn:disabled{opacity:.5;box-shadow:none}
.qf-btn-block{width:100%}
.qf-btn-sm{height:34px;padding:0 14px;font-size:13px;border-radius:999px}
.qf-btn-outline{background:transparent;border:1px solid var(--qf-line);color:var(--qf-text-secondary);box-shadow:none}
.qf-btn-outline:active{background:var(--qf-bg)}
.qf-btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 8px 22px rgba(239,68,68,.2)}
.qf-btn-success{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 8px 22px rgba(16,185,129,.2)}
.qf-btn-ghost{background:rgba(255,255,255,.06);border:1px solid var(--qf-glass-border);color:var(--qf-text);box-shadow:none}

/* ===== Forms ===== */
.qf-form-group{margin-bottom:14px}
.qf-label{display:block;font-size:13px;font-weight:600;color:var(--qf-text-secondary);margin-bottom:6px}
.qf-input,.qf-select,.qf-textarea{
    width:100%;height:48px;padding:0 14px;
    border:1px solid var(--qf-line);border-radius:var(--qf-radius-sm);
    background:rgba(248,250,252,.8);font-size:14px;color:var(--qf-text);
    transition:border-color .2s,box-shadow .2s,background .2s;
}
.qf-input:focus,.qf-select:focus,.qf-textarea:focus{
    border-color:var(--qf-primary);background:rgba(255,255,255,.04);
    box-shadow:0 0 0 4px rgba(37,99,235,.08)
}
.qf-input::placeholder{color:var(--qf-muted)}
.qf-textarea{height:auto;min-height:120px;padding:12px 14px;line-height:1.6;resize:none}
.qf-input-group{display:flex;gap:8px;align-items:center}
.qf-input-group .qf-input{flex:1}
.qf-input-group .qf-btn-sm{flex-shrink:0}

/* ===== Grid ===== */
.qf-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qf-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qf-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:380px){.qf-grid-2,.qf-grid-3,.qf-grid-4{grid-template-columns:1fr 1fr}}

/* ===== Tabs ===== */
.qf-tabs{display:flex;gap:6px;margin-top:14px;padding:4px;background:var(--qf-glass);border-radius:var(--qf-radius-sm);border:1px solid var(--qf-glass-border)}
.qf-tab{flex:1;text-align:center;padding:10px 0;font-size:13px;color:var(--qf-muted);cursor:pointer;border-radius:10px;transition:all .25s;font-weight:500}
.qf-tab.active{color:var(--qf-text);background:rgba(17,23,38,.9);box-shadow:0 2px 8px rgba(0,0,0,.3);font-weight:700}

/* ===== Empty State ===== */
.qf-empty{text-align:center;padding:50px 20px;color:var(--qf-muted);font-size:14px;background:var(--qf-glass);border-radius:var(--qf-radius);border:1px dashed var(--qf-line);margin-top:14px}
.qf-empty svg{width:48px;height:48px;margin-bottom:12px;opacity:.4}

/* ===== Toast ===== */
.qf-toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%) translateY(12px);max-width:86%;padding:12px 18px;border-radius:14px;color:#fff;font-size:13px;line-height:1.55;background:rgba(15,23,42,.9);opacity:0;pointer-events:none;transition:all .25s;z-index:3000;white-space:pre-wrap}
.qf-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== Modal/Overlay ===== */
.qf-overlay{position:fixed;inset:0;z-index:2000;background:rgba(15,23,42,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px}
.qf-overlay.show{display:flex}
.qf-dialog{width:100%;max-width:440px;max-height:82vh;overflow:auto;border-radius:24px;background:var(--qf-card-solid);box-shadow:var(--qf-shadow-lg)}
.qf-dialog-head{position:sticky;top:0;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--qf-line);background:var(--qf-card-solid);z-index:1}
.qf-dialog-head h2{font-size:16px;font-weight:700;color:var(--qf-text)}
.qf-dialog-close{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.08);color:var(--qf-muted);font-size:20px;display:flex;align-items:center;justify-content:center}
.qf-dialog-body{padding:18px}

/* ===== Animations ===== */
@keyframes qf-fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes qf-fadeIn{from{opacity:0}to{opacity:1}}
@keyframes qf-slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes qf-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.qf-animate-up{animation:qf-fadeUp .5s ease forwards}
.qf-animate-in{animation:qf-fadeIn .4s ease forwards}

/* ===== Responsive ===== */
@media(max-width:380px){
    .qf-page{padding:0 12px calc(96px + env(safe-area-inset-bottom))}
    .qf-card{padding:14px;border-radius:16px}
    .qf-header{padding:12px 14px;border-radius:16px}
    .qf-header h1{font-size:16px}
    .qf-btn{height:42px;font-size:14px}
    .qf-input,.qf-select{height:44px}
}

/* ===== Copyright ===== */
.qf-copyright{text-align:center;padding:20px 0 4px;color:var(--qf-muted);font-size:11px;line-height:1.8}
.qf-copyright a{color:var(--qf-muted)}
.qf-copyright .qf-brand{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--qf-glass-border)}

/* ===== Utility ===== */
.qf-text-center{text-align:center}
.qf-text-right{text-align:right}
.qf-mt-sm{margin-top:8px}
.qf-mt-md{margin-top:14px}
.qf-mt-lg{margin-top:20px}
.qf-mb-sm{margin-bottom:8px}
.qf-mb-md{margin-bottom:14px}
.qf-hidden{display:none!important}
.qf-flex{display:flex}
.qf-flex-1{flex:1}
.qf-gap-sm{gap:8px}
.qf-gap-md{gap:12px}
.qf-text-primary{color:var(--qf-primary)}
.qf-text-danger{color:#dc2626}
.qf-text-success{color:#059669}
.qf-text-muted{color:var(--qf-muted)}
.qf-font-bold{font-weight:700}
.qf-font-xl{font-size:24px;font-weight:800}
.qf-font-lg{font-size:18px;font-weight:700}
.qf-overflow-hidden{overflow:hidden}
.qf-rounded-full{border-radius:999px}