@keyframes pulseWarning{0%,to{opacity:1;transform:scale(1)}50%{opacity:.88;transform:scale(1.02)}}@font-face{font-family:"Kanit";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/kanit-v17-latin_thai-regular.woff2)format("woff2")}@font-face{font-family:"Kanit";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/kanit-v17-latin_thai-700.woff2)format("woff2")}:root{--bg-main:#0f172a;--surface:#1e293b;--surface-hover:#334155;--border:#334155;--card-border-top:rgba(255, 255, 255, 0.16);--text-main:#f8fafc;--text-muted:#94a3b8;--primary-cyan:#38bdf8;--primary-gold:#fbbf24;--primary-green:#10b981;--danger:#ef4444;--neon-cyan-glow:rgba(56, 189, 248, 0.3);--neon-rose-glow:rgba(239, 68, 68, 0.35)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.compact-header h1,.tab-btn:hover,body{color:var(--text-main)}body{font-family:"Kanit",sans-serif;background-color:var(--bg-main);background-image:radial-gradient(at 10% 10%,rgba(56,189,248,.08)0,transparent 50%),radial-gradient(at 90% 90%,rgba(251,191,36,.05)0,transparent 50%);line-height:1.5;color-scheme:dark;min-height:100vh;display:flex;flex-direction:column}.container{max-width:1100px;margin:0 auto;padding:0 14px;width:100%;flex:1}.compact-header{text-align:center;padding:20px 12px 14px}.header-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(56,189,248,.1);color:var(--primary-cyan);padding:4px 14px;border-radius:999px;font-size:.8rem;font-weight:600;border:1px solid rgba(56,189,248,.3);margin-bottom:8px}.compact-header h1{font-size:1.65rem;font-weight:800;letter-spacing:-.01em}.compact-header p{font-size:.95rem;color:var(--text-muted);margin-top:4px}.icon-svg{width:1.2em;height:1.2em;vertical-align:middle;fill:currentColor}.tab-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:rgba(15,23,42,.85);border:1px solid var(--border);padding:6px;border-radius:14px;margin:12px 0 18px}.tab-btn{background:0 0;border:0;color:var(--text-muted);padding:10px 8px;font-family:inherit;font-size:.88rem;font-weight:600;cursor:pointer;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s ease}.tab-btn:hover{background:rgba(255,255,255,.05)}.tab-btn.active{background:rgba(56,189,248,.16);color:var(--primary-cyan);border:1px solid rgba(56,189,248,.35);box-shadow:0 0 15px var(--neon-cyan-glow)}.timer-card{background:linear-gradient(180deg,rgba(30,41,59,.8)0,rgba(15,23,42,.95) 100%);border:1px solid var(--border);border-top:1px solid var(--card-border-top);border-radius:20px;padding:44px 20px;text-align:center;box-shadow:0 20px 45px -15px rgba(0,0,0,.6);position:relative}.digit-box-stable,.time-digits{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"1}.time-digits{font-size:clamp(3.8rem,13vw,6.8rem);font-weight:800;letter-spacing:.01em;margin:14px 0;color:var(--text-main);text-shadow:0 0 35px var(--neon-cyan-glow);transition:color .3s,text-shadow .3s;display:flex;justify-content:center;align-items:baseline;user-select:none}.digit-box-stable{display:inline-block}.ms-digit-wrap{display:inline-block;width:1.8ch;text-align:left}.ms-digit{font-size:.45em;color:var(--primary-gold);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"1}.time-digits.warning-state{color:var(--danger);text-shadow:0 0 40px var(--neon-rose-glow);animation:pulseWarning 1.2s infinite ease-in-out}.presets-group{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:22px}.custom-input-bar,.preset-pill{border-radius:999px;border:1px solid var(--border);color:var(--text-muted)}.preset-pill{background:var(--surface);padding:6px 14px;font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s}.preset-pill:hover{background:rgba(56,189,248,.12);color:var(--primary-cyan);border-color:rgba(56,189,248,.4)}.custom-input-bar{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;background:rgba(15,23,42,.8);padding:6px 16px;font-size:.88rem}.time-input{background:0 0;border:0;color:var(--primary-cyan);font-size:1.15rem;font-weight:700;width:52px;text-align:center;font-family:inherit;font-variant-numeric:tabular-nums}.time-input:focus{outline:0}.control-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.btn{font-family:inherit;font-size:.95rem;font-weight:700;padding:12px 26px;border-radius:999px;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s ease}.btn-primary{background:var(--primary-cyan);color:#04101e;box-shadow:0 0 20px var(--neon-cyan-glow)}.btn-primary:hover{background:#7dd3fc;transform:translateY(-2px)}.btn-icon,.btn-secondary{background:var(--surface);color:var(--text-main);border:1px solid var(--border)}.btn-secondary:hover{background:var(--surface-hover);transform:translateY(-2px)}.btn-icon{width:44px;height:44px;border-radius:50%;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.btn-icon:hover{color:var(--text-main);border-color:var(--primary-cyan)}.lap-section{margin-top:24px;max-height:220px;overflow-y:auto;border-top:1px dashed var(--border);padding-top:14px;scrollbar-width:thin}.lap-row{display:flex;justify-content:space-between;padding:6px 14px;font-size:.88rem;color:var(--text-muted);border-radius:6px;font-variant-numeric:tabular-nums}.lap-row:nth-child(even){background:rgba(255,255,255,.02)}.lap-row.fastest{color:var(--primary-green);font-weight:700}.lap-row.slowest{color:var(--danger)}.pomodoro-indicator{display:inline-flex;align-items:center;gap:10px;margin-bottom:12px}.input-field input,.pomo-tag{background:var(--surface);border:1px solid var(--border)}.pomo-tag{font-size:.82rem;font-weight:600;padding:5px 14px;border-radius:999px;color:var(--text-muted);cursor:pointer;transition:all .2s}.pomo-tag.active{background:rgba(16,185,129,.15);color:var(--primary-green);border-color:rgba(16,185,129,.4)}.date-calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left;margin-bottom:20px}.input-field label{display:block;font-size:.85rem;color:var(--text-muted);margin-bottom:6px}.input-field input{width:100%;padding:10px 14px;border-radius:10px;color:var(--text-main);font-family:inherit;font-size:.95rem}.date-result-box{background:rgba(56,189,248,.06);border:1px dashed rgba(56,189,248,.35);padding:18px;border-radius:12px;margin-top:16px}:-webkit-full-screen .timer-card,:fullscreen .timer-card{height:100vh;max-height:100vh;border-radius:0;border:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#040810;padding:0}:-webkit-full-screen .time-digits,:fullscreen .time-digits{font-size:min(23vw,23vh);margin:20px 0}:-webkit-full-screen .compact-header,:-webkit-full-screen .custom-input-bar,:-webkit-full-screen .pomodoro-indicator,:-webkit-full-screen .presets-group,:-webkit-full-screen .tab-bar,:fullscreen .compact-header,:fullscreen .custom-input-bar,:fullscreen .pomodoro-indicator,:fullscreen .presets-group,:fullscreen .tab-bar{display:none!important}.content-section{margin:44px auto 60px;max-width:960px;text-align:left;line-height:1.85;color:var(--text-main)}.content-section h2{font-size:1.55rem;font-weight:800;color:#fff;margin-bottom:14px;padding-left:14px;border-left:4px solid var(--primary-cyan)}.content-section h3{font-size:1.2rem;font-weight:700;color:#e2e8f0;margin:32px 0 12px}.content-section p{font-size:.95rem;color:#cbd5e1;margin-bottom:16px}.grid-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 30px}.faq-item,.info-card{background:var(--surface);border:1px solid var(--border)}.info-card{border-radius:16px;padding:20px;display:flex;flex-direction:column}.info-card h3{font-size:1.05rem;margin:0 0 10px}.info-card ul{list-style:none;padding-left:0;margin:0}.info-card li{font-size:.88rem;color:#94a3b8;position:relative;padding-left:18px;margin-bottom:8px}.info-card li::before{content:"•";position:absolute;left:0;color:var(--primary-cyan);font-size:1.2rem;line-height:1}.faq-item{border-radius:14px;margin-bottom:10px;overflow:hidden}.faq-item summary{padding:16px 20px;cursor:pointer;font-weight:700;font-size:.95rem;display:flex;justify-content:space-between;align-items:center;list-style:none}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary svg{width:18px;height:18px;fill:var(--text-muted);transition:transform .2s ease}.faq-item details[open] summary svg{transform:rotate(180deg);fill:var(--primary-cyan)}.faq-item details[open] summary{border-bottom:1px solid rgba(255,255,255,.05)}.faq-item p{padding:14px 20px 16px;font-size:.9rem;color:#94a3b8;background:rgba(15,23,42,.4);margin-bottom:0}.app-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;padding:16px;z-index:9999;opacity:0;visibility:hidden;transition:.2s}.app-modal-overlay.active{opacity:1;visibility:visible}.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:18px;max-width:360px;width:100%;padding:22px;text-align:center}.modal-btn{padding:8px 20px;border-radius:8px;font-family:"Kanit";font-weight:700;cursor:pointer;border:0;background:var(--primary-cyan);color:#0f172a;margin-top:14px}@media (max-width:640px){.tab-bar{grid-template-columns:repeat(2,1fr)}.date-calc-grid,.grid-cards{grid-template-columns:1fr}}.shortcut-banner-card{background:var(--surface);border:1px solid var(--border);border-top:1px solid var(--card-border-top);border-radius:16px;padding:22px;margin:28px 0 34px;box-shadow:0 4px 20px rgba(0,0,0,.25)}.shortcut-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}.shortcut-header h3{margin:0!important;font-size:1.15rem;font-weight:700;color:var(--text-main)}.icon-svg.cyan{fill:none;stroke:var(--primary-cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.shortcut-banner-card p{font-size:.9rem;color:var(--text-muted);margin-bottom:14px}.shortcut-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.shortcut-item{display:flex;align-items:center;gap:12px;background:rgba(15,23,42,.65);padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.05)}kbd{background:#0b1120;border:1px solid rgba(56,189,248,.4);border-bottom:2.5px solid var(--primary-cyan);color:var(--primary-cyan);font-family:inherit;font-size:.82rem;font-weight:700;padding:4px 10px;border-radius:6px;box-shadow:0 2px 5px rgba(0,0,0,.5);display:inline-block;white-space:nowrap;letter-spacing:.02em}.shortcut-item span{font-size:.86rem;color:#cbd5e1}.content-section ul{padding-left:20px;margin-bottom:24px}.content-section ul li{font-size:.92rem;color:#cbd5e1;margin-bottom:8px;line-height:1.7}