/* ============================================================
   游泳训练计划助手 · 可交互原型 · 全局样式
   色彩系统 v1.0 —— 柔和低饱和，全产品统一，禁止引入新色
   ============================================================ */
:root{
  --bg:#F7F8FA; --surface:#FFFFFF; --ink:#2C3344; --ink-2:#5A6378; --ink-3:#94A0B4;
  --line:#E8EBF1; --line-2:#F0F2F6;
  --brand:#5B8DEF; --brand-soft:#EEF3FD;
  --water:#6B9FE8; --dryland:#A98BD4; --tech:#6FB99A; --intensity:#E0AB6E; --sprint:#DB8E8E;
  --water-soft:#EEF3FD; --dryland-soft:#F2ECF9; --tech-soft:#E9F5EF; --intensity-soft:#F7EFE2; --sprint-soft:#F8ECEC;
  --today:#EEF3FD; --ok:#6FB99A; --warn:#E0AB6E; --danger:#DB8E8E;
  --nav-bg:#2C3344;
  --radius-card:10px; --radius-btn:8px; --radius-pill:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;font-size:14px}

/* ---------- 应用框架 ---------- */
.app{display:flex;height:100vh;overflow:hidden}

/* 左侧导航 */
.sidenav{width:220px;flex-shrink:0;background:var(--nav-bg);color:#C9D3E8;display:flex;flex-direction:column}
.sidenav .brand{padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidenav .brand .logo{font-size:20px;font-weight:700;color:#fff;letter-spacing:-.3px}
.sidenav .brand .logo em{font-style:normal;color:var(--brand)}
.sidenav .brand .team{margin-top:6px;font-size:12px;color:#8E9BB5;display:flex;align-items:center;gap:6px;cursor:pointer}
.sidenav .brand .team:hover{color:#C9D3E8}
.sidenav .nav{flex:1;padding:12px 12px;overflow-y:auto}
.sidenav .nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-btn);color:#AAB6CE;text-decoration:none;font-size:14px;margin-bottom:2px;transition:background .15s}
.sidenav .nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.sidenav .nav a.on{background:var(--brand);color:#fff;font-weight:600}
.sidenav .nav a .ico{width:20px;text-align:center;font-size:15px;opacity:.9}
.sidenav .nav a .soon{margin-left:auto;font-size:10px;color:#74829E;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:0 6px}
.sidenav .nav a.on .soon{display:none}
.sidenav .me{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;cursor:pointer}
.sidenav .me:hover{background:rgba(255,255,255,.04)}
.sidenav .me .ava{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.sidenav .me .nm{font-size:13px;color:#E6EBF5;font-weight:600}
.sidenav .me .rl{font-size:11px;color:#8E9BB5}

/* 主区 */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{height:64px;flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px;gap:12px}
.topbar .crumb{font-size:15px;font-weight:700}
.topbar .crumb small{font-weight:400;color:var(--ink-3);font-size:12px;margin-left:6px}
.topbar .pgbtn{width:28px;height:28px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center}
.topbar .pgbtn:hover{background:var(--line-2)}
.topbar .sp{flex:1}
.searchbox{display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-btn);height:36px;padding:0 12px;width:200px}
.searchbox input{border:none;background:none;outline:none;font-size:13px;color:var(--ink);flex:1}
.searchbox input::placeholder{color:var(--ink-3)}
.searchbox .ic{color:var(--ink-3);font-size:13px}
.online{display:flex;align-items:center;margin-left:8px}
.online .a{width:30px;height:30px;border-radius:50%;border:2px solid var(--surface);margin-left:-8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.online .a:first-child{margin-left:0}
.btn{height:36px;padding:0 16px;border-radius:var(--radius-btn);font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:6px;transition:filter .15s}
.btn:hover{filter:brightness(.96)}
.btn-main{background:var(--brand);color:#fff}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink-2)}
.btn-ghost:hover{background:var(--line-2);filter:none}
.btn-sm{height:30px;padding:0 12px;font-size:12px}
.btn-danger-ghost{background:var(--surface);border-color:var(--line);color:var(--danger)}

.content{flex:1;overflow:auto;padding:20px 24px}

/* ---------- 通用组件 ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:16px}
.pill{display:inline-block;padding:2px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:600;line-height:1.6}
.pill-water{background:var(--water-soft);color:var(--water)}
.pill-dry{background:var(--dryland-soft);color:var(--dryland)}
.pill-tech{background:var(--tech-soft);color:var(--tech)}
.pill-int{background:var(--intensity-soft);color:var(--intensity)}
.pill-sprint{background:var(--sprint-soft);color:var(--sprint)}
.pill-brand{background:var(--brand-soft);color:var(--brand)}
.pill-gray{background:var(--line-2);color:var(--ink-2)}

/* 弹窗 */
.mask{position:fixed;inset:0;background:rgba(24,32,48,.42);display:none;align-items:center;justify-content:center;z-index:200}
.mask.show{display:flex}
.modal{background:var(--surface);border-radius:12px;box-shadow:0 12px 40px rgba(20,30,50,.18);width:520px;max-width:92vw;max-height:86vh;display:flex;flex-direction:column;animation:pop .18s ease}
.modal.wide{width:680px}
@keyframes pop{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.modal .m-head{padding:18px 22px 0;display:flex;align-items:flex-start;justify-content:space-between}
.modal .m-head .tt{font-size:17px;font-weight:700}
.modal .m-head .sub{font-size:12px;color:var(--ink-3);margin-top:2px}
.modal .x{width:30px;height:30px;border-radius:8px;border:none;background:var(--line-2);color:var(--ink-2);cursor:pointer;font-size:13px;flex-shrink:0}
.modal .x:hover{background:var(--line)}
.modal .m-body{padding:16px 22px;overflow-y:auto}
.modal .m-foot{padding:14px 22px 18px;display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--line-2)}

/* 右键菜单 / 弹出菜单 */
.ctxmenu{position:fixed;z-index:300;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(20,30,50,.14);padding:6px;display:none;min-width:150px}
.ctxmenu.show{display:block}
.ctxmenu .it{padding:8px 12px;border-radius:6px;font-size:13px;color:var(--ink-2);cursor:pointer}
.ctxmenu .it:hover{background:var(--line-2);color:var(--ink)}
.ctxmenu .it.danger{color:var(--danger)}
.ctxmenu .it.danger:hover{background:var(--sprint-soft)}
.ctxmenu hr{border:none;border-top:1px solid var(--line-2);margin:4px 0}

/* toast */
.toast-wrap{position:fixed;left:50%;bottom:36px;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;align-items:center;gap:8px}
.toast{background:var(--ink);color:#fff;font-size:13px;border-radius:8px;padding:9px 18px;box-shadow:0 6px 20px rgba(20,30,50,.25);animation:pop .18s ease}
.toast.err{background:var(--danger)}

/* 提示条 */
.callout{border-left:3px solid var(--warn);background:#FBF6EE;padding:10px 14px;border-radius:0 6px 6px 0;font-size:13px}
.callout b{color:var(--ink)}
.callout.ok{border-left-color:var(--ok);background:#EEF7F2}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}

/* ---------- 表单行（01 周期弹窗、复制上周弹窗用到） ---------- */
.fl{font-size:12px;color:var(--ink-2);margin-bottom:4px;font-weight:600}
.inp-line{width:100%;border:1px solid var(--line);border-radius:6px;padding:7px 10px;font-size:13px;color:var(--ink);background:var(--surface);outline:none;box-sizing:border-box;font-variant:inherit}
.inp-line:focus{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}

/* ---------- 标签/图标小元素 ---------- */
.ico{display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1}
.ico-lg{font-size:18px}