/* Matrixgo Executive Studio preview.
   A shadcn-inspired visual pass: quiet surfaces, generous spacing, precise borders. */
:root{
  --bg:#070705;
  --bg-soft:#0b0b09;
  --panel:#10100d;
  --panel-2:#15130f;
  --ink:#faf7ef;
  --muted:#a8a197;
  --muted-2:#746d64;
  --line:rgba(255,255,255,.095);
  --line-strong:rgba(226,170,75,.26);
  --orange:#f58714;
  --orange-soft:rgba(245,135,20,.11);
  --gold:#d9a441;
  --gold-2:#f4c66f;
  --cyan:#32e1d3;
  --pink:#ef476f;
  --violet:#a78bfa;
  --red:#ff657d;
  --shadow:0 18px 60px rgba(0,0,0,.34);
  --radius:20px;
}

*{
  box-sizing:border-box;
}

body{
  color:var(--ink);
  background:
    radial-gradient(circle at 12% -8%,rgba(245,135,20,.22),transparent 27%),
    radial-gradient(circle at 78% 0%,rgba(217,164,65,.09),transparent 30%),
    linear-gradient(180deg,#090806 0%,#080806 45%,#050504 100%);
  font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;
  font-variant-numeric:tabular-nums;
}

body:before{
  opacity:.10;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(180deg,black 0%,transparent 78%);
}

body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 45% 0%,rgba(255,255,255,.055),transparent 32%),
    linear-gradient(115deg,transparent 0 42%,rgba(217,164,65,.035) 42.2%,transparent 42.9% 100%);
  opacity:.75;
}

.topbar{
  position:relative;
  align-items:center;
  min-height:210px;
  padding:42px 4.6vw 38px;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(12,11,8,.92),rgba(9,8,6,.78)),
    radial-gradient(circle at 9% 34%,rgba(245,135,20,.20),transparent 25%);
  box-shadow:0 26px 80px rgba(0,0,0,.30);
  overflow:hidden;
}

.topbar:before{
  content:"";
  position:absolute;
  inset:22px 4.4vw;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.045);
  border-radius:32px;
  background:linear-gradient(135deg,rgba(255,255,255,.035),transparent 42%);
}

.topbar:after{
  left:4.8vw;
  bottom:-1px;
  width:min(520px,40vw);
  height:1px;
  background:linear-gradient(90deg,var(--gold-2),rgba(245,135,20,.55),transparent);
  box-shadow:0 0 30px rgba(217,164,65,.34);
}

.brand{
  position:relative;
  z-index:1;
  min-width:620px;
  gap:26px;
  align-items:center;
}

.logo-shell{
  position:relative;
  display:grid;
  width:128px;
  height:128px;
  place-items:center;
  padding:12px;
  overflow:visible;
  border:1px solid rgba(244,198,111,.58);
  border-radius:34px;
  background:#fffaf1;
  box-shadow:
    0 22px 64px rgba(245,135,20,.18),
    0 0 0 1px rgba(255,255,255,.15),
    inset 0 0 0 1px rgba(255,255,255,.75);
}

.logo-shell:after{
  content:"";
  position:absolute;
  inset:-8px;
  z-index:-1;
  border-radius:40px;
  background:linear-gradient(135deg,rgba(245,135,20,.42),rgba(217,164,65,.08),transparent 70%);
  filter:blur(12px);
}

.logo-shell img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transform:none;
}

.eyebrow{
  margin:0;
  color:var(--gold);
  font-size:11px;
  font-weight:850;
  letter-spacing:4.6px;
}

h1{
  margin:10px 0 10px;
  color:#fff9ef;
  font-size:46px;
  line-height:1.05;
  letter-spacing:.4px;
  text-shadow:0 18px 50px rgba(0,0,0,.40);
}

.subtitle{
  max-width:620px;
  margin:0;
  color:#b5aca0;
  font-size:15px;
  letter-spacing:1.4px;
  line-height:1.55;
}

.header-actions{
  position:relative;
  z-index:1;
  max-width:900px;
  justify-content:flex-end;
  gap:12px;
  padding-top:6px;
}

.user-badge,.sync-status,.button{
  border-radius:999px;
}

.user-badge{
  width:max-content;
  max-width:230px;
  padding:11px 15px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  text-align:right;
}

.user-badge b,.user-badge span{
  white-space:nowrap;
}

.user-badge b{
  color:#fff6e8;
  font-size:12px;
}

.user-badge span{
  color:#928a80;
  font-size:10px;
}

.sync-status{
  height:43px;
  padding:0 16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  color:#c4baad;
}

.pulse{
  width:7px;
  height:7px;
  background:var(--cyan);
  box-shadow:0 0 0 4px rgba(50,225,211,.10),0 0 18px rgba(50,225,211,.45);
}

.button{
  min-height:43px;
  padding:0 18px;
  border:1px solid var(--line);
  color:#e8dfd2;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}

.button:hover,.quick-range button:hover,.tab:hover{
  transform:translateY(-1px);
}

.button.primary{
  color:#1c1205;
  border-color:rgba(255,210,126,.72);
  background:linear-gradient(135deg,#ffe0a4 0%,#ffb040 54%,var(--orange) 100%);
  box-shadow:0 18px 34px rgba(245,135,20,.24),inset 0 1px 0 rgba(255,255,255,.44);
}

.button.secondary:hover{
  border-color:rgba(244,198,111,.36);
  background:rgba(244,198,111,.065);
}

main{
  max-width:1560px;
  padding:38px 3.4vw 52px;
}

.panel{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),
    rgba(15,15,12,.88);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(18px);
}

.filters{
  display:grid;
  grid-template-columns:repeat(6,minmax(130px,1fr)) minmax(260px,1.55fr);
  align-items:end;
  gap:16px;
  padding:22px;
}

.filter-title{
  grid-column:1/-1;
  padding-bottom:4px;
  color:#fff3df;
  font-size:14px;
}

.section-index{
  margin-right:10px;
  color:var(--gold);
  letter-spacing:2.2px;
}

label{
  gap:8px;
  color:#8f877d;
  font-size:10px;
  letter-spacing:.4px;
}

input,select{
  height:44px;
  width:100%;
  min-width:0;
  border:1px solid rgba(255,255,255,.085);
  border-radius:12px;
  background:#090907;
  color:#f5efe5;
  padding:0 12px;
}

input:focus,select:focus{
  border-color:rgba(244,198,111,.62);
  box-shadow:0 0 0 3px rgba(217,164,65,.12);
}

.search-label{
  grid-column:auto;
}

.quick-range{
  grid-column:1/-1;
  justify-self:start;
  display:flex;
  gap:6px;
  padding:4px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}

.quick-range button,.view-toggle button{
  height:36px;
  min-width:64px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#aea59a;
}

.quick-range button:hover,.view-toggle button:hover{
  background:rgba(244,198,111,.10);
  color:#fff2df;
}

.kpi-grid{
  grid-template-columns:1.45fr repeat(4,1fr);
  gap:18px;
  margin:22px 0;
}

.kpi{
  min-height:170px;
  padding:22px;
  overflow:hidden;
}

.kpi:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(circle at 100% 100%,rgba(244,198,111,.09),transparent 32%);
}

.kpi.accent{
  border-color:rgba(244,198,111,.34);
  background:
    linear-gradient(135deg,rgba(244,198,111,.18),rgba(15,15,12,.86) 58%),
    rgba(15,15,12,.90);
}

.kpi-code{
  display:block;
  margin-bottom:20px;
  color:#796f63;
  font-size:9px;
  font-weight:850;
  letter-spacing:2.4px;
}

.accent .kpi-code{
  color:var(--gold-2);
}

.kpi p{
  margin:0 0 10px;
  color:#b2a89b;
  font-size:12px;
}

.kpi h2{
  margin:0 0 12px;
  color:#fff8ed;
  font-size:30px;
  letter-spacing:-.7px;
}

.kpi.accent h2{
  font-size:38px;
}

.kpi small{
  color:#837a70;
  font-size:11px;
  line-height:1.6;
}

.up{color:var(--cyan)!important}
.down{color:var(--pink)!important}

.chart-grid{
  grid-template-columns:minmax(0,1.35fr) minmax(420px,1fr) minmax(330px,.82fr);
  gap:18px;
}

.chart-card{
  min-height:390px;
  padding:24px;
  overflow:hidden;
}

.card-title h3{
  margin:8px 0 14px;
  color:#fff5e6;
  font-size:18px;
}

.card-title strong{
  color:var(--gold);
  font-size:12px;
}

.trend-legend{
  gap:18px;
  color:#a79f94;
  font-size:12px;
}

.trend-legend i{
  width:22px;
  height:3px;
  border-radius:999px;
}

.trend-hint,.business-period,.table-summary,footer{
  color:#7f756a;
}

.chart{
  height:282px;
  margin-top:10px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.004)),
    radial-gradient(circle at 52% 18%,rgba(50,225,211,.07),transparent 34%);
}

.axis{
  stroke:rgba(255,255,255,.10);
}

.trend-line{
  stroke-width:3;
  filter:drop-shadow(0 0 8px rgba(50,225,211,.28));
}

.trend-line.b{
  filter:drop-shadow(0 0 8px rgba(239,71,111,.24));
}

.donut-wrap{
  display:grid;
  grid-template-columns:minmax(160px,.56fr) minmax(260px,1fr);
  min-height:282px;
  align-items:center;
  gap:24px;
}

.donut{
  width:168px;
  height:168px;
  filter:drop-shadow(0 18px 38px rgba(0,0,0,.30));
}

