:root{--bg: #FAFAF7;--surface: #FFFFFF;--surface-2: #F5F4EF;--surface-3: #EDECE6;--border: #E5E3DC;--border-strong: #D5D2C8;--text: #0E1116;--text-2: #4A4F58;--text-3: #8A8F98;--primary: #1E2A5A;--primary-2: #2B3D80;--primary-soft: #ECEFF9;--accent: #E8B33E;--accent-soft: #FBF1D4;--success: #1A7F4E;--success-soft: #DCF1E5;--warn: #B9690D;--warn-soft: #FBE7CC;--danger: #B0322B;--danger-soft: #F8DAD7;--shadow-sm: 0 1px 0 rgba(14,17,22,.04), 0 1px 2px rgba(14,17,22,.04);--shadow-md: 0 1px 0 rgba(14,17,22,.05), 0 8px 24px -8px rgba(14,17,22,.08);--shadow-lg: 0 2px 0 rgba(14,17,22,.05), 0 24px 48px -16px rgba(14,17,22,.18);--radius-sm: 6px;--radius: 10px;--radius-lg: 14px;--radius-xl: 20px;--density-row: 44px}[data-theme=dark]{--bg: #0B0D11;--surface: #131620;--surface-2: #181C27;--surface-3: #1F2330;--border: #262B38;--border-strong: #353B4C;--text: #ECEEF3;--text-2: #A8ADBA;--text-3: #6B7180;--primary: #6F87E0;--primary-2: #8DA1EB;--primary-soft: #1B2342;--accent: #E8B33E;--accent-soft: #3A2E10;--success: #4FAB7C;--success-soft: #15301F;--warn: #D89548;--warn-soft: #3A2810;--danger: #D67971;--danger-soft: #3A1814}[data-density=compact]{--density-row: 36px}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:IBM Plex Sans Thai,IBM Plex Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-feature-settings:"ss01" on,"cv11" on;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer;border:none;background:none;padding:0}a{color:inherit}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--text-3)}.photo-tile:hover .photo-download-btn{opacity:1}.mono{font-family:IBM Plex Mono,ui-monospace,monospace}.num{font-variant-numeric:tabular-nums}.app-root{display:flex;min-height:100vh}.sidebar{width:248px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.main{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{height:56px;border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--bg),var(--surface) 60%);display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:0;z-index:10;-webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px)}.content{padding:20px 24px 64px;max-width:1280px;width:100%;margin:0 auto}.brand{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;border-bottom:1px solid var(--border)}.brand-logo{width:32px;height:32px;border-radius:8px;object-fit:cover;background:var(--surface-2)}.brand-text{display:flex;flex-direction:column;line-height:1.1;min-width:0}.brand-text b{font-weight:600;font-size:13px}.brand-text span{font-size:11px;color:var(--text-3)}.sidebar nav{padding:10px 8px;flex:1;overflow:auto}.nav-section{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);padding:14px 10px 6px}.nav-item{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:6px;width:100%;text-align:left;color:var(--text-2);font-size:13.5px;font-weight:500;transition:background .12s ease}.nav-item:hover,.nav-item.active{background:var(--surface-2);color:var(--text)}.nav-item .ic{width:16px;height:16px;opacity:.85}.nav-item .kbd{margin-left:auto;font-size:11px;color:var(--text-3);font-family:IBM Plex Mono,monospace}.sidebar-foot{border-top:1px solid var(--border);padding:10px}.crumbs{display:flex;align-items:center;gap:8px;color:var(--text-2);font-size:13px;min-width:0;flex:1}.crumbs b{color:var(--text);font-weight:600}.crumbs .sep{color:var(--text-3)}.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:var(--surface-2);color:var(--text-2);font-size:12px;font-weight:500;border:1px solid var(--border)}.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--success)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.card-hd{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}.card-hd h3{margin:0;font-size:14px;font-weight:600}.card-hd .sub{color:var(--text-3);font-size:12px}.card-body{padding:16px}.card-foot{padding:10px 16px;border-top:1px solid var(--border);color:var(--text-3);font-size:12px}.btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:13px;font-weight:500;transition:background .12s,border-color .12s,transform .05s}.btn:hover{background:var(--surface-2);border-color:var(--border-strong)}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.primary:hover{background:var(--primary-2);border-color:var(--primary-2)}.btn.ghost{background:transparent;border-color:transparent;color:var(--text-2)}.btn.ghost:hover{background:var(--surface-2);color:var(--text)}.btn.danger{color:var(--danger)}.btn.sm{height:26px;padding:0 8px;font-size:12px;border-radius:6px}.btn.lg{height:40px;padding:0 16px;font-size:14px;border-radius:10px}.btn .ic{width:14px;height:14px}.btn-group{display:inline-flex;align-items:center}.btn-group .btn{border-radius:0}.btn-group .btn:first-child{border-radius:8px 0 0 8px}.btn-group .btn:last-child{border-radius:0 8px 8px 0}.btn-group .btn+.btn{border-left:none}.btn-group .btn.active{background:var(--surface-2);color:var(--text)}.input,.select,textarea.input{height:32px;padding:0 10px;border:1px solid var(--border);background:var(--surface);border-radius:8px;color:var(--text);font-size:13px;outline:none;transition:border-color .12s,box-shadow .12s;width:100%}textarea.input{height:auto;padding:8px 10px;resize:vertical;min-height:64px}.input:focus,.select:focus,textarea.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--primary),transparent 80%)}.input::placeholder{color:var(--text-3)}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:12px;color:var(--text-2);font-weight:500}.field .hint{font-size:11.5px;color:var(--text-3)}.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:500;background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);white-space:nowrap}.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--text-3)}.badge.ok{background:var(--success-soft);color:var(--success);border-color:color-mix(in oklab,var(--success),transparent 70%)}.badge.ok .dot{background:var(--success)}.badge.warn{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in oklab,var(--warn),transparent 70%)}.badge.warn .dot{background:var(--warn)}.badge.bad{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in oklab,var(--danger),transparent 70%)}.badge.bad .dot{background:var(--danger)}.badge.accent{background:var(--accent-soft);color:var(--warn);border-color:color-mix(in oklab,var(--accent),transparent 70%)}.table{width:100%;border-collapse:collapse;font-size:13px}.table thead th{text-align:left;font-weight:500;font-size:11.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0}.table tbody tr{border-bottom:1px solid var(--border)}.table tbody tr:hover{background:var(--surface-2)}.table tbody td{padding:10px 12px;vertical-align:middle;height:var(--density-row)}.table tbody tr:last-child{border-bottom:none}.table .num{text-align:right;font-variant-numeric:tabular-nums}.grid{display:grid;gap:16px}.row{display:flex;gap:12px;align-items:center}.row.wrap{flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:12px}.spacer{flex:1}.h1{font-size:22px;font-weight:600;margin:0;letter-spacing:-.01em}.h2{font-size:17px;font-weight:600;margin:0;letter-spacing:-.005em}.muted{color:var(--text-3)}.small{font-size:12px}.tiny{font-size:11px}.divider{height:1px;background:var(--border);margin:12px 0}.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:4px;background:var(--surface);font-family:IBM Plex Mono,monospace;font-size:11px;color:var(--text-2)}.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}.stat .label{color:var(--text-3);font-size:12px;font-weight:500}.stat .value{font-size:28px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.stat .delta{font-size:12px;color:var(--text-2);display:flex;align-items:center;gap:4px}.stat .delta.up{color:var(--success)}.stat .delta.down{color:var(--danger)}.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}@media(max-width:900px){.stat-row{grid-template-columns:repeat(2,1fr)}}.avatar{width:28px;height:28px;border-radius:50%;background:var(--surface-2);color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;border:1px solid var(--border);flex-shrink:0}.avatar.lg{width:40px;height:40px;font-size:14px}.avatar.xl{width:56px;height:56px;font-size:18px}.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border)}.tab{padding:8px 12px;font-size:13px;font-weight:500;color:var(--text-2);border-bottom:2px solid transparent;margin-bottom:-1px}.tab:hover{color:var(--text)}.tab.active{color:var(--text);border-bottom-color:var(--text)}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#0e111666;display:flex;align-items:center;justify-content:center;z-index:100;padding:24px;animation:fadeIn .15s ease}.modal{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:560px;width:100%;max-height:80vh;overflow:auto;animation:pop .18s cubic-bezier(.2,.9,.3,1.2)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pop{0%{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.stage{flex:1;background:radial-gradient(circle at 10% 0%,color-mix(in oklab,var(--primary),transparent 92%),transparent 60%),radial-gradient(circle at 90% 100%,color-mix(in oklab,var(--accent),transparent 90%),transparent 60%),var(--bg);display:flex;align-items:center;justify-content:center;padding:32px 24px;gap:32px;min-height:100vh}.stage-side{flex:1;max-width:360px}.stage-side h2{margin:0 0 8px;font-size:22px;letter-spacing:-.01em}.stage-side p{color:var(--text-2);margin:0 0 16px;line-height:1.55}.tweak-trigger{position:fixed;bottom:18px;right:18px;width:40px;height:40px;border-radius:999px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);z-index:50}.sdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}.sdot.ok{background:var(--success)}.sdot.warn{background:var(--warn)}.sdot.bad{background:var(--danger)}.sdot.idle{background:var(--text-3)}.progress{height:6px;background:var(--surface-2);border-radius:999px;overflow:hidden}.progress>.fill{height:100%;background:var(--success);transition:width .4s}.chart-grid line{stroke:var(--border)}.chart-bar{fill:var(--primary)}.chart-bar.muted{fill:var(--surface-3)}.chart-axis text{fill:var(--text-3);font-size:10px}.map-wrap{position:relative;background:var(--surface-2);border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10}.map-wrap svg{display:block;width:100%;height:100%}.clip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.phone-screen{background:var(--bg);width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;font-size:15px}.menu-btn{display:none;width:34px;height:34px;flex-shrink:0;border-radius:8px;align-items:center;justify-content:center;color:var(--text-2)}.menu-btn:hover{background:var(--surface-2);color:var(--text)}.nav-scrim{display:none}@media(max-width:860px){.app-root{display:block}.sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;width:270px;z-index:300;transform:translate(-100%);transition:transform .22s ease;box-shadow:var(--shadow-lg)}.sidebar.open{transform:translate(0)}.nav-scrim.show{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#0e111673;z-index:250;animation:fadeIn .15s ease}.menu-btn{display:inline-flex}.main{min-width:0}.content{padding:16px 14px 56px}.content .grid{grid-template-columns:1fr!important}.row{flex-wrap:wrap}.h1{font-size:19px}.topbar{padding:0 12px;gap:8px}.topbar .pill,.crumb-hide-mobile{display:none}}@media(max-width:560px){.stat-row{grid-template-columns:repeat(2,1fr);gap:10px}.stat .value{font-size:24px}}