:root{
  --portal-bg:oklch(97% .009 255);
  --portal-panel:oklch(99% .006 255);
  --portal-panel-2:oklch(94% .014 255);
  --portal-line:oklch(72% .025 255 / .28);
  --portal-line-2:oklch(65% .03 255 / .34);
  --portal-text:oklch(19% .03 255);
  --portal-muted:oklch(47% .035 255);
  --portal-subtle:oklch(58% .03 255);
  --portal-blue:oklch(54% .22 255);
  --portal-blue-2:oklch(48% .18 250);
  --portal-green:oklch(52% .16 150);
  --portal-orange:oklch(58% .15 55);
  --portal-red:oklch(56% .19 28);
  --portal-radius:12px;
}
:root[data-theme="dark"]{
  --portal-bg:oklch(15% .018 255);
  --portal-panel:oklch(20% .024 255);
  --portal-panel-2:oklch(24% .03 255);
  --portal-line:oklch(100% .008 255 / .11);
  --portal-line-2:oklch(100% .008 255 / .18);
  --portal-text:oklch(96% .012 255);
  --portal-muted:oklch(72% .028 255);
  --portal-subtle:oklch(55% .028 255);
  --portal-blue:oklch(60% .22 260);
  --portal-blue-2:oklch(68% .17 250);
  --portal-green:oklch(72% .16 150);
  --portal-orange:oklch(72% .15 55);
  --portal-red:oklch(65% .18 28);
}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 18% -10%,oklch(55% .22 260 / .22),transparent 34rem),
    radial-gradient(circle at 92% 12%,oklch(68% .17 250 / .14),transparent 28rem),
    var(--portal-bg);
  color:var(--portal-text);
}
button,input,textarea,select{font:inherit}
.portal-login{
  --portal-bg:oklch(15% .018 255);
  --portal-panel:oklch(20% .024 255);
  --portal-panel-2:oklch(24% .03 255);
  --portal-line:oklch(100% .008 255 / .11);
  --portal-line-2:oklch(100% .008 255 / .18);
  --portal-text:oklch(96% .012 255);
  --portal-muted:oklch(72% .028 255);
  --portal-subtle:oklch(55% .028 255);
  --portal-blue:oklch(60% .22 260);
  --portal-blue-2:oklch(68% .17 250);
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);
}
.login-brand{
  padding:56px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-right:1px solid var(--portal-line);
}
.brand-lockup{display:flex;align-items:center;gap:14px}
.brand-lockup img{width:48px;height:48px;border-radius:14px}
.brand-name{font-weight:900;letter-spacing:-.03em;font-size:22px}
.brand-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--portal-muted);font-weight:800}
.login-copy{max-width:680px;text-align:center;margin-left:auto;margin-right:auto}
.login-copy h1{font-size:clamp(42px,5vw,72px);line-height:1.03;margin-bottom:24px;letter-spacing:-.045em}
.login-copy p{font-size:18px;line-height:1.75;color:var(--portal-muted);max-width:620px}
.trust-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:720px}
.trust-item{border:1px solid var(--portal-line);background:oklch(100% .005 255 / .035);border-radius:10px;padding:16px}
.trust-item strong{display:block;font-size:18px}
.trust-item span{font-size:12px;color:var(--portal-muted)}
.login-panel-wrap{display:flex;align-items:center;justify-content:center;padding:32px}
.login-panel-stack{width:100%;max-width:430px}
.login-panel{width:100%;max-width:430px;background:var(--portal-panel);border:1px solid var(--portal-line-2);border-radius:18px;padding:28px;box-shadow:0 32px 80px oklch(0% 0 0 / .42)}
.login-footer-links{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
  color:var(--portal-muted);
  font-size:12px;
}
.login-footer-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  border:1px solid var(--portal-line);
  background:oklch(100% .005 255 / .035);
  color:var(--portal-muted);
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  text-decoration:none;
  transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;
}
.login-footer-links a:hover{
  color:var(--portal-text);
  border-color:oklch(60% .22 260 / .5);
  background:oklch(60% .22 260 / .1);
  transform:translateY(-1px);
}
.panel-title{font-size:24px;font-weight:900;letter-spacing:-.03em;margin-bottom:6px}
.panel-title,
.panel-sub{text-align:center}
.panel-sub{color:var(--portal-muted);font-size:14px;margin-bottom:24px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--portal-muted);font-weight:800}
.field input,.field textarea,.field select{
  width:100%;
  border:1px solid var(--portal-line-2);
  background:oklch(13% .018 255);
  color:var(--portal-text);
  border-radius:10px;
  padding:12px 13px;
  outline:none;
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:oklch(62% .2 260);box-shadow:0 0 0 3px oklch(60% .22 260 / .16)}
.login-presets{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 6px}
.btn-portal{
  border:1px solid var(--portal-line-2);
  background:oklch(100% .005 255 / .04);
  color:var(--portal-text);
  border-radius:10px;
  padding:11px 14px;
  font-weight:800;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.btn-portal:hover{transform:translateY(-1px);border-color:oklch(60% .22 260 / .7);background:oklch(60% .22 260 / .12)}
.btn-primary-portal{background:linear-gradient(135deg,oklch(60% .22 260),oklch(50% .21 260));border-color:oklch(65% .18 255);color:oklch(99% .006 255)}
.btn-danger{border-color:oklch(65% .18 28 / .35);color:oklch(78% .12 28)}
.full{width:100%}
.hint{font-size:12px;color:var(--portal-subtle);line-height:1.6;margin-top:12px}
.portal-shell{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:100vh}
.sidebar{
  position:sticky;top:0;height:100vh;
  background:var(--portal-panel);
  border-right:1px solid var(--portal-line);
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow-y:auto;
  scrollbar-width:none;
  padding-bottom:24px;
}
.sidebar::-webkit-scrollbar{display:none}
.side-logo{display:flex;align-items:center;gap:12px;padding:6px 8px 18px;border-bottom:1px solid var(--portal-line)}
.side-logo img{width:38px;height:38px;border-radius:10px}
.side-logo strong{display:block;font-size:15px;letter-spacing:-.02em}
.side-logo span{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--portal-muted);font-weight:800}
.nav-stack{display:flex;flex-direction:column;gap:3px;flex:0 0 auto}
.nav-btn{
  display:flex;align-items:center;gap:10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--portal-muted);
  border-radius:10px;
  padding:8px 12px;
  font-weight:800;
  cursor:pointer;
  text-align:left;
}
.nav-btn:hover{background:oklch(100% .005 255 / .04);color:var(--portal-text)}
.nav-btn.active{background:oklch(60% .22 260 / .14);border-color:oklch(60% .22 260 / .32);color:var(--portal-text)}
.nav-icon{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;background:oklch(100% .005 255 / .05);font-size:12px}
.side-footer{margin-top:0;border-top:1px solid var(--portal-line);padding-top:12px;flex:0 0 auto}
.user-mini{font-size:13px;color:var(--portal-muted);line-height:1.5;margin-bottom:12px}
.portal-main{min-width:0}
.topbar{
  position:sticky;top:0;z-index:10;
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  border-bottom:1px solid var(--portal-line);
  background:var(--portal-panel);
  backdrop-filter:blur(18px);
}
.topbar h1{font-size:22px;letter-spacing:-.03em}
.topbar-actions{display:flex;align-items:center;gap:10px}
.content{padding:28px;max-width:1480px}
.notice{
  border:1px solid oklch(60% .22 260 / .26);
}
.notice,.client-notice{
  background:linear-gradient(135deg,oklch(60% .22 260 / .12),oklch(100% .006 255 / .035));
  border:1px solid oklch(60% .22 260 / .24);
  border-radius:12px;
  padding:16px 18px;
  color:var(--portal-muted);
}
.client-notice strong{color:var(--portal-text)}
.grid{display:grid;gap:16px}
.grid-2p{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3p{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4p{grid-template-columns:repeat(4,minmax(0,1fr))}
.card-p{
  background:linear-gradient(180deg,oklch(22% .026 255),oklch(18% .022 255));
  border:1px solid var(--portal-line);
  border-radius:12px;
  padding:18px;
  min-width:0;
}
.card-p h2,.card-p h3{font-size:17px;letter-spacing:-.02em;margin-bottom:12px}
.metric{display:flex;flex-direction:column;gap:6px}
.metric-label{font-size:12px;color:var(--portal-muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.metric-value{font-size:30px;font-weight:900;letter-spacing:-.04em;line-height:1}
.metric-foot{font-size:13px;color:var(--portal-muted)}
.table-wrap{overflow:auto;border:1px solid var(--portal-line);border-radius:12px}
.data-table{width:100%;border-collapse:collapse;min-width:760px;background:oklch(17% .021 255)}
.data-table th,.data-table td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--portal-line);font-size:13px;vertical-align:top}
.data-table th{color:var(--portal-muted);text-transform:uppercase;letter-spacing:.08em;font-size:11px;background:oklch(21% .024 255)}
.data-table tr:last-child td{border-bottom:none}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--portal-line-2);
  border-radius:999px;
  padding:4px 9px;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
.pill.open{color:var(--portal-blue-2);background:oklch(60% .22 260 / .11);border-color:oklch(60% .22 260 / .25)}
.pill.done,.pill.paid{color:var(--portal-green);background:oklch(72% .16 150 / .1);border-color:oklch(72% .16 150 / .24)}
.pill.warn{color:var(--portal-orange);background:oklch(72% .15 55 / .1);border-color:oklch(72% .15 55 / .24)}
.pill.stop{color:var(--portal-red);background:oklch(65% .18 28 / .1);border-color:oklch(65% .18 28 / .24)}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:4px 0 18px}
.section-title h2{font-size:24px;letter-spacing:-.035em}
.section-title p{color:var(--portal-muted);font-size:14px;max-width:620px}
.section-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
code{
  display:inline-flex;
  border:1px solid var(--portal-line);
  border-radius:8px;
  padding:5px 7px;
  background:oklch(100% .006 255 / .04);
  color:var(--portal-muted);
  font-size:12px;
}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.span-2{grid-column:span 2}
.permission-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.permission-check{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--portal-line);
  border-radius:10px;
  padding:9px 10px;
  background:oklch(100% .005 255 / .035);
  color:var(--portal-muted);
  font-size:12px;
  font-weight:800;
}
.permission-check input{width:auto}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tab-btn{border:1px solid var(--portal-line);background:oklch(100% .005 255 / .035);color:var(--portal-muted);border-radius:999px;padding:9px 13px;font-weight:800;cursor:pointer}
.tab-btn.active{background:oklch(60% .22 260 / .14);border-color:oklch(60% .22 260 / .34);color:var(--portal-text)}
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.report-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mini-metric{background:oklch(100% .005 255 / .035);border:1px solid var(--portal-line);border-radius:10px;padding:12px}
.mini-metric span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--portal-muted);font-weight:800}
.mini-metric strong{display:block;font-size:20px;margin-top:6px}
.empty{border:1px dashed var(--portal-line-2);border-radius:12px;padding:28px;text-align:center;color:var(--portal-muted)}
.actions-row{display:flex;gap:8px;flex-wrap:wrap}
.client-home-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  border:1px solid var(--portal-line);
  border-radius:14px;
  padding:22px;
  margin-bottom:16px;
  background:linear-gradient(135deg,oklch(60% .22 260 / .14),oklch(100% .006 255 / .035));
}
.client-home-hero span,
.client-summary-card span,
.client-record-card span,
.client-report-head span,
.client-contract-head span{
  display:block;
  color:var(--portal-muted);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.client-home-hero h2{font-size:28px;letter-spacing:-.04em;margin:4px 0 6px}
.client-home-hero p{color:var(--portal-muted);max-width:620px}
.client-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.client-summary-card{
  min-height:132px;
  border:1px solid var(--portal-line);
  border-radius:14px;
  background:var(--portal-panel);
  color:var(--portal-text);
  padding:16px;
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.client-summary-card strong{font-size:22px;letter-spacing:-.03em}
.client-summary-card small{color:var(--portal-muted);line-height:1.35}
.client-work-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:16px}
.client-timeline{display:grid;gap:12px}
.timeline-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;align-items:center;border-bottom:1px solid var(--portal-line);padding-bottom:10px}
.timeline-row:last-child{border-bottom:0;padding-bottom:0}
.timeline-row p{color:var(--portal-muted);line-height:1.45}
.client-card-list{display:grid;gap:14px}
.client-spotlight{
  border:1px solid var(--portal-line);
  border-radius:14px;
  padding:18px;
  margin-bottom:14px;
  background:var(--portal-panel);
}
.client-spotlight strong{display:block;font-size:30px;letter-spacing:-.04em;margin:4px 0}
.client-spotlight p{color:var(--portal-muted);margin-bottom:12px}
.client-record-card,
.client-report-card,
.client-contract-card{
  border:1px solid var(--portal-line);
  border-radius:14px;
  padding:16px;
  background:var(--portal-panel);
}
.client-record-card{display:flex;align-items:center;justify-content:space-between;gap:16px}
.client-record-card strong{display:block;font-size:17px;margin:4px 0}
.client-record-card small{color:var(--portal-muted)}
.client-record-card > div:last-child{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.client-report-head,
.client-contract-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.client-report-head strong,
.client-contract-head strong{display:block;font-size:18px;margin-top:4px}
.client-contract-head small{display:block;color:var(--portal-muted);margin-top:4px}
.client-report-summary{border:1px solid var(--portal-line);border-radius:12px;padding:14px;margin-bottom:12px;background:oklch(100% .006 255 / .035)}
.client-report-summary strong{display:block;color:var(--portal-text);margin-bottom:6px}
.report-metrics.compact{grid-template-columns:repeat(5,minmax(0,1fr))}
.contract-stepper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0}
.contract-step{border:1px solid var(--portal-line);border-radius:10px;padding:10px;text-align:center;color:var(--portal-muted)}
.contract-step span{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:50%;background:oklch(100% .006 255 / .06);font-weight:900;margin-bottom:6px}
.contract-step.done{border-color:oklch(72% .16 150 / .28);color:var(--portal-green)}
.contract-card-actions{display:grid;gap:12px}
.ticket-category-grid{grid-column:span 2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ticket-category-grid button{border:1px solid var(--portal-line);border-radius:10px;background:oklch(100% .006 255 / .035);color:var(--portal-muted);padding:10px;font-weight:850;cursor:pointer}
.ticket-category-grid button:hover{border-color:oklch(60% .22 260 / .38);color:var(--portal-text)}
.ticket-thread-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.ticket-thread-head span{display:block;color:var(--portal-muted);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.ticket-thread-head h3{margin:4px 0 6px}
.ticket-thread-head p{color:var(--portal-muted);line-height:1.45}
.ticket-message-list{display:grid;gap:10px;margin:14px 0 16px}
.ticket-message{border:1px solid var(--portal-line);border-radius:12px;padding:12px;background:oklch(100% .006 255 / .03)}
.ticket-message span{display:block;color:var(--portal-muted);font-size:11px;font-weight:900;margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em}
.ticket-message p{color:var(--portal-text);line-height:1.45}
.ticket-message.admin{border-color:oklch(60% .22 260 / .25);background:oklch(60% .22 260 / .08)}
.hamburger-btn,
.mobile-drawer{display:none}
@media(max-width:980px){
  .portal-login{grid-template-columns:1fr}
  .login-brand{min-height:46vh;padding:34px;border-right:none;border-bottom:1px solid var(--portal-line)}
  .trust-row{grid-template-columns:1fr}
  .portal-shell{grid-template-columns:1fr}
  .sidebar{display:none}
  .hamburger-btn{
    display:inline-flex;
    width:42px;
    height:42px;
    flex:0 0 42px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    border:1px solid var(--portal-line-2);
    border-radius:10px;
    background:oklch(100% .005 255 / .045);
    color:var(--portal-text);
    cursor:pointer;
  }
  .hamburger-btn span{width:18px;height:2px;border-radius:999px;background:currentColor}
  .mobile-drawer{
    display:none;
    position:fixed;
    z-index:30;
    top:76px;
    left:12px;
    right:12px;
    max-height:calc(100svh - 92px);
    overflow:auto;
    border:1px solid var(--portal-line-2);
    border-radius:14px;
    background:var(--portal-panel);
    box-shadow:0 24px 60px oklch(0% 0 0 / .42);
    padding:14px;
  }
  .mobile-drawer.open{display:block}
  .mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
  .mobile-drawer-nav{display:grid;gap:8px}
  .mobile-drawer .nav-btn{width:100%}
  .mobile-drawer .client-switcher{
    display:flex;
    flex:none;
    overflow:visible;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--portal-line);
  }
  .mobile-drawer .client-switch-list{
    max-height:34svh;
    overflow:auto;
  }
  .mobile-user-panel{
    border-top:1px solid var(--portal-line);
    margin-top:14px;
    padding-top:14px;
  }
  .topbar{height:auto;align-items:center;gap:12px;padding:14px 16px}
  .content{padding:18px}
  .grid-2p,.grid-3p,.grid-4p,.report-grid,.form-grid{grid-template-columns:1fr}
  .span-2{grid-column:auto}
  .permission-grid{grid-template-columns:1fr}
  .report-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Cartfy premium portal refresh */
:root{
  --cartfy-primary:oklch(58% .22 255);
  --cartfy-primary-2:oklch(68% .16 245);
  --cartfy-ink:oklch(14% .025 255);
  --cartfy-radius-sm:8px;
  --cartfy-radius-md:12px;
  --cartfy-radius-lg:18px;
  --cartfy-shadow:0 24px 48px oklch(0% 0 0 / .22),0 12px 28px oklch(58% .18 255 / .12);
}
:root[data-theme="light"]{
  --portal-bg:oklch(97% .009 255);
  --portal-panel:oklch(99% .006 255);
  --portal-panel-2:oklch(94% .014 255);
  --portal-line:oklch(72% .025 255 / .28);
  --portal-line-2:oklch(65% .03 255 / .34);
  --portal-text:oklch(19% .03 255);
  --portal-muted:oklch(47% .035 255);
  --portal-subtle:oklch(58% .03 255);
  --portal-blue:oklch(54% .22 255);
  --portal-blue-2:oklch(48% .18 250);
  --portal-green:oklch(52% .16 150);
  --portal-orange:oklch(58% .15 55);
  --portal-red:oklch(56% .19 28);
}
:root[data-theme="light"] body{
  background:
    radial-gradient(circle at 16% -10%,oklch(64% .18 255 / .16),transparent 34rem),
    radial-gradient(circle at 92% 4%,oklch(78% .12 245 / .14),transparent 30rem),
    var(--portal-bg);
}
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .topbar{background:oklch(99% .006 255 / .9)}
:root[data-theme="light"] .card-p{background:linear-gradient(180deg,oklch(99% .006 255),oklch(96% .01 255))}
:root[data-theme="light"] .data-table{background:oklch(99% .006 255)}
:root[data-theme="light"] .data-table th{background:oklch(94% .014 255)}
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field textarea,
:root[data-theme="light"] .field select{background:oklch(99% .006 255);color:var(--portal-text)}
:root[data-theme="light"] .login-footer-links a{
  background:oklch(99% .006 255 / .88);
  color:oklch(42% .035 255);
}

.brand-lockup img,.side-logo img,.login-visual-core img{
  object-fit:contain;
  background:oklch(99% .006 255);
  padding:5px;
  border:1px solid oklch(100% .005 255 / .18);
  box-shadow:0 10px 24px oklch(0% 0 0 / .18);
}
.brand-lockup img{border-radius:50%;width:50px;height:50px}
.side-logo img{border-radius:50%;width:40px;height:40px;padding:4px}
.login-visual{
  position:relative;
  width:min(430px,74vw);
  aspect-ratio:1;
  margin:24px 0;
  display:grid;
  place-items:center;
  isolation:isolate;
}
.login-visual:before{
  content:"";
  position:absolute;
  inset:8%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,oklch(58% .22 255 / .14),transparent 44%),
    conic-gradient(from 90deg,transparent,oklch(66% .18 250 / .35),transparent 38%,oklch(58% .22 255 / .42),transparent 72%);
  filter:blur(.2px);
  animation:cartfySpin 18s linear infinite;
}
.login-visual:after{
  content:"";
  position:absolute;
  inset:20%;
  border:1px solid oklch(100% .005 255 / .12);
  border-radius:50%;
  box-shadow:0 0 80px oklch(58% .22 255 / .22), inset 0 0 40px oklch(58% .22 255 / .08);
}
.login-visual span{
  position:absolute;
  border-radius:50%;
  border:1px solid oklch(100% .005 255 / .15);
  animation:cartfyPulse 4.8s ease-out infinite;
}
.login-visual span:nth-child(1){inset:12%;animation-delay:0s}
.login-visual span:nth-child(2){inset:25%;animation-delay:1.1s}
.login-visual span:nth-child(3){inset:38%;animation-delay:2.2s}
.login-visual-core{
  width:112px;
  height:112px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,oklch(99% .006 255),oklch(86% .03 255));
  border:1px solid oklch(100% .006 255 / .34);
  box-shadow:0 28px 70px oklch(0% 0 0 / .38),0 0 54px oklch(58% .22 255 / .28);
  z-index:2;
}
.login-visual-core img{width:78px;height:78px;border-radius:50%;box-shadow:none;border:0;padding:7px}
@keyframes cartfySpin{to{transform:rotate(360deg)}}
@keyframes cartfyPulse{
  0%{transform:scale(.88);opacity:.68}
  70%{opacity:.14}
  100%{transform:scale(1.13);opacity:0}
}
.theme-toggle{
  display:inline-flex;align-items:center;gap:8px;
  min-height:40px;
  border:1px solid var(--portal-line-2);
  background:oklch(100% .005 255 / .045);
  color:var(--portal-text);
  border-radius:999px;
  padding:5px 12px 5px 6px;
  cursor:pointer;
  font-weight:900;
}
.theme-toggle span{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--portal-blue),var(--portal-blue-2));box-shadow:0 0 20px oklch(58% .22 255 / .32)}
.theme-toggle strong{font-size:12px;letter-spacing:.02em}
.client-hero{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  border:1px solid var(--portal-line);
  background:
    linear-gradient(135deg,oklch(58% .22 255 / .18),transparent 42%),
    linear-gradient(180deg,var(--portal-panel),var(--portal-panel-2));
  border-radius:var(--cartfy-radius-lg);
  padding:30px;
  box-shadow:var(--cartfy-shadow);
  margin-bottom:16px;
}
.client-hero h2{font-size:34px;line-height:1.05;letter-spacing:-.04em;margin:8px 0 10px}
.client-hero p{max-width:620px;color:var(--portal-muted);line-height:1.55}
.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.14em;font-weight:900;color:var(--portal-blue-2)}
.client-hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.client-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.flow-item{border:1px solid var(--portal-line);border-radius:var(--cartfy-radius-md);background:oklch(100% .005 255 / .035);padding:14px;min-height:92px;display:flex;flex-direction:column;gap:10px}
.flow-item strong{font-size:13px;line-height:1.35;color:var(--portal-text)}
.client-summary .metric-value{font-size:26px}
.portal-role-client .content{max-width:1180px;margin:0 auto;width:100%}
.portal-role-client .section-title h2{font-size:28px}
.portal-role-admin .content{max-width:1500px}
@media(max-width:980px){
  .login-visual{width:min(310px,70vw);margin:18px auto}
  .login-visual-core{width:88px;height:88px}
  .login-visual-core img{width:62px;height:62px}
  .client-hero{align-items:flex-start;flex-direction:column;padding:22px}
  .client-flow{grid-template-columns:1fr}
}

