:root{--navy-900: #081a33;--navy-800: #0b2545;--navy-700: #123a63;--navy-600: #1b4a7a;--blue-600: #1766d6;--blue-500: #2478e6;--blue-400: #4f97f2;--blue-100: #e5f0ff;--blue-050: #f2f7ff;--white: #ffffff;--gray-050: #f7f9fc;--gray-100: #eef1f6;--gray-200: #e2e7ef;--gray-300: #cbd3e0;--gray-400: #97a3b6;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--gray-800: #1e293b;--gray-900: #0f172a;--black: #060b16;--green-600: #16a34a;--green-050: #e9f8ef;--amber-600: #d98a04;--amber-050: #fdf4e3;--red-600: #dc2626;--red-050: #fdeaea;--blue-status: #2478e6;--blue-status-050: #eaf2fe;--purple-600: #7c3aed;--purple-050: #f2ecfe;--bg-app: var(--gray-050);--bg-surface: var(--white);--bg-surface-2: var(--gray-100);--bg-sidebar: var(--navy-800);--bg-sidebar-hover: rgba(255, 255, 255, .08);--bg-sidebar-active: var(--blue-600);--text-primary: var(--gray-900);--text-secondary: var(--gray-600);--text-muted: var(--gray-400);--text-on-navy: #eaf1fb;--text-on-navy-muted: #9db4d4;--border: var(--gray-200);--border-strong: var(--gray-300);--cta: var(--blue-600);--cta-hover: var(--blue-500);--focus-ring: rgba(23, 102, 214, .35);--font-sans: "IBM Plex Sans Thai", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-en: "Inter", "IBM Plex Sans Thai", system-ui, sans-serif;--r-sm: 8px;--r-md: 12px;--r-lg: 16px;--r-xl: 22px;--shadow-sm: 0 1px 2px rgba(11, 37, 69, .06), 0 1px 3px rgba(11, 37, 69, .05);--shadow-md: 0 4px 14px rgba(11, 37, 69, .08);--shadow-lg: 0 12px 34px rgba(11, 37, 69, .12);--sidebar-w: 268px;--topbar-h: 64px;--content-max: 1200px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-sans);background:var(--bg-app);color:var(--text-primary);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1,h2,h3,h4{margin:0;color:var(--text-primary);line-height:1.25;font-weight:700}a{color:var(--blue-600);text-decoration:none}button{font-family:inherit}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:8px}::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}.mh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--r-md);padding:10px 16px;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s,box-shadow .15s,border-color .15s,transform .05s;white-space:nowrap}.mh-btn:active{transform:translateY(1px)}.mh-btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--focus-ring)}.mh-btn--primary{background:var(--cta);color:#fff}.mh-btn--primary:hover{background:var(--cta-hover)}.mh-btn--ghost{background:transparent;color:var(--text-secondary);border-color:var(--border-strong)}.mh-btn--ghost:hover,.mh-btn--subtle{background:var(--bg-surface-2);color:var(--text-primary)}.mh-btn--subtle:hover{background:var(--gray-200)}.mh-btn--sm{padding:7px 12px;font-size:13.5px;border-radius:var(--r-sm)}.mh-btn--lg{padding:13px 22px;font-size:16px}.mh-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}.mh-input,.mh-textarea,.mh-select{width:100%;border:1px solid var(--border-strong);border-radius:var(--r-md);padding:11px 13px;font-size:15px;font-family:inherit;color:var(--text-primary);background:var(--white);transition:border-color .15s,box-shadow .15s}.mh-input:focus,.mh-textarea:focus,.mh-select:focus{outline:none;border-color:var(--blue-400);box-shadow:0 0 0 4px var(--focus-ring)}.mh-textarea{resize:vertical;min-height:96px;line-height:1.5}.mh-label{display:block;font-size:13.5px;font-weight:600;color:var(--text-secondary);margin-bottom:6px}.mh-field{margin-bottom:16px}.mh-help{font-size:12.5px;color:var(--text-muted);margin-top:5px}.mh-pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:999px;line-height:1.4}.mh-pill--winner{background:var(--green-050);color:var(--green-600)}.mh-pill--watch{background:var(--amber-050);color:var(--amber-600)}.mh-pill--problem{background:var(--red-050);color:var(--red-600)}.mh-pill--testing,.mh-pill--insight{background:var(--blue-status-050);color:var(--blue-status)}.mh-pill--experimental{background:var(--purple-050);color:var(--purple-600)}.mh-pill--neutral{background:var(--gray-100);color:var(--gray-600)}.mh-conf{font-size:12px;font-weight:700;padding:2px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.02em}.mh-conf--high{background:var(--green-050);color:var(--green-600)}.mh-conf--medium{background:var(--amber-050);color:var(--amber-600)}.mh-conf--low{background:var(--gray-100);color:var(--gray-600)}.mh-eng{font-family:var(--font-en)}.mh-muted{color:var(--text-muted)}.mh-sec{color:var(--text-secondary)}.mh-stack{display:flex;flex-direction:column}.mh-row{display:flex;align-items:center}.mh-spread{display:flex;align-items:center;justify-content:space-between;gap:12px}.mh-grid{display:grid;gap:16px}.app-shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}.sidebar{background:var(--bg-sidebar);color:var(--text-on-navy);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:30}.sidebar__brand{display:flex;align-items:center;gap:11px;padding:18px 18px 14px}.sidebar__logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--blue-500),var(--blue-600));display:grid;place-items:center;color:#fff;font-weight:800;font-family:var(--font-en);flex:none}.sidebar__title{font-family:var(--font-en);font-weight:800;font-size:16px;letter-spacing:.02em;line-height:1.05}.sidebar__title small{display:block;font-size:10.5px;color:var(--text-on-navy-muted);font-weight:500;letter-spacing:.04em}.sidebar__group{padding:6px 12px}.sidebar__group-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-on-navy-muted);padding:12px 10px 5px;font-weight:600}.nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--text-on-navy);font-size:14.5px;font-weight:500;cursor:pointer;transition:background .13s;position:relative}.nav-item:hover{background:var(--bg-sidebar-hover)}.nav-item--active{background:var(--bg-sidebar-active);color:#fff;font-weight:600}.nav-item__icon{flex:none;opacity:.92}.nav-item__label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-item__dot{width:7px;height:7px;border-radius:50%;background:var(--amber-600);flex:none}.sidebar__foot{margin-top:auto;padding:12px;font-size:11.5px;color:var(--text-on-navy-muted)}.topbar{height:var(--topbar-h);background:var(--bg-surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:20}.topbar__title{font-size:16px;font-weight:700}.topbar__spacer{flex:1}.brand-switch{display:flex;align-items:center;gap:8px;border:1px solid var(--border-strong);border-radius:10px;padding:6px 10px;background:var(--white);font-size:14px;cursor:pointer}.brand-switch select{border:none;background:transparent;font:inherit;color:var(--text-primary);cursor:pointer;outline:none}.cost-chip{display:flex;align-items:center;gap:6px;background:var(--blue-050);color:var(--blue-600);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600}.avatar{width:34px;height:34px;border-radius:50%;background:var(--navy-700);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}.content{min-width:0}.page{padding:26px 30px 60px;max-width:var(--content-max);margin:0 auto}.page__head{margin-bottom:22px}.page__title{font-size:24px;font-weight:800;letter-spacing:-.01em}.page__subtitle{color:var(--text-secondary);margin-top:5px;font-size:15px}.mock-banner{display:flex;gap:10px;align-items:flex-start;background:var(--amber-050);border:1px solid #f2dca0;color:#7a5900;border-radius:var(--r-md);padding:12px 14px;font-size:13.5px;margin-bottom:18px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.card-pad{padding:18px}.qa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}.qa{display:flex;flex-direction:column;gap:10px;padding:18px 16px;border-radius:var(--r-lg);background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .08s,box-shadow .15s,border-color .15s;text-align:left}.qa:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--blue-100)}.qa__icon{width:42px;height:42px;border-radius:11px;background:var(--blue-050);color:var(--blue-600);display:grid;place-items:center}.qa__label{font-weight:700;font-size:15px}.qa__en{font-size:12px;color:var(--text-muted);font-family:var(--font-en)}.chat{display:flex;flex-direction:column;height:calc(100vh - var(--topbar-h) - 20px)}.chat__stream{flex:1;overflow-y:auto;padding:8px 2px;display:flex;flex-direction:column;gap:14px}.bubble{max-width:760px;padding:14px 16px;border-radius:14px;font-size:15px;line-height:1.6;white-space:pre-wrap}.bubble--user{align-self:flex-end;background:var(--blue-600);color:#fff;border-bottom-right-radius:5px}.bubble--ai{align-self:flex-start;background:var(--white);border:1px solid var(--border);border-bottom-left-radius:5px;box-shadow:var(--shadow-sm)}.chat__composer{display:flex;gap:10px;align-items:flex-end;padding-top:12px;border-top:1px solid var(--border)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}@media(max-width:720px){.form-grid{grid-template-columns:1fr}}.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px;gap:12px}.empty__icon{width:64px;height:64px;border-radius:18px;background:var(--blue-050);color:var(--blue-600);display:grid;place-items:center}.auth-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(160deg,var(--navy-800),var(--navy-900));padding:20px}.auth-card{width:100%;max-width:420px;background:var(--white);border-radius:20px;padding:32px 30px;box-shadow:var(--shadow-lg)}.auth-logo{display:flex;align-items:center;gap:12px;margin-bottom:22px}.menu-btn{display:none}@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;width:280px;transform:translate(-100%);transition:transform .2s;box-shadow:var(--shadow-lg)}.sidebar--open{transform:translate(0)}.menu-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--border-strong);background:#fff;cursor:pointer}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:#081a3366;z-index:25}.page{padding:18px 16px 50px}.form-grid{grid-template-columns:1fr}}.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}.spinner--dark{border-color:var(--gray-200);border-top-color:var(--blue-600)}@keyframes spin{to{transform:rotate(360deg)}}