.donut:after{
  inset:34px;
  background:#10100d;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

.donut-center{
  inset:43px;
}

.donut-center b{
  color:#fff4e4;
  font-size:16px;
}

.donut-center span{
  color:#857b70;
  font-size:10px;
}

.category-legend{
  width:100%;
  gap:10px;
}

.category-row{
  grid-template-columns:8px minmax(0,1fr);
  gap:10px;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:16px;
  background:rgba(255,255,255,.026);
}

.category-row:hover{
  border-color:rgba(244,198,111,.28);
  background:rgba(244,198,111,.06);
}

.category-row b{
  color:#fff4e6;
  font-size:14px;
}

.category-row span{
  color:#efe6d8;
  font-size:13px;
}

.category-row small{
  color:#8b8176;
  font-size:11px;
}

.category-compare{
  grid-column:2;
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
  min-width:0;
  text-align:left;
}

.category-compare span,.category-compare em{
  font-size:11px;
  font-style:normal;
  white-space:normal;
  overflow-wrap:anywhere;
}

.bar-row{
  grid-template-columns:60px 1fr 82px;
  gap:12px;
}

.bar-track{
  height:8px;
  background:rgba(255,255,255,.075);
}

.bar-fill{
  background:linear-gradient(90deg,var(--gold),var(--orange),var(--pink));
}

.bar-main small{
  margin-top:2px;
}

.tabs-panel{
  margin-top:18px;
  padding:0 22px 20px;
}

.tabs{
  gap:24px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.tab{
  padding:19px 0;
  color:#827a70;
  font-weight:850;
}

.tab.active{
  border-bottom-color:var(--gold);
  color:#fff5e6;
}

.table-summary{
  padding:16px 0;
  font-size:12px;
}

.table-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.table-tools .table-summary{
  flex:1;
  min-width:0;
}

.table-shot-btn{
  min-height:38px;
  padding:0 18px;
  border-radius:999px;
  white-space:nowrap;
  font-size:13px;
}

.table-shot-btn[disabled]{
  opacity:.62;
  cursor:progress;
}

.table-scroll{
  max-height:410px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  overflow:auto;
}

table{
  font-size:13px;
}

th{
  background:#14130f;
  color:#948a7e;
  font-size:11px;
}

th,td{
  padding:14px 13px;
  border-bottom:1px solid rgba(255,255,255,.065);
}

td{
  color:#e4ddd2;
}

tr:hover td{
  background:rgba(244,198,111,.045);
}

footer{
  padding-top:18px;
  font-size:11px;
}

.login-screen{
  padding:28px;
  background:
    radial-gradient(circle at 18% 12%,rgba(245,135,20,.24),transparent 30%),
    radial-gradient(circle at 82% 18%,rgba(50,225,211,.09),transparent 28%),
    rgba(7,7,5,.96);
}

.login-stage{
  display:grid;
  grid-template-columns:minmax(420px,1.12fr) minmax(380px,.88fr);
  width:min(1080px,100%);
  min-height:650px;
  overflow:hidden;
  border-radius:34px;
}

.login-characters{
  position:relative;
  display:flex;
  min-height:650px;
  flex-direction:column;
  justify-content:space-between;
  padding:34px;
  overflow:hidden;
  border-right:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 25% 20%,rgba(245,135,20,.24),transparent 30%),
    linear-gradient(145deg,rgba(244,198,111,.15),rgba(255,255,255,.02) 45%,rgba(50,225,211,.06));
}

.login-characters:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:32px 32px;
}

.login-brand-mini{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff4e5;
  font-size:13px;
  font-weight:850;
  letter-spacing:2.6px;
}

.spark-icon{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(255,255,255,.065);
  color:var(--gold-2);
}

.characters-scene{
  position:relative;
  z-index:2;
  width:min(520px,100%);
  height:380px;
  margin:20px auto 0;
}

.character{
  --look-x:0px;
  --look-y:0px;
  --lean:0deg;
  position:absolute;
  bottom:0;
  transform:skewX(var(--lean));
  transform-origin:bottom center;
  transition:height .55s ease,transform .28s ease,left .55s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 28px 48px rgba(0,0,0,.18);
}

.character-tall{
  left:76px;
  z-index:1;
  width:168px;
  height:345px;
  border-radius:24px 24px 0 0;
}

.character-slim{
  left:238px;
  z-index:2;
  width:120px;
  height:278px;
  border-radius:22px 22px 0 0;
}

.character-dome{
  left:0;
  z-index:3;
  width:228px;
  height:190px;
  border-radius:120px 120px 0 0;
}

.character-round{
  left:320px;
  z-index:4;
  width:142px;
  height:228px;
  border-radius:78px 78px 0 0;
}

.character.gold{
  background:linear-gradient(180deg,#f7c15c,#d8891c);
}

.character.ink{
  background:linear-gradient(180deg,#2b2923,#0f0e0b);
}

.character.orange{
  background:linear-gradient(180deg,#ffb454,#f58714);
}

.character.amber{
  background:linear-gradient(180deg,#ffe39a,#d9a441);
}

.eyes,.pupils{
  position:absolute;
  display:flex;
  gap:20px;
  transform:translate(var(--look-x),var(--look-y));
  transition:transform .10s ease-out,left .35s ease,top .35s ease;
}

.eyes{
  left:42px;
  top:38px;
}

.character-slim .eyes{
  left:28px;
  top:32px;
  gap:16px;
}

.pupils{
  left:82px;
  top:88px;
  gap:28px;
}

.character-round .pupils{
  left:52px;
  top:42px;
  gap:22px;
}

.eyes i{
  display:grid;
  width:19px;
  height:19px;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:#fff9ed;
}

.character-slim .eyes i{
  width:17px;
  height:17px;
}

.eyes i:after,.pupils i{
  content:"";
  display:block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#22180f;
}

.pupils i{
  width:12px;
  height:12px;
}

.character-round b{
  position:absolute;
  left:42px;
  top:92px;
  width:58px;
  height:4px;
  border-radius:99px;
  background:#22180f;
  transform:translate(var(--look-x),var(--look-y));
}

.login-characters p{
  position:relative;
  z-index:2;
  max-width:420px;
  margin:0;
  color:#bfb5a7;
  font-size:13px;
  line-height:1.8;
}

.login-screen.is-typing .character-tall,
.login-screen.has-password:not(.show-password) .character-tall{
  left:106px;
  height:385px;
  transform:skewX(calc(var(--lean) - 8deg));
}

.login-screen.is-typing .character-slim,
.login-screen.has-password:not(.show-password) .character-slim{
  transform:skewX(calc(var(--lean) + 6deg));
}

.login-screen.show-password .character-tall .eyes,
.login-screen.show-password .character-slim .eyes{
  transform:translate(-5px,-4px);
}

.login-screen.show-password .character-dome .pupils,
.login-screen.show-password .character-round .pupils{
  transform:translate(-6px,-4px);
}

.login-screen.has-password:not(.show-password) .eyes i{
  height:3px;
  margin-top:8px;
}

.login-screen.blink .eyes i{
  height:3px;
  margin-top:8px;
}

.login-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:17px;
  padding:46px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.016)),
    rgba(8,8,6,.62);
}

.login-card,.users-modal,.password-modal{
  border-radius:24px;
}

.login-card-head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:4px;
}

.login-card .logo-shell{
  width:72px;
  height:72px;
  padding:7px;
  border-radius:22px;
}

.login-card h2{
  margin:7px 0 0;
  color:#fff4e5;
  font-size:25px;
}

.login-copy{
  margin:0 0 8px;
  color:#a89f92;
  font-size:13px;
  line-height:1.8;
}

.login-card label{
  gap:8px;
  color:#a79d91;
  font-size:12px;
}

.login-card input{
  width:100%;
  height:48px;
  border-radius:15px;
}

.password-field{
  position:relative;
  display:block;
}

.password-field input{
  padding-right:48px;
}

.password-field button{
  position:absolute;
  top:50%;
  right:9px;
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border:0;
  border-radius:11px;
  background:transparent;
  color:#8f867b;
  cursor:pointer;
}

.password-field button:hover{
  background:rgba(244,198,111,.10);
  color:#fff4e5;
}

.password-field svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.password-field .eye-off{
  display:none;
}

.login-screen.show-password .password-field .eye-open{
  display:none;
}

.login-screen.show-password .password-field .eye-off{
  display:block;
}

.login-assist{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:#81786e;
  font-size:12px;
}

.remember-check{
  display:flex!important;
  align-items:center;
  grid-template-columns:none;
  gap:8px!important;
  cursor:pointer;
}

.remember-check input{
  width:15px;
  height:15px;
  min-width:15px;
  accent-color:var(--orange);
}

.login-card .button.primary{
  width:100%;
  height:50px;
  margin-top:4px;
}

.login-card small{
  min-height:18px;
  color:var(--pink);
  font-size:12px;
}

@media(max-width:1500px){
  .filters{
    grid-template-columns:repeat(4,minmax(130px,1fr));
  }
  .search-label{
    grid-column:span 2;
  }
  .quick-range{
    grid-column:span 2;
    justify-self:end;
  }
  .chart-grid{
    grid-template-columns:1.2fr 1fr;
  }
  .chart-card:nth-child(3){
    grid-column:1/-1;
  }
}

@media(max-width:1100px){
  .topbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .brand{
    min-width:0;
  }
  .filters{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .search-label,.quick-range{
    grid-column:1/-1;
    justify-self:stretch;
  }
  .kpi-grid,.chart-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:720px){
  .topbar{
    padding:28px 22px;
  }
  .brand{
    align-items:flex-start;
  }
  .logo-shell{
    width:88px;
    height:88px;
    border-radius:24px;
  }
  h1{
    font-size:28px;
  }
  main{
    padding:24px 16px 36px;
  }
  .filters{
    grid-template-columns:1fr;
  }
  .donut-wrap{
    grid-template-columns:1fr;
  }
}

/* V2: stronger shadcn-style studio direction with more breathing room and motion. */
:root{
  --bg:#050504;
  --panel:#0c0c0a;
  --panel-2:#11100d;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(244,198,111,.24);
  --shadow:0 26px 90px rgba(0,0,0,.42);
  --radius:26px;
}

@keyframes mx-float-in{
  from{opacity:0;transform:translateY(18px) scale(.992)}
  to{opacity:1;transform:none}
}

@keyframes mx-ambient{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.58}
  50%{transform:translate3d(-18px,10px,0) scale(1.04);opacity:.78}
}

@keyframes mx-pulse-line{
  0%,100%{opacity:.35;transform:scaleX(.78)}
  50%{opacity:.9;transform:scaleX(1)}
}

body{
  background:
    radial-gradient(circle at 18% 0%,rgba(245,135,20,.18),transparent 30%),
    radial-gradient(circle at 82% 4%,rgba(50,225,211,.07),transparent 27%),
    linear-gradient(180deg,#060604 0%,#050504 44%,#030303 100%);
}

body:before{
  opacity:.08;
  background-size:88px 88px;
}

body:after{
  animation:mx-ambient 9s ease-in-out infinite;
}

.topbar{
  width:min(1560px,calc(100% - 72px));
  min-height:236px;
  margin:34px auto 0;
  padding:44px 44px;
  border:1px solid var(--line);
  border-radius:38px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.018) 42%,rgba(255,255,255,.032)),
    radial-gradient(circle at 7% 18%,rgba(245,135,20,.20),transparent 30%),
    rgba(10,10,8,.84);
  box-shadow:0 30px 100px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.08);
}

.topbar:before{
  inset:18px;
  border-radius:30px;
  border-color:rgba(255,255,255,.055);
  background:
    linear-gradient(110deg,transparent 0 52%,rgba(244,198,111,.055) 52.4%,transparent 53.1% 100%),
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 44%);
}

.topbar:after{
  left:44px;
  bottom:28px;
  width:320px;
  transform-origin:left center;
  animation:mx-pulse-line 4.6s ease-in-out infinite;
}

.brand{
  min-width:640px;
  gap:30px;
}

.logo-shell{
  width:138px;
  height:138px;
  border-radius:38px;
  transform:translateZ(0);
}

.logo-shell:after{
  inset:-11px;
  border-radius:46px;
  opacity:.9;
}

h1{
  margin:12px 0;
  font-size:52px;
  letter-spacing:.2px;
}

