/* ═══════════════════════════════════════════════════════════
   AMA Digital · hub-shared.css v6 · Finovera Design System
   ══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── DESIGN TOKENS ────────────────────────────────────────── */
:root {
  --bg-root:       #0a0a0a;
  --bg-surface:    #141414;
  --bg-elevated:   #1e1e1e;
  --bg-muted:      #242424;
  --border:        #2a2a2a;
  --border-subtle: #1e1e1e;
  --accent:        #00e5cc;
  --accent-dim:    rgba(0,229,204,.094);
  --text-primary:  #ffffff;
  --text-secondary:#888888;
  --text-muted:    #444444;
  --tag-new:       #00e5cc;
  --tag-upd:       #f59e0b;

  /* Legacy aliases — inner pages still use these var names */
  --bg:    #0a0a0a;  --bg2:  #141414;
  --bg3:   #1e1e1e;  --bg4:  #242424;
  --text:  #ffffff;  --text2:#888888;  --text3:#444444;
  --teal:  #00e5cc;  --teal-d:rgba(0,229,204,.094);  --teal-m:rgba(0,229,204,.15);
  --border2: #3a3a3a;
  --amber:#f59e0b;  --amber-d:rgba(245,158,11,.1);
  --blue: #5ba4ef;  --blue-d:rgba(91,164,239,.1);
  --purple:#a07ef0; --red:#e8625a; --green:#4db87a;

  --nav-h: 52px;
  --mob-h: 60px;
  --r:     16px;
  --px:    32px;
}
@media(min-width:1280px){ :root{ --px:40px } }
@media(max-width:767px) { :root{ --px:20px } }

/* ── LIGHT THEME ──────────────────────────────────────────── */
html[data-theme="light"] {
  --bg-root:       #f5f5f5;
  --bg-surface:    #ffffff;
  --bg-elevated:   #eeeeee;
  --bg-muted:      #e5e5e5;
  --border:        #d8d8d8;
  --border-subtle: #ebebeb;
  --text-primary:  #0a0a0a;
  --text-secondary:#666666;
  --text-muted:    #999999;
  --bg:#f5f5f5; --bg2:#ffffff; --bg3:#eeeeee; --bg4:#e5e5e5;
  --text:#0a0a0a; --text2:#666666; --text3:#999999;
  --border2:#cccccc;
  color-scheme:light;
}

/* ── BASE ─────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box !important; }
html{ scroll-behavior:smooth; }

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif !important;
  background:var(--bg-root) !important;
  color:var(--text-primary) !important;
  -webkit-font-smoothing:antialiased !important;
  text-rendering:optimizeLegibility !important;
  max-width:none !important;
  margin:0 !important;
  padding-top:var(--nav-h) !important;
  min-height:100vh !important;
  transition:background .2s ease,color .2s ease !important;
}
@media(max-width:767px){
  body{ padding-top:0 !important; padding-bottom:calc(var(--mob-h) + env(safe-area-inset-bottom,0px)) !important; }
}

h1,h2,h3,h4,h5,h6{
  font-family:'Inter',system-ui,sans-serif !important;
  color:var(--text-primary) !important;
}
p{ color:var(--text-secondary) !important; line-height:1.6 !important; }

/* Kill old navs */
.site-nav{ display:none !important; }
.mob-nav { display:none !important; }

/* ══════════════════════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════════════════════ */
.ama-nav{
  position:fixed !important;
  top:0 !important; left:0 !important; right:0 !important;
  width:100% !important; height:var(--nav-h) !important;
  z-index:50 !important;
  background:rgba(10,10,10,.85) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
  border-bottom:1px solid var(--border) !important;
  display:flex !important; align-items:center !important;
  padding:0 var(--px) !important; gap:8px !important;
  transition:background .15s ease !important;
}
html[data-theme="light"] .ama-nav{
  background:rgba(245,245,245,.9) !important;
  border-bottom-color:var(--border) !important;
}

.ama-logo{
  font-family:'Courier New',Courier,monospace !important;
  font-size:13px !important; font-weight:600 !important;
  letter-spacing:.08em !important;
  color:var(--text-primary) !important;
  text-decoration:none !important; flex-shrink:0 !important;
  transition:color .15s !important;
}
.ama-logo:hover{ color:var(--accent) !important; }
.ama-logo-sep{ color:var(--text-muted) !important; margin:0 2px !important; }

