/* ============ DreamMemNexus 主题 ============ */
:root{
  --bg:#070a14;
  --bg2:#0b1020;
  --panel:rgba(20,26,46,.72);
  --panel-border:rgba(99,179,255,.18);
  --glass:rgba(255,255,255,.04);
  --text:#e7ecff;
  --muted:#8794b8;
  --accent:#5b8cff;
  --accent2:#22d3ee;
  --accent3:#a855f7;
  --ok:#34d399;
  --warn:#fbbf24;
  --err:#f87171;
  --grad:linear-gradient(135deg,#5b8cff 0%,#a855f7 50%,#22d3ee 100%);
  --shadow:0 18px 60px rgba(0,0,0,.55);
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 12% -10%,rgba(91,140,255,.18),transparent 60%),
    radial-gradient(1000px 500px at 100% 0%,rgba(168,85,247,.16),transparent 55%),
    radial-gradient(900px 500px at 50% 120%,rgba(34,211,238,.12),transparent 55%),
    var(--bg);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent2);text-decoration:none}
a:hover{opacity:.85}
::selection{background:rgba(91,140,255,.4)}

/* ====== 布局 ====== */
.app{display:flex;min-height:100vh}
.sidebar{
  width:248px;flex-shrink:0;position:sticky;top:0;height:100vh;
  background:linear-gradient(180deg,rgba(11,16,32,.95),rgba(7,10,20,.92));
  border-right:1px solid var(--panel-border);
  display:flex;flex-direction:column;backdrop-filter:blur(14px);
  z-index:40;
}
.brand{padding:24px 22px 18px;display:flex;align-items:center;gap:12px}
.brand .logo{
  width:42px;height:42px;border-radius:13px;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.35),transparent 45%),
    var(--grad);
  display:flex;align-items:center;justify-content:center;
  box-shadow:
    0 0 24px rgba(91,140,255,.55),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 6px rgba(0,0,0,.2);
  position:relative;overflow:hidden;
}
.brand .logo svg{width:72%;height:72%;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
/* ✤ emoji 版 LOGO: 居中 + 文字渐变发光 */
.brand .logo .logo-emo{
  font-size:32px;line-height:1;font-weight:900;display:block;
  background:linear-gradient(135deg,#ffffff 0%,#c6ddff 45%,#9be7ff 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)) drop-shadow(0 0 6px rgba(91,140,255,.55));
  text-align:center;transform:translateZ(0);
}
.brand .logo::before{
  content:"";position:absolute;inset:0;border-radius:13px;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%);
  transform:translateX(-120%);animation:sweep 4.5s ease-in-out infinite;
  pointer-events:none;
}
.brand .logo::after{content:"";position:absolute;inset:-3px;border-radius:15px;background:var(--grad);filter:blur(10px);opacity:.5;z-index:-1;animation:pulse 3s ease-in-out infinite;pointer-events:none}
/* 无 logo 模式：去掉左侧占位，让标题靠左并重新排版 */
.brand.no-logo{gap:0;padding:22px 18px 14px}
.brand.no-logo .logo,
.brand .logo[class*="logo-emo"]{display:none !important}
.brand h1{font-size:18px;letter-spacing:.5px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{color:var(--muted);font-size:11px;letter-spacing:1.5px}
.nav{flex:1;overflow-y:auto;padding:10px 12px}
.nav a{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;
  color:var(--muted);font-size:14px;margin-bottom:3px;transition:.18s;border:1px solid transparent;
}
.nav a .ico{width:20px;text-align:center;opacity:.9}
.nav a:hover{background:var(--glass);color:var(--text)}
.nav a.active{
  background:linear-gradient(90deg,rgba(91,140,255,.18),rgba(168,85,247,.08));
  color:#fff;border-color:var(--panel-border);box-shadow:inset 0 0 0 1px rgba(91,140,255,.12)
}
.nav a.active .ico{color:var(--accent2)}
.nav .sec{padding:14px 16px 6px;font-size:11px;letter-spacing:2px;color:#4a5878;text-transform:uppercase}
.userbox{padding:14px;border-top:1px solid var(--panel-border)}
.userbox .ub{display:flex;align-items:center;gap:10px;font-size:13px}
.userbox .av{width:34px;height:34px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:700;color:#04060e}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;background:rgba(7,10,20,.6);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--panel-border);
}
.topbar h2{font-size:20px;font-weight:700}
.topbar .crumbs{color:var(--muted);font-size:12px;margin-top:2px}
.topbar .right{display:flex;align-items:center;gap:12px}
.pill{font-size:12px;padding:6px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--panel-border);color:var(--muted)}
.pill .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:6px;box-shadow:0 0 10px var(--ok)}
.content{padding:26px 28px 60px;max-width:1320px;width:100%;margin:0 auto}

/* ====== 卡片 ====== */
.grid{display:grid;gap:18px}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);
  padding:20px;backdrop-filter:blur(14px);box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;background:var(--grad);filter:blur(40px);opacity:.12;pointer-events:none}