.subtitle{
  font-size:16px;
  color:#c0b6a8;
}

.header-actions{
  max-width:790px;
  gap:14px;
}

.user-badge,.sync-status,.button{
  min-height:46px;
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
}

.theme-tabs{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:46px;
  padding:4px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(255,255,255,.045);
  color:#e8dfd2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.theme-tab{
  display:inline-flex;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  gap:0;
  overflow:hidden;
  border:0;
  border-radius:14px;
  background:transparent;
  color:#9e9589;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  transition:width .42s cubic-bezier(.2,.8,.2,1),gap .42s cubic-bezier(.2,.8,.2,1),padding .42s cubic-bezier(.2,.8,.2,1),color .18s ease,background .18s ease,transform .16s ease;
}

.theme-tab:hover{
  transform:translateY(-1px);
  background:rgba(244,198,111,.065);
  color:#fff2df;
}

.theme-tab.active{
  width:82px;
  gap:8px;
  padding:0 12px;
  background:rgba(244,198,111,.12);
  color:#fff4e4;
}

.theme-tab svg{
  width:19px;
  height:19px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.theme-tab span{
  width:0;
  opacity:0;
  white-space:nowrap;
  transition:width .38s cubic-bezier(.2,.8,.2,1),opacity .18s ease;
}

.theme-tab.active span{
  width:auto;
  opacity:1;
}

.theme-separator{
  width:1px;
  height:24px;
  border-radius:99px;
  background:rgba(255,255,255,.11);
}

.button{
  padding:0 20px;
}

main{
  max-width:1560px;
  padding:36px 0 60px;
}

.panel{
  border-radius:var(--radius);
  background:
    linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.018)),
    rgba(12,12,10,.88);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.065);
  animation:mx-float-in .55s ease both;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.panel:hover{
  border-color:rgba(244,198,111,.22);
  box-shadow:0 32px 110px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.075);
}

.filters{
  grid-template-columns:repeat(4,minmax(150px,1fr)) minmax(310px,1.4fr) auto;
  gap:18px;
  padding:26px;
}

.filter-title{
  margin-bottom:2px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.065);
}

.filter-title span{
  display:flex;
  align-items:center;
  gap:8px;
}

label{
  gap:9px;
  font-size:11px;
}

input,select{
  height:46px;
  border-radius:14px;
  background:rgba(3,3,3,.56);
}

.search-label{
  grid-column:auto;
}

.quick-range{
  grid-column:auto;
  align-self:end;
  justify-self:end;
  height:46px;
  align-items:center;
}

.quick-range button{
  height:36px;
  padding:0 14px;
}

.kpi-grid{
  gap:20px;
  margin:24px 0;
}

.kpi{
  min-height:188px;
  padding:26px;
}

.kpi-code{
  margin-bottom:26px;
}

.kpi h2{
  font-size:34px;
}

.kpi.accent h2{
  font-size:44px;
}

.chart-grid{
  grid-template-columns:minmax(0,1.25fr) minmax(470px,.92fr);
  gap:20px;
}

.chart-card{
  min-height:430px;
  padding:28px;
}

.chart-card.wide{
  grid-column:span 1;
}

.chart-card:nth-child(3){
  grid-column:1/-1;
  min-height:260px;
}

.chart-card:nth-child(3) .bar-list{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:16px;
}

.chart-card:nth-child(3) .business-period{
  grid-column:1/-1;
}

.card-title h3{
  font-size:20px;
}

.chart{
  height:306px;
  border-radius:22px;
}

.donut-wrap{
  grid-template-columns:1fr;
  gap:22px;
}

.donut{
  width:196px;
  height:196px;
  margin:0 auto;
}

.donut:after{
  inset:40px;
}

.donut-center{
  inset:52px;
}

.donut-center b{
  font-size:18px;
}

.category-row{
  padding:15px 16px;
  border-radius:18px;
}

.category-row b{
  font-size:15px;
}

.category-row span{
  font-size:14px;
}

.tabs-panel{
  margin-top:20px;
  padding:0 26px 26px;
}

.tabs{
  gap:30px;
}

.tab{
  padding:22px 0;
}

.table-scroll{
  border-radius:20px;
}

th,td{
  padding:16px 15px;
}

@media(max-width:1500px){
  .topbar{
    width:calc(100% - 44px);
    padding:38px;
  }
  main{
    padding-left:22px;
    padding-right:22px;
  }
  .filters{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .search-label{
    grid-column:span 2;
  }
  .quick-range{
    grid-column:span 2;
    justify-self:end;
  }
  .chart-grid{
    grid-template-columns:1fr;
  }
  .chart-card:nth-child(3) .bar-list{
    grid-template-columns:1fr;
  }
  .login-stage{
    grid-template-columns:minmax(360px,.95fr) minmax(360px,1fr);
  }
  .characters-scene{
    transform:scale(.88);
    transform-origin:center bottom;
  }
  .login-card{
    padding:38px;
  }
}

@media(max-width:920px){
  .login-stage{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .login-characters{
    min-height:260px;
    padding:24px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .characters-scene{
    height:220px;
    margin-top:0;
    transform:scale(.58);
  }
  .login-characters p{
    display:none;
  }
}

@media(max-width:620px){
  .login-screen{
    padding:14px;
  }
  .login-characters{
    display:none;
  }
  .login-card{
    padding:26px;
  }
  .login-card-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .login-assist{
    align-items:flex-start;
    flex-direction:column;
  }
}

body.theme-light{
  --bg:#f7f2e8;
  --bg-soft:#fbf7ef;
  --panel:#fffdf8;
  --panel-2:#f4ecde;
  --ink:#211a12;
  --muted:#766b5e;
  --muted-2:#9a8d7d;
  --line:rgba(55,42,24,.11);
  --line-strong:rgba(190,128,36,.28);
  --orange-soft:rgba(245,135,20,.12);
  --shadow:0 24px 70px rgba(80,56,25,.13);
  color:#211a12;
  background:
    radial-gradient(circle at 15% 0%,rgba(245,135,20,.20),transparent 31%),
    radial-gradient(circle at 82% 4%,rgba(50,225,211,.12),transparent 28%),
    linear-gradient(180deg,#fff9ee 0%,#f8f1e6 46%,#efe6d8 100%);
}

body.theme-light:before{
  opacity:.20;
  background-image:
    linear-gradient(rgba(95,70,36,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(95,70,36,.06) 1px,transparent 1px);
}

body.theme-light:after{
  background:
    radial-gradient(circle at 45% 0%,rgba(255,255,255,.72),transparent 34%),
    linear-gradient(115deg,transparent 0 42%,rgba(217,164,65,.16) 42.2%,transparent 42.9% 100%);
  opacity:.65;
}

body.theme-light .topbar{
  border-color:rgba(90,65,30,.12);
  background:
    linear-gradient(135deg,rgba(255,255,255,.82),rgba(255,250,240,.58) 46%,rgba(255,255,255,.66)),
    radial-gradient(circle at 7% 18%,rgba(245,135,20,.18),transparent 30%),
    rgba(255,251,243,.82);
  box-shadow:0 30px 90px rgba(119,82,33,.15),inset 0 1px 0 rgba(255,255,255,.86);
}

body.theme-light .topbar:before{
  border-color:rgba(90,65,30,.08);
  background:
    linear-gradient(110deg,transparent 0 52%,rgba(217,164,65,.13) 52.4%,transparent 53.1% 100%),
    linear-gradient(180deg,rgba(255,255,255,.58),transparent 44%);
}

body.theme-light .logo-shell{
  border-color:rgba(217,138,40,.42);
  background:#fffaf0;
  box-shadow:
    0 22px 64px rgba(170,112,34,.16),
    0 0 0 1px rgba(255,255,255,.7),
    inset 0 0 0 1px rgba(255,255,255,.85);
}

body.theme-light h1,
body.theme-light .card-title h3,
body.theme-light .kpi h2,
body.theme-light .donut-center b,
body.theme-light .category-row b,
body.theme-light .tab.active{
  color:#21180e;
  text-shadow:none;
}

body.theme-light .subtitle,
body.theme-light .kpi p,
body.theme-light .category-row span,
body.theme-light td{
  color:#5f5448;
}

body.theme-light .eyebrow,
body.theme-light .section-index,
body.theme-light .card-title strong,
body.theme-light .accent .kpi-code{
  color:#b9741e;
}

body.theme-light .user-badge,
body.theme-light .sync-status,
body.theme-light .button,
body.theme-light .theme-tabs,
body.theme-light .panel{
  border-color:rgba(71,50,25,.11);
  background:
    linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.46)),
    rgba(255,252,246,.84);
  box-shadow:0 22px 62px rgba(104,74,37,.11),inset 0 1px 0 rgba(255,255,255,.88);
}

body.theme-light .panel:hover{
  border-color:rgba(190,128,36,.24);
  box-shadow:0 28px 80px rgba(104,74,37,.14),inset 0 1px 0 rgba(255,255,255,.9);
}

body.theme-light .theme-tabs{
  color:#423426;
}

body.theme-light .theme-tab{
  color:#806f5c;
}

body.theme-light .theme-tab:hover,
body.theme-light .theme-tab.active{
  color:#2a2117;
  background:rgba(245,135,20,.10);
}

body.theme-light .theme-separator{
  background:rgba(71,50,25,.12);
}

body.theme-light .button.secondary{
  color:#4a3b2b;
}

body.theme-light .button.primary{
  color:#221507;
  border-color:rgba(217,130,29,.36);
  box-shadow:0 18px 34px rgba(245,135,20,.18),inset 0 1px 0 rgba(255,255,255,.55);
}

body.theme-light label,
body.theme-light .kpi small,
body.theme-light .trend-hint,
body.theme-light .business-period,
body.theme-light .table-summary,
body.theme-light footer,
body.theme-light .donut-center span,
body.theme-light .category-row small,
body.theme-light .user-badge span,
body.theme-light .bar-value{
  color:#8a7c6d;
}

body.theme-light input,
body.theme-light select,
body.theme-light .quick-range,
body.theme-light .table-scroll,
body.theme-light .chart,
body.theme-light .category-row,
body.theme-light .bar-track{
  border-color:rgba(71,50,25,.10);
  background:rgba(255,255,255,.55);
}

body.theme-light input,
body.theme-light select{
  color:#2a2117;
}

body.theme-light input:focus,
body.theme-light select:focus{
  border-color:rgba(190,128,36,.48);
  box-shadow:0 0 0 3px rgba(217,164,65,.18);
}

body.theme-light .quick-range button,
body.theme-light .view-toggle button{
  color:#675a4c;
}

body.theme-light .quick-range button:hover,
body.theme-light .view-toggle button:hover{
  color:#2a2117;
  background:rgba(245,135,20,.10);
}

body.theme-light .kpi.accent{
  border-color:rgba(217,138,40,.28);
  background:
    linear-gradient(135deg,rgba(245,135,20,.16),rgba(255,255,255,.72) 58%),
    rgba(255,252,246,.86);
}

body.theme-light .chart{
  background:
    linear-gradient(180deg,rgba(255,255,255,.64),rgba(255,255,255,.22)),
    radial-gradient(circle at 52% 18%,rgba(50,225,211,.10),transparent 34%);
}

body.theme-light .axis{
  stroke:rgba(71,50,25,.10);
}

body.theme-light .chart text{
  fill:#958675;
}

body.theme-light .dot{
  fill:#fffaf0;
}

body.theme-light .donut:after{
  background:#fffaf0;
  box-shadow:inset 0 0 0 1px rgba(71,50,25,.08);
}

body.theme-light th{
  background:#f6efe4;
  color:#8a7c6d;
}

body.theme-light th,
body.theme-light td{
  border-bottom-color:rgba(71,50,25,.08);
}

body.theme-light tr:hover td{
  background:rgba(245,135,20,.055);
}

body.theme-light .login-screen{
  background:
    radial-gradient(circle at 18% 12%,rgba(245,135,20,.20),transparent 30%),
    radial-gradient(circle at 82% 18%,rgba(50,225,211,.13),transparent 28%),
    rgba(247,242,232,.96);
}

body.theme-light .login-stage{
  border-color:rgba(71,50,25,.10);
  background:
    linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.45)),
    rgba(255,252,246,.90);
}

body.theme-light .login-characters{
  border-right-color:rgba(71,50,25,.08);
  background:
    radial-gradient(circle at 25% 20%,rgba(245,135,20,.18),transparent 30%),
    linear-gradient(145deg,rgba(244,198,111,.22),rgba(255,255,255,.42) 45%,rgba(50,225,211,.10));
}

body.theme-light .login-characters:before{
  opacity:.22;
  background-image:
    linear-gradient(rgba(71,50,25,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(71,50,25,.055) 1px,transparent 1px);
}

body.theme-light .login-brand-mini,
body.theme-light .login-card h2{
  color:#21180e;
}

body.theme-light .spark-icon{
  border-color:rgba(71,50,25,.10);
  background:rgba(255,255,255,.55);
  color:#b9741e;
}

body.theme-light .login-characters p,
body.theme-light .login-copy,
body.theme-light .login-card label,
body.theme-light .login-assist{
  color:#766b5e;
}

body.theme-light .login-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.70),rgba(255,255,255,.35)),
    rgba(255,252,246,.70);
}