.ama-links{
  display:flex !important; align-items:center !important;
  gap:2px !important; flex:1 !important; margin-left:16px !important;
  overflow-x:auto !important; scrollbar-width:none !important;
}
.ama-links::-webkit-scrollbar{ display:none !important; }

.ama-link{
  font-family:'Inter',sans-serif !important;
  font-size:12px !important; font-weight:400 !important;
  color:var(--text-secondary) !important;
  text-decoration:none !important;
  padding:5px 6px !important; border-radius:8px !important;
  white-space:nowrap !important; flex-shrink:0 !important;
  transition:color .15s,background .15s !important;
}
@media(hover:hover) and (pointer:fine){
  .ama-link:hover{ color:var(--text-primary) !important; background:var(--bg-muted) !important; }
}
.ama-link.on{ color:var(--text-primary) !important; background:var(--bg-muted) !important; }

.ama-end{
  display:flex !important; align-items:center !important;
  gap:6px !important; flex-shrink:0 !important;
}

.ama-tbtn{
  font-size:13px !important;
  background:none !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important; padding:5px 10px !important;
  color:var(--text-secondary) !important;
  cursor:pointer !important;
  display:flex !important; align-items:center !important;
  transition:border-color .15s,color .15s !important;
}
@media(hover:hover) and (pointer:fine){
  .ama-tbtn:hover{ border-color:var(--text-muted) !important; color:var(--text-primary) !important; }
}
.ama-tbtn:active{ opacity:.7 !important; }

