/*
  考研总工作台 — iOS 27 Liquid Glass
*/

/* ── Design Tokens ── */
:root{
  --canvas:#f2f2f7;
  --glass-bg:rgba(255,255,255,0.62);
  --glass-border:rgba(255,255,255,0.72);
  --glass-blur:blur(28px);
  --shadow:0 8px 40px rgba(0,0,0,0.06);
  --ink:#1c1c1e;--ink2:#48484a;--muted:#8e8e93;--faint:#aeaeb2;
  --line:rgba(60,60,67,0.08);
  --accent:#007aff;--accent-soft:rgba(0,122,255,0.10);
  --green:#34c759;--orange:#ff9500;--red:#ff3b30;--purple:#af52de;
  --eng:#007aff;--math:#af52de;--mech:#34c759;
  --sans:-apple-system,"SF Pro Display","Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
  --num:"SF Pro Display","Bahnschrift","Segoe UI Variable Display",-apple-system,sans-serif;
  --mono:"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.25,.1,.25,1);
  color-scheme:light;
}
body.dark{
  --canvas:#000;--glass-bg:rgba(28,28,30,0.68);--glass-border:rgba(255,255,255,0.10);
  --shadow:0 8px 40px rgba(0,0,0,0.30);
  --ink:#f5f5f7;--ink2:#d1d1d6;--muted:#98989d;--faint:#636366;
  --line:rgba(255,255,255,0.08);--accent-soft:rgba(0,122,255,0.18);
  color-scheme:dark;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;background:var(--canvas);scroll-behavior:smooth}
body{margin:0;min-height:100vh;overflow-x:hidden;background:var(--canvas);color:var(--ink);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,122,255,.12)}
button,input,select,textarea{font:inherit;touch-action:manipulation}
button{cursor:pointer;border:0;background:transparent;color:inherit}
button:disabled{cursor:not-allowed;opacity:.45}
a{color:var(--accent);text-decoration:none}

/* ── Ambient Background ── */
body::before,body::after{content:"";position:fixed;border-radius:50%;filter:blur(120px);z-index:-1;pointer-events:none;will-change:transform}
body::before{top:-18vw;left:-12vw;width:50vw;height:50vw;background:rgba(0,122,255,.14)}
body::after{bottom:-22vw;right:-14vw;width:55vw;height:55vw;background:rgba(175,82,222,.10)}
body.dark::before{background:rgba(0,122,255,.08)}
body.dark::after{background:rgba(175,82,222,.06)}

/* ── Focus & A11y ── */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(0,122,255,.40);outline-offset:3px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;z-index:1000;left:14px;top:-60px;padding:9px 15px;border-radius:12px;background:var(--accent);color:#fff;font-weight:600;font-size:13px}
.skip-link:focus{top:14px}

/* ── Shell ── */
.shell{width:min(1420px,100%);margin:0 auto;padding:0 26px max(50px,env(safe-area-inset-bottom))}

