:root {
  --ai-navy-950: #041a34;
  --ai-navy-900: #062347;
  --ai-navy-800: #082d59;
  --ai-navy-700: #0a376b;
  --ai-navy-600: #0d447f;
  --ai-navy-500: #14589a;
  --ai-orange-700: #c83f08;
  --ai-orange-600: #df4c10;
  --ai-orange-500: #f05b1b;
  --ai-orange-100: #fff0e9;
  --ai-ink: #27292d;
  --ai-text: #34383e;
  --ai-muted: #66707b;
  --ai-subtle: #8b949e;
  --ai-border: #dde3ea;
  --ai-border-strong: #c8d0da;
  --ai-surface: #fff;
  --ai-surface-soft: #f6f8fa;
  --ai-surface-muted: #eef2f6;
  --ai-page: #f7f9fb;
  --ai-success: #147a4a;
  --ai-success-bg: #eaf7f0;
  --ai-warning: #9a6700;
  --ai-warning-bg: #fff6d8;
  --ai-danger: #b42318;
  --ai-danger-bg: #fff0ee;
  --ai-info: #1769aa;
  --ai-info-bg: #edf6ff;
  --ai-radius-sm: 6px;
  --ai-radius-md: 10px;
  --ai-radius-lg: 16px;
  --ai-shadow-sm: 0 1px 2px rgba(4,26,52,.06), 0 1px 3px rgba(4,26,52,.08);
  --ai-shadow-md: 0 8px 24px rgba(4,26,52,.1);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ai-text);
  background: var(--ai-page);
  font-size: 16px;
}

