/* ============================================================
   РОДИНА — Командный центр директора
   Light: Mondays-inspired clean airy UI — soft gray canvas,
   white cards, thin borders, pastel status accents.
   Dark: SaaS CRM mint/indigo.
   ============================================================ */

:root{
  /* canvas + surfaces — Mondays light */
  --bg-page:#F9FAFB;
  --bg-canvas-2:#F3F4F6;
  --bg-card:#FFFFFF;
  --bg-elevated:#F3F4F6;
  --bg-inset:#F3F4F6;
  --border:#E5E7EB;
  --border-strong:#D1D5DB;

  /* text */
  --text-primary:#111827;
  --text-secondary:#6B7280;
  --text-muted:#9CA3AF;

  /* brand / accents (overridable by Tweaks) — soft blue default */
  --accent:#3B82F6;
  --accent-2:#14B8A6;
  --grad-brand:linear-gradient(120deg,#3B82F6 0%,#60A5FA 100%);
  --grad-brand-soft:linear-gradient(120deg,#EFF6FF 0%,#F0FDFA 100%);

  /* hero / summary tone accents (pastel — used as soft fills, not neon blocks) */
  --tone-pink:#FB7185;
  --tone-pink-soft:#FFF1F2;
  --tone-purple:#8B5CF6;
  --tone-purple-soft:#F5F3FF;
  --tone-teal:#14B8A6;
  --tone-teal-soft:#F0FDFA;
  --tone-orange:#F59E0B;
  --tone-orange-soft:#FFFBEB;
  --grad-pink:var(--tone-pink-soft);
  --grad-purple:var(--tone-purple-soft);
  --grad-teal:var(--tone-teal-soft);
  --grad-orange:var(--tone-orange-soft);

  /* semantic — muted pastels */
  --green:#059669;
  --green-soft:#ECFDF5;
  --red:#DC2626;
  --red-soft:#FEF2F2;
  --amber:#D97706;
  --amber-soft:#FFFBEB;
  --blue:#3B82F6;
  --blue-soft:#EFF6FF;

  /* shape — sharper corners on cards */
  --r-lg:0; --r-md:0; --r-sm:4px; --r-xs:3px;
  --shadow-sm:0 1px 2px rgba(17,24,39,.04);
  --shadow-md:0 4px 16px rgba(17,24,39,.06);
  --shadow-lift:0 8px 24px rgba(17,24,39,.08);
  --shadow-grad:0 4px 14px rgba(59,130,246,.18);

  --scrollbar-thumb:#D1D5DB;
  --scrollbar-thumb-hover:#9CA3AF;
  --plan-stripe-a:#F3F4F6;
  --plan-stripe-b:#F9FAFB;
  --warn-ink:#92400E;
  --glow:rgba(59,130,246,.28);
  --page-glow:none;

  --sidebar-w:248px;
  --sidebar-w-collapsed:72px;

  --font-display:'Bebas Neue',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --font-body:'Golos Text',sans-serif;
}

*{box-sizing:border-box;}
html{color-scheme:light;background:#FFFFFF;}
html,body{margin:0;height:100%;max-width:100%;overflow-x:hidden;}
body{
  font-family:var(--font-body);
  background:var(--page-glow),var(--bg-page);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
#root{height:100vh;max-width:100%;overflow-x:hidden;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:9px;border:2px solid var(--bg-page);}
::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover);}

/* ===================== APP SHELL ===================== */
.app{display:flex;height:100vh;width:100%;max-width:100%;background:var(--page-glow),var(--bg-page);overflow-x:hidden;}
.main{flex:1;display:flex;flex-direction:column;min-width:0;height:100vh;max-width:100%;}
.content{flex:1;overflow-y:auto;overflow-x:hidden;padding:22px 26px 60px;}
.content-inner{max-width:1640px;width:100%;margin:0 auto;}
.sb-backdrop{display:none;}

/* ===================== SIDEBAR ===================== */
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:var(--bg-card);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  transition:width .28s cubic-bezier(.4,0,.2,1),flex-basis .28s cubic-bezier(.4,0,.2,1);
  overflow:hidden;z-index:30;
}
.sidebar.collapsed{width:var(--sidebar-w-collapsed);flex-basis:var(--sidebar-w-collapsed);}
.sb-brand{
  height:68px;display:flex;align-items:center;gap:12px;
  padding:0 20px;flex:0 0 auto;
}
.sb-logo{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  overflow:hidden;padding:0;
  background:transparent;
  display:flex;align-items:center;justify-content:center;
}
.sb-logo img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.sb-wordmark{font-family:var(--font-display);font-size:24px;letter-spacing:1.2px;line-height:1;white-space:nowrap;transition:opacity .18s ease;color:var(--text-primary);}
.sb-wordmark small{display:block;font-family:var(--font-body);font-size:10px;letter-spacing:.3px;color:var(--text-muted);font-weight:500;margin-top:3px;}
.sidebar.collapsed .sb-wordmark{opacity:0;width:0;pointer-events:none;}

.sb-nav{padding:10px 12px 16px;display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto;overflow-x:hidden;}
.sb-section{font-size:10px;letter-spacing:1.2px;font-weight:600;color:var(--text-muted);padding:16px 12px 6px;text-transform:uppercase;white-space:nowrap;max-height:40px;transition:opacity .18s ease,max-height .28s cubic-bezier(.4,0,.2,1),padding .28s cubic-bezier(.4,0,.2,1);}
.sidebar.collapsed .sb-section{opacity:0;max-height:0;padding-top:0;padding-bottom:0;overflow:hidden;}
.sb-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:10px;
  color:var(--text-secondary);font-size:13.5px;font-weight:500;
  position:relative;white-space:nowrap;transition:background .15s,color .15s;
}
.sb-item svg,.sb-item .nav-ico{flex:0 0 auto;opacity:.85;}
.nav-ico{
  display:block;width:20px;height:20px;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;
  mask-repeat:no-repeat;mask-position:center;mask-size:contain;
}
.sb-item:hover{background:var(--bg-elevated);color:var(--text-primary);}
.sb-item:hover svg,.sb-item:hover .nav-ico{opacity:1;}
.sb-item.active{
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%, transparent);
  font-weight:600;
}
.sb-item.active svg,.sb-item.active .nav-ico{opacity:1;}
.sb-item.active::before{display:none;}
.sb-item .sb-label{transition:opacity .18s ease,transform .28s cubic-bezier(.4,0,.2,1);white-space:nowrap;overflow:hidden;}
.sidebar.collapsed .sb-item{justify-content:center;padding-left:0;padding-right:0;gap:0;}
.sidebar.collapsed .sb-label{opacity:0;transform:translateX(-10px);max-width:0;}
.sidebar.collapsed .sb-badge-dot{opacity:0;max-width:0;padding-left:0;padding-right:0;margin:0;overflow:hidden;}
.sb-badge-dot{margin-left:auto;background:var(--green-soft);color:var(--green);font-family:var(--font-mono);font-size:10px;font-weight:600;padding:2px 7px;border-radius:999px;}

.sb-footer{padding:14px;flex:0 0 auto;border-top:1px solid var(--border);}
.sb-summary{
  display:flex;align-items:center;gap:10px;padding:12px;border-radius:13px;
  background:var(--bg-elevated);color:var(--text-secondary);font-size:12.5px;font-weight:600;
  position:relative;overflow:hidden;
}
.sb-summary .st-dot{background:var(--text-muted);}
.sidebar.collapsed .sb-summary span{display:none;}
.sb-sync{margin-top:10px;font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);text-align:center;letter-spacing:.3px;}

.demo-disclaimer{
  display:flex;align-items:flex-start;gap:11px;margin:0 0 18px;padding:13px 15px;
  border:1px solid color-mix(in srgb,var(--amber) 35%,var(--border));border-radius:12px;
  background:var(--amber-soft);color:#8a6100;font-size:12.5px;line-height:1.5;
}
.demo-disclaimer>svg{flex:0 0 auto;margin-top:1px;}
.demo-disclaimer b{display:block;margin-bottom:2px;font-size:13px;color:inherit;}
.demo-disclaimer span{display:block;color:inherit;}
.sidebar.collapsed .sb-sync{opacity:0;}

@media(max-width:1023px){
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;
    width:min(280px,86vw);flex:0 0 auto;
    transform:translateX(-105%);
    transition:transform .25s ease,box-shadow .25s ease;
    z-index:80;
    overflow:hidden;
  }
  .sidebar.collapsed{width:min(280px,86vw);flex-basis:auto;}
  .sidebar.collapsed .sb-wordmark,
  .sidebar.collapsed .sb-label,
  .sidebar.collapsed .sb-section,
  .sidebar.collapsed .sb-sync,
  .sidebar.collapsed .sb-summary span{opacity:1;width:auto;display:initial;}
  .app.is-drawer .sidebar{transform:translateX(0);box-shadow:var(--shadow-lift);}
  .sb-backdrop{
    display:block;position:fixed;inset:0;z-index:70;
    background:rgba(15,18,28,.45);
    opacity:0;pointer-events:none;transition:opacity .25s ease;
  }
  .app.is-drawer .sb-backdrop{opacity:1;pointer-events:auto;}
  .sb-item{min-height:44px;}
  .sb-footer{flex-shrink:0;}
  .sb-summary span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
}