/* ── Topbar ── */
.topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;margin-bottom:20px;padding:0 4px;background:var(--glass-bg);border-bottom:.5px solid var(--glass-border);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.logo{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:14px;background:linear-gradient(145deg,#0a84ff,#5e5ce6);box-shadow:0 6px 18px rgba(0,122,255,.25);color:#fff;font-size:19px;font-weight:900}
.brand strong{display:block;font-size:18px;letter-spacing:-.03em}
.brand small{display:block;margin-top:2px;color:var(--muted);font-size:10px;letter-spacing:.05em}
.top-actions{display:flex;align-items:center;gap:8px}
.countdown{padding:5px 12px;border-radius:12px;background:var(--accent-soft);color:var(--accent);font:700 12px/1.3 var(--num);font-variant-numeric:tabular-nums lining-nums}

/* ── Buttons ── */
.icon-text-button,.quiet-button{min-height:38px;padding:7px 14px;border:.5px solid var(--line);border-radius:12px;background:rgba(255,255,255,.45);color:var(--ink2);font-size:13px;font-weight:500;transition:transform .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
body.dark .icon-text-button,body.dark .quiet-button{background:rgba(255,255,255,.06)}
.icon-text-button:hover,.quiet-button:hover{background:rgba(0,122,255,.06);border-color:rgba(0,122,255,.18);color:var(--accent)}
.primary-button{min-height:40px;padding:9px 18px;border-radius:12px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;box-shadow:0 4px 14px rgba(0,122,255,.18);transition:transform .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.primary-button:hover{background:#0066d6;transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,122,255,.25)}
.primary-button:active{transform:scale(.97)}
.text-button{min-height:34px;padding:5px 10px;border-radius:10px;background:transparent;color:var(--accent);font-size:12px;font-weight:500;transition:background .2s var(--ease)}
.text-button:hover{background:var(--accent-soft)}
.link-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--accent);font-size:12px;font-weight:600}

/* ── Eyebrow ── */
.eyebrow{display:block;color:var(--muted);font:800 9px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase}

/* ── Hero ── */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;min-height:220px;margin-bottom:16px;padding:32px 36px;background:var(--glass-bg);border:.5px solid var(--glass-border);border-radius:26px;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow)}
.hero-copy>*+*{margin-top:4px}
.hero h1{margin:8px 0 4px;font-size:clamp(26px,4vw,42px);line-height:1.12;letter-spacing:-.055em;text-wrap:balance}
.hero-copy>p{margin:0;color:var(--muted);font-size:12px;line-height:1.65}
.hero-action{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:680px;margin-top:18px;padding:12px 14px 12px 16px;border:.5px solid var(--line);border-radius:16px;background:rgba(255,255,255,.38)}
body.dark .hero-action{background:rgba(255,255,255,.05)}
.hero-action>div{min-width:0}
.hero-action span,.hero-action small{display:block;color:var(--muted);font-size:10px}
.hero-action strong{display:block;margin:3px 0;font-size:14px}
.hero-action a{flex:0 0 auto;padding:9px 16px;border-radius:12px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;box-shadow:0 4px 14px rgba(0,122,255,.18)}
.hero-action a:hover{background:#0066d6;transform:translateY(-1px)}

/* Progress Ring (SVG) */
.hero-progress{position:relative;display:grid;place-items:center;width:130px;height:130px;flex-shrink:0}
.progress-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.progress-ring-track{fill:none;stroke:var(--line);stroke-width:8}
.progress-ring-fill{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;stroke-dasharray:326.73;stroke-dashoffset:326.73;transition:stroke-dashoffset .8s var(--ease)}
.progress-text{position:relative;text-align:center;z-index:1}
.progress-text strong{display:block;font:700 28px/1 var(--num);letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.progress-text span{display:block;margin-top:6px;color:var(--muted);font-size:10px}
.progress-text small{display:block;margin-top:2px;color:var(--faint);font-size:9px}

/* ── Subject Strip ── */
.subject-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:20px}
.subject-status{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;padding:14px 15px;background:var(--glass-bg);border:.5px solid var(--glass-border);border-radius:18px;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow);transition:transform .2s var(--ease)}
.subject-status:hover{transform:translateY(-2px)}
.subject-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;color:#fff;font-weight:900;font-size:14px}
.subject-english .subject-mark{background:var(--eng)}
.subject-math .subject-mark{background:var(--math)}
.subject-mechanics .subject-mark{background:var(--mech)}
.subject-status-copy{min-width:0}
.subject-status-copy>div{display:flex;align-items:center;gap:6px}
.subject-status-copy strong{font-size:13px}
.subject-status-copy p{margin:3px 0 0;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subject-status-copy small{display:block;margin-top:4px;color:var(--faint);font-size:9px}
.subject-status>a{color:var(--accent);font-size:11px;font-weight:600;min-width:44px;min-height:36px;display:grid;place-items:center;border-radius:10px;transition:background .2s var(--ease)}
.subject-status>a:hover{background:var(--accent-soft)}
.subject-progress{display:block;height:3px;border-radius:999px;background:var(--line);overflow:hidden;grid-column:1/-1}
.subject-progress i{display:block;height:100%;border-radius:inherit;background:var(--eng);transition:width .5s var(--ease)}
.subject-math .subject-progress i{background:var(--math)}
.subject-mechanics .subject-progress i{background:var(--mech)}

/* Status Badges */
.status-badge{padding:2px 7px;border-radius:999px;font-size:8px;font-weight:800;letter-spacing:.02em}
.status-ready{background:rgba(52,199,89,.12);color:var(--green)}
.status-stale{background:rgba(255,149,0,.12);color:var(--orange)}
.status-offline,.status-needs_login{background:rgba(255,59,48,.10);color:var(--red)}
.status-preview{background:var(--accent-soft);color:var(--accent)}

/* ── Workspace Layout ── */
.workspace-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px}
.workspace-main{min-width:0;display:grid;gap:24px;align-content:start}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:10px}
.section-head h2{margin:5px 0 0;font-size:20px;letter-spacing:-.04em}

