@layer reset, base, components, responsive;
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p { margin: 0; }
  button, input, select { font: inherit; }
  button, a, input, select { -webkit-tap-highlight-color: transparent; }
  button { cursor: pointer; }
  [hidden] { display: none !important; }
}
@layer base {
  :root { --paper: #f7f5ec; --surface: #fffcf5; --ink: #304a3e; --muted: #647065; --accent: #e9ce80; --accent-soft: #f4e6b7; --line: #dce0d3; --danger: #983f36; --space-1: .35rem; --space-2: .75rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --radius: 1.5rem; --shadow: 0 20px 70px #304a3e12; --motion: 180ms; color-scheme: light; font-family: 'Avenir Next', 'Segoe UI', system-ui, sans-serif; color: var(--ink); background: var(--paper); font-synthesis: none; }
  body { min-width: 280px; min-height: 100svh; line-height: 1.5; background: radial-gradient(ellipse at 50% 45%, #fffdf6 0, transparent 63%); }
  button, a, input, select { touch-action: manipulation; }
  a { color: inherit; }
  button { color: inherit; }
  :focus-visible { outline: 3px solid #936422; outline-offset: 5px; }
  button:disabled { cursor: default; }
  h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 6.5vw, 2.9rem); font-weight: 500; line-height: 1.16; letter-spacing: -.045em; text-wrap: balance; }
  h2 { font-size: 1.35rem; letter-spacing: -.025em; }
  h3 { font-size: .73rem; text-transform: uppercase; letter-spacing: .085em; margin-bottom: var(--space-4); }
  input:not([type=checkbox]), select { border: 1px solid #a8b5a7; border-radius: .7rem; background: var(--surface); color: var(--ink); min-height: 48px; padding: .65rem .8rem; min-width: 0; max-width: 100%; }
  label { font-weight: 550; }
}
@layer components {
  .app-layout { max-width: 860px; min-height: 100svh; margin: auto; padding: max(1.5rem, env(safe-area-inset-top)) 2rem max(1.25rem, env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
  .app-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .wordmark { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; line-height: 1.05; font-size: 1.42rem; font-weight: 750; letter-spacing: -.04em; }
  .wordmark img { border-radius: 14px; }
  .wordmark-bottom { display: block; font-size: .73rem; letter-spacing: .015em; font-weight: 500; margin-top: .35rem; }
  .icon-button { display: grid; place-items: center; flex-shrink: 0; border: 1px solid var(--line); width: 46px; height: 46px; background: transparent; border-radius: 50%; font-size: 1.6rem; }
  .icon-button svg circle { fill: var(--paper); }
  .icon-button:hover { background: var(--accent-soft); }
  .timer-main { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3.5rem 0 2rem; }
  .eyebrow { text-transform: uppercase; font-size: .64rem; letter-spacing: .18em; font-weight: 650; margin-bottom: 1rem; color: var(--muted); }
  .room-name { font-size: .85rem; color: var(--muted); margin-top: .8rem; overflow-wrap: anywhere; }
  .status-pill { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 550; background: #e8ece1; padding: .45rem .85rem; border-radius: 2rem; margin-top: 1.75rem; }
  .status-dot, .network-dot { height: 6px; width: 6px; flex-shrink: 0; border-radius: 50%; background: #53704d; }
  .timer-wrap { width: min(320px, 100%); aspect-ratio: 1; position: relative; margin: 1.3rem 0 1.6rem; }
  .timer-ring { width: 100%; height: 100%; position: absolute; inset: 0; transform: rotate(-90deg); fill: none; stroke-width: 3px; pointer-events: none; }
  .ring-track { stroke: #dee2d4; }
  .ring-progress { stroke: var(--ink); stroke-linecap: round; transition: stroke-dashoffset var(--motion) linear; }
  .timer-button { position: absolute; inset: 11px; width: calc(100% - 22px); height: calc(100% - 22px); border: 0; border-radius: 50%; background: var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 -6px 0 #b9953e12, 0 12px 35px #ad92451a; transition: background var(--motion), transform var(--motion); }
  .timer-button:not(:disabled):hover { background: #e7c66d; transform: scale(.986); }
  .timer-button:not(:disabled):active { transform: scale(.965); }
  .timer-cat { opacity: .9; margin-bottom: .6rem; }
  .timer-digits { font-size: clamp(3.6rem, 14vw, 4.5rem); font-weight: 450; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.045em; }
  .action-label { font-size: .83rem; font-weight: 600; max-width: 85%; margin-top: .5rem; }
  .play-symbol { font-size: 1.35rem; line-height: 1; margin-top: .9rem; }
  body[data-timer=running] .timer-button { background: #e5eadb; }
  body[data-timer=completed] .timer-button { background: #f1dda3; animation: completed 600ms ease-out 1; }
  .initiator { font-size: .84rem; overflow-wrap: anywhere; max-width: 100%; }
  .supporting { color: var(--muted); font-size: .9rem; line-height: 1.6; max-width: 340px; margin-top: .8rem; }
  .network-note { font-size: .78rem; }
  .text-button { border: 0; background: transparent; padding: .7rem 1rem; min-height: 44px; font-size: .82rem; text-decoration: underline; text-underline-offset: .25em; }
  .compact { padding-left: 0; }
  .danger { color: var(--danger); }
  .notice { background: #fae5d8; color: #72362a; border-radius: .8rem; padding: .85rem; margin-top: 1rem; font-size: .85rem; max-width: 100%; }
  .app-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .75rem; color: var(--muted); font-size: .67rem; padding-top: .75rem; }
  .footer-flower { font-size: 1.1rem; color: #8c9271; }
  .network { display: inline-flex; align-items: center; gap: .45rem; }
  .network[data-state=offline] .network-dot { background: #847564; }
  .network[data-state=reconnecting] .network-dot { background: #9d7529; }
  dialog { border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--surface); padding: 0; width: min(460px, calc(100% - 24px)); max-height: calc(100svh - 32px); box-shadow: var(--shadow); }
  dialog::backdrop { background: #243c3270; backdrop-filter: blur(4px); }
  .dialog-header { position: sticky; top: 0; z-index: 1; background: var(--surface); display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--line); }
  .dialog-body { padding: 1.5rem; }
  .settings-section + .settings-section { margin-top: 1.7rem; padding-top: 1.7rem; border-top: 1px solid var(--line); }
  .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 60px; padding: .75rem 0; cursor: pointer; }
  .setting-row > span { min-width: 0; }
  .setting-title { display: block; font-size: .87rem; }
  .field-help { display: block; font-size: .74rem; font-weight: 400; line-height: 1.5; color: var(--muted); margin-top: .3rem; }
  input[type=checkbox] { appearance: none; flex-shrink: 0; width: 44px; height: 27px; border-radius: 18px; border: 1px solid #889887; background: #e6e9e0; position: relative; cursor: pointer; }
  input[type=checkbox]::after { content: ''; display: block; position: absolute; width: 19px; height: 19px; border-radius: 50%; left: 3px; top: 3px; background: #667763; transition: transform var(--motion); }
  input[type=checkbox]:checked { background: var(--ink); border-color: var(--ink); }
  input[type=checkbox]:checked::after { transform: translateX(17px); background: var(--surface); }
  input[type=checkbox]:disabled { opacity: .45; cursor: not-allowed; }
  .duration-control { display: flex; align-items: center; gap: .7rem; margin: .75rem 0; font-size: .85rem; }
  .duration-control input { width: 100px; }
  .small-button, .solid-button { background: var(--ink); border: 1px solid var(--ink); color: var(--surface); min-height: 46px; padding: .7rem 1.15rem; border-radius: .8rem; font-weight: 550; font-size: .84rem; }
  .small-button { margin-top: 1rem; }
  .small-button:disabled, .solid-button:disabled { opacity: .5; }
  .language-label { display: block; margin: 1rem 0 .5rem; font-size: .85rem; }
  select { width: 100%; }
  .save-status { font-size: .74rem; padding-left: .5rem; }
  .settings-bottom { text-align: center; }
  .confirm-dialog { max-width: 370px; text-align: center; }
  .confirm-dialog .solid-button { width: 100%; margin-top: 1.5rem; }
  .pause-mark { display: inline-block; background: var(--accent-soft); padding: .7rem 1.1rem; border-radius: 50%; margin-bottom: 1rem; font-size: 1.4rem; }
  .login-layout { max-width: 440px; margin: auto; padding: 3rem 1.5rem; }
  .login-card { margin: 3rem 0 1.5rem; }
  .login-form { display: grid; gap: .6rem; margin-top: 2rem; font-size: .9rem; }
  .login-form button { margin-top: 1rem; }
  .login-form label:not(:first-of-type) { margin-top: .65rem; }
  .sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .skip-link:focus { position: absolute; padding: 1rem; background: var(--surface); z-index: 10; }
  @keyframes completed { 50% { transform: scale(1.025); } }
}
@layer responsive {
  @media (max-width: 430px) { .app-layout { padding-left: 1.25rem; padding-right: 1.25rem; } .timer-main { padding-top: 2.5rem; } .timer-wrap { width: min(294px, 100%); } .timer-digits { font-size: 4rem; } .dialog-body { padding: 1.25rem; } }
  @media (max-width: 350px) { .app-layout { padding-left: 1rem; padding-right: 1rem; } .timer-main { padding-top: 2rem; } .timer-wrap { width: 260px; } h1 { font-size: 1.95rem; } .eyebrow { font-size: .58rem; } .timer-digits { font-size: 3.6rem; } .timer-cat { width: 54px; height: 38px; } .action-label { font-size: .76rem; } .wordmark { font-size: 1.25rem; } }
  @media (min-width: 700px) { .app-layout { padding-top: 2rem; padding-bottom: 1.7rem; } .timer-main { padding-top: 3.6rem; } }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } dialog::backdrop { backdrop-filter: none; } }
}