/* ===================== TOP BAR ===================== */
.topbar{
  height:64px;flex:0 0 64px;background:var(--bg-card);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;padding:0 18px;
  position:sticky;top:0;z-index:25;
  overflow:visible;flex-wrap:nowrap;min-width:0;
}
.tb-page{
  display:none;min-width:0;flex:1 1 auto;
  font-family:var(--font-display);font-size:22px;letter-spacing:1.2px;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-icon.tb-search-toggle{display:none;}
.tb-herd-ico{display:none;}
.tb-more{display:none;}
.tb-toggle{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:background .15s;flex:0 0 auto;}
.tb-toggle:hover{background:var(--bg-elevated);color:var(--text-primary);}
.tb-center{flex:0 0 auto;font-size:11px;letter-spacing:2.2px;font-weight:600;color:var(--text-muted);white-space:nowrap;}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:16px;flex:0 0 auto;}
.tb-pop{position:relative;flex:0 0 auto;}
.tb-search{
  display:flex;align-items:center;gap:8px;width:260px;height:36px;
  padding:0 14px;border-radius:999px;background:var(--bg-elevated);color:var(--text-muted);
  border:1px solid transparent;
}
.tb-search:focus-within{border-color:var(--border);background:var(--bg-card);}
.tb-search input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  font:inherit;font-size:13px;color:var(--text-primary);
}
.tb-search input::placeholder{color:var(--text-muted);}
.tb-pill,.tb-src,.tb-sync{
  height:36px;padding:0 12px;border-radius:999px;
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:500;white-space:nowrap;line-height:1;
}
.tb-pill{background:var(--bg-elevated);color:var(--text-secondary);}
.tb-pill:hover{color:var(--text-primary);}
.tb-src{border:1px solid var(--border-strong);color:var(--text-secondary);background:transparent;}
.tb-src i{width:7px;height:7px;border-radius:50%;background:var(--text-muted);flex:0 0 auto;}
.tb-src-dtm{color:#14B8A6;border-color:#99E6DC;}
.tb-src-dtm i{background:#14B8A6;}
.tb-sync{border:0;}
.tb-sync .st-dot{width:7px;height:7px;}
.tb-sync.is-synced{background:var(--green-soft);color:var(--green);}
.tb-sync.is-synced .st-dot{background:var(--green);}
.tb-sync.is-syncing{background:var(--amber-soft);color:#cf8a08;}
.tb-sync.is-syncing .st-dot{background:transparent;border:1.5px solid currentColor;border-top-color:transparent;animation:tb-spin .8s linear infinite;}
.tb-sync.is-syncing svg{animation:tb-spin .8s linear infinite;}
.tb-sync.is-error{background:var(--red-soft);color:var(--red);}
.tb-sync.is-error .st-dot{background:var(--red);}
.tb-sync.is-warn{background:var(--amber-soft);color:#cf8a08;}
.tb-sync.is-warn .st-dot{background:var(--amber);}
.tb-drop-warn{color:#9a6a00;background:var(--amber-soft);padding:10px 12px;border-radius:9px;font-size:12px;line-height:1.45;margin:6px 0;font-weight:600;}
.eff-skew{margin-top:12px;padding:10px 12px;border-radius:9px;background:var(--amber-soft);color:#9a6a00;font-size:12.5px;line-height:1.45;font-weight:600;}
.tb-clock{
  font-size:12.5px;font-weight:600;color:var(--text-secondary);
  white-space:nowrap;line-height:1;letter-spacing:-.01em;padding:0 2px;
}
.tb-vdiv{width:1px;height:22px;background:var(--border);flex:0 0 auto;}
.tb-drop-row span.is-err,.tb-drop-err{color:var(--red);}
.tb-drop-btn:disabled{opacity:.5;cursor:not-allowed;}
@keyframes tb-spin{to{transform:rotate(360deg);}}
.tb-icon{
  width:34px;height:34px;border-radius:10px;position:relative;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);
}
.tb-icon:hover{background:var(--bg-elevated);color:var(--text-primary);}
.tb-badge{
  position:absolute;top:2px;right:2px;min-width:15px;height:15px;padding:0 4px;
  border-radius:999px;background:var(--red);color:#fff;
  font-size:9px;font-weight:700;line-height:15px;text-align:center;
}
.tb-drop{
  position:absolute;top:calc(100% + 8px);left:0;z-index:40;min-width:220px;
  max-width:calc(100vw - 16px);
  padding:8px;border-radius:14px;background:var(--bg-card);
  border:1px solid var(--border);box-shadow:var(--shadow-md);
  animation:tb-drop-in .15s ease-out;
}
.tb-drop-wide{min-width:260px;}
.tb-drop-end{right:0;left:auto;}
@keyframes tb-drop-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.tb-drop-sec{padding:6px 8px 4px;font-size:10.5px;font-weight:700;color:var(--text-muted);letter-spacing:.4px;text-transform:uppercase;}
.tb-drop-empty{padding:4px 8px 8px;font-size:12px;color:var(--text-muted);}
.tb-drop-item,.tb-alert,.tb-drop-link{
  width:100%;text-align:left;padding:8px 10px;border-radius:10px;
  font-size:12.5px;font-weight:600;color:var(--text-primary);
  display:flex;align-items:center;gap:8px;
}
.tb-drop-item:hover,.tb-alert:hover,.tb-drop-link:hover{background:var(--bg-elevated);}
.tb-drop-item.is-on{color:var(--accent);background:color-mix(in srgb,var(--accent) 8%, transparent);}
.tb-drop-row{padding:8px 10px;display:flex;flex-direction:column;gap:2px;}
.tb-drop-row b{font-size:12.5px;}
.tb-drop-row span{font-size:11.5px;color:var(--text-secondary);}
.tb-drop-btn{width:100%;justify-content:center;margin-top:6px;}
.tb-alert b{display:block;font-size:12.5px;}
.tb-alert i{display:block;font-style:normal;font-size:11px;color:var(--text-muted);font-weight:500;}
.tb-drop-link{color:var(--accent);justify-content:center;}
.tb-user{display:flex;align-items:center;gap:10px;padding-left:2px;cursor:pointer;}
.tb-avatar{width:36px;height:36px;border-radius:50%;background:#111827;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:0;box-shadow:none;overflow:hidden;flex:0 0 auto;border:1px solid var(--border);}
.tb-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 8%;transform:scale(1.05);}
.tb-user-info{line-height:1.25;}
.tb-user-info b{font-size:13px;font-weight:600;}
.tb-user-info span{display:block;font-size:11px;color:var(--text-secondary);font-weight:400;}
html[data-theme="dark"] .tb-search,
html[data-theme="dark"] .tb-pill{background:var(--bg-elevated);}
/* ≥1280 desktop: all header items visible (default)
   1024–1279: search icon, hide clock
   768–1023: drawer + compact pills
   <768: page title + icon cluster */
@media(max-width:1279px){
  .tb-clock,.tb-vdiv{display:none;}
  .tb-icon.tb-search-toggle{display:flex;}
  .tb-search-pop:not(.is-open) .tb-search{display:none;}
  .tb-search-pop.is-open{
    position:absolute;left:56px;right:12px;top:8px;bottom:8px;z-index:36;
    display:flex;align-items:center;
  }
  .tb-search-pop.is-open .tb-search{display:flex;width:100%;height:100%;}
  .tb-search-pop.is-open .tb-icon.tb-search-toggle{display:none;}
  .tb-search-pop.is-open .tb-drop{left:0;right:0;width:100%;}
}
@media(max-width:1023px){
  .tb-center{display:none;}
  .tb-herd-txt,.tb-herd-chev{display:none;}
  .tb-herd-ico{display:block;}
  .tb-pill{width:44px;height:44px;padding:0;justify-content:center;}
  .tb-sync-txt,.tb-sync svg{display:none;}
  .tb-sync{width:44px;height:44px;padding:0;justify-content:center;}
  .tb-user-info{display:none;}
  .tb-toggle,.tb-icon,.tb-search-toggle{
    min-width:44px;min-height:44px;width:44px;height:44px;
  }
  .tb-avatar{min-width:36px;min-height:36px;width:36px;height:36px;}
  .tb-tv-exit-text{display:none;}
  .tb-tv-exit{width:44px;height:44px;padding:0;justify-content:center;}
}
@media(max-width:767px){
  .topbar{padding:0 10px;gap:6px;}
  .tb-page{display:block;font-size:16px;letter-spacing:.35px;}
  .tb-search-pop,.tb-watch,.tb-find,.tb-theme{display:none;}
  .tb-herd,.tb-help,.tb-tv{display:none;}
  .tb-more{display:block;}
  .tb-right{gap:2px;}
}
.tb-drop-sub{display:block;font-style:normal;font-size:11px;font-weight:500;color:var(--text-muted);margin-top:2px;}
.is-herd-off{opacity:.4;filter:grayscale(.15);}
/* TV mode: full app with sidebar visible, optimised for remote control.
   Бургер работает и в tv-mode: свернутый сайдбар 72px, вкладки прячутся. */
.app.tv-mode .sidebar:not(.collapsed){
  width:var(--sidebar-w) !important;flex-basis:var(--sidebar-w) !important;
}
.app.tv-mode .sidebar.collapsed .sb-wordmark,
.app.tv-mode .sidebar.collapsed .sb-label,
.app.tv-mode .sidebar.collapsed .sb-section,
.app.tv-mode .sidebar.collapsed .sb-sync,
.app.tv-mode .sidebar.collapsed .sb-summary span,
.app.tv-mode .sidebar.collapsed .sb-badge-dot{opacity:0 !important;width:0 !important;max-width:0 !important;}
.app.tv-mode .sb-item{
  min-height:50px;padding:13px 15px;border-radius:14px;
  font-size:15px;cursor:pointer;
}
.app.tv-mode .sb-item:focus{
  outline:2px solid var(--accent);outline-offset:2px;
  background:var(--bg-elevated);color:var(--text-primary);
}
.app.tv-mode .topbar{height:68px;flex-basis:68px;}
.app.tv-mode .main{width:100%;}
.app.tv-mode .content{padding:28px 36px 64px;}
.app.tv-mode .content-inner{max-width:2100px;}
.app.tv-mode .card{box-shadow:var(--shadow-md);}
/* Site-wide type scale bump — legible from a couch, not just the home dashboard */
.app.tv-mode .page-title{font-size:46px;}
.app.tv-mode .page-title small{font-size:15px;}
.app.tv-mode .dash-toolbar .page-title{font-size:34px;}
.app.tv-mode .card-title{font-size:18px;}
.app.tv-mode .card-title .sub{font-size:13.5px;}
.app.tv-mode .section-title{font-size:17px;}
.app.tv-mode .k-label,.app.tv-mode .feed-kpi-label{font-size:13px;}
.app.tv-mode .k-val,.app.tv-mode .feed-kpi-val{font-size:46px;}
.app.tv-mode .k-val.k-val-long{font-size:30px;line-height:1.1;}
.app.tv-mode .k-val.k-val-split{font-size:36px;}
.app.tv-mode .k-val .unit,.app.tv-mode .feed-kpi-val .unit{font-size:20px;}
.app.tv-mode .grad-card{min-height:200px;}
.app.tv-mode .grad-card .gc-val{font-size:36px;}
.app.tv-mode .tag,.app.tv-mode .chip,.app.tv-mode .kpi-delta{font-size:13px;padding:6px 13px;}
.app.tv-mode .dtm-table{font-size:15.5px;}
.app.tv-mode .dtm-table thead th{font-size:13px;}
.app.tv-mode .heat-tile .ht-pct{font-size:36px;}
.app.tv-mode .heat-tile .ht-name{font-size:18px;}
/* Focus styles for TV remote navigation */
.app.tv-mode .card:focus-within,
.app.tv-mode .kpi-card:focus-within{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-lg);
}
.app.tv-mode a:focus,.app.tv-mode button:focus{
  outline:2px solid var(--accent);outline-offset:2px;
}
.tb-tv-exit{
  height:34px;padding:0 14px;border-radius:999px;
  background:var(--bg-card);border:1px solid var(--border);
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;color:var(--text-primary);
  white-space:nowrap;line-height:1;
  transition:opacity .2s,background .15s;
  flex:0 0 auto;
}
.tb-tv-exit:hover{background:var(--bg-elevated);}
.tb-tv-exit.is-away{opacity:0;pointer-events:none;}

.tv-exit{
  position:fixed;top:16px;right:16px;z-index:400;height:36px;padding:0 16px;
  border-radius:999px;background:var(--bg-card);border:1px solid var(--border);
  box-shadow:var(--shadow-md);font-size:13px;font-weight:700;color:var(--text-primary);
  transition:opacity .2s;
}
.tv-exit.is-away{opacity:0;pointer-events:none;}

/* ===================== STATUS DOTS / PULSE ===================== */
.st-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto;background:var(--text-muted);}
.st-dot.green{background:var(--green);}
.st-dot.red{background:var(--red);}
.st-dot.amber{background:var(--amber);}
.st-dot.blue{background:var(--blue);}
.pulse{position:relative;}
.pulse::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 currentColor;opacity:.5;animation:pulse-ring 4s infinite;}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 currentColor;opacity:.5;}70%{box-shadow:0 0 0 7px currentColor;opacity:0;}100%{opacity:0;}}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(245,166,35,.6);animation:pulse-dot 2.4s infinite;}
@keyframes pulse-dot{0%{box-shadow:0 0 0 0 rgba(245,166,35,.55);}70%{box-shadow:0 0 0 9px rgba(245,166,35,0);}100%{box-shadow:0 0 0 0 rgba(245,166,35,0);}}
.dot-soft{animation:dot-soft 4s ease-in-out infinite;}
@keyframes dot-soft{0%,100%{transform:scale(1);}50%{transform:scale(1.45);opacity:.7;}}

/* ===================== CARDS ===================== */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:none;transition:border-color .2s,box-shadow .2s;position:relative;}
.card.hoverable:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--border-strong);}
.card.hoverable::before{display:none;}
.card.hoverable:hover::before{opacity:0;}
.card-pad{padding:18px 19px;}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;}
.card-title{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--text-primary);}
.card-title .sub{display:block;font-size:12px;font-weight:400;color:var(--text-secondary);margin-top:3px;}

.section-title{font-family:var(--font-body);letter-spacing:.04em;font-size:11.5px;font-weight:600;text-transform:uppercase;color:var(--text-muted);margin:6px 0 14px;display:flex;align-items:center;gap:8px;}
.section-title svg{opacity:.7;}

/* stagger entrance */
.stagger{animation:stagger-in .45s cubic-bezier(.22,1,.36,1) both;}
@keyframes stagger-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ===================== FEED KPI CARDS ===================== */
/* Same surface + icon-chip language as .kpi-card/.k-ico everywhere else in
   the app: theme-aware card, flat tinted icon chip. No gradients, no photo. */
.feed-kpi-card{
  position:relative;border-radius:var(--r-lg);border:1px solid var(--border);
  background:var(--bg-card);
  min-height:122px;padding:18px 19px;
  box-shadow:none;
  transition:border-color .2s,box-shadow .2s;
}
.feed-kpi-card:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--border-strong);}
.feed-kpi-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.feed-kpi-label{font-size:12.5px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--text-secondary);}
.feed-kpi-val{font-family:var(--font-mono);font-size:32px;font-weight:600;color:var(--text-primary);line-height:1;letter-spacing:-.03em;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.feed-kpi-val .unit{font-size:15px;color:var(--text-muted);margin-left:3px;font-weight:500;}
.feed-kpi-sub{margin-top:8px;font-size:12px;color:var(--text-muted);font-weight:400;}

/* ===================== GRIDS ===================== */
.heat-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:18px;}
.kpi-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-bottom:18px;}
.kpi-row.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.kpi-row.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.kpi-row.cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}
.main-grid{display:grid;grid-template-columns:1.32fr 1.15fr .82fr;gap:18px;align-items:start;}
.main-grid.cols-2{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);}
.main-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:1500px){
  .main-grid:not(.cols-2):not(.cols-3){grid-template-columns:1fr 1fr;}
}
@media(max-width:1279px){
  .kpi-row,.kpi-row.cols-3,.kpi-row.cols-4,.kpi-row.cols-5{grid-template-columns:repeat(3,minmax(0,1fr));}
  .heat-row{grid-template-columns:repeat(3,minmax(0,1fr));}
  .main-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:1023px){
  .kpi-row,.kpi-row.cols-3,.kpi-row.cols-4,.kpi-row.cols-5{grid-template-columns:repeat(2,minmax(0,1fr));}
  .heat-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .main-grid,.main-grid.cols-2,.main-grid.cols-3{grid-template-columns:1fr;}
  .content{padding:18px 16px 52px;}
}
@media(max-width:767px){
  .kpi-row,.kpi-row.cols-3,.kpi-row.cols-4,.kpi-row.cols-5,.heat-row{grid-template-columns:1fr;}
  .content{padding:16px 16px 48px;}
  .field-row{grid-template-columns:1fr;}
}
.col-stack{display:flex;flex-direction:column;gap:18px;}