.ama-lsw{
  display:flex !important; gap:2px !important;
  background:var(--bg-muted) !important;
  border-radius:8px !important; padding:3px !important;
}
.ama-lb{
  font-family:'Inter',sans-serif !important;
  font-size:11px !important; font-weight:600 !important;
  letter-spacing:.04em !important;
  padding:4px 10px !important; border-radius:6px !important;
  border:none !important; background:transparent !important;
  color:var(--text-muted) !important;
  cursor:pointer !important;
  transition:background .15s,color .15s !important;
}
.ama-lb.on{
  background:var(--bg-elevated) !important;
  color:var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV
   ══════════════════════════════════════════════════════════ */
.ama-mnav{
  display:none !important;
  position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important;
  z-index:50 !important; height:var(--mob-h) !important;
  background:rgba(10,10,10,.92) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
  border-top:1px solid var(--border) !important;
  align-items:center !important; justify-content:space-around !important;
  padding:0 8px env(safe-area-inset-bottom,0px) !important;
}
html[data-theme="light"] .ama-mnav{
  background:rgba(245,245,245,.95) !important;
  border-top-color:var(--border) !important;
}

.ama-mb{
  display:flex !important; flex-direction:column !important;
  align-items:center !important; gap:3px !important;
  color:var(--text-muted) !important;
  font-family:'Inter',sans-serif !important;
  font-size:9px !important; font-weight:500 !important;
  text-decoration:none !important;
  background:none !important; border:none !important;
  cursor:pointer !important;
  padding:8px 12px !important; border-radius:10px !important;
  flex:1 !important;
  transition:color .15s ease !important;
  -webkit-tap-highlight-color:transparent !important;
  position:relative !important;
}
.ama-mb.on{ color:var(--accent) !important; }
.ama-mb.on::after{
  content:'' !important;
  position:absolute !important;
  bottom:2px !important; left:50% !important;
  transform:translateX(-50%) !important;
  width:4px !important; height:4px !important;
  border-radius:50% !important;
  background:var(--accent) !important;
}
html[data-theme="light"] .ama-mb{ color:var(--text-muted) !important; }
html[data-theme="light"] .ama-mb.on{ color:var(--accent) !important; }

.ama-mi{ font-size:18px !important; line-height:1 !important; display:block !important; }
.ama-ml{
  font-size:9px !important; font-weight:500 !important;
  white-space:nowrap !important; display:block !important;
  overflow:hidden !important; text-overflow:ellipsis !important;
  max-width:52px !important;
}

@media(max-width:767px){
  .ama-nav { display:none !important; }
  .ama-mnav{ display:flex !important; }
}
@media(min-width:768px){
  .ama-nav { display:flex !important; }
  .ama-mnav{ display:none !important; }
}

/* ══════════════════════════════════════════════════════════
   TAB NAVIGATION
   ══════════════════════════════════════════════════════════ */
.tab-nav{
  display:flex !important; align-items:stretch !important; flex-wrap:nowrap !important;
  padding:0 var(--px) !important;
  background:var(--bg-root) !important;
  border-bottom:1px solid var(--border) !important;
  overflow-x:auto !important; scrollbar-width:none !important;
  min-height:44px !important;
  position:sticky !important; top:var(--nav-h) !important; z-index:40 !important;
  transition:background .15s ease !important;
}
@media(max-width:767px){ .tab-nav{ top:0 !important; } }
.tab-nav::-webkit-scrollbar{ display:none !important; }
html[data-theme="light"] .tab-nav{ background:var(--bg-root) !important; border-bottom-color:var(--border) !important; }

.tb{
  display:inline-flex !important; align-items:center !important;
  gap:6px !important; padding:0 14px !important; min-height:44px !important;
  font-family:'Inter',sans-serif !important;
  font-size:13px !important; font-weight:400 !important;
  color:var(--text-muted) !important;
  background:none !important; border:none !important;
  border-bottom:2px solid transparent !important; border-radius:0 !important;
  cursor:pointer !important; white-space:nowrap !important; flex-shrink:0 !important;
  transition:color .15s,border-color .15s !important;
  margin-bottom:-1px !important;
}
@media(hover:hover) and (pointer:fine){
  .tb:hover{ color:var(--text-secondary) !important; }
}
.tb.on,.tb.active{
  color:var(--text-primary) !important;
  border-bottom-color:var(--accent) !important;
  background:none !important;
}

/* ══════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════ */
.card,.sc-card,.metric,.bm-cell,.price-card,.pane,.wf-card,.bc-card,.th-card,.rmap-card,.arc-box{
  background:var(--bg-surface) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  padding:20px !important;
  transition:border-color .15s ease,background .15s ease !important;
}
@media(hover:hover) and (pointer:fine){
  .card:hover,.sc-card:hover{
    background:var(--bg-elevated) !important;
    border-color:#3a3a3a !important;
  }
}
html[data-theme="light"] .card,
html[data-theme="light"] .sc-card,
html[data-theme="light"] .bm-cell,
html[data-theme="light"] .pane{
  background:var(--bg-surface) !important;
  border-color:var(--border) !important;
  box-shadow:none !important;
}
html[data-theme="light"] .card:hover,
html[data-theme="light"] .sc-card:hover{
  background:var(--bg-elevated) !important;
}

/* Page/scene transitions */
.page,.scene{ background:transparent !important; }
.page.on,.page.active,.scene.active,.scene.on{
  animation:finoFadeUp .2s ease both !important;
}
@keyframes finoFadeUp{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:none; }
}

/* ══════════════════════════════════════════════════════════
   TAGS / BADGES
   ══════════════════════════════════════════════════════════ */