body.theme-light .password-field button{
  color:#806f5c;
}

body.theme-light .password-field button:hover{
  background:rgba(245,135,20,.10);
  color:#2a2117;
}

body.theme-light .eyes i{
  background:#fffdf8;
}

/* 2026-06-14 layout polish: keep header controls horizontal, tighten trend card,
   and pair client mix with business ranking on the right side. */
.topbar{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
}

.brand{
  flex:1 1 620px;
  min-width:520px;
}

.header-actions{
  display:flex;
  flex:0 1 760px;
  flex-wrap:wrap;
  align-items:center;
  align-content:center;
  justify-content:flex-end;
  min-width:540px;
  row-gap:12px;
}

.header-actions .button,
.header-actions .sync-status,
.header-actions .user-badge,
.header-actions .theme-tabs{
  flex:0 0 auto;
  white-space:nowrap;
}

.header-actions .button{
  min-width:max-content;
  padding-inline:18px;
  line-height:1;
}

.user-badge{
  width:auto;
  min-width:150px;
  max-width:210px;
}

.sync-status{
  min-width:max-content;
}

.filters{
  grid-template-columns:repeat(6,minmax(128px,1fr)) minmax(240px,1.2fr);
  gap:14px;
}

.quick-range{
  grid-column:auto;
  justify-self:end;
}

.quick-range button{
  min-width:58px;
  white-space:nowrap;
}

.chart-grid{
  grid-template-columns:minmax(0,1.34fr) minmax(420px,.86fr);
  align-items:stretch;
}

.chart-card.wide{
  grid-column:1;
  grid-row:auto;
  min-height:0;
}

.chart-side-stack{
  display:grid;
  grid-column:2;
  grid-template-rows:auto auto;
  gap:20px;
  min-width:0;
}

.chart-side-stack .chart-card{
  min-width:0;
}

.mix-card{
  grid-column:2;
  min-height:360px;
}

.business-card{
  grid-column:2;
  min-height:300px;
}

.chart-card.wide .chart{
  height:430px;
}

.mix-card .donut-wrap{
  min-height:250px;
  grid-template-columns:minmax(150px,.52fr) minmax(230px,1fr);
  gap:20px;
}

.mix-card .donut{
  width:174px;
  height:174px;
}

.business-card .bar-list{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.business-card .business-period{
  grid-column:auto;
}

@media(max-width:1380px){
  .topbar{
    flex-wrap:wrap;
  }
  .brand{
    min-width:0;
  }
  .header-actions{
    flex:1 1 100%;
    min-width:0;
    justify-content:flex-start;
  }
  .filters{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .search-label{
    grid-column:span 2;
  }
  .quick-range{
    grid-column:span 2;
    justify-self:end;
  }
  .chart-grid{
    grid-template-columns:minmax(0,1.25fr) minmax(360px,.78fr);
  }
  .chart-card.wide{
    grid-column:1;
  }
  .chart-side-stack{
    grid-column:2;
  }
  .chart-card.wide .chart{
    height:390px;
  }
  .mix-card .donut-wrap{
    grid-template-columns:1fr;
    min-height:230px;
  }
  .mix-card .donut{
    width:154px;
    height:154px;
  }
}

@media(max-width:1050px){
  .chart-grid{
    grid-template-columns:1fr;
  }
  .chart-card.wide,
  .chart-side-stack{
    grid-column:1;
  }
  .chart-card.wide .chart{
    height:320px;
  }
}

@media(max-width:720px){
  .header-actions{
    justify-content:flex-start;
  }
  .header-actions .button{
    min-height:40px;
    padding-inline:14px;
  }
  .filters{
    grid-template-columns:1fr;
  }
  .search-label,
  .quick-range{
    grid-column:1;
    justify-self:stretch;
  }
  .quick-range{
    justify-content:space-between;
  }
}

/* 2026-06-15 row stack: trend takes one full row; mix and business sit below. */
.chart-grid{
  grid-template-columns:1fr;
  gap:20px;
}

.chart-card.wide{
  grid-column:1;
  grid-row:1;
}

.chart-side-stack{
  grid-column:1;
  grid-row:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto;
  gap:20px;
}

.mix-card,
.business-card{
  grid-column:auto;
  min-height:380px;
}

.chart-card.wide .chart{
  height:360px;
}

.mix-card .donut-wrap{
  grid-template-columns:minmax(180px,.58fr) minmax(260px,1fr);
  min-height:270px;
}

.business-card .bar-list{
  grid-template-columns:1fr;
}

.team-performance{
  display:grid;
  gap:10px;
  margin:0 0 16px;
  padding:0 0 14px;
  border-bottom:1px solid color-mix(in srgb,var(--line) 82%,transparent);
}

.team-performance .business-period{
  margin-bottom:2px;
}

.team-row{
  display:grid;
  gap:8px;
  padding:12px 14px;
  border:1px solid color-mix(in srgb,var(--line) 78%,transparent);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.team-head,
.team-row small{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.team-head b{
  color:var(--text);
  font-size:14px;
}

.team-head span{
  color:var(--text);
  font-weight:800;
}

.team-row small{
  color:var(--muted);
  font-size:11px;
}

.team-row em{
  font-style:normal;
}

.team-zero{
  display:block!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted)!important;
}

@media(max-width:1050px){
  .chart-side-stack{
    grid-template-columns:1fr;
  }
  .chart-card.wide .chart{
    height:320px;
  }
}

/* 2026-06-15 filter row: keep quick ranges in the same row as filters. */
.filters{
  grid-template-columns:
    minmax(150px,.9fr)
    minmax(150px,.9fr)
    minmax(150px,.9fr)
    minmax(150px,.9fr)
    minmax(150px,.9fr)
    minmax(150px,.9fr)
    minmax(210px,1.05fr)
    max-content;
  gap:14px;
  align-items:end;
}

.filters .filter-title{
  grid-column:1 / -1;
}

.filters .search-label{
  grid-column:auto;
}

.filters .quick-range{
  grid-column:auto;
  align-self:end;
  justify-self:end;
  white-space:nowrap;
}

.filters .quick-range button{
  min-width:54px;
  padding-inline:12px;
}

@media(max-width:1500px){
  .filters{
    grid-template-columns:
      repeat(4,minmax(150px,1fr))
      minmax(220px,1.15fr)
      max-content;
  }
  .filters .search-label{
    grid-column:5;
  }
  .filters .quick-range{
    grid-column:6;
  }
}

@media(max-width:1180px){
  .filters{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .filters .search-label{
    grid-column:span 2;
  }
  .filters .quick-range{
    grid-column:span 2;
    justify-self:end;
  }
}

@media(max-width:720px){
  .filters{
    grid-template-columns:1fr;
  }
  .filters .search-label,
  .filters .quick-range{
    grid-column:1;
    justify-self:stretch;
  }
}

/* 2026-06-15 compact filter row: force desktop filters into one visual row. */
@media(min-width:1181px){
  .filters{
    grid-template-columns:
      minmax(118px,130px)
      minmax(118px,130px)
      minmax(126px,138px)
      minmax(104px,116px)
      minmax(126px,138px)
      minmax(126px,138px)
      minmax(168px,1fr)
      minmax(204px,218px) !important;
    gap:10px !important;
  }

  .filters label{
    min-width:0;
  }

  .filters input,
  .filters select{
    min-width:0;
    height:42px;
    padding-inline:10px;
  }

  .filters .search-label{
    grid-column:auto !important;
  }

  .filters .search-label input{
    min-width:0;
  }

  .filters .quick-range{
    grid-column:auto !important;
    width:100%;
    justify-content:space-between;
    padding:3px;
  }

  .filters .quick-range button{
    min-width:0;
    flex:1 1 0;
    height:42px;
    padding-inline:8px;
  }
}

/* 2026-06-16 icon bar: compact icon-first actions with fluid label reveal. */
.header-actions{
  gap:8px;
}

.header-actions .icon-action{
  --icon-size:42px;
  --label-width:84px;
  position:relative;
  display:inline-flex;
  width:var(--icon-size);
  min-width:var(--icon-size);
  height:var(--icon-size);
  min-height:var(--icon-size);
  align-items:center;
  justify-content:flex-start;
  gap:0;
  overflow:hidden;
  padding:0;
  border-radius:14px;
  cursor:pointer;
  transition:
    width .56s cubic-bezier(.16,1,.3,1),
    min-width .56s cubic-bezier(.16,1,.3,1),
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease,
    transform .18s ease,
    box-shadow .22s ease;
}

.header-actions .icon-action:hover,
.header-actions .icon-action:focus-visible{
  width:calc(var(--icon-size) + var(--label-width));
  min-width:calc(var(--icon-size) + var(--label-width));
}

.header-actions .icon-action svg{
  flex:0 0 var(--icon-size);
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.header-actions .icon-action .icon-label{
  display:block;
  flex:0 0 var(--label-width);
  max-width:0;
  overflow:hidden;
  padding-right:0;
  opacity:0;
  color:inherit;
  font-size:13px;
  font-weight:850;
  letter-spacing:-.01em;
  line-height:1;
  white-space:nowrap;
  transition:
    max-width .56s cubic-bezier(.16,1,.3,1),
    padding-right .56s cubic-bezier(.16,1,.3,1),
    opacity .18s ease .08s;
}

.header-actions .icon-action:hover .icon-label,
.header-actions .icon-action:focus-visible .icon-label{
  max-width:var(--label-width);
  padding-right:14px;
  opacity:1;
}

.header-actions .icon-action#manageUsersBtn,
.header-actions .icon-action#changePasswordBtn,
.header-actions .icon-action#clearDataBtn{
  --label-width:78px;
}

.header-actions .icon-action#refreshBtn,
.header-actions .icon-action.upload-action{
  --label-width:76px;
}

.header-actions .icon-action#logoutBtn{
  --label-width:42px;
}

.header-actions .icon-action.danger{
  color:#ff6f8d;
  border-color:rgba(255,70,111,.24);
  background:rgba(255,70,111,.06);
}

.header-actions .icon-action.danger:hover,
.header-actions .icon-action.danger:focus-visible{
  border-color:rgba(255,70,111,.42);
  background:rgba(255,70,111,.11);
}

.header-actions .upload-action{
  color:#1b1206;
}

body.theme-light .header-actions .icon-action{
  color:#4a3b2b;
}

body.theme-light .header-actions .icon-action.primary,
body.theme-light .header-actions .upload-action{
  color:#221507;
}

body.theme-light .header-actions .icon-action.danger{
  color:#d7395d;
  border-color:rgba(215,57,93,.20);
  background:rgba(215,57,93,.055);
}

@media(max-width:720px){
  .header-actions .icon-action{
    --icon-size:40px;
  }
}

/* 2026-06-16 aurora + liquid glass + Linear-style filters + border beam. */
@keyframes matrixgo-aurora-flow{
  0%{background-position:0% 45%, 50% 50%, 100% 55%; transform:translate3d(0,0,0) rotate(0deg)}
  50%{background-position:100% 55%, 20% 45%, 0% 50%; transform:translate3d(-1.5%,1%,0) rotate(1deg)}
  100%{background-position:0% 45%, 50% 50%, 100% 55%; transform:translate3d(0,0,0) rotate(0deg)}
}

@keyframes matrixgo-beam{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}

body{
  background:
    radial-gradient(circle at 16% 3%,rgba(255,168,64,.22),transparent 28%),
    radial-gradient(circle at 85% 0%,rgba(50,225,211,.16),transparent 30%),
    linear-gradient(180deg,#070705 0%,#050505 52%,#030303 100%);
}

body:before{
  opacity:.55;
  background:
    repeating-linear-gradient(100deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.08) 7%,transparent 10%,transparent 12%,rgba(255,255,255,.08) 16%),
    repeating-linear-gradient(100deg,rgba(34,229,231,.34) 10%,rgba(124,92,255,.22) 15%,rgba(55,169,255,.28) 20%,rgba(255,180,88,.24) 25%,rgba(34,229,231,.32) 30%),
    radial-gradient(ellipse at 88% 4%,rgba(245,135,20,.38),transparent 58%);
  background-size:320% 320%,220% 220%,100% 100%;
  background-position:50% 50%;
  filter:blur(18px) saturate(1.22);
  mix-blend-mode:screen;
  mask-image:radial-gradient(ellipse at 100% 0%,black 6%,transparent 74%);
  animation:matrixgo-aurora-flow 38s linear infinite;
}

body:after{
  background:
    linear-gradient(115deg,transparent 0 38%,rgba(255,255,255,.10) 39%,transparent 41% 100%),
    radial-gradient(circle at 54% 10%,rgba(255,255,255,.08),transparent 34%);
  opacity:.88;
}

body.theme-light{
  background:
    radial-gradient(circle at 14% 0%,rgba(255,172,73,.30),transparent 30%),
    radial-gradient(circle at 82% 2%,rgba(50,225,211,.20),transparent 30%),
    linear-gradient(180deg,#fff9ed 0%,#f6edde 48%,#eadfce 100%);
}

body.theme-light:before{
  opacity:.45;
  filter:blur(18px) saturate(1.15);
  mix-blend-mode:multiply;
  background:
    repeating-linear-gradient(100deg,rgba(255,255,255,.50) 0%,rgba(255,255,255,.50) 7%,transparent 10%,transparent 12%,rgba(255,255,255,.50) 16%),
    repeating-linear-gradient(100deg,rgba(34,211,238,.30) 10%,rgba(167,139,250,.18) 15%,rgba(96,165,250,.23) 20%,rgba(251,146,60,.20) 25%,rgba(34,211,238,.28) 30%);
}

.topbar,
.filters,
.chart-card,
.tabs-panel,
.login-stage{
  overflow:hidden;
}

.topbar:before,
.filters:before,
.chart-card:before,
.tabs-panel:before,
.login-stage:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(50,225,211,.55) 18%,rgba(255,170,64,.72) 34%,rgba(167,139,250,.55) 52%,transparent 70%);
  background-size:220% 100%;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  -webkit-mask-composite:xor;
  opacity:.32;
  animation:matrixgo-beam 9s linear infinite;
}

.topbar:hover:before,
.filters:hover:before,
.chart-card:hover:before,
.tabs-panel:hover:before,
.login-stage:hover:before{
  opacity:.58;
}

.button,
.theme-tabs,
.sync-status,
.user-badge,
.quick-range,
input,
select,
.category-row,
.table-scroll{
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
}

.button,
.theme-tabs,
.quick-range,
.filters input,
.filters select{
  border-color:rgba(255,255,255,.16);
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.045)),
    rgba(255,255,255,.045);
  box-shadow:
    0 10px 28px rgba(0,0,0,.16),
    inset 1px 1px 1px rgba(255,255,255,.22),
    inset -1px -1px 1px rgba(255,255,255,.07),
    inset 0 0 16px rgba(255,255,255,.045);
}

