@font-face{font-family:"LINE Seed Sans TH";src:local("LINE Seed Sans TH Thin"),url("../fonts/LINESeedSansTH_Th.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"LINE Seed Sans TH";src:local("LINE Seed Sans TH"),url("../fonts/LINESeedSansTH_Rg.ttf") format("truetype");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"LINE Seed Sans TH";src:local("LINE Seed Sans TH Bold"),url("../fonts/LINESeedSansTH_Bd.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"LINE Seed Sans TH";src:local("LINE Seed Sans TH Heavy"),url("../fonts/LINESeedSansTH_He.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"LINE Seed Sans TH";src:local("LINE Seed Sans TH ExtraBold"),url("../fonts/LINESeedSansTH_XBd.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Anakotmai";src:local("Anakotmai Light"),local("Anakotmai-Light"),url("/font/anakotmai-light.woff2") format("woff2"),url("/font/anakotmai-light.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Anakotmai";src:local("Anakotmai Medium"),local("Anakotmai-Medium"),url("/font/anakotmai-medium.woff2") format("woff2"),url("/font/anakotmai-medium.woff") format("woff");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Anakotmai";src:local("Anakotmai Bold"),local("Anakotmai-Bold"),url("/font/anakotmai-bold.woff2") format("woff2"),url("/font/anakotmai-bold.woff") format("woff");font-weight:700 900;font-style:normal;font-display:swap}

:root{
  --brand:#0EA5E9;
  --brand-strong:#075985;
  --brand-soft:#E0F2FE;
  --brand-ink:#ffffff;
  --ink:#1f2937;
  --muted:#64748b;
  --subtle:#F8FBFF;
  --surface:#ffffff;
  --surface-2:#F3FAFF;
  --glass:rgba(255,255,255,.70);
  --glass-strong:rgba(255,255,255,.82);
  --glass-border:rgba(255,255,255,.78);
  --glass-dark:rgba(30,48,72,.74);
  --border:#D9E8F5;
  --border-strong:#B8D2E8;
  --success:#16a34a;
  --danger:#dc2626;
  --info:#2563eb;
  --shadow-sm:0 1px 2px rgba(15,23,42,.08);
  --shadow-md:0 3px 8px rgba(15,23,42,.12),0 1px 2px rgba(15,23,42,.08);
  --shadow-lg:0 8px 18px rgba(15,23,42,.14),0 3px 6px rgba(15,23,42,.10);
  --clay-highlight:rgba(255,255,255,.82);
  --clay-blue-shadow:rgba(35,114,184,.22);
  --clay-blue-press:rgba(23,92,153,.28);
  --tone-a:rgba(255,255,255,.72);
  --tone-b:rgba(14,165,233,.07);
  --tone-border:rgba(14,165,233,.14);
  --tone-shadow:rgba(15,23,42,.045);
  --tone-accent:#0EA5E9;
  --tone-red-a:rgba(255,255,255,.80);
  --tone-red-b:rgba(239,68,68,.075);
  --tone-red-border:rgba(239,68,68,.16);
  --tone-red-shadow:rgba(239,68,68,.045);
  --tone-red-accent:#ef4444;
  --tone-yellow-a:rgba(255,255,255,.82);
  --tone-yellow-b:rgba(250,204,21,.095);
  --tone-yellow-border:rgba(250,204,21,.20);
  --tone-yellow-shadow:rgba(202,138,4,.045);
  --tone-yellow-accent:#facc15;
  --tone-pink-a:rgba(255,255,255,.80);
  --tone-pink-b:rgba(236,72,153,.075);
  --tone-pink-border:rgba(236,72,153,.16);
  --tone-pink-shadow:rgba(236,72,153,.045);
  --tone-pink-accent:#ec4899;
  --tone-green-a:rgba(255,255,255,.80);
  --tone-green-b:rgba(34,197,94,.075);
  --tone-green-border:rgba(34,197,94,.16);
  --tone-green-shadow:rgba(34,197,94,.045);
  --tone-green-accent:#22c55e;
  --tone-orange-a:rgba(255,255,255,.80);
  --tone-orange-b:rgba(249,115,22,.080);
  --tone-orange-border:rgba(249,115,22,.17);
  --tone-orange-shadow:rgba(249,115,22,.045);
  --tone-orange-accent:#f97316;
  --tone-blue-a:rgba(255,255,255,.80);
  --tone-blue-b:rgba(14,165,233,.080);
  --tone-blue-border:rgba(14,165,233,.17);
  --tone-blue-shadow:rgba(14,165,233,.045);
  --tone-blue-accent:#0ea5e9;
  --tone-violet-a:rgba(255,255,255,.80);
  --tone-violet-b:rgba(139,92,246,.075);
  --tone-violet-border:rgba(139,92,246,.16);
  --tone-violet-shadow:rgba(139,92,246,.045);
  --tone-violet-accent:#8b5cf6;
  --radius:16px;
  --radius-sm:12px;
  --radius-lg:20px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --font-main:"Anakotmai","LINE Seed Sans TH",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:180ms cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--subtle)}
body{
  position:relative;
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:#EAF7FF;
  color:var(--ink);
  font-family:var(--font-main);
  font-size:15px;
  line-height:1.55;
  font-weight:400;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea,.btn,.form-control,.form-select{font:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid rgba(14,165,233,.32);outline-offset:2px}

.i18n-label{display:inline;font-weight:inherit}
.th-label{display:inline;color:var(--muted);font-size:.9em;font-weight:600;line-height:1.45}
.text-muted{color:var(--muted)!important}

.auth-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:var(--space-6);
  position:relative;
  z-index:1;
}
.auth-lang-toggle{position:fixed;top:16px;right:16px;z-index:2}
.auth-card{
  position:relative;
  z-index:1;
  width:min(420px,100%);
  background:var(--glass-strong);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:28px;
  box-shadow:18px 22px 44px rgba(35,114,184,.16),inset 2px 2px 7px rgba(255,255,255,.86);
  backdrop-filter:blur(22px) saturate(1.12);
  -webkit-backdrop-filter:blur(22px) saturate(1.12);
}

.brand-mark,.brand{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 12px;
  border-radius:var(--radius-sm);
  background:var(--brand);
  color:var(--brand-ink);
  font-weight:900;
  letter-spacing:0;
}

.app-shell{position:relative;z-index:1;display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding:20px 16px;
  background:linear-gradient(180deg,rgba(30,48,72,.88) 0%,rgba(23,34,53,.88) 100%);
  color:#fff;
  border-right:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
}
.sidebar nav{
  display:grid;
  gap:0;
  margin-top:24px;
  padding:8px;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(31,57,87,.74),rgba(48,76,107,.58));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 8px 10px 20px rgba(9,38,70,.34),inset -6px -6px 14px rgba(255,255,255,.06),0 8px 18px rgba(9,38,70,.12);
}
.sidebar a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 4px;
  border-radius:12px;
  color:rgba(255,255,255,.88);
  background:transparent;
  border:1px solid transparent;
  box-shadow:none;
  transition:background var(--ease),color var(--ease),transform var(--ease),box-shadow var(--ease);
  font-weight:800;
  letter-spacing:0;
}
.sidebar a:hover{
  background:rgba(255,255,255,.055);
  color:#fff;
  transform:translateX(1px);
  box-shadow:inset 3px 4px 8px rgba(9,38,70,.18),inset -2px -2px 6px rgba(255,255,255,.06);
}
.sidebar a:active{transform:translateX(1px) scale(.985)}
.sidebar a[aria-current="page"]{
  background:linear-gradient(145deg,rgba(14,165,233,.86),rgba(7,89,133,.76));
  color:#fff;
  border-color:rgba(255,255,255,.16);
  transform:translateX(1px);
  box-shadow:inset 4px 5px 10px rgba(9,38,70,.24),inset -3px -3px 9px rgba(255,255,255,.18),0 7px 16px rgba(9,38,70,.18);
}