/* Final client-first experience pass */
@media(min-width:981px){
  .portal-login{
    height:100dvh;
    min-height:680px;
    overflow:hidden;
    grid-template-columns:minmax(0,1.02fr) minmax(380px,.78fr);
  }
  .login-brand{padding:34px 50px 34px;gap:18px}
  .login-panel-wrap{padding:28px 42px}
  .login-copy{max-width:590px}
  .login-copy h1{font-size:clamp(36px,4vw,58px);margin-bottom:16px;letter-spacing:-.04em}
  .login-copy p{font-size:16px;line-height:1.55;max-width:540px}
  .login-panel{max-width:405px;padding:26px}
}
.login-brand{
  justify-content:center;
  position:relative;
  overflow:hidden;
  background:oklch(10% .026 255)!important;
  color:oklch(96% .012 255)!important;
}
.login-brand .brand-name,
.login-brand .login-copy h1{
  color:oklch(98% .008 255)!important;
}
.login-brand .brand-kicker,
.login-brand .login-copy p,
.login-brand .login-footer-links a{
  color:oklch(78% .035 255)!important;
}
.login-bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  filter:saturate(1.08) contrast(1.04) brightness(.58);
}
.login-brand:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,oklch(9% .025 255 / .76),oklch(12% .035 255 / .42) 54%,oklch(10% .026 255 / .72)),
    linear-gradient(0deg,oklch(7% .02 255 / .5),transparent 38%,oklch(8% .022 255 / .44));
  pointer-events:none;
}
.login-brand .brand-lockup{position:absolute;top:30px;left:42px;z-index:3}
.login-brand .login-visual,
.login-brand .login-copy{position:relative;z-index:2}
.brand-lockup img,.side-logo img,.login-visual-core img,.node-main img{
  object-fit:contain;
  background:transparent;
  padding:0;
  border:0;
  box-shadow:none;
}
.brand-lockup img{width:46px;height:46px;border-radius:50%}
.side-logo img{width:38px;height:38px;border-radius:50%;background:oklch(100% .005 255 / .06);padding:3px}
.login-signals{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.login-signals span{
  border:1px solid oklch(100% .006 255 / .13);
  background:oklch(100% .006 255 / .045);
  color:var(--portal-muted);
  border-radius:999px;
  padding:7px 10px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.login-presets,.hint,.trust-row{display:none!important}
.panel-sub{line-height:1.5}

.ops-map.login-visual{
  width:min(520px,72vw);
  max-height:42vh;
  margin:44px 0 26px;
  aspect-ratio:1.55;
  display:block;
  border:1px solid oklch(100% .006 255 / .1);
  border-radius:28px;
  background:
    linear-gradient(90deg,oklch(100% .006 255 / .04) 1px,transparent 1px),
    linear-gradient(0deg,oklch(100% .006 255 / .035) 1px,transparent 1px),
    radial-gradient(circle at 50% 50%,oklch(58% .22 255 / .18),transparent 45%),
    linear-gradient(145deg,oklch(12% .026 255),oklch(18% .035 255));
  background-size:42px 42px,42px 42px,100% 100%,100% 100%;
  box-shadow:0 26px 80px oklch(0% 0 0 / .28), inset 0 0 0 1px oklch(100% .006 255 / .04);
}
.ops-map.login-visual:before,
.ops-map.login-visual:after{content:none}
.ops-map .ops-node{
  position:absolute;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:auto;
  min-width:0;
  border:1px solid oklch(100% .006 255 / .14);
  background:oklch(14% .027 255 / .92);
  color:var(--portal-text);
  border-radius:999px;
  padding:8px 11px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.03em;
  animation:none;
  box-shadow:0 12px 30px oklch(0% 0 0 / .22);
  z-index:2;
}
.ops-map .node-main{
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:96px;height:96px;padding:0;border-radius:50%;
  background:linear-gradient(145deg,oklch(20% .04 255),oklch(10% .025 255));
  border-color:oklch(58% .22 255 / .38);
  box-shadow:0 0 52px oklch(58% .22 255 / .28),0 24px 54px oklch(0% 0 0 / .34);
}
.ops-map .node-main img{width:72px;height:72px;border-radius:50%}
.ops-map .n1{left:9%;top:18%}.ops-map .n2{right:10%;top:17%}.ops-map .n3{left:12%;bottom:18%}.ops-map .n4{right:9%;bottom:18%}.ops-map .n5{left:50%;bottom:7%;transform:translateX(-50%)}
.ops-map .flow{
  position:absolute;
  left:50%;top:50%;
  width:36%;height:2px;
  transform-origin:left center;
  background:linear-gradient(90deg,transparent,oklch(68% .18 245),transparent);
  border-radius:999px;
  opacity:.72;
  animation:flowPulse 2.8s ease-in-out infinite;
  z-index:1;
}
.ops-map .f1{transform:rotate(210deg)}
.ops-map .f2{transform:rotate(330deg);animation-delay:.5s}
.ops-map .f3{transform:rotate(150deg);animation-delay:1s}
.ops-map .f4{transform:rotate(30deg);animation-delay:1.5s}
@keyframes flowPulse{
  0%,100%{opacity:.18;filter:blur(0);clip-path:inset(0 82% 0 0)}
  50%{opacity:.95;filter:drop-shadow(0 0 12px oklch(62% .2 255 / .56));clip-path:inset(0 0 0 0)}
}

:root[data-theme="light"] .sidebar{
  background:oklch(98% .008 255 / .96)!important;
  border-right-color:oklch(70% .026 255 / .32);
  box-shadow:12px 0 34px oklch(30% .04 255 / .05);
}
:root[data-theme="light"] .side-logo{border-bottom-color:oklch(70% .026 255 / .28)}
:root[data-theme="light"] .side-footer{border-top-color:oklch(70% .026 255 / .28)}
:root[data-theme="light"] .nav-btn{color:oklch(45% .035 255)}
:root[data-theme="light"] .nav-btn:hover{background:oklch(91% .025 255);color:oklch(20% .035 255)}
:root[data-theme="light"] .nav-btn.active{background:oklch(58% .2 255 / .12);border-color:oklch(58% .2 255 / .24);color:oklch(20% .035 255)}
:root[data-theme="light"] .nav-icon{background:oklch(90% .022 255)}
:root[data-theme="light"] .mobile-drawer{background:oklch(99% .006 255);box-shadow:0 24px 60px oklch(15% .03 255 / .18)}
:root[data-theme="light"] .theme-toggle{background:oklch(94% .014 255);color:var(--portal-text)}

.client-command{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  gap:18px;
  border:1px solid var(--portal-line);
  border-radius:22px;
  padding:28px;
  margin-bottom:16px;
  background:
    radial-gradient(circle at 15% 0%,oklch(58% .22 255 / .2),transparent 34rem),
    linear-gradient(145deg,var(--portal-panel),var(--portal-panel-2));
  box-shadow:var(--cartfy-shadow);
}
.command-copy h2{font-size:38px;line-height:1.03;letter-spacing:-.045em;margin:9px 0 12px}
.command-copy p{max-width:650px;color:var(--portal-muted);line-height:1.58}
.command-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.command-panel{
  border:1px solid var(--portal-line);
  border-radius:18px;
  padding:16px;
  background:oklch(100% .006 255 / .045);
}
.command-panel-title{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--portal-muted);margin-bottom:12px}
.operation-step{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid var(--portal-line)}
.operation-step:first-of-type{border-top:0}
.operation-step strong{font-size:13px;line-height:1.3;text-align:right;color:var(--portal-text)}
.next-action{color:var(--portal-muted);line-height:1.55;margin-bottom:16px}
.client-hero,.client-flow{display:none!important}

@media(max-width:980px){
  .portal-login{min-height:100dvh}
  .login-brand{padding:86px 26px 26px;min-height:auto}
  .login-brand .brand-lockup{left:24px;top:22px}
  .ops-map.login-visual{width:100%;max-height:none;margin:12px 0 22px;aspect-ratio:1.25}
  .ops-map .node-main{width:78px;height:78px}.ops-map .node-main img{width:58px;height:58px}
  .ops-map .ops-node:not(.node-main){font-size:10px;padding:7px 9px}
  .login-copy h1{font-size:34px}
  .login-panel-wrap{padding:22px}
  .client-command{grid-template-columns:1fr;padding:22px}
  .command-copy h2{font-size:30px}
  .operation-step{align-items:flex-start;flex-direction:column}
  .operation-step strong{text-align:left}
}

@media(min-width:981px){
  .portal-login{min-height:0;height:100dvh;overflow:hidden}
  .ops-map.login-visual{max-height:40vh;margin:34px 0 22px}
  .login-copy h1{font-size:clamp(34px,3.6vw,54px)}
  .login-copy p{font-size:15px}
}

/* Neural login visual replacing operational disk */
.neural-map.login-visual{
  position:relative;
  width:min(560px,72vw);
  max-height:40vh;
  margin:34px auto 22px;
  aspect-ratio:1.55;
  display:block;
  border:1px solid oklch(100% .006 255 / .1);
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 52% 46%,oklch(58% .22 255 / .22),transparent 35%),
    linear-gradient(90deg,oklch(100% .006 255 / .035) 1px,transparent 1px),
    linear-gradient(0deg,oklch(100% .006 255 / .03) 1px,transparent 1px),
    linear-gradient(145deg,oklch(10% .024 255 / .72),oklch(17% .034 255 / .5));
  background-size:100% 100%,46px 46px,46px 46px,100% 100%;
  box-shadow:0 26px 80px oklch(0% 0 0 / .28), inset 0 0 0 1px oklch(100% .006 255 / .04);
}
.neural-map.login-visual:before,
.neural-map.login-visual:after{content:none!important}
.neural-map svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.neural-lines path{
  fill:none;
  stroke:url(#cartfyLine);
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-dasharray:5 10;
  animation:neuralDash 18s linear infinite;
}
.neural-lines path:nth-child(2){animation-duration:22s;opacity:.78}
.neural-lines path:nth-child(3){animation-duration:26s;opacity:.56}
.neural-lines path:nth-child(4){animation-duration:20s;opacity:.44}
.neural-lines path:nth-child(5){animation-duration:24s;opacity:.5}
.neural-pulses circle{fill:oklch(72% .18 245);filter:drop-shadow(0 0 10px oklch(66% .2 250 / .9))}
.neural-labels text{
  fill:oklch(96% .012 255);
  font-size:13px;
  font-weight:900;
  letter-spacing:.01em;
  paint-order:stroke;
  stroke:oklch(7% .025 255 / .86);
  stroke-width:5px;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 8px oklch(58% .22 255 / .34));
}
.neural-logo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:88px;height:88px;border-radius:50%;display:grid;place-items:center;z-index:3;
  background:
    radial-gradient(circle at 50% 50%,oklch(86% .08 245 / .95) 0 5%,oklch(68% .2 252 / .9) 6% 14%,transparent 15%),
    radial-gradient(circle at 50% 50%,oklch(58% .22 255 / .5),transparent 58%),
    radial-gradient(circle at 35% 25%,oklch(35% .08 255 / .82),oklch(11% .026 255 / .72) 70%);
  border:1px solid oklch(62% .2 255 / .34);
  box-shadow:0 0 44px oklch(58% .22 255 / .34),0 20px 48px oklch(0% 0 0 / .35);
  animation:neuralCorePulse 3.6s ease-in-out infinite;
}
.neural-logo:before,
.neural-logo:after{
  content:"";
  position:absolute;
  inset:13px;
  border-radius:50%;
  border:1px solid oklch(76% .14 245 / .42);
  box-shadow:0 0 28px oklch(65% .2 250 / .28);
}
.neural-logo:after{
  inset:-9px;
  border-style:dashed;
  opacity:.52;
  animation:neuralCoreSpin 14s linear infinite;
}
.neural-logo img{display:none}
.neural-node{
  position:absolute;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid oklch(72% .16 245 / .42);
  background:oklch(9% .026 255 / .9);
  color:oklch(96% .012 255);
  border-radius:999px;
  padding:7px 11px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:0 12px 28px oklch(0% 0 0 / .32),0 0 20px oklch(58% .22 255 / .22);
}
.neural-node:before{
  content:"";width:6px;height:6px;border-radius:50%;margin-right:7px;
  background:oklch(68% .18 245);box-shadow:0 0 12px oklch(68% .18 245 / .8);
}
.neural-node.n1{left:30px;top:62px;transform:none}
.neural-node.n2{left:50%;top:34px;transform:translateX(-50%)}
.neural-node.n3{right:30px;top:62px;transform:none}
.neural-node.n4{left:38px;bottom:60px;transform:none}
.neural-node.n5{right:44px;bottom:60px;transform:none}
.neural-node.n6{left:50%;bottom:8%;transform:translateX(-50%)}
@keyframes neuralDash{to{stroke-dashoffset:-180}}
@keyframes neuralCorePulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 44px oklch(58% .22 255 / .34),0 20px 48px oklch(0% 0 0 / .35)}
  50%{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 0 72px oklch(62% .22 255 / .48),0 22px 54px oklch(0% 0 0 / .38)}
}
@keyframes neuralCoreSpin{to{transform:rotate(360deg)}}
@media(max-width:980px){
  .portal-login{display:flex;flex-direction:column;min-height:100svh}
  .login-brand{
    min-height:48svh;
    padding:22px 20px 20px;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
  }
  .login-brand .brand-lockup{
    position:relative;
    left:auto;
    top:auto;
    max-width:100%;
    justify-content:center;
    flex-direction:row;
    gap:10px;
    margin:0 auto 12px;
    text-align:left;
  }
  .brand-name{font-size:18px}
  .brand-kicker{font-size:10px;letter-spacing:.1em}
  .login-copy{
    width:100%;
    max-width:340px;
    margin:0 auto;
  }
  .login-copy h1{font-size:28px;line-height:1.08;margin-bottom:10px}
  .login-copy p{font-size:14px;line-height:1.45}
  .login-panel-wrap{padding:16px;align-items:flex-start}
  .login-panel-stack{max-width:none}
  .login-panel{max-width:none;padding:20px;border-radius:14px}
  .login-footer-links{margin-top:10px;gap:6px}
  .login-footer-links{display:flex}
  .login-footer-links a{min-height:32px;padding:7px 10px;font-size:11px}
  .panel-title{font-size:22px}
  .panel-sub{font-size:13px;margin-bottom:18px}
  .neural-map.login-visual{
    width:min(100%,360px);
    max-height:18svh;
    margin:4px auto 12px;
    aspect-ratio:1.55;
    border-radius:18px;
  }
  .neural-logo{width:74px;height:74px}.neural-logo img{width:54px;height:54px}
  .neural-labels text{font-size:12px;stroke-width:4px}
  .neural-node{font-size:8.5px;padding:5px 7px;max-width:none;white-space:nowrap}
  .neural-node:before{width:5px;height:5px;margin-right:5px}
  .neural-node.n1{left:12px;top:42px;transform:none}
  .neural-node.n2{left:50%;top:12px;transform:translateX(-50%)}
  .neural-node.n3{right:12px;top:42px;transform:none}
  .neural-node.n4{left:14px;bottom:34px;transform:none}
  .neural-node.n5{right:16px;bottom:34px;transform:none}
}
@media(max-width:420px){
  .login-brand{min-height:45svh;padding:18px 16px 16px}
  .brand-lockup img{width:38px;height:38px}
  .brand-name{font-size:16px}
  .login-copy h1{font-size:24px}
  .login-copy p{font-size:13px}
  .neural-map.login-visual{max-height:18svh;margin-bottom:10px}
  .neural-labels text{font-size:11px;stroke-width:4px}
  .neural-node{font-size:7.5px;padding:4px 5px}
  .neural-node.n1{left:8px;top:34px;transform:none}
  .neural-node.n2{left:50%;top:8px;transform:translateX(-50%)}
  .neural-node.n3{right:8px;top:34px;transform:none}
  .neural-node.n4{left:10px;bottom:28px;transform:none}
  .neural-node.n5{right:10px;bottom:28px;transform:none}
  .login-panel-wrap{padding:12px}
  .field{margin-bottom:12px}
  .field input,.field textarea,.field select{padding:11px 12px}
}
@media(prefers-reduced-motion:reduce){
  .login-bg-video{display:none}
}