/* ── Route Rail ── */
.route-rail{position:relative;display:grid;gap:10px;padding:4px 0}
.route-rail::before{content:"";position:absolute;left:22px;top:28px;bottom:28px;width:2px;border-radius:99px;background:linear-gradient(var(--eng),var(--math),var(--mech));opacity:.25}
.route-item{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 14px 13px 0;background:var(--glass-bg);border:.5px solid var(--glass-border);border-radius:18px;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow);transition:transform .2s var(--ease)}
.route-item:hover{transform:translateY(-1px)}
.route-node{position:relative;z-index:1;display:grid;place-items:center}
.route-node span{display:grid;place-items:center;width:30px;height:30px;border:4px solid var(--canvas);border-radius:50%;background:var(--eng);color:#fff;font:700 10px/1 var(--num);box-shadow:0 0 0 1px rgba(0,122,255,.15)}
body.dark .route-node span{border-color:var(--canvas)}
.route-math .route-node span{background:var(--math);box-shadow:0 0 0 1px rgba(175,82,222,.15)}
.route-mechanics .route-node span{background:var(--mech);box-shadow:0 0 0 1px rgba(52,199,89,.15)}
.route-copy{min-width:0}
.route-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.route-title-row strong{font-size:13px}
.route-title-row span{flex:0 0 auto;color:var(--muted);font:500 10px var(--num);font-variant-numeric:tabular-nums}
.route-copy p{margin:4px 0 0;color:var(--muted);font-size:10px;line-height:1.5}
.route-copy small{color:var(--faint);font-size:9px}
.route-start{padding:8px 13px;border:.5px solid rgba(0,122,255,.18);border-radius:10px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700;text-decoration:none;transition:transform .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.route-start:hover{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(0,122,255,.2)}

/* ── Tasks ── */
.tasks-section,.weekly-section{margin-top:0}
.tasks{display:grid;gap:8px}
.task{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 14px;background:var(--glass-bg);border:.5px solid var(--glass-border);border-radius:16px;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow);transition:transform .2s var(--ease)}
.task:hover{transform:translateY(-1px)}
.task.done{opacity:.55}
.task-check{display:grid;place-items:center;width:26px;height:26px;padding:0;border:2px solid var(--muted);border-radius:50%;background:transparent;color:transparent;font-size:12px;font-weight:900;transition:transform .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.task-check[aria-pressed="true"]{border-color:var(--green);background:var(--green);color:#fff}
.task-copy{min-width:0}
.task-copy strong{display:block;font-size:13px}
.task-copy p{margin:3px 0 0;color:var(--muted);font-size:10px;line-height:1.5}
.task-copy small{color:var(--faint);font-size:9px}
.task>a{color:var(--accent);font-size:11px;font-weight:600;text-decoration:none;padding:6px 10px;border-radius:8px;transition:background .2s var(--ease)}
.task>a:hover{background:var(--accent-soft)}

/* ── Weekly ── */
.weekly-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:10px}
.weekly-summary,.weekly-subjects{padding:18px;background:var(--glass-bg);border:.5px solid var(--glass-border);border-radius:18px;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow)}
.weekly-summary strong{display:block;font:700 32px/1 var(--num);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em}
.weekly-summary span{display:block;margin-top:6px;color:var(--muted);font-size:10px}
.weekly-summary p{margin:12px 0 0;color:var(--ink2);font-size:10px;line-height:1.6}
.weekly-subjects{display:grid;gap:11px}
.weekly-subjects>div{display:grid;grid-template-columns:66px 72px 1fr;gap:8px;align-items:center;font-size:10px}
.weekly-subjects span{color:var(--ink2)}
.weekly-subjects b{font:500 9px var(--num);text-align:right;font-variant-numeric:tabular-nums}
.weekly-subjects i{height:5px;border-radius:999px;background:var(--line);overflow:hidden}
.weekly-subjects em{display:block;height:100%;border-radius:inherit;font-style:normal}
.bar-english{background:var(--eng)}
.bar-math{background:var(--math)}
.bar-mechanics{background:var(--mech)}

/* ── Side Cards ── */
.workspace-side{display:grid;align-content:start;gap:12px}
.side-card{padding:18px;background:var(--glass-bg);border:.5px solid var(--glass-border);border-radius:20px;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow)}
.side-card h2{margin:6px 0 10px;font-size:16px;letter-spacing:-.03em}
.side-card>p{color:var(--muted);font-size:10px;line-height:1.7}
.focus-card{background:linear-gradient(145deg,rgba(0,122,255,.06),rgba(94,92,230,.04)),var(--glass-bg)}
body.dark .focus-card{background:linear-gradient(145deg,rgba(0,122,255,.10),rgba(94,92,230,.06)),var(--glass-bg)}
.focus-task{min-height:28px;margin:0;text-align:center;font-size:13px;line-height:1.5;color:var(--ink2)}
.focus-time{margin:8px 0 14px;text-align:center;font:700 38px/1 var(--num);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em;color:var(--accent)}
.focus-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.focus-actions .text-button{grid-column:1/-1;min-height:28px;padding:3px}
.search-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}
.search-form input,.log-form input,.log-form select,.modal input,.modal select,.modal textarea{width:100%;min-width:0;min-height:38px;padding:8px 12px;border:.5px solid var(--line);border-radius:12px;background:rgba(255,255,255,.55);color:var(--ink);font-size:13px;transition:border-color .2s var(--ease)}
body.dark .search-form input,body.dark .log-form input,body.dark .log-form select,body.dark .modal input,body.dark .modal select,body.dark .modal textarea{background:rgba(255,255,255,.06)}
.search-form input:focus,.log-form input:focus,.log-form select:focus,.modal input:focus,.modal select:focus,.modal textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,122,255,.10)}
.search-results{display:grid;gap:6px;max-height:310px;margin-top:10px;overflow:auto;overscroll-behavior:contain}
.search-results>a{display:block;padding:9px 10px;border:.5px solid var(--line);border-radius:12px;background:rgba(255,255,255,.35);text-decoration:none;transition:background .2s var(--ease)}
body.dark .search-results>a{background:rgba(255,255,255,.04)}
.search-results>a:hover{background:var(--accent-soft)}
.search-results span,.search-results small{display:block;color:var(--muted);font-size:8px}
.search-results strong{display:block;margin:2px 0;color:var(--ink);font-size:11px;overflow-wrap:anywhere}
.searching{margin:8px 0!important;color:var(--muted);font-size:10px!important}
.log-form{display:grid;grid-template-columns:54px 1fr;gap:7px;align-items:center}
.log-form label{color:var(--muted);font-size:10px;font-weight:600}
.log-form button{grid-column:1/-1}
.data-card p{line-height:1.7}
.button-row{display:flex;gap:7px;flex-wrap:wrap}