.button:hover,
.theme-tab:hover,
.quick-range button:hover{
  filter:brightness(1.08);
  box-shadow:
    0 16px 36px rgba(0,0,0,.20),
    inset 1px 1px 1px rgba(255,255,255,.30),
    inset -1px -1px 1px rgba(255,255,255,.10),
    inset 0 0 20px rgba(255,255,255,.08);
}

.button.primary,
.upload-action{
  background:
    linear-gradient(180deg,rgba(255,238,190,.92),rgba(245,135,20,.82)),
    rgba(255,184,76,.74);
  border-color:rgba(255,223,154,.72);
  box-shadow:
    0 18px 40px rgba(245,135,20,.28),
    inset 1px 1px 1px rgba(255,255,255,.58),
    inset -1px -1px 1px rgba(114,60,4,.28),
    inset 0 0 18px rgba(255,255,255,.16);
}

.filters{
  border-radius:28px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.025)),
    rgba(12,12,10,.62);
}

.filters label{
  position:relative;
  gap:7px;
}

.filters label::before{
  content:"";
  position:absolute;
  left:12px;
  bottom:13px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--gold));
  opacity:.68;
  box-shadow:0 0 14px rgba(50,225,211,.32);
}

.filters input,
.filters select{
  border-radius:999px;
  padding-left:28px;
  color:#f9f2e8;
}

.filters .quick-range{
  border-radius:999px;
  background:rgba(255,255,255,.06);
}

.filters .quick-range button{
  border-radius:999px;
  font-weight:850;
}

.filters .quick-range button:hover{
  color:#fff6e8;
  background:rgba(245,135,20,.18);
}

body.theme-light .button,
body.theme-light .theme-tabs,
body.theme-light .quick-range,
body.theme-light .filters input,
body.theme-light .filters select{
  border-color:rgba(80,55,25,.12);
  background:
    linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.46)),
    rgba(255,251,244,.72);
  box-shadow:
    0 14px 34px rgba(116,78,32,.12),
    inset 1px 1px 1px rgba(255,255,255,.90),
    inset -1px -1px 1px rgba(96,62,25,.08);
}

body.theme-light .filters{
  background:
    linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.38)),
    rgba(255,251,244,.72);
}

body.theme-light .filters input,
body.theme-light .filters select{
  color:#2a2117;
}

/* 2026-06-16 stable action rail: keep the header controls on one steady row. */
.topbar{
  display:grid;
  grid-template-columns:minmax(520px,1fr) minmax(0,auto);
  align-items:center;
  column-gap:28px;
  overflow:visible;
}

.brand{
  min-width:0;
}

.header-actions{
  display:flex;
  flex:0 0 auto;
  width:max-content;
  max-width:min(100%,960px);
  min-width:0;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  overflow:visible;
  overscroll-behavior-x:contain;
  padding:8px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.035)),
    rgba(11,12,12,.36);
  box-shadow:
    0 20px 54px rgba(0,0,0,.18),
    inset 1px 1px 1px rgba(255,255,255,.18),
    inset -1px -1px 1px rgba(255,255,255,.05);
  scrollbar-width:none;
}

.header-actions::-webkit-scrollbar{
  display:none;
}

.header-actions .user-badge{
  flex:0 0 auto;
  min-width:136px;
  max-width:166px;
  min-height:44px;
  padding:8px 14px;
  border-radius:999px;
  text-align:right;
}

.header-actions .sync-status{
  flex:0 0 auto;
  min-width:206px;
  height:44px;
  padding:0 15px;
  border-radius:999px;
}

.header-actions .theme-tabs{
  flex:0 0 auto;
  min-height:44px;
  height:44px;
  padding:4px;
  border-radius:999px;
}

.header-actions .theme-tab{
  width:auto;
  min-width:42px;
  height:36px;
  padding:0 12px;
  border-radius:999px;
}

.header-actions .icon-action{
  --icon-size:44px;
  --label-width:0px;
  flex:0 0 var(--icon-size);
  width:var(--icon-size);
  min-width:var(--icon-size);
  height:var(--icon-size);
  min-height:var(--icon-size);
  justify-content:center;
  overflow:visible;
  border-radius:16px;
  transition:
    transform .18s ease,
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease;
}

.header-actions .icon-action:hover,
.header-actions .icon-action:focus-visible{
  width:var(--icon-size);
  min-width:var(--icon-size);
  transform:translateY(-1px);
}

.header-actions .icon-action svg{
  flex:0 0 auto;
}

.header-actions .icon-action .icon-label{
  position:absolute;
  width:1px;
  height:1px;
  max-width:none;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  padding:0;
  opacity:0;
  white-space:nowrap;
}

