/* ========== ComicWord · 漫间词（联机版）—— 黑白蓝主题 ========== */
:root{
  --bg1:#070b16;
  --bg2:#0d1526;
  --panel:rgba(15,23,42,.84);
  --panel2:rgba(24,36,62,.92);
  --accent:#3b82f6;
  --accent2:#6ea8ff;
  --gold:#a5c9ff;
  --text:#f8fafc;
  --muted:#94a3b8;
  --line:rgba(148,163,184,.16);
  --ok:#34d399;
  --warn:#fbbf24;
  --danger:#f87171;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:radial-gradient(1200px 700px at 20% -10%,#16294e 0%,var(--bg1) 55%,#010308 100%);
  color:var(--text);
  min-height:100vh;
}
.app{max-width:1600px;margin:0 auto;padding:14px 18px calc(40px + env(safe-area-inset-bottom))}
.hidden{display:none!important}
.muted{color:var(--muted);font-size:.8em}
.tip{font-size:.75rem;color:var(--muted);margin-top:8px;line-height:1.5}

/* 顶栏 */
.topbar{display:flex;align-items:center;gap:12px;padding:10px 4px 16px;flex-wrap:wrap}
.logo{font-size:1.15rem;letter-spacing:1px;background:linear-gradient(90deg,var(--accent2),#e8f1ff);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.top-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.search-input{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:14px;padding:8px 14px;width:220px;outline:none;font-size:.85rem}
.search-input:focus{border-color:var(--accent)}
.icon-btn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--accent2);font-size:1.1rem;cursor:pointer;transition:.2s}
.icon-btn:hover{background:var(--accent);color:#fff}

/* 布局：左(番茄/字数/自习室) 中(日程表日历+稿单) 右(DDL) */
.layout{display:grid;grid-template-columns:340px 1fr 330px;gap:14px;align-items:start}
@media(max-width:1280px){.layout{grid-template-columns:340px 1fr}}
@media(max-width:860px){.layout{grid-template-columns:1fr}}
.panel{background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.panel-head h2,.room-card h3,.word-card h3,.ddl-card h3{font-size:.95rem;color:var(--accent2);letter-spacing:1px}

/* 番茄钟 */
.timer-tabs{display:flex;gap:4px;background:rgba(0,0,0,.25);padding:3px;border-radius:10px}
.timer-tabs .tab{border:none;background:transparent;color:var(--muted);padding:5px 12px;border-radius:8px;font-size:.78rem;cursor:pointer}
.timer-tabs .tab.active{background:var(--accent);color:#fff}
.timer-circle{position:relative;width:230px;height:230px;margin:6px auto}
.timer-circle svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(255,255,255,.10);stroke-width:10}
.ring-fg{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;stroke-dasharray:615.75;stroke-dashoffset:0;transition:stroke-dashoffset .5s linear}
.timer-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.timer-display{font-size:2.6rem;font-weight:700;font-variant-numeric:tabular-nums}
.timer-btn{min-width:96px}
.btn-primary{background:linear-gradient(135deg,var(--accent),#1e4fb8);color:#fff;border:none;border-radius:14px;padding:10px 18px;font-size:.9rem;cursor:pointer;box-shadow:0 4px 14px rgba(59,130,246,.35);transition:.2s}
.btn-primary:active{transform:scale(.96)}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--accent2);border:1px solid var(--line);border-radius:12px;padding:8px 14px;font-size:.82rem;cursor:pointer}
.timer-stats{display:flex;justify-content:center;gap:18px;margin-top:6px;font-size:.8rem;color:var(--muted)}
.timer-stats b{color:var(--gold)}

/* 字数打卡 */
.word-card{margin-top:18px;border-top:1px dashed var(--line);padding-top:14px}
.word-card h3{margin-bottom:10px}
.word-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.word-input{flex:1;min-width:120px;background:rgba(0,0,0,.25);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:10px 12px;font-size:1rem;outline:none}
.word-input:focus{border-color:var(--accent)}
.word-stats{display:flex;gap:14px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);margin-top:4px}
.word-stats b{color:var(--ok);font-size:1rem}
.recent-words{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.recent-words span{background:rgba(255,255,255,.06);border-radius:8px;padding:4px 8px;font-size:.72rem;color:var(--muted)}

/* 自习室（左栏内嵌） */
.room-card{background:rgba(0,0,0,.20);border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:16px}
.room-card h3{margin-bottom:4px}
.room-box{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.room-join-row{display:flex;gap:8px}
.room-input{flex:1;min-width:100px;background:rgba(0,0,0,.25);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:9px 10px;font-size:.85rem;outline:none}
.room-input:focus{border-color:var(--accent)}
.room-countdown{text-align:center;padding:12px;border-radius:12px;background:rgba(0,0,0,.25)}
.countdown-num{font-size:1.8rem;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.countdown-label{font-size:.75rem;color:var(--muted);margin-top:4px}
.room-members{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.room-members span{background:rgba(255,255,255,.07);border-radius:10px;padding:5px 10px;font-size:.75rem}
.room-members .me{border:1px solid var(--accent);color:var(--accent2)}
.room-code{background:rgba(165,201,255,.12);color:var(--gold);padding:3px 8px;border-radius:6px;letter-spacing:2px;font-weight:600}

/* 稿单列表 */
.work-list{display:flex;flex-direction:column;gap:10px}
.work-item{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:.2s;position:relative}
.work-item:hover{border-color:var(--accent)}
.work-item.done{opacity:.62}
.work-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.work-title{font-size:.95rem;font-weight:600;flex:1;min-width:120px}
.work-type{font-size:.68rem;background:rgba(255,255,255,.08);padding:3px 8px;border-radius:6px;color:var(--accent2)}
.status{font-size:.7rem;padding:3px 9px;border-radius:8px;border:1px solid}
.status.st-progress{color:var(--warn);border-color:rgba(251,191,36,.55)}
.status.st-todo{color:var(--accent);border-color:rgba(59,130,246,.55)}
.status.st-done{color:var(--ok);border-color:rgba(52,211,153,.55)}
.status.st-pause{color:var(--muted);border-color:var(--line)}
.work-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
.work-meta b{color:var(--text)}
.work-meta .money{color:var(--gold)}
.work-actions{display:flex;gap:6px;margin-top:2px}
.work-actions button{border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--accent2);border-radius:8px;padding:5px 10px;font-size:.72rem;cursor:pointer}
.work-actions button:active{background:var(--accent);color:#fff}
.empty-tip{text-align:center;color:var(--muted);padding:26px 0;font-size:.85rem;white-space:pre-line}

/* ========== 日程表大日历（中栏） ========== */
.calendar-panel .cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.cal-title{font-size:1rem;color:var(--text);font-weight:600}
.mini-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);cursor:pointer;font-size:1rem}
.mini-btn:hover{border-color:var(--accent);color:var(--accent2)}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:4px}
.cal-weekdays span{text-align:center;font-size:.7rem;color:var(--muted);padding:4px 0;letter-spacing:1px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-day{min-height:72px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid transparent;padding:6px 4px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;cursor:pointer;transition:.15s;color:var(--text);position:relative}
.cal-day:hover{border-color:var(--accent);background:rgba(59,130,246,.10)}
.cal-day.other{opacity:.2;cursor:default;background:transparent}
.cal-day.other:hover{border-color:transparent;background:transparent}
.cal-day.today{background:rgba(59,130,246,.20);border-color:var(--accent)}
.cal-day.deadline{box-shadow:inset 0 0 0 1px rgba(251,191,36,.55)}
.cal-day .cal-date{font-size:.85rem;font-weight:600}
.cal-day .cal-count{font-size:.62rem;color:var(--accent2)}
.cal-day .cal-amount{font-size:.6rem;color:var(--gold)}
.cal-day .cal-words{font-size:.6rem;color:var(--muted)}

/* ========== DDL 提醒（右栏） ========== */
.ddl-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px}
.ddl-card h3{margin-bottom:10px}
.ddl-stat{display:flex;gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed var(--line)}
.ddl-stat b{font-size:.95rem}
.ddl-stat .over b{color:var(--danger)}
.ddl-stat .soon b{color:var(--warn)}
.ddl-stat .all b{color:var(--text)}
.ddl-box{display:flex;flex-direction:column;gap:8px;max-height:72vh;overflow:auto}
.ddl-item{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:5px}
.ddl-item:hover{border-color:var(--accent)}
.ddl-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ddl-title{font-size:.85rem;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ddl-badge{font-size:.66rem;padding:2px 8px;border-radius:8px;white-space:nowrap}
.ddl-overdue{background:rgba(248,113,113,.14);color:var(--danger);border:1px solid rgba(248,113,113,.5)}
.ddl-soon{background:rgba(251,191,36,.12);color:var(--warn);border:1px solid rgba(251,191,36,.45)}
.ddl-normal{background:rgba(59,130,246,.12);color:var(--accent2);border:1px solid rgba(59,130,246,.45)}
.ddl-meta{font-size:.72rem;color:var(--muted)}
.ddl-meta b{color:var(--text)}

/* ========== 某日排单详情 ========== */
.day-card{width:min(560px,94vw)}
.day-stats{font-size:.78rem;color:var(--muted);background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.3);border-radius:10px;padding:8px 12px;margin-bottom:10px}
.day-stats b{color:var(--accent2)}
.day-body{display:flex;flex-direction:column}
.day-work{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.day-work-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.day-work .work-title{font-size:.9rem;font-weight:600;flex:1;min-width:100px}
.day-work .work-type{font-size:.68rem;background:rgba(255,255,255,.08);padding:3px 8px;border-radius:6px;color:var(--accent2)}

/* 模态 */
.modal{position:fixed;inset:0;background:rgba(2,6,16,.72);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.modal-card{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:22px;width:min(460px,94vw);max-height:88vh;overflow:auto;display:flex;flex-direction:column;gap:12px}
.modal-card h3{color:var(--accent2);margin-bottom:4px}
.modal-card label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;color:var(--muted)}
.modal-card input,.modal-card select{background:rgba(0,0,0,.25);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:9px 11px;font-size:.9rem;outline:none}
.modal-card input:focus{border-color:var(--accent)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}

/* toast */
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);background:rgba(10,16,30,.94);border:1px solid var(--accent);color:var(--text);padding:11px 22px;border-radius:14px;font-size:.85rem;z-index:99;box-shadow:0 8px 30px rgba(0,0,0,.5);animation:pop .25s}
@keyframes pop{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ========== 联机版：账号 + 房间成员 ========== */
.account-btn{background:rgba(59,130,246,.15);border:1px solid var(--accent);color:var(--accent2);border-radius:12px;padding:7px 14px;font-size:.82rem;cursor:pointer;white-space:nowrap}
.account-btn.logged{background:rgba(165,201,255,.15);border-color:var(--gold);color:var(--gold)}
.auth-tabs{display:flex;gap:6px;background:rgba(0,0,0,.25);border-radius:12px;padding:4px}
.auth-tab{flex:1;border:none;background:transparent;color:var(--muted);padding:8px 0;border-radius:9px;cursor:pointer;font-size:.85rem}
.auth-tab.active{background:rgba(59,130,246,.2);color:var(--accent2)}
.room-empty{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;padding:8px 0;color:var(--muted);font-size:.82rem}
.room-join-divider{text-align:center;color:var(--muted);font-size:.72rem;margin:4px 0}
.room-members-title{font-size:.72rem;color:var(--muted);margin-top:8px}
.room-members{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.member-row{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.06);border-radius:10px;padding:7px 11px;font-size:.78rem}
.member-row.me{border:1px solid var(--accent);background:rgba(59,130,246,.10)}
.member-name{color:var(--text)}
.member-words{color:var(--gold)}