.sc-badge,.tag,.badge{
  border-radius:6px !important;
  padding:3px 8px !important;
  font-family:'Inter',sans-serif !important;
  font-size:10px !important; font-weight:600 !important;
  letter-spacing:.05em !important; text-transform:uppercase !important;
  background:var(--bg-muted) !important;
  color:var(--text-secondary) !important;
}
/* Category-colored badges from journey_explorer */
.s-humanist .sc-badge{ background:var(--teal-d) !important; color:var(--accent) !important; }
.s-weeden   .sc-badge{ background:var(--amber-d) !important; color:var(--amber) !important; }
.s-humanless.sc-badge,.s-humanless .sc-badge{ background:var(--blue-d) !important; color:var(--blue) !important; }
.s-blueprint.sc-badge,.s-blueprint .sc-badge{ background:rgba(160,126,240,.1) !important; color:#a07ef0 !important; }

/* Filter chips */
.sf-chip{
  border-radius:8px !important;
  padding:5px 12px !important;
  font-family:'Inter',sans-serif !important;
  font-size:11px !important; font-weight:500 !important;
  background:var(--bg-muted) !important;
  border:1px solid var(--border) !important;
  color:var(--text-secondary) !important;
  cursor:pointer !important;
  transition:background .15s,border-color .15s,color .15s !important;
}
.sf-chip.on{ background:var(--bg-elevated) !important; border-color:var(--border2) !important; color:var(--text-primary) !important; }

/* ══════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════ */
.data-table,.gtable{
  background:var(--bg-surface) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r) !important;
  border-collapse:separate !important; border-spacing:0 !important;
}
.data-table th,.gtable th{
  background:var(--bg-elevated) !important;
  color:var(--text-muted) !important;
  border-bottom:1px solid var(--border) !important;
  font-family:'Inter',sans-serif !important;
  font-size:10px !important; font-weight:600 !important;
  letter-spacing:.08em !important; text-transform:uppercase !important;
  padding:10px 14px !important;
}
.data-table td,.gtable td{
  border-bottom:1px solid var(--border-subtle) !important;
  color:var(--text-secondary) !important;
  font-size:13px !important; padding:10px 14px !important;
}
.data-table tr:last-child td,.gtable tr:last-child td{ border-bottom:none !important; }
@media(hover:hover) and (pointer:fine){
  .data-table tbody tr:hover td{ background:var(--bg-elevated) !important; }
}
.gantt-wrap{ overflow-x:scroll !important; -webkit-overflow-scrolling:touch !important; touch-action:pan-x pan-y !important; }
.gantt-wrap,.gantt-table{ background:var(--bg-surface) !important; }
.gtable tr:hover td{ background:rgba(255,255,255,.02) !important; }
html[data-theme="light"] .gtable tr:hover td{ background:rgba(0,0,0,.02) !important; }
.gtable tr:hover .cell-cat,.gtable tr:hover .cell-name{ background:var(--bg-elevated) !important; }
html[data-theme="light"] .gantt-wrap,.html[data-theme="light"] .gantt-table{ background:var(--bg-surface) !important; }

/* ══════════════════════════════════════════════════════════
   HERO / PAGE HEADERS
   ══════════════════════════════════════════════════════════ */
.hero,.page-header{
  padding:64px var(--px) 48px !important;
  max-width:720px !important;
}
@media(max-width:767px){
  .hero,.page-header{ padding:32px var(--px) 28px !important; max-width:none !important; }
}

.hero-eyebrow,.eyebrow,.dlabel{
  font-family:'Inter',sans-serif !important;
  font-size:11px !important; font-weight:600 !important;
  letter-spacing:.08em !important; text-transform:uppercase !important;
  color:var(--text-muted) !important;
  margin-bottom:16px !important; display:block !important;
}
.hero-title,.h-title{
  font-family:'Inter',sans-serif !important;
  font-size:48px !important; font-weight:700 !important;
  letter-spacing:-.02em !important; line-height:1.1 !important;
  color:var(--text-primary) !important;
  margin-bottom:16px !important;
}
.hero-title em,.h-title em{
  color:var(--accent) !important; font-style:normal !important;
}
@media(max-width:767px){
  .hero-title,.h-title{ font-size:32px !important; }
}
.hero-sub,.h-sub{
  font-family:'Inter',sans-serif !important;
  font-size:15px !important; font-weight:400 !important;
  color:var(--text-secondary) !important;
  line-height:1.6 !important; max-width:520px !important;
}

/* ══════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════ */
.back-btn{
  font-family:'Inter',sans-serif !important;
  font-size:13px !important;
  background:var(--bg-elevated) !important;
  border:1px solid var(--border) !important;
  color:var(--text-secondary) !important;
  border-radius:8px !important;
  transition:border-color .15s,color .15s !important;
}
@media(hover:hover) and (pointer:fine){
  .back-btn:hover{ color:var(--text-primary) !important; border-color:var(--text-muted) !important; }
}
.gc-btn,.hmeta{
  font-family:'Inter',sans-serif !important;
  background:var(--bg-elevated) !important;
  border:1px solid var(--border) !important;
  color:var(--text-secondary) !important;
  border-radius:8px !important;
}
.note,.info-block{
  background:rgba(91,164,239,.07) !important;
  border:1px solid rgba(91,164,239,.15) !important;
  color:var(--text-secondary) !important;
  border-radius:var(--r) !important;
}