/* Production layout hardening */
.side-logo > div,
.nav-btn,
.topbar,
.topbar-actions{min-width:0}
.nav-btn{
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nav-icon{flex:0 0 24px}
.nav-icon svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.side-logo strong,
.side-logo span{
  max-width:170px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#clientPicker{
  max-width:260px;
  min-width:180px;
  border:1px solid var(--portal-line-2);
  background:oklch(13% .018 255);
  color:var(--portal-text);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}
:root[data-theme="light"] #clientPicker{
  background:oklch(99% .006 255);
  color:var(--portal-text);
}
:root[data-theme="light"] .sidebar{
  background:oklch(99% .006 255 / .96);
  border-right-color:var(--portal-line);
  box-shadow:8px 0 28px oklch(15% .03 255 / .04);
}
:root[data-theme="light"] .side-logo,
:root[data-theme="light"] .side-footer{border-color:var(--portal-line)}
:root[data-theme="light"] .nav-btn{color:oklch(43% .035 255)}
:root[data-theme="light"] .nav-btn:hover{
  background:oklch(90% .035 255 / .52);
  color:var(--portal-text);
}
:root[data-theme="light"] .nav-btn.active{
  background:oklch(60% .2 255 / .13);
  border-color:oklch(58% .2 255 / .25);
  color:oklch(28% .08 255);
}
:root[data-theme="light"] .nav-icon,
:root[data-theme="light"] .side-logo img{background:oklch(91% .025 255 / .8)}
:root[data-theme="light"] .user-mini{color:var(--portal-muted)}
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .mobile-drawer{
  background:oklch(99% .006 255)!important;
  color:var(--portal-text)!important;
}
:root[data-theme="light"] .side-logo strong,
:root[data-theme="light"] .mobile-drawer-head strong{
  color:var(--portal-text)!important;
}
:root[data-theme="light"] .side-logo span,
:root[data-theme="light"] .user-mini{
  color:var(--portal-muted)!important;
}
:root[data-theme="light"] .nav-btn{
  color:oklch(33% .045 255)!important;
}
:root[data-theme="light"] .nav-btn:hover,
:root[data-theme="light"] .nav-btn.active{
  color:oklch(18% .04 255)!important;
}
@media(max-width:980px){
  #clientPicker{min-width:0;width:100%;max-width:100%}
  .topbar-actions{width:100%;flex-wrap:wrap}
}