.content-shell{min-width:0}
.topbar{
  position:sticky;
  top:0;
  z-index:4;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  padding:0 24px;
  background:rgba(252,254,255,.70);
  border-bottom:1px solid var(--glass-border);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
}
.topbar-actions{display:flex;align-items:center;gap:8px}
.lang-toggle{
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  padding:2px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:rgba(243,244,245,.72);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(12px) saturate(1.08);
  -webkit-backdrop-filter:blur(12px) saturate(1.08);
}
.lang-toggle button{
  min-width:36px;
  min-height:30px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  transition:transform 120ms ease,box-shadow 120ms ease,background 120ms ease;
}
.lang-toggle button:active{transform:translateY(1px)}
.lang-toggle button.active{
  background:linear-gradient(145deg,#ffffff,#E0F2FE);
  color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.page{max-width:1180px;margin:0 auto;padding:24px 24px 96px}
.page-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space-4);
  margin-bottom:20px;
}
.page-title h1{margin:0;font-size:28px;line-height:1.2;font-weight:900;letter-spacing:0}
.page-title p{margin:6px 0 0;color:var(--muted);max-width:680px}

.btn{
  min-height:40px;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:var(--radius-sm)!important;
  font-weight:800!important;
  line-height:1.2!important;
  border-width:0!important;
  position:relative;
  overflow:hidden;
  transition:transform 140ms cubic-bezier(.2,.8,.2,1),box-shadow 140ms cubic-bezier(.2,.8,.2,1),background 140ms cubic-bezier(.2,.8,.2,1),filter 140ms cubic-bezier(.2,.8,.2,1);
}
.btn:hover{transform:translateY(-1px);filter:none}
.btn:active{transform:translateY(1px);filter:none}
.btn-sm{min-height:34px;padding-inline:12px!important;font-size:14px!important}
.btn-lg{min-height:48px!important;border-radius:var(--radius)!important}
.btn-kht,.btn-outline-dark,.btn-outline-danger{
  background:#0EA5E9!important;
  border:1px solid #0EA5E9!important;
  color:var(--brand-ink)!important;
  box-shadow:0 2px 5px rgba(14,165,233,.20);
}
.btn-kht:hover,.btn-outline-dark:hover,.btn-outline-danger:hover{background:#075985!important;border-color:#075985!important;box-shadow:0 3px 7px rgba(7,89,133,.22)}
.btn-kht:active,.btn-outline-dark:active,.btn-outline-danger:active{background:#075985!important;border-color:#075985!important;box-shadow:inset 0 2px 4px rgba(7,89,133,.24)}

.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.metric,.panel,.list-row,.empty{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(145deg,var(--tone-a),var(--tone-b));
  border:1px solid var(--tone-border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:8px 12px 24px var(--tone-shadow),inset 2px 2px 8px rgba(255,255,255,.92),inset -5px -6px 14px color-mix(in srgb,var(--tone-accent) 5%,transparent);
  backdrop-filter:blur(16px) saturate(1.08);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  transition:box-shadow var(--ease),transform var(--ease),border-color var(--ease);
}
.metric::before,.panel::before,.list-row::before,.empty::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--tone-accent) 72%,white),color-mix(in srgb,var(--tone-accent) 48%,transparent));
  opacity:.52;
  pointer-events:none;
  z-index:1;
}
.metric::after,.list-row::after,.empty::after,
.status-item::after,.report-bar::after,.kanban-card::after,.capture-card::after{
  content:"";
  position:absolute;
  top:-8%;
  bottom:-8%;
  left:-86%;
  width:78%;
  z-index:2;
  pointer-events:none;
  opacity:0;
  transform:translateX(0);
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.16) 16%,
      rgba(255,255,255,.70) 54%,
      rgba(255,255,255,.92) 100%);
  clip-path:polygon(0 0,100% 0,54% 100%,0 100%);
  box-shadow:0 0 28px rgba(255,255,255,.70);
  mix-blend-mode:screen;
  will-change:opacity,transform;
}
.metric:hover::after,.list-row:hover::after,.empty:hover::after,
.status-item:hover::after,.report-bar:hover::after,.kanban-card:hover::after,.capture-card:hover::after{
  animation:glass-sweep 1.35s cubic-bezier(.2,.8,.2,1) infinite;
}
.metric:hover,.panel:hover,.list-row:hover,.empty:hover{
  border-color:color-mix(in srgb,var(--tone-accent) 28%,rgba(255,255,255,.72));
  box-shadow:10px 16px 28px color-mix(in srgb,var(--tone-accent) 8%,transparent),inset 2px 2px 10px rgba(255,255,255,.95),inset -5px -6px 14px color-mix(in srgb,var(--tone-accent) 7%,transparent);
}
.metric > *,.panel > *,.list-row > *,.empty > *{position:relative;z-index:3}
.empty{color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.empty::before{width:12px;height:12px;border-radius:5px;background:var(--tone-accent);flex:0 0 auto;position:relative;inset:auto;opacity:1}
.metric span,.list-row span{display:block;color:var(--muted);font-size:14px}
.metric strong{font-size:30px;line-height:1.15;font-weight:900}
.metric.danger{border-color:#fecdd3;background:#fff7f7}
.metric.warning{border-color:#B8DEFF;background:var(--brand-soft)}
.panel h2{font-size:18px;line-height:1.3;font-weight:900;margin:0 0 12px}
.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.panel-header h2{margin:0}
.panel-header p{margin:4px 0 0;color:var(--muted)}
.panel-header .btn,
.panel-header .badge-soft{
  flex:0 0 auto;
  white-space:nowrap;
}
.panel-header .btn-sm{
  min-width:58px;
  padding-inline:14px!important;
}
.nested-glass,
.panel:has(.ai-preview),
.panel:has(.status-grid),
.panel:has(.list-stack),
.panel.form-grid,
form.panel:has(.form-control){
  background:linear-gradient(145deg,var(--tone-a,var(--tone-blue-a)),var(--tone-b,var(--tone-blue-b)));
  border-color:var(--tone-border,var(--tone-blue-border));
  box-shadow:8px 14px 26px var(--tone-shadow,var(--tone-blue-shadow)),inset 1px 1px 10px rgba(255,255,255,.62),inset -6px -8px 18px color-mix(in srgb,var(--tone-accent) 6%,transparent);
  backdrop-filter:blur(22px) saturate(1.16);
  -webkit-backdrop-filter:blur(22px) saturate(1.16);
}

.metric-grid .metric:nth-child(7n+1),
.page > .panel.nested-glass:nth-of-type(7n+1),
.chart-grid > .panel:nth-child(7n+1),
.detail-grid > .panel:nth-child(7n+1),
.capture-grid .capture-card:nth-child(7n+1),
.kanban-board .kanban-column:nth-child(7n+1),
.kanban-column .kanban-card:nth-child(7n+1),
.calendar-grid .calendar-day:nth-child(7n+1),
.calendar-items .calendar-item:nth-child(7n+1),
.reference-list .reference-row:nth-child(7n+1),
.product-list .product-row:nth-child(7n+1),
.team-list .team-row:nth-child(7n+1),
.contact-list .contact-row:nth-child(7n+1),
.panel .ai-preview:nth-of-type(7n+1),
.timeline div:nth-child(7n+1),
.status-grid .status-item:nth-child(7n+1),
.form-grid .status-item:nth-of-type(7n+1),
.list-stack .list-row:nth-child(7n+1),
.report-bars .report-bar:nth-child(7n+1){
  --tone-a:var(--tone-red-a);--tone-b:var(--tone-red-b);--tone-border:var(--tone-red-border);--tone-shadow:var(--tone-red-shadow);--tone-accent:var(--tone-red-accent);
}
.metric-grid .metric:nth-child(7n+2),
.page > .panel.nested-glass:nth-of-type(7n+2),
.chart-grid > .panel:nth-child(7n+2),
.detail-grid > .panel:nth-child(7n+2),
.capture-grid .capture-card:nth-child(7n+2),
.kanban-board .kanban-column:nth-child(7n+2),
.kanban-column .kanban-card:nth-child(7n+2),
.calendar-grid .calendar-day:nth-child(7n+2),
.calendar-items .calendar-item:nth-child(7n+2),
.reference-list .reference-row:nth-child(7n+2),
.product-list .product-row:nth-child(7n+2),
.team-list .team-row:nth-child(7n+2),
.contact-list .contact-row:nth-child(7n+2),
.panel .ai-preview:nth-of-type(7n+2),
.timeline div:nth-child(7n+2),
.status-grid .status-item:nth-child(7n+2),
.form-grid .status-item:nth-of-type(7n+2),
.list-stack .list-row:nth-child(7n+2),
.report-bars .report-bar:nth-child(7n+2){
  --tone-a:var(--tone-yellow-a);--tone-b:var(--tone-yellow-b);--tone-border:var(--tone-yellow-border);--tone-shadow:var(--tone-yellow-shadow);--tone-accent:var(--tone-yellow-accent);
}
.metric-grid .metric:nth-child(7n+3),
.page > .panel.nested-glass:nth-of-type(7n+3),
.chart-grid > .panel:nth-child(7n+3),
.detail-grid > .panel:nth-child(7n+3),
.capture-grid .capture-card:nth-child(7n+3),
.kanban-board .kanban-column:nth-child(7n+3),
.kanban-column .kanban-card:nth-child(7n+3),
.calendar-grid .calendar-day:nth-child(7n+3),
.calendar-items .calendar-item:nth-child(7n+3),
.reference-list .reference-row:nth-child(7n+3),
.product-list .product-row:nth-child(7n+3),
.team-list .team-row:nth-child(7n+3),
.contact-list .contact-row:nth-child(7n+3),
.panel .ai-preview:nth-of-type(7n+3),
.timeline div:nth-child(7n+3),
.status-grid .status-item:nth-child(7n+3),
.form-grid .status-item:nth-of-type(7n+3),
.list-stack .list-row:nth-child(7n+3),
.report-bars .report-bar:nth-child(7n+3){
  --tone-a:var(--tone-pink-a);--tone-b:var(--tone-pink-b);--tone-border:var(--tone-pink-border);--tone-shadow:var(--tone-pink-shadow);--tone-accent:var(--tone-pink-accent);
}
.metric-grid .metric:nth-child(7n+4),
.page > .panel.nested-glass:nth-of-type(7n+4),
.chart-grid > .panel:nth-child(7n+4),
.detail-grid > .panel:nth-child(7n+4),
.capture-grid .capture-card:nth-child(7n+4),
.kanban-board .kanban-column:nth-child(7n+4),
.kanban-column .kanban-card:nth-child(7n+4),
.calendar-grid .calendar-day:nth-child(7n+4),
.calendar-items .calendar-item:nth-child(7n+4),
.reference-list .reference-row:nth-child(7n+4),
.product-list .product-row:nth-child(7n+4),
.team-list .team-row:nth-child(7n+4),
.contact-list .contact-row:nth-child(7n+4),
.panel .ai-preview:nth-of-type(7n+4),
.timeline div:nth-child(7n+4),
.status-grid .status-item:nth-child(7n+4),
.form-grid .status-item:nth-of-type(7n+4),
.list-stack .list-row:nth-child(7n+4),
.report-bars .report-bar:nth-child(7n+4){
  --tone-a:var(--tone-green-a);--tone-b:var(--tone-green-b);--tone-border:var(--tone-green-border);--tone-shadow:var(--tone-green-shadow);--tone-accent:var(--tone-green-accent);
}
.metric-grid .metric:nth-child(7n+5),
.page > .panel.nested-glass:nth-of-type(7n+5),
.chart-grid > .panel:nth-child(7n+5),
.detail-grid > .panel:nth-child(7n+5),
.capture-grid .capture-card:nth-child(7n+5),
.kanban-board .kanban-column:nth-child(7n+5),
.kanban-column .kanban-card:nth-child(7n+5),
.calendar-grid .calendar-day:nth-child(7n+5),
.calendar-items .calendar-item:nth-child(7n+5),
.reference-list .reference-row:nth-child(7n+5),
.product-list .product-row:nth-child(7n+5),
.team-list .team-row:nth-child(7n+5),
.contact-list .contact-row:nth-child(7n+5),
.panel .ai-preview:nth-of-type(7n+5),
.timeline div:nth-child(7n+5),
.status-grid .status-item:nth-child(7n+5),
.form-grid .status-item:nth-of-type(7n+5),
.list-stack .list-row:nth-child(7n+5),
.report-bars .report-bar:nth-child(7n+5){
  --tone-a:var(--tone-orange-a);--tone-b:var(--tone-orange-b);--tone-border:var(--tone-orange-border);--tone-shadow:var(--tone-orange-shadow);--tone-accent:var(--tone-orange-accent);
}
.metric-grid .metric:nth-child(7n+6),
.page > .panel.nested-glass:nth-of-type(7n+6),
.chart-grid > .panel:nth-child(7n+6),
.detail-grid > .panel:nth-child(7n+6),
.capture-grid .capture-card:nth-child(7n+6),
.kanban-board .kanban-column:nth-child(7n+6),
.kanban-column .kanban-card:nth-child(7n+6),
.calendar-grid .calendar-day:nth-child(7n+6),
.calendar-items .calendar-item:nth-child(7n+6),
.reference-list .reference-row:nth-child(7n+6),
.product-list .product-row:nth-child(7n+6),
.team-list .team-row:nth-child(7n+6),
.contact-list .contact-row:nth-child(7n+6),
.panel .ai-preview:nth-of-type(7n+6),
.timeline div:nth-child(7n+6),
.status-grid .status-item:nth-child(7n+6),
.form-grid .status-item:nth-of-type(7n+6),
.list-stack .list-row:nth-child(7n+6),
.report-bars .report-bar:nth-child(7n+6){
  --tone-a:var(--tone-blue-a);--tone-b:var(--tone-blue-b);--tone-border:var(--tone-blue-border);--tone-shadow:var(--tone-blue-shadow);--tone-accent:var(--tone-blue-accent);
}
.metric-grid .metric:nth-child(7n),
.page > .panel.nested-glass:nth-of-type(7n),
.chart-grid > .panel:nth-child(7n),
.detail-grid > .panel:nth-child(7n),
.capture-grid .capture-card:nth-child(7n),
.kanban-board .kanban-column:nth-child(7n),
.kanban-column .kanban-card:nth-child(7n),
.calendar-grid .calendar-day:nth-child(7n),
.calendar-items .calendar-item:nth-child(7n),
.reference-list .reference-row:nth-child(7n),
.product-list .product-row:nth-child(7n),
.team-list .team-row:nth-child(7n),
.contact-list .contact-row:nth-child(7n),
.panel .ai-preview:nth-of-type(7n),
.timeline div:nth-child(7n),
.status-grid .status-item:nth-child(7n),
.form-grid .status-item:nth-of-type(7n),
.list-stack .list-row:nth-child(7n),
.report-bars .report-bar:nth-child(7n){
  --tone-a:var(--tone-violet-a);--tone-b:var(--tone-violet-b);--tone-border:var(--tone-violet-border);--tone-shadow:var(--tone-violet-shadow);--tone-accent:var(--tone-violet-accent);
}
.page > .panel.nested-glass:nth-of-type(7n+1){
  --tone-a:var(--tone-green-a);--tone-b:var(--tone-green-b);--tone-border:var(--tone-green-border);--tone-shadow:var(--tone-green-shadow);--tone-accent:var(--tone-green-accent);
}
.page > .panel.nested-glass:nth-of-type(7n+2){
  --tone-a:var(--tone-orange-a);--tone-b:var(--tone-orange-b);--tone-border:var(--tone-orange-border);--tone-shadow:var(--tone-orange-shadow);--tone-accent:var(--tone-orange-accent);
}
.page > .panel.nested-glass:nth-of-type(7n+3){
  --tone-a:var(--tone-blue-a);--tone-b:var(--tone-blue-b);--tone-border:var(--tone-blue-border);--tone-shadow:var(--tone-blue-shadow);--tone-accent:var(--tone-blue-accent);
}
.page > .panel.nested-glass:nth-of-type(7n+4){
  --tone-a:var(--tone-violet-a);--tone-b:var(--tone-violet-b);--tone-border:var(--tone-violet-border);--tone-shadow:var(--tone-violet-shadow);--tone-accent:var(--tone-violet-accent);
}
.page > .panel.nested-glass:nth-of-type(7n+5){
  --tone-a:var(--tone-red-a);--tone-b:var(--tone-red-b);--tone-border:var(--tone-red-border);--tone-shadow:var(--tone-red-shadow);--tone-accent:var(--tone-red-accent);
}
.page > .panel.nested-glass:nth-of-type(7n+6){
  --tone-a:var(--tone-yellow-a);--tone-b:var(--tone-yellow-b);--tone-border:var(--tone-yellow-border);--tone-shadow:var(--tone-yellow-shadow);--tone-accent:var(--tone-yellow-accent);
}
.page > .panel.nested-glass:nth-of-type(7n){
  --tone-a:var(--tone-pink-a);--tone-b:var(--tone-pink-b);--tone-border:var(--tone-pink-border);--tone-shadow:var(--tone-pink-shadow);--tone-accent:var(--tone-pink-accent);
}

.metric,
.panel,
.page-note,
.auth-card{
  background:#ffffff!important;
  border:1px solid #D9E8F5!important;
  box-shadow:
    0 10px 24px rgba(58,144,194,.075),
    0 2px 6px rgba(15,23,42,.035)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.panel::before,
.metric::before,
.page-note::before,
.auth-card::before{
  display:none!important;
}
.panel::after,
.metric::after,
.page-note::after,
.auth-card::after{
  display:none!important;
}
.panel:hover,
.metric:hover,
.page-note:hover,
.auth-card:hover{
  border-color:#C8DEEF!important;
  box-shadow:
    0 12px 28px rgba(58,144,194,.085),
    0 3px 8px rgba(15,23,42,.04)!important;
}
.panel:hover::after,
.metric:hover::after,
.page-note:hover::after,
.auth-card:hover::after{
  animation:none!important;
}

.kanban-column,
.calendar-day,
.capture-card,
.kanban-card,
.calendar-item,
.reference-row,
.product-row,
.team-row,
.contact-row,
.ai-preview,
.timeline div{
  border-color:var(--tone-border,var(--tone-blue-border))!important;
  background:linear-gradient(145deg,var(--tone-a,var(--tone-blue-a)),var(--tone-b,var(--tone-blue-b)))!important;
  box-shadow:
    8px 12px 22px var(--tone-shadow,var(--tone-blue-shadow)),
    inset 1px 1px 8px rgba(255,255,255,.78),
    inset -5px -7px 16px color-mix(in srgb,var(--tone-accent,var(--tone-blue-accent)) 6%,transparent)!important;
  backdrop-filter:blur(18px) saturate(1.12)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.12)!important;
}
.kanban-column,
.calendar-day{
  box-shadow:
    10px 16px 28px var(--tone-shadow,var(--tone-blue-shadow)),
    inset 1px 1px 9px rgba(255,255,255,.64),
    inset -6px -8px 18px color-mix(in srgb,var(--tone-accent,var(--tone-blue-accent)) 7%,transparent)!important;
  backdrop-filter:blur(22px) saturate(1.16)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.16)!important;
}
.kanban-column::before,
.calendar-day::before,
.capture-card::before,
.kanban-card::before,
.calendar-item::before,
.reference-row::before,
.product-row::before,
.team-row::before,
.contact-row::before,
.ai-preview::before,
.timeline div::before{
  content:none!important;
}

.filter-bar{
  display:grid;
  grid-template-columns:minmax(240px,1.5fr) repeat(auto-fit,minmax(150px,1fr));
  gap:8px;
  margin-bottom:12px;
}
.filter-bar .btn{min-width:104px}
.reference-form,
.reference-row{
  display:grid;
  grid-template-columns:minmax(180px,1fr) auto auto auto;
  gap:8px;
  align-items:center;
}
.reference-form{margin-bottom:12px}
.reference-list{display:grid;gap:8px}
.reference-row{
  padding:8px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.48);
  box-shadow:inset 1px 1px 7px rgba(255,255,255,.76),6px 10px 18px rgba(35,114,184,.06);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
}
.sort-input{max-width:92px}
.form-control-color{width:52px;min-width:52px;padding:6px}
.toggle-line{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--muted);font-weight:800;white-space:nowrap}
.color-dot{width:18px;height:18px;border-radius:50%;box-shadow:inset 1px 1px 3px rgba(255,255,255,.85),0 4px 10px rgba(35,114,184,.16)}
.product-form,
.product-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(130px,1fr));
  gap:8px;
  align-items:center;
}
.product-form .full,
.product-row .full{grid-column:1/-1}
.product-list{display:grid;gap:10px}
.product-row{
  padding:10px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.48);
  box-shadow:inset 1px 1px 7px rgba(255,255,255,.76),6px 10px 18px rgba(35,114,184,.06);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
}
.team-form,
.team-row{
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) minmax(220px,1.2fr) auto;
  gap:8px;
  align-items:start;
}
.team-list{display:grid;gap:10px}
.team-row{
  padding:10px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.48);
  box-shadow:inset 1px 1px 7px rgba(255,255,255,.76),6px 10px 18px rgba(35,114,184,.06);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
}
.contact-list{display:grid;gap:10px}
.contact-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:8px;
  align-items:start;
  padding:10px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.48);
  box-shadow:inset 1px 1px 7px rgba(255,255,255,.76),6px 10px 18px rgba(35,114,184,.06);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
}
.contact-row > *{min-width:0}
.contact-row .form-control,.contact-row .form-select{width:100%}
.contact-row .full{grid-column:1/-1}
.list-stack{display:grid;gap:8px}
.list-row{
  display:grid;
  gap:4px;
  border-color:var(--tone-border);
  background:linear-gradient(145deg,var(--tone-a),var(--tone-b));
  box-shadow:6px 10px 18px var(--tone-shadow),inset 1px 1px 7px rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
  transition:border-color var(--ease),box-shadow var(--ease),transform var(--ease);
}
.list-row:hover{border-color:color-mix(in srgb,var(--tone-accent) 44%,white);box-shadow:10px 14px 24px var(--tone-shadow),inset 1px 1px 8px rgba(255,255,255,.84);transform:translateY(-1px)}
.record-title{display:flex;align-items:center;justify-content:space-between;gap:12px}
.record-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.badge-soft{display:inline-flex;align-items:center;min-height:24px;padding:2px 8px;border-radius:10px;background:var(--surface-2);color:#334155;font-size:13px;font-weight:800}
.badge-warning{background:var(--brand-soft);color:#1A5C91}
.badge-info{background:#dbeafe;color:#1e3a8a}
.badge-danger{background:#fee2e2;color:#991b1b}
.view-stack{display:grid;gap:16px}
.kanban-board{
  display:grid;
  grid-template-columns:repeat(4,minmax(220px,1fr));
  gap:12px;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-color:var(--border-strong) transparent;
}
.kanban-column{
  min-width:220px;
  background:linear-gradient(145deg,rgba(196,226,255,.58),rgba(240,231,223,.30));
  border:1px solid rgba(14,165,233,.32);
  border-radius:var(--radius);
  padding:10px;
  box-shadow:8px 12px 24px rgba(35,114,184,.10),inset 1px 1px 8px rgba(255,255,255,.48),inset -6px -8px 18px rgba(35,114,184,.09);
  backdrop-filter:blur(22px) saturate(1.16);
  -webkit-backdrop-filter:blur(22px) saturate(1.16);
}
.kanban-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.kanban-header strong{font-size:14px;font-weight:900}
.kanban-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  gap:6px;
  padding:12px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:var(--radius);
  background:rgba(255,255,255,.58);
  box-shadow:6px 10px 18px rgba(35,114,184,.07),inset 1px 1px 7px rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
  transition:border-color var(--ease),box-shadow var(--ease),transform var(--ease);
}
.kanban-card strong{overflow-wrap:anywhere}
.kanban-card > *{position:relative;z-index:1}
.kanban-card + .kanban-card{margin-top:8px}
.kanban-card:hover{border-color:rgba(255,255,255,.88);box-shadow:10px 14px 24px rgba(35,114,184,.10),inset 1px 1px 8px rgba(255,255,255,.84);transform:translateY(-1px)}
.kanban-card span{color:var(--muted);font-size:13px}
.status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.status-item{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:12px;
  border:1px solid var(--tone-border);
  border-radius:var(--radius);
  background:linear-gradient(145deg,var(--tone-a),var(--tone-b));
  box-shadow:6px 10px 18px var(--tone-shadow),inset 1px 1px 7px rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
  transition:box-shadow var(--ease),border-color var(--ease);
}
.status-item::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--tone-accent);
  opacity:.76;
  z-index:1;
}
.status-item > *{position:relative;z-index:3}
.status-item strong{display:block;font-size:13px;color:var(--muted);margin-bottom:2px}
.status-item span{font-weight:900}
.table{margin:0}
.table thead th{font-size:13px;color:var(--muted);font-weight:900;text-transform:uppercase;border-bottom-color:var(--border)}
.table tbody td{border-color:var(--border);vertical-align:middle}
.page-note{
  padding:12px 14px;
  border:1px solid rgba(184,222,255,.76);
  border-radius:var(--radius);
  background:rgba(234,246,255,.72);
  color:#1A5C91;
  box-shadow:inset 1px 1px 5px rgba(255,255,255,.72);
  backdrop-filter:blur(10px) saturate(1.05);
  -webkit-backdrop-filter:blur(10px) saturate(1.05);
}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid label{font-weight:800;color:#334155}
.form-grid .full{grid-column:1/-1}
.checkbox-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:10px 12px;
  border:1px solid #C8DEEF;
  border-radius:var(--radius-sm);
  background:#F3FAFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 2px 6px rgba(58,144,194,.045);
}
.checkbox-row input{
  width:18px;
  height:18px;
  accent-color:var(--brand);
  box-shadow:0 0 0 3px rgba(14,165,233,.10);
}
.form-actions{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-top:4px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.form-section-title{grid-column:1/-1;margin:6px 0 0;padding-top:14px;border-top:1px solid var(--border);font-size:13px;font-weight:900;color:var(--muted);text-transform:uppercase}
.field-hint{display:block;margin-top:4px;color:var(--muted);font-size:13px;font-weight:500}
.detail-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:14px}
.chart-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:14px}
.chart-card{min-height:320px}
.chart-card canvas{width:100%!important;min-height:220px;max-height:250px}
.quick-actions{display:flex;gap:8px;flex-wrap:wrap}
.action-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.status-form{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:end}
.status-form label{min-width:0}
.status-form .btn{width:100%;min-width:132px;white-space:nowrap}
.capture-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.capture-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:14px;
  background:rgba(255,255,255,.70);
  box-shadow:var(--shadow-sm),inset 1px 1px 5px rgba(255,255,255,.76);
  backdrop-filter:blur(12px) saturate(1.04);
  -webkit-backdrop-filter:blur(12px) saturate(1.04);
}
.capture-card > *{position:relative;z-index:3}
.capture-card h3{margin:0 0 8px;font-size:16px;font-weight:900}
.capture-card p{min-height:42px;margin:0 0 10px;color:var(--muted)}
.login-proof{display:grid;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.login-proof span{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:13px}
.remember-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  margin:0 0 18px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  color:var(--muted);
  font-weight:800;
  background:rgba(255,255,255,.44);
  border:1px solid rgba(255,255,255,.68);
  box-shadow:inset 2px 2px 6px rgba(255,255,255,.58),inset -4px -5px 10px rgba(14,165,233,.08);
}
.remember-row input{width:18px;height:18px;accent-color:var(--brand)}