/* Detail bar */
.detail-bar{
  background:rgba(10,10,10,.88) !important;
  backdrop-filter:blur(12px) !important; -webkit-backdrop-filter:blur(12px) !important;
  border-bottom:1px solid var(--border) !important;
}
html[data-theme="light"] .detail-bar{ background:rgba(245,245,245,.92) !important; }
.pane-head{ background:var(--bg-elevated) !important; border-bottom:1px solid var(--border) !important; }
html[data-theme="light"] .pane-head{ background:var(--bg-elevated) !important; }

/* ══════════════════════════════════════════════════════════
   CHANGELOG
   ══════════════════════════════════════════════════════════ */
.cl-toggle{
  width:100% !important;
  display:flex !important; align-items:center !important; gap:12px !important;
  padding:12px 0 !important;
  background:none !important; border:none !important;
  color:var(--text-muted) !important;
  font-family:'Inter',sans-serif !important;
  font-size:11px !important; font-weight:600 !important;
  letter-spacing:.08em !important; text-transform:uppercase !important;
  cursor:pointer !important;
  transition:color .15s !important;
}
.cl-toggle:hover{ color:var(--text-secondary) !important; }
.cl-toggle-line{ flex:1 !important; height:1px !important; background:var(--border-subtle) !important; }
.cl-toggle-icon{ font-size:14px !important; transition:transform .2s ease !important; display:inline-block !important; }
.cl-toggle.open .cl-toggle-icon{ transform:rotate(90deg) !important; }

.cl-body{
  max-height:0;
  overflow:hidden;
  padding:0 !important;
  transition:max-height .35s ease,padding .35s ease;
}
.cl-body.open{
  max-height:1200px;
  padding:16px 0 24px !important;
}
.cl-badge{
  display:inline-block !important;
  font-family:'Inter',sans-serif !important;
  font-size:10px !important; font-weight:700 !important;
  letter-spacing:.06em !important; text-transform:uppercase !important;
  color:var(--text-muted) !important; margin-bottom:10px !important;
}
.cl-items{ display:flex !important; flex-direction:column !important; gap:6px !important; }
.cl-item{
  font-family:'Inter',sans-serif !important;
  font-size:13px !important;
  color:var(--text-secondary) !important;
  line-height:1.5 !important; padding-left:4px !important;
}
.cl-item b{ color:var(--text-primary) !important; }

/* ══════════════════════════════════════════════════════════
   INLINE COMMENTS (ic-*)
   ══════════════════════════════════════════════════════════ */
#ic-bar{
  position:fixed !important; z-index:100 !important;
  background:var(--bg-elevated) !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important; padding:4px !important;
  box-shadow:0 4px 16px rgba(0,0,0,.4) !important;
  animation:finoFadeIn .1s ease !important;
}
#ic-bar-btn{
  font-family:'Inter',sans-serif !important;
  font-size:12px !important; font-weight:500 !important;
  color:var(--text-secondary) !important;
  background:none !important; border:none !important;
  padding:6px 10px !important; border-radius:6px !important;
  cursor:pointer !important; white-space:nowrap !important;
  transition:background .15s,color .15s !important;
}
#ic-bar-btn:hover{ background:var(--bg-muted) !important; color:var(--text-primary) !important; }