/* Internal dashboard usability pass */
.dashboard-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  border:1px solid var(--portal-line);
  border-radius:22px;
  padding:28px;
  margin-bottom:16px;
  background:
    radial-gradient(circle at 14% 0%,oklch(60% .22 260 / .2),transparent 34rem),
    linear-gradient(145deg,var(--portal-panel),var(--portal-panel-2));
  box-shadow:0 24px 70px oklch(0% 0 0 / .18);
}
.dashboard-hero h2{
  font-size:clamp(30px,4vw,46px);
  line-height:1.02;
  letter-spacing:-.045em;
  margin:8px 0 10px;
}
.dashboard-hero p{
  max-width:680px;
  color:var(--portal-muted);
  line-height:1.58;
}
.hero-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  min-width:260px;
}
.dashboard-alert{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:1px solid oklch(60% .22 260 / .22);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:16px;
  background:oklch(60% .22 260 / .08);
}
.dashboard-alert strong{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.dashboard-alert span{
  color:var(--portal-muted);
  line-height:1.45;
  text-align:right;
}
.dashboard-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:16px;
}
.dashboard-kpis .metric{
  position:relative;
  overflow:hidden;
}
.dashboard-kpis .metric:after{
  content:"";
  position:absolute;
  right:16px;
  top:16px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--portal-blue-2);
  box-shadow:0 0 22px var(--portal-blue-2);
}
.metric-done:after{background:var(--portal-green);box-shadow:0 0 22px var(--portal-green)}
.metric-warn:after{background:var(--portal-orange);box-shadow:0 0 22px var(--portal-orange)}
.metric-stop:after{background:var(--portal-red);box-shadow:0 0 22px var(--portal-red)}
.dashboard-columns{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:16px;
}
.panel-card h3{
  margin-bottom:14px;
}
.priority-list{
  display:grid;
  gap:10px;
}
.priority-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid var(--portal-line);
  border-radius:12px;
  padding:13px;
  background:oklch(100% .006 255 / .035);
  color:var(--portal-text);
  cursor:pointer;
  text-align:left;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.priority-row:hover{
  transform:translateY(-1px);
  border-color:oklch(60% .22 260 / .38);
  background:oklch(60% .22 260 / .08);
}
.priority-row strong{
  font-size:13px;
  line-height:1.35;
  text-align:right;
}
.report-snapshot{
  display:grid;
  gap:10px;
}
.snapshot-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid var(--portal-line);
  padding:0 0 12px;
}
.snapshot-row:last-child{
  border-bottom:0;
  padding-bottom:0;
}
.snapshot-row strong,
.snapshot-row span{
  display:block;
}
.snapshot-row div span{
  margin-top:4px;
  color:var(--portal-muted);
  font-size:12px;
}
.snapshot-row > span{
  font-weight:900;
  white-space:nowrap;
}
.next-stack{
  display:grid;
  gap:12px;
  margin-bottom:16px;
}
.next-stack p{
  color:var(--portal-muted);
  line-height:1.5;
}
.finance-kpis{
  margin-top:0;
}
.finance-alert{
  margin-bottom:16px;
}
.payment-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.payment-actions .btn-portal{
  padding:9px 11px;
  font-size:12px;
}
.inline-upload{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  min-width:240px;
}
.inline-upload input[type="file"],
.inline-upload input[type="date"]{
  max-width:190px;
  padding:8px 9px;
  border-radius:10px;
  border:1px solid var(--portal-line);
  background:var(--portal-soft);
  color:var(--portal-text);
  font-size:12px;
}
.signup-entry{
  margin-top:12px;
  width:100%;
  min-height:46px;
  border:1px solid var(--portal-line-2);
  border-radius:10px;
  background:oklch(100% .006 255 / .04);
  color:var(--portal-text);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:900;
  cursor:pointer;
  padding:11px 14px;
}
.signup-entry span{
  width:26px;
  height:26px;
  border-radius:50%;
  background:oklch(100% .006 255 / .06);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex:0 0 26px;
}
.signup-entry img{
  width:22px;
  height:22px;
  object-fit:contain;
  border-radius:50%;
  display:block;
  background:transparent!important;
  padding:0!important;
}
.signup-panel[hidden]{display:none}
.signup-panel{
  max-height:min(760px,calc(100dvh - 56px));
  overflow:auto;
}
.signup-panel .field{
  margin-bottom:12px;
}
.signup-panel textarea{
  min-height:86px;
}
.signup-progress{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin:0 0 18px;
}
.signup-progress span{
  border:1px solid var(--portal-line);
  border-radius:999px;
  padding:7px 8px;
  color:var(--portal-muted);
  background:oklch(100% .006 255 / .035);
  font-size:10px;
  font-weight:900;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
}
.signup-progress .active{
  color:var(--portal-text);
  border-color:oklch(60% .22 260 / .42);
  background:oklch(60% .22 260 / .14);
}
:root[data-theme="light"] .signup-entry{
  background:oklch(99% .006 255);
  color:var(--portal-text);
}
:root[data-theme="light"] .signup-entry span{
  background:oklch(91% .025 255 / .8);
}
:root[data-theme="light"] .signup-progress span{
  background:oklch(96% .012 255);
}
:root[data-theme="light"] .dashboard-hero{
  background:
    radial-gradient(circle at 14% 0%,oklch(60% .2 255 / .12),transparent 34rem),
    linear-gradient(145deg,oklch(99% .006 255),oklch(95% .014 255));
  box-shadow:0 24px 70px oklch(30% .04 255 / .08);
}
:root[data-theme="light"] .dashboard-alert,
:root[data-theme="light"] .priority-row{
  background:oklch(97% .012 255);
}

