:root{color:#152f3a;background:#f4f8f8;font-family:Prompt,Noto Sans Thai,Inter,ui-sans-serif,system-ui,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.app-shell{display:flex;min-height:100vh;background:#f4f8f8}.sidebar{display:flex;flex-direction:column;width:252px;min-height:100vh;padding:28px 18px 20px;color:#dbeaec;background:#0b2a32}.brand-lockup{display:flex;align-items:center;gap:11px;padding:0 12px 38px}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;color:#0b2a32;background:#78d4cc;font-size:1.2rem;font-weight:900}.brand-lockup strong{display:block;color:#f4ffff;font-size:1rem;letter-spacing:.18em}.brand-lockup span{display:block;margin-top:3px;color:#82a8ad;font-size:.66rem;letter-spacing:.06em}.workspace-label,.section-kicker{color:#70b8b8;font-size:.68rem;font-weight:800;letter-spacing:.16em}.workspace-label{padding:0 13px 10px;color:#62868b}.main-nav{display:grid;gap:5px}.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 13px;border:0;border-radius:11px;color:#8fb1b5;background:transparent;text-align:left;font-size:.85rem;transition:.2s ease}.nav-item:hover,.nav-item.is-active{color:#efffff;background:#74d3cb21}.nav-item.is-active{box-shadow:inset 3px 0 #78d4cc}.nav-icon{width:19px;color:#77a7ab;font-size:1.05rem;text-align:center}.nav-item.is-active .nav-icon{color:#78d4cc}.sidebar-bottom{margin-top:auto}.migration-status{margin:0 4px 18px;padding:16px;border:1px solid rgba(126,212,204,.15);border-radius:14px;background:#03121738}.status-line{display:flex;align-items:center;gap:7px;color:#b3d5d7;font-size:.75rem;font-weight:700}.pulse-dot,.connection-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6fd8a9;box-shadow:0 0 0 4px #6fd8a91a}.migration-status p{margin:9px 0 12px;color:#78999e;font-size:.68rem;line-height:1.55}.progress-track,.bar-track{overflow:hidden;height:4px;border-radius:20px;background:#1e454c}.progress-track span{display:block;width:22%;height:100%;border-radius:inherit;background:#78d4cc}.profile-chip{display:flex;align-items:center;gap:9px;padding:12px 8px 0;border-top:1px solid rgba(174,221,222,.13)}.avatar,.top-avatar{display:grid;place-items:center;border-radius:50%;color:#104049;background:#badbd7;font-weight:800}.avatar{width:31px;height:31px;font-size:.78rem}.profile-chip strong,.profile-chip span{display:block}.profile-chip strong{color:#dcecec;font-size:.73rem}.profile-chip span{margin-top:3px;color:#739499;font-size:.65rem}.profile-chip .more{margin-left:auto;color:#66868c}.main-content{flex:1;min-width:0}.topbar{display:flex;align-items:center;justify-content:space-between;min-height:76px;padding:0 clamp(22px,4vw,54px);border-bottom:1px solid #e1ecec;background:#ffffffc7}.breadcrumb{display:flex;align-items:center;gap:11px;color:#92a8aa;font-size:.78rem}.breadcrumb b{color:#c3d0d0;font-weight:400}.breadcrumb strong{color:#36545a;font-weight:700}.topbar-actions{display:flex;align-items:center;gap:14px}.connection-pill{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid #dcebea;border-radius:99px;color:#718b8e;background:#f8fcfc;font-size:.68rem}.icon-button{position:relative;width:32px;height:32px;border:0;color:#7d9698;background:transparent;font-size:1.3rem}.notification-dot{position:absolute;top:5px;right:4px;width:6px;height:6px;border:2px solid #fff;border-radius:50%;background:#e48c74}.top-avatar{width:32px;height:32px;font-size:.75rem}.page-content{width:min(1440px,100%);margin:0 auto;padding:clamp(26px,4vw,48px) clamp(22px,4vw,54px) 70px}.page-intro{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px}h1,h2,p{margin-top:0}h1{margin:7px 0 8px;color:#143844;font-size:clamp(1.65rem,3vw,2.35rem);letter-spacing:-.045em;line-height:1.15}h2{margin-bottom:0;color:#1b414b;font-size:1rem;letter-spacing:-.02em}.page-intro p{margin:0;color:#819699;font-size:.82rem}.primary-button,.secondary-button{display:inline-flex;align-items:center;gap:7px;border-radius:10px;font-size:.76rem;font-weight:700;transition:.2s ease}.primary-button{padding:11px 15px;border:1px solid #1a6c70;color:#fff;background:#1d7477;box-shadow:0 8px 18px #1d747726}.primary-button:hover{background:#155b5f;transform:translateY(-1px)}.secondary-button{padding:10px 13px;border:1px solid #d5e3e3;color:#587274;background:#fff}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:20px}.metric-card,.surface-card{border:1px solid #e1eceb;border-radius:15px;background:#fff;box-shadow:0 12px 30px #14404909}.metric-card{position:relative;overflow:hidden;padding:20px}.metric-card:before{position:absolute;inset:0 auto 0 0;width:3px;content:"";background:#69a9dd}.metric-card.amber:before{background:#e1b05f}.metric-card.green:before{background:#63bd91}.metric-card.red:before{background:#e28276}.metric-top{display:flex;align-items:center;justify-content:space-between;color:#799295;font-size:.73rem}.metric-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:9px;color:#4386b7;background:#edf7ff;font-weight:800}.amber .metric-icon{color:#b27c25;background:#fff6df}.green .metric-icon{color:#328c62;background:#ecfaf3}.red .metric-icon{color:#bf5b50;background:#fff0ee}.metric-card>strong{display:block;margin:14px 0 5px;color:#153e49;font-size:1.75rem;letter-spacing:-.045em}.metric-card>small{color:#94a7a8;font-size:.66rem}.dashboard-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:20px;margin-bottom:20px}.surface-card{padding:24px}.card-heading{display:flex;align-items:start;justify-content:space-between;gap:20px;margin-bottom:22px}.text-button{padding:2px 0;border:0;color:#448e8e;background:transparent;font-size:.72rem;font-weight:700}.text-button span{margin-left:5px;font-size:1rem}.status-bars{display:grid;gap:17px}.status-label{display:flex;align-items:center;gap:8px;margin-bottom:7px;color:#678083;font-size:.73rem}.status-label strong{margin-left:auto;color:#365960}.status-swatch{width:8px;height:8px;border-radius:50%}.bar-track{height:7px;background:#edf4f3}.bar-track span{display:block;min-width:8px;height:100%;border-radius:inherit}.quick-actions{display:grid;gap:10px}.quick-actions button{display:flex;align-items:center;gap:11px;padding:12px 0;border:0;border-bottom:1px solid #eef3f2;color:#3a5e63;background:transparent;text-align:left}.quick-actions button:last-child{border-bottom:0}.quick-actions button>span:nth-child(2){flex:1}.quick-actions strong,.quick-actions small{display:block}.quick-actions strong{color:#2b5158;font-size:.75rem}.quick-actions small{margin-top:4px;color:#9aabad;font-size:.65rem}.quick-actions b{color:#91abad;font-weight:400}.action-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;font-size:1.05rem}.action-icon.blue{color:#4d91bd;background:#eef7fd}.action-icon.purple{color:#897ab6;background:#f4f0ff}.action-icon.orange{color:#bd8a45;background:#fff7e8}.table-card{padding:23px 24px 8px}.full-table-card{padding-bottom:18px}.request-table-wrap{overflow-x:auto}.request-table{width:100%;border-collapse:collapse;min-width:710px}.request-table th{padding:0 12px 12px;border-bottom:1px solid #e6efee;color:#94a5a6;font-size:.65rem;font-weight:600;text-align:left;white-space:nowrap}.request-table td{padding:14px 12px;border-bottom:1px solid #eef3f2;color:#587376;font-size:.72rem;white-space:nowrap}.request-table th:first-child,.request-table td:first-child{padding-left:0}.request-table th:last-child,.request-table td:last-child{padding-right:0;text-align:right}.request-table tbody tr:hover{background:#fbfdfd}.request-id,.subtle{display:block}.request-id{color:#2b6870;font-size:.73rem}.subtle{margin-top:4px;color:#a1afb0;font-size:.64rem}.status-badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:6px;font-size:.62rem;font-weight:700}.row-menu{border:0;color:#91a6a8;background:transparent;letter-spacing:.13em}.empty-state{padding:34px;color:#91a5a7;text-align:center;font-size:.8rem}.compact-table .request-table td{padding-top:12px;padding-bottom:12px}.toolbar{display:flex;align-items:center;gap:9px;margin-bottom:15px}.search-box{display:flex;align-items:center;flex:1;gap:8px;padding:9px 12px;border:1px solid #dce9e8;border-radius:9px;color:#8ca2a4;background:#fbfdfd}.search-box input{width:100%;border:0;outline:0;color:#36585d;background:transparent;font-size:.73rem}.toolbar select{min-width:150px;padding:9px 11px;border:1px solid #dce9e8;border-radius:9px;outline:0;color:#587274;background:#fff;font-size:.72rem}.result-meta{display:flex;align-items:center;gap:9px;margin-bottom:11px;color:#9aabad;font-size:.66rem}.demo-label{padding:4px 6px;border-radius:5px;color:#98743b;background:#fff5df;font-size:.55rem;font-weight:800;letter-spacing:.08em}.live-label{color:#327b61;background:#eaf8f0}.logout-button{padding:7px 10px;font-size:.66rem}.auth-layout{display:grid;place-items:center;min-height:56vh}.auth-card{width:min(460px,100%);padding:clamp(26px,5vw,45px)}.auth-card h1{font-size:clamp(1.45rem,3vw,2rem)}.auth-card>p{color:#819699;font-size:.8rem;line-height:1.6}.auth-form{display:grid;gap:8px;margin-top:24px}.auth-form label{color:#517174;font-size:.7rem;font-weight:700}.auth-form input{padding:12px;border:1px solid #d8e5e4;border-radius:9px;outline:0;color:#315c62;background:#fbfdfd;font-size:.76rem}.auth-form input:focus{border-color:#66b8b3;box-shadow:0 0 0 3px #66b8b31f}.auth-submit{justify-content:center;margin-top:10px}.auth-error{margin:12px 0;padding:10px 12px;border:1px solid #f0c7c1;border-radius:8px;color:#a75046;background:#fff2f0;font-size:.7rem;line-height:1.5}.create-form-card{margin-bottom:20px}.request-form{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.request-form label{display:grid;gap:7px;color:#517174;font-size:.7rem;font-weight:700}.request-form input{width:100%;padding:11px 12px;border:1px solid #d8e5e4;border-radius:9px;outline:0;color:#315c62;background:#fbfdfd;font-size:.76rem;font-weight:400}.request-form input:focus{border-color:#66b8b3;box-shadow:0 0 0 3px #66b8b31f}.request-form-actions{display:flex;justify-content:flex-end;grid-column:1 / -1;gap:9px;margin-top:4px}.status-select{padding:5px 7px;border:1px solid #dce9e8;border-radius:7px;color:#587274;background:#fff;font-size:.65rem}.tracking-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}.tracking-form-card{padding:clamp(28px,5vw,52px)}.tracking-illustration{display:grid;place-items:center;width:54px;height:54px;margin-bottom:22px;border-radius:16px;color:#1d7477;background:#e8f7f5;font-size:1.7rem}.tracking-form-card h2{margin:8px 0;font-size:1.35rem}.tracking-form-card>p{margin-bottom:28px;color:#8ba0a2;font-size:.8rem}.tracking-form-card label{display:block;margin-bottom:8px;color:#517174;font-size:.7rem;font-weight:700}.tracking-input{display:flex;gap:8px}.tracking-input input{flex:1;min-width:0;padding:12px;border:1px solid #d8e5e4;border-radius:9px;outline:0;color:#315c62;background:#fbfdfd;font-size:.76rem}.tracking-input button{padding:0 16px;border:0;border-radius:9px;color:#fff;background:#1d7477;font-size:.72rem;font-weight:700}.demo-result{display:flex;gap:10px;margin-top:18px;padding:13px;border:1px solid #ccebe0;border-radius:9px;background:#f1fbf6}.success-mark{display:grid;place-items:center;flex:0 0 auto;width:25px;height:25px;border-radius:50%;color:#fff;background:#5eb891;font-size:.75rem}.demo-result strong,.demo-result p{display:block}.demo-result strong{color:#327b61;font-size:.72rem}.demo-result p{margin:3px 0 0;color:#70978a;font-size:.65rem;line-height:1.5}.privacy-card{padding:30px}.privacy-card h2{margin:10px 0 17px;font-size:1.15rem}.privacy-card ul{display:grid;gap:14px;margin:0;padding-left:18px;color:#759093;font-size:.77rem;line-height:1.6}.privacy-card li::marker{color:#67bdb5}.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.setting-card{display:flex;align-items:flex-start;gap:15px;padding:22px}.setting-icon{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:12px;color:#368b89;background:#eaf8f6;font-size:1.15rem}.setting-card h2{margin:2px 0 6px}.setting-card p{max-width:290px;margin-bottom:11px;color:#8da1a2;font-size:.7rem;line-height:1.55}.setting-state{color:#d09239;font-size:.64rem;font-weight:700}.arrow{margin-left:auto;color:#8ca9a8}.migration-note{display:flex;gap:10px;margin-top:18px;padding:15px 17px;border:1px solid #f0dfb6;border-radius:11px;background:#fffaf0}.migration-note>span{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;border-radius:50%;color:#966d2f;background:#f8e6b5;font-weight:800}.migration-note strong{color:#81612e;font-size:.72rem}.migration-note p{margin:3px 0 0;color:#a78c5d;font-size:.67rem}@media (max-width: 1050px){.sidebar{width:218px}.metric-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.tracking-layout{grid-template-columns:1fr}}@media (max-width: 720px){.app-shell{display:block}.sidebar{width:100%;min-height:auto;padding:15px 14px 12px}.brand-lockup{padding:0 6px 15px}.workspace-label,.sidebar-bottom{display:none}.main-nav{display:flex;overflow-x:auto;gap:4px}.nav-item{flex:0 0 auto;width:auto;padding:9px 11px;font-size:.7rem}.nav-item.is-active{box-shadow:inset 0 -3px #78d4cc}.nav-icon{width:auto}.topbar{min-height:58px;padding:0 16px}.breadcrumb span,.breadcrumb b,.connection-pill{display:none}.page-content{padding:25px 16px 45px}.page-intro{display:block}.page-intro .primary-button{margin-top:18px}.metric-grid,.settings-grid{grid-template-columns:1fr}.metric-card{padding:16px}.surface-card{padding:18px}.toolbar{align-items:stretch;flex-wrap:wrap}.search-box{flex-basis:100%}.toolbar select{flex:1}.tracking-input{display:grid}.tracking-input button{min-height:42px}.topbar-actions{gap:5px}.request-form{grid-template-columns:1fr}.request-form-actions{grid-column:auto}}