#ic-modal{
  position:fixed !important; inset:0 !important; z-index:10001 !important;
  background:rgba(0,0,0,.6) !important;
  backdrop-filter:blur(4px) !important;
  display:none;
  align-items:center !important; justify-content:center !important;
}
#ic-modal.ic-modal--open{
  display:flex !important;
  animation:finoFadeIn .15s ease !important;
}
#ic-modal-box{
  background:var(--bg-surface) !important;
  border:1px solid var(--border) !important;
  border-radius:16px !important; padding:24px !important;
  width:420px !important; max-width:calc(100vw - 40px) !important;
  display:flex !important; flex-direction:column !important; gap:12px !important;
}
#ic-modal-box h4{
  font-family:'Inter',sans-serif !important;
  font-size:15px !important; font-weight:600 !important;
  color:var(--text-primary) !important; margin:0 !important;
}
#ic-selected-preview{
  font-size:12px !important; color:var(--text-muted) !important;
  background:var(--bg-muted) !important;
  border-radius:8px !important; padding:8px 12px !important;
  line-height:1.5 !important;
  border-left:2px solid var(--accent) !important;
  font-style:italic !important;
}
#ic-modal-box label{
  font-family:'Inter',sans-serif !important;
  font-size:11px !important; font-weight:600 !important;
  text-transform:uppercase !important; letter-spacing:.06em !important;
  color:var(--text-muted) !important;
}
#ic-name,#ic-text{
  background:var(--bg-muted) !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important; padding:10px 12px !important;
  font-family:'Inter',sans-serif !important;
  font-size:13px !important; color:var(--text-primary) !important;
  resize:none !important;
  transition:border-color .15s !important;
  width:100% !important;
}
#ic-name:focus,#ic-text:focus{ outline:none !important; border-color:var(--accent) !important; }
#ic-text{ min-height:80px !important; }
#ic-modal-btns{ display:flex !important; gap:8px !important; justify-content:flex-end !important; }
#ic-cancel{
  font-family:'Inter',sans-serif !important;
  font-size:13px !important; padding:8px 16px !important;
  border-radius:8px !important; border:1px solid var(--border) !important;
  background:transparent !important; color:var(--text-secondary) !important;
  cursor:pointer !important; transition:background .15s,color .15s !important;
}
#ic-cancel:hover{ background:var(--bg-muted) !important; color:var(--text-primary) !important; }
#ic-submit{
  font-family:'Inter',sans-serif !important;
  font-size:13px !important; font-weight:600 !important;
  padding:8px 16px !important; border-radius:8px !important;
  border:none !important; background:var(--accent) !important;
  color:#000000 !important; cursor:pointer !important;
  transition:opacity .15s !important;
}
#ic-submit:hover{ opacity:.85 !important; }

#ic-pop{
  position:absolute !important; z-index:150 !important;
  background:var(--bg-elevated) !important;
  border:1px solid var(--border) !important;
  border-radius:10px !important; padding:10px 14px !important;
  max-width:280px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.5) !important;
  font-family:'Inter',sans-serif !important; font-size:13px !important;
}
#ic-pop-author{ font-size:11px !important; font-weight:600 !important; color:var(--accent) !important; margin-bottom:4px !important; }
#ic-pop-text{ color:var(--text-secondary) !important; line-height:1.5 !important; }
#ic-pop-date{ font-size:10px !important; color:var(--text-muted) !important; margin-top:6px !important; }

.ic-mark{
  background:var(--accent-dim) !important;
  border-bottom:1px solid var(--accent) !important;
  cursor:pointer !important; border-radius:2px !important;
  transition:background .15s !important;
}
.ic-mark:hover{ background:rgba(0,229,204,.15) !important; }

#ic-toggle{
  position:fixed !important; bottom:24px !important; right:24px !important; z-index:50 !important;
  display:flex !important; align-items:center !important; gap:6px !important;
  background:var(--bg-elevated) !important;
  border:1px solid var(--border) !important;
  border-radius:20px !important; padding:8px 14px !important;
  font-family:'Inter',sans-serif !important;
  font-size:12px !important; font-weight:500 !important;
  color:var(--text-secondary) !important;
  cursor:pointer !important;
  box-shadow:0 4px 16px rgba(0,0,0,.3) !important;
  transition:border-color .15s,color .15s !important;
}
#ic-toggle:hover{ border-color:var(--accent) !important; color:var(--text-primary) !important; }
#ic-toggle::before{
  content:'' !important; width:6px !important; height:6px !important;
  border-radius:50% !important; background:var(--accent) !important; flex-shrink:0 !important;
}
@media(max-width:767px){
  #ic-toggle{ bottom:calc(60px + env(safe-area-inset-bottom,0px) + 12px) !important; right:16px !important; }
  #ic-bar-btn{ font-size:14px !important; padding:8px 14px !important; }
}

/* ══════════════════════════════════════════════════════════
   LANGUAGE DISPLAY
   ══════════════════════════════════════════════════════════ */
.i-en,.i-ru{ display:none !important; }
body.en .i-en,html[data-lang="en"] .i-en{ display:inline !important; }
body.ru .i-ru,html[data-lang="ru"] .i-ru{ display:inline !important; }
.b-en,.b-ru{ display:none !important; }
body.en .b-en,html[data-lang="en"] .b-en{ display:block !important; }
body.ru .b-ru,html[data-lang="ru"] .b-ru{ display:block !important; }