html[data-theme="light"] body .portal-shell .sidebar,
html[data-theme="light"] body .portal-shell .mobile-drawer{
  background:oklch(99% .006 255)!important;
  color:oklch(18% .04 255)!important;
}
html[data-theme="light"] body .portal-shell .sidebar .nav-btn,
html[data-theme="light"] body .portal-shell .mobile-drawer .nav-btn{
  color:oklch(28% .05 255)!important;
  background:transparent!important;
}
html[data-theme="light"] body .portal-shell .sidebar .nav-btn.active,
html[data-theme="light"] body .portal-shell .mobile-drawer .nav-btn.active{
  color:oklch(18% .06 255)!important;
  background:oklch(60% .2 255 / .12)!important;
}
html[data-theme="light"] body .portal-shell .sidebar .nav-icon,
html[data-theme="light"] body .portal-shell .mobile-drawer .nav-icon{
  color:inherit!important;
  background:oklch(91% .025 255 / .85)!important;
}
html[data-theme="light"] body .portal-shell .sidebar .side-logo strong,
html[data-theme="light"] body .portal-shell .sidebar .side-logo span{
  color:oklch(18% .04 255)!important;
}
html[data-theme="light"] body .portal-shell .sidebar .side-logo span{
  color:oklch(47% .035 255)!important;
}
@media(max-width:1180px){
  .dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-columns{grid-template-columns:1fr}
  .client-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .client-work-grid{grid-template-columns:1fr}
  .report-metrics.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .section-title{
    align-items:flex-start;
    flex-direction:column;
  }
  .section-actions,
  .section-actions .btn-portal{
    width:100%;
  }
  .dashboard-hero{
    align-items:flex-start;
    flex-direction:column;
    padding:22px;
  }
  .hero-actions{
    width:100%;
    min-width:0;
    justify-content:flex-start;
  }
  .hero-actions .btn-portal{
    flex:1 1 160px;
  }
  .dashboard-alert{
    align-items:flex-start;
    flex-direction:column;
  }
  .dashboard-alert span{
    text-align:left;
  }
  .dashboard-kpis{grid-template-columns:1fr}
  .client-home-hero{align-items:flex-start;flex-direction:column}
  .client-home-hero .btn-portal{width:100%}
  .client-summary-grid{grid-template-columns:1fr}
  .timeline-row{grid-template-columns:1fr}
  .client-record-card{align-items:flex-start;flex-direction:column}
  .client-record-card > div:last-child{justify-content:flex-start}
  .client-report-head,.client-contract-head{flex-direction:column}
  .contract-stepper{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ticket-category-grid{grid-template-columns:1fr;grid-column:span 1}
  .form-grid{grid-template-columns:1fr}
  .span-2{grid-column:span 1}
  .priority-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .priority-row strong{
    text-align:left;
  }
  .snapshot-row{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* Light theme navigation hard override */
html[data-theme="light"] .portal-shell .sidebar,
html[data-theme="light"] .portal-shell .mobile-drawer{
  background:oklch(99% .006 255)!important;
  color:oklch(18% .04 255)!important;
}
html[data-theme="light"] .portal-shell .sidebar .side-logo,
html[data-theme="light"] .portal-shell .sidebar .side-footer,
html[data-theme="light"] .portal-shell .mobile-drawer .mobile-drawer-head{
  border-color:oklch(72% .025 255 / .34)!important;
}
html[data-theme="light"] .portal-shell .sidebar .side-logo strong,
html[data-theme="light"] .portal-shell .mobile-drawer .mobile-drawer-head strong{
  color:oklch(17% .04 255)!important;
}
html[data-theme="light"] .portal-shell .sidebar .side-logo span,
html[data-theme="light"] .portal-shell .sidebar .user-mini{
  color:oklch(47% .035 255)!important;
}
html[data-theme="light"] .portal-shell .sidebar .nav-btn,
html[data-theme="light"] .portal-shell .mobile-drawer .nav-btn{
  background:transparent!important;
  border-color:transparent!important;
  color:oklch(30% .045 255)!important;
}
html[data-theme="light"] .portal-shell .sidebar .nav-btn:hover,
html[data-theme="light"] .portal-shell .mobile-drawer .nav-btn:hover{
  background:oklch(92% .022 255)!important;
  color:oklch(16% .04 255)!important;
}
html[data-theme="light"] .portal-shell .sidebar .nav-btn.active,
html[data-theme="light"] .portal-shell .mobile-drawer .nav-btn.active{
  background:oklch(57% .2 255 / .13)!important;
  border-color:oklch(57% .2 255 / .26)!important;
  color:oklch(16% .055 255)!important;
}
html[data-theme="light"] .portal-shell .sidebar .nav-icon,
html[data-theme="light"] .portal-shell .mobile-drawer .nav-icon{
  background:oklch(91% .025 255 / .9)!important;
  color:inherit!important;
}

/* Explicit shell theme override for browsers that still had the old dark state saved. */
.portal-shell.portal-theme-light .sidebar,
.portal-shell.portal-theme-light .mobile-drawer{
  background:oklch(99% .006 255)!important;
  color:oklch(18% .04 255)!important;
  box-shadow:inset -1px 0 0 oklch(70% .025 255 / .28)!important;
}
.portal-shell.portal-theme-light .sidebar .side-logo,
.portal-shell.portal-theme-light .sidebar .side-footer,
.portal-shell.portal-theme-light .mobile-drawer .mobile-drawer-head{
  border-color:oklch(72% .025 255 / .36)!important;
}
.portal-shell.portal-theme-light .sidebar .side-logo strong,
.portal-shell.portal-theme-light .mobile-drawer .mobile-drawer-head strong,
.portal-shell.portal-theme-light .sidebar .user-mini strong{
  color:oklch(16% .04 255)!important;
}
.portal-shell.portal-theme-light .sidebar .side-logo span,
.portal-shell.portal-theme-light .sidebar .user-mini,
.portal-shell.portal-theme-light .mobile-drawer .mobile-drawer-head span{
  color:oklch(45% .035 255)!important;
}
.portal-shell.portal-theme-light .sidebar .nav-btn,
.portal-shell.portal-theme-light .mobile-drawer .nav-btn{
  background:transparent!important;
  border-color:transparent!important;
  color:oklch(27% .045 255)!important;
}
.portal-shell.portal-theme-light .sidebar .nav-btn:hover,
.portal-shell.portal-theme-light .mobile-drawer .nav-btn:hover{
  background:oklch(93% .018 255)!important;
  color:oklch(14% .04 255)!important;
}
.portal-shell.portal-theme-light .sidebar .nav-btn.active,
.portal-shell.portal-theme-light .mobile-drawer .nav-btn.active{
  background:oklch(57% .2 255 / .13)!important;
  border-color:oklch(57% .2 255 / .28)!important;
  color:oklch(15% .055 255)!important;
}
.portal-shell.portal-theme-light .sidebar .nav-icon,
.portal-shell.portal-theme-light .mobile-drawer .nav-icon{
  background:oklch(91% .025 255 / .92)!important;
  color:inherit!important;
}
.portal-shell.portal-theme-light .sidebar .btn-portal{
  background:oklch(97% .012 255)!important;
  border-color:oklch(72% .025 255 / .4)!important;
  color:oklch(18% .04 255)!important;
}
.portal-shell.portal-theme-dark .sidebar{
  background:oklch(13.5% .02 255 / .96)!important;
  color:oklch(96% .012 255)!important;
  box-shadow:none!important;
}
.portal-shell.portal-theme-dark .topbar,
.portal-shell.portal-theme-dark .mobile-drawer{
  background:oklch(15% .018 255 / .94)!important;
  color:oklch(96% .012 255)!important;
}
.portal-shell.portal-theme-dark .sidebar .nav-btn,
.portal-shell.portal-theme-dark .mobile-drawer .nav-btn{
  color:oklch(72% .028 255)!important;
}
.portal-shell.portal-theme-dark .sidebar .nav-btn:hover,
.portal-shell.portal-theme-dark .mobile-drawer .nav-btn:hover,
.portal-shell.portal-theme-dark .sidebar .nav-btn.active,
.portal-shell.portal-theme-dark .mobile-drawer .nav-btn.active{
  color:oklch(96% .012 255)!important;
}
.client-switcher{
  border-top:1px solid var(--portal-line);
  padding-top:12px;
  min-height:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.client-admin-return{
  width:100%;
  border:1px solid var(--portal-line);
  border-radius:12px;
  background:transparent;
  color:var(--portal-muted);
  padding:10px 11px;
  margin-bottom:12px;
  text-align:left;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}
.client-admin-return:hover{
  background:oklch(100% .005 255 / .045);
  color:var(--portal-text);
}
.client-admin-return.active{
  background:oklch(60% .22 260 / .12);
  border-color:oklch(60% .22 260 / .32);
  color:var(--portal-text);
}
.client-switcher-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  padding:0 2px;
}
.client-switcher-head span{
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--portal-subtle);
}
.client-switcher-head strong{
  font-size:11px;
  font-weight:900;
  color:var(--portal-muted);
}
.client-switch-list{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-height:0;
  max-height:none;
  overflow:auto;
  padding-right:3px;
}
.client-switch{
  width:100%;
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  align-items:center;
  gap:10px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:var(--portal-muted);
  padding:9px;
  text-align:left;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.client-switch:hover{
  background:oklch(100% .005 255 / .045);
  color:var(--portal-text);
}
.client-switch.active{
  background:oklch(60% .22 260 / .12);
  border-color:oklch(60% .22 260 / .32);
  color:var(--portal-text);
}
.client-switch-mark{
  width:30px;
  height:30px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:oklch(60% .22 260 / .16);
  color:oklch(76% .14 255);
  font-size:12px;
  font-weight:900;
}
.client-switch-body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.client-switch-body strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:850;
  letter-spacing:-.01em;
}
.client-switch-body small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  color:var(--portal-subtle);
}
.client-switcher-empty{
  margin:0;
  color:var(--portal-subtle);
  font-size:12px;
  line-height:1.5;
}
.portal-shell.portal-theme-light .client-switch:hover{
  background:oklch(94% .014 255);
}
.portal-shell.portal-theme-light .client-admin-return:hover{
  background:oklch(94% .014 255);
}
.portal-shell.portal-theme-light .client-admin-return.active,
.portal-shell.portal-theme-light .client-switch.active{
  background:oklch(96% .027 255);
  border-color:oklch(74% .09 255);
}
.portal-shell.portal-theme-light .client-switch-mark{
  background:oklch(92% .04 255);
  color:oklch(45% .16 255);
}
.client-toolbar{
  justify-content:flex-start;
  margin:14px 0 16px;
}
.row-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-width:260px;
}
.row-actions .btn-portal{
  padding:8px 10px;
  font-size:12px;
}
.data-table code{
  display:inline-block;
  max-width:170px;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:bottom;
}

