:root {
  --primary: #019e4a;
  --primary-soft: #ccecdb;
  --secondary-green: #86be44;
  --secondary-green-soft: #e7f2d9;
  --orange: #e75125;
  --orange-soft: #fcead2;
  --amber: #f29522;
  --text: #0f2a1c;
  --text-muted: #476153;
  --surface: rgba(255, 255, 255, 0.92);
  --line: rgba(1, 158, 74, 0.16);
  --shadow: 0 10px 35px rgba(1, 94, 52, 0.12);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, Segoe UI, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(134, 190, 68, 0.28), transparent 28%),
    radial-gradient(circle at top right, rgba(242, 149, 34, 0.18), transparent 20%),
    linear-gradient(180deg, #f9fdfb 0%, #edf7f1 100%);
  min-height: 100vh;
}
.app-shell { width: min(1180px, calc(100% - 24px)); margin: 0 auto; padding: 18px 0 30px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.hero { padding: 28px; display: grid; gap: 12px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: auto -60px -60px auto; width: 180px; height: 180px; background: radial-gradient(circle, rgba(1, 158, 74, 0.18), transparent 65%); pointer-events: none; }
.hero-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.brand-wrap { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.boom-logo { height:42px; width:auto; display:block; }
.brand-pill { display:inline-flex; align-items:center; width:fit-content; padding:8px 14px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-weight:700; }
.hero h1 { margin:0; font-size: clamp(1.8rem, 4vw, 3rem); line-height:1.1; }
.hero p { margin:0; max-width:760px; color:var(--text-muted); font-size:1.02rem; }
.hero code, .microcopy code, .help-box code { background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 999px; }
.layout { display:grid; grid-template-columns:1.45fr 0.95fr; gap:20px; margin-top:20px; }
.timer-panel, .settings-panel, .footer-callout { padding:24px; }
.mode-selector { display:inline-grid; grid-template-columns:1fr 1fr; gap:8px; background:#f0f7f3; padding:8px; border-radius:999px; margin-bottom:18px; }
.mode-button { border:0; border-radius:999px; padding:12px 16px; font-weight:700; background:transparent; color:var(--text-muted); cursor:pointer; transition:all .18s ease; }
.mode-button.active { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary-green) 100%); color:#fff; box-shadow:0 8px 18px rgba(1, 158, 74, .25); }
.task-wrap { display:grid; gap:8px; }
label span, .task-wrap label { font-size:.95rem; font-weight:700; }
input[type="text"], input[type="number"], select {
  width:100%; border:1px solid rgba(1,158,74,.18); border-radius:var(--radius-md); padding:14px 16px; font-size:1rem; background:#fff; color:var(--text); outline:none;
}
input:focus, select:focus { box-shadow:0 0 0 4px rgba(1,158,74,.16); border-color:rgba(1,158,74,.48); }
.countdown-wrap { display:grid; place-items:center; margin:18px 0; }
.progress-ring { position:relative; width:min(100%, 420px); aspect-ratio:1/1; }
.progress-svg { width:100%; height:100%; transform:rotate(-90deg); }
.track { fill:none; stroke:rgba(1, 158, 74, .12); stroke-width:16; }
.indicator { fill:none; stroke:var(--primary); stroke-linecap:round; stroke-width:16; stroke-dasharray:603.19; stroke-dashoffset:0; transition:stroke-dashoffset .35s linear, stroke .35s ease; }
.time-core { position:absolute; inset:0; display:grid; place-content:center; text-align:center; padding:24px; }
.mode-badge { justify-self:center; padding:8px 14px; border-radius:999px; background:var(--secondary-green-soft); color:#3b6520; font-weight:700; margin-bottom:12px; }
.timer-display { font-size: clamp(3rem, 9vw, 5.6rem); font-weight:800; letter-spacing:-.04em; line-height:1; }
.session-info { margin-top:10px; color:var(--text-muted); }
.controls { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.primary-button, .secondary-button, .ghost-button {
  border:0; border-radius:999px; padding:14px 20px; font-size:1rem; font-weight:800; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.primary-button:hover, .secondary-button:hover, .ghost-button:hover { transform:translateY(-1px); }
.primary-button { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary-green) 100%); color:#fff; box-shadow:0 10px 24px rgba(1, 158, 74, .24); }
.secondary-button { background:var(--orange-soft); color:#8f3a18; }
.ghost-button { background:rgba(255,255,255,.8); color:var(--primary); border:1px solid rgba(1, 158, 74, .16); }
.hidden { display:none !important; }
.mobile-only { display:none; }
.full-width { width:100%; }
.next-action { margin-top:18px; padding:14px 16px; border-radius:var(--radius-lg); background: linear-gradient(135deg, rgba(242,149,34,.12), rgba(231,81,37,.08)); color:#64411b; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.panel-head h2 { margin:0; font-size:1.3rem; }
.settings-body { display:grid; gap:16px; margin-top:16px; }
.setting-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.switch-row { display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start; margin-top:4px; }
.switch-row input { margin-top:4px; accent-color:var(--primary); }
.m365-box { display:grid; gap:14px; padding:18px; border-radius:var(--radius-lg); border:1px dashed rgba(1,158,74,.28); background:#f7fbf8; }
.m365-head { display:flex; justify-content:space-between; align-items:start; gap:14px; }
.m365-head h3 { margin:0; font-size:1rem; }
.m365-head p { margin:.35rem 0 0; color:var(--text-muted); font-size:.92rem; }
.auth-actions { display:flex; flex-wrap:wrap; gap:8px; }
.auth-status { padding:12px 14px; border-radius:14px; background:#fff; border:1px solid rgba(1,158,74,.12); color:var(--text-muted); }
.chat-picker-wrap { display:grid; gap:10px; }
.microcopy { margin:0; font-size:.85rem; line-height:1.5; color:var(--text-muted); }
.help-box { padding:18px; border-radius:var(--radius-lg); background:#f7fbf8; border:1px dashed rgba(1, 158, 74, .28); }
.help-box h3 { margin:0 0 10px; }
.help-box ol { margin:0; padding-left:18px; color:var(--text-muted); }
.footer-callout { margin-top:20px; display:grid; gap:8px; background: linear-gradient(135deg, rgba(204,236,219,.9), rgba(252,234,210,.8)); }
.footer-callout p { margin:0; color:var(--text-muted); }
.toast { position:fixed; right:16px; bottom:16px; min-width:280px; max-width:min(92vw,520px); padding:14px 16px; border-radius:16px; background:rgba(15,42,28,.94); color:#fff; box-shadow:0 14px 30px rgba(0,0,0,.18); opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:9999; }
.toast.visible { opacity:1; transform:translateY(0); }
@media (max-width:960px) { .layout { grid-template-columns:1fr; } .progress-ring { width:min(100%, 360px); } }
@media (max-width:720px) {
  .app-shell { width:min(100% - 16px, 100%); }
  .hero, .timer-panel, .settings-panel, .footer-callout { padding:18px; }
  .setting-grid { grid-template-columns:1fr; }
  .mobile-only { display:inline-flex; }
  .settings-body.collapsed { display:none; }
  .mode-selector { width:100%; }
  .controls { flex-direction:column; }
  .primary-button, .secondary-button { width:100%; }
  .timer-display { font-size: clamp(2.8rem, 16vw, 4.2rem); }
  .hero-top, .m365-head { flex-direction:column; align-items:flex-start; }
}