/* ===================== DASHBOARD BENTO GRID ===================== */
.dash-toolbar{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin:4px 0 16px;
}
.dash-toolbar .page-title{font-family:var(--font-body);letter-spacing:-.02em;font-size:26px;font-weight:700;line-height:1.15;}
.dash-toolbar .page-title small{display:block;font-family:var(--font-body);font-size:13px;letter-spacing:0;color:var(--text-secondary);font-weight:400;margin-top:6px;text-transform:none;}
.dash-toolbar-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;flex-wrap:wrap;}
.dash-toolbar-actions .mini-btn{
  font-size:12.5px;font-weight:500;padding:8px 14px;border-radius:999px;
  text-transform:none;letter-spacing:0;line-height:1.45;
  background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);
  min-height:36px;box-sizing:border-box;
}
.dash-toolbar-actions .mini-btn:hover{color:var(--text-primary);border-color:var(--border-strong);background:var(--bg-elevated);}
.dash-toolbar-actions .mini-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}

/* Period toggle buttons */
.period-toggle{
  display:inline-flex;gap:2px;flex-wrap:wrap;max-width:100%;
  background:var(--bg-elevated);
  padding:3px;border-radius:999px;
  border:1px solid var(--border);
  margin-right:8px;
}
.period-toggle .milk-date-picker{display:inline-flex;position:relative;}
.period-toggle .milk-date-picker > .period-btn{gap:6px;}
.period-btn{
  font-size:12.5px;font-weight:500;
  padding:7px 14px;border-radius:999px;
  color:var(--text-secondary);
  transition:all .15s ease;
  cursor:pointer;
  border:none;background:transparent;
  position:relative;
  text-transform:none;
  letter-spacing:0;
  line-height:1.45;
}
.period-btn:focus{outline:none;}
.period-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.period-btn:disabled{opacity:.4;cursor:default;}
.period-btn::before{display:none;}
.period-btn:hover::before{display:none;}
.period-btn:hover{
  color:var(--text-primary);
  transform:none;
}
.period-btn.active,
.period-btn.is-active{
  background:var(--bg-card);
  color:var(--text-primary);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  transform:none;
}
.period-btn.active::before,
.period-btn.is-active::before{
  display:none;
}
.period-btn.active:hover,
.period-btn.is-active:hover{
  background:var(--bg-card);
  color:var(--text-primary);
  filter:none;
  box-shadow:var(--shadow-sm);
}
/* Zoom bar over long-series charts */
.chart-zoom{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px;}
.chart-zoom-range{flex:1 1 auto;min-width:0;font-size:11px;color:var(--text-muted);font-family:var(--font-mono);}
.chart-zoom .period-btn{padding:5px 10px;}
.chart-zoom .period-btn svg{display:block;}

.dash-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
body.awp-dnd .dash-grid{min-height:min(64vh,560px);}
.dash-wgt{min-width:0;position:relative;}
.dash-wgt .kpi-row,.dash-wgt .heat-row{margin-bottom:0;}
.dash-hero-row{grid-template-columns:repeat(4,1fr);}
.dash-wgt .card{height:100%;}
.dash-wgt-body{min-width:0;}
.dash-check-line{margin:8px 0 0;font-size:12px;color:var(--text-muted);font-family:var(--font-mono);}

/* ===================== METRIC PANEL (dense analytics) ===================== */
.metric-panel{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);
  overflow:hidden;display:flex;flex-direction:column;
}
.metric-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-bottom:1px solid var(--border);min-height:48px;
}
.metric-panel-title{display:flex;align-items:flex-start;gap:8px;min-width:0;}
.metric-panel-title > svg{margin-top:2px;color:var(--text-muted);flex:0 0 auto;}
.metric-panel-title b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--text-primary);line-height:1.2;}
.metric-panel-title small{display:block;font-size:11.5px;font-weight:400;color:var(--text-muted);margin-top:2px;}
.metric-panel-right{flex:0 0 auto;display:flex;align-items:center;gap:6px;}
.period-toggle-sm{margin-right:0;padding:2px;}
.period-toggle-sm .period-btn{padding:5px 10px;font-size:11.5px;}

.metric-list{display:flex;flex-direction:column;}
.metric-list.cols-2{
  display:grid;grid-template-columns:1fr 1fr;
}
.metric-list.cols-2 .metric-row:nth-child(odd){border-right:1px solid var(--border);}
.metric-row{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) auto minmax(0,1.35fr);
  align-items:center;gap:8px 14px;
  padding:9px 14px;min-height:42px;
  border-bottom:1px solid var(--border);
  background:transparent;width:100%;text-align:left;font:inherit;color:inherit;
}
.metric-row:last-child{border-bottom:0;}
.metric-row.is-click{cursor:pointer;}
.metric-row.is-click:hover{background:var(--bg-elevated);}
.metric-row.is-crit{background:color-mix(in srgb,var(--red) 4%, transparent);}
.mtr-label{display:flex;align-items:center;gap:8px;min-width:0;font-size:12.5px;font-weight:500;color:var(--text-secondary);}
.mtr-label > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mtr-ico{display:flex;align-items:center;justify-content:center;flex:0 0 auto;opacity:.85;}
.mtr-val{
  font-family:var(--font-mono);font-size:17px;font-weight:600;letter-spacing:-.02em;
  color:var(--text-primary);white-space:nowrap;text-align:right;line-height:1;
}
.mtr-unit{font-size:11.5px;font-weight:500;color:var(--text-muted);margin-left:3px;}
.mtr-cur{font-size:12px;margin-right:2px;color:var(--text-muted);}
.mtr-ctx{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;flex-wrap:nowrap;}
.mtr-delta{font-size:11.5px;font-weight:500;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.mtr-delta.s-ok{color:var(--green);}
.mtr-delta.s-warn{color:var(--amber);}
.mtr-delta.s-crit{color:var(--red);}
.mtr-badge{
  display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;
  padding:2px 7px;border-radius:999px;line-height:1.3;white-space:nowrap;flex:0 0 auto;
}
.mtr-badge.s-ok{background:var(--green-soft);color:var(--green);}
.mtr-badge.s-warn{background:var(--amber-soft);color:var(--amber);}
.mtr-badge.s-crit{background:var(--red-soft);color:var(--red);}
.mtr-badge.s-neutral{background:var(--bg-elevated);color:var(--text-secondary);}
.mtr-spark{display:flex;align-items:center;flex:0 0 auto;opacity:.85;}

@media(max-width:1100px){
  .metric-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:10px 12px;}
  .mtr-ctx{grid-column:1 / -1;justify-content:flex-start;flex-wrap:wrap;}
  .mtr-spark{display:none;}
  .metric-list.cols-2{grid-template-columns:1fr;}
  .metric-list.cols-2 .metric-row:nth-child(odd){border-right:0;}
}

/* ===================== TREND STRIP ===================== */
.trend-strip{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;
}
.trend-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.trend-item{
  padding:12px 14px 14px;border-right:1px solid var(--border);
  position:relative;min-height:96px;
}
.trend-item:last-child{border-right:0;}
.trend-item::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;
  background:var(--border-strong);
}
.trend-item.s-ok::before{background:var(--green);}
.trend-item.s-warn::before{background:var(--amber);}
.trend-item.s-crit::before{background:var(--red);}
.trend-item-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-left:8px;}
.trend-label{font-size:12px;font-weight:500;color:var(--text-secondary);}
.trend-item-mid{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:8px;padding-left:8px;}
.trend-val{font-family:var(--font-mono);font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--text-primary);line-height:1;}
.trend-spark{flex:0 0 auto;opacity:.9;}
.trend-sub{margin-top:6px;padding-left:8px;font-size:11.5px;color:var(--text-muted);font-weight:400;}

@media(max-width:1100px){
  .trend-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .trend-item:nth-child(2n){border-right:0;}
  .trend-item:nth-child(-n+2){border-bottom:1px solid var(--border);}
}
@media(max-width:640px){
  .trend-grid{grid-template-columns:1fr;}
  .trend-item{border-right:0;border-bottom:1px solid var(--border);}
  .trend-item:last-child{border-bottom:0;}
}
.dash-wgt.is-edit{
  outline:1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  outline-offset:6px;
  border-radius:calc(var(--r-lg) + 8px);
  padding-top:28px;
}
.dash-wgt-chrome{
  position:absolute;left:0;right:0;top:-2px;z-index:3;
  display:flex;align-items:center;gap:6px;
  pointer-events:none;
}
.dash-wgt-chrome > *{pointer-events:auto;}
.dash-wgt-handle,.dash-wgt-btn{
  width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-card);border:1px solid var(--border-strong);
  color:var(--text-secondary);box-shadow:var(--shadow-sm);cursor:grab;
}
.dash-wgt-handle:active{cursor:grabbing;}
.dash-wgt-btn{cursor:pointer;}
.dash-wgt-btn:hover,.dash-wgt-handle:hover{color:var(--text-primary);border-color:var(--accent);}
.dash-wgt-x:hover{color:var(--red);border-color:var(--red);}
.dash-wgt-name{
  font-size:11px;font-weight:700;color:var(--text-muted);letter-spacing:.3px;
  background:var(--bg-card);padding:4px 8px;border-radius:8px;border:1px solid var(--border);
}
.dash-wgt-nudge{display:flex;gap:4px;}
.dash-wgt-resize{
  position:absolute;right:2px;bottom:2px;width:14px;height:14px;z-index:4;
  cursor:ew-resize;
  background:
    linear-gradient(135deg, transparent 50%, var(--text-muted) 50%) no-repeat 100% 100% / 10px 10px;
  opacity:.55;
}
.dash-wgt-resize:hover{opacity:1;}
.dash-wgt-ghost{
  opacity:.35;
  outline:2px dashed var(--accent) !important;
  background:var(--grad-brand-soft);
  border-radius:var(--r-lg);
  min-height:72px;
}
.dash-wgt-chosen{z-index:8;}
.dash-wgt-fallback,.dash-wgt-drag{
  cursor:grabbing !important;
  transform:scale(1.03);
  box-shadow:var(--shadow-lift);
  z-index:30;
  opacity:.97;
}
.dash-hidden{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;}
.dash-hidden > span{font-size:12px;font-weight:600;color:var(--text-muted);}
.dash-hidden-chip{
  font-size:12px;font-weight:600;padding:6px 11px;border-radius:20px;
  background:var(--bg-card);border:1px dashed var(--border-strong);color:var(--text-secondary);
}
.dash-hidden-chip:hover{color:var(--accent);border-color:var(--accent);}
.dash-editing .card.hoverable:hover{transform:none;box-shadow:var(--shadow-sm);}
.dash-editing .card.hoverable:hover::before{opacity:0;}
@media(max-width:1279px){
  .dash-grid{grid-template-columns:repeat(6,minmax(0,1fr));}
  .dash-wgt[data-col="8"],.dash-wgt[data-col="12"],.dash-wgt[data-col="6"]{grid-column:span 6;}
  .dash-wgt[data-col="4"]{grid-column:span 6;}
  .dash-hero-row{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:1023px){
  .dash-hero-row{grid-template-columns:1fr;}
}
@media(max-width:767px){
  .dash-grid{grid-template-columns:1fr;}
  .dash-wgt,.dash-wgt[data-col]{grid-column:1 / -1 !important;}
  .dash-toolbar{flex-direction:column;align-items:stretch;}
  .dash-toolbar-actions{justify-content:flex-end;flex-wrap:wrap;}
  .awp-card{cursor:default;}
  .awp-card.is-static{touch-action:auto;}
  /* .page-title{font-size:22px;} — раскомментировать, если мобильные заголовки нужны меньше */
  .dash-toolbar .page-title{font-size:24px;}
  .period-toggle{max-width:100%;flex-wrap:wrap;}
  .period-btn{padding:8px 12px;flex:1 1 auto;}
  .cat-tools{display:flex;flex-direction:column;align-items:stretch;}
  .cat-tools .search-mini,.search-mini{min-width:0;width:100%;}
}

/* ===================== HEATMAP TILE ===================== */
.heat-tile{padding:18px 19px;border-radius:var(--r-md);position:relative;overflow:hidden;border:1px solid var(--border);background:var(--bg-card);box-shadow:none;transition:border-color .2s,box-shadow .2s;}
.heat-tile:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--border-strong);}
.heat-tile .tint{position:absolute;inset:0;opacity:.06;}
.heat-tile.s-green .tint{background:var(--green);}
.heat-tile.s-amber .tint{background:var(--amber);}
.heat-tile.s-red .tint{background:var(--red);}
.heat-tile .bar-top{position:absolute;top:0;left:0;right:0;height:3px;}
.heat-tile.s-green .bar-top{background:color-mix(in srgb,var(--green) 70%, white);}
.heat-tile.s-amber .bar-top{background:color-mix(in srgb,var(--amber) 70%, white);}
.heat-tile.s-red .bar-top{background:color-mix(in srgb,var(--red) 70%, white);}
.heat-tile .ht-name{font-family:var(--font-body);font-size:13.5px;font-weight:600;letter-spacing:0;line-height:1.2;position:relative;display:flex;align-items:center;gap:7px;overflow-wrap:anywhere;color:var(--text-primary);}
.heat-tile .ht-name svg{flex:0 0 auto;opacity:.7;}
.heat-tile .ht-pct{font-family:var(--font-mono);font-size:28px;font-weight:600;line-height:1;margin:14px 0 4px;position:relative;letter-spacing:-.02em;}
.heat-tile.s-green .ht-pct{color:var(--green);}
.heat-tile.s-amber .ht-pct{color:var(--amber);}
.heat-tile.s-red .ht-pct{color:var(--red);}
.heat-tile .ht-meta{font-size:12px;color:var(--text-muted);position:relative;font-weight:400;}
.heat-track{height:4px;border-radius:999px;background:var(--bg-inset);margin-top:12px;position:relative;overflow:hidden;}
.heat-track i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;transition:width 1s cubic-bezier(.22,1,.36,1);}
.heat-tile.s-green .heat-track i{background:var(--green);}
.heat-tile.s-amber .heat-track i{background:var(--amber);}
.heat-tile.s-red .heat-track i{background:var(--red);}