.calendar-create{
  display:grid;
  grid-template-columns:minmax(220px,.78fr) minmax(0,1.4fr);
  gap:16px;
  align-items:start;
  background:linear-gradient(145deg,rgba(196,226,255,.54),rgba(240,231,223,.34));
  border-color:rgba(14,165,233,.30);
  box-shadow:10px 16px 30px rgba(35,114,184,.11),inset 1px 1px 9px rgba(255,255,255,.50),inset -6px -8px 18px rgba(35,114,184,.08);
}
.calendar-create h2{margin:0 0 6px;font-size:21px}
.calendar-create p{margin:0;color:var(--muted)}
.calendar-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}
.calendar-form label{font-weight:800;color:#334155}
.calendar-form label:first-child,.calendar-form label:nth-child(6){grid-column:span 2}
.calendar-form .btn{min-height:44px}
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(150px,1fr));
  gap:10px;
  overflow-x:auto;
  padding-bottom:6px;
  scrollbar-color:var(--border-strong) transparent;
}
.calendar-day{
  min-width:150px;
  min-height:230px;
  border:1px solid rgba(14,165,233,.30);
  border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(196,226,255,.52),rgba(240,231,223,.28));
  box-shadow:8px 12px 24px rgba(35,114,184,.10),inset 1px 1px 8px rgba(255,255,255,.50),inset -6px -8px 18px rgba(35,114,184,.08);
  backdrop-filter:blur(22px) saturate(1.16);
  -webkit-backdrop-filter:blur(22px) saturate(1.16);
  padding:10px;
}
.calendar-day.is-today{border-color:rgba(52,155,232,.82);box-shadow:10px 16px 28px rgba(35,114,184,.16),inset 1px 1px 8px rgba(255,255,255,.58)}
.calendar-day header{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:start;margin-bottom:10px}
.calendar-day header span{font-size:13px;font-weight:900;color:var(--muted);text-transform:uppercase}
.calendar-day header strong{font-size:20px;line-height:1.1}
.calendar-day header em{justify-self:end;grid-row:1/3;font-style:normal;font-size:12px;font-weight:900;color:#1A5C91;background:rgba(255,255,255,.64);border-radius:999px;padding:3px 8px}
.calendar-items{display:grid;gap:8px}
.calendar-item{
  display:grid;
  gap:3px;
  padding:10px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.58);
  box-shadow:6px 10px 18px rgba(35,114,184,.07),inset 1px 1px 7px rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
}
.calendar-item span{font-size:12px;font-weight:900;color:#1A5C91}
.calendar-item strong{font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.calendar-item small{color:var(--muted);font-weight:700}
.calendar-item.type-reminder{border-color:rgba(252,165,165,.58)}
.calendar-item.type-event{border-color:rgba(14,165,233,.46)}
.calendar-empty{
  min-height:48px;
  display:grid;
  place-items:center;
  border:1px dashed rgba(255,255,255,.72);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.28);
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}
.import-panel{
  background:linear-gradient(145deg,rgba(196,226,255,.54),rgba(240,231,223,.34));
  border-color:rgba(14,165,233,.30);
  box-shadow:10px 16px 30px rgba(35,114,184,.11),inset 1px 1px 9px rgba(255,255,255,.50),inset -6px -8px 18px rgba(35,114,184,.08);
}
.import-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.integration-toggle span{display:grid;gap:2px}
.integration-toggle small{display:block;color:var(--muted);font-weight:650}
.status-item span{overflow-wrap:anywhere}
.report-bars{display:grid;gap:10px}
.report-bar{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  gap:6px;
  padding:12px;
  border:1px solid var(--tone-border);
  border-radius:var(--radius-sm);
  background:linear-gradient(145deg,var(--tone-a),var(--tone-b));
  box-shadow:6px 10px 18px var(--tone-shadow),inset 1px 1px 7px rgba(255,255,255,.78);
  transition:box-shadow var(--ease),border-color var(--ease);
}
.report-bar::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--tone-accent);
  opacity:.78;
  z-index:1;
}
.report-bar > *{position:relative;z-index:3}
.report-bar div{display:flex;align-items:center;justify-content:space-between;gap:12px}
.report-bar span{color:var(--muted);font-weight:800}
.report-bar i{
  display:block;
  width:100%;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--tone-accent) var(--bar),rgba(255,255,255,.58) var(--bar));
  box-shadow:inset 1px 1px 5px rgba(255,255,255,.76);
}