.header-actions .icon-action:hover .icon-label,
.header-actions .icon-action:focus-visible .icon-label{
  max-width:none;
  padding:0;
  opacity:0;
}

.header-actions .icon-action::after{
  content:attr(aria-label);
  position:absolute;
  left:50%;
  bottom:-34px;
  z-index:20;
  transform:translateX(-50%) translateY(-4px);
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(8,8,7,.84);
  color:#fff6e8;
  font-size:12px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  box-shadow:0 14px 28px rgba(0,0,0,.20);
  transition:opacity .16s ease,transform .16s ease;
}

.header-actions .icon-action:hover::after,
.header-actions .icon-action:focus-visible::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.header-actions .icon-action.danger{
  margin-left:2px;
}

.header-actions .icon-action.danger::after{
  border-color:rgba(255,70,111,.30);
  color:#ffd8e2;
}

body.theme-light .header-actions{
  border-color:rgba(86,60,27,.10);
  background:
    linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,.40)),
    rgba(255,251,244,.56);
  box-shadow:
    0 20px 54px rgba(116,78,32,.12),
    inset 1px 1px 1px rgba(255,255,255,.82),
    inset -1px -1px 1px rgba(96,62,25,.07);
}

body.theme-light .header-actions .icon-action::after{
  border-color:rgba(80,55,25,.12);
  background:rgba(255,251,244,.94);
  color:#2a2117;
}

@media(max-width:1320px){
  .topbar{
    grid-template-columns:1fr;
    row-gap:20px;
  }

  .header-actions{
    width:100%;
    max-width:100%;
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
  }
}

@media(max-width:720px){
  .topbar{
    display:flex;
    align-items:flex-start;
  }

  .header-actions{
    width:100%;
    padding:7px;
    border-radius:22px;
    overflow-x:auto;
    overflow-y:hidden;
  }

  .header-actions .user-badge{
    min-width:128px;
  }

  .header-actions .sync-status{
    min-width:190px;
  }
}

/* 2026-06-22 temporary access: fixed two-row header while ICP filing is pending. */
.header-actions{
  display:grid;
  grid-template-columns:repeat(9,max-content);
  grid-template-areas:
    "badge badge sync sync sync sync sync sync sync"
    ". . theme refresh manage password clear upload logout";
  width:max-content;
  max-width:none;
  align-items:center;
  justify-content:end;
  column-gap:8px;
  row-gap:10px;
  padding:10px 12px;
  border-radius:28px;
  overflow:visible;
}

#userBadge{
  grid-area:badge;
  justify-self:end;
}

.header-actions .sync-status{
  grid-area:sync;
  justify-self:end;
}

#themeToggle{
  grid-area:theme;
}

#refreshBtn{
  grid-area:refresh;
}

#manageUsersBtn{
  grid-area:manage;
}

#changePasswordBtn{
  grid-area:password;
}

#clearDataBtn{
  grid-area:clear;
}

.header-actions .upload-action{
  grid-area:upload;
}

#logoutBtn{
  grid-area:logout;
}

.header-actions .user-badge,
.header-actions .sync-status,
.header-actions .theme-tabs,
.header-actions .icon-action{
  margin:0;
}

.header-actions .icon-action{
  align-self:center;
}

@media(max-width:1320px){
  .header-actions{
    display:grid;
    grid-template-columns:repeat(9,max-content);
    grid-template-areas:
      "badge badge sync sync sync sync sync sync sync"
      ". . theme refresh manage password clear upload logout";
    width:max-content;
    max-width:100%;
    justify-content:start;
    overflow-x:auto;
    overflow-y:hidden;
  }
}

@media(max-width:720px){
  .header-actions{
    width:100%;
    grid-template-columns:repeat(9,max-content);
    justify-content:start;
    border-radius:22px;
  }
}

/* 2026-06-22 compact header: balanced brand and a clean two-row control cluster. */
.topbar{
  display:grid;
  grid-template-columns:minmax(700px,1fr) max-content;
  align-items:center;
  gap:36px;
  min-height:230px;
  padding:34px 4.2vw;
  overflow:hidden;
}

.brand{
  min-width:0;
  gap:24px;
}

.brand > div:last-child{
  min-width:0;
}

.brand h1{
  margin:10px 0;
  font-size:clamp(38px,3.2vw,58px);
  line-height:1.06;
  letter-spacing:-.04em;
  white-space:nowrap;
}

.header-actions{
  display:grid;
  grid-template-columns:repeat(7,max-content);
  grid-template-areas:
    "badge badge sync sync sync sync sync"
    "theme refresh manage password clear upload logout";
  width:max-content;
  max-width:none;
  justify-self:end;
  align-items:center;
  justify-content:end;
  gap:10px 9px;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

#userBadge{
  grid-area:badge;
  justify-self:end;
}

.header-actions .sync-status{
  grid-area:sync;
  justify-self:end;
}

#themeToggle{grid-area:theme}
#refreshBtn{grid-area:refresh}
#manageUsersBtn{grid-area:manage}
#changePasswordBtn{grid-area:password}
#clearDataBtn{grid-area:clear}
.header-actions .upload-action{grid-area:upload}
#logoutBtn{grid-area:logout}

.header-actions .user-badge{
  min-width:150px;
  max-width:190px;
  min-height:44px;
}

.header-actions .sync-status{
  min-width:250px;
  height:44px;
}

.header-actions .theme-tabs,
.header-actions .icon-action{
  height:46px;
  min-height:46px;
}

.header-actions .icon-action{
  --icon-size:46px;
  width:46px;
  min-width:46px;
  border-radius:16px;
}

body.theme-light .header-actions{
  border:0;
  background:none;
  box-shadow:none;
}

@media(max-width:1500px){
  .topbar{
    grid-template-columns:minmax(600px,1fr) max-content;
    gap:24px;
  }

  .brand h1{
    font-size:clamp(34px,3vw,48px);
  }

  .header-actions .sync-status{
    min-width:220px;
  }
}

@media(max-width:1180px){
  .topbar{
    grid-template-columns:1fr;
    gap:22px;
  }

  .header-actions{
    justify-self:stretch;
    justify-content:start;
    max-width:100%;
    padding-bottom:4px;
    overflow-x:auto;
    overflow-y:hidden;
  }
}

@media(max-width:720px){
  .topbar{
    display:flex;
    min-height:0;
    padding:24px 20px;
  }

  .brand h1{
    white-space:normal;
  }

  .header-actions{
    width:100%;
    grid-template-columns:repeat(7,max-content);
    border-radius:0;
  }
}

/* 2026-06-22 filter widths: show complete dates and shorten customer search. */
.filters{
  grid-template-columns:
    minmax(190px,1.08fr)
    minmax(190px,1.08fr)
    minmax(180px,1fr)
    minmax(155px,.86fr)
    minmax(180px,1fr)
    minmax(180px,1fr)
    minmax(220px,240px)
    max-content;
  gap:14px;
}

.filters label{
  min-width:0;
}

.filters label input,
.filters label select{
  width:100%;
  min-width:0;
}

.filters input[type="date"]{
  min-width:190px;
  padding-right:38px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}

.filters .search-label{
  width:240px;
  min-width:220px;
  max-width:240px;
  grid-column:auto;
}

.filters .search-label input{
  width:100%;
  min-width:0;
}

.filters .quick-range{
  width:max-content;
  grid-column:auto;
  justify-self:end;
}

@media(max-width:1550px){
  .filters{
    grid-template-columns:
      minmax(185px,1fr)
      minmax(185px,1fr)
      minmax(165px,.9fr)
      minmax(145px,.78fr)
      minmax(165px,.9fr)
      minmax(165px,.9fr)
      minmax(200px,220px)
      max-content;
    gap:11px;
  }

  .filters .search-label{
    width:220px;
    min-width:200px;
    max-width:220px;
  }
}

@media(max-width:1320px){
  .filters{
    grid-template-columns:repeat(4,minmax(180px,1fr));
  }

  .filters .search-label{
    width:auto;
    min-width:0;
    max-width:none;
    grid-column:span 2;
  }

  .filters .quick-range{
    grid-column:span 2;
  }
}

@media(max-width:720px){
  .filters{
    grid-template-columns:1fr;
  }

  .filters input[type="date"]{
    min-width:0;
  }

  .filters .search-label,
  .filters .quick-range{
    width:100%;
    grid-column:1;
  }
}

/* 2026-06-22 filter two-row: keep full dates and move shortcuts below. */
.filters{
  grid-template-columns:
    minmax(205px,1.08fr)
    minmax(205px,1.08fr)
    minmax(170px,.92fr)
    minmax(145px,.78fr)
    minmax(165px,.88fr)
    minmax(165px,.88fr)
    minmax(205px,1fr) !important;
  column-gap:16px !important;
  row-gap:14px !important;
}

.filters .quick-range{
  grid-column:1 / -1 !important;
  justify-self:end;
  width:max-content;
  margin-top:0;
}

@media(max-width:1320px){
  .filters{
    grid-template-columns:repeat(4,minmax(180px,1fr)) !important;
  }

  .filters .search-label{
    grid-column:span 2;
  }

  .filters .quick-range{
    grid-column:span 2 !important;
  }
}

@media(max-width:720px){
  .filters{
    grid-template-columns:1fr !important;
  }

  .filters .search-label,
  .filters .quick-range{
    grid-column:1 !important;
    width:100%;
  }
}

/* 2026-06-22 filter single-row: compact all controls without clipping dates. */
.filters{
  grid-template-columns:
    166px
    166px
    minmax(142px,.92fr)
    126px
    minmax(142px,.9fr)
    minmax(142px,.9fr)
    minmax(174px,.98fr)
    max-content !important;
  column-gap:10px !important;
  row-gap:10px !important;
  padding:20px 28px 22px;
}

.filters label{
  gap:6px;
  font-size:10px;
}

.filters label input,
.filters label select{
  height:42px;
  padding-left:22px;
  padding-right:28px;
  font-size:13px;
}

.filters input[type="date"]{
  width:166px;
  min-width:166px;
  max-width:166px;
  padding-left:22px;
  padding-right:30px;
  font-size:13px;
}

.filters .search-label{
  width:auto;
  min-width:174px;
  max-width:none;
  grid-column:auto;
}

.filters .quick-range{
  grid-column:auto !important;
  align-self:end;
  justify-self:end;
  width:max-content;
  height:42px;
  margin:0;
  padding:3px;
}

.filters .quick-range button{
  min-width:48px;
  height:34px;
  padding:0 9px;
  font-size:12px;
}

.filters label::before{
  left:10px;
  bottom:12px;
  width:6px;
  height:6px;
}

@media(max-width:1550px){
  .filters{
    grid-template-columns:
      160px
      160px
      138px
      120px
      136px
      136px
      minmax(155px,1fr)
      max-content !important;
    column-gap:8px !important;
    padding-inline:22px;
  }

  .filters input[type="date"]{
    width:160px;
    min-width:160px;
    max-width:160px;
  }

  .filters .search-label{
    min-width:155px;
  }

  .filters .quick-range button{
    min-width:44px;
    padding:0 7px;
  }
}