/* ===================== KPI CARD ===================== */
/* Подпись и значение KPI одинаковы во всех карточках сайта (главная и разделы):
   карточка собирается либо как .kpi-card, либо как .card + .card-pad —
   внутренние отступы в обоих случаях 18/19, типографика тоже общая. */
.kpi-card{padding:18px 19px;}
.k-label{font-size:12.5px;color:var(--text-secondary);font-weight:500;display:flex;align-items:center;gap:8px;}
.k-ico{width:28px;height:28px;border-radius:8px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.k-val{font-family:var(--font-mono);font-size:32px;font-weight:600;line-height:1;margin:12px 0 8px;letter-spacing:-.03em;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary);}
.k-val .unit{font-size:15px;color:var(--text-muted);margin-left:3px;font-weight:500;}
/* Составные значения («4,05% · 3,21% · 268») — мельче и с переносом,
   чтобы не обрезались в узких карточках. */
.k-val.k-val-long{font-size:22px;letter-spacing:-.02em;white-space:normal;line-height:1.15;}
.k-val.k-val-long .unit{font-size:14px;}
/* Составное значение: части разделены тонкой линией («4,05% │ 3,21% │ 291»). */
.k-val.k-val-split{display:flex;align-items:center;flex-wrap:wrap;gap:0 10px;font-size:26px;line-height:1.1;white-space:normal;overflow:visible;}
.k-val.k-val-split .k-sep{flex:0 0 auto;width:1px;height:1.05em;background:color-mix(in srgb, var(--text-primary) 22%, transparent);border-radius:1px;}
.kpi-delta{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:4px;max-width:100%;}
.kpi-delta.up{color:var(--green);background:var(--green-soft);}
.kpi-delta.down-good{color:var(--green);background:var(--green-soft);}
.kpi-delta.warn{color:var(--amber);background:var(--amber-soft);}
.kpi-delta.crit{color:var(--red);background:var(--red-soft);}
.kpi-card.crit{border-color:color-mix(in srgb,var(--red) 35%, var(--border));animation:crit-border 2.2s infinite;}
@keyframes crit-border{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.0);}50%{box-shadow:0 0 0 3px rgba(220,38,38,.1);}}

/* ===================== SUMMARY STAT CARDS (was gradient hero) ===================== */
.grad-card{
  border-radius:var(--r-md);padding:18px 19px;
  color:var(--text-primary);position:relative;overflow:hidden;
  background:var(--bg-card);border:1px solid var(--border);
  box-shadow:none;min-height:132px;
  transition:border-color .2s,box-shadow .2s;
}
.grad-card:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--border-strong);}
.grad-card::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:0 3px 3px 0;
}
.grad-card.pink{background:var(--tone-pink-soft);}
.grad-card.pink::before{background:var(--tone-pink);}
.grad-card.purple{background:var(--tone-purple-soft);}
.grad-card.purple::before{background:var(--tone-purple);}
.grad-card.teal{background:var(--tone-teal-soft);}
.grad-card.teal::before{background:var(--tone-teal);}
.grad-card.orange{background:var(--tone-orange-soft);}
.grad-card.orange::before{background:var(--tone-orange);}
.grad-card .gc-label{font-size:12.5px;font-weight:500;color:var(--text-secondary);letter-spacing:0;opacity:1;}
.grad-card .gc-val{font-family:var(--font-mono);font-size:26px;font-weight:600;margin-top:8px;letter-spacing:-.02em;color:var(--text-primary);}
.grad-card .gc-sub{font-size:11.5px;color:var(--text-muted);margin-top:4px;opacity:1;font-weight:400;}
.grad-card .gc-spark{position:absolute;right:14px;bottom:12px;opacity:.85;}
.grad-card.pink .gc-spark{color:var(--tone-pink);}
.grad-card.purple .gc-spark{color:var(--tone-purple);}
.grad-card.teal .gc-spark{color:var(--tone-teal);}
.grad-card.orange .gc-spark{color:var(--tone-orange);}

/* ===================== ALERT FEED ===================== */
.alert-card{padding:14px 16px;border-radius:var(--r-sm);background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--border-strong);margin-bottom:10px;transition:border-color .15s;}
.alert-card:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--border-strong);}
.alert-card.crit{border-left-color:var(--red);background:var(--red-soft);}
.alert-card.warn{border-left-color:var(--amber);background:var(--amber-soft);}
.alert-card.info{border-left-color:var(--blue);background:var(--blue-soft);}
.alert-card .ac-tag{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.06em;display:inline-flex;align-items:center;gap:5px;}
.alert-card.crit .ac-tag{color:var(--red);}
.alert-card.warn .ac-tag{color:var(--amber);}
.alert-card .ac-title{font-weight:600;font-size:13.5px;margin:6px 0 4px;}
.alert-card .ac-meta{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);}
.alert-card .ac-actions{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap;}
.mini-btn{font-size:12.5px;font-weight:500;padding:8px 14px;border-radius:999px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);transition:all .15s;display:inline-flex;align-items:center;gap:5px;min-height:36px;box-sizing:border-box;line-height:1.45;}
.mini-btn:hover{color:var(--text-primary);border-color:var(--border-strong);background:var(--bg-elevated);}
.mini-btn:focus{outline:none;}
.mini-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.mini-btn:disabled{opacity:.4;cursor:default;}
.mini-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.mini-btn.primary:hover{filter:brightness(1.05);color:#fff;}

/* count badge */
.count-badge{font-family:var(--font-mono);font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;background:var(--red-soft);color:var(--red);}

/* ===================== BUTTONS ===================== */
.btn{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;padding:10px 16px;border-radius:10px;transition:all .15s;}
.btn-primary{background:var(--accent);color:#fff;box-shadow:none;}
.btn-primary:hover{filter:brightness(1.05);transform:none;}
.btn-ghost{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--border-strong);background:var(--bg-elevated);}
.link-row{font-size:12.5px;font-weight:500;color:var(--accent);display:inline-flex;align-items:center;gap:5px;margin-top:6px;transition:gap .15s;cursor:pointer;}
.link-row:hover{gap:9px;}

/* tabs */
.tabs{display:flex;gap:2px;background:var(--bg-elevated);padding:3px;border-radius:999px;max-width:100%;overflow-x:auto;flex-wrap:nowrap;border:1px solid var(--border);}
.tab{font-size:12.5px;font-weight:500;color:var(--text-secondary);padding:7px 14px;border-radius:999px;transition:all .15s;white-space:nowrap;flex:0 0 auto;border:1px solid transparent;line-height:1.45;}
@media(max-width:767px){
  .tabs{width:100%;border-radius:12px;}
  .tab{min-height:44px;display:inline-flex;align-items:center;border-radius:10px;}
}
.tab:hover{color:var(--text-primary);}
.tab:focus{outline:none;}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.tab.active{background:var(--bg-card);color:var(--text-primary);box-shadow:var(--shadow-sm);font-weight:500;border-color:var(--border);}
.settings-tabs{margin-bottom:18px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.settings-tabs .tab{scroll-snap-align:start;}
.range-pick{display:flex;gap:2px;}
.range-pick .rp{font-size:12.5px;font-weight:500;color:var(--text-secondary);padding:8px 13px;border-radius:9px;position:relative;transition:color .15s;}
.range-pick .rp:hover{color:var(--text-primary);}
.range-pick .rp.active{color:var(--accent);font-weight:600;}
.range-pick .rp.active::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;background:var(--accent);}

/* page header */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px;flex-wrap:wrap;}
.page-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.an-list{max-height:360px;overflow:auto;display:flex;flex-direction:column;gap:4px;margin-top:4px;}
.an-row{
  display:grid;grid-template-columns:minmax(72px,auto) 1fr auto auto 16px;gap:10px;align-items:center;
  width:100%;text-align:left;padding:10px 12px;border-radius:10px;
  font-size:13px;color:var(--text-secondary);background:var(--bg-elevated);
}
.an-row b{color:var(--text-primary);font-family:var(--font-mono);font-size:14px;}
.an-row:hover{color:var(--text-primary);background:color-mix(in srgb,var(--accent) 8%, var(--bg-elevated));}
.kpi-hit{width:100%;text-align:left;cursor:pointer;display:block;font:inherit;color:inherit;background:var(--bg-card);}
.kpi-hit:hover{border-color:color-mix(in srgb,var(--accent) 45%, var(--border));}
.hbar-hit{width:100%;text-align:left;cursor:pointer;background:none;padding:0;}
.hbar-hit:hover .hb-head span{color:var(--accent);}
.cat-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 12px;}
.cat-filters select{height:34px;border-radius:8px;border:1px solid var(--border-strong);background:var(--bg-card);color:var(--text-primary);padding:0 10px;font-size:12.5px;}
.an-list.cat-list{max-height:none;}
.an-row.cat-row{grid-template-columns:88px 90px 70px 1fr 80px 70px 16px;}
.cat-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:12.5px;color:var(--text-secondary);font-weight:600;}
.cat-pager .mini-btn:disabled{opacity:.4;cursor:default;}
.cat-tools .search-mini{min-width:180px;}
.tb-icon.tb-find{display:none;}
.find-modal .find-input{
  width:100%;height:52px;border-radius:14px;border:1px solid var(--border-strong);
  background:var(--bg-elevated);font-size:22px;font-family:var(--font-mono);
  text-align:center;letter-spacing:2px;color:var(--text-primary);
}
.find-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 10px;}
.find-key{height:48px;border-radius:12px;background:var(--bg-elevated);font-size:18px;font-weight:700;}
.find-key:hover{background:var(--bg-card);border:1px solid var(--border);}
.find-cam{width:100%;justify-content:center;margin-bottom:10px;}
.find-hits{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow:auto;}
.cmp-pick{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.cmp-pick label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text-muted);font-weight:600;}
.cmp-pick select{height:38px;min-width:180px;border-radius:10px;border:1px solid var(--border-strong);background:var(--bg-card);color:var(--text-primary);padding:0 10px;}
.cmp-row{display:grid;grid-template-columns:1.2fr 1fr 1fr 70px;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;align-items:center;}
.cmp-row b{font-family:var(--font-mono);}
.cmp-row i{font-style:normal;font-weight:700;}
.cmp-row i.up{color:var(--green);}
.cmp-row i.down{color:var(--red);}
.cmp-row i.muted{color:var(--text-muted);font-weight:600;}
.yard{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;}
.yard-cell{border-radius:12px;padding:10px 8px;text-align:center;border:1px solid var(--border);background:var(--bg-elevated);}
.yard-cell b{display:block;font-size:14px;}
.yard-cell span,.yard-cell i{display:block;font-size:11px;color:var(--text-secondary);font-style:normal;}
.yard-cell.ok{background:color-mix(in srgb,var(--green) 12%, var(--bg-card));}
.yard-cell.mid{background:color-mix(in srgb,var(--amber) 16%, var(--bg-card));}
.yard-cell.bad{background:color-mix(in srgb,var(--red) 14%, var(--bg-card));}
.rw-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;}
.rw-day{background:var(--bg-elevated);border-radius:10px;padding:8px;min-height:78px;}
.rw-day b{display:block;font-size:11px;color:var(--text-muted);margin-bottom:4px;}
.rw-day span{display:block;font-size:11px;font-weight:600;}
.rw-osem{color:var(--blue);}
.rw-stel{color:var(--green);}
.rw-fresh{color:var(--accent);}
.rw-dry{color:var(--amber);}
.rw-empty{color:var(--text-muted);font-weight:500;}