/* ── Empty ── */
.empty{display:grid;place-items:center;gap:4px;min-height:88px;padding:20px;border:1px dashed var(--line);border-radius:16px;color:var(--muted);text-align:center}
.empty strong{color:var(--ink2);font-size:12px}
.empty span{font-size:10px}

/* ── Modal ── */
.modal-backdrop{position:fixed;z-index:500;inset:0;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.18);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overscroll-behavior:contain}
.modal{width:min(520px,100%);max-height:min(88vh,760px);overflow:auto;padding:26px;background:var(--glass-bg);border:.5px solid var(--glass-border);border-radius:24px;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:0 25px 80px rgba(0,0,0,.18)}
body.dark .modal{box-shadow:0 25px 80px rgba(0,0,0,.50)}
.modal h2{margin:0 0 16px;font-size:20px;letter-spacing:-.04em}
.modal label{display:block;margin:12px 0 5px;color:var(--ink2);font-size:10px;font-weight:700}
.modal textarea{min-height:86px;resize:vertical}
.modal-help{margin:12px 0;color:var(--muted);font-size:10px;line-height:1.65}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

/* ── Toast ── */
.toast{position:fixed;z-index:700;left:50%;bottom:max(28px,env(safe-area-inset-bottom));max-width:min(92vw,480px);padding:11px 18px;border-radius:999px;background:var(--glass-bg);border:.5px solid var(--glass-border);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--shadow);color:var(--ink);font-size:12px;font-weight:500;opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:opacity .25s var(--ease),transform .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ── Responsive ── */
@media(max-width:1000px){
  .workspace-layout{grid-template-columns:1fr}
  .workspace-side{grid-template-columns:repeat(2,minmax(0,1fr))}.focus-card{grid-row:span 2}
  .subject-strip{grid-template-columns:1fr}
  .weekly-grid{grid-template-columns:1fr 1.4fr}
}
@media(max-width:680px){
  .shell{padding:0 12px max(34px,env(safe-area-inset-bottom))}
  .topbar{gap:10px;height:56px}
  .brand small{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top-actions{flex-wrap:wrap;justify-content:flex-end}
  .countdown{width:100%;margin:0;text-align:right;font-size:10px}
  .icon-text-button{min-height:36px;padding:6px 10px;font-size:11px}
  .hero{grid-template-columns:1fr;padding:24px 20px;min-height:auto}
  .hero-progress{width:100px;height:100px;justify-self:center}
  .hero h1{font-size:28px}
  .hero-action{flex-direction:column;align-items:stretch}
  .hero-action a{text-align:center}
  .workspace-side{grid-template-columns:1fr}.focus-card{grid-row:auto}
  .route-item{grid-template-columns:45px minmax(0,1fr);padding-right:12px}
  .route-start{grid-column:2;width:100%;text-align:center}
  .route-title-row{flex-direction:column;align-items:flex-start;gap:3px}
  .route-rail::before{left:22px}
  .weekly-grid{grid-template-columns:1fr}
  .section-head h2{font-size:18px}
  .subject-status>a{min-width:44px;min-height:44px}
  .modal{padding:20px}
  .search-form{grid-template-columns:1fr}.search-form button{width:100%}
  .primary-button,.quiet-button{min-height:42px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}