:root{color-scheme:dark;--bg:#0b101a;--panel:#141d2a;--panel2:#192432;--line:rgba(179,205,231,.12);--text:#f5f7fa;--muted:#a7b4c9;--muted2:#718096;--amber:#f5b867;--amber2:#ffdd9f;--teal:#6dddd2;--danger:#ee8491;--ease:cubic-bezier(.2,.8,.2,1);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-width:300px;min-height:100vh;color:var(--text);overflow-x:hidden}
button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.42}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.app-backdrop{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 88% 5%,rgba(72,109,139,.16),transparent 33%),radial-gradient(circle at 10% 51%,rgba(42,89,89,.09),transparent 28%),linear-gradient(160deg,#0b101a 5%,#101925 47%,#0b111b 100%);overflow:hidden}
.backdrop-glow{position:absolute;top:-190px;left:50%;width:560px;height:560px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(233,155,88,.055),transparent 65%);filter:blur(22px)}
.backdrop-lines{position:absolute;inset:0;opacity:.2;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,transparent 5%,black 50%,transparent 95%)}
.app-shell{width:min(100%,560px);min-height:100vh;margin:0 auto;padding:env(safe-area-inset-top) 22px calc(108px + env(safe-area-inset-bottom));position:relative}
.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:40px;height:40px;position:relative;border:1.7px solid rgba(246,193,122,.82);border-radius:50%;box-shadow:0 0 18px rgba(239,174,102,.15),inset 0 0 13px rgba(239,174,102,.08);overflow:hidden}.brand-mark:before{content:"";position:absolute;left:5px;right:5px;bottom:10px;height:1px;background:var(--amber);box-shadow:0 0 8px var(--amber)}.brand-sun{position:absolute;width:17px;height:17px;left:10px;bottom:10px;border:1.5px solid var(--amber);border-radius:50%;box-shadow:0 0 10px rgba(245,184,103,.65)}.brand-hand{position:absolute;left:19px;top:7px;width:1.5px;height:13px;background:var(--amber2);transform:rotate(38deg);transform-origin:bottom}.brand-name{font-size:17px;font-weight:850;letter-spacing:.19em;line-height:1}.brand-period{color:var(--amber)}.brand-subtitle{margin-top:6px;font-size:8px;font-weight:800;letter-spacing:.2em;color:#8795a8}.top-date{font-size:11px;font-weight:750;letter-spacing:.08em;text-align:right;color:#8f9db0;text-transform:uppercase}
.panel{animation:panelIn .32s var(--ease)}.panel[hidden]{display:none!important}@keyframes panelIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.clock-hero{height:310px;position:relative;overflow:hidden;padding:24px 25px 20px;border:1px solid rgba(240,190,122,.18);border-radius:28px;background:radial-gradient(circle at 50% 91%,rgba(236,142,78,.18),transparent 40%),linear-gradient(151deg,#1b2635 0%,#151e2b 47%,#101722 100%);box-shadow:0 18px 60px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.055)}.clock-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.035),transparent 27%)}.hero-kicker{position:relative;z-index:2;display:flex;align-items:center;gap:8px;color:#c9d2df;font-size:10px;font-weight:850;letter-spacing:.18em}.hero-pulse{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px var(--amber)}.hero-zone{margin-left:auto;font-weight:750;color:#8795a7;letter-spacing:.1em}.hero-time{position:relative;z-index:2;margin:26px 0 0;font-size:clamp(77px,20vw,112px);line-height:1;font-weight:250;font-variant-numeric:tabular-nums;letter-spacing:-.085em;text-shadow:0 8px 35px rgba(0,0,0,.18)}.hero-seconds{position:absolute;z-index:2;right:30px;top:94px;font-size:17px;letter-spacing:.04em;font-weight:650;color:var(--amber)}.hero-horizon{position:absolute;left:0;right:0;bottom:43px;height:105px;overflow:hidden}.horizon-sun{position:absolute;width:118px;height:118px;border-radius:50%;left:50%;top:40px;transform:translateX(-50%);background:radial-gradient(circle at 50% 45%,#ffda9f 1%,#f4af6a 54%,#c56a59 100%);filter:blur(.2px);box-shadow:0 0 30px rgba(244,170,97,.34),0 0 98px rgba(244,131,81,.19)}.horizon-line{position:absolute;left:-10%;right:-10%;top:80px;height:1px;background:linear-gradient(90deg,transparent,rgba(244,194,134,.8),transparent);box-shadow:0 0 13px rgba(251,186,112,.5)}.horizon-reflection{position:absolute;left:20%;right:20%;top:81px;height:30px;background:linear-gradient(to bottom,rgba(251,163,95,.11),transparent);filter:blur(8px)}.next-alarm{position:absolute;z-index:2;left:0;right:0;bottom:0;height:52px;display:flex;align-items:center;gap:10px;padding:0 25px;border-top:1px solid rgba(245,187,121,.11);background:rgba(11,17,26,.5);backdrop-filter:blur(9px);color:#e0e5ed;font-size:13px;font-weight:620}.next-alarm svg{width:17px;height:17px;color:var(--amber)}
.notice{padding:12px 14px;margin-top:15px;border-radius:13px;background:rgba(226,164,98,.1);border:1px solid rgba(245,184,103,.27);color:#f4d3aa;font-size:12px;line-height:1.45}.notice button{display:block;padding:5px 0 0;background:none;border:0;color:var(--amber2);font-size:12px;font-weight:800;text-decoration:underline}.preview-notice{background:rgba(111,200,198,.08);border-color:rgba(111,200,198,.22);color:#abd8d4}
.section-header{display:flex;align-items:end;justify-content:space-between;margin:31px 2px 18px;gap:12px}.section-header-top{margin-top:34px;margin-bottom:30px}.section-header.small{margin-top:33px;margin-bottom:15px}.eyebrow{display:block;margin-bottom:8px;color:var(--amber);font-size:9px;font-weight:850;letter-spacing:.2em}.section-header h1,.section-header h2{margin:0;font-size:27px;font-weight:760;letter-spacing:-.035em}.section-header h2{font-size:21px}.count-badge{display:inline-flex;vertical-align:4px;justify-content:center;align-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:6px;background:#26313e;color:#aab8ca;font-size:12px;letter-spacing:0;font-weight:750}.icon-action,.section-icon{height:44px;width:44px;display:grid;place-items:center;border-radius:15px}.icon-action{border:1px solid rgba(246,186,106,.37);background:linear-gradient(145deg,#423528,#2e2c2a);color:var(--amber);box-shadow:0 6px 19px rgba(244,168,90,.1)}.icon-action:active{transform:scale(.94)}.icon-action svg{width:23px;height:23px;stroke-width:2}.turquoise-action{border-color:rgba(109,221,210,.4);background:linear-gradient(145deg,#214348,#1a303a);color:var(--teal)}.section-icon{color:var(--teal);background:rgba(109,221,210,.09);border:1px solid rgba(109,221,210,.13)}
.alarm-list,.city-list,.lap-list{display:grid;gap:11px}.alarm-card{position:relative;overflow:hidden;padding:18px 19px 17px;border-radius:21px;background:linear-gradient(145deg,rgba(30,42,56,.93),rgba(21,31,43,.96));border:1px solid rgba(172,198,224,.12);box-shadow:0 12px 25px rgba(0,0,0,.07)}.alarm-card.enabled{border-color:rgba(240,186,118,.23)}.alarm-card.disabled{opacity:.62}.alarm-card:before{content:"";position:absolute;left:0;top:15px;bottom:15px;width:2px;background:var(--amber);border-radius:2px;opacity:0}.alarm-card.enabled:before{opacity:1}.alarm-card-main{display:flex;align-items:center;justify-content:space-between;gap:8px}.alarm-time{font-size:43px;font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:-.06em;line-height:1}.alarm-period{margin-left:7px;font-size:11px;color:#9babbc;letter-spacing:0}.switch{position:relative;width:48px;height:29px;border:0;border-radius:18px;background:#3a4655;transition:background .2s;flex:none}.switch[aria-checked="true"]{background:linear-gradient(90deg,#c7864d,#f2b569)}.switch:before{content:"";position:absolute;width:23px;height:23px;left:3px;top:3px;background:#e9edf0;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.23);transition:transform .2s}.switch[aria-checked="true"]:before{transform:translateX(19px)}.alarm-label{margin-top:7px;font-size:14px;font-weight:700;color:#ecf0f4}.alarm-days{margin-top:11px;color:#98a9b9;font-size:11px;font-weight:700;letter-spacing:.02em}.alarm-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(195,212,229,.08);color:#8394a8;font-size:11px}.alarm-edit{padding:4px 0;border:0;background:none;color:var(--amber);font-size:11px;font-weight:800;letter-spacing:.07em}.empty-card{padding:28px 25px;border:1px dashed rgba(166,190,215,.19);border-radius:20px;background:rgba(25,37,51,.55);text-align:center;color:#a8b5c5}.empty-card .empty-icon{width:52px;height:52px;margin:0 auto 12px;display:grid;place-items:center;border:1px solid rgba(245,184,103,.2);border-radius:50%;color:var(--amber);background:rgba(245,184,103,.06)}.empty-card strong{display:block;margin-bottom:6px;color:#e8edf2;font-size:16px}.empty-card p{margin:0;line-height:1.5;font-size:13px}.empty-copy{padding:22px;border-radius:16px;background:rgba(22,32,44,.65);color:#8999a9;text-align:center;font-size:13px}
.bottom-nav{position:fixed;z-index:10;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,560px);height:calc(74px + env(safe-area-inset-bottom));padding:8px 16px calc(8px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:4px;background:rgba(15,22,33,.95);border-top:1px solid rgba(178,202,223,.13);box-shadow:0 -10px 30px rgba(4,7,12,.25);backdrop-filter:blur(18px)}.nav-button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:52px;color:#8797aa;border:0;border-radius:13px;background:none;font-size:10px;font-weight:750;white-space:nowrap}.nav-button svg{width:21px;height:21px}.nav-button.active{color:var(--amber);background:rgba(245,184,103,.08)}
.stopwatch-dial{width:min(80vw,370px);height:min(80vw,370px);margin:0 auto 28px;border-radius:50%;position:relative;background:conic-gradient(var(--amber) var(--stop-progress,0%),rgba(122,143,164,.11) 0);box-shadow:0 18px 65px rgba(0,0,0,.15),0 0 64px rgba(235,161,87,.055)}.stopwatch-dial:before{content:"";position:absolute;inset:3px;border-radius:50%;background:linear-gradient(140deg,#1b2938,#101925 68%);border:1px solid rgba(245,195,129,.16)}.dial-ticks{position:absolute;z-index:1;inset:13px;border-radius:50%;border:1px dashed rgba(170,195,219,.1)}.dial-inner{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.dial-caption{font-size:9px;font-weight:850;letter-spacing:.22em;color:#a1b0c0}.stopwatch-time{margin:11px 0 10px;font-size:clamp(44px,11vw,61px);font-weight:260;letter-spacing:-.065em;font-variant-numeric:tabular-nums;white-space:nowrap}.stopwatch-time span{font-size:.48em;color:var(--amber);letter-spacing:-.04em}.dial-state{font-size:9px;font-weight:800;letter-spacing:.13em;color:var(--amber)}.stopwatch-controls{display:flex;justify-content:center;gap:12px}.control-button{min-width:128px;height:53px;padding:0 20px;border-radius:16px;font-size:12px;font-weight:850;letter-spacing:.1em}.control-button.primary{color:#171e25;border:0;background:linear-gradient(135deg,#ffe0ad,#e9aa65);box-shadow:0 8px 25px rgba(237,166,91,.17)}.control-button.secondary{border:1px solid rgba(171,195,218,.18);background:#1b2938;color:#d5dee8}.control-button:active:not(:disabled){transform:scale(.97)}.lap-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-radius:15px;background:rgba(25,37,51,.7);border:1px solid rgba(163,191,214,.1);font-variant-numeric:tabular-nums}.lap-number{font-size:12px;font-weight:800;color:#91a0b1}.lap-time{font-size:15px;font-weight:650;color:#e7edf3}.lap-total{font-size:12px;color:#91a1b1}
.world-local-card{position:relative;overflow:hidden;padding:22px 23px 26px;border:1px solid rgba(109,221,210,.22);border-radius:25px;background:radial-gradient(circle at 84% 30%,rgba(109,221,210,.17),transparent 34%),linear-gradient(145deg,#1b353b,#182732 62%,#162331);box-shadow:0 16px 43px rgba(0,0,0,.12)}.world-local-kicker{position:relative;z-index:1;font-size:10px;font-weight:850;letter-spacing:.17em;color:var(--teal)}.world-local-row{display:flex;position:relative;z-index:1;align-items:end;justify-content:space-between;gap:10px;margin-top:38px}.world-local-city{font-size:20px;font-weight:730}.world-local-date{margin-top:5px;color:#b4c5c8;font-size:12px}.world-local-time{font-size:44px;font-weight:300;letter-spacing:-.065em;font-variant-numeric:tabular-nums}.world-local-orbit{position:absolute;right:-48px;top:-75px;width:240px;height:240px;border-radius:50%;border:1px solid rgba(124,227,216,.12);box-shadow:0 0 0 35px rgba(124,227,216,.025),0 0 0 70px rgba(124,227,216,.018)}.world-list-title{margin-top:30px}.city-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:17px 18px;border-radius:19px;background:linear-gradient(145deg,#1c2a39,#172330);border:1px solid rgba(166,194,217,.12)}.city-card-main{min-width:0}.city-name{font-size:17px;font-weight:730}.city-detail{margin-top:5px;color:#90a3b4;font-size:11px}.city-card-right{display:flex;align-items:center;gap:10px}.city-time{font-size:30px;font-weight:300;letter-spacing:-.055em;font-variant-numeric:tabular-nums}.day-night{color:var(--amber)}.day-night.night{color:#a0a9d4}.day-night svg{width:17px;height:17px}.city-remove{border:0;background:none;color:#738698;font-size:21px;padding:6px}.city-options{max-height:45vh;overflow-y:auto;margin-top:12px}.city-option{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;gap:10px;padding:14px 5px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--text)}.city-option small{color:#899bab;font-size:11px}.city-option:active{color:var(--teal)}
.sheet-backdrop{position:fixed;z-index:20;inset:0;display:flex;align-items:end;justify-content:center;background:rgba(2,6,12,.7);backdrop-filter:blur(7px)}.sheet-backdrop[hidden]{display:none}.sheet{width:min(100%,560px);max-height:94vh;overflow-y:auto;padding:12px 22px calc(24px + env(safe-area-inset-bottom));border:1px solid rgba(181,204,223,.16);border-bottom:0;border-radius:28px 28px 0 0;background:linear-gradient(155deg,#1d2a39,#111a27 80%);box-shadow:0 -20px 70px rgba(0,0,0,.35);animation:sheetIn .3s var(--ease)}@keyframes sheetIn{from{transform:translateY(25px);opacity:.6}to{transform:translateY(0);opacity:1}}.sheet-handle{width:38px;height:4px;margin:0 auto 22px;border-radius:4px;background:#5b6b7e}.sheet-heading{display:flex;align-items:start;justify-content:space-between;margin-bottom:24px}.sheet-heading h2{margin:0;font-size:25px;letter-spacing:-.035em}.close-button{height:36px;width:36px;display:grid;place-items:center;border-radius:12px;background:#273544;border:1px solid rgba(188,208,226,.1);color:#c3d0dd}.close-button svg{width:18px;height:18px}.field-label{display:block;margin:20px 0 9px;color:#a5b5c4;font-size:10px;font-weight:850;letter-spacing:.16em}.time-input,.text-input{display:block;width:100%;outline:none;border:1px solid rgba(181,207,228,.15);border-radius:15px;background:#101a27;color:var(--text)}.time-input{height:94px;text-align:center;color:var(--amber2);font-size:53px;font-weight:320;letter-spacing:-.045em;font-variant-numeric:tabular-nums}.time-input::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.5;margin-right:16px}.text-input{height:51px;padding:0 15px;font-size:15px}.text-input:focus,.time-input:focus{border-color:rgba(245,184,103,.6);box-shadow:0 0 0 3px rgba(245,184,103,.08)}.text-input::placeholder{color:#6b7b8d}.repeat-label{display:flex;justify-content:space-between}.repeat-label span{color:var(--amber);font-size:11px;letter-spacing:0;font-weight:700;text-transform:none}.day-picker{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.day-chip{height:42px;padding:0;border:1px solid rgba(182,205,225,.15);border-radius:12px;background:#162231;color:#9eafc0;font-size:11px;font-weight:850}.day-chip.selected{border-color:rgba(245,184,103,.7);background:linear-gradient(145deg,#5d4530,#3e342b);color:#ffdda7}.ringtone-button{display:flex;align-items:center;gap:12px;width:100%;margin-top:22px;padding:13px;border-radius:16px;border:1px solid rgba(182,205,225,.13);background:#172333;text-align:left;color:#ecf0f4}.ringtone-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:12px;background:rgba(245,184,103,.1);color:var(--amber)}.ringtone-icon svg{width:19px;height:19px}.ringtone-button strong{display:block;font-size:13px}.ringtone-button small{display:block;margin-top:4px;color:#91a2b4;font-size:11px}.ringtone-chevron{width:19px;height:19px;margin-left:auto;transform:rotate(-90deg);color:#8b9bae}.sheet-actions{display:flex;align-items:center;gap:9px;margin-top:25px}.save-button{height:54px;flex:1;border:0;border-radius:15px;background:linear-gradient(135deg,#ffddaa,#e5a15d);color:#1b2229;font-size:12px;font-weight:900;letter-spacing:.08em;box-shadow:0 8px 20px rgba(227,151,79,.16)}.delete-button{height:54px;width:54px;display:grid;place-items:center;border-radius:15px;border:1px solid rgba(238,132,145,.28);background:rgba(238,132,145,.09);color:var(--danger)}.city-search{margin-top:5px}.toast{position:fixed;left:50%;bottom:calc(94px + env(safe-area-inset-bottom));z-index:30;max-width:calc(100% - 36px);padding:11px 16px;border-radius:13px;background:#e9eef3;color:#172432;font-size:12px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.28);opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}
.delete-button[hidden]{display:none}
@media(max-width:370px){.app-shell{padding-left:16px;padding-right:16px}.clock-hero{height:295px;padding-left:19px;padding-right:19px}.hero-time{font-size:78px}.hero-seconds{right:23px}.next-alarm{padding:0 19px}.top-date{font-size:10px}.brand-subtitle{letter-spacing:.12em}.day-chip{height:39px}.sheet{padding-left:17px;padding-right:17px}}
@media(min-width:700px){.app-shell{border-left:1px solid rgba(179,205,231,.06);border-right:1px solid rgba(179,205,231,.06)}.bottom-nav{border-left:1px solid rgba(179,205,231,.06);border-right:1px solid rgba(179,205,231,.06)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}