/* Выпадающий список в стиле переключателей периода */
.pill-select{position:relative;display:inline-flex;}
.pill-select .period-btn{display:inline-flex;align-items:center;gap:6px;}
.pill-select-menu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:100;min-width:200px;max-width:min(92vw,460px);max-height:340px;overflow-y:auto;
  display:flex;flex-direction:column;gap:2px;padding:6px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-md);
}
.pill-select-menu.is-grid{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));min-width:0;width:max-content;}
.pill-select-item{
  padding:7px 12px;border:0;border-radius:999px;background:transparent;text-align:left;
  font:inherit;font-size:12.5px;font-weight:500;color:var(--text-secondary);cursor:pointer;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease;
}
.pill-select-menu.is-grid .pill-select-item{text-align:center;padding:7px 8px;}
.pill-select-item:hover{color:var(--text-primary);background:var(--bg-elevated);}
.pill-select-item.is-on{color:var(--text-primary);background:var(--bg-elevated);box-shadow:inset 0 0 0 1px var(--border-strong);}
.pill-select-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.cat-filters .pill-select .period-toggle{margin-right:0;}
@media(max-width:767px){.pill-select-menu.is-grid{--cols:4 !important;}}

/* Поиск и итог на вкладке «Группы» */
.group-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:16px;}
.group-tools .search-mini{min-width:220px;}
.group-tools-total{font-size:12.5px;color:var(--text-secondary);}

/* Эффективность фермы */
.ef-warn{margin:10px 0 0;padding:8px 12px;border-radius:8px;font-size:12.5px;line-height:1.45;color:var(--text-primary);background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 35%,transparent);}
.ef-warn-text{color:var(--amber);}
.ef-empty{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px dashed var(--border-strong);border-radius:10px;font-size:13px;color:var(--text-secondary);}
.ef-empty b{color:var(--text-primary);}
.ef-chart{position:relative;min-width:0;width:100%;overflow:hidden;}
.ef-hint .hint-pop{left:auto;right:0;}
/* Элементы сетки сжимаются до ширины колонки — иначе SVG шириной «с прошлого экрана» распирает карточку. */
.ef-page .main-grid > *,.ef-page .kpi-row > *{min-width:0;}
.ef-axis{font-family:var(--font-mono);font-size:10px;fill:var(--text-muted);}
.ef-axis-title{font-size:11px;fill:var(--text-secondary);}
.ef-dot-label,.ef-mark{font-family:var(--font-mono);font-size:10.5px;font-weight:600;fill:var(--text-primary);}
.ef-bar-val{font-family:var(--font-mono);font-size:10.5px;font-weight:600;fill:var(--text-secondary);}
.ef-dot,.ef-bar{cursor:pointer;outline:none;}
.ef-dot:focus-visible,.ef-bar:focus-visible{stroke:var(--text-primary);stroke-width:2.5;}
.ef-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:12px;color:var(--text-secondary);}
.ef-legend span{display:inline-flex;align-items:center;gap:6px;}
.ef-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;}
.ef-details{margin-top:12px;font-size:12.5px;}
.ef-details summary{cursor:pointer;color:var(--text-secondary);font-weight:600;padding:4px 0;}
.ef-details summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
.ef-details .dtm-table-wrap{max-height:340px;overflow:auto;margin-top:6px;}
.ef-row-muted td{color:var(--text-muted);}
.ef-bars{display:flex;flex-direction:column;gap:8px;}
.ef-bars-row{display:grid;grid-template-columns:minmax(80px,130px) minmax(0,1fr) auto;align-items:center;gap:10px;font-size:12.5px;}
.ef-bars-name{font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ef-bars-track{height:8px;border-radius:999px;background:var(--bg-inset);overflow:hidden;}
.ef-bars-track i{display:block;height:100%;border-radius:999px;}
.ef-bars-val{font-family:var(--font-mono);font-weight:600;white-space:nowrap;}
@media(max-width:560px){
  .ef-bars-row{grid-template-columns:minmax(0,1fr) auto;}
  .ef-bars-track{grid-column:1/-1;grid-row:2;}
}

/* Загоны: раздача на голову */
.pen-perhead{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;padding-right:4px;}
.pen-perhead-row{display:grid;grid-template-columns:minmax(64px,120px) minmax(0,1fr) auto 64px;align-items:center;gap:10px;font-size:12.5px;}
.pen-perhead-name{font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pen-perhead-track{height:8px;border-radius:999px;background:var(--bg-inset);overflow:hidden;}
.pen-perhead-track i{display:block;height:100%;border-radius:999px;}
.pen-perhead-val{font-family:var(--font-mono);font-weight:600;white-space:nowrap;text-align:right;}
.pen-perhead-row .dtm-pill{justify-self:end;}
@media(max-width:480px){.pen-perhead-row{grid-template-columns:minmax(0,1fr) auto 64px;}.pen-perhead-track{grid-column:1/-1;grid-row:2;}}

/* Главная: нет данных за выбранный день */
.dash-nodata{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0 0;font-size:12.5px;color:var(--text-secondary);}

/* Ингредиенты: расход по дням */
.ing-source{margin:-6px 0 16px;font-size:12.5px;color:var(--text-secondary);max-width:80ch;}
.ing-legacy{margin:0 0 16px;padding:10px 14px;font-size:12.5px;line-height:1.5;color:var(--text-secondary);background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--amber) 35%,transparent);border-radius:10px;max-width:90ch;}
.ing-empty{font-size:13px;color:var(--text-secondary);margin:0 0 12px;max-width:70ch;}
.ing-donut{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.ing-legend{display:flex;flex-direction:column;gap:9px;flex:1;min-width:0;}
.ing-legend{flex:1 1 220px;}
.ing-legend-row{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:2px;min-width:0;}
.ing-legend-row i{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.ing-legend-name{font-size:12.5px;color:var(--text-primary);font-weight:600;flex:1 1 110px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ing-legend-val{font-size:12px;color:var(--text-secondary);font-family:var(--font-mono);white-space:nowrap;margin-left:auto;}
.dtm-table tfoot td{border-top:1px solid var(--border-strong);padding-top:10px;}
.ing-day-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--text-primary);cursor:pointer;}
.ing-day-btn svg{transition:transform .15s ease;transform:rotate(-90deg);color:var(--text-muted);}
.ing-day-btn[aria-expanded="true"] svg{transform:none;}
.ing-day-btn:hover{color:var(--accent);}
.ing-day-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
.ing-days small,.ing-day-btn small{color:var(--text-muted);font-weight:500;margin-left:2px;}
.ing-day-missing td{color:var(--text-muted);}
.ing-nodata{font-family:var(--font-body);font-size:12px;color:var(--text-muted);}
.ing-day-detail > td{background:var(--bg-inset);padding:12px 12px 16px;}
.ing-day-detail-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
@media(max-width:767px){
  .ing-donut{justify-content:center;}
  .ing-legend{flex-basis:100%;}
}

/* Динамика циклов воспроизводства */
.rcc-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 10px;font-size:12px;color:var(--text-secondary);}
.rcc-legend span{display:inline-flex;align-items:center;gap:7px;}
.rcc-key{display:inline-block;width:10px;height:10px;border-radius:3px;flex:0 0 auto;}
.rcc-key-elig{background:color-mix(in srgb,var(--text-muted) 55%,transparent);}
.rcc-elig{fill:color-mix(in srgb,var(--text-muted) 55%,transparent);}
.rcc-key-bred{background:var(--blue);}
.rcc-bred{fill:var(--blue);}
.rcc-key-hdr{background:var(--accent-2);border-radius:50%;}
.rcc-hdr{stroke:var(--accent-2);}
.rcc-hdr-dot{fill:var(--bg-card);stroke:var(--accent-2);}

/* Календарь воспроизводства */
.rc-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-bottom:14px;}
.rc-field{display:flex;align-items:center;gap:10px;min-width:0;}
.rc-flabel{font-size:13px;color:var(--text-secondary);white-space:nowrap;}
.rc-field .period-toggle{margin-right:0;}
.rc-kinds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.rc-kind{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  font:inherit;font-size:12.5px;font-weight:500;color:var(--text-secondary);
  background:transparent;border:1px solid var(--border);cursor:pointer;
  transition:color .15s ease,border-color .15s ease,background-color .15s ease;
}
.rc-kind b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-primary);}
.rc-kind i,.rc-row i{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--text-muted);}
.rc-kind:hover{color:var(--text-primary);border-color:var(--border-strong);}
.rc-kind.is-active{color:var(--text-primary);background:var(--bg-elevated);border-color:var(--border-strong);}
.rc-kind:focus-visible,.rc-day:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.rc-osem i{background:var(--blue);}
.rc-stel i{background:var(--green);}
.rc-fresh i{background:var(--tone-purple);}
.rc-dry i{background:var(--amber);}
.rc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;max-height:560px;overflow-y:auto;}
.rc-day{
  position:relative;display:flex;flex-direction:column;gap:6px;min-height:104px;padding:12px 12px 12px 15px;
  font:inherit;text-align:left;color:var(--text-primary);cursor:pointer;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;
  transition:border-color .15s ease,background-color .15s ease;
}
.rc-day::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--border-strong);}
.rc-day.rc-lead-osem::before{background:var(--blue);}
.rc-day.rc-lead-stel::before{background:var(--green);}
.rc-day.rc-lead-fresh::before{background:var(--tone-purple);}
.rc-day.rc-lead-dry::before{background:var(--amber);}
.rc-day:hover{border-color:var(--border-strong);}
.rc-day[aria-pressed="true"]{border-color:var(--accent);background:var(--bg-card);}
.rc-day-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:2px;}
.rc-day-head b{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;}
.rc-day-head small{font-size:11.5px;color:var(--text-muted);}
.rc-row{display:flex;align-items:center;gap:7px;font-size:12px;line-height:1.3;}
.rc-row em{font-style:normal;color:var(--text-secondary);flex:1 1 auto;min-width:0;}
.rc-row b{font-weight:600;font-variant-numeric:tabular-nums;}
.rc-empty{font-size:12px;color:var(--text-muted);}
.rc-detail{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}
.rc-detail-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;}
.rc-detail-list{max-height:420px;overflow-y:auto;}
@media(max-width:767px){
  .rc-field{flex-direction:column;align-items:flex-start;gap:6px;}
  .rc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:1279px){
  .tb-icon.tb-find{display:flex;}
}
@media(max-width:767px){
  .an-row{grid-template-columns:1fr 1fr;gap:4px 10px;}
  .an-row.cat-row{grid-template-columns:1fr 1fr;}
  .an-row svg{display:none;}
  .tb-brief:not(.is-open),.tb-watch:not(.is-open){display:none;}
  .rw-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cmp-row{grid-template-columns:1fr 1fr;}
  .cmp-row.cmp-head{display:none;}
}
.page-title{font-family:var(--font-body);font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--text-primary);}
.page-title small{display:block;font-family:var(--font-body);font-size:13px;letter-spacing:0;color:var(--text-secondary);font-weight:400;margin-top:6px;}

/* legend */
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--text-secondary);font-weight:500;}
.legend .li{display:flex;align-items:center;gap:7px;}
.legend .li i{width:11px;height:11px;border-radius:3px;display:inline-block;}
.legend .li .dash{width:16px;height:0;border-top:2px dashed var(--amber);border-radius:0;}