/* Login is always dark, regardless of the selected portal theme. */
html:has(.portal-login),
body:has(.portal-login){
  min-height:100dvh!important;
  background:oklch(7% .018 255)!important;
}
.portal-login{
  min-height:100dvh!important;
  background:oklch(9% .024 255)!important;
  color:oklch(96% .012 255)!important;
}
.portal-login .login-panel-wrap{
  background:
    radial-gradient(circle at 50% 30%,oklch(60% .22 260 / .13),transparent 25rem),
    linear-gradient(145deg,oklch(11% .026 255),oklch(7% .018 255))!important;
  color:oklch(96% .012 255)!important;
}
.portal-login .login-panel{
  background:linear-gradient(180deg,oklch(18% .026 255),oklch(12% .022 255))!important;
  color:oklch(96% .012 255)!important;
  border-color:oklch(100% .008 255 / .16)!important;
  box-shadow:0 34px 90px oklch(0% 0 0 / .58),0 0 0 1px oklch(60% .22 260 / .06)!important;
}
.portal-login .panel-title,
.portal-login .field label{
  color:oklch(96% .012 255)!important;
}
.portal-login .panel-sub{
  color:oklch(74% .03 255)!important;
}
.portal-login .field input,
.portal-login .field textarea,
.portal-login .field select{
  background:oklch(8% .018 255)!important;
  color:oklch(96% .012 255)!important;
  border-color:oklch(100% .008 255 / .18)!important;
}
.portal-login .field input:focus,
.portal-login .field textarea:focus,
.portal-login .field select:focus{
  border-color:oklch(62% .2 260)!important;
  box-shadow:0 0 0 3px oklch(60% .22 260 / .18)!important;
}
.portal-login .field input::placeholder,
.portal-login .field textarea::placeholder{
  color:oklch(62% .028 255)!important;
}
.portal-login .signup-entry{
  background:oklch(100% .008 255 / .055)!important;
  color:oklch(92% .012 255)!important;
  border-color:oklch(100% .008 255 / .16)!important;
}
.portal-login .signup-entry:hover{
  background:oklch(60% .22 260 / .14)!important;
  border-color:oklch(60% .22 260 / .38)!important;
}
.portal-login .signup-entry span{
  background:oklch(100% .008 255 / .08)!important;
}
.portal-login .login-footer-links{
  display:flex!important;
  padding:16px 0 0!important;
  margin:14px 0 0!important;
  min-height:0!important;
  background:transparent!important;
  border-top:0!important;
  color:oklch(68% .028 255)!important;
  gap:10px!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
}
.portal-login .login-footer-links a{
  background:oklch(100% .008 255 / .055)!important;
  color:oklch(82% .028 255)!important;
  border-color:oklch(100% .008 255 / .14)!important;
  min-height:38px!important;
  padding:9px 14px!important;
  border-radius:999px!important;
  font-size:12px!important;
  line-height:1!important;
}
.portal-login .login-footer-links a:hover{
  background:oklch(60% .22 260 / .14)!important;
  color:oklch(96% .012 255)!important;
  border-color:oklch(60% .22 260 / .34)!important;
}


