:root{--font-family: "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--bg-light: #f8fafc;--text-main: #f8fafc;--text-secondary: #94a3b8;--text-dark: #0f172a;--text-dark-muted: #475569;--primary: #0284c7;--primary-hover: #0369a1;--primary-glow: rgba(2, 132, 199, .35);--status-green: #10b981;--status-green-bg: #064e3b;--status-green-text: #ecfdf5;--status-yellow: #f59e0b;--status-yellow-bg: #78350f;--status-yellow-text: #fffbeb;--status-red: #ef4444;--status-red-bg: #7f1d1d;--status-red-text: #fef2f2;--status-blue: #3b82f6;--status-gray: #64748b;--min-touch-size: 48px;--border-radius-sm: 8px;--border-radius-md: 14px;--border-radius-lg: 20px;--border-radius-full: 9999px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 25px rgba(0, 0, 0, .5);--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}input,textarea,select{-webkit-user-select:text;user-select:text}body{font-family:var(--font-family);background-color:var(--bg-primary);color:var(--text-main);line-height:1.5;overflow-x:hidden;padding-bottom:calc(var(--safe-area-bottom) + 80px)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px}.app-container{display:flex;flex-direction:column;min-height:100vh;max-width:640px;margin:0 auto;position:relative;background-color:var(--bg-primary)}.status-bar-wrapper{position:sticky;top:0;z-index:100;width:100%;box-shadow:0 2px 8px #00000080}.status-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;font-size:14px;font-weight:600;letter-spacing:.2px;transition:background-color .3s ease}.status-bar.green{background-color:var(--status-green);color:#fff}.status-bar.yellow{background-color:var(--status-yellow);color:#1c1917}.status-bar.red{background-color:var(--status-red);color:#fff}.status-bar-left{display:flex;align-items:center;gap:8px}.status-bar-btn{background:#00000040;border:1px solid rgba(255,255,255,.4);color:inherit;font-size:12px;font-weight:700;padding:6px 12px;border-radius:var(--border-radius-full);min-height:36px;display:flex;align-items:center;gap:4px;cursor:pointer}.app-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background-color:var(--bg-secondary);border-bottom:1px solid rgba(255,255,255,.08)}.header-title-box h1{font-size:18px;font-weight:700;color:var(--text-main);display:flex;align-items:center;gap:8px}.header-sub{font-size:12px;color:var(--text-secondary);margin-top:2px}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:640px;background:#1e293bf2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-around;padding:8px 12px calc(var(--safe-area-bottom) + 8px);z-index:90}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:none;border:none;color:var(--text-secondary);font-size:12px;font-weight:600;min-width:64px;min-height:var(--min-touch-size);cursor:pointer;transition:all .2s ease;position:relative}.nav-item.active{color:#38bdf8}.nav-item.active:after{content:"";position:absolute;top:0;width:28px;height:3px;background-color:#38bdf8;border-radius:2px}.nav-badge{position:absolute;top:4px;right:14px;background-color:var(--status-red);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:var(--border-radius-full)}.card{background-color:var(--bg-secondary);border:1px solid rgba(255,255,255,.08);border-radius:var(--border-radius-md);padding:16px;margin-bottom:14px;box-shadow:var(--shadow-sm)}.card:active{background-color:#27354a}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--min-touch-size);min-width:var(--min-touch-size);padding:12px 20px;font-family:inherit;font-size:16px;font-weight:600;border-radius:var(--border-radius-md);border:none;cursor:pointer;transition:transform .1s ease,background-color .2s ease;text-decoration:none}.btn:active{transform:scale(.97)}.btn-primary{background-color:var(--primary);color:#fff;box-shadow:0 4px 14px var(--primary-glow)}.btn-primary:hover{background-color:var(--primary-hover)}.btn-secondary{background-color:var(--bg-tertiary);color:var(--text-main);border:1px solid rgba(255,255,255,.15)}.btn-success{background-color:var(--status-green);color:#fff}.btn-danger{background-color:var(--status-red);color:#fff}.btn-block{width:100%}.alert-banner{padding:12px 16px;border-radius:var(--border-radius-md);margin-bottom:16px;display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.4}.alert-banner.warning{background-color:#f59e0b26;border:1px solid var(--status-yellow);color:#fde68a}.alert-banner.danger{background-color:#ef444426;border:1px solid var(--status-red);color:#fca5a5}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:flex-end;justify-content:center}.modal-sheet{background:var(--bg-secondary);border-top-left-radius:var(--border-radius-lg);border-top-right-radius:var(--border-radius-lg);width:100%;max-width:640px;max-height:90vh;overflow-y:auto;padding:20px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:slideUp .25s ease-out}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.form-group{margin-bottom:16px}.form-label{display:block;font-size:14px;font-weight:600;color:var(--text-secondary);margin-bottom:8px}.form-input,.form-select,.form-textarea{width:100%;min-height:var(--min-touch-size);padding:10px 14px;background-color:var(--bg-primary);border:1px solid var(--bg-tertiary);border-radius:var(--border-radius-md);color:var(--text-main);font-family:inherit;font-size:16px;outline:none}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow)}