/* ============================================================
   Inn云扫码 · 授权后台  ·  Glassmorphism 毛玻璃拟态主题
   ============================================================ */
:root{
    --ink:#1b2a4a;
    --ink-2:#44547a;
    --ink-3:#7d8ab0;
    --brand:#3b6cf6;
    --brand-2:#6a4ff0;
    --ok:#129d5f;
    --warn:#d97b06;
    --bad:#dc3d51;
    --glass:rgba(255,255,255,.62);
    --glass-strong:rgba(255,255,255,.78);
    --glass-border:rgba(255,255,255,.65);
    --shadow:0 8px 32px rgba(31,50,110,.12);
    --shadow-sm:0 2px 10px rgba(31,50,110,.08);
    --radius:16px;
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{
    margin:0;min-height:100vh;
    font:14px/1.65 "Microsoft YaHei","PingFang SC",Arial,sans-serif;
    color:var(--ink);
    background:linear-gradient(135deg,#dfe9ff 0%,#e8e3fb 30%,#f6e9f4 60%,#dff2f4 100%);
    background-attachment:fixed;
}
/* 背景光斑 */
body::before,body::after{
    content:"";position:fixed;border-radius:50%;filter:blur(90px);z-index:-1;pointer-events:none;
}
body::before{width:520px;height:520px;left:-140px;top:-120px;background:rgba(120,150,255,.35)}
body::after{width:460px;height:460px;right:-120px;bottom:-140px;background:rgba(190,140,255,.28)}

a{color:var(--brand);text-decoration:none;transition:color .15s}
a:hover{color:var(--brand-2)}
code{font-family:Consolas,Monaco,monospace;background:rgba(59,108,246,.09);color:#2c4fae;
    padding:1px 6px;border-radius:6px;font-size:12.5px}
code.key{background:rgba(255,171,64,.16);color:#b25f00;font-weight:600;letter-spacing:.5px}

/* ---------- 顶栏 ---------- */
.topbar{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,.55);
    backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
    border-bottom:1px solid rgba(255,255,255,.6);
    box-shadow:0 2px 18px rgba(31,50,110,.08);
    padding:13px 26px;display:flex;align-items:center;justify-content:space-between;
}
.brand{font-size:18px;font-weight:800;letter-spacing:.5px;
    background:linear-gradient(90deg,#3b6cf6,#8a4ff0,#d45cc4);
    -webkit-background-clip:text;background-clip:text;color:transparent}
.brand span{font-weight:400;font-size:13.5px;margin-left:8px;
    -webkit-text-fill-color:var(--ink-3);color:var(--ink-3)}
.top-right{display:flex;align-items:center;gap:12px}

/* ---------- 布局 ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:22px 22px 70px}
.wrap.narrow{max-width:780px}
.narrow-panel{max-width:440px}

/* ---------- 导航 ---------- */
.nav{
    display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 22px;padding:8px;
    background:rgba(255,255,255,.45);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid var(--glass-border);border-radius:14px;
    box-shadow:var(--shadow-sm);position:sticky;top:62px;z-index:40;
}
.nav a{
    padding:8px 16px;border-radius:10px;color:var(--ink-2);font-weight:500;
    transition:all .18s ease;
}
.nav a:hover{background:rgba(255,255,255,.85);color:var(--brand);transform:translateY(-1px)}
.nav a.active{
    background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;
    box-shadow:0 4px 14px rgba(59,108,246,.35);
}

h2{margin:20px 0 16px;font-size:21px;color:var(--ink);letter-spacing:.3px}
h3{margin:0 0 14px;font-size:15.5px;color:var(--ink-2)}

/* ---------- 提示条 ---------- */
.alert{
    padding:12px 16px;border-radius:12px;margin-bottom:18px;font-weight:500;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid transparent;box-shadow:var(--shadow-sm);
    animation:slideIn .25s ease;
}
.alert-ok{background:rgba(18,157,95,.12);color:var(--ok);border-color:rgba(18,157,95,.25)}
.alert-error{background:rgba(220,61,81,.10);color:var(--bad);border-color:rgba(220,61,81,.25)}
@keyframes slideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 玻璃面板 ---------- */
.panel{
    background:var(--glass);
    backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
    border:1px solid var(--glass-border);border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:22px;margin-bottom:20px;
    transition:box-shadow .2s;
}
.panel:hover{box-shadow:0 10px 40px rgba(31,50,110,.16)}
.panel-head{margin-bottom:14px}

/* ---------- 统计卡 ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:14px;margin-bottom:20px}
.stat{
    background:var(--glass);
    backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
    border:1px solid var(--glass-border);border-radius:14px;
    box-shadow:var(--shadow-sm);
    padding:18px 14px;text-align:center;position:relative;overflow:hidden;
    transition:transform .18s ease,box-shadow .18s ease;
}
.stat:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(31,50,110,.16)}
.stat::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
    background:linear-gradient(90deg,var(--brand),var(--brand-2));opacity:.85}
.stat b{display:block;font-size:27px;color:var(--ink);line-height:1.35;font-weight:800}
.stat span{font-size:12.5px;color:var(--ink-3)}
.stat.green::before{background:linear-gradient(90deg,#129d5f,#4cd694)}
.stat.green b{color:var(--ok)}
.stat.red::before{background:linear-gradient(90deg,#dc3d51,#ff7d92)}
.stat.red b{color:var(--bad)}
.stat.orange::before{background:linear-gradient(90deg,#d97b06,#ffb84d)}
.stat.orange b{color:var(--warn)}
.stat.blue::before{background:linear-gradient(90deg,#3b6cf6,#6a4ff0)}
.stat.blue b{color:var(--brand)}
.stat.gray::before{background:linear-gradient(90deg,#8a97b8,#b8c2da)}
.stat.gray b{color:var(--ink-3)}

/* ---------- 表格 ---------- */
.table-scroll{overflow-x:auto}
table.grid{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
table.grid th{
    background:rgba(59,108,246,.08);color:var(--ink-2);font-weight:600;
    text-align:left;padding:10px 12px;white-space:nowrap;
    border-bottom:1px solid rgba(59,108,246,.15);
}
table.grid th:first-child{border-radius:10px 0 0 10px}
table.grid th:last-child{border-radius:0 10px 10px 0}
table.grid td{padding:9px 12px;border-bottom:1px solid rgba(125,138,176,.14);vertical-align:middle}
table.grid tbody tr,table.grid tr:hover td{transition:background .15s}
table.grid tr:hover td{background:rgba(255,255,255,.55)}
table.kv th{width:150px;text-align:left;color:var(--ink-3);font-weight:400;padding:8px 0}
table.kv td{padding:8px 0}
.nowrap{white-space:nowrap}
.small{font-size:12px}
.muted{color:var(--ink-3)}

/* ---------- 标签 ---------- */
.tag{display:inline-block;padding:2.5px 10px;border-radius:20px;font-size:12px;font-weight:500}
.tag{background:rgba(125,138,176,.15);color:var(--ink-2)}
.tag.ok{background:rgba(18,157,95,.13);color:var(--ok)}
.tag.bad{background:rgba(220,61,81,.12);color:var(--bad)}
.tag.warn{background:rgba(217,123,6,.13);color:var(--warn)}
.ok{color:var(--ok);font-weight:600}
.bad{color:var(--bad);font-weight:600}

/* ---------- 按钮 ---------- */
.btn{
    display:inline-block;padding:8px 18px;
    border:1px solid rgba(125,138,176,.35);
    background:rgba(255,255,255,.7);color:var(--ink-2);
    border-radius:10px;cursor:pointer;font-size:13px;font-family:inherit;font-weight:500;
    transition:all .18s ease;box-shadow:var(--shadow-sm);
}
.btn:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px);
    box-shadow:0 4px 14px rgba(59,108,246,.2)}
.btn.primary{
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    border-color:transparent;color:#fff;
}
.btn.primary:hover{color:#fff;box-shadow:0 6px 18px rgba(59,108,246,.4)}
.btn.danger{
    background:linear-gradient(135deg,#dc3d51,#f0627a);border-color:transparent;color:#fff;
}
.btn.danger:hover{color:#fff;box-shadow:0 6px 18px rgba(220,61,81,.4)}
.btn.small{padding:5px 13px;font-size:12.5px}
.btn.tiny{padding:3px 10px;font-size:12px}
.btn.block{width:100%;padding:12px;font-size:15px;letter-spacing:2px}

/* ---------- 表单 ---------- */
.inline-form{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.inline-form label{display:flex;flex-direction:column;font-size:12px;color:var(--ink-3);gap:5px;font-weight:500}
input,select,textarea{
    padding:8px 12px;border:1px solid rgba(125,138,176,.35);border-radius:10px;
    font-family:inherit;font-size:13.5px;color:var(--ink);
    background:rgba(255,255,255,.75);
    transition:all .18s ease;
}
textarea{width:100%;resize:vertical}
input:focus,select:focus,textarea:focus{
    outline:none;border-color:var(--brand);
    background:#fff;box-shadow:0 0 0 3px rgba(59,108,246,.15);
}
input::placeholder,textarea::placeholder{color:#a8b2cc}
form label{display:block;margin:12px 0 5px;font-size:13px;color:var(--ink-2);font-weight:500}
form label+input,form input:not([type=checkbox]){display:block;width:100%;margin-bottom:4px}
form select{width:100%}
input[type=checkbox]{width:auto;margin:0;accent-color:var(--brand)}
input[type=checkbox]+*{vertical-align:middle}

/* ---------- 批量操作条 ---------- */
.bulk-bar{display:flex;gap:10px;align-items:center;margin:8px 0 14px;flex-wrap:wrap}
.bulk-bar select{width:auto}
.bulk-bar input[type=number]{width:90px}

/* ---------- 分页 ---------- */
.pager{margin-top:16px;display:flex;gap:6px;flex-wrap:wrap}
.pager a{
    padding:5px 12px;border:1px solid rgba(125,138,176,.35);border-radius:8px;
    background:rgba(255,255,255,.6);font-size:12.5px;color:var(--ink-2);transition:all .15s;
}
.pager a:hover{border-color:var(--brand);color:var(--brand)}
.pager a.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent}

/* ---------- 登录页 ---------- */
.login-box{
    max-width:400px;margin:8vh auto 0;padding:36px 32px;
    background:rgba(255,255,255,.66);
    backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);
    border:1px solid var(--glass-border);border-radius:22px;
    box-shadow:0 16px 50px rgba(31,50,110,.18);
    animation:slideIn .3s ease;
}
.login-box h2{
    margin:0 0 6px;font-size:22px;text-align:center;
    background:linear-gradient(90deg,#3b6cf6,#8a4ff0);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.login-box .muted{text-align:center;margin:0 0 18px}
.login-box .small{margin-top:16px;text-align:center}

/* ---------- 页脚 ---------- */
.foot{text-align:center;color:var(--ink-3);font-size:12px;padding:18px 0 28px}
.foot code{background:rgba(59,108,246,.08)}

/* ---------- 响应式 ---------- */
@media (max-width:640px){
    .wrap{padding:14px 12px 50px}
    .panel{padding:16px}
    .nav{top:56px}
}