.quote-widget-wrap{background:linear-gradient(135deg,oklch(20% .025 255),oklch(15% .03 255));border-radius:14px;padding:24px 28px 20px;margin-bottom:20px;position:relative;overflow:hidden;border:1px solid oklch(100% 0 0 / .06)}
.quote-widget-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,oklch(60% .22 260),oklch(68% .17 250))}
.quote-type-wrap{display:flex;align-items:flex-start;gap:6px;min-height:52px}
.quote-icon{font-size:32px;line-height:1;color:oklch(60% .22 260);font-family:Georgia,serif;margin-top:-4px;flex-shrink:0}
.quote-typed{font-size:14px;line-height:1.65;color:oklch(92% .012 255);font-weight:500;flex:1}
.quote-cursor-blink{display:inline-block;width:2px;height:1.1em;background:oklch(60% .22 260);margin-left:2px;vertical-align:middle;animation:cursorBlink .7s step-end infinite}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
.quote-author-line{font-size:11px;color:oklch(55% .025 255);margin-top:10px;font-style:italic;letter-spacing:.03em;padding-left:38px}


.live-report-widget{background:oklch(20% .025 255);border-radius:14px;padding:20px 22px;margin-bottom:20px;border:1px solid oklch(100% 0 0 / .07)}
.live-report-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.live-report-title{display:flex;align-items:center;gap:10px}
.live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e;animation:livePulse 1.5s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
.live-report-title strong{color:oklch(96% .012 255);font-size:14px}
.live-sub{color:oklch(55% .025 255);font-size:11px}
.live-report-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.live-period-btn{background:oklch(26% .03 255);color:oklch(72% .028 255);border:1px solid oklch(100% 0 0 / .1);border-radius:8px;padding:5px 12px;font-size:11px;cursor:pointer;transition:all .2s}
.live-period-btn.active,.live-period-btn:hover{background:oklch(60% .22 260);color:#fff;border-color:transparent}
.live-empty{color:oklch(55% .025 255);font-size:13px;padding:20px 0;text-align:center}
.live-loading{display:flex;align-items:center;gap:10px;color:oklch(72% .028 255);font-size:13px;padding:20px 0}
.live-spinner{width:16px;height:16px;border:2px solid oklch(60% .22 260 / .3);border-top-color:oklch(60% .22 260);border-radius:50%;animation:liveSpin .7s linear infinite;flex-shrink:0}
@keyframes liveSpin{to{transform:rotate(360deg)}}
.live-period-label{font-size:11px;color:oklch(55% .025 255);margin-bottom:12px;letter-spacing:.03em}
.live-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:640px){.live-metrics{grid-template-columns:repeat(2,1fr)}}
.live-metric-card{background:oklch(24% .028 255);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.live-metric-card span{font-size:10px;color:oklch(55% .025 255);text-transform:uppercase;letter-spacing:.06em}
.live-metric-card strong{font-size:16px;font-weight:700;color:oklch(92% .012 255)}
.live-metric-highlight{background:oklch(60% .22 260);border:none}
.live-metric-highlight span{color:oklch(85% .1 255)}
.live-metric-highlight strong{color:#fff}
#livePublishBar{margin-top:14px;padding-top:14px;border-top:1px solid oklch(100% 0 0 / .08)}


.ad-accounts-box{background:oklch(22% .025 255);border-radius:12px;padding:16px 18px;margin-top:16px;border:1px solid oklch(100% 0 0/.07)}
.ad-acc-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:oklch(55% .025 255);margin-bottom:10px}
.ad-account-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid oklch(100% 0 0/.06)}
.ad-acc-label{font-size:13px;color:oklch(88% .014 255);min-width:120px}
.ad-acc-id{font-size:11px;color:oklch(60% .22 260);background:oklch(60% .22 260/.12);padding:2px 8px;border-radius:6px;flex:1}
.ad-acc-empty{font-size:12px;color:oklch(45% .02 255);padding:6px 0}
.ad-acc-form{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ad-acc-form input{background:oklch(26% .03 255);border:1px solid oklch(100% 0 0/.12);border-radius:8px;color:oklch(92% .012 255);padding:6px 10px;font-size:12px;min-width:140px}
.btn-danger-sm{background:oklch(40% .15 28/.15);color:oklch(65% .18 28);border:1px solid oklch(65% .18 28/.3);border-radius:6px;padding:3px 10px;font-size:11px;cursor:pointer}
.btn-danger-sm:hover{background:oklch(56% .19 28);color:#fff}


.report-pending{border:1.5px solid oklch(72% .15 55 / .4)!important;background:linear-gradient(180deg,oklch(22% .025 60),oklch(20% .02 255))!important}
.btn-approve{background:linear-gradient(135deg,oklch(52% .16 150),oklch(60% .18 160));color:#fff;border:none;border-radius:8px;padding:8px 18px;font-size:12px;font-weight:600;cursor:pointer;width:100%;margin-top:4px}
.btn-approve:hover{opacity:.9}
.report-card-admin{margin-top:16px}

/* ── Reports page redesign ─────────────────────────────────────────────────── */
.reports-page{padding:0}
.reports-page-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.reports-page-hd h2{margin:0;font-size:20px;font-weight:700}
.reports-page-hd p{margin:4px 0 0;font-size:13px;color:var(--text-muted)}
.reports-badge-pending{background:oklch(72% .18 55);color:#000;font-size:12px;font-weight:700;padding:5px 14px;border-radius:20px;white-space:nowrap}
.reports-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:0 0 12px}
.reports-queue{margin-bottom:32px}
.reports-history{margin-bottom:16px}
.reports-empty{text-align:center;padding:40px 20px;color:var(--text-muted);font-size:14px;background:var(--card-bg);border:1px solid var(--border);border-radius:12px}
.reports-empty-client{text-align:center;padding:60px 20px;color:var(--text-muted);font-size:14px}

/* Admin report card */
.rpt-card-admin{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px;transition:border-color .2s}
.rpt-pending{border-color:oklch(72% .18 55)!important;background:linear-gradient(180deg,oklch(22% .025 60),oklch(20% .02 255))!important}
.rca-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;gap:12px}
.rca-platform{font-size:15px;font-weight:700;display:block}
.rca-period{font-size:12px;color:var(--text-muted);display:block;margin-top:3px}
.rca-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
@media(max-width:640px){.rca-metrics{grid-template-columns:repeat(2,1fr)}}
.rca-metric{background:var(--input-bg);border-radius:8px;padding:12px 14px}
.rca-metric span{font-size:11px;color:var(--text-muted);display:block}
.rca-metric strong{font-size:17px;font-weight:700;display:block;margin-top:4px}
.rca-metric-hl{background:oklch(20% .06 250);border:1px solid oklch(38% .15 250)}
.rca-metric-hl strong{color:oklch(78% .2 250)}
.rca-summary{background:var(--input-bg);border-radius:8px;padding:14px;font-size:13px;line-height:1.65;margin-bottom:14px;color:var(--text-secondary,var(--text-muted))}
.rca-actions{display:flex;gap:10px}
.btn-dl-pdf{background:var(--input-bg);border:1px solid var(--border);color:var(--text-primary);border-radius:8px;padding:8px 18px;font-size:12px;font-weight:600;cursor:pointer}
.btn-dl-pdf:hover{border-color:var(--brand)}

/* Client report card */
.crc-card{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:20px}
.crc-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:12px}
.crc-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);display:block}
.crc-period{font-size:18px;font-weight:700;display:block;margin-top:5px}
.crc-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}
@media(min-width:560px){.crc-metrics{grid-template-columns:repeat(4,1fr)}}
.crc-metric{background:var(--input-bg);border-radius:10px;padding:14px}
.crc-metric span{font-size:11px;color:var(--text-muted);display:block}
.crc-metric strong{font-size:19px;font-weight:800;display:block;margin-top:6px}
.crc-metric-hl{background:oklch(15% .06 250);border:1px solid oklch(35% .15 250)}
.crc-metric-hl strong{color:oklch(80% .2 250);font-size:23px}
.crc-analysis{background:var(--input-bg);border-radius:10px;padding:16px;margin-bottom:20px}
.crc-analysis strong{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);display:block;margin-bottom:8px}
.crc-analysis p{margin:0;font-size:14px;line-height:1.7}
.crc-pdf-btn{width:100%;padding:12px}