.card h3{font-size:14px;color:var(--muted);letter-spacing:.5px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.card .big{font-size:34px;font-weight:800;letter-spacing:.5px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.card .sub{color:var(--muted);font-size:12px;margin-top:6px}
.stat-ico{position:absolute;right:18px;top:18px;width:40px;height:40px;border-radius:12px;background:var(--glass);display:flex;align-items:center;justify-content:center;font-size:18px}

/* ====== 表单 ====== */
.form-row{margin-bottom:14px}
.form-row label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.input,.textarea,.select{
  width:100%;padding:11px 14px;border-radius:11px;background:rgba(2,6,16,.5);
  border:1px solid var(--panel-border);color:var(--text);font-size:14px;outline:none;transition:.18s;
}
.input:focus,.textarea:focus,.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,140,255,.15)}
.textarea{min-height:120px;resize:vertical;font-family:inherit;line-height:1.5}
.hint{font-size:11px;color:var(--muted);margin-top:5px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.checkbox{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer}
.checkbox input{accent-color:var(--accent)}

/* ====== 按钮 ====== */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:11px;
  border:1px solid var(--panel-border);background:var(--glass);color:var(--text);font-size:14px;cursor:pointer;transition:.18s;
}
.btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn-primary{background:var(--grad);border:none;color:#04060e;font-weight:700;box-shadow:0 8px 28px rgba(91,140,255,.35)}
.btn-primary:hover{box-shadow:0 12px 36px rgba(91,140,255,.5)}
.btn-ghost{background:transparent}
.btn-sm{padding:6px 12px;font-size:12px}
.btn-danger{border-color:rgba(248,113,113,.4);color:var(--err)}
.btn-danger:hover{background:rgba(248,113,113,.12)}
.btn-ok{border-color:rgba(52,211,153,.4);color:var(--ok)}

/* ====== 表格 ====== */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px 14px;text-align:left;font-size:13px;border-bottom:1px solid var(--panel-border)}
.table th{color:var(--muted);font-weight:600;font-size:12px;letter-spacing:.5px;text-transform:uppercase}
.table tr:hover td{background:var(--glass)}
.tag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;background:var(--glass);border:1px solid var(--panel-border);color:var(--muted)}
.tag.ok{color:var(--ok);border-color:rgba(52,211,153,.3)}
.tag.warn{color:var(--warn);border-color:rgba(251,191,36,.3)}
.tag.err{color:var(--err);border-color:rgba(248,113,113,.3)}
.tag.info{color:var(--accent2);border-color:rgba(34,211,238,.3)}
.mono{font-family:"Cascadia Code","Fira Code",Consolas,monospace;font-size:12px;color:var(--accent2)}

