:root {
  color-scheme: dark;
  font-family: "Segoe UI", Arial, sans-serif;
  background: #141538;
  color: #fff;
  --orange: #f6821f;
  --success: #57cf7d;
  --muted: #b7bbd2;
  --border: rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 33%, #292954 0%, #141538 65%), #141538;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image: linear-gradient(rgba(168, 203, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 203, 255, .07) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse, #000 3%, transparent 80%);
}
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid #fbad41; outline-offset: 3px; }
.app { position: relative; max-width: 1100px; min-height: 100vh; margin: auto; padding: 22px clamp(20px, 5vw, 56px) 16px; display: flex; flex-direction: column; }
.topbar, .settings-heading, .settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar { min-height: 48px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 750; letter-spacing: -0.02em; }
.header-logo { display: inline-flex; align-items: center; width: 164px; padding: 10px 12px; border-radius: 10px; background: #ffe9cb; }
.header-logo img { display: block; width: 100%; height: auto; }
.brand-divider { color: var(--orange); }
.text-button { border: 0; background: transparent; color: var(--muted); padding: 9px 4px; }
.text-button:hover { color: #fff; }
.text-button span { margin-left: 5px; }

.timer-section { display: flex; align-items: center; flex-direction: column; text-align: center; padding: 24px 0 26px; }
.eyebrow, .dial-label, .dial-state, .settings-heading span, .sweep-label { font-family: Consolas, "Courier New", monospace; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--orange); }
.live-dot { width: 8px; height: 8px; background: var(--orange); border-radius: 50%; box-shadow: 0 0 12px var(--orange); }
.session-name { width: min(100%, 680px); margin: 10px 0 8px; padding: 5px 12px; background: transparent; color: #fff; border: 1px solid transparent; border-radius: 10px; text-align: center; font-size: clamp(24px, 4vw, 40px); font-weight: 750; letter-spacing: -.04em; text-overflow: ellipsis; }
.session-name:hover, .session-name:focus { border-color: var(--border); background: rgba(255, 255, 255, .04); }

.clock-stage { position: relative; width: min(43vh, 400px, 78vw); aspect-ratio: 1; margin: 22px 0 10px; isolation: isolate; }
.orbit { position: absolute; border: 1px dashed rgba(246, 130, 31, .42); border-radius: 50%; pointer-events: none; }
.orbit-one { inset: -15px; animation: orbit 55s linear infinite; }
.orbit-two { inset: -27px; border-color: rgba(168, 203, 255, .19); border-style: solid; }
.orbit-two::before, .orbit-two::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 16px var(--orange); top: 50%; left: -4px; }
.orbit-two::after { left: auto; right: -4px; background: #a8cbff; box-shadow: 0 0 12px #a8cbff; }
.dial { --remaining: 100%; position: relative; width: 100%; height: 100%; padding: 10px; }
.dial::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--orange) 0 var(--remaining), rgba(255, 255, 255, .11) var(--remaining) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px)); mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px)); filter: drop-shadow(0 0 12px rgba(246, 130, 31, .35)); }
.dial-inner { position: relative; width: 100%; height: 100%; }
.clock-hand { position: absolute; left: calc(50% - 3px); bottom: 50%; width: 6px; height: 36%; border-radius: 6px; background: linear-gradient(to top, #ff6633, #fbad41); box-shadow: 0 0 17px rgba(246, 130, 31, .85), 0 0 4px #fbad41; transform-origin: 50% 100%; transform: rotate(var(--hand-angle, 0deg)); will-change: transform; }
.hand-tip { position: absolute; top: -3px; left: -3px; width: 12px; height: 12px; border-radius: 50%; background: #fbad41; box-shadow: 0 0 15px var(--orange); }
.clock-hub { position: absolute; z-index: 3; left: 50%; top: 50%; width: 19px; height: 19px; transform: translate(-50%, -50%); border: 4px solid var(--orange); border-radius: 50%; background: #fff; box-shadow: 0 0 18px var(--orange); }
.center-logo { position: absolute; z-index: 2; left: 50%; top: 69%; width: 70%; padding: 14px 18px; transform: translate(-50%, -50%); border-radius: 14px; background: #ffe9cb; box-shadow: 0 10px 42px rgba(0, 0, 0, .24); }
.center-logo img { display: block; width: 100%; height: auto; }
body.running .clock-stage { filter: drop-shadow(0 0 14px rgba(246, 130, 31, .18)); }
body.running .orbit-one { animation-duration: 20s; }
body.running .live-dot { animation: blink 1.5s ease-in-out infinite; }

.readout { display: flex; flex-direction: column; align-items: center; margin-top: 8px; }
.dial-label { color: var(--muted); }
.dial-label span { color: var(--orange); }
.time { font-family: Consolas, "Courier New", monospace; font-variant-numeric: tabular-nums; font-size: clamp(56px, 8vw, 90px); font-weight: 700; line-height: 1.1; letter-spacing: -.06em; padding-right: .06em; text-shadow: 0 0 32px rgba(246, 130, 31, .28); }
.dial-state { color: var(--orange); }
.sweep-label { margin-top: 8px; color: #8d95b7; font-size: 10px; }
.status { color: var(--muted); margin: 15px 0 17px; min-height: 24px; }
.main-controls { display: flex; gap: 12px; justify-content: center; }
.main-controls button { min-width: 150px; padding: 15px 26px; border-radius: 12px; font-size: 16px; font-weight: 750; }
.primary-button { border: 1px solid var(--orange); background: var(--orange); color: #171332; }
.primary-button:hover { background: #fbad41; border-color: #fbad41; }
.secondary-button { border: 1px solid var(--border); background: rgba(255, 255, 255, .06); color: #fff; }
.secondary-button:hover { background: rgba(255, 255, 255, .14); }

.settings { width: 100%; margin: auto auto 0; padding: 22px clamp(18px, 3vw, 32px); border: 1px solid var(--border); border-radius: 20px; background: rgba(255, 255, 255, .045); backdrop-filter: blur(8px); }
.settings-heading { margin-bottom: 16px; }
.settings-heading h2 { font-size: 18px; margin: 0; }
.settings-heading span { color: var(--muted); }
.presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.presets button { border: 1px solid var(--border); border-radius: 11px; min-height: 48px; background: rgba(255, 255, 255, .05); color: #fff; font-weight: 700; }
.presets button:hover, .presets button[aria-pressed="true"] { border-color: var(--orange); background: rgba(246, 130, 31, .15); color: #ffd6aa; }
.custom-form { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); margin-top: 20px; padding-top: 20px; }
.custom-label { margin-right: auto; align-self: center; color: var(--muted); }
.custom-form label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.custom-form input { width: 78px; height: 40px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 9px; background: #1b1d42; color: #fff; font-size: 16px; }
.apply-button { height: 40px; padding: 0 16px; border: 1px solid var(--border); border-radius: 9px; background: #333657; color: #fff; font-weight: 700; }
.apply-button:hover { border-color: var(--orange); }
.settings-footer { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 10px; font-size: 13px; }
.sound-button span { color: var(--orange); font-weight: 700; }
.shortcuts { color: var(--muted); }
footer { padding: 15px 0 0; text-align: center; color: #9296b8; font-size: 12px; }

body.finished .dial::before { background: rgba(87, 207, 125, .28); }
body.finished .clock-hand, body.finished .hand-tip, body.finished .live-dot { background: var(--success); box-shadow: 0 0 18px var(--success); }
body.finished .clock-hub { border-color: var(--success); box-shadow: 0 0 18px var(--success); }
body.finished .dial-state, body.finished .status { color: #bceccb; }

@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .orbit, body.running .orbit-one, body.running .live-dot { animation: none; } }
@media (max-width: 680px) {
  .brand { font-size: 14px; gap: 7px; }
  .header-logo { width: 132px; padding: 8px 10px; }
  .center-logo { padding: 10px 12px; }
  .presets { grid-template-columns: repeat(3, 1fr); }
  .custom-label { width: 100%; }
  .settings-footer { align-items: flex-start; flex-direction: column; gap: 4px; }
  .shortcuts { font-size: 11px; }
  .main-controls button { min-width: 120px; }
  .clock-stage { width: min(39vh, 78vw); }
  .orbit-two { inset: -18px; }
}
@media (max-height: 750px) and (min-width: 681px) {
  .timer-section { padding: 10px 0; }
  .session-name { margin: 4px 0 2px; }
  .clock-stage { width: min(36vh, 310px); margin: 15px 0 4px; }
  .time { font-size: clamp(42px, 8vh, 68px); }
  .status { margin: 8px 0; }
}