/* ══════════════════════════════════════════════════════════
   LIGHT THEME CONTENT OVERRIDES
   ══════════════════════════════════════════════════════════ */
html[data-theme="light"] body{ background:var(--bg-root) !important; }
html[data-theme="light"] .tab-nav{ background:var(--bg-root) !important; }
html[data-theme="light"] .sc-card{ background:var(--bg-surface) !important; }
html[data-theme="light"] .pane{ background:var(--bg-surface) !important; }
html[data-theme="light"] .gantt-wrap{ background:var(--bg-surface) !important; }
html[data-theme="light"] .rmap-tag{ background:var(--bg-muted) !important; border-color:var(--border) !important; }
html[data-theme="light"] .step-num-label{ background:var(--bg-elevated) !important; color:var(--text-secondary) !important; }

/* ══════════════════════════════════════════════════════════
   FILTER CHIPS WRAP
   ══════════════════════════════════════════════════════════ */
.sf-wrap{
  display:flex !important; gap:8px !important;
  flex-wrap:nowrap !important; overflow-x:auto !important;
  scrollbar-width:none !important;
  padding:0 var(--px) 12px !important;
}
.sf-wrap::-webkit-scrollbar{ display:none !important; }

/* ══════════════════════════════════════════════════════════
   MOBILE LAYOUT
   ══════════════════════════════════════════════════════════ */
@media(max-width:767px){
  .tab-nav{ padding:0 16px !important; }
  .tb{ padding:0 10px !important; font-size:12px !important; }
  .page,.scene{ padding:16px !important; }

  .card-grid,.sc-grid,.g2,.bm-grid,
  .pricing-grid,.metric-grid,.step-row,.th-grid,.wf-grid{
    grid-template-columns:1fr !important; gap:10px !important;
  }
  .pane-heads{ display:none !important; }
  .sf-wrap{ padding:0 16px 12px !important; }
  .data-table td,.data-table th,
  .gtable td,.gtable th{ padding:8px 10px !important; }
}


/* Hide page-local lang switchers — global nav handles language */
.lang-sw{ display:none !important; }
/* ══════════════════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════════════════ */
::-webkit-scrollbar{ width:5px; height:5px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover{ background:var(--text-muted); }

/* ══════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════ */
@keyframes finoFadeIn{
  from{ opacity:0; } to{ opacity:1; }
}
@keyframes finoFadeSlide{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:translateY(0); }
}

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

/* ══════════════════════════════════════════════════════════
   TAB-BAR (Workflows uses tab-bar instead of tab-nav)
   ══════════════════════════════════════════════════════════ */
.tab-bar{
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  scrollbar-width:none !important;
}
.tab-bar::-webkit-scrollbar{ display:none !important; }

/* ══════════════════════════════════════════════════════════
   GANTT TABLE MIN-WIDTH (enables horizontal scroll on mobile)
   ══════════════════════════════════════════════════════════ */
.gtable{ min-width:900px !important; }

/* ══════════════════════════════════════════════════════════
   PREVENT HORIZONTAL OVERFLOW STRIP
   ══════════════════════════════════════════════════════════ */
html{ overflow-x:clip; }

/* ══════════════════════════════════════════════════════════
   KPI VALUES — responsive font-size + allow word break on mobile
   ══════════════════════════════════════════════════════════ */
@media(max-width:767px){
  .kpi-val{ font-size:clamp(10px,3.5vw,16px) !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
  .kpi-lbl{ font-size:10px !important; }
}

/* ══════════════════════════════════════════════════════════
   IC-TOGGLE — raise z-index above mobile nav
   ══════════════════════════════════════════════════════════ */
/* ic-toggle: managed by inline_comments.js */

/* ══════════════════════════════════════════════════════════
   MOBILE NAV — compact layout so 6 items + labels fit at 390px
   ══════════════════════════════════════════════════════════ */
@media(max-width:430px){
  .ama-mb{ padding:5px 2px !important; flex:1 !important; min-width:0 !important; }
  .ama-ml{ font-size:8px !important; max-width:none !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
  .ama-mi{ font-size:16px !important; }
}