@media(max-width:1180px){
  .filters{
    grid-template-columns:repeat(4,minmax(160px,1fr)) !important;
  }

  .filters input[type="date"],
  .filters .search-label{
    width:100%;
    min-width:0;
    max-width:none;
  }

  .filters .search-label,
  .filters .quick-range{
    grid-column:span 2 !important;
  }
}

@media(max-width:720px){
  .filters{
    grid-template-columns:1fr !important;
  }

  .filters .search-label,
  .filters .quick-range{
    grid-column:1 !important;
    width:100%;
  }
}

/* 2026-06-22 filter spacing fix: include padding in field widths and prevent overlap. */
.filters{
  grid-template-columns:
    205px
    205px
    minmax(170px,1fr)
    minmax(145px,.82fr)
    minmax(165px,.94fr)
    minmax(165px,.94fr)
    205px
    max-content !important;
  column-gap:16px !important;
  row-gap:14px !important;
}

.filters label,
.filters label input,
.filters label select,
.filters .search-label,
.filters .search-label input{
  box-sizing:border-box;
}

.filters label{
  width:100%;
  min-width:0;
}

.filters label input,
.filters label select{
  display:block;
  width:100%;
  max-width:100%;
}

.filters input[type="date"]{
  width:205px;
  min-width:205px;
  max-width:205px;
  padding-left:28px;
  padding-right:36px;
}

.filters .search-label{
  width:205px;
  min-width:205px;
  max-width:205px;
}

.filters .quick-range{
  align-self:end;
  margin-left:0;
}

@media(max-width:1550px){
  .filters{
    grid-template-columns:
      195px
      195px
      minmax(160px,1fr)
      minmax(140px,.78fr)
      minmax(155px,.9fr)
      minmax(155px,.9fr)
      190px
      max-content !important;
    column-gap:12px !important;
  }

  .filters input[type="date"]{
    width:195px;
    min-width:195px;
    max-width:195px;
  }

  .filters .search-label{
    width:190px;
    min-width:190px;
    max-width:190px;
  }
}

@media(max-width:1320px){
  .filters{
    grid-template-columns:repeat(4,minmax(180px,1fr)) !important;
  }

  .filters input[type="date"],
  .filters .search-label{
    width:100%;
    min-width:0;
    max-width:none;
  }

  .filters .search-label{
    grid-column:span 2;
  }
}

@media(max-width:720px){
  .filters{
    grid-template-columns:1fr !important;
  }

  .filters .search-label{
    grid-column:1;
  }
}

/* 2026-06-22 final single-row override. */
.filters{
  grid-template-columns:
    160px
    160px
    138px
    120px
    136px
    136px
    minmax(155px,1fr)
    max-content !important;
  column-gap:8px !important;
  row-gap:8px !important;
  padding:18px 22px 20px !important;
}

.filters label input,
.filters label select{
  box-sizing:border-box !important;
  height:40px !important;
  min-width:0 !important;
  max-width:100% !important;
  padding-left:20px !important;
  padding-right:26px !important;
  font-size:12px !important;
}

.filters input[type="date"]{
  width:160px !important;
  min-width:160px !important;
  max-width:160px !important;
  padding-right:28px !important;
}

.filters .search-label{
  width:auto !important;
  min-width:155px !important;
  max-width:none !important;
  grid-column:auto !important;
}

.filters .quick-range{
  grid-column:auto !important;
  align-self:end !important;
  justify-self:end !important;
  width:max-content !important;
  height:40px !important;
  margin:0 !important;
  padding:3px !important;
}

.filters .quick-range button{
  min-width:42px !important;
  height:32px !important;
  padding:0 6px !important;
  font-size:11px !important;
}

@media(max-width:1180px){
  .filters{
    grid-template-columns:repeat(4,minmax(160px,1fr)) !important;
  }

  .filters input[type="date"],
  .filters .search-label{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  .filters .search-label,
  .filters .quick-range{
    grid-column:span 2 !important;
  }
}

@media(max-width:720px){
  .filters{
    grid-template-columns:1fr !important;
  }

  .filters .search-label,
  .filters .quick-range{
    grid-column:1 !important;
    width:100% !important;
  }
}

/* 2026-06-23 flicker stability: keep visual depth without full-screen repaints. */
body:before,
body:after,
.topbar:after,
.topbar:before,
.filters:before,
.chart-card:before,
.tabs-panel:before,
.login-stage:before{
  animation:none !important;
}

body:before{
  transform:none !important;
  mix-blend-mode:normal !important;
  filter:blur(12px) saturate(1.08) !important;
}

body.theme-light:before{
  mix-blend-mode:normal !important;
  filter:blur(12px) saturate(1.04) !important;
}

@media(prefers-reduced-motion:reduce){
  *,
  *:before,
  *:after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* 2026-06-25 filter apply: edit filters first, then refresh every module together. */
.filters{
  grid-template-columns:
    150px
    150px
    128px
    108px
    124px
    124px
    minmax(130px,1fr)
    96px
    max-content !important;
}

.filters input[type="date"]{
  width:150px !important;
  min-width:150px !important;
  max-width:150px !important;
}

.apply-filter-btn{
  align-self:end !important;
  height:40px !important;
  min-width:96px !important;
  padding:0 14px !important;
  white-space:nowrap !important;
}

.apply-filter-btn.pending{
  box-shadow:0 0 0 1px rgba(255,255,255,.28),0 16px 38px rgba(245,135,20,.32) !important;
  filter:saturate(1.1);
}

@media(max-width:1180px){
  .filters{
    grid-template-columns:repeat(4,minmax(150px,1fr)) !important;
  }

  .apply-filter-btn{
    width:100% !important;
  }

  .filters .search-label{
    grid-column:span 2 !important;
  }

  .filters .quick-range{
    grid-column:span 1 !important;
    width:100% !important;
    justify-self:stretch !important;
  }
}

@media(max-width:720px){
  .apply-filter-btn,
  .filters .quick-range{
    grid-column:1 !important;
    width:100% !important;
  }
}

/* 2026-06-27 compact header fix: keep export inside the action grid and reduce the whole hero footprint. */
.topbar{
  grid-template-columns:minmax(540px,1fr) max-content !important;
  min-height:172px !important;
  gap:22px !important;
  padding:24px 4vw !important;
  overflow:visible !important;
}

.brand{
  gap:20px !important;
}

.logo-shell{
  width:110px !important;
  height:110px !important;
  border-radius:28px !important;
}

.brand h1{
  margin:8px 0 !important;
  font-size:clamp(32px,2.8vw,46px) !important;
  line-height:1.05 !important;
}

.brand .subtitle{
  font-size:14px !important;
}

.header-actions{
  display:grid !important;
  grid-template-columns:repeat(8,max-content) !important;
  grid-template-areas:
    "badge badge sync sync sync sync sync sync"
    "theme refresh export manage password clear upload logout" !important;
  width:max-content !important;
  max-width:none !important;
  justify-self:end !important;
  align-items:center !important;
  justify-content:end !important;
  gap:8px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#userBadge{grid-area:badge !important}
.header-actions .sync-status{grid-area:sync !important}
#themeToggle{grid-area:theme !important}
#refreshBtn{grid-area:refresh !important}
#exportBtn{grid-area:export !important}
#manageUsersBtn{grid-area:manage !important}
#changePasswordBtn{grid-area:password !important}
#clearDataBtn{grid-area:clear !important}
.header-actions .upload-action{grid-area:upload !important}
#logoutBtn{grid-area:logout !important}

.header-actions .user-badge{
  min-width:142px !important;
  max-width:172px !important;
  min-height:38px !important;
  padding:7px 13px !important;
}

.header-actions .user-badge b{
  font-size:12px !important;
}

.header-actions .user-badge span{
  font-size:10px !important;
}

.header-actions .sync-status{
  width:auto !important;
  min-width:210px !important;
  max-width:250px !important;
  height:38px !important;
  padding:0 13px !important;
  font-size:11px !important;
}

.header-actions .theme-tabs{
  width:auto !important;
  min-width:94px !important;
  height:38px !important;
  min-height:38px !important;
  padding:3px !important;
}

.header-actions .theme-tab{
  min-width:34px !important;
  height:30px !important;
  padding:0 9px !important;
  font-size:11px !important;
}

.header-actions .icon-action{
  --icon-size:38px !important;
  flex:0 0 38px !important;
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 !important;
  border-radius:14px !important;
}

.header-actions .icon-action:hover,
.header-actions .icon-action:focus-visible{
  width:38px !important;
  min-width:38px !important;
}

.header-actions .icon-action svg{
  width:18px !important;
  height:18px !important;
}

body.theme-light .header-actions{
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}

@media(max-width:1320px){
  .topbar{
    grid-template-columns:1fr !important;
    min-height:0 !important;
    row-gap:18px !important;
  }

  .header-actions{
    justify-self:start !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
  }
}

@media(max-width:720px){
  .topbar{
    display:flex !important;
    padding:22px 18px !important;
  }

  .logo-shell{
    width:82px !important;
    height:82px !important;
  }

  .brand h1{
    white-space:normal !important;
  }

  .header-actions{
    grid-template-columns:repeat(8,max-content) !important;
    width:100% !important;
  }
}

.user-form small.success{
  color:var(--cyan) !important;
}

.account-mode-hint{
  display:grid !important;
  gap:6px !important;
  padding:14px 16px !important;
  border:1px solid rgba(245,135,20,.28) !important;
  border-radius:18px !important;
  background:linear-gradient(135deg,rgba(245,135,20,.14),rgba(34,229,231,.08)) !important;
  color:rgba(255,253,246,.78) !important;
}

.account-mode-hint b{
  color:#fff8ee !important;
  font-size:14px !important;
  letter-spacing:.08em !important;
}

.account-mode-hint span{
  color:rgba(217,226,240,.72) !important;
  line-height:1.6 !important;
}

.managed-picker-label{
  display:grid !important;
  gap:8px !important;
  color:var(--muted) !important;
  font-size:12px !important;
  font-weight:700 !important;
}

.managed-picker{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  max-height:168px !important;
  overflow:auto !important;
  padding:10px !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  background:var(--field-bg) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.managed-option{
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  gap:8px !important;
  padding:9px 10px !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.045) !important;
  color:var(--ink) !important;
  font-size:12px !important;
  cursor:pointer !important;
}

.managed-option:hover{
  border-color:rgba(255,178,74,.45) !important;
  background:rgba(255,178,74,.1) !important;
}

.managed-option input{
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  accent-color:var(--orange) !important;
}

.managed-option span{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.managed-empty{
  grid-column:1/-1 !important;
  margin:0 !important;
  color:var(--muted) !important;
  font-size:12px !important;
}

@media(max-width:720px){
  .managed-picker{
    grid-template-columns:1fr !important;
  }
}

[hidden]{
  display:none!important;
}

.exclude-new-btn{
  height:30px !important;
  padding:0 12px !important;
  border:1px solid rgba(255,96,117,.34) !important;
  border-radius:999px !important;
  background:rgba(255,96,117,.08) !important;
  color:#ff7992 !important;
  font-size:12px !important;
  font-weight:800 !important;
  cursor:pointer !important;
}

.exclude-new-btn.restore{
  border-color:rgba(34,229,231,.34) !important;
  background:rgba(34,229,231,.08) !important;
  color:#22e5e7 !important;
}

.exclude-new-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
}

/* 2026-07-06 light account management contrast fix */
body.theme-light .users-modal{
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,252,246,.96)) !important;
  color:#1f2933 !important;
  border-color:rgba(180,118,38,.28) !important;
  box-shadow:0 36px 110px rgba(68,48,24,.22) !important;
}

body.theme-light .users-modal .modal-title h2,
body.theme-light .users-modal .user-form h3,
body.theme-light .users-modal label,
body.theme-light .users-list-title{
  color:#1f2933 !important;
}

body.theme-light .users-modal .account-mode-hint{
  background:linear-gradient(135deg,#fff3de,#eefcf8) !important;
  border-color:rgba(201,121,22,.32) !important;
  color:#1f2933 !important;
}

body.theme-light .users-modal .account-mode-hint b{
  color:#1f2933 !important;
}

body.theme-light .users-modal .account-mode-hint span{
  color:#566274 !important;
}

body.theme-light .users-modal .modal-title p,
body.theme-light .users-modal .user-form small,
body.theme-light .users-modal .user-row small,
body.theme-light .users-modal .managed-empty{
  color:#64748b !important;
}

body.theme-light .users-modal .user-form{
  background:
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,248,237,.88)) !important;
  color:#1f2933 !important;
  border-color:rgba(145,96,32,.22) !important;
  box-shadow:0 24px 70px rgba(90,62,26,.16),inset 0 1px 0 rgba(255,255,255,.9) !important;
}

