@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap";:root{--color-primary-start: #824c69;--color-primary-mid: #683952;--color-primary-dark: #4e273c;--color-gold-light: #fef08a;--color-gold-main: #fbbf24;--color-gold-dark: #d97706;--color-gold-warm: #f59e0b;--color-bronze-dark: #6b213f;--color-bronze-warm: #b45309;--color-danger-main: #ef4444;--color-warning-main: #f97316;--color-success-main: #10b981}*{box-sizing:border-box;margin:0;padding:0}body,html{width:100%;min-height:100vh;margin:0;padding:0;background-color:#4e273c;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Sarabun,Noto Sans Thai,Roboto,sans-serif;overflow-x:hidden;color:#fff}.wrap{min-height:100vh;width:100vw;position:relative;overflow:hidden;background-color:#4e273c}.clean-ambient-bg{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;background:radial-gradient(circle at 50% 25%,#9d5a7d,#824c69 40%,#5d3148,#3e1b2e);overflow:hidden;z-index:1;pointer-events:none}.sun-light-orb{position:absolute;top:-15vh;left:50%;transform:translate(-50%);width:90vw;height:65vh;background:radial-gradient(circle,rgba(254,240,138,.45) 0%,rgba(251,191,36,.22) 40%,rgba(217,119,6,.08) 65%,transparent 80%);filter:blur(50px);pointer-events:none;animation:sunGlowPulse 8s ease-in-out infinite alternate}.sunrise-rays{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.18) 0%,rgba(251,191,36,.08) 35%,transparent 70%);pointer-events:none}@keyframes sunGlowPulse{0%{transform:translate(-50%) scale(.96);opacity:.8}to{transform:translate(-50%) scale(1.05);opacity:1}}.timer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#441e3238;backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);animation:timerFadeIn .35s cubic-bezier(.16,1,.3,1) forwards}.timer-pure-text{font-size:clamp(48px,10vw,115px);font-weight:900;background:linear-gradient(135deg,#fff,#fef08a 40%,#fbbf24 75%,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 28px rgba(251,191,36,.65));letter-spacing:.02em;text-align:center;transition:all .3s ease;padding:16px;-webkit-user-select:none;user-select:none;line-height:1.2;white-space:nowrap;max-width:96vw}@media (max-width: 768px){.timer-pure-text{font-size:clamp(40px,9.2vw,72px);padding:14px}}@media (max-width: 480px){.timer-pure-text{font-size:clamp(34px,8.8vw,50px);padding:10px}}.timer-pure-text.warning{background:linear-gradient(135deg,#fff,#fed7aa 40%,#fb923c 75%,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 28px rgba(249,115,22,.75))}.timer-pure-text.danger{background:linear-gradient(135deg,#fff,#fca5a5,#ef4444 80%,#dc2626);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 32px rgba(239,68,68,.85))}@keyframes timerFadeIn{0%{opacity:0;transform:scale(.97);filter:blur(3px)}to{opacity:1;transform:scale(1);filter:blur(0px)}}.display-footer-bar{position:fixed;bottom:0;left:0;right:0;width:100%;background:#2d1220b3;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.15);padding:10px 16px 12px;z-index:250;text-align:center;box-shadow:0 -4px 20px #00000040;box-sizing:border-box}.display-footer-link{display:inline-block;text-decoration:none;cursor:pointer;transition:opacity .2s ease,transform .2s ease}.display-footer-link:hover{opacity:.85}.display-footer-copy{font-size:13px;font-weight:300;color:#ffffffe0;letter-spacing:.02em;text-shadow:0 1px 3px rgba(0,0,0,.4);line-height:1.35}.display-footer-author{font-size:13.5px;font-weight:600;color:#fde047;letter-spacing:.02em;margin-top:2px;text-shadow:0 1px 3px rgba(0,0,0,.5);line-height:1.35}.app{width:100%;min-height:100vh;background:radial-gradient(ellipse at 50% 15%,#9e5f81,#824c69 45%,#64374f 75%,#4a253a);color:#fff;display:flex;align-items:center;justify-content:center;padding:32px 20px 80px;overflow-y:auto;box-sizing:border-box;-webkit-overflow-scrolling:touch;position:relative}.app.center{align-items:center;justify-content:center}.appWarp{width:100%;max-width:820px;display:flex;justify-content:center;align-items:center;position:relative;z-index:20}.panel{width:100%;background:#ffffff17;border:1px solid rgba(255,255,255,.2);padding:34px;border-radius:28px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 20px 50px #230a1666;color:#fff}.controller-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.15)}.controller-logo{max-height:52px;width:auto;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}.controller-titles h1{font-size:22px;font-weight:900;background:linear-gradient(135deg,#fff,#fef08a,#fbbf24 80%,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}.controller-titles p{font-size:13px;font-weight:700;color:#fde047;margin-top:3px;text-shadow:0 1px 3px rgba(0,0,0,.3)}.controller-monitor-card{width:100%;background:#00000040;border:1.5px solid rgba(255,255,255,.18);border-radius:20px;padding:20px 24px;display:flex;flex-direction:column;align-items:center;margin-bottom:24px;box-shadow:inset 0 2px 10px #00000040;transition:border-color .3s ease,box-shadow .3s ease}.controller-monitor-card.monitor-running{border-color:#10b98199;box-shadow:0 0 24px #10b98133,inset 0 2px 10px #00000040}.controller-monitor-card.monitor-paused{border-color:#f59e0b80}.controller-monitor-card.monitor-ended{border-color:#ef444499;box-shadow:0 0 24px #ef444440,inset 0 2px 10px #00000040}.monitor-top-row{width:100%;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.monitor-tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#ffffffd9}.monitor-status-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:700}.monitor-status-pill.pill-running{background:#10b98140;color:#6ee7b7;border:1px solid rgba(16,185,129,.5)}.monitor-status-pill.pill-paused{background:#f59e0b40;color:#fde68a;border:1px solid rgba(245,158,11,.5)}.monitor-status-pill.pill-ended{background:#ef444440;color:#fca5a5;border:1px solid rgba(239,68,68,.5)}.status-dot{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}.pill-running .status-dot{animation:dotBlink 1.2s infinite ease-in-out}@keyframes dotBlink{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}.monitor-digital-clock{font-size:58px;font-weight:900;letter-spacing:.04em;font-variant-numeric:tabular-nums;background:linear-gradient(135deg,#fff,#fef08a,#fbbf24 80%,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 16px rgba(251,191,36,.5));margin:4px 0;-webkit-user-select:none;user-select:none}.monitor-thai-label{font-size:14px;font-weight:600;color:#ffffffe6}.controller-action-section{margin-bottom:22px}.section-label{font-size:13.5px;font-weight:700;color:#fde047;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;text-shadow:0 1px 2px rgba(0,0,0,.4)}.controller-btn-grid{display:grid;gap:10px}.controller-btn-grid.primary-actions{grid-template-columns:1fr 1fr}.controller-btn-grid.presets,.controller-btn-grid.adjusts{grid-template-columns:repeat(4,1fr)}@media (max-width: 600px){.controller-btn-grid.primary-actions{grid-template-columns:1fr}.controller-btn-grid.presets,.controller-btn-grid.adjusts{grid-template-columns:1fr 1fr}}.btn{padding:12px 18px;border:0;border-radius:14px;cursor:pointer;font-weight:800;font-size:14px;transition:all .2s cubic-bezier(.2,.8,.2,1);display:inline-flex;align-items:center;justify-content:center;gap:8px;-webkit-user-select:none;user-select:none}.btn:active{transform:translateY(1px) scale(.98)}.btn-action{padding:16px 22px;font-size:16px;border-radius:16px}.btn-start{background:linear-gradient(135deg,#059669,#10b981 60%,#34d399);color:#fff;box-shadow:0 6px 20px #10b98166;text-shadow:0 1px 2px rgba(6,78,59,.5)}.btn-start:hover{transform:translateY(-2px);box-shadow:0 10px 25px #10b9818c;filter:brightness(1.08)}.btn-pause{background:linear-gradient(135deg,#d97706,#f59e0b 60%,#fbbf24);color:#fff;box-shadow:0 6px 20px #f59e0b66;text-shadow:0 1px 2px rgba(120,53,15,.5)}.btn-pause:hover{transform:translateY(-2px);box-shadow:0 10px 25px #f59e0b8c;filter:brightness(1.08)}.btn-reset{background:#ffffff1f;border:1px solid rgba(255,255,255,.25);color:#fff;box-shadow:0 4px 14px #00000026;text-shadow:0 1px 2px rgba(0,0,0,.3)}.btn-reset:hover{background:#ffffff38;border-color:#fbbf24;color:#fde047;transform:translateY(-2px);box-shadow:0 6px 18px #fbbf244d}.btn-preset{background:#ffffff14;border:1px solid rgba(255,255,255,.18);color:#fff;font-size:13px;padding:10px 14px}.btn-preset:hover{background:#ffffff2e;border-color:#fbbf24}.btn-preset.active{background:linear-gradient(135deg,#d97706,#f59e0b);border-color:#fde047;color:#fff;box-shadow:0 0 14px #f59e0b80}.btn-adjust{background:#ffffff14;border:1px solid rgba(255,255,255,.18);color:#fff;font-size:13px;padding:10px 14px}.btn-adjust:hover{background:#ffffff2e;border-color:#fbbf24}.display-link-bar{display:flex;gap:10px;align-items:center}@media (max-width: 650px){.display-link-bar{flex-direction:column;align-items:stretch}}.display-link-input{flex:1;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:#00000040;color:#fff;font-size:13.5px;outline:none;font-family:monospace}.btn-copy{background:#ffffff1f;border:1px solid rgba(255,255,255,.25);color:#fff;white-space:nowrap}.btn-copy:hover{background:#ffffff38;border-color:#fbbf24}.btn-open{background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff;white-space:nowrap;box-shadow:0 4px 12px #d9770659}.btn-open:hover{filter:brightness(1.08)}.controller-footer-status{margin-top:24px;padding-top:14px;border-top:1px solid rgba(255,255,255,.15);font-size:13px;color:#fffc;display:flex;align-items:center;gap:8px}.status-label{color:#fde047;font-weight:700}*{font-family:IBM Plex Sans Thai,sans-serif;box-sizing:border-box;margin:0;padding:0}