/* ── Login cinema visual ───────────────────────────────────────────────────── */
.login-cinema{position:relative;display:flex;flex-direction:column;gap:18px;padding:24px 0;animation:lcFadeIn 1s ease .2s both}
.lc-glow{position:absolute;top:10%;left:25%;width:220px;height:220px;background:radial-gradient(circle,oklch(55% .2 250 / .28) 0%,transparent 70%);filter:blur(48px);pointer-events:none;animation:lcGlowPulse 5s ease-in-out infinite}
.lc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lc-card{background:oklch(18% .025 255 / .82);border:1px solid oklch(40% .15 250 / .22);border-radius:12px;padding:16px 18px;backdrop-filter:blur(8px);opacity:0;transform:translateY(14px)}
.lc-c1{animation:lcSlideIn .55s ease .4s forwards}
.lc-c2{animation:lcSlideIn .55s ease .6s forwards}
.lc-c3{animation:lcSlideIn .55s ease .8s forwards}
.lc-c4{animation:lcSlideIn .55s ease 1s forwards}
.lc-tag{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:oklch(58% .12 250);display:block;margin-bottom:6px}
.lc-num{font-size:21px;font-weight:800;color:#fff;display:block;margin-bottom:10px;font-variant-numeric:tabular-nums}
.lc-bar{background:oklch(28% .04 255);border-radius:4px;height:3px;overflow:hidden}
.lc-fill{height:100%;width:0;background:linear-gradient(90deg,#1d8cff,#7dd6ff);border-radius:4px;animation:lcBarGrow .9s ease 1.3s forwards;--w:50%}
.lc-fill-g{background:linear-gradient(90deg,oklch(55% .18 150),oklch(70% .2 160))}
.lc-wave{width:100%;height:60px;overflow:visible;opacity:0;animation:lcFadeIn .6s ease 1.1s forwards}
.lc-line{stroke-dasharray:600;stroke-dashoffset:600;animation:lcDraw 1.4s ease 1.2s forwards}
.lc-dot{animation:lcDotPulse 2.2s ease-in-out 2.6s infinite;opacity:0;animation-fill-mode:forwards}
.lc-footer{text-align:center;font-size:11px;letter-spacing:.06em;color:oklch(48% .1 250);opacity:0;animation:lcFadeIn .5s ease 1.8s forwards}

@keyframes lcFadeIn{to{opacity:1}}
@keyframes lcSlideIn{to{opacity:1;transform:translateY(0)}}
@keyframes lcBarGrow{to{width:var(--w)}}
@keyframes lcDraw{to{stroke-dashoffset:0}}
@keyframes lcGlowPulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
@keyframes lcDotPulse{0%,100%{opacity:1;filter:drop-shadow(0 0 4px #4db8ff)}50%{opacity:1;filter:drop-shadow(0 0 14px #4db8ff) drop-shadow(0 0 28px #1d8cff88)}}
.neural-map{display:none}
.signup-entry,.signup-panel{display:none!important}

/* ── Login panel — light card override ─────────────────────────────────────── */
.login-panel{
  background:#ffffff!important;
  border-color:oklch(88% .02 255)!important;
  box-shadow:0 24px 64px oklch(0% 0 0 / .28),0 4px 16px oklch(0% 0 0 / .14)!important;
  color:oklch(14% .025 255)!important;
}
.login-panel .panel-title{color:oklch(10% .02 255)!important}
.login-panel .panel-sub{color:oklch(42% .04 255)!important}
.login-panel label{color:oklch(28% .03 255)!important}
.login-panel input{
  background:oklch(97% .008 255)!important;
  border:1px solid oklch(82% .02 255)!important;
  color:oklch(12% .02 255)!important;
}
.login-panel input:focus{
  border-color:oklch(58% .22 260)!important;
  box-shadow:0 0 0 3px oklch(58% .22 260 / .15)!important;
}
.login-panel input::placeholder{color:oklch(62% .02 255)!important}

/* ── Login panel branco — override final (maior especificidade) ─────────────── */
.portal-login .login-panel-wrap{
  background:oklch(95% .012 255)!important;
}
.portal-login .login-panel{
  background:#ffffff!important;
  color:oklch(12% .025 255)!important;
  border:1px solid oklch(85% .02 255)!important;
  box-shadow:0 8px 40px oklch(0% 0 0 / .18),0 2px 8px oklch(0% 0 0 / .10)!important;
}
.portal-login .panel-title,
.portal-login .field label{
  color:oklch(12% .025 255)!important;
}
.portal-login .panel-sub{
  color:oklch(42% .04 255)!important;
}
.portal-login .field input,
.portal-login .field textarea,
.portal-login .field select{
  background:oklch(97% .008 255)!important;
  color:oklch(10% .02 255)!important;
  border-color:oklch(80% .02 255)!important;
}
.portal-login .field input::placeholder{
  color:oklch(60% .02 255)!important;
}
.portal-login .field input:focus{
  border-color:oklch(58% .22 260)!important;
  box-shadow:0 0 0 3px oklch(58% .22 260 / .15)!important;
  background:#fff!important;
}