:root{
      --bg:#f7f9fc;--bg2:#eef4ff;--panel:#ffffff;--panel2:#f9fbff;--text:#14213d;--muted:#65748b;--line:#dce5f2;
      --primary:#2563eb;--primary2:#14b8a6;--green:#22c55e;--amber:#f59e0b;--red:#ef4444;--shadow:0 18px 50px rgba(39,74,130,.13);
      --ring-track:#e7edf8;--input:#fff;--chip:#eef4ff;--nav:#fff;--nav-active:#eaf1ff;
    }
    [data-theme="dark"]{
      --bg:#07111f;--bg2:#0b1730;--panel:#101c2e;--panel2:#14223a;--text:#f8fafc;--muted:#a8b3c7;--line:#24344f;
      --primary:#3b82f6;--primary2:#22d3ee;--green:#4ade80;--amber:#fbbf24;--red:#fb7185;--shadow:0 22px 70px rgba(0,0,0,.28);
      --ring-track:#20304a;--input:#0b1627;--chip:#172746;--nav:#0d1829;--nav-active:#173a7a;
    }
    *{box-sizing:border-box} body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:radial-gradient(circle at 20% 0,var(--bg2),var(--bg) 45%);color:var(--text);min-height:100vh;transition:.25s background,.25s color}button,input,select{font:inherit}button{cursor:pointer;border:0}
    .app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:24px 18px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--nav) 92%,transparent);backdrop-filter:blur(16px)}
    .brand{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:850;margin:4px 6px 28px}.logo{width:42px;height:42px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#ef4444,#f97316);box-shadow:0 12px 28px rgba(239,68,68,.25);animation:bob 2.8s ease-in-out infinite}.tag{font-size:12px;color:var(--muted);font-weight:650;margin-top:2px}.nav{display:grid;gap:10px}.nav button{width:100%;display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:16px;background:transparent;color:var(--muted);font-weight:750;text-align:left}.nav button.active{background:var(--nav-active);color:var(--primary);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 20%,transparent)}.nav .ico{font-size:19px}.nav button:hover .ico,.icon-anim:hover{animation:wiggle .55s ease}.side-card{position:absolute;left:18px;right:18px;bottom:22px;border:1px solid var(--line);background:var(--panel);border-radius:22px;padding:16px;box-shadow:var(--shadow)}
    main{padding:26px;max-width:1280px;width:100%;margin:0 auto}.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.hello h1{margin:0;font-size:26px}.hello p{margin:6px 0 0;color:var(--muted)}.actions{display:flex;gap:10px;align-items:center}.pillbtn{padding:11px 14px;border-radius:999px;background:var(--panel);color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow)}
    .grid{display:grid;grid-template-columns:1.25fr .85fr;gap:20px}.card{border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--panel2));border-radius:28px;padding:22px;box-shadow:var(--shadow)}.timer-card{text-align:center;min-height:570px}.modes{display:flex;background:var(--chip);padding:7px;border-radius:19px;gap:7px;margin-bottom:24px}.modes button{flex:1;padding:12px;border-radius:15px;background:transparent;color:var(--muted);font-weight:800}.modes button.active{background:var(--primary);color:white;box-shadow:0 14px 32px color-mix(in srgb,var(--primary) 35%,transparent)}
    .ring{--p:0;width:min(350px,72vw);aspect-ratio:1;margin:20px auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--primary) calc(var(--p)*1%),var(--ring-track) 0);position:relative;box-shadow:0 30px 80px color-mix(in srgb,var(--primary) 18%,transparent)}.ring:before{content:"";position:absolute;inset:14px;background:var(--panel);border-radius:50%;box-shadow:inset 0 0 50px rgba(0,0,0,.05)}.ring-content{position:relative;z-index:2}.phase-label{color:var(--muted);font-weight:750}.time{font-size:72px;font-weight:900;letter-spacing:-4px;margin:12px 0}.focus-task{display:inline-flex;gap:8px;align-items:center;background:var(--chip);padding:10px 14px;border-radius:999px;font-weight:800}.controls{display:flex;gap:14px;justify-content:center;margin:22px 0}.primary{min-width:160px;padding:15px 26px;border-radius:18px;background:linear-gradient(135deg,var(--primary),#5b8cff);color:#fff;font-weight:900;box-shadow:0 18px 36px color-mix(in srgb,var(--primary) 30%,transparent)}.ghost{padding:15px 18px;border-radius:18px;background:var(--chip);color:var(--text);font-weight:850}.hint{font-size:13px;color:var(--muted)}
    .stack{display:grid;gap:20px}.stat{display:grid;gap:15px}.stat-row{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:16px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}.stat .num{font-size:26px;font-weight:900}.bar{height:8px;border-radius:999px;background:var(--ring-track);overflow:hidden;margin-top:8px}.bar span{display:block;height:100%;background:var(--primary);border-radius:999px}.score{display:grid;place-items:center;text-align:center}.score-ring{width:160px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) 0 80%,var(--ring-track) 0);margin:10px auto}.score-ring div{width:118px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--panel);font-size:34px;font-weight:900}.section{display:none}.section.active{display:block}.below{display:grid;grid-template-columns:1fr .8fr;gap:20px;margin-top:20px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title h2{font-size:18px;margin:0}.input-row{display:flex;gap:10px}.input,.select{width:100%;background:var(--input);border:1px solid var(--line);border-radius:14px;color:var(--text);padding:12px 13px;outline:none}.input:focus,.select:focus{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent)}
    .task-list{display:grid;gap:10px}.task{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}.task.done{opacity:.56}.task strong{display:block}.task small{color:var(--muted)}.task-actions{display:flex;gap:7px}.mini{padding:8px 10px;border-radius:12px;background:var(--chip);color:var(--text);font-weight:800}.badge{font-size:12px;padding:4px 8px;border-radius:999px;background:var(--chip);color:var(--primary);font-weight:850}.quote{text-align:center;line-height:1.75;font-size:20px;padding:22px 10px}.sound-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.sound{padding:14px 10px;border-radius:17px;background:var(--panel);border:1px solid var(--line);color:var(--text);font-weight:800}.sound.active{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.sound .ico{display:block;font-size:24px;margin-bottom:6px}.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.field label{font-weight:850;font-size:13px;color:var(--muted);display:block;margin-bottom:8px}.analytics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.bigmetric{font-size:34px;font-weight:950}.heat{display:grid;grid-template-columns:repeat(14,1fr);gap:7px}.cell{aspect-ratio:1;border-radius:6px;background:var(--ring-track)}.cell.on{background:color-mix(in srgb,var(--green) 75%,var(--ring-track))}.notice{background:color-mix(in srgb,var(--amber) 13%,var(--panel));border:1px solid color-mix(in srgb,var(--amber) 35%,var(--line));padding:14px;border-radius:18px;color:var(--text);line-height:1.5}
    @keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(4deg)}}@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}.pulse{animation:pulse 1.5s ease-in-out infinite}.hide-mobile{display:inline}.focus-alert{position:fixed;inset:0;display:none;place-items:center;background:rgba(15,23,42,.45);backdrop-filter:blur(8px);z-index:50}.focus-alert.show{display:grid}.focus-alert-card{width:min(440px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:28px;text-align:center}.focus-alert-card .big{font-size:58px;animation:bob 1.6s ease-in-out infinite}.focus-alert-card h2{margin:8px 0}.focus-alert-card p{color:var(--muted)}.alert-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}.danger{background:linear-gradient(135deg,var(--red),#fb923c)!important}.timer-card.alarm-active{animation:alarmGlow 1s ease-in-out infinite}.ring.alarm-active{animation:alarmPulse .8s ease-in-out infinite}.flash-ring{animation:pulse 1s ease-in-out infinite}.settings-saved{color:var(--green);font-weight:850;margin-left:10px}@keyframes alarmGlow{0%,100%{box-shadow:var(--shadow)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--red) 18%,transparent),0 28px 90px color-mix(in srgb,var(--red) 32%,transparent)}}@keyframes alarmPulse{0%,100%{transform:translateX(0) scale(1)}20%{transform:translateX(-5px) scale(1.03)}40%{transform:translateX(5px) scale(1.03)}60%{transform:translateX(-3px) scale(1.02)}80%{transform:translateX(3px) scale(1.02)}}
    @media(max-width:980px){.app{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.side-card{display:none}.grid,.below,.settings-grid,.analytics-grid{grid-template-columns:1fr}.nav{grid-template-columns:repeat(4,1fr)}.nav button{justify-content:center;font-size:0}.nav .ico{font-size:22px}.brand{margin-bottom:14px}main{padding:18px}.top{gap:12px;align-items:flex-start}.time{font-size:56px}.hide-mobile{display:none}}
.external-links{display:flex;gap:8px;margin:18px 6px}.external-links a,.actions a{color:var(--text);text-decoration:none}.external-links a{flex:1;text-align:center;padding:10px 12px;border-radius:14px;background:var(--chip);font-weight:850;border:1px solid var(--line)}
.logo{background:linear-gradient(135deg,#2563eb,#22d3ee)!important;box-shadow:0 14px 34px rgba(37,99,235,.32)!important}.logo svg{filter:drop-shadow(0 7px 10px rgba(15,23,42,.18))}.brand{letter-spacing:-.04em}.nav .ico{width:26px;height:26px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--primary) 11%,transparent);font-family:ui-sans-serif,system-ui;font-weight:950}.nav button.active .ico{background:color-mix(in srgb,var(--primary) 18%,white);color:var(--primary)}
.settings-group{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}.settings-group h3{margin:0 0 14px;font-size:15px;color:var(--muted);letter-spacing:.02em;text-transform:uppercase}.footer{color:var(--muted);font-size:13px;text-align:center;margin:20px 0 2px}.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:var(--text);color:var(--panel);padding:12px 16px;border-radius:999px;font-weight:850;box-shadow:var(--shadow);z-index:80;transition:.22s ease}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.welcome-modal{position:fixed;inset:0;background:rgba(15,23,42,.42);backdrop-filter:blur(12px);display:none;place-items:center;z-index:100}.welcome-modal.show{display:grid}.welcome-card{width:min(420px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:30px;padding:28px;text-align:center;box-shadow:var(--shadow)}.welcome-logo{font-size:60px;animation:bob 1.8s ease-in-out infinite}.welcome-card h2{margin:8px 0}.welcome-card p{color:var(--muted);line-height:1.55}.welcome-card .input{margin:12px 0}.task-actions .mini[data-act="minus"]{background:color-mix(in srgb,var(--amber) 15%,var(--chip))}code{background:var(--chip);border:1px solid var(--line);border-radius:7px;padding:2px 6px;color:var(--primary);font-weight:800}.pillbtn:hover,.external-links a:hover{transform:translateY(-1px);box-shadow:0 14px 30px color-mix(in srgb,var(--primary) 14%,transparent)}

/* v5.1 polish: cleaner light mode, modern navigation icons, responsive layout */
:root{
  --bg:#f6f8fb;--bg2:#ffffff;--panel:#ffffff;--panel2:#fbfcff;--text:#111827;--muted:#667085;--line:#e6eaf0;
  --primary:#2563eb;--primary2:#ff6b35;--green:#16a34a;--amber:#f59e0b;--red:#f04438;
  --shadow:0 18px 48px rgba(16,24,40,.08);--ring-track:#edf1f7;--input:#ffffff;--chip:#f3f6fb;--nav:#ffffff;--nav-active:#eef4ff;
}
[data-theme="light"] body, body[data-theme="light"]{background:linear-gradient(180deg,#f8fafc 0%,#f3f6fb 100%)}
[data-theme="light"] .sidebar{background:rgba(255,255,255,.92);box-shadow:1px 0 0 rgba(16,24,40,.03)}
[data-theme="light"] .card{background:linear-gradient(180deg,#ffffff,#fbfcff);border-color:#e7ecf3;box-shadow:0 18px 45px rgba(16,24,40,.075)}
[data-theme="light"] .stat-row,[data-theme="light"] .task,[data-theme="light"] .sound,[data-theme="light"] .pillbtn{background:#fff;border-color:#e8edf5;box-shadow:0 8px 24px rgba(16,24,40,.045)}
[data-theme="light"] .modes{background:#eef3fa}.modes button.active{background:linear-gradient(135deg,#2563eb,#3b82f6)}
[data-theme="light"] .ring:before{background:#fff}
.toplink{color:var(--muted);text-decoration:none;font-weight:850;padding:8px 4px;border-radius:8px;transition:.18s ease}.toplink:hover{color:var(--primary);transform:translateY(-1px)}
.external-links{display:none!important}
.logo{background:linear-gradient(135deg,#2563eb,#06b6d4)!important;box-shadow:0 16px 36px rgba(37,99,235,.28)!important}.logo svg circle{filter:drop-shadow(0 10px 14px rgba(17,24,39,.16))}
.nav .ico{background:transparent!important;color:currentColor;border-radius:12px}.nav .ico svg{width:23px;height:23px;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nav .ico-analytics svg rect{fill:currentColor;stroke:none;opacity:.92}.nav button.active .ico{color:var(--primary)!important;background:color-mix(in srgb,var(--primary) 11%,transparent)!important}.nav button:hover{background:color-mix(in srgb,var(--primary) 6%,transparent);color:var(--primary)}
.task-category{display:inline-flex;align-items:center;gap:4px;margin-left:6px;font-size:11px;padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--primary) 10%,var(--chip));color:var(--primary);font-weight:900}.input-row .select{min-width:0}.task strong{line-height:1.45}.task-actions{flex-wrap:wrap;justify-content:flex-end}
@media(max-width:980px){.app{display:block}.sidebar{position:sticky;top:0;z-index:30;height:auto;padding:14px 14px 12px}.brand{font-size:20px;margin:0 0 12px}.nav{grid-template-columns:repeat(4,1fr);gap:8px}.nav button{padding:11px 8px;border-radius:14px}.nav .ico svg{width:22px;height:22px}main{padding:16px}.top{flex-direction:column}.actions{width:100%;justify-content:flex-start;flex-wrap:wrap}.toplink{padding:8px 2px}.grid,.below{gap:14px}.card{border-radius:22px;padding:18px}.timer-card{min-height:auto}.ring{width:min(312px,78vw)}.input-row{flex-wrap:wrap}.input-row .input{min-width:100%}.input-row .select{flex:1}.input-row .primary{flex:1}.sound-grid{grid-template-columns:repeat(2,1fr)}.heat{grid-template-columns:repeat(7,1fr)}}
@media(max-width:560px){.sidebar{border-right:0;border-bottom:1px solid var(--line)}.brand .tag{font-size:11px}.nav button{font-size:0;justify-content:center}.time{font-size:48px;letter-spacing:-2px}.ring{width:min(280px,84vw)}.controls{gap:10px}.primary{min-width:120px;padding:13px 18px}.ghost{padding:13px 15px}.modes{overflow:auto}.modes button{white-space:nowrap;min-width:max-content}.analytics-grid{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}.task{grid-template-columns:auto 1fr}.task-actions{grid-column:1 / -1;justify-content:flex-start}.alert-actions{display:grid}.focus-alert-card{padding:22px}.toast{width:calc(100vw - 32px);text-align:center}.footer{padding-bottom:18px}}

/* v5.2 revisions */
.mini-links{display:flex;gap:22px;align-items:center;margin-right:6px}
.toplink{font-size:13px;line-height:1;color:var(--muted)!important;font-weight:750;letter-spacing:.01em;padding:4px 0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.toplink:hover{color:var(--text)!important;text-decoration:none;transform:none!important}
.actions{gap:14px}
.field-help,.muted-note,.avatar-note{display:block;color:var(--muted);font-size:12px;line-height:1.45;margin-top:7px}.avatar-note{text-align:center;margin:8px 0 0}.inline-control{display:flex;gap:8px;align-items:center}.inline-control .select{flex:1}.icon-test{width:44px;height:44px;border-radius:14px;background:var(--chip);color:var(--text);border:1px solid var(--line);font-weight:900}.icon-test:hover,.focus-mini:hover{background:color-mix(in srgb,var(--primary) 12%,var(--chip));color:var(--primary)}.focus-mini{color:var(--primary);font-weight:900}.stat-row .muted-note{margin-top:2px}.side-card b:after{content:' grows with sessions';display:block;font-size:11px;font-weight:650;color:var(--muted);margin-top:3px}.sound .ico{filter:saturate(1.1)}
/* Slightly safer light-mode polish, while dark remains the default */
[data-theme="light"]{--bg:#f8fafc;--bg2:#ffffff;--panel:#ffffff;--panel2:#ffffff;--text:#172033;--muted:#667085;--line:#e9eef5;--chip:#f4f7fb;--nav-active:#edf4ff;--shadow:0 16px 38px rgba(16,24,40,.065)}
[data-theme="light"] body,body[data-theme="light"]{background:#f8fafc!important}
[data-theme="light"] .card{background:#fff!important}
[data-theme="light"] .ring{box-shadow:0 24px 60px rgba(37,99,235,.16)}
@media(max-width:980px){.mini-links{order:3;width:100%;gap:18px;margin-top:2px}.toplink{font-size:12px}.actions{gap:10px}.pillbtn{padding:10px 12px}.inline-control .select{min-width:0}}
@media(max-width:560px){.mini-links{justify-content:center}.top{align-items:stretch}.actions{justify-content:center}.field-help{font-size:11.5px}.icon-test{width:42px;height:42px}}

/* v5.3 hint system */
.title-with-hint{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hint-dot{width:22px;height:22px;border-radius:999px;border:1px solid var(--line);background:var(--soft);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;cursor:pointer;transition:.18s ease;vertical-align:middle}
.hint-dot:hover{transform:translateY(-1px);color:var(--text);border-color:rgba(59,130,246,.45);box-shadow:0 8px 20px rgba(2,6,23,.12)}
.hint-dot.tiny{width:18px;height:18px;font-size:11px;margin-left:4px}
.hint-popover{position:fixed;z-index:90;max-width:280px;padding:14px 15px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--text);display:none;pointer-events:none}
.hint-popover.show{display:block;animation:pop .16s ease both}
.hint-popover p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.compact-notice{font-size:13px;padding:12px 14px}
@media(max-width:760px){.hint-popover{left:16px!important;right:16px!important;top:auto!important;bottom:18px!important;max-width:none}}


/* v5.4: cleaner hint behavior, cream tooltip, settings toggles */
.hint-dot{
  opacity:0;
  transform:scale(.92);
  background:color-mix(in srgb,#fff3d7 82%,var(--panel));
  color:#7c4a03;
  border-color:#f3d59b;
  box-shadow:none;
}
.title-with-hint:hover .hint-dot,
.stat-row:hover .hint-dot,
.field:hover .hint-dot,
.notice:hover .hint-dot,
.hints-always .hint-dot,
.hint-dot:hover,
.hint-dot:focus-visible{
  opacity:1;
  transform:scale(1);
}
.hint-dot:hover,.hint-dot:focus-visible{
  color:#5b3500;
  border-color:#e8b95d;
  box-shadow:0 10px 24px rgba(124,74,3,.18);
}
.hint-popover{
  background:#fff3d7!important;
  border:1px solid #edc978!important;
  color:#2f220b!important;
  box-shadow:0 20px 45px rgba(47,34,11,.22)!important;
}
.hint-popover p{color:#5f4a1c!important}
.switch-row{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 12px;
  border:1px solid var(--line);
  background:var(--input);
  border-radius:14px;
  color:var(--text);
  font-weight:800;
  cursor:pointer;
}
.switch-row input{position:absolute;opacity:0;pointer-events:none}
.switch-ui{
  width:46px;height:26px;border-radius:999px;
  background:var(--chip);
  border:1px solid var(--line);
  position:relative;
  transition:.2s ease;
  flex:0 0 auto;
}
.switch-ui:after{
  content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:999px;
  background:var(--muted);transition:.2s ease;box-shadow:0 4px 10px rgba(0,0,0,.15)
}
.switch-row input:checked + .switch-ui{background:color-mix(in srgb,var(--primary) 22%,var(--chip));border-color:color-mix(in srgb,var(--primary) 42%,var(--line))}
.switch-row input:checked + .switch-ui:after{left:23px;background:var(--primary)}
.switch-row:hover{border-color:color-mix(in srgb,var(--primary) 34%,var(--line))}

/* v5.5: polished setting toggle rows */
.field > label:not(.switch-row){
  margin-bottom:10px;
}
.field label.switch-row{
  box-sizing:border-box;
  width:100%;
  min-height:56px;
  height:auto;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  margin:0;
  border:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--input) 94%,transparent),color-mix(in srgb,var(--panel) 92%,transparent));
  border-radius:18px;
  color:var(--text)!important;
  font-size:14px!important;
  font-weight:850!important;
  line-height:1.2;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.field label.switch-row > span:first-child{
  flex:1 1 auto;
  min-width:0;
  color:var(--text);
  letter-spacing:-.01em;
}
.field label.switch-row .switch-ui{
  margin-left:auto;
}
.field label.switch-row:hover{
  border-color:color-mix(in srgb,var(--primary) 38%,var(--line));
  background:color-mix(in srgb,var(--primary) 7%,var(--input));
}
.field label.switch-row:has(input:checked){
  border-color:color-mix(in srgb,var(--primary) 42%,var(--line));
  background:color-mix(in srgb,var(--primary) 9%,var(--input));
}
.switch-ui{
  width:48px;
  height:28px;
}
.switch-ui:after{
  top:4px;
  left:4px;
  width:18px;
  height:18px;
}
.switch-row input:checked + .switch-ui:after{
  left:24px;
}
@media(max-width:560px){
  .field label.switch-row{min-height:54px;padding:13px 14px}
}

/* v5.6: minimal help system */
.help-toggle{min-width:auto!important;padding:10px 13px!important;font-size:13px!important;opacity:.72}
.help-toggle:hover,.help-toggle.active{opacity:1;transform:translateY(-1px)}
.help-toggle.active{border-color:rgba(255,180,80,.45);background:rgba(255,180,80,.12)}
body:not(.help-mode):not(.hints-always) .hint-dot{opacity:0;transform:scale(.84);pointer-events:auto}
body:not(.help-mode):not(.hints-always) .title-with-hint:hover .hint-dot,
body:not(.help-mode):not(.hints-always) .stat-row:hover .hint-dot,
body:not(.help-mode):not(.hints-always) .field:hover .hint-dot,
body:not(.help-mode):not(.hints-always) .notice:hover .hint-dot,
body:not(.help-mode):not(.hints-always) .hint-dot:hover,
body:not(.help-mode):not(.hints-always) .hint-dot:focus-visible{opacity:1;transform:scale(1)}
.help-mode [data-tooltip],.help-mode [data-hint]{outline:1px solid rgba(255,180,80,.35);outline-offset:3px}
.help-tooltip{position:fixed;z-index:95;max-width:280px;padding:12px 14px;border-radius:14px;background:#fff4d6;border:1px solid #f3cf82;box-shadow:0 20px 50px rgba(31,41,55,.22);color:#2b2112;display:none;pointer-events:none}
.help-tooltip.show{display:block;animation:pop .14s ease both}
.help-tooltip b{display:block;font-size:13px;color:#1f1608;margin-bottom:5px}.help-tooltip p{margin:0;color:#5f4a1c;font-size:12.5px;line-height:1.45}.help-tooltip small{margin-top:8px;color:#7b5b16;font-weight:800;font-size:11px}
.hint-dot{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-style:normal}
@media(max-width:760px){.help-tooltip{left:16px!important;right:16px!important;top:auto!important;bottom:18px!important;max-width:none}.help-toggle .hide-mobile{display:none}.help-toggle{padding:10px 12px!important}}

/* v5.8: refined help UX
   - Help OFF: info icons stay hidden and inactive.
   - Help ON: conceptual info icons appear only when hovering their component.
   - Yellow outline is reserved for actionable help controls only, and only on hover/focus.
*/
body:not(.help-mode):not(.hints-always) .hint-dot{
  opacity:0!important;
  transform:scale(.82)!important;
  pointer-events:none!important;
}
body:not(.help-mode):not(.hints-always) .title-with-hint:hover .hint-dot,
body:not(.help-mode):not(.hints-always) .stat-row:hover .hint-dot,
body:not(.help-mode):not(.hints-always) .field:hover .hint-dot,
body:not(.help-mode):not(.hints-always) .notice:hover .hint-dot,
body:not(.help-mode):not(.hints-always) .nav-help-parent:hover .hint-dot,
body:not(.help-mode):not(.hints-always) .hint-dot:hover,
body:not(.help-mode):not(.hints-always) .hint-dot:focus-visible{
  opacity:0!important;
  transform:scale(.82)!important;
  pointer-events:none!important;
}
.help-mode .hint-dot{opacity:0;transform:scale(.82);pointer-events:none}
.help-mode .title-with-hint:hover .hint-dot,
.help-mode .stat-row:hover .hint-dot,
.help-mode .field:hover .hint-dot,
.help-mode .notice:hover .hint-dot,
.help-mode .nav-help-parent:hover .hint-dot,
.help-mode .section-title:hover .hint-dot,
.help-mode .hint-dot:hover,
.help-mode .hint-dot:focus-visible,
.hints-always .hint-dot{
  opacity:1!important;
  transform:scale(1)!important;
  pointer-events:auto!important;
}
.help-mode [data-tooltip],
.help-mode [data-hint]{outline:none!important}
.help-mode .help-action:hover,
.help-mode .help-action:focus-visible{
  outline:1px solid rgba(255,180,80,.75)!important;
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(255,180,80,.10), var(--shadow);
}
.nav-help-parent{position:relative}
.nav-help-parent .hint-dot{margin-left:auto}
.nav-help-parent > span:last-child{display:flex;align-items:center;gap:6px;width:100%}


/* v6 UX Polish: Learning Mode, consistent hints, dropdown spacing, and grid alignment */
.help-toggle .hide-mobile::after{content:' Mode'}
.below{grid-template-columns:1.25fr .85fr;align-items:stretch}
.below>.card,.grid>.card,.stack>.card{width:100%}
.select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:42px!important;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}
.inline-control .select{padding-right:40px!important}
/* Hints are hidden by default. In Learning Mode they fade in only when the related component is hovered/focused. */
.hint-dot{transition:opacity .16s ease,transform .16s ease,background .16s ease;line-height:1}
body:not(.help-mode):not(.hints-always) .hint-dot{opacity:0!important;transform:scale(.82)!important;pointer-events:none!important}
.help-mode .hint-dot{opacity:0!important;transform:scale(.82)!important;pointer-events:none!important}
.help-mode .nav-help-parent:hover .hint-dot,
.help-mode .nav-help-parent:focus-within .hint-dot,
.help-mode .title-with-hint:hover .hint-dot,
.help-mode .title-with-hint:focus-within .hint-dot,
.help-mode .section-title:hover .hint-dot,
.help-mode .section-title:focus-within .hint-dot,
.help-mode .stat-row:hover .hint-dot,
.help-mode .stat-row:focus-within .hint-dot,
.help-mode .analytics-grid .card:hover .hint-dot,
.help-mode .analytics-grid .card:focus-within .hint-dot,
.help-mode .field:hover .hint-dot,
.help-mode .field:focus-within .hint-dot,
.help-mode .notice:hover .hint-dot,
.help-mode .notice:focus-within .hint-dot,
.hints-always .hint-dot{
  opacity:1!important;
  transform:scale(1)!important;
  pointer-events:auto!important;
}
.help-mode [data-tooltip],.help-mode [data-hint]{outline:none!important}
.help-mode .help-action:hover,.help-mode .help-action:focus-visible{
  outline:1px solid rgba(255,180,80,.75)!important;
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(255,180,80,.10), var(--shadow);
}
/* Non-action tooltips can show a message but never receive yellow outline */
.help-mode [data-tooltip]:not(.help-action):hover,.help-mode [data-tooltip]:not(.help-action):focus-visible{outline:none!important}
.hint-popover,.help-tooltip{background:#fff4d6!important;border:1px solid #f3cf82!important;color:#2b2112!important;box-shadow:0 20px 50px rgba(31,41,55,.24)!important}
.hint-popover b,.help-tooltip b{color:#1f1608!important}.hint-popover p,.help-tooltip p{color:#5f4a1c!important}
@media(max-width:980px){.below{grid-template-columns:1fr}.top{flex-direction:column}.actions{width:100%;justify-content:space-between;flex-wrap:wrap}.mini-links{order:5;width:100%;justify-content:center}.input-row{flex-wrap:wrap}.input-row .input,.input-row .select,.input-row .primary{max-width:none!important;min-width:160px}.sound-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){main{padding:14px}.card{border-radius:22px;padding:16px}.timer-card{min-height:auto}.time{font-size:48px}.ring{width:min(300px,84vw)}.controls{gap:8px}.primary{min-width:120px}.task{grid-template-columns:auto 1fr}.task-actions{grid-column:1 / -1;justify-content:flex-end}.settings-grid{grid-template-columns:1fr}.analytics-grid{grid-template-columns:1fr}.sound-grid{grid-template-columns:1fr}.nav button{padding:12px 8px}.brand{font-size:20px}.mini-links{font-size:12px}}

/* v6.1 tooltip stability patch */
.help-mode .nav-help-parent:hover .hint-dot,
.help-mode .nav-help-parent:focus-within .hint-dot,
.help-mode .title-with-hint:hover .hint-dot,
.help-mode .title-with-hint:focus-within .hint-dot,
.help-mode .section-title:hover .hint-dot,
.help-mode .section-title:focus-within .hint-dot,
.help-mode .stat-row:hover .hint-dot,
.help-mode .stat-row:focus-within .hint-dot,
.help-mode .analytics-grid .card:hover .hint-dot,
.help-mode .analytics-grid .card:focus-within .hint-dot,
.help-mode .field:hover .hint-dot,
.help-mode .field:focus-within .hint-dot,
.help-mode .notice:hover .hint-dot,
.help-mode .notice:focus-within .hint-dot,
.hints-always .hint-dot{
  opacity:1!important;
  transform:scale(1)!important;
  pointer-events:auto!important;
}
.help-mode .hint-dot:hover,
.help-mode .hint-dot:focus-visible{
  opacity:1!important;
  transform:translateY(-1px) scale(1)!important;
  pointer-events:auto!important;
}
body:not(.help-mode):not(.hints-always) .hint-popover,
body:not(.help-mode):not(.hints-always) .help-tooltip{display:none!important}

/* v6.2 polish: improved light theme, notification status, onboarding notice */
[data-theme="light"]{
  --bg:#f7f9fd;
  --bg2:#ffffff;
  --panel:#ffffff;
  --panel2:#f9fbff;
  --text:#111827;
  --muted:#64748b;
  --line:#e5ebf3;
  --primary:#2563eb;
  --primary2:#f97316;
  --green:#16a34a;
  --amber:#d97706;
  --red:#ef4444;
  --shadow:0 18px 48px rgba(17,24,39,.075);
  --ring-track:#e9eef7;
  --input:#ffffff;
  --chip:#f3f7fc;
  --nav:#ffffff;
  --nav-active:#edf5ff;
}
body[data-theme="light"]{
  background:
    radial-gradient(circle at 20% 0%, rgba(37,99,235,.08), transparent 28%),
    radial-gradient(circle at 100% 20%, rgba(249,115,22,.08), transparent 26%),
    linear-gradient(180deg,#fbfdff 0%,#f4f7fb 100%)!important;
  color:var(--text);
}
[data-theme="light"] .sidebar{background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border-right:1px solid #e8eef6}
[data-theme="light"] .card{background:rgba(255,255,255,.94)!important;border:1px solid #e5ebf3!important;box-shadow:0 18px 44px rgba(17,24,39,.07)!important}
[data-theme="light"] .timer-card{background:linear-gradient(180deg,#ffffff,#f9fbff)!important}
[data-theme="light"] .pillbtn,[data-theme="light"] .stat-row,[data-theme="light"] .task,[data-theme="light"] .sound,[data-theme="light"] .switch-row{background:#ffffff!important;border-color:#e6edf6!important;box-shadow:0 8px 22px rgba(17,24,39,.045)!important}
[data-theme="light"] .modes{background:#eff4fb!important;border-color:#e4ebf5!important}
[data-theme="light"] .modes button{color:#475569}
[data-theme="light"] .modes button.active{color:#fff!important;background:linear-gradient(135deg,#2563eb,#3b82f6)!important;box-shadow:0 12px 28px rgba(37,99,235,.25)}
[data-theme="light"] .ring{background:conic-gradient(var(--primary) calc(var(--p)*1%), var(--ring-track) 0)!important;box-shadow:0 24px 66px rgba(37,99,235,.14)!important}
[data-theme="light"] .ring:before{background:#fff!important;box-shadow:inset 0 0 0 1px #edf2f8}
[data-theme="light"] .input,[data-theme="light"] .select{background:#fff!important;border-color:#e5ebf3!important;color:#172033!important;box-shadow:0 4px 14px rgba(17,24,39,.035)}
[data-theme="light"] .bar{background:#e8eef7!important}
[data-theme="light"] .focus-task,[data-theme="light"] .badge,[data-theme="light"] .task-category{background:#eef5ff!important;color:#2563eb!important}
[data-theme="light"] .nav button.active{background:#edf5ff!important;border-color:#dbeafe!important;color:#2563eb!important}
[data-theme="light"] .nav button:hover{background:#f1f6ff!important;color:#2563eb!important}
[data-theme="light"] .score-ring{background:conic-gradient(var(--green) 0 25%, #edf2f8 0 100%)!important}
.notify-off{opacity:.78}
.notify-on{border-color:color-mix(in srgb,var(--green) 40%,var(--line))!important;background:color-mix(in srgb,var(--green) 10%,var(--chip))!important;color:var(--green)!important}
.notify-blocked{border-color:color-mix(in srgb,var(--red) 35%,var(--line))!important;background:color-mix(in srgb,var(--red) 8%,var(--chip))!important;color:var(--red)!important}
.welcome-notify{display:flex;align-items:flex-start;gap:10px;text-align:left;margin:12px 0 14px;padding:12px 13px;border:1px solid var(--line);background:var(--chip);border-radius:16px;color:var(--text);font-size:13px;font-weight:800;line-height:1.35;cursor:pointer}
.welcome-notify input{margin-top:2px;accent-color:var(--primary)}
.welcome-small{font-size:12px!important;line-height:1.45!important;color:var(--muted)!important;margin:12px 0 0!important}


/* v6.3 muted professional light theme inspired by soft glass productivity dashboards */
[data-theme="light"]{
  --bg:#dfe3e8;
  --bg2:#f8fafc;
  --panel:rgba(255,255,255,.72);
  --panel2:rgba(246,248,251,.78);
  --text:#1f2933;
  --muted:#6b7280;
  --line:rgba(120,130,145,.24);
  --primary:#4f64ee;
  --primary2:#b8d53f;
  --green:#45c990;
  --amber:#f0b643;
  --red:#f05252;
  --shadow:0 22px 60px rgba(31,41,55,.12);
  --ring-track:rgba(220,226,235,.86);
  --input:rgba(255,255,255,.78);
  --chip:rgba(246,248,252,.88);
  --nav:rgba(255,255,255,.66);
  --nav-active:rgba(79,100,238,.11);
}
body[data-theme="light"]{
  background:
    radial-gradient(circle at 6% 0%, rgba(122,204,255,.38), transparent 26%),
    radial-gradient(circle at 96% 12%, rgba(190,213,63,.18), transparent 24%),
    linear-gradient(180deg,#dde3e9 0%,#eef1f5 45%,#e2e6eb 100%)!important;
  color:var(--text)!important;
}
[data-theme="light"] .app::before{
  content:'';position:fixed;inset:26px;z-index:-1;border-radius:34px;
  background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 24px 80px rgba(31,41,55,.08);
  pointer-events:none;
}
[data-theme="light"] .sidebar{
  background:rgba(255,255,255,.46)!important;
  border-right:1px solid rgba(255,255,255,.58)!important;
  backdrop-filter:blur(24px) saturate(1.1);
}
[data-theme="light"] main{background:transparent!important}
[data-theme="light"] .card{
  background:rgba(255,255,255,.68)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 24px 70px rgba(31,41,55,.11), inset 0 1px 0 rgba(255,255,255,.72)!important;
  backdrop-filter:blur(22px) saturate(1.08);
}
[data-theme="light"] .timer-card{background:rgba(255,255,255,.62)!important}
[data-theme="light"] .stat-row,
[data-theme="light"] .task,
[data-theme="light"] .sound,
[data-theme="light"] .pillbtn,
[data-theme="light"] .switch-row,
[data-theme="light"] .modes{
  background:rgba(255,255,255,.62)!important;
  border-color:rgba(150,160,175,.22)!important;
  box-shadow:0 10px 28px rgba(31,41,55,.06)!important;
}
[data-theme="light"] .nav button{color:#6b7280!important}
[data-theme="light"] .nav button.active,
[data-theme="light"] .nav button:hover{
  background:rgba(79,100,238,.10)!important;
  border-color:rgba(79,100,238,.22)!important;
  color:#4f64ee!important;
}
[data-theme="light"] .modes button.active,
[data-theme="light"] .primary{
  background:linear-gradient(135deg,#4f64ee,#6681ff)!important;
  box-shadow:0 16px 34px rgba(79,100,238,.24)!important;
}
[data-theme="light"] .ring{box-shadow:0 22px 70px rgba(79,100,238,.16)!important}
[data-theme="light"] .ring:before{background:rgba(247,250,255,.92)!important;box-shadow:inset 0 0 0 1px rgba(140,150,165,.16)}
[data-theme="light"] .input,
[data-theme="light"] .select{
  background:rgba(255,255,255,.76)!important;
  border-color:rgba(130,140,155,.22)!important;
  color:#1f2933!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 6px 18px rgba(31,41,55,.045)!important;
}
[data-theme="light"] .toplink,
[data-theme="light"] .hello p,
[data-theme="light"] .hint,
[data-theme="light"] small{color:#6b7280!important}
[data-theme="light"] .score-ring div{background:rgba(247,250,255,.92)!important}
[data-theme="light"] .bar{background:rgba(212,220,232,.82)!important}
[data-theme="light"] .focus-task,
[data-theme="light"] .badge,
[data-theme="light"] .task-category{
  background:rgba(79,100,238,.10)!important;color:#4f64ee!important;
}
[data-theme="light"] .welcome-card{background:rgba(255,255,255,.82)!important;border:1px solid rgba(255,255,255,.75)!important;backdrop-filter:blur(20px)}

/* v6.4 light theme polish: muted mauve/cream dashboard, no heavy outer frame */
[data-theme="light"]{
  --bg:#d8c8d1;
  --bg2:#ebe3e5;
  --panel:rgba(250,247,242,.78);
  --panel2:rgba(244,237,232,.70);
  --text:#28252b;
  --muted:#746b74;
  --line:rgba(109,98,107,.16);
  --primary:#6b5ff6;
  --primary2:#b9d84a;
  --green:#58cfa1;
  --amber:#e6b64d;
  --red:#e36464;
  --shadow:0 24px 70px rgba(72,61,70,.13);
  --ring-track:rgba(213,207,213,.78);
  --input:rgba(255,253,248,.82);
  --chip:rgba(255,253,248,.68);
  --nav:rgba(255,253,248,.58);
  --nav-active:rgba(107,95,246,.12);
}
body[data-theme="light"]{
  background:
    radial-gradient(circle at 8% 5%, rgba(255,255,255,.45), transparent 23%),
    radial-gradient(circle at 92% 12%, rgba(185,216,74,.20), transparent 20%),
    linear-gradient(135deg,#d3c1cc 0%,#e8dedf 42%,#d8d4cf 100%)!important;
  color:var(--text)!important;
}
[data-theme="light"] .app::before{display:none!important}
[data-theme="light"] .sidebar{
  background:rgba(245,239,236,.62)!important;
  border-right:1px solid rgba(255,255,255,.44)!important;
  box-shadow:12px 0 40px rgba(82,72,82,.055)!important;
  backdrop-filter:blur(24px) saturate(1.05);
}
[data-theme="light"] .card{
  background:rgba(250,247,242,.76)!important;
  border:1px solid rgba(255,255,255,.60)!important;
  box-shadow:0 24px 70px rgba(72,61,70,.12), inset 0 1px 0 rgba(255,255,255,.72)!important;
  backdrop-filter:blur(22px) saturate(1.05);
}
[data-theme="light"] .timer-card{background:rgba(250,247,242,.72)!important}
[data-theme="light"] .stat-row,
[data-theme="light"] .task,
[data-theme="light"] .sound,
[data-theme="light"] .pillbtn,
[data-theme="light"] .switch-row,
[data-theme="light"] .modes{
  background:rgba(255,253,248,.65)!important;
  border-color:rgba(106,96,108,.14)!important;
  box-shadow:0 10px 28px rgba(72,61,70,.055)!important;
}
[data-theme="light"] .pillbtn{color:#3d3842!important}
[data-theme="light"] .toplink{color:#4d4650!important;font-weight:800}
[data-theme="light"] .nav button{color:#6e6670!important}
[data-theme="light"] .nav button.active,
[data-theme="light"] .nav button:hover{
  background:rgba(107,95,246,.12)!important;
  border-color:rgba(107,95,246,.24)!important;
  color:#5c52de!important;
}
[data-theme="light"] .modes button.active,
[data-theme="light"] .primary{
  background:linear-gradient(135deg,#5d60f1,#7a75f7)!important;
  box-shadow:0 16px 34px rgba(93,96,241,.20)!important;
}
[data-theme="light"] .input,
[data-theme="light"] .select{
  background:rgba(255,253,248,.78)!important;
  border-color:rgba(106,96,108,.16)!important;
  color:#28252b!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 6px 18px rgba(72,61,70,.04)!important;
}
[data-theme="light"] .ring:before{background:rgba(248,247,245,.94)!important;box-shadow:inset 0 0 0 1px rgba(106,96,108,.12)}
[data-theme="light"] .bar{background:rgba(200,194,202,.58)!important}
[data-theme="light"] .hello p,
[data-theme="light"] .hint,
[data-theme="light"] small{color:#746b74!important}
[data-theme="light"] .score-ring div{background:rgba(248,247,245,.94)!important}
[data-theme="light"] .focus-task,
[data-theme="light"] .badge,
[data-theme="light"] .task-category{background:rgba(107,95,246,.12)!important;color:#5c52de!important}

/* v6.5 Product Polish: theme semantics + notification UX + Morning Paper light theme */
.pillbtn#notifyBtn,
.pillbtn#themeBtn,
.pillbtn#helpModeBtn{
  min-width:auto;
  padding:10px 14px;
  line-height:1.15;
}
#notifyBtn.notify-on{color:#16a34a;border-color:color-mix(in srgb,#16a34a 25%,var(--line));}
#notifyBtn.notify-ready{color:var(--primary);border-color:color-mix(in srgb,var(--primary) 25%,var(--line));}
#notifyBtn.notify-off{color:var(--muted);}
#themeBtn{font-weight:800}

body[data-theme="light"]{
  background:
    radial-gradient(circle at 10% 8%, rgba(255,255,255,.42), transparent 22%),
    radial-gradient(circle at 88% 8%, rgba(218,224,160,.28), transparent 24%),
    radial-gradient(circle at 58% 92%, rgba(214,185,198,.22), transparent 30%),
    linear-gradient(135deg,#d4c5cd 0%,#eee5df 42%,#d8d1c9 100%)!important;
  color:#26232a!important;
}
[data-theme="light"]{
  --bg:#d4c5cd;
  --bg2:#eee5df;
  --panel:rgba(250,246,240,.78);
  --panel2:rgba(245,239,233,.72);
  --text:#26232a;
  --muted:#736873;
  --line:rgba(95,83,94,.13);
  --primary:#6b63ef;
  --primary2:#c4d46a;
  --green:#58cfa1;
  --amber:#e2b650;
  --red:#e36464;
  --shadow:0 20px 55px rgba(72,61,70,.10);
  --ring-track:rgba(203,197,202,.62);
  --input:rgba(255,252,247,.78);
  --chip:rgba(255,252,247,.64);
  --nav:rgba(246,239,235,.58);
  --nav-active:rgba(107,99,239,.12);
}
[data-theme="light"] .sidebar{
  background:rgba(243,236,233,.66)!important;
  border-right:1px solid rgba(255,255,255,.36)!important;
  box-shadow:10px 0 34px rgba(72,61,70,.045)!important;
}
[data-theme="light"] .card{
  background:rgba(250,246,240,.76)!important;
  border:1px solid rgba(255,255,255,.55)!important;
  box-shadow:0 20px 55px rgba(72,61,70,.10), inset 0 1px 0 rgba(255,255,255,.62)!important;
}
[data-theme="light"] .timer-card{background:rgba(250,246,240,.72)!important}
[data-theme="light"] .stat-row,
[data-theme="light"] .task,
[data-theme="light"] .sound,
[data-theme="light"] .pillbtn,
[data-theme="light"] .switch-row,
[data-theme="light"] .modes,
[data-theme="light"] .side-card{
  background:rgba(255,252,247,.62)!important;
  border-color:rgba(95,83,94,.12)!important;
  box-shadow:0 8px 22px rgba(72,61,70,.045)!important;
}
[data-theme="light"] .modes button.active,
[data-theme="light"] .primary{
  background:linear-gradient(135deg,#6463ee,#8077f4)!important;
  box-shadow:0 14px 30px rgba(100,99,238,.18)!important;
}
[data-theme="light"] .ring{box-shadow:0 20px 58px rgba(100,99,238,.12)!important}
[data-theme="light"] .ring:before{background:rgba(248,245,241,.95)!important;box-shadow:inset 0 0 0 1px rgba(95,83,94,.10)!important}
[data-theme="light"] .toplink{color:#4b4450!important;font-weight:850}
[data-theme="light"] .hello h1{color:#26232a!important}
[data-theme="light"] .hello p,
[data-theme="light"] .hint,
[data-theme="light"] small{color:#7a7079!important}
[data-theme="light"] .input,
[data-theme="light"] .select{
  background:rgba(255,252,247,.78)!important;
  border-color:rgba(95,83,94,.14)!important;
  color:#26232a!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.66),0 5px 14px rgba(72,61,70,.035)!important;
}
[data-theme="light"] .select{padding-right:42px!important;background-position:right 16px center!important}
[data-theme="light"] .focus-task,
[data-theme="light"] .badge,
[data-theme="light"] .task-category{background:rgba(100,99,238,.11)!important;color:#5d56dd!important}
[data-theme="light"] .bar{background:rgba(202,195,201,.56)!important}
[data-theme="light"] .score-ring div{background:rgba(248,245,241,.95)!important}
[data-theme="light"] .nav button.active,
[data-theme="light"] .nav button:hover{
  background:rgba(100,99,238,.12)!important;
  border-color:rgba(100,99,238,.22)!important;
  color:#5d56dd!important;
}
[data-theme="light"] .logo{box-shadow:0 12px 24px rgba(100,99,238,.18)!important}
@media(max-width:980px){.actions{flex-wrap:wrap;justify-content:flex-end}.pillbtn#notifyBtn,.pillbtn#themeBtn,.pillbtn#helpModeBtn{padding:9px 12px}}

/* =========================================================
   Parmodoro v7 — Premium SaaS Visual Refresh
   Theme names: Midnight + Morning Paper
   Goal: warm, soft, token-driven UI. Notification moves to Settings.
   ========================================================= */
:root{
  --radius-card:30px;
  --radius-control:18px;
  --radius-pill:999px;
  --ease-out:cubic-bezier(.22,.61,.36,1);
}
body[data-theme="dark"], [data-theme="dark"]{
  --bg:#07111f;
  --bg2:#101a32;
  --panel:#111d31;
  --panel2:#15243b;
  --text:#f7f7fb;
  --muted:#aeb8cc;
  --line:#253550;
  --primary:#7c8cff;
  --primary2:#a475ff;
  --green:#7bd9bd;
  --amber:#f2bd62;
  --red:#ee858e;
  --focus:#7c8cff;
  --session:#72d6b3;
  --streak:#f0b85b;
  --productivity:#a475ff;
  --shadow:0 22px 70px rgba(0,0,0,.26);
  --ring-track:#24334b;
  --input:#0e1a2c;
  --chip:#1b2940;
  --nav:#0b1627;
  --nav-active:#1b2d55;
  --badge-bg:#252b4b;
  --badge-text:#aeb8ff;
}
body[data-theme="light"], [data-theme="light"]{
  --bg:#f2e9e5;
  --bg2:#e9d7df;
  --panel:#fcf7f2;
  --panel2:#f7efe9;
  --text:#302a37;
  --muted:#7a6d79;
  --line:#e7dcd6;
  --primary:#8a6cf3;
  --primary2:#d889a8;
  --green:#7fcdb7;
  --amber:#eebf63;
  --red:#e88a8e;
  --focus:#8a6cf3;
  --session:#7fcdb7;
  --streak:#eebf63;
  --productivity:#9b72dc;
  --shadow:0 22px 56px rgba(66,39,55,.075);
  --ring-track:#e6dedf;
  --input:#fffaf6;
  --chip:#f1e8ee;
  --nav:#efe4df;
  --nav-active:#e7dcff;
  --badge-bg:#eee7fb;
  --badge-text:#6d55ce;
}
body[data-theme="light"]{
  background:
    radial-gradient(circle at 86% 2%, rgba(238,191,99,.22), transparent 24%),
    radial-gradient(circle at 70% 0%, rgba(216,137,168,.20), transparent 28%),
    linear-gradient(135deg,#efe3df 0%,#f2e9e5 46%,#eadce4 100%)!important;
}
body[data-theme="dark"]{
  background:
    radial-gradient(circle at 78% 0%, rgba(124,140,255,.13), transparent 28%),
    radial-gradient(circle at 18% 0%, rgba(34,211,238,.08), transparent 32%),
    linear-gradient(135deg,#07111f 0%,#0b1730 100%)!important;
}
.app{grid-template-columns:260px minmax(0,1fr)}
.sidebar{background:color-mix(in srgb,var(--nav) 92%,transparent)!important;border-right:1px solid color-mix(in srgb,var(--line) 72%,transparent)!important;box-shadow:8px 0 36px rgba(50,30,30,.035)}
body[data-theme="light"] .sidebar{background:linear-gradient(180deg,#efe4df 0%,#f4ebe7 100%)!important;box-shadow:12px 0 42px rgba(74,47,62,.06)}
.card{border-radius:var(--radius-card)!important;border:1px solid color-mix(in srgb,var(--line) 68%,transparent)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 98%,transparent),color-mix(in srgb,var(--panel2) 96%,transparent))!important;box-shadow:var(--shadow)!important}
body[data-theme="light"] .card{background:linear-gradient(180deg,#fffaf6 0%,#f9f1eb 100%)!important;border-color:rgba(108,78,82,.075)!important;box-shadow:0 24px 64px rgba(66,39,55,.075)!important}
body[data-theme="light"] .timer-card{background:linear-gradient(180deg,#fffaf7 0%,#f8eee9 100%)!important}
.hello h1{letter-spacing:-.045em;color:var(--text)}
.hello p{color:var(--muted)}
.pillbtn{border-radius:var(--radius-pill)!important;background:color-mix(in srgb,var(--panel) 92%,transparent)!important;border-color:color-mix(in srgb,var(--line) 60%,transparent)!important;box-shadow:0 14px 32px rgba(54,36,52,.06)!important;min-width:auto!important}
body[data-theme="light"] .pillbtn{background:#fffaf4!important;border-color:rgba(80,55,69,.055)!important;color:#5e5361!important}
#themeBtn{font-weight:850}
#themeBtn.theme-paper{color:#533f59!important}
#themeBtn.theme-midnight{color:#eef2ff!important}
.primary,.modes button.active{background:linear-gradient(135deg,var(--primary),var(--primary2))!important;box-shadow:0 18px 42px color-mix(in srgb,var(--primary) 28%,transparent)!important}
body[data-theme="light"] .primary, body[data-theme="light"] .modes button.active{box-shadow:0 16px 34px rgba(138,108,243,.22)!important}
.ghost,.mini,.sound,.task,.stat-row,.input,.select,.switch-row{border-color:color-mix(in srgb,var(--line) 72%,transparent)!important;background:color-mix(in srgb,var(--input) 92%,var(--panel))!important}
body[data-theme="light"] .ghost, body[data-theme="light"] .mini, body[data-theme="light"] .sound, body[data-theme="light"] .task, body[data-theme="light"] .stat-row, body[data-theme="light"] .input, body[data-theme="light"] .select, body[data-theme="light"] .switch-row{background:#fffaf6!important;border-color:rgba(91,66,78,.075)!important}
.modes{background:color-mix(in srgb,var(--panel) 82%,var(--chip))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
body[data-theme="light"] .modes{background:#fffaf6!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 34px rgba(74,47,62,.055)}
.ring{background:conic-gradient(var(--focus) calc(var(--p)*1%),var(--ring-track) 0)!important;box-shadow:0 28px 70px color-mix(in srgb,var(--focus) 16%,transparent)!important}
.ring:before{background:linear-gradient(180deg,var(--panel),var(--panel2))!important}
body[data-theme="light"] .ring:before{background:#fffaf6!important}.focus-task{background:color-mix(in srgb,var(--primary) 12%,var(--chip))!important;color:color-mix(in srgb,var(--primary) 84%,var(--text))!important}.bar span{background:var(--focus)!important}#sessionBar{background:var(--session)!important}#streakBar{background:var(--streak)!important}.score-ring{background:conic-gradient(var(--productivity) 0 80%,var(--ring-track) 0)!important}.score-ring div{background:var(--panel)!important}.badge{background:var(--badge-bg)!important;color:var(--badge-text)!important}.sound.active{border-color:var(--primary)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 13%,transparent)!important}.nav button{border-radius:18px!important}.nav button.active{background:var(--nav-active)!important;color:var(--primary)!important}.nav .ico{background:color-mix(in srgb,var(--primary) 12%,transparent)!important}.side-card{border-radius:24px!important;background:linear-gradient(180deg,var(--panel),var(--panel2))!important}body[data-theme="light"] .side-card{background:#fffaf6!important}.select{padding-right:46px!important;background-position:calc(100% - 24px) 50%,calc(100% - 18px) 50%!important}.field-note{display:block;margin-top:9px;color:var(--muted);font-size:12px;line-height:1.45}.field-note[data-state="on"]{color:var(--session)}.field-note[data-state="blocked"]{color:var(--red)}.field-note[data-state="ready"]{color:var(--muted)}.field-note[data-state="off"]{color:var(--amber)}.actions{gap:12px}.mini-links{margin-right:8px}.toplink{font-size:12px!important}.footer{color:var(--muted);font-size:12px}.notice{background:color-mix(in srgb,var(--amber) 9%,var(--panel))!important;border-color:color-mix(in srgb,var(--amber) 28%,var(--line))!important}.toast{border-radius:18px!important}.welcome-card{background:linear-gradient(180deg,var(--panel),var(--panel2))!important;border:1px solid var(--line)!important;border-radius:30px!important}
@media(max-width:980px){.app{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.side-card{position:relative;left:auto;right:auto;bottom:auto;margin-top:14px}.top{align-items:flex-start}.actions{justify-content:flex-start}.grid,.below{grid-template-columns:1fr!important}}

/* =========================================================
   Parmodoro v7.1 — Palette/Alert Refinement
   - Midnight returns to crisp blue SaaS controls.
   - Morning Paper follows warm beige + charcoal + sunshine palette.
   - Completion alerts toggle controls alarm/popup/title + desktop notifications.
   ========================================================= */
body[data-theme="dark"], [data-theme="dark"]{
  --bg:#07111f;
  --bg2:#0b1730;
  --panel:#101c2e;
  --panel2:#14223a;
  --text:#f8fafc;
  --muted:#a8b3c7;
  --line:#24344f;
  --primary:#3b82f6;
  --primary2:#2563eb;
  --green:#4ade80;
  --amber:#fbbf24;
  --red:#fb7185;
  --focus:#3b82f6;
  --session:#4ade80;
  --streak:#fbbf24;
  --productivity:#4ade80;
  --shadow:0 22px 70px rgba(0,0,0,.28);
  --ring-track:#20304a;
  --input:#0b1627;
  --chip:#172746;
  --nav:#0d1829;
  --nav-active:#173a7a;
  --badge-bg:#172746;
  --badge-text:#60a5fa;
}
body[data-theme="dark"] .primary,
body[data-theme="dark"] .modes button.active{background:linear-gradient(135deg,#3b82f6,#2563eb)!important;box-shadow:0 18px 42px rgba(59,130,246,.32)!important}
body[data-theme="dark"] .score-ring{background:conic-gradient(#4ade80 0 80%,var(--ring-track) 0)!important}
body[data-theme="dark"] .focus-task{background:rgba(59,130,246,.14)!important;color:#93c5fd!important}

body[data-theme="light"], [data-theme="light"]{
  --bg:#d7d0c6;
  --bg2:#eee8de;
  --panel:#f7f2e9;
  --panel2:#ede5da;
  --text:#232329;
  --muted:#716b63;
  --line:#ded5c8;
  --primary:#20242c;
  --primary2:#3b4048;
  --green:#ef745e;
  --amber:#f4c84f;
  --red:#ee6b62;
  --focus:#f4c84f;
  --session:#ef745e;
  --streak:#252b30;
  --productivity:#f4c84f;
  --shadow:0 20px 58px rgba(45,36,30,.08);
  --ring-track:#ddd6cd;
  --input:#fffaf0;
  --chip:#ebe2d8;
  --nav:#eee7de;
  --nav-active:#20242c;
  --badge-bg:#eee1d7;
  --badge-text:#5b4d49;
}
body[data-theme="light"]{
  background:
    radial-gradient(circle at 82% 2%,rgba(244,200,79,.22),transparent 26%),
    radial-gradient(circle at 18% 0%,rgba(238,107,98,.12),transparent 26%),
    linear-gradient(135deg,#d8d1c7 0%,#eee8de 42%,#d6cec3 100%)!important;
}
body[data-theme="light"] .sidebar{background:linear-gradient(180deg,#eee7de 0%,#e8dfd5 100%)!important;border-right:1px solid rgba(60,51,45,.08)!important;box-shadow:14px 0 48px rgba(50,40,34,.06)!important}
body[data-theme="light"] .card{background:linear-gradient(180deg,#f8f3ea 0%,#eee6dc 100%)!important;border-color:rgba(62,52,45,.055)!important;box-shadow:0 24px 64px rgba(45,36,30,.085)!important}
body[data-theme="light"] .timer-card{background:linear-gradient(180deg,#f8f3ea 0%,#ece3d8 100%)!important}
body[data-theme="light"] .stat-row,
body[data-theme="light"] .task,
body[data-theme="light"] .sound,
body[data-theme="light"] .ghost,
body[data-theme="light"] .mini,
body[data-theme="light"] .switch-row,
body[data-theme="light"] .input,
body[data-theme="light"] .select,
body[data-theme="light"] .pillbtn{background:#fffaf0!important;border-color:rgba(58,49,43,.07)!important;color:#232329!important;box-shadow:0 10px 26px rgba(45,36,30,.045)!important}
body[data-theme="light"] .primary,
body[data-theme="light"] .modes button.active{background:linear-gradient(135deg,#20242c,#3b4048)!important;color:#fff!important;box-shadow:0 16px 34px rgba(32,36,44,.22)!important}
body[data-theme="light"] .modes{background:#fffaf0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 12px 34px rgba(45,36,30,.055)!important}
body[data-theme="light"] .modes button{color:#59534d!important}
body[data-theme="light"] .nav button.active{background:#20242c!important;color:#fff!important;box-shadow:0 14px 34px rgba(32,36,44,.18)!important}
body[data-theme="light"] .nav button:hover{background:rgba(32,36,44,.08)!important;color:#232329!important}
body[data-theme="light"] .nav button.active .ico{background:rgba(244,200,79,.18)!important;color:#f4c84f!important}
body[data-theme="light"] .ring{background:conic-gradient(#f4c84f calc(var(--p)*1%), #ded7cf 0)!important;box-shadow:0 32px 74px rgba(244,200,79,.18)!important}
body[data-theme="light"] .ring:before{background:#f8f3ea!important;box-shadow:inset 0 0 0 1px rgba(62,52,45,.05)!important}
body[data-theme="light"] .bar span{background:#f4c84f!important}
body[data-theme="light"] #sessionBar{background:#ef745e!important}
body[data-theme="light"] #streakBar{background:#252b30!important}
body[data-theme="light"] .score-ring{background:conic-gradient(#f4c84f 0 80%,#ddd6cd 0)!important}
body[data-theme="light"] .score-ring div{background:#f8f3ea!important}
body[data-theme="light"] .focus-task,
body[data-theme="light"] .badge,
body[data-theme="light"] .task-category{background:#eee1d7!important;color:#5b4d49!important}
body[data-theme="light"] .sound.active{border-color:#20242c!important;box-shadow:0 0 0 4px rgba(32,36,44,.10)!important}
body[data-theme="light"] .hello h1{color:#232329!important}
body[data-theme="light"] .hello p,
body[data-theme="light"] .hint,
body[data-theme="light"] small{color:#716b63!important}
body[data-theme="light"] .side-card{background:#fffaf0!important}
body[data-theme="light"] #themeBtn.theme-paper{color:#232329!important;font-weight:900}
body[data-theme="light"] .field-note[data-state="on"]{color:#475467!important}
body[data-theme="light"] .field-note[data-state="off"]{color:#8a5d36!important}

/* v7.2 — Midnight mode tab calm refinement
   Morning Paper is intentionally untouched. */
body[data-theme="dark"] .modes,
[data-theme="dark"] .modes{
  background:linear-gradient(180deg,#162945 0%,#14253f 100%)!important;
  border:1px solid rgba(147,197,253,.08)!important;
  border-radius:18px!important;
  padding:7px!important;
  gap:7px!important;
  margin-bottom:24px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 16px 38px rgba(2,6,23,.16)!important;
}
body[data-theme="dark"] .modes button,
[data-theme="dark"] .modes button{
  padding:12px 14px!important;
  border-radius:14px!important;
  color:#b8c4d8!important;
  background:transparent!important;
  box-shadow:none!important;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
body[data-theme="dark"] .modes button:hover,
[data-theme="dark"] .modes button:hover{
  color:#eaf2ff!important;
  background:rgba(59,130,246,.08)!important;
}
body[data-theme="dark"] .modes button.active,
[data-theme="dark"] .modes button.active{
  color:#fff!important;
  background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%)!important;
  box-shadow:0 14px 30px rgba(37,99,235,.30)!important;
  transform:none!important;
}

/* v7.3 UI polish: dropdowns, buttons, Learning Mode state */
.select{
  appearance:none;
  -webkit-appearance:none;
  background-color:var(--input);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 23px) 50%,
    calc(100% - 16px) 50%;
  background-size:7px 7px,7px 7px;
  background-repeat:no-repeat;
  padding-right:44px!important;
  cursor:pointer;
}
.select:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--line));}
.select:focus{background-image:
    linear-gradient(45deg, var(--primary) 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, var(--primary) 50%);
}
select option{background:var(--panel);color:var(--text);padding:12px;border-radius:14px;}
.secondary-action{
  padding:15px 18px;border-radius:18px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 16%,var(--chip)),var(--chip));
  color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 22%,var(--line));
  font-weight:900;box-shadow:0 12px 28px color-mix(in srgb,var(--primary) 10%,transparent);
}
.secondary-action:hover{transform:translateY(-1px);box-shadow:0 16px 34px color-mix(in srgb,var(--primary) 16%,transparent)}
.shuffle-btn{display:flex;align-items:center;justify-content:center;gap:8px;}
.help-toggle{opacity:.78;transition:.18s ease;}
.help-toggle.active{
  opacity:1;
  color:#2f220b!important;
  background:#fff3d7!important;
  border-color:#edc978!important;
  box-shadow:0 12px 30px rgba(237,201,120,.22)!important;
}
.help-toggle.active::after{content:' ON';font-weight:950;margin-left:4px;color:#9a6106;}
.help-toggle:not(.active)::after{content:' OFF';font-weight:850;margin-left:4px;color:var(--muted);opacity:.8;}
[data-theme="dark"] .modes{
  background:rgba(23,39,70,.72)!important;
  border:1px solid rgba(118,151,202,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
[data-theme="dark"] .modes button{color:#b6c4dd;}
[data-theme="dark"] .modes button.active{
  background:linear-gradient(135deg,#3b82f6,#2563eb)!important;
  color:#fff!important;
  box-shadow:0 14px 32px rgba(37,99,235,.28)!important;
}
@media(max-width:560px){.help-toggle::after{display:none}.select{padding-right:40px!important;background-position:calc(100% - 21px) 50%,calc(100% - 14px) 50%;}}

/* v7.4 Settings Page Polish */
.settings-page{display:grid;gap:18px;max-width:1180px;margin:0 auto 28px}
.settings-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:26px 28px!important}
.settings-hero .eyebrow{margin:0 0 6px;color:var(--primary);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.settings-hero h2{margin:0;font-size:30px;letter-spacing:-.03em}
.settings-hero p{margin:6px 0 0;color:var(--muted)}
.settings-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.settings-actions .primary{min-width:auto;padding:14px 20px;border-radius:18px}
.settings-card{padding:22px 24px!important}
.settings-card-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent)}
.settings-card-head h3{margin:0 0 5px;font-size:18px;letter-spacing:-.01em;text-transform:none;color:var(--text)}
.settings-card-head p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.settings-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:16px;background:color-mix(in srgb,var(--primary) 13%,var(--panel));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 20%,transparent);font-size:20px;flex:0 0 auto}
.settings-grid-clean{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 20px}
.setting-field{padding:0;background:transparent;border:0}
.setting-field label:first-child{display:flex;align-items:center;gap:6px;margin-bottom:9px;font-size:13px;font-weight:900;color:var(--muted)}
.setting-field .input,.setting-field .select,.setting-field .secondary-action{height:54px;border-radius:18px;width:100%}
.setting-field .secondary-action{display:flex;align-items:center;justify-content:center;background:var(--chip);border:1px solid var(--line);color:var(--text);font-weight:900;box-shadow:none}
.setting-field .secondary-action:hover{background:color-mix(in srgb,var(--primary) 12%,var(--chip));border-color:color-mix(in srgb,var(--primary) 34%,var(--line));transform:translateY(-1px)}
.modern-switch{height:54px;border-radius:18px;background:var(--field);border:1px solid var(--line);padding:0 12px 0 16px;display:flex!important;align-items:center;justify-content:space-between;gap:14px;color:var(--text)!important;margin:0!important}
.modern-switch span:first-child{font-weight:900;color:var(--text)}
.inline-control{display:grid;grid-template-columns:1fr 56px;gap:10px;align-items:center}
.icon-test{height:54px;width:56px;border-radius:18px;background:var(--chip);border:1px solid var(--line);color:var(--text);font-weight:950;font-size:18px;display:grid;place-items:center}
.icon-test:hover{background:color-mix(in srgb,var(--primary) 16%,var(--chip));border-color:color-mix(in srgb,var(--primary) 34%,var(--line));transform:translateY(-1px)}
.field-note{display:block;margin-top:9px;color:var(--muted);font-size:12px;line-height:1.35}
.about-notice{background:color-mix(in srgb,var(--amber) 10%,var(--panel));border-color:color-mix(in srgb,var(--amber) 24%,var(--line))}
/* keep old settings-group hidden if browser cache still renders old structure */
.settings-group{border-top:0}
@media(max-width:980px){.settings-hero{align-items:flex-start;flex-direction:column}.settings-actions{justify-content:flex-start}.settings-grid-clean{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.settings-page{gap:14px}.settings-hero,.settings-card{padding:18px!important}.settings-grid-clean{grid-template-columns:1fr}.settings-card-head{gap:12px}.settings-icon{width:38px;height:38px;border-radius:14px}.settings-hero h2{font-size:25px}.settings-actions{width:100%}.settings-actions .primary{width:100%}.inline-control{grid-template-columns:1fr 52px}.icon-test{width:52px}}

/* v7.5 — Tooltip & Dropdown Polish
   - Field controls no longer show duplicate help balloons.
   - Select controls use a clearer chevron indicator with better spacing.
*/
.field .input[data-tooltip],
.field .select[data-tooltip]{
  outline:none!important;
}
.help-mode .field .input[data-tooltip],
.help-mode .field .select[data-tooltip]{
  outline:none!important;
}

.select{
  appearance:none!important;
  -webkit-appearance:none!important;
  -moz-appearance:none!important;
  padding-right:52px!important;
  background-repeat:no-repeat!important;
  background-size:18px 18px!important;
  background-position:calc(100% - 20px) 50%!important;
  background-image:url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 9.5L12 14.5L17 9.5' stroke='%23B8C4D8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}
body[data-theme="light"] .select{
  background-image:url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 9.5L12 14.5L17 9.5' stroke='%236F6474' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}
.select:focus{
  background-size:18px 18px!important;
  background-position:calc(100% - 20px) 50%!important;
}
select option{
  background:var(--panel)!important;
  color:var(--text)!important;
  padding:14px 16px!important;
}

/* Browser option dropdowns cannot be fully rounded consistently across all browsers.
   This makes the closed select look premium and prevents the native popup from feeling too cramped. */
.setting-field .select,
.inline-control .select,
.input-row .select{
  min-height:54px;
  border-radius:18px!important;
}

@media(max-width:560px){
  .select{padding-right:48px!important;background-position:calc(100% - 18px) 50%!important;}
}


/* v7.6 — Select Chevron & Real Ambient Fix
   Use an external select shell for the chevron so the icon never repeats on Morning Paper. */
.select{
  background-image:none!important;
  background-repeat:no-repeat!important;
  padding-right:48px!important;
}
.select-shell{
  position:relative;
  display:block;
  width:100%;
}
.input-row .select-shell{max-width:inherit;flex:1;}
.inline-control .select-shell{width:100%;}
.select-shell .select{width:100%;}
.select-shell::after{
  content:'';
  position:absolute;
  right:18px;
  top:50%;
  width:10px;
  height:10px;
  border-right:2.4px solid var(--muted);
  border-bottom:2.4px solid var(--muted);
  transform:translateY(-62%) rotate(45deg);
  pointer-events:none;
  opacity:.85;
  transition:opacity .18s ease, border-color .18s ease, transform .18s ease;
}
.select-shell:hover::after,
.select-shell:focus-within::after{
  opacity:1;
  border-color:var(--primary);
}
.select-shell:focus-within::after{
  transform:translateY(-40%) rotate(225deg);
}
body[data-theme="light"] .select-shell::after{border-color:#6f6474;opacity:.8;}
body[data-theme="light"] .select-shell:hover::after,
body[data-theme="light"] .select-shell:focus-within::after{border-color:var(--primary);opacity:1;}
/* ensure wrapped selects inside compact task rows keep their intended size */
.input-row .select-shell[style]{flex:0 1 auto;}
@media(max-width:560px){.select{padding-right:44px!important}.select-shell::after{right:16px;width:9px;height:9px}}

/* v7.7 Dropdown chevron final fix
   Use a single SVG chevron per select. This overrides earlier gradient chevron rules
   that could repeat in Morning Paper and disappear in Midnight. */
select.select{
  appearance:none!important;
  -webkit-appearance:none!important;
  -moz-appearance:none!important;
  padding-right:48px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23A7B3C7' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-size:18px 18px!important;
  background-position:right 17px center!important;
}
select.select::-ms-expand{display:none!important}

body[data-theme="light"] select.select,
[data-theme="light"] select.select{
  background-color:rgba(255,250,245,.82)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2374626d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-size:18px 18px!important;
  background-position:right 17px center!important;
}

body[data-theme="dark"] select.select,
[data-theme="dark"] select.select{
  background-color:var(--input)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23B8C7E8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-size:18px 18px!important;
  background-position:right 17px center!important;
}