:root{
  --bg:#0d0e12; --bg2:#15171f; --panel:#1a1c25; --line:#272a36;
  --fg:#f1f2f5; --muted:#9aa0ac; --faint:#5b606c;
  --accent:#ffb02e; --accent2:#ff7a00; --danger:#ff5d5d;
  --radius:14px; --sb:248px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

/* ---------- 登录 ---------- */
.login-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1000px 500px at 50% -10%,#1d1f2b,var(--bg) 60%)}
.login-card{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;padding:40px 32px;text-align:center;display:flex;flex-direction:column;gap:14px}
.login-spark{font-size:48px;filter:drop-shadow(0 0 20px rgba(255,176,46,.5))}
.login-card h1{font-size:26px;background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.login-sub{color:var(--muted);font-size:14px;margin-bottom:8px}
.login-input,.login-btn{width:100%;padding:13px 16px;border-radius:12px;font-size:15px}
.login-input{background:var(--bg2);border:1px solid var(--line);color:var(--fg)}
.login-input:focus{outline:none;border-color:var(--accent)}
.login-btn{border:none;color:#1a1206;font-weight:700;
  background:linear-gradient(90deg,var(--accent),var(--accent2))}
.login-error{color:var(--danger);font-size:13px}

/* ---------- 布局 ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{width:var(--sb);flex-shrink:0;background:var(--bg2);border-right:1px solid var(--line);
  padding:22px 16px;display:flex;flex-direction:column;gap:16px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{font-size:17px;font-weight:700}
.stat{color:var(--faint);font-size:13px;margin-top:-8px}
.search input{width:100%;padding:9px 12px;border-radius:10px;background:var(--panel);
  border:1px solid var(--line);color:var(--fg);font-size:14px}
.search input:focus{outline:none;border-color:var(--accent)}
.tags{display:flex;flex-direction:column;gap:2px;overflow:auto;flex:1}
.tag{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:9px;
  color:var(--muted);font-size:14px}
.tag:hover{background:var(--panel);color:var(--fg)}
.tag.on{background:var(--panel);color:var(--accent)}
.tag-count{color:var(--faint);font-size:12px}
.logout button{width:100%;padding:9px;border-radius:10px;background:transparent;border:1px solid var(--line);
  color:var(--muted)}
.logout button:hover{border-color:var(--danger);color:var(--danger)}

.main{flex:1;display:flex;flex-direction:column;max-width:760px;margin:0 auto;width:100%;padding:0 20px}
.topbar{display:flex;align-items:center;gap:12px;padding:18px 0 8px;position:sticky;top:0;background:var(--bg);z-index:5}
.menu-btn{display:none;background:none;border:none;color:var(--fg);font-size:20px}
.topbar-title{font-size:15px;color:var(--muted);font-weight:600}

/* ---------- 速记输入框 ---------- */
.composer{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;margin-bottom:22px;transition:border-color .15s}
.composer:focus-within{border-color:var(--accent)}
.composer textarea{width:100%;background:transparent;border:none;color:var(--fg);font-size:15.5px;
  resize:none;line-height:1.65}
.composer textarea:focus{outline:none}
.composer-bar{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.hint{color:var(--faint);font-size:12.5px}
.send-btn{padding:8px 20px;border:none;border-radius:10px;font-weight:700;color:#1a1206;
  background:linear-gradient(90deg,var(--accent),var(--accent2))}
.send-btn:active{transform:translateY(1px)}

/* ---------- 卡片流 ---------- */
.stream{display:flex;flex-direction:column;gap:12px;padding-bottom:80px}
.empty{color:var(--faint);text-align:center;padding:48px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.card:hover{border-color:#333747}
.card-content{white-space:pre-wrap;word-break:break-word;font-size:15px}
.card-foot{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.card-foot time{color:var(--faint);font-size:12.5px}
.chip{color:var(--accent);font-size:12.5px;background:rgba(255,176,46,.1);padding:2px 8px;border-radius:20px}
.del{margin-left:auto}
.del button{background:none;border:none;color:var(--faint);font-size:13px;padding:2px 6px;border-radius:6px}
.del button:hover{color:var(--danger);background:rgba(255,93,93,.1)}

/* ---------- 手机端 ---------- */
@media (max-width:768px){
  .sidebar{position:fixed;left:0;top:0;z-index:20;transform:translateX(-100%);transition:transform .2s;
    box-shadow:0 0 40px rgba(0,0,0,.5)}
  .sidebar.open{transform:translateX(0)}
  .menu-btn{display:block}
  .main{padding:0 14px;padding-bottom:0}
  .composer{position:fixed;left:0;right:0;bottom:0;margin:0;border-radius:16px 16px 0 0;z-index:10;
    padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .composer textarea{rows:2}
  .stream{padding-bottom:170px}
  .topbar{padding-top:14px}
}
.backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:15}
.backdrop.show{display:block}