@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&display=swap');

/* WINS Management — La Memoria 编辑风主题 (暖米色 + 墨黑 + 金 · 衬线点缀) */
:root{
  --bg:#F4F2EE;            /* 暖米底 */
  --bg-2:#FBFAF7;          /* 更浅暖白 — 列表 / 面板背景 */
  --panel:rgba(255,255,255,0.72);
  --panel-solid:#ffffff;
  --border:rgba(28,26,23,0.10);
  --text:#1C1A17;          /* 暖墨黑 */
  --text-dim:#5A5750;
  --text-faint:#9A9690;

  --accent:#1DAB8B;        /* teal — 主操作色 (绿色家族, 融入暖调) */
  --accent-2:#178D72;      /* 深 teal */
  --accent-3:#1DAB8B;
  --gold:#B8965A;          /* 金 — eyebrow / 衬线点缀 */
  --purple:#7C6EFA;
  --coral:#E8613A;

  --warn:#D94444;
  --sunken:rgba(28,26,23,0.045);
  --shadow-sm:0 1px 2px rgba(28,26,23,.05),0 1px 3px rgba(28,26,23,.05);
  --shadow:0 2px 14px rgba(28,26,23,.08);
  --shadow-lg:0 24px 60px rgba(28,26,23,.18);
  --glow:var(--shadow);
  --radius:12px;
  --grad:linear-gradient(135deg,#22BD9A,#168E73);
  --font:"Geist","PingFang SC","Microsoft YaHei","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Instrument Serif","PingFang SC","Songti SC","Noto Serif SC",Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);
  background-image:
    radial-gradient(120% 80% at 50% -20%,rgba(184,150,90,.07),transparent 55%),
    linear-gradient(180deg,#F7F5F1 0%,#EFEBE4 100%);
  background-attachment:fixed;-webkit-font-smoothing:antialiased;}
a{color:var(--accent-2);text-decoration:none}

/* 衬线标题系统 */
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:.01em}
h1 em,h2 em,h3 em{font-style:italic;color:var(--gold)}
/* 金色 eyebrow 小标签 */
.eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:10px}
.eyebrow::after{content:'';flex:1;max-width:32px;height:1px;background:var(--gold)}

/* 线条图标系统 (Feather/Lucide 风格,内联 SVG) */
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex-shrink:0}
.ico-sm{width:14px;height:14px;stroke-width:1.9}
.ico-lg{width:22px;height:22px}
/* 在线/离线状态点 */
.statusdot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;background:var(--text-faint)}
.statusdot.on{background:var(--accent);box-shadow:0 0 0 3px rgba(29,171,139,.18)}

/* 顶栏 — La Memoria 墨黑横栏 + 金色衬线字标 */
.topbar{height:56px;background:var(--text);
  border-bottom:1px solid rgba(0,0,0,.4);box-shadow:0 1px 0 rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;position:sticky;top:0;z-index:30}
.topbar .t{font-family:var(--serif);font-weight:400;letter-spacing:.02em;
  display:flex;align-items:center;gap:9px;font-size:19px;color:#E8D9B8}
.topbar .t .ico{width:19px;height:19px;color:var(--gold)}
.topbar .links{display:flex;align-items:center}
.topbar .links a{margin-left:6px;font-size:13.5px;color:rgba(255,255,255,.62);transition:.2s;
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px}
.topbar .links a .ico{width:17px;height:17px}
.topbar .links a:hover{color:#fff;background:rgba(255,255,255,.10)}
.langtoggle{margin-left:10px;font-size:12px;font-weight:600;letter-spacing:.04em;color:#E8D9B8;
  background:transparent;border:1px solid rgba(232,217,184,.4);border-radius:8px;padding:5px 11px;transition:.18s}
.langtoggle:hover{background:var(--gold);border-color:var(--gold);color:var(--text)}

/* 按钮 / 表单 */
button{cursor:pointer;border:0;border-radius:10px;font-weight:600;font-family:var(--font);transition:.2s;
  display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(23,141,114,.28)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(23,141,114,.38)}
input,select,textarea{background:#fff;border:1px solid var(--border);color:var(--text);
  border-radius:10px;padding:9px 12px;font-size:14px;font-family:var(--font);outline:none;transition:.2s}
input::placeholder,textarea::placeholder{color:var(--text-faint)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,171,139,.16)}

/* 玻璃面板 */
.glass{background:var(--panel);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.6);border-radius:var(--radius);box-shadow:var(--shadow)}

/* 状态徽章 — La Memoria 暖色分类 (浅 tint 底 + 深文字) */
.badge{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}
.s0{background:#E4F7F2;color:#147A63}                 /* teal */
.s1{background:#F3ECDD;color:#8A6B2E}                 /* 金/琥珀 */
.s2{background:#EEECFF;color:#5B4DD6}                 /* 紫 */
.s3{background:#EEECFF;color:#5B4DD6}                 /* 同事 — 紫 */
.s4{background:#E6F5EE;color:#1F7A4E}                 /* 学员 — 绿 */
.s5{background:#FCEAF1;color:#B23A78}                 /* 朋友 — 粉 */
.s6{background:#FEF0EB;color:#C24A24}                 /* 家人 — 珊瑚 */
.s7{background:var(--sunken);color:var(--text-faint)} /* 无效 */
.b-connected{background:#E4F7F2;color:#147A63}
.b-qr{background:#F3ECDD;color:#8A6B2E}
.b-reconnecting,.b-starting{background:#FEF0EB;color:#C24A24}
.b-logged_out{background:#FEEAEA;color:#C2353A}
.b-idle{background:var(--sunken);color:var(--text-faint)}

/* 滚动条 */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(28,26,23,.16);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(28,26,23,.28)}
::-webkit-scrollbar-track{background:transparent}
.muted{color:var(--text-dim)}