/* ============================================================
   Focus Timer — styles.css
   设计令牌与组件规格见 docs/design-system.md（唯一事实来源）。
   配色主题通过 <html data-accent="..."> 切换，深浅通过 data-theme。
   ============================================================ */

:root{
  --bg:#FAF9F6; --surface:#FFFFFF; --surface-2:#F2F1EC;
  --text:#20242E; --text-muted:#5F6673; --border:#E8E6E0; --track:#ECEAE4;
  --danger:#B91C1C;
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Hiragino Sans","Noto Sans CJK SC","Microsoft YaHei","Noto Sans JP","Noto Sans KR",sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --fs-xs:11px; --fs-sm:13px; --fs-base:15px; --fs-md:17px;
  --time:clamp(3rem,12vw,4.5rem);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04); --shadow-md:0 6px 20px rgba(0,0,0,.08);
  color-scheme:light;
  /* --accent-1/2 为亮色装饰（圆环、色点、描边）；文字与主按钮用下方可访问令牌。 */
  --accent-1:#D97706; --accent-2:#EA580C;
  --accent-ink:#92400E; --accent-ink-2:#9A3412;
  /* 开始按钮：与圆环完全相同的渐变；--on-accent 按主题保证 19px/700 大字号 ≥3:1。 */
  --on-accent:#111827;
  /* 表单里的次级主按钮：主题色淡底 + 深色 ink 文字（不用深色实心填充）。 */
  --accent-soft-1:color-mix(in srgb,var(--accent-1) 14%,var(--surface));
  --accent-soft-2:color-mix(in srgb,var(--accent-2) 12%,var(--surface));
  --accent-grad:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  --accent-action:linear-gradient(135deg,var(--accent-soft-1),var(--accent-soft-2));
}
[data-theme="dark"]{
  --bg:#0E1014; --surface:#161A20; --surface-2:#1E232B;
  --text:#E8EAED; --text-muted:#98A0AB; --border:#262C35; --track:#232932;
  --danger:#F87171;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 6px 20px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* ---- 配色主题（5 套；每套含亮色装饰 + 文字安全的 ink + 渐变上的按钮文字） ---- */
[data-accent="mint"]  { --accent-1:#0891B2; --accent-2:#0D9488;
  --accent-ink:#0E7490; --accent-ink-2:#0F766E; --on-accent:#111827; }
[data-accent="coral"] { --accent-1:#E11D48; --accent-2:#EA580C;
  --accent-ink:#BE123C; --accent-ink-2:#9A3412; --on-accent:#FFFFFF; }
[data-accent="violet"]{ --accent-1:#7C3AED; --accent-2:#4F46E5;
  --accent-ink:#6D28D9; --accent-ink-2:#4338CA; --on-accent:#FFFFFF; }
[data-accent="ocean"] { --accent-1:#0284C7; --accent-2:#2563EB;
  --accent-ink:#0369A1; --accent-ink-2:#1D4ED8; --on-accent:#FFFFFF; }
[data-accent="amber"] { --accent-1:#D97706; --accent-2:#EA580C;
  --accent-ink:#92400E; --accent-ink-2:#9A3412; --on-accent:#111827; }
/* 深色下 ink 需提亮；soft 填充由 --surface 自动变深。 */
[data-theme="dark"][data-accent="mint"]  { --accent-ink:#67E8F9; --accent-ink-2:#5EEAD4; }
[data-theme="dark"][data-accent="coral"] { --accent-ink:#FDA4AF; --accent-ink-2:#FDBA74; }
[data-theme="dark"][data-accent="violet"]{ --accent-ink:#C4B5FD; --accent-ink-2:#A5B4FC; }
[data-theme="dark"][data-accent="ocean"] { --accent-ink:#7DD3FC; --accent-ink-2:#93C5FD; }
[data-theme="dark"][data-accent="amber"] { --accent-ink:#FCD34D; --accent-ink-2:#FDBA74; }

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-sans); font-size:var(--fs-base); color:var(--text);
  background:var(--bg); min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-6) var(--sp-4); -webkit-font-smoothing:antialiased;
}
.app{width:100%; max-width:400px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-md); padding:var(--sp-6); text-align:center;}

/* ---- 顶栏：Logo | 语言 | 主题 | 安装 ---- */
.top{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); margin-bottom:var(--sp-4);}
.brand{margin:0; font-weight:600; font-size:var(--fs-md); letter-spacing:.2px; white-space:nowrap;}
.brand .dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--accent-grad); margin-right:7px; vertical-align:middle;}
.right{display:flex; align-items:center; gap:10px; flex:none;}

/* 语言：分段控件（按钮，页面内原地切换，见 app.js setLang） */
.seg{display:inline-flex; background:var(--surface-2); border-radius:var(--r-pill); padding:3px;}
.seg-link{border:none; background:none; font-family:inherit; cursor:pointer; text-align:center;
  display:inline-flex; align-items:center; justify-content:center; min-height:26px;
  text-decoration:none; color:var(--text-muted); font-size:var(--fs-xs); font-weight:600;
  padding:4px 11px; border-radius:var(--r-pill); white-space:nowrap; transition:color .15s, background .15s, box-shadow .15s;}
.seg-link:hover{color:var(--text);}
.seg-link.active{background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm);}
.seg-link:focus-visible{outline:2px solid var(--accent-1); outline-offset:2px;}

.icon-btn{border:1px solid var(--border); background:var(--surface); color:var(--text-muted);
  width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:15px;
  display:flex; align-items:center; justify-content:center; transition:all .15s;}
.icon-btn:hover{background:var(--surface-2); color:var(--text);}
.icon-btn:focus-visible{outline:2px solid var(--accent-1); outline-offset:2px;}
.install-btn svg{width:17px; height:17px; display:block;}
.palette-dot{width:16px; height:16px; border-radius:50%; background:var(--accent-grad);}

/* 顶部配色下拉：强调色单选 + 深色模式复选 */
.menu-wrap{position:relative;}
.menu{position:absolute; top:calc(100% + 8px); right:0; min-width:168px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-md);
  padding:6px; z-index:20; text-align:left;}
.menu-title{font-size:var(--fs-xs); color:var(--text-muted); padding:6px 8px 4px;}
.menu-sep{height:1px; background:var(--border); margin:6px;}
.menu-item{display:flex; align-items:center; gap:10px; width:100%; border:none; background:transparent;
  color:var(--text); font-family:inherit; font-size:var(--fs-sm); padding:8px; border-radius:var(--r-sm);
  cursor:pointer; text-align:left;}
.menu-item:hover{background:var(--surface-2);}
.menu-item:focus-visible{outline:2px solid var(--accent-1); outline-offset:-2px;}
.menu-item[aria-checked="true"]{font-weight:600;}
.menu-item[aria-checked="true"]::after{content:'✓'; margin-left:auto; color:var(--accent-ink);}
.menu-dark .dark-ic{width:16px; height:16px; flex:none; display:flex; align-items:center; justify-content:center;}
.menu-dark svg{width:16px; height:16px; display:block;}
.menu-dark .icon-sun{display:none;}
[data-theme="dark"] .menu-dark .icon-moon{display:none;}
[data-theme="dark"] .menu-dark .icon-sun{display:block;}
/* 每个主题色点显示自己的渐变（非当前主题） */
.sw-dot{width:16px; height:16px; border-radius:50%; flex:none;}
.sw-dot[data-t="mint"]  {background:linear-gradient(135deg,#0891B2,#0D9488);}
.sw-dot[data-t="coral"] {background:linear-gradient(135deg,#E11D48,#EA580C);}
.sw-dot[data-t="violet"]{background:linear-gradient(135deg,#7C3AED,#4F46E5);}
.sw-dot[data-t="ocean"] {background:linear-gradient(135deg,#0284C7,#2563EB);}
.sw-dot[data-t="amber"] {background:linear-gradient(135deg,#D97706,#EA580C);}

/* ---- 计时圆环 + 右上角重置/跳过 ---- */
.ring-wrap{position:relative; width:clamp(232px,64vw,300px); aspect-ratio:1; margin:0 auto var(--sp-4);}
.ring-wrap svg{width:100%; height:100%; display:block;}
.ring-track{fill:none; stroke:var(--track); stroke-width:13;}
.ring-progress{fill:none; stroke:url(#grad-main); stroke-width:13; stroke-linecap:round;
  transform:rotate(-90deg); transform-origin:center; transition:stroke-dashoffset .25s linear;}
#stop1{stop-color:var(--accent-1);}
#stop2{stop-color:var(--accent-2);}
.ring-action{position:absolute; top:2px; right:2px; width:36px; height:36px; padding:0;
  border:1px solid var(--border); border-radius:50%; background:var(--surface); color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--shadow-sm); z-index:2;
  transition:color .15s, border-color .15s, background .15s, box-shadow .15s;}
.ring-action:hover{color:var(--accent-ink); border-color:var(--accent-1); background:var(--surface-2); box-shadow:var(--shadow-md);}
.ring-action:focus-visible{outline:2px solid var(--accent-1); outline-offset:2px;}
.ring-action svg{width:17px; height:17px; display:block;}
.ring-action .icon-skip{display:none;}
.ring-action.is-skip .icon-reset{display:none;}
.ring-action.is-skip .icon-skip{display:block;}
/* 自动循环：与重置同尺寸，镜像到圆环左上角；开时以强调色描边+淡底提示 */
.loop-action{left:2px; right:auto;}
.loop-action.on{color:var(--accent-ink); border-color:var(--accent-1);
  background:color-mix(in srgb,var(--accent-1) 12%,var(--surface));}
.center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; user-select:none;}
.time{font-family:var(--font-mono); font-size:var(--time); font-weight:600; line-height:1; font-variant-numeric:tabular-nums;}
.status{display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-sm); color:var(--text-muted);
  margin-top:var(--sp-2); padding:5px 13px 5px 11px; border-radius:var(--r-pill);
  background:var(--surface-2); transition:color .2s, background .2s;}
.status::before{content:""; width:7px; height:7px; flex:none; border-radius:50%; background:currentColor;}
.status.phase-focus{color:var(--accent-ink); background:color-mix(in srgb,var(--accent-1) 12%,transparent);}
.status.phase-focus::before{animation:status-pulse 1.6s ease-in-out infinite;}
.status.phase-break{color:var(--accent-ink-2); background:color-mix(in srgb,var(--accent-2) 12%,transparent);}
.status.phase-paused{color:var(--text); background:var(--surface-2);}
@keyframes status-pulse{0%,100%{opacity:1;} 50%{opacity:.3;}}

/* ---- 主操作：唯一的居中按钮（重置已移至圆环右上角） ---- */
.controls{display:flex; justify-content:center; margin:0 auto var(--sp-6);}
.controls .btn{height:50px;}
.btn{font-family:inherit; font-weight:600; font-size:var(--fs-base); height:48px; border-radius:var(--r-pill);
  cursor:pointer; border:none; flex:1; min-width:0; transition:transform .12s ease, box-shadow .2s ease;}
.btn:focus-visible{outline:2px solid var(--accent-1); outline-offset:2px;}
.btn-primary{background:var(--accent-action); color:var(--accent-ink-2);
  border:1px solid color-mix(in srgb,var(--accent-1) 32%,var(--border)); box-shadow:var(--shadow-sm);}
.btn-primary:hover{transform:translateY(-1px); box-shadow:var(--shadow-md);
  border-color:color-mix(in srgb,var(--accent-1) 55%,var(--border));}
.btn-primary:active{transform:scale(.98);}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--border);}
.btn-ghost:hover{background:var(--surface-2);}
/* 开始/暂停/继续：直接使用圆环的同一渐变，19px/700 属 WCAG 大字，按主题取 --on-accent。 */
.controls .btn-primary{flex:0 0 auto; width:200px; max-width:100%; height:50px;
  background:var(--accent-grad); color:var(--on-accent);
  border:0; font-size:19px; font-weight:700; letter-spacing:.3px;
  box-shadow:0 6px 18px color-mix(in srgb,var(--accent-1) 28%,transparent),
             inset 0 1px 0 rgba(255,255,255,.2);}
.controls .btn-primary:hover{transform:translateY(-1px);
  box-shadow:0 10px 26px color-mix(in srgb,var(--accent-1) 36%,transparent),
             inset 0 1px 0 rgba(255,255,255,.26);}
.controls .btn-primary:active{transform:scale(.98);
  box-shadow:0 4px 12px color-mix(in srgb,var(--accent-1) 24%,transparent);}

/* ---- 设置区：居中的方案提示行 → 固定预设行 → 自定义行 ---- */
.settings{text-align:center;}

.pills{display:flex; align-items:center;}
.preset-row{flex-wrap:nowrap; justify-content:center; gap:8px;}
.custom-row{flex-wrap:wrap; justify-content:center; gap:10px; margin-top:8px; padding-top:6px;}

/* 自定义胶囊 + 右上角小 ×：两层独立按钮，× 浮在胶囊角上 */
.pill-wrap{position:relative; display:inline-flex; flex:none;}
.pill-del{position:absolute; top:-6px; right:-6px; z-index:1; width:20px; height:20px; padding:0; margin:0;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  border:1px solid var(--border); border-radius:50%; background:var(--surface); color:var(--text-muted);
  box-shadow:var(--shadow-sm); transition:color .15s, background .15s, border-color .15s;}
.pill-del:hover{color:var(--danger); border-color:var(--danger);
  background:color-mix(in srgb,var(--danger) 6%,var(--surface));}
.pill-del:focus-visible{outline:2px solid var(--accent-1); outline-offset:2px;}
.pill-del svg{width:10px; height:10px; display:block;}
.pill{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:40px; padding:0 12px;
  border:1px solid color-mix(in srgb,var(--accent-1) 20%,var(--border));
  background:color-mix(in srgb,var(--accent-1) 5%,var(--surface)); color:var(--text);
  border-radius:var(--r-pill); cursor:pointer; font-family:inherit; flex:0 0 auto;
  transition:border-color .15s, background .15s, color .15s;}
.pill:hover{border-color:color-mix(in srgb,var(--accent-1) 55%,var(--border));
  background:color-mix(in srgb,var(--accent-1) 8%,var(--surface));}
.pill:focus-visible{outline:2px solid var(--accent-1); outline-offset:2px;}
.pill.active{border-color:var(--accent-1); background:color-mix(in srgb,var(--accent-1) 12%,var(--surface));}
.pill .c-name{font-size:var(--fs-xs); color:var(--text-muted); transition:color .15s;}
.pill .c-val{font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;}
.pill.active .c-name,.pill.active .c-val{color:var(--accent-ink);}

/* 「＋」与胶囊同高同族，位于自定义行；已有 1 条自定义后隐藏 */
.add-trigger{width:40px; height:40px; flex:none; padding:0; margin:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid color-mix(in srgb,var(--accent-1) 20%,var(--border)); border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--accent-1) 5%,var(--surface)); color:var(--accent-ink);
  cursor:pointer; transition:color .15s, background .15s, border-color .15s;}
.add-trigger:hover{color:var(--accent-ink); border-color:var(--accent-1);
  background:color-mix(in srgb,var(--accent-1) 9%,var(--surface));}
.add-trigger:focus-visible{outline:2px solid var(--accent-1); outline-offset:2px;}
.add-trigger .plus{width:16px; height:16px;}

/* 方案提示：单独一行，居中位于固定预设行上方 */
.hint{margin:0 auto 10px; text-align:center; font-size:var(--fs-xs);
  color:var(--text-muted); letter-spacing:.4px;}

/* 添加自定义：虚线卡片，字段为「标签 + 输入」一行 */
.add-form{display:flex; flex-direction:column; align-items:center; gap:10px;
  margin:var(--sp-3) auto 0; padding:12px 14px; max-width:320px; width:100%;
  background:color-mix(in srgb,var(--accent-1) 5%,var(--surface));
  border:1px dashed var(--accent-1); border-radius:var(--r-md); box-shadow:var(--shadow-sm);}
.add-fields{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; width:100%;}
.fg{display:flex; align-items:center; gap:8px;}
.fg-label{font-size:var(--fs-sm); color:var(--text-muted); white-space:nowrap;}
.fg input{width:58px; height:38px; text-align:center; font-family:inherit; font-size:var(--fs-base);
  border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); color:var(--text);}
.fg input:focus{outline:none; border-color:var(--accent-1); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-1) 18%,transparent);}
.add-actions{display:flex; gap:8px; width:100%;}
.add-actions .btn{flex:1;}
.btn-sm{height:38px; font-size:var(--fs-sm);}
.add-error{width:100%; margin:0; min-height:15px; line-height:15px;
  font-size:var(--fs-xs); color:var(--danger); text-align:center;}

/* ---- 计时中锁定设置：暂停/继续与重置仍可用 ---- */
.pill:disabled,.add-trigger:disabled,.pill-del:disabled,.loop-action:disabled{
  opacity:.45; cursor:not-allowed;}

.install-hint{margin:calc(-1 * var(--sp-3)) auto var(--sp-3); max-width:320px; font-size:var(--fs-xs);
  color:var(--text-muted); line-height:1.6; text-align:center;}

@media (max-width:399px){
  body{padding:var(--sp-4) var(--sp-3);}
  .app{padding:var(--sp-5);}
  .top{flex-wrap:wrap; gap:8px;}
  .right{gap:8px; margin-left:auto;}
  .seg-link{padding:4px 8px;}
  .ring-wrap{width:clamp(226px,64vw,280px);}
  .preset-row{gap:4px;}
  .custom-row{gap:6px;}
  .pill{padding:0 7px; gap:3px;}
  .pill .c-name{font-size:10px;}
  .pill .c-val{font-size:13px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important; animation:none!important;}
}