body.theme-light .users-modal .user-form input,
body.theme-light .users-modal .user-form select{
  background:#fffefa !important;
  color:#1f2933 !important;
  border-color:rgba(80,64,42,.22) !important;
  box-shadow:inset 0 1px 2px rgba(30,22,12,.06) !important;
}

body.theme-light .users-modal .user-form input::placeholder{
  color:#7c8795 !important;
}

body.theme-light .users-modal .managed-picker{
  background:#f7f2e8 !important;
  border-color:rgba(80,64,42,.16) !important;
}

body.theme-light .users-modal .managed-option{
  background:#fffefa !important;
  color:#1f2933 !important;
  border-color:rgba(80,64,42,.14) !important;
}

body.theme-light .users-modal .managed-option:hover{
  background:#fff3df !important;
  border-color:rgba(245,135,20,.42) !important;
}

body.theme-light .users-modal .user-row{
  background:#111820 !important;
  color:#f8fafc !important;
  border-color:rgba(17,24,32,.06) !important;
}

body.theme-light .users-modal .user-row b,
body.theme-light .users-modal .user-row em{
  color:#f8fafc !important;
}

body.theme-light .users-modal .user-row.active{
  background:#fff7ec !important;
  color:#1f2933 !important;
  border-color:rgba(245,135,20,.62) !important;
}

body.theme-light .users-modal .user-row.active b{
  color:#1f2933 !important;
}

body.theme-light .users-modal .user-row.active em{
  color:#f58214 !important;
}

/* 2026-07-06 light dashboard readability fix */
body.theme-light .filter-title{
  color:#1f2933 !important;
}

body.theme-light .filter-title span{
  color:#1f2933 !important;
}

body.theme-light .filter-title .section-index{
  color:#c77916 !important;
  text-shadow:none !important;
}

body.theme-light .business-card .bar-row > span:first-child{
  color:#566274 !important;
  font-weight:800 !important;
}

body.theme-light .business-card .bar-row:hover > span:first-child{
  color:#1f2933 !important;
}

body.theme-light .exclude-new-btn{
  background:#fff1f4 !important;
  color:#d9365c !important;
  border-color:rgba(217,54,92,.24) !important;
}

body.theme-light .exclude-new-btn.restore{
  background:#ecfffb !important;
  color:#0f9f9b !important;
  border-color:rgba(15,159,155,.24) !important;
}

/* 2026-07-07 light header contrast + new entity preview */
.entity-preview{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:260px;
  max-width:720px;
  line-height:1.35;
}

.entity-preview strong{
  color:var(--ink);
  font-size:13px;
  font-weight:850;
}

.entity-preview span{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.entity-preview em,
.entity-preview i{
  display:inline-flex;
  align-items:center;
  max-width:260px;
  min-height:24px;
  padding:3px 8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#d7dce8;
  font-style:normal;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.entity-preview-all span{
  max-height:none;
  overflow:visible;
}

.entity-preview-all em{
  max-width:300px;
}

.tabs-panel table td .entity-preview{
  white-space:normal;
}

.screenshot-export{
  background:var(--panel) !important;
  color:var(--text) !important;
}

.screenshot-export .tabs{
  flex-wrap:wrap;
}

.screenshot-export .table-tools{
  align-items:flex-start;
}

.screenshot-export .table-summary{
  padding-right:0;
}

.screenshot-export .table-scroll{
  max-height:none !important;
  overflow:visible !important;
}

.screenshot-export .table-shot-btn{
  display:none !important;
}

.entity-preview i{
  color:var(--gold-2);
}

body.theme-light .entity-preview strong{
  color:#1f2933 !important;
}

body.theme-light .entity-preview em,
body.theme-light .entity-preview i{
  border-color:rgba(35,43,56,.10) !important;
  background:#fff8ed !important;
  color:#536171 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}

body.theme-light .entity-preview i{
  color:#c46f0b !important;
  background:#fff1d8 !important;
}

body.theme-light .header-actions .user-badge,
body.theme-light .header-actions .sync-status,
body.theme-light .header-actions .theme-tabs,
body.theme-light .header-actions .icon-action{
  border-color:rgba(103,81,52,.18) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,248,236,.92)) !important;
  box-shadow:
    0 14px 34px rgba(94,67,30,.12),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
}

body.theme-light .header-actions .user-badge b{
  color:#8b4a08 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.88) !important;
}

body.theme-light .header-actions .user-badge span{
  color:#4f4335 !important;
  font-weight:760 !important;
}

body.theme-light .header-actions .sync-status{
  color:#6b5c4a !important;
  font-weight:760 !important;
}

body.theme-light .header-actions .theme-tab{
  color:#3a2d22 !important;
}

body.theme-light .header-actions .theme-tab.active{
  background:linear-gradient(135deg,#fff0de,#ffe1bd) !important;
  color:#271b12 !important;
}

/* 2026-07-07 compact account management modal */
.modal-screen{
  padding:18px !important;
  align-items:center !important;
  overflow:hidden !important;
}

.users-modal{
  width:min(1120px,calc(100vw - 42px)) !important;
  max-height:calc(100vh - 36px) !important;
  padding:24px 26px !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  gap:16px !important;
}

.users-modal .modal-title{
  margin:0 !important;
  padding:0 !important;
  align-items:flex-start !important;
}

.users-modal .modal-title .eyebrow{
  margin-bottom:5px !important;
  font-size:10px !important;
  letter-spacing:5px !important;
}

.users-modal .modal-title h2{
  margin:0 0 4px !important;
  font-size:26px !important;
  line-height:1.05 !important;
}

.users-modal .modal-title p{
  margin:0 !important;
  font-size:12px !important;
  line-height:1.45 !important;
}

.users-layout{
  min-height:0 !important;
  display:grid !important;
  grid-template-columns:minmax(330px,.9fr) minmax(440px,1.05fr) !important;
  gap:20px !important;
  overflow:hidden !important;
}

.users-layout > div:first-child{
  min-height:0 !important;
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  overflow:hidden !important;
}

.users-list-title{
  margin-bottom:10px !important;
  font-size:13px !important;
}

.users-list{
  min-height:0 !important;
  max-height:none !important;
  overflow:auto !important;
  padding-right:6px !important;
}

.users-modal .user-row{
  min-height:58px !important;
  padding:12px 14px !important;
  border-radius:13px !important;
  margin-bottom:9px !important;
}

.users-modal .user-row b{
  font-size:14px !important;
}

.users-modal .user-row small,
.users-modal .user-row em{
  font-size:11px !important;
}

.users-modal .user-form{
  min-height:0 !important;
  max-height:100% !important;
  overflow:auto !important;
  gap:10px !important;
  padding:18px 20px !important;
  border-radius:18px !important;
}

.users-modal .user-form h3{
  margin:0 !important;
  font-size:22px !important;
}

.users-modal .user-form label{
  gap:5px !important;
  font-size:11px !important;
}

.users-modal .user-form input,
.users-modal .user-form select{
  height:42px !important;
  min-height:42px !important;
  padding:0 16px !important;
  border-radius:14px !important;
  font-size:14px !important;
}

.users-modal .account-mode-hint{
  gap:3px !important;
  padding:10px 14px !important;
  border-radius:15px !important;
}

.users-modal .account-mode-hint b{
  font-size:13px !important;
}

.users-modal .account-mode-hint span{
  font-size:12px !important;
  line-height:1.45 !important;
}

.users-modal .managed-picker{
  max-height:112px !important;
  gap:6px !important;
  padding:8px !important;
  border-radius:14px !important;
}

.users-modal .managed-option{
  min-height:38px !important;
  padding:7px 9px !important;
  border-radius:12px !important;
  font-size:12px !important;
}

.users-modal .form-actions{
  gap:10px !important;
  margin-top:4px !important;
}

.users-modal .form-actions .button{
  min-height:42px !important;
  padding:0 20px !important;
}

.users-modal .user-form small{
  min-height:18px !important;
  line-height:1.4 !important;
}

@media(max-height:760px){
  .users-modal{
    padding:18px 22px !important;
    gap:12px !important;
  }

  .users-modal .modal-title .eyebrow,
  .users-modal .modal-title p{
    display:none !important;
  }

  .users-modal .modal-title h2{
    font-size:24px !important;
  }

  .users-modal .account-mode-hint{
    padding:8px 12px !important;
  }

  .users-modal .account-mode-hint span{
    display:none !important;
  }

  .users-modal .user-form{
    gap:8px !important;
    padding:16px 18px !important;
  }

  .users-modal .user-form input,
  .users-modal .user-form select{
    height:38px !important;
    min-height:38px !important;
  }
}

@media(max-width:980px){
  .modal-screen{
    overflow:auto !important;
    align-items:flex-start !important;
  }

  .users-modal{
    max-height:none !important;
  }

  .users-layout{
    grid-template-columns:1fr !important;
    overflow:visible !important;
  }

  .users-list,
  .users-modal .user-form{
    max-height:none !important;
  }
}