body { background: var(--ai-page); color: var(--ai-text); line-height: 1.6; }
button { min-height: 42px; border-color: var(--ai-border-strong); border-radius: var(--ai-radius-md); color: var(--ai-navy-800); font-weight: 700; transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease; }
button:hover { background: var(--ai-surface-soft); border-color: var(--ai-navy-500); transform: translateY(-1px); }
button:active { transform: none; }
input, select, textarea { min-height: 44px; border-color: var(--ai-border-strong); border-radius: var(--ai-radius-md); color: var(--ai-ink); }
input:focus, select:focus, textarea:focus { border-color: var(--ai-navy-500); box-shadow: 0 0 0 3px rgba(20,88,154,.12); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid rgba(240,91,27,.3); outline-offset: 2px; }
label { color: var(--ai-text); font-size: .875rem; font-weight: 750; }
a { color: var(--ai-navy-600); }
.primary { background: var(--ai-navy-800); border-color: var(--ai-navy-800); color: white; box-shadow: var(--ai-shadow-sm); }
.primary:hover { background: var(--ai-navy-700); border-color: var(--ai-navy-700); }
.muted { color: var(--ai-muted); }
.small { font-size: .75rem; }
.mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
.layout { grid-template-columns: 250px minmax(0, 1fr); }
.sidebar { padding: 24px 16px; gap: 28px; background: var(--ai-navy-950); border-right: 0; color: white; }
.logo { padding: 0 8px; gap: 16px; }
.logo img { width: 164px; height: auto; object-fit: contain; }
.logo span { display: none; }
.sidebar .logo { align-self: flex-start; padding: 10px 12px; background: white; border-radius: var(--ai-radius-md); }
.eyebrow { padding: 0 12px; color: rgba(255,255,255,.5); font-size: .75rem; font-weight: 800; letter-spacing: .14em; }
.nav { gap: 4px; }
.nav button { min-height: 42px; padding: .65rem .75rem; color: rgba(255,255,255,.84); border: 1px solid transparent; border-radius: var(--ai-radius-md); font-size: .875rem; font-weight: 650; }
.nav button:hover { color: white; background: rgba(255,255,255,.08); border-color: transparent; }
.nav button.active { color: white; background: rgba(255,255,255,.1); box-shadow: inset 3px 0 0 var(--ai-orange-500); }
.nav .count { color: rgba(255,255,255,.5); font-size: .75rem; }
.nav button.active .count { color: #f4773f; }
.brand-dot { width: 8px; height: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,.24); }
.sidebar-bottom { border-top-color: rgba(255,255,255,.12); }
.sidebar-bottom .small { color: white; }
.sidebar-bottom .muted { color: rgba(255,255,255,.56); }
.sidebar-bottom button { min-height: 34px; color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.16); }
.avatar { background: var(--ai-orange-500); color: white; border-radius: var(--ai-radius-md); font-weight: 800; }
.topbar { height: 76px; padding: 0 40px; border-bottom-color: var(--ai-border); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.breadcrumb { color: var(--ai-muted); font-size: .75rem; }
.breadcrumb strong { color: var(--ai-navy-800); font-weight: 700; }
.mode { color: var(--ai-success); background: var(--ai-success-bg); border-color: #b9e1cd; border-radius: 999px; font-size: .75rem; font-weight: 750; }
.mode span { color: var(--ai-success); }
.content { padding: 40px; max-width: 1600px; }
h1, h2, h3 { color: var(--ai-navy-800); font-weight: 720; letter-spacing: -.025em; }
h1 { font-size: clamp(1.7rem, 2vw, 2rem); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
.heading p { color: var(--ai-muted); font-size: .875rem; }
.stats { gap: 16px; }
.stat { padding: 24px; border-color: var(--ai-border); border-radius: var(--ai-radius-lg); box-shadow: var(--ai-shadow-sm); position: relative; overflow: hidden; }
.stat::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--ai-orange-500); }
.stat .label { color: var(--ai-muted); font-size: .875rem; font-weight: 700; }
.stat strong { color: var(--ai-navy-800); font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 780; line-height: 1.35; }
.stat .small { color: var(--ai-muted); font-size: .75rem; }
.panel { border-color: var(--ai-border); border-radius: var(--ai-radius-lg); box-shadow: var(--ai-shadow-sm); }
.filters { border-bottom-color: var(--ai-border); background: var(--ai-surface-soft); }
.filters input { border: 1px solid var(--ai-border-strong); background: white; }
.filters select { font-size: .875rem; }
th { padding: .85rem 1rem; color: var(--ai-navy-800); background: var(--ai-surface-soft); font-size: .75rem; font-weight: 800; letter-spacing: .055em; }
td { padding: .95rem 1rem; border-top-color: var(--ai-border); font-size: .875rem; }
tr.ticket-row:hover { background: #fbfcfd; }
.ticket-link { color: var(--ai-ink); font-size: .875rem; font-weight: 700; }
.ticket-meta, .brand-label, .table-footer { font-size: .75rem; }
.badge { min-height: 24px; padding: .2rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 800; }
.badge.NEW { background: var(--ai-orange-100); color: var(--ai-orange-700); }
.badge.OPEN { background: var(--ai-success-bg); color: var(--ai-success); }
.badge.WAITING { background: var(--ai-warning-bg); color: var(--ai-warning); }
.badge.INTERNAL { background: #e9f0f8; color: var(--ai-navy-800); }
.badge.RESOLVED, .badge.CLOSED { background: var(--ai-surface-muted); color: var(--ai-muted); }
.urgent { color: var(--ai-danger); }
.notice { padding: 16px 20px; border: 1px solid var(--ai-border); border-left: 4px solid var(--ai-warning); border-radius: var(--ai-radius-md); background: var(--ai-warning-bg); color: #73520d; }
.message.note { padding: 20px; border-color: #f0dca0; border-radius: var(--ai-radius-md); background: var(--ai-warning-bg); }
.message-header strong { color: var(--ai-navy-800); }
.composer { border-top-color: var(--ai-border); background: var(--ai-surface-soft); }
.attachment { color: var(--ai-navy-600); background: var(--ai-info-bg); border-radius: var(--ai-radius-sm); }
.outbox-card summary { color: var(--ai-navy-600); }
.outbox-card pre { background: var(--ai-surface-soft); }
#toast { background: var(--ai-navy-900); border-left: 4px solid var(--ai-orange-500); border-radius: var(--ai-radius-md); }
.login { background: radial-gradient(circle at 82% 10%, rgba(240,91,27,.12), transparent 28rem), linear-gradient(180deg, white 0%, var(--ai-page) 100%); }
.login-box { width: min(440px, 100%); padding: 40px; border-color: var(--ai-border); border-radius: var(--ai-radius-lg); background: white; box-shadow: 0 18px 50px rgba(4,26,52,.14); }
.login-box .logo { margin-bottom: 40px; padding: 0; align-items: center; }
.login-box .logo img { width: 210px; }
.login-box .logo span { display: block; padding-left: 16px; border-left: 1px solid var(--ai-border-strong); color: var(--ai-text); font-size: .875rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.login-box h1 { color: var(--ai-navy-800); font-size: 2rem; }
.login-box p { color: var(--ai-muted); font-size: .875rem; }
.login-box input { padding: .68rem .78rem; }
.login-box .primary { min-height: 44px; }

@media (max-width: 1100px) {
  .layout { grid-template-columns: 220px minmax(0, 1fr); }
  .sidebar .logo img { width: 142px; }
  .content { padding: 32px; }
}
@media (max-width: 740px) {
  .sidebar { padding: 16px; }
  .sidebar .logo img { width: 138px; }
  .sidebar .nav { scrollbar-width: none; }
  .sidebar .nav::-webkit-scrollbar { display: none; }
  .topbar { height: 68px; padding: 0 20px; }
  .content { padding: 24px 16px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 20px; }
  h1 { font-size: 1.6rem; }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
  .login-box { padding: 32px 24px; }
  .login-box .logo { align-items: flex-start; flex-direction: column; }
  .login-box .logo span { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}