/* chart tooltip */
.chart-tip{position:fixed;pointer-events:none;z-index:200;background:rgba(28,24,42,.94);color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:9px 12px;font-size:11.5px;box-shadow:0 12px 30px rgba(0,0,0,.3);backdrop-filter:blur(6px);min-width:120px;}
.chart-tip .tt-date{font-family:var(--font-mono);font-size:10.5px;color:#cbb9e6;margin-bottom:5px;}
.chart-tip .tt-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:3px;}
.chart-tip .tt-row .k{display:flex;align-items:center;gap:6px;color:#c9c4d6;}
.chart-tip .tt-row .k i{width:8px;height:8px;border-radius:2px;}
.chart-tip .tt-row .v{font-family:var(--font-mono);font-weight:600;}

/* draw-in animation for chart paths */
/* pathLength="1" on the path: dash length is relative, so long lines are drawn fully */
.draw-line{stroke-dasharray:1;animation:draw 1.4s cubic-bezier(.4,0,.2,1) both;}
@keyframes draw{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
.fade-area{animation:fade-area 1s ease-out .5s both;}
@keyframes fade-area{from{opacity:0;}to{opacity:1;}}
.grow-bar{animation:grow-bar .9s cubic-bezier(.22,1,.36,1) both;transform-origin:bottom;}
@keyframes grow-bar{from{transform:scaleY(0);}to{transform:scaleY(1);}}
.grow-bar-x{animation:grow-bar-x .9s cubic-bezier(.22,1,.36,1) both;transform-origin:left;}
@keyframes grow-bar-x{from{transform:scaleX(0);}to{transform:scaleX(1);}}

@media (prefers-reduced-motion: reduce){
  .stagger,.fade-area,.draw-line,.grow-bar,.grow-bar-x,.kpi-card.crit{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important;}
}

/* ===================== H-BAR (plan/fact) ===================== */
.hbar{margin-bottom:15px;}
.hbar .hb-head{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:7px;font-weight:600;}
.hbar .hb-track{height:22px;border-radius:7px;background:var(--bg-inset);position:relative;overflow:hidden;}
.hbar .hb-plan{position:absolute;left:0;top:0;bottom:0;background:repeating-linear-gradient(45deg,var(--plan-stripe-a),var(--plan-stripe-a) 5px,var(--plan-stripe-b) 5px,var(--plan-stripe-b) 10px);border-radius:7px;}
.hbar .hb-fact{position:absolute;left:0;top:0;bottom:0;border-radius:7px;display:flex;align-items:center;justify-content:flex-end;padding-right:9px;color:#fff;font-family:var(--font-mono);font-size:11px;font-weight:700;}
.hbar .hb-fact.green{background:var(--green);}
.hbar .hb-fact.amber{background:var(--amber);}
.hbar .hb-fact.red{background:var(--red);}

/* ===================== TASK AGG ===================== */
.task-bar{margin-bottom:11px;min-width:0;}
.task-bar .tb-row{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:5px;font-weight:500;}
.task-bar .tb-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.task-bar .tb-row b{font-family:var(--font-mono);color:var(--text-secondary);font-weight:600;flex:0 0 auto;}
.task-bar .tb-track{height:8px;border-radius:8px;background:var(--bg-inset);overflow:hidden;}
.task-bar .tb-track i{display:block;height:100%;border-radius:8px;background:var(--grad-brand);}

/* ===================== FINANCE SNAPSHOT ===================== */
.fin-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.fin-row:last-of-type{border-bottom:none;}
.fin-row .fin-name{font-weight:500;color:var(--text-secondary);}
.fin-row .fin-val{font-family:var(--font-mono);font-weight:600;display:flex;align-items:center;gap:7px;}
.fin-row.total{border-top:2px solid var(--border-strong);margin-top:5px;padding-top:13px;}
.fin-row.total .fin-name{color:var(--text-primary);font-weight:700;}
.fin-row.total .fin-val{font-size:16px;color:var(--green);}
.margin-pill{background:var(--green-soft);color:var(--green);font-family:var(--font-mono);font-size:12px;font-weight:700;padding:8px 12px;border-radius:9px;text-align:center;margin-top:12px;}

/* ===================== HR MINI ===================== */
.gauge-wrap{display:flex;align-items:center;gap:16px;min-width:0;flex-wrap:wrap;}
.status-pills{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px;}
.spill{font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:8px;background:var(--bg-elevated);color:var(--text-secondary);display:flex;align-items:center;gap:6px;}
.spill b{font-family:var(--font-mono);color:var(--text-primary);}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:5px 11px;border-radius:8px;margin-top:10px;}
.chip.ok{background:var(--green-soft);color:var(--green);}
.chip.task{background:var(--blue-soft);color:var(--blue);}

/* ===================== P&L CARDS ===================== */
.pnl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:1100px){.pnl-grid{grid-template-columns:1fr;}}
.pnl-card .pnl-rev{font-family:var(--font-mono);font-size:26px;font-weight:700;color:var(--text-primary);}
.pnl-rev{font-family:var(--font-mono);font-size:26px;font-weight:700;color:var(--text-primary);}
.pnl-cost{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;padding:7px 0;color:var(--text-secondary);}
.pnl-cost .v{font-family:var(--font-mono);font-weight:600;color:var(--text-primary);}
.pnl-cost .wf{flex:1;margin:0 12px;height:7px;border-radius:7px;background:var(--bg-inset);overflow:hidden;}
.pnl-cost .wf i{display:block;height:100%;border-radius:7px;}
.pnl-margin{margin-top:13px;padding-top:14px;border-top:2px solid var(--border-strong);}
.pnl-margin .pm-val{font-family:var(--font-mono);font-size:30px;font-weight:700;color:var(--green);}
.pnl-margin .pm-label{font-size:12px;color:var(--text-secondary);font-weight:600;}

/* ===================== KANBAN ===================== */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;}
@media(max-width:1100px){.kanban{grid-template-columns:1fr;}}
.kan-col{background:var(--bg-elevated);border-radius:var(--r-md);padding:14px;min-height:200px;}
.kan-col-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;padding:0 3px;}
.kan-col-head .kc-title{font-family:var(--font-display);font-size:16px;letter-spacing:1px;display:flex;align-items:center;gap:8px;}
.kan-count{font-family:var(--font-mono);font-size:11px;font-weight:700;background:var(--bg-card);color:var(--text-secondary);padding:3px 9px;border-radius:20px;}
.task-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-sm);padding:13px 14px;margin-bottom:11px;cursor:grab;transition:transform .15s,box-shadow .15s,border-color .15s;position:relative;}
.task-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-strong);}
.task-card:active{cursor:grabbing;}
.task-card.done{opacity:.62;}
.task-card .tc-top{display:flex;align-items:flex-start;gap:9px;}
.task-card .pdot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:0 0 auto;}
.task-card .pdot.high{background:var(--red);}
.task-card .pdot.med{background:var(--amber);}
.task-card .pdot.low{background:var(--green);}
.task-card .tc-title{font-weight:600;font-size:13.5px;line-height:1.35;}
.task-card .tc-meta{font-size:11.5px;color:var(--text-secondary);margin-top:9px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.task-card .tc-due{font-family:var(--font-mono);font-size:11px;font-weight:600;margin-top:8px;display:flex;align-items:center;gap:6px;}
.task-card .tc-due.red{color:var(--red);}
.task-card .tc-due.amber{color:#cf8a08;}
.task-card .tc-due.green{color:var(--green);}
.avatar-xs{width:22px;height:22px;border-radius:7px;background:var(--grad-purple);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;font-family:var(--font-mono);flex:0 0 auto;}
.tc-open{position:absolute;right:11px;bottom:11px;font-size:11px;font-weight:600;color:var(--accent);opacity:0;transition:opacity .15s;}
.task-card:hover .tc-open{opacity:1;}
.check-badge{width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:1px;}

/* filter bar */
.filter-bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 18px;margin-bottom:18px;box-shadow:none;}
.filter-group{display:flex;align-items:center;gap:9px;font-size:12.5px;}
.filter-group .fg-label{color:var(--text-secondary);font-weight:500;}
.select-mini{background:var(--bg-elevated);border:1px solid var(--border);border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:500;color:var(--text-primary);font-family:inherit;}
.select-mini option{background:var(--bg-elevated);color:var(--text-primary);}
.pill-group{display:flex;gap:2px;background:var(--bg-elevated);padding:3px;border-radius:999px;border:1px solid var(--border);}
.pill-group .pg{font-size:12px;font-weight:500;color:var(--text-secondary);padding:6px 12px;border-radius:999px;transition:all .15s;}
.pill-group .pg.active{background:var(--bg-card);color:var(--text-primary);box-shadow:var(--shadow-sm);font-weight:600;}

/* chain visibility */
.chain{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;padding:10px 0;}
.chain-node{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--r-sm);padding:13px 15px;min-width:160px;text-align:center;position:relative;}
.chain-node .cn-av{width:40px;height:40px;border-radius:12px;background:var(--grad-brand);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:15px;margin:0 auto 8px;letter-spacing:1px;}
.chain-node .cn-name{font-weight:700;font-size:13px;}
.chain-node .cn-role{font-size:11px;color:var(--text-secondary);}
.chain-node .cn-time{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);margin-top:5px;}
.chain-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 12px;color:var(--text-muted);min-width:90px;}
.chain-arrow .ca-label{font-size:10px;font-weight:600;color:var(--accent);margin-bottom:3px;}
.chain-arrow .ca-line{width:100%;border-top:2px dotted var(--border-strong);position:relative;}
.chain-arrow .ca-line::after{content:"▸";position:absolute;right:-4px;top:-11px;color:var(--accent);font-size:13px;}

/* ===================== TABLE ===================== */
.tbl{width:100%;border-collapse:collapse;}
.tbl thead th{text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);font-weight:500;padding:0 14px 12px;}
.tbl tbody tr{transition:background .12s;cursor:pointer;}
.tbl tbody tr:hover{background:var(--bg-elevated);}
.tbl tbody td{padding:14px;font-size:13px;border-top:1px solid var(--border);}
.tbl tbody td:first-child{font-weight:500;}
.tbl .cell-name{display:flex;align-items:center;gap:10px;}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;padding:4px 10px;border-radius:999px;}
.tag.green{background:var(--green-soft);color:var(--green);}
.tag.amber{background:var(--amber-soft);color:var(--amber);}
.tag.red{background:var(--red-soft);color:var(--red);}
.tag.blue{background:var(--blue-soft);color:var(--blue);}
.tag.muted{background:var(--bg-inset);color:var(--text-secondary);}
.row-expand{background:var(--bg-elevated);}
.row-expand td{padding:0;border-top:none;}
.row-expand-inner{padding:16px 22px;display:flex;gap:30px;animation:expand-in .25s ease;}
@keyframes expand-in{from{opacity:0;}to{opacity:1;}}