.form-control,.form-select,textarea.form-control,input.form-control{
  min-height:44px;
  border:1px solid #B8D2E8!important;
  border-radius:var(--radius-sm)!important;
  background:#F3FAFF!important;
  color:var(--ink)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(58,144,194,.08),
    0 2px 7px rgba(58,144,194,.055)!important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:border-color var(--ease),box-shadow var(--ease),background var(--ease);
}
textarea.form-control{min-height:96px}
.form-control:focus,.form-select:focus{
  border-color:var(--brand)!important;
  background:#ffffff!important;
  box-shadow:0 0 0 4px rgba(14,165,233,.18),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
.form-control:user-invalid,.form-select:user-invalid{
  border-color:#fca5a5!important;
  box-shadow:0 0 0 4px rgba(220,38,38,.10)!important;
}
.form-control::placeholder{color:#94a3b8}

.alert{
  border-radius:var(--radius);
  border:1px solid var(--glass-border);
  background-color:rgba(255,255,255,.72);
  box-shadow:var(--shadow-sm),inset 1px 1px 5px rgba(255,255,255,.72);
  backdrop-filter:blur(12px) saturate(1.04);
  -webkit-backdrop-filter:blur(12px) saturate(1.04);
}
.ai-preview{
  min-height:88px;
  max-height:360px;
  overflow:auto;
  white-space:pre-wrap;
  padding:14px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:var(--radius);
  background:rgba(255,255,255,.58);
  color:#183A59;
  box-shadow:inset 1px 1px 7px rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
}
.ai-preview.is-loading{color:#1A5C91;background:var(--brand-soft)}
.ai-preview.is-success{animation:preview-in 180ms cubic-bezier(.2,.8,.2,1)}
.ai-preview[contenteditable="true"]{background:#fff;border-color:var(--brand);box-shadow:0 0 0 4px rgba(14,165,233,.18)}
.ai-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.ai-action-state{font-size:13px;color:var(--success);font-weight:800}
@keyframes preview-in{from{transform:translateY(4px);opacity:.72}to{transform:translateY(0);opacity:1}}
@keyframes glass-sweep{
  0%{opacity:0;transform:translateX(0)}
  12%{opacity:.78}
  70%{opacity:.78}
  100%{opacity:0;transform:translateX(238%)}
}

.timeline{display:grid;gap:10px}
.timeline div{
  position:relative;
  padding:12px 12px 12px 16px;
  border:1px solid var(--glass-border);
  border-left:4px solid var(--brand);
  border-radius:var(--radius);
  background:rgba(255,255,255,.70);
  box-shadow:var(--shadow-sm),inset 1px 1px 5px rgba(255,255,255,.72);
  backdrop-filter:blur(10px) saturate(1.04);
  -webkit-backdrop-filter:blur(10px) saturate(1.04);
}
.timeline span{display:block;color:var(--muted);font-size:13px}

.mobile-nav{display:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .metric:hover::after,.list-row:hover::after,.empty:hover::after,
  .status-item:hover::after,.report-bar:hover::after,.kanban-card:hover::after,.capture-card:hover::after{
    animation-duration:1.35s!important;
    animation-iteration-count:infinite!important;
    animation-timing-function:cubic-bezier(.2,.8,.2,1)!important;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .auth-card,.topbar,.metric,.panel,.list-row,.empty,.kanban-column,.kanban-card,.status-item,.page-note,.capture-card,.form-control,.form-select,.alert,.timeline div,.ai-preview,.mobile-nav,.lang-toggle{background:#fff!important}
  .sidebar{background:#172235!important}
}
@media (max-width: 820px){
  body{font-size:15px}
  .app-shell{display:block}
  .sidebar{display:none}
  .topbar{min-height:56px;padding:0 14px}
  .topbar-actions{gap:6px}
  .lang-toggle button{min-width:32px}
  .page{padding:16px 12px 92px}
  .page-title{align-items:flex-start;flex-direction:column;gap:10px}
  .page-title h1{font-size:24px}
  .metric-grid,.filter-bar,.reference-form,.reference-row,.product-form,.product-row,.team-form,.team-row,.contact-row,.form-grid,.detail-grid,.chart-grid{grid-template-columns:1fr}
  .sort-input,.form-control-color{max-width:none;width:100%}
  .calendar-create{grid-template-columns:1fr}
  .calendar-form{grid-template-columns:1fr}
  .calendar-form label:first-child,.calendar-form label:nth-child(6){grid-column:auto}
  .calendar-grid{grid-template-columns:repeat(14,minmax(152px,1fr));margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}
  .import-form{grid-template-columns:1fr}
  .status-grid{grid-template-columns:1fr}
  .capture-grid{grid-template-columns:1fr}
  .kanban-board{grid-template-columns:repeat(4,240px);margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}
  .status-form{grid-template-columns:1fr}
  .metric,.panel,.list-row,.empty{padding:14px}
  .mobile-nav{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:6px;
    position:fixed;
    left:8px;
    right:8px;
    bottom:8px;
    z-index:10;
    padding:8px;
    background:linear-gradient(145deg,rgba(196,226,255,.58),rgba(240,231,223,.34));
    border:1px solid rgba(14,165,233,.32);
    border-radius:var(--radius-lg);
    box-shadow:14px 18px 34px rgba(35,114,184,.18),inset 1px 1px 9px rgba(255,255,255,.50),inset -6px -8px 18px rgba(35,114,184,.09);
    backdrop-filter:blur(22px) saturate(1.16);
    -webkit-backdrop-filter:blur(22px) saturate(1.16);
  }
  .mobile-nav a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:6px 4px;
    border-radius:var(--radius-sm);
    color:#334155;
    font-size:12px;
    font-weight:800;
    background:rgba(255,255,255,.58);
    box-shadow:6px 10px 18px rgba(35,114,184,.06),inset 1px 1px 7px rgba(255,255,255,.78);
    backdrop-filter:blur(18px) saturate(1.12);
    -webkit-backdrop-filter:blur(18px) saturate(1.12);
    transition:background var(--ease),color var(--ease),transform var(--ease),box-shadow var(--ease);
  }
  .mobile-nav a:hover{background:rgba(255,255,255,.68)}
  .mobile-nav a:active{
    transform:translateY(2px) scale(.975);
    box-shadow:inset 4px 5px 10px rgba(35,114,184,.16),inset -3px -3px 8px rgba(255,255,255,.68);
  }
  .mobile-nav a[aria-current="page"]{
    background:rgba(255,255,255,.72);
    color:#1A5C91;
    box-shadow:inset 2px 3px 7px rgba(35,114,184,.12),inset -3px -3px 8px rgba(255,255,255,.74);
  }
  .mobile-nav .primary{
    background:#0EA5E9;
    color:var(--brand-ink);
    box-shadow:0 2px 5px rgba(14,165,233,.24);
  }
  .mobile-nav .primary[aria-current="page"]{background:#0EA5E9;box-shadow:0 2px 5px rgba(14,165,233,.24)}
  .form-actions{
    position:static;
    margin-left:-14px;
    margin-right:-14px;
    margin-bottom:-14px;
    padding:12px 14px;
    background:rgba(255,255,255,.94);
    border-top:1px solid var(--border);
    backdrop-filter:blur(12px) saturate(1.05);
    -webkit-backdrop-filter:blur(12px) saturate(1.05);
  }
  .form-actions .btn{width:100%}
  .form-grid label.full textarea.form-control{
    min-height:156px;
  }
}