/* ====== 登录页 ====== */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden}
.auth-wrap::before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;background:var(--grad);filter:blur(120px);opacity:.18;top:-160px;left:-80px;animation:float 9s ease-in-out infinite}
.auth-wrap::after{content:"";position:absolute;width:500px;height:500px;border-radius:50%;background:var(--accent3);filter:blur(120px);opacity:.16;bottom:-140px;right:-60px;animation:float 11s ease-in-out infinite reverse}
.auth-card{
  width:420px;max-width:100%;padding:36px;border-radius:24px;
  background:rgba(11,16,32,.78);border:1px solid var(--panel-border);
  backdrop-filter:blur(24px);box-shadow:var(--shadow);position:relative;z-index:2;
}
.auth-card .logo{
  width:68px;height:68px;border-radius:20px;margin:0 auto 18px;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.4),transparent 45%),
    var(--grad);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  box-shadow:
    0 0 44px rgba(91,140,255,.55),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -3px 8px rgba(0,0,0,.22);
  animation:logoFloat 5s ease-in-out infinite;
}
.auth-card .logo svg{width:72%;height:72%;display:block;filter:drop-shadow(0 2px 5px rgba(0,0,0,.4))}
.auth-card .logo .logo-emo{
  font-size:44px;line-height:1;font-weight:900;display:block;
  background:linear-gradient(135deg,#ffffff 0%,#e0eaff 45%,#9be7ff 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)) drop-shadow(0 0 8px rgba(91,140,255,.6));
  text-align:center;transform:translateZ(0);
}
.auth-card .logo::before{
  content:"";position:absolute;inset:0;border-radius:20px;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.42) 50%,transparent 80%);
  transform:translateX(-120%);animation:sweep 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sweep{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.auth-card h1{text-align:center;font-size:24px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-card .desc{text-align:center;color:var(--muted);font-size:13px;margin:8px 0 26px}

/* ====== 仪表盘图表 ====== */
.chart-box{height:220px;position:relative}
.legend{display:flex;gap:18px;margin-bottom:10px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
.counters{display:flex;gap:28px}
.recent-list{display:flex;flex-direction:column;gap:10px}
.recent-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:11px;background:var(--glass);border:1px solid var(--panel-border);font-size:13px}
.recent-item .l{display:flex;align-items:center;gap:10px;min-width:0}
.recent-item .nm{color:var(--text);font-weight:600}
.recent-item .pp{color:var(--muted);font-size:12px}

/* ====== Toast ====== */
.toast-wrap{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.toast{padding:12px 18px;border-radius:11px;background:rgba(11,16,32,.95);border:1px solid var(--panel-border);font-size:13px;box-shadow:var(--shadow);animation:slideIn .3s ease;max-width:360px}
.toast.ok{border-left:3px solid var(--ok)}
.toast.err{border-left:3px solid var(--err)}

/* ====== Modal ====== */
.mask{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:200;padding:24px}
.mask.show{display:flex}
.modal{width:560px;max-width:100%;max-height:88vh;overflow:auto;background:var(--bg2);border:1px solid var(--panel-border);border-radius:18px;padding:26px;box-shadow:var(--shadow)}
.modal h3{font-size:18px;margin-bottom:18px}
.modal .foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}

.empty{text-align:center;padding:50px 20px;color:var(--muted)}
.empty .ico{font-size:48px;opacity:.4;margin-bottom:12px}
.flash{padding:11px 16px;border-radius:11px;margin-bottom:18px;font-size:13px}
.flash.ok{background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.3);color:var(--ok)}
.flash.err{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.3);color:var(--err)}
.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--panel-border);font-size:13px}
.kv .k{color:var(--muted)}
.copy-btn{cursor:pointer;color:var(--accent2);font-size:12px;padding:2px 8px;border-radius:7px;
  border:1px dashed rgba(34,211,238,.35);transition:.15s;text-decoration:none;display:inline-flex;align-items:center;gap:3px}
.copy-btn:hover{background:rgba(34,211,238,.1);border-color:var(--accent2);transform:translateY(-1px)}
.copy-btn:active{transform:translateY(0)}

/* ====== 动画 ====== */
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.8}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-24px)}}
@keyframes slideIn{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes fadeUp{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
.fade-up{animation:fadeUp .5s ease both}
.spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--accent2);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(91,140,255,.25);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

@media(max-width:1100px){.g-4{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){
  .sidebar{display:none}
  .g-4,.g-3,.g-2{grid-template-columns:1fr}
  .row2,.row3{grid-template-columns:1fr}
}