/* ===================== MODAL ===================== */
.modal-overlay{position:fixed;inset:0;background:rgba(28,24,42,.46);backdrop-filter:blur(3px);z-index:300;display:flex;align-items:center;justify-content:center;animation:fade-in .2s;}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}
.modal{background:var(--bg-card);border-radius:var(--r-lg);width:560px;max-width:92vw;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lift);animation:modal-pop .3s cubic-bezier(.22,1,.36,1);}
@keyframes modal-pop{from{opacity:0;transform:translateY(20px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);}
.modal-head h3{margin:0;font-family:var(--font-display);font-size:24px;letter-spacing:1px;}
.modal-body{padding:22px 24px;display:flex;flex-direction:column;gap:16px;}
.modal-foot{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;}
.modal-foot .btn{flex:1 1 140px;}
.field label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:7px;}
.field input,.field select,.field textarea{width:100%;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:10px;padding:11px 13px;font-size:13.5px;font-family:inherit;color:var(--text-primary);transition:border-color .15s;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);}
.field textarea{resize:vertical;min-height:74px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.prio-pick{display:flex;gap:8px;flex-wrap:wrap;}
.prio-pick .pp{flex:1;text-align:center;padding:10px;border-radius:10px;font-size:12.5px;font-weight:600;border:1.5px solid var(--border-strong);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:7px;}
.prio-pick .pp.sel.crit{border-color:var(--red);background:var(--red-soft);color:var(--red);}
.prio-pick .pp.sel.high{border-color:var(--amber);background:var(--amber-soft);color:#cf8a08;}
.prio-pick .pp.sel.medium{border-color:var(--blue);background:var(--blue-soft);color:var(--blue);}
.prio-pick .pp.sel.low{border-color:var(--green);background:var(--green-soft);color:var(--green);}

/* mini search */
.search-mini{display:flex;align-items:center;gap:8px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:10px;padding:8px 13px;font-size:12.5px;color:var(--text-secondary);min-width:200px;}
.search-mini input{border:none;background:none;outline:none;font-family:inherit;font-size:12.5px;color:var(--text-primary);flex:1;}

/* pagination */
.pager{display:flex;align-items:center;gap:5px;}
.pager .pg-btn{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;color:var(--text-secondary);font-family:var(--font-mono);transition:all .15s;}
.pager .pg-btn:hover{background:var(--bg-elevated);}
.pager .pg-btn.active{background:var(--grad-brand);color:#fff;}

/* misc utility */
.flex{display:flex;}.items-center{align-items:center;}.gap-8{gap:8px;}.gap-12{gap:12px;}
.mono{font-family:var(--font-mono);}
.muted{color:var(--text-secondary);}
.spacer{flex:1;}
.delta-up{color:var(--green);}.delta-down{color:var(--red);}.delta-flat{color:var(--amber);}
.divider{height:1px;background:var(--border);margin:14px 0;}
.fade-page{animation:fade-page .35s ease;}
@keyframes fade-page{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* settings theme picker */
.theme-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.theme-opt{
  text-align:left;padding:12px;border-radius:14px;
  border:1.5px solid var(--border-strong);background:var(--bg-elevated);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.theme-opt:hover{border-color:var(--accent);transform:translateY(-1px);}
.theme-opt.on{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);}
.theme-opt .to-preview{
  height:54px;border-radius:10px;margin-bottom:10px;overflow:hidden;
  display:grid;grid-template-columns:18px 1fr;border:1px solid rgba(255,255,255,.08);
}
.theme-opt .to-sb{background:#fff;}
.theme-opt .to-main{background:#F4F6FA;display:flex;flex-direction:column;gap:4px;padding:7px 6px;}
.theme-opt .to-main i{display:block;height:8px;border-radius:3px;background:#fff;opacity:.95;}
.theme-opt .to-main i:first-child{background:#FFE8E0;}
.theme-opt.dark .to-sb{background:#0C1018;}
.theme-opt.dark .to-main{background:#0B0E14;}
.theme-opt.dark .to-main i{background:#171C26;}
.theme-opt b{display:block;font-size:13px;font-weight:700;}
.theme-opt span{display:block;font-size:11px;color:var(--text-secondary);margin-top:2px;}

/* ============================================================
   Dark theme — AI SaaS CRM palette (Dribbble 27443169):
   ink navy canvas, glass cards, mint + periwinkle accents.
   ============================================================ */
html[data-theme="dark"]{
  color-scheme:dark;
  background:#0B0F14;
  --bg-page:#0B0E14;
  --bg-canvas-2:#0F131B;
  --bg-card:#141922;
  --bg-elevated:#1A2130;
  --bg-inset:#0E121A;
  --border:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.12);

  --text-primary:#F2F5FA;
  --text-secondary:#8B93A7;
  --text-muted:#5C6578;

  --accent:#2EE6C7;
  --accent-2:#7B8CFF;
  --grad-brand:linear-gradient(120deg,#2EE6C7 0%,#7B8CFF 100%);
  --grad-brand-soft:linear-gradient(120deg,rgba(46,230,199,.16) 0%,rgba(123,140,255,.14) 100%);

  --grad-pink:linear-gradient(135deg,rgba(255,91,138,.18) 0%,rgba(200,30,99,.10) 100%);
  --grad-purple:linear-gradient(135deg,rgba(139,124,255,.18) 0%,rgba(91,75,219,.10) 100%);
  --grad-teal:linear-gradient(135deg,rgba(46,230,199,.16) 0%,rgba(59,130,246,.10) 100%);
  --grad-orange:linear-gradient(135deg,rgba(255,178,62,.18) 0%,rgba(249,115,22,.10) 100%);
  --tone-pink:#FF5B8A;
  --tone-pink-soft:rgba(255,91,138,.12);
  --tone-purple:#8B7CFF;
  --tone-purple-soft:rgba(139,124,255,.12);
  --tone-teal:#2EE6C7;
  --tone-teal-soft:rgba(46,230,199,.12);
  --tone-orange:#FFB020;
  --tone-orange-soft:rgba(255,176,32,.12);

  --green:#3DDC97;
  --green-soft:rgba(61,220,151,.14);
  --red:#FF6B6B;
  --red-soft:rgba(255,107,107,.14);
  --amber:#FFB020;
  --amber-soft:rgba(255,176,32,.14);
  --blue:#5BA8FF;
  --blue-soft:rgba(91,168,255,.14);

  --shadow-sm:0 2px 10px rgba(0,0,0,.28);
  --shadow-md:0 12px 32px rgba(0,0,0,.38);
  --shadow-lift:0 20px 48px rgba(0,0,0,.5);
  --shadow-grad:0 14px 30px rgba(46,230,199,.22);

  --scrollbar-thumb:#2A3142;
  --scrollbar-thumb-hover:#3A4358;
  --plan-stripe-a:#1C2330;
  --plan-stripe-b:#242C3C;
  --warn-ink:#FFC35A;
  --glow:rgba(46,230,199,.45);
  --page-glow:
    radial-gradient(1100px 520px at 82% -12%, rgba(46,230,199,.10), transparent 55%),
    radial-gradient(900px 480px at -8% 108%, rgba(123,140,255,.10), transparent 52%);
}

html[data-theme="dark"] .sidebar{
  background:#0D1118;
  border-right-color:rgba(255,255,255,.06);
}
html[data-theme="dark"] .topbar{
  background:rgba(13,17,24,.78);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.06);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .heat-tile,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .exp-card,
html[data-theme="dark"] .inc-card,
html[data-theme="dark"] .req-card,
html[data-theme="dark"] .grad-card{
  background:var(--bg-card);
  box-shadow:none;
  border-color:var(--border);
}
html[data-theme="dark"] .grad-card.pink{background:var(--tone-pink-soft);}
html[data-theme="dark"] .grad-card.purple{background:var(--tone-purple-soft);}
html[data-theme="dark"] .grad-card.teal{background:var(--tone-teal-soft);}
html[data-theme="dark"] .grad-card.orange{background:var(--tone-orange-soft);}
html[data-theme="dark"] .sb-item.active{
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--accent);
}
html[data-theme="dark"] .tab.active{
  background:var(--bg-card);
  color:var(--text-primary);
  box-shadow:var(--shadow-sm);
  border-color:var(--border);
}
html[data-theme="dark"] .pill-group .pg.active{
  background:var(--bg-elevated);
  color:var(--text-primary);
  box-shadow:none;
}
html[data-theme="dark"] .kan-col,
html[data-theme="dark"] .inc-col{
  background:rgba(255,255,255,.03);
}
html[data-theme="dark"] .modal-overlay{
  background:rgba(6,8,12,.62);
}
html[data-theme="dark"] .sb-logo{
  box-shadow:0 0 0 1px rgba(198,216,110,.32), 0 6px 18px rgba(0,0,0,.5);
}
/* Light — Mondays shell polish */
html[data-theme="light"]{
  color-scheme:light;
}
html[data-theme="light"] .sb-logo{
  box-shadow:0 0 0 1px var(--border);
}
html[data-theme="light"] .sidebar{
  background:#fff;
  border-right-color:var(--border);
}
html[data-theme="light"] .topbar{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
}
html[data-theme="light"] .sb-item.active{
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  color:var(--accent);
}
html[data-theme="light"] .tab.active{
  background:#fff;
  color:var(--text-primary);
  box-shadow:var(--shadow-sm);
  border-color:var(--border);
}
html[data-theme="light"] .pill-group .pg.active{
  background:#fff;
  color:var(--text-primary);
  box-shadow:var(--shadow-sm);
}

/* ============================================================
   Add Widget panel — флаут выбора виджетов для bento-дашборда
   ============================================================ */
.awp-overlay{
  position:fixed;inset:0;z-index:320;
  background:rgba(20,24,36,.18);
  display:flex;justify-content:flex-end;align-items:stretch;
  animation:fade-in .18s;
}
body.awp-dnd{cursor:grabbing !important;user-select:none;}
body.awp-dnd .awp-overlay{
  pointer-events:none;background:transparent;backdrop-filter:none;
}
body.awp-dnd .awp-panel{opacity:.38;transform:translateX(12px);pointer-events:none;}
.awp-ghost{
  position:fixed;left:0;top:0;z-index:600;width:172px;margin:0;
  pointer-events:none !important;
  border-radius:14px;overflow:hidden;
  background:var(--bg-card);border:1px solid var(--border-strong);
  box-shadow:0 18px 44px rgba(20,24,36,.28);
  transform:rotate(-5deg) scale(1.06);
  transform-origin:top left;
  animation:none !important;opacity:1;
}
.awp-ghost .awp-thumb{
  height:96px;padding:0;border-bottom:1px solid var(--border);
}
.awp-ghost .awp-thumb-heroes,
.awp-ghost .awp-thumb-chart,
.awp-ghost .awp-thumb-list,
.awp-ghost .awp-thumb-text,
.awp-ghost .awp-thumb-donut,
.awp-ghost .awp-thumb-kpis{padding:10px;}
.awp-ghost-cap{
  padding:8px 10px;font-size:12.5px;font-weight:700;
  color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.awp-panel{
  width:460px;max-width:94vw;height:100vh;
  background:var(--bg-card);border-left:1px solid var(--border);
  box-shadow:var(--shadow-lift);
  display:flex;flex-direction:column;overflow:hidden;
  animation:awp-slide-in .28s cubic-bezier(.22,1,.36,1);
  pointer-events:auto;
}
@keyframes awp-slide-in{from{transform:translateX(100%);}to{transform:translateX(0);}}
.awp-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:20px 20px 16px;border-bottom:1px solid var(--border);flex:0 0 auto;
}
.awp-head b{font-size:16px;font-weight:700;}
.awp-head small{display:block;margin-top:4px;font-size:12px;color:var(--text-muted);font-weight:500;line-height:1.4;max-width:320px;}
.awp-list{
  flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px;
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  grid-auto-rows:max-content;align-content:start;
}
.awp-card{
  position:relative;
  display:flex;flex-direction:column;gap:0;
  border:1px solid var(--border);border-radius:16px;
  background:var(--bg-page);cursor:grab;overflow:hidden;
  touch-action:none;user-select:none;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.awp-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.awp-card.is-dragging{
  opacity:.35;border-style:dashed;box-shadow:none;transform:none;
}
.awp-card:active{cursor:grabbing;}
.awp-thumb{
  height:92px;padding:10px;background:var(--bg-card);
  border-bottom:1px solid var(--border);
  display:flex;align-items:stretch;justify-content:stretch;gap:6px;
}
.awp-thumb-kpis{padding:10px;gap:8px;}
.awp-mini-kpi{
  flex:1;min-width:0;border-radius:8px;background:var(--bg-page);
  border:1px solid var(--border);padding:7px 8px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.awp-mini-ico{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;}
.awp-mini-kpi b{
  font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--text-primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1;
}
.awp-mini-kpi b small{font-size:10px;font-weight:600;color:var(--text-secondary);}
.awp-mini-lbl{font-size:10.5px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.awp-thumb-chart{flex-direction:column;gap:4px;}
.awp-thumb-chart svg{flex:1;min-height:0;}
.awp-mini-head{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;color:var(--text-secondary);}
.awp-mini-head b{font-family:var(--font-mono);font-size:12.5px;font-weight:700;}
.awp-donut-val{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text-primary);
}
.awp-mini-pills{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.awp-mini-pills span{
  display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text-secondary);
  background:var(--bg-page);border:1px solid var(--border);border-radius:7px;padding:4px 6px;
  white-space:nowrap;overflow:hidden;
}
.awp-mini-pills i{width:6px;height:6px;border-radius:50%;flex:0 0 auto;}
.awp-mini-pills b{font-family:var(--font-mono);color:var(--text-primary);margin-left:auto;}
.awp-thumb-heroes i{flex:1;border-radius:8px;}
.awp-thumb-heroes .pink{background:linear-gradient(160deg,#FF8A9A,#E23D1A);}
.awp-thumb-heroes .purple{background:linear-gradient(160deg,#8B7CFF,#4F46E5);}
.awp-thumb-heroes .teal{background:linear-gradient(160deg,#2EE6C7,#0D9488);}
.awp-thumb-heroes .orange{background:linear-gradient(160deg,#FFB23E,#FF5A2D);}
.awp-thumb-chart svg{width:100%;display:block;}
.awp-thumb-list{flex-direction:column;justify-content:center;gap:8px;}
.awp-thumb-list span{height:14px;border-radius:7px;background:var(--bg-elevated);}
.awp-thumb-list .red{width:92%;background:color-mix(in srgb, var(--red) 22%, var(--bg-elevated));}
.awp-thumb-list .amber{width:78%;background:color-mix(in srgb, var(--amber) 22%, var(--bg-elevated));}
.awp-thumb-list .blue{width:64%;background:color-mix(in srgb, var(--blue) 22%, var(--bg-elevated));}
.awp-thumb-text{flex-direction:column;justify-content:center;gap:7px;padding:16px 14px;}
.awp-thumb-text span{height:7px;border-radius:4px;background:var(--border-strong);width:100%;}
.awp-thumb-text .short{width:55%;}
.awp-thumb-donut{align-items:center;gap:12px;padding:14px 16px;}
.awp-thumb-donut-ico{position:relative;width:48px;height:48px;flex:0 0 auto;}
.awp-thumb-donut-ico > i{
  display:block;width:48px;height:48px;border-radius:50%;
  -webkit-mask:radial-gradient(farthest-side,transparent 56%,#000 57%);
  mask:radial-gradient(farthest-side,transparent 56%,#000 57%);
}
.awp-thumb-donut-ico svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.awp-thumb-bars{flex:1;display:flex;flex-direction:column;gap:6px;}
.awp-thumb-bars span{height:8px;border-radius:4px;background:var(--bg-elevated);}
.awp-thumb-bars span:nth-child(1){width:90%;}
.awp-thumb-bars span:nth-child(2){width:70%;}
.awp-thumb-bars span:nth-child(3){width:50%;}
.awp-meta{flex:1;padding:8px 10px 0;}
.awp-title{font-size:13px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.awp-desc{font-size:11px;color:var(--text-secondary);line-height:1.35;margin-top:2px;}
.awp-tag{display:inline-block;margin-top:4px;font-size:10.5px;font-weight:600;color:var(--accent);}
.awp-select{margin:8px 10px 10px;align-self:stretch;justify-content:center;}
.awp-empty{padding:28px 12px;text-align:center;font-size:12.5px;color:var(--text-muted);line-height:1.6;grid-column:1/-1;}
.dash-grid.is-drop-target{
  outline:2px dashed var(--accent);outline-offset:8px;
  border-radius:var(--r-lg);background:color-mix(in srgb, var(--accent) 4%, transparent);
}
.dash-wgt.is-drop-before{
  box-shadow:inset 3px 0 0 var(--accent);
  outline:2px dashed color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset:4px;border-radius:var(--r-lg);
}
.dash-wgt.is-drop-after{
  box-shadow:inset 0 -3px 0 var(--accent);
  outline:2px dashed color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset:4px;border-radius:var(--r-lg);
}
@media(max-width:720px){
  .awp-list{grid-template-columns:1fr;}
  .awp-panel{width:100%;}
}

/* ---------- Login ---------- */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:24px;background:var(--bg-page);}
.login-bg{position:absolute;inset:0;background:
  radial-gradient(900px 500px at 15% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
  radial-gradient(700px 420px at 85% 80%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 55%),
  linear-gradient(160deg, color-mix(in srgb, var(--bg-page) 88%, #1a1a1a) 0%, var(--bg-page) 100%);
  pointer-events:none;}
.login-card{position:relative;z-index:1;width:100%;max-width:420px;background:var(--bg-card);border:1px solid var(--border);border-radius:18px;padding:28px 26px 22px;box-shadow:var(--shadow-lg, 0 18px 50px rgba(0,0,0,.18));animation:fade-in .35s ease;}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.login-brand img{width:42px;height:42px;object-fit:contain;}
.login-brand b{display:block;font-size:18px;letter-spacing:.04em;}
.login-brand span{display:block;font-size:12px;color:var(--text-secondary);}
.login-card h1{font-family:"Bebas Neue",sans-serif;font-size:34px;letter-spacing:.04em;margin:0 0 6px;color:var(--text-primary);}
.login-sub{margin:0 0 18px;font-size:13px;color:var(--text-secondary);line-height:1.45;}
.login-error{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb, var(--red) 14%, transparent);color:var(--red);font-size:13px;}
.login-hint{margin-top:14px;font-size:11.5px;color:var(--text-muted);line-height:1.4;}
.login-card .field{margin-bottom:12px;}

/* farm efficiency */
.eff-intro{font-size:13px;color:var(--text-secondary);line-height:1.55;margin:-4px 0 22px;max-width:820px;}
.eff-section{margin-bottom:28px;}
.eff-banner{font-size:12.5px;color:var(--text-secondary);line-height:1.5;background:var(--bg-elevated);border-radius:10px;padding:10px 14px;margin-bottom:14px;}
.eff-hero-num{font-family:var(--font-mono);font-size:28px;font-weight:700;margin-bottom:10px;}
.eff-hero-num span{font-size:14px;color:var(--text-secondary);font-weight:600;margin-left:6px;}
.eff-nodata{color:var(--text-muted);font-size:12.5px;font-weight:600;}
.eff-nodata-val{font-size:18px;font-weight:700;color:var(--text-muted);}
.card.eff-muted{opacity:.72;background:var(--bg-elevated);}
.hint-i{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;color:var(--text-muted);cursor:help;flex:0 0 auto;}
.hint-i:hover,.hint-i:focus{color:var(--accent);outline:none;}
.hint-pop{display:none;position:absolute;left:0;top:calc(100% + 8px);z-index:20;width:min(320px,70vw);padding:10px 12px;border-radius:10px;background:var(--bg-card);color:var(--text-secondary);font-size:12px;font-weight:500;line-height:1.45;box-shadow:var(--shadow-md);border:1px solid var(--border);}
.hint-i:hover .hint-pop,.hint-i:focus .hint-pop{display:block;}

/* Herd structure: optional interactive composition diagrams. */
.herd-composition-chart { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; min-height: 300px; }
.herd-composition-ring { width: 240px; max-width: 100%; flex: 0 1 240px; overflow: visible; }
.herd-composition-legend { flex: 1 1 240px; min-width: 0; }
.herd-composition-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; border: 0; border-radius: 8px; padding: 12px 8px; background: transparent; color: var(--text-primary); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.herd-composition-item:hover, .herd-composition-item:focus-visible { background: var(--bg-inset); }
.herd-composition-item b { font-family: var(--font-mono); }
.herd-composition-item:focus-visible, .herd-composition-ring circle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.herd-overview-diagrams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.herd-overview-diagrams .herd-composition-chart { flex-direction: column; }
.herd-overview-diagrams .herd-composition-legend { width: 100%; flex: auto; }
.herd-overview-diagrams .herd-composition-item { grid-template-columns: 10px minmax(0, 1fr) auto auto; font-size: 12px; gap: 8px; }
@media (max-width: 1200px) { .herd-overview-diagrams { grid-template-columns: 1fr; } }

.herd-composition-hover { min-height: 66px; width: 100%; padding: 10px 12px; border-radius: 10px; background: var(--bg-inset); text-align: center; color: var(--text-secondary); font-size: 13px; line-height: 1.6; box-sizing: border-box; }

.kpi-nav { text-align: left; color: inherit; font: inherit; cursor: pointer; width: 100%; }
.kpi-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Кликабельные KPI-карточки (главная → Стадо): при наведении и фокусе
   с клавиатуры карточка мягко светится акцентом сайта — без значков
   и без сдвигов (в системе ховеры не двигают карточки). */
.card.kpi-nav { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.card.hoverable.kpi-nav:hover,
.kpi-nav:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background-color: color-mix(in srgb, var(--accent) 4%, var(--bg-card));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent),
    0 10px 24px color-mix(in srgb, var(--accent) 14%, transparent);
}

.rw-day-hit { font: inherit; text-align: left; cursor: pointer; border: 1px solid transparent; color: var(--text-primary); }
.rw-day-hit:hover, .rw-day-hit[aria-pressed="true"] { border-color: var(--accent); }
.rw-day-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.login-password-wrap { position: relative; }
.login-password-wrap input { width: 100%; padding-right: 90px; }
.login-password-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer; padding: 6px; }
.login-password-toggle:focus-visible { outline: 2px solid var(--accent); border-radius: 4px; }

/* Milk date filters */
.milk-date-picker { position: relative; display: inline-block; }
.milk-date-panel { position: absolute; top: calc(100% + 8px); left: 0; max-height: 65vh; overflow: auto; z-index: 100; width: min(620px, 88vw); padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-card, #fff); color: var(--text-primary); box-shadow: 0 16px 48px #0002; }
.milk-date-presets, .milk-date-heading, .milk-date-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.milk-date-heading { justify-content: space-between; }
.milk-date-months { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 16px; }
.milk-date-months h4 { text-transform: capitalize; text-align: center; margin: 8px 0 16px; }
.milk-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.milk-date-grid button { position: relative; border: 0; border-radius: 8px; min-height: 34px; background: transparent; color: inherit; cursor: pointer; }
.milk-date-grid button:hover { background: var(--bg-inset); }
.milk-date-grid button.in-range { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.milk-date-grid button.selected { background: var(--accent); color: white; }
.milk-date-grid button:disabled { opacity: .25; cursor: default; }
.milk-date-grid i { position: absolute; bottom: 3px; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: var(--green); }
.milk-date-actions { justify-content: flex-end; margin: 16px 0 0; }
@media (max-width: 760px) { .milk-date-panel { position: fixed; transform: none; left: 5vw; right: auto; top: 15vh; max-height: 75vh; overflow: auto; } .milk-date-months { grid-template-columns: 1fr; } }

.page-head .milk-date-panel, .card-head .milk-date-panel { left: auto; right: 0; }
@media (max-width: 760px) { .page-head .milk-date-panel, .card-head .milk-date-panel, .milk-date-panel { position: fixed; transform: none; left: 5vw; right: 5vw; top: 15vh; width: auto; max-height: 75vh; overflow: auto; } .milk-date-months { grid-template-columns: 1fr; } }

/* Herd change modal */
.herd-change-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.herd-change-date{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:500;color:var(--text-muted);}
.herd-change-date select{
  min-width:280px;max-width:100%;padding:8px 10px;border-radius:4px;
  border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-primary);font:inherit;font-size:13px;
}
.herd-change-summary{
  display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:stretch;
  margin-bottom:16px;padding:14px 16px;border:1px solid var(--border);background:var(--bg-elevated);
}
.herd-change-summary-label{font-size:11.5px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}
.herd-change-summary-counts{font-family:var(--font-mono);font-size:22px;font-weight:700;letter-spacing:-.02em;}
.herd-change-summary-delta{margin-top:6px;font-size:14px;font-weight:600;}
.herd-change-summary-delta.is-down,.herd-change-summary-parts .is-down{color:var(--red);}
.herd-change-summary-delta.is-up,.herd-change-summary-parts .is-up{color:var(--green);}
.herd-change-summary-parts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:center;}
.herd-change-summary-parts > div{display:flex;flex-direction:column;gap:2px;}
.herd-change-summary-parts span{font-size:11.5px;color:var(--text-muted);}
.herd-change-summary-parts b{font-family:var(--font-mono);font-size:18px;font-weight:700;}
.herd-change-list{border:1px solid var(--border);max-height:420px;overflow:auto;}
.herd-change-head,.herd-change-row{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:20px;row-gap:8px;align-items:center;
  padding:8px 12px;font-size:12.5px;width:100%;text-align:left;border:0;background:transparent;color:inherit;font:inherit;
}
.herd-change-head{position:sticky;top:0;background:var(--bg-elevated);color:var(--text-muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);z-index:1;}
.herd-change-row{border-bottom:1px solid var(--border);cursor:pointer;}
.herd-change-row:last-child{border-bottom:0;}
.herd-change-row:hover{background:var(--bg-elevated);}
.herd-change-row b{font-family:var(--font-mono);font-weight:600;}
.animal-exit-banner{
  margin:0 0 16px;padding:14px 16px;border:1px solid color-mix(in srgb, var(--red) 35%, var(--border));
  background:color-mix(in srgb, var(--red) 8%, var(--bg-elevated));
}
.animal-exit-banner-title{font-size:15px;font-weight:700;color:var(--red);letter-spacing:.02em;margin-bottom:10px;}
.animal-exit-banner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 16px;}
.animal-exit-banner-grid span{display:block;font-size:11.5px;color:var(--text-muted);margin-bottom:2px;}
.animal-exit-banner-grid b{font-size:14px;font-weight:600;}
.animal-exit-banner-note{margin:12px 0 0;font-size:12.5px;color:var(--text-secondary);line-height:1.4;}
.animal-exited .page-title small{color:var(--red);}
.herd-culling{grid-template-columns:minmax(0,1fr);min-width:0;}
.herd-culling > *,.herd-culling .card,.herd-culling .dtm-table-wrap{min-width:0;}
@media(max-width:1023px){.herd-culling .main-grid.cols-2{grid-template-columns:minmax(0,1fr);}}
@media(max-width:720px){
  .herd-change-summary{grid-template-columns:1fr;}
  .herd-change-head,.herd-change-row{grid-template-columns:1fr 1fr;gap:4px 10px;}
  .herd-change-head span:nth-child(n+3),.herd-change-row span:nth-child(n+3){display:none;}
  .herd-change-row span:nth-child(5),.herd-change-head span:nth-child(5),
  .herd-change-row span:nth-child(6),.herd-change-head span:nth-child(6){display:block;grid-column:1 / -1;}
}