/* ============================================================================
   LIGHTHOUSE DEPTH THEME — the deep-sea / amber reskin (non-glass light + dark)
   ----------------------------------------------------------------------------
   The app renders 100% of the charts/tabs/real data but most components still
   reference the old GitHub-style tokens (--bg-card #1c2128, --border #30363d,
   --text-* grays). This sheet is loaded LAST, so its :root REMAPS those tokens
   onto the depth palette — re-skinning every component at once — then refines
   the core surface language (cards, panels, buttons, tables, inputs,
   scrollbars) without touching any markup or data wiring.

   Two skins live here, both amber-accented:
   - DARK (default): deep-sea blues — abyss #06080C, panel #0B1623, hairline
     hull borders, foam/mist text.
   - LIGHT (html[data-theme="light"]): cool blue-tinted light — #eef1f5 wash,
     white panels, #dce2ea hairlines, deep-ink text.
   ========================================================================== */

:root{
  /* surfaces — neutral grays -> deep-sea blues */
  --bg-primary:#06080C;          /* abyss */
  --bg-secondary:#0B1623;        /* panel */
  --bg-tertiary:#0F1C2B;         /* panel2 */
  --bg-card:#0E1A28;             /* card surface */
  --bg-elevated:#11202F;
  --bg-hover:#13212F;

  /* borders -> hull hairlines */
  --border:#1B2636;
  --border-strong:#28384C;
  --border-subtle:rgba(255,255,255,.05);

  /* text -> foam / mist / dim */
  --text-primary:#F0F6FC;
  --text-secondary:#94A3B8;
  --text-muted:#7C879A;

  /* accent stays amber; align the helper accents */
  --accent:#E8A830;
  --accent-gold:#FBBF24;
  --accent-purple:#8B5CF6;
  --accent-blue:#3B82F6;
  --accent-green:#22C55E;
  --accent-red:#EF4444;

  /* card radius: one 14px language everywhere */
  --radius:14px;
}

/* ----- base ----- */
html,body{background:var(--bg-primary,#06080C);color:var(--text-primary,#F0F6FC);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--font-display)}
::selection{background:rgba(232,168,48,.26);color:#fff}

/* ----- scrollbars ----- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#1c2735;border-radius:6px;border:2px solid var(--bg-primary,#06080C)}
::-webkit-scrollbar-thumb:hover{background:#28384c}

/* ----- card / panel surface language ----- */
.card,.dashboard-card,.metric-card,.stat-card,.panel,.insight-card,
.tab-content .card,.project-card-landing,.agent-card-v2,.commerce-platform-card-lg,
.commerce-product-card-lg,.geo-score-card-main,
[class*="-card"]:not(.methodology-card):not([class*="-card-"]){
  background:linear-gradient(180deg,rgba(16,29,44,.55),rgba(12,22,34,.55));
  border:1px solid var(--border,#1B2636);
  border-radius:var(--radius);
}
.card:hover,.dashboard-card:hover{border-color:var(--border-strong,#28384C)}

/* hairline dividers + tables pick up the hull tone automatically via --border */
table th{color:var(--text-secondary,#94A3B8);font-family:var(--font-mono);
  font-size:11px;letter-spacing:.04em;text-transform:uppercase;font-weight:500}
table td,table th{border-color:var(--border,#1B2636)}

/* ----- inputs ----- */
input,select,textarea{background:#0A121C;border:1px solid var(--border,#1B2636);
  color:var(--text-primary,#F0F6FC);border-radius:9px}
input:focus,select:focus,textarea:focus{border-color:var(--accent,#E8A830);
  box-shadow:0 0 0 3px rgba(232,168,48,.12)}
/* Mouse focus keeps the soft ring only; keyboard focus keeps the global focus-visible outline. */
input:focus:not(:focus-visible),select:focus:not(:focus-visible),textarea:focus:not(:focus-visible){outline:none}

/* ----- primary buttons -> amber; secondary -> hull outline ----- */
.btn-primary,.primary-btn,button.primary,.cta-primary{
  background:var(--accent,#E8A830);color:#13130A;border:1px solid var(--accent,#E8A830);font-weight:600}
.btn-primary:hover,.primary-btn:hover{filter:brightness(1.06)}
.btn-secondary,.secondary-btn{background:transparent;border:1px solid var(--border,#1B2636);
  color:var(--text-secondary,#94A3B8)}
.btn-secondary:hover,.secondary-btn:hover{border-color:var(--accent,#E8A830);color:var(--accent,#E8A830)}

/* active nav accent -> amber rail */
.nav-item.active,.sidebar-item.active,a.active{color:var(--text-primary,#F0F6FC)}

/* ============================================================================
   POLISH — clean, calm dashboard header + general niceties
   ========================================================================== */
.dashboard-header{gap:13px !important;padding:8px 18px !important;
  background:rgba(8,11,17,.82) !important;backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border,#1B2636) !important}

/* Unify every header action button into ONE calm secondary pill — this kills the
   "rainbow" of per-button inline border colors (Save=green, Share=purple, …).
   Re-analyze stays the single amber primary so the main action reads instantly. */
.dashboard-header .new-analysis-btn{
  background:#0C1622 !important;border:1px solid var(--border-strong,#28384C) !important;
  color:var(--text-secondary,#94A3B8) !important;border-radius:9px !important;
  padding:7px 11px !important;font:500 12.5px var(--font-display) !important;
  display:inline-flex;align-items:center;gap:6px;box-shadow:none !important;
  transition:border-color .12s,color .12s,background .12s}
.dashboard-header .new-analysis-btn svg{width:14px !important;height:14px !important;stroke:currentColor !important}
.dashboard-header .new-analysis-btn:hover{border-color:var(--accent,#E8A830) !important;color:var(--accent,#E8A830) !important;background:#0E1A28 !important}
.dashboard-header #reAnalyzeBtn{background:var(--accent,#E8A830) !important;border-color:var(--accent,#E8A830) !important;color:#13130A !important;font-weight:600 !important}
.dashboard-header #reAnalyzeBtn svg{stroke:#13130A !important}
.dashboard-header #reAnalyzeBtn:hover{filter:brightness(1.06)}

/* LIVE pill as a depth chip */
.lh-livepill{border:0 !important;background:transparent !important;
  color:var(--accent-green,#22C55E) !important;border-radius:0 !important;padding:5px 4px !important;
  font:500 11px var(--font-mono) !important}

/* AI filter, domain switcher, preset chips */
.llm-filter-select{background:#0A121C !important;border:1px solid var(--border,#1B2636) !important;
  color:var(--text-primary,#F0F6FC) !important;border-radius:9px !important;padding:6px 9px !important;font-size:12px !important}
.llm-filter-label{color:var(--text-secondary,#94A3B8) !important;font:500 11px var(--font-mono) !important}
.project-switcher-button{border:1px solid var(--border,#1B2636) !important;border-radius:10px !important;
  background:#0A121C !important;padding:6px 11px !important}
.project-switcher-button:hover{border-color:var(--border-strong,#28384C) !important}
.uirs-chip{border-radius:9px !important}

/* Dropdown surfaces (export menu, project switcher) */
#exportDropdownMenu,.project-switcher-dropdown{background:#0A121C !important;border:1px solid var(--border,#1B2636) !important;
  border-radius:12px !important;box-shadow:0 18px 44px rgba(0,0,0,.6) !important}

/* Calm, consistent focus ring + smooth tab scroll */
:focus-visible{outline:2px solid rgba(232,168,48,.5);outline-offset:2px}
.tab-content{scroll-behavior:smooth}

/* ============================================================================
   RESPONSIVE TOOLBAR — never clip the Re-analyze button / bell on smaller laptops.
   The header is flex with fixed-width children; without min-width:0 the
   right-edge actions get pushed off-screen. Let the brand pill + AI filter shrink
   (ellipsis) so the primary action group + bell always stay visible.
   ========================================================================== */
.dashboard-header{min-width:0}
.dashboard-header > div{min-width:0}
.dashboard-header #projectSwitcherTrigger{flex:0 1 auto;min-width:0}
.dashboard-header #dashboardDomain{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dashboard-header .llm-filter-container{flex:0 1 auto;min-width:0}
.dashboard-header .llm-filter-select{min-width:0;max-width:180px}
/* keep the primary action group + bell rigid so they're never what gets clipped */
.dashboard-header > div:has(> #reAnalyzeBtn),
.dashboard-header #uirsAlertWrap{flex:0 0 auto}

/* ============================================================================
   DARK-BOX CONSISTENCY — every dark panel/card/chart shares ONE corner radius,
   ONE dark gradient, and an amber outline that brightens on hover. Deliberate
   exceptions: form inputs (amber on focus only), the solid-amber Re-analyze
   button, the green LIVE pill, circular avatars/score dials, and the
   methodology card.
   ========================================================================== */
/* The catch-all matches only true card CONTAINERS. Elements whose class contains
   "-card-" (e.g. .methodology-card-title, .project-card-landing-domain, .agent-card-v2-desc)
   are BEM-style CHILDREN — text, icons, pills — and must stay flat, never boxed.
   The handful of outer containers that also contain "-card-" (project-card-landing,
   agent-card-v2, commerce-*-card-lg, geo-score-card-main) are re-added explicitly so
   they keep the box. */
.card,.dashboard-card,.metric-card,.stat-card,.panel,.insight-card,.score-card,
.key-metric-card,.issue-card,.tab-content .card,.metrics-trend-container,
.project-card-landing,.agent-card-v2,.commerce-platform-card-lg,
.commerce-product-card-lg,.geo-score-card-main,
[class*="-card"]:not(.methodology-card):not([class*="-card-"]){
  background:linear-gradient(180deg,rgba(16,29,44,.6),rgba(11,20,32,.6)) !important;
  border:1px solid rgba(232,168,48,.30) !important;
  border-radius:14px !important;
  transition:border-color .15s ease,box-shadow .15s ease !important;
}
.card:hover,.dashboard-card:hover,.metric-card:hover,.stat-card:hover,.panel:hover,
.insight-card:hover,.score-card:hover,.key-metric-card:hover,.issue-card:hover,
.metrics-trend-container:hover,.project-card-landing:hover,.agent-card-v2:hover,
.commerce-platform-card-lg:hover,.commerce-product-card-lg:hover,
.geo-score-card-main:hover,
[class*="-card"]:not(.methodology-card):not([class*="-card-"]):hover{
  border-color:rgba(232,168,48,.72) !important;
}
/* Toolbar chips/dropdowns adopt the same amber outline + hover (LIVE stays green;
   the solid-amber Re-analyze keeps its fill). */
.llm-filter-select,.project-switcher-button,#exportDropdownMenu,.project-switcher-dropdown{
  border-color:rgba(232,168,48,.30) !important;
}
.llm-filter-select:hover,.project-switcher-button:hover{
  border-color:rgba(232,168,48,.72) !important;
}

/* ============================================================================
   NON-GLASS LIGHT MODE
   ----------------------------------------------------------------------------
   The :root above remaps the surface/text tokens to the DARK depth palette
   globally, and forces the card surfaces with !important. The base light theme
   (app-theme.css, loaded earlier) never re-maps those tokens, so plain light
   mode would keep dark cards/charts. Re-map the tokens to the light palette
   here — scoped to html[data-theme="light"] — and re-assert the card surfaces
   with !important to beat the dark card rule above.
   ========================================================================== */
html[data-theme="light"] body{
  --bg-primary:#eef1f5;
  --bg-secondary:#ffffff;
  --bg-tertiary:#f4f6f9;
  --bg-card:#ffffff;        --bg-elevated:#ffffff;   --bg-hover:#eef2f6;
  --border:#dce2ea;         --border-strong:#c6ced8; --border-subtle:rgba(16,32,52,.08);
  --text-primary:#10243a;
  --text-secondary:#46566a;
  --text-muted:#6b7a8d;
  background:#eef1f5; color:#10243a;
}
/* Card / panel surfaces — beat the dark `!important` gradient rule above. */
html[data-theme="light"] body .card,
html[data-theme="light"] body .dashboard-card,
html[data-theme="light"] body .metric-card,
html[data-theme="light"] body .stat-card,
html[data-theme="light"] body .panel,
html[data-theme="light"] body .insight-card,
html[data-theme="light"] body .score-card,
html[data-theme="light"] body .key-metric-card,
html[data-theme="light"] body .issue-card,
html[data-theme="light"] body .metrics-trend-container,
html[data-theme="light"] body .project-card-landing,
html[data-theme="light"] body .agent-card-v2,
html[data-theme="light"] body .commerce-platform-card-lg,
html[data-theme="light"] body .commerce-product-card-lg,
html[data-theme="light"] body .geo-score-card-main,
html[data-theme="light"] body [class*="-card"]:not(.methodology-card):not([class*="-card-"]){
  background:#ffffff !important;
  border:1px solid #e2e7ee !important;
  box-shadow:0 1px 2px rgba(16,32,52,.06),0 2px 8px rgba(16,32,52,.04) !important;
}
/* Inputs + secondary buttons → light surfaces. */
html[data-theme="light"] body input,
html[data-theme="light"] body select,
html[data-theme="light"] body textarea,
html[data-theme="light"] body .btn-secondary,
html[data-theme="light"] body .secondary-btn{
  background:#ffffff !important; color:#10243a; border-color:#dce2ea !important;
}
/* Header + toolbar surfaces follow the light wash. */
html[data-theme="light"] body .dashboard-header{
  background:rgba(255,255,255,.86) !important;
  border-bottom:1px solid #dce2ea !important;
}
html[data-theme="light"] body .dashboard-logo-wordmark{ color:#10243a; }
html[data-theme="light"] body .dashboard-header .new-analysis-btn{
  background:#ffffff !important;border-color:#c6ced8 !important;color:#46566a !important;
}
html[data-theme="light"] body .llm-filter-select,
html[data-theme="light"] body .project-switcher-button,
html[data-theme="light"] body #exportDropdownMenu,
html[data-theme="light"] body .project-switcher-dropdown{
  background:#ffffff !important;color:#10243a !important;
  box-shadow:0 12px 32px rgba(16,32,52,.14) !important;
}
html[data-theme="light"] body ::-webkit-scrollbar-thumb{background:#c6ced8;border-color:#eef1f5}

/* ============================================================================
   SHELL v2 — persistent single-row top bar + midnight-blue surface
   The bar spans the full viewport width above the sidebar, so the logo can
   never be clipped by the expanded rail. Everything in it lives on ONE row:
   labels collapse progressively (title tooltips remain) instead of wrapping.
   ========================================================================== */
.dashboard .dashboard-header{
  position:fixed !important;
  top:0; left:0; right:0;
  margin-left:0 !important;
  height:56px; min-height:56px !important; max-height:56px;
  flex-wrap:nowrap !important;
  padding:0 16px !important;
  gap:10px !important;
  z-index:1000;
  overflow:visible;
  background:rgba(6,10,22,.92) !important;
  backdrop-filter:blur(10px) saturate(1.3);
  border-bottom:1px solid var(--border,#263450) !important;
}
/* content starts below the fixed bar */
#dashboardState.dashboard{ padding-top:56px; }

/* Reserve for the fixed auth cluster — restated here because this file's
   earlier padding shorthand destroyed auth.css's reserve and let the credits
   pill land on top of the "Filter by AI" control. */
@media (min-width:900px){
  body:has(#authButtons:not([style*="none"])) .dashboard .dashboard-header{ padding-right:296px !important; }
  body:has(#userMenu:not([style*="none"])) .dashboard .dashboard-header{ padding-right:170px !important; }
}
/* The auth overlay rides IN the bar: same height, centered, compact buttons. */
body:has(#dashboardState.active) .auth-header{ top:0; height:56px; padding:0 16px; align-items:center; }
body:has(#dashboardState.active) .auth-btn{ padding:7px 14px; font-size:12.5px; border-radius:9px; }
body:has(#dashboardState.active) .credit-badge{ font-size:11px; }

/* Logo group is fixed-size; the brand-context pill absorbs the squeeze. */
.dashboard-header .dashboard-logo{ flex:none; }
.dashboard-header .dashboard-domain{ min-width:0; max-width:320px; }
.dashboard-header .dashboard-domain #dashboardDomain{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block;
  max-width:170px; vertical-align:bottom;
}
/* Under squeeze the pill gives up domain characters, never lets its icon,
   badges, or chevron paint over the neighbors. The clip lifts while the
   switcher is open so the absolute dropdown can escape the pill. */
.dashboard-header .dashboard-domain:not(.open){ overflow:hidden; }
.dashboard-header .project-switcher-button > *{ flex:none; }
.dashboard-header .project-switcher-button #dashboardDomain{ flex:0 1 auto; }

/* Progressive label collapse — keeps one row at every width. Utility actions
   (Methodology, Play, Coffee) go icon-only first; core actions follow. */
@media (max-width:1760px){
  .dashboard-header .new-analysis-btn .btn-label-text{ display:none; }
  .dashboard-header .llm-filter-label{ display:none; }
  .dashboard-header #businessTypeLabel{ display:none !important; }
}
@media (max-width:1200px){
  .dashboard-header .dashboard-logo-wordmark,
  .dashboard-header .dashboard-beta-chip{ display:none; }
}

/* Squeeze control: under nowrap, flex items shrink to nothing — pin the
   controls that must keep their size and let only the domain pill flex. */
.dashboard-header .llm-filter-container{ flex:none; display:flex; align-items:center; gap:6px; }
.dashboard-header .llm-filter-select{ min-width:150px; flex:none; }
.dashboard-header .lh-livepill{ flex:none; white-space:nowrap; }
.dashboard-header #uirsPresetChips{ flex-shrink:0; }
.dashboard-header .dashboard-logo{ white-space:nowrap; }
.dashboard-header .dashboard-domain{ white-space:nowrap; flex-shrink:1; }
.dashboard-header > div[style*="display: flex"]{ flex:none; }

/* The industry chip is the longest string in the bar — icon-only widths
   can't afford it below ultra-wide. */
@media (max-width:1900px){ .dashboard-header #businessTypeLabel{ display:none !important; } }

/* collapsible-section is offset by the sidebar rules now — its children must
   not re-apply the same offset (score grid rendered 440px in). */
.dashboard .collapsible-section .score-grid,
.dashboard .collapsible-section .metrics-trend-container,
.dashboard.sidebar-collapsed .collapsible-section .score-grid,
.dashboard.sidebar-collapsed .collapsible-section .metrics-trend-container{ margin-left:0 !important; }

/* Auth cluster paints above the full-width bar (equal z + later DOM used to
   bury it), and the brand pill keeps a readable domain. */
body:has(#dashboardState.active) .auth-header{ z-index:1001; }
.dashboard-header .dashboard-domain{ max-width:400px; }
.dashboard-header .dashboard-domain #dashboardDomain{ min-width:76px; max-width:170px; }
/* Scan-mode chip yields before the domain does. */
@media (max-width:1780px){ .dashboard-header .dashboard-domain .methodology-indicator{ display:none !important; } }

/* The project controls added ~500px of flex:none content to the bar, so with
   them present every collapse fires earlier. Thresholds are measured from the
   rendered bar (full labels need ~2340px signed-out); between steps the brand
   pill absorbs up to ~230px by truncating the domain text. */
@media (max-width:2400px){
  .dashboard-header:has(#lhBarProjectControls:not(:empty)) #businessTypeLabel{ display:none !important; }
}
@media (max-width:2280px){
  .dashboard-header:has(#lhBarProjectControls:not(:empty)) .methodology-indicator{ display:none !important; }
}
@media (max-width:2180px){
  .dashboard-header:has(#lhBarProjectControls:not(:empty)) .new-analysis-btn .btn-label-text{ display:none; }
  .dashboard-header:has(#lhBarProjectControls:not(:empty)) .llm-filter-label{ display:none; }
}
@media (max-width:1600px){
  .dashboard-header:has(#lhBarProjectControls:not(:empty)) .lh-livepill{ display:none; }
}
@media (max-width:1320px){
  .dashboard-header:has(#lhBarProjectControls:not(:empty)) #uirsPresetChips{ display:none; }
  .dashboard-header:has(#lhBarProjectControls:not(:empty)) .dashboard-logo-wordmark,
  .dashboard-header:has(#lhBarProjectControls:not(:empty)) .dashboard-beta-chip{ display:none; }
}
@media (max-width:1200px){
  .dashboard-header:has(#lhBarProjectControls:not(:empty)) .llm-filter-select{ min-width:0; max-width:130px; }
}
@media (max-width:768px){
  .dashboard .dashboard-header{
    height:auto;
    min-height:56px !important;
    max-height:none;
    padding:6px 64px !important;
    flex-wrap:wrap !important;
    gap:6px !important;
  }
  .dashboard-header .dashboard-logo,
  .dashboard-header .lh-livepill,
  .dashboard-header #uirsPresetChips,
  .dashboard-header #lhBarProjectControls{
    display:none;
  }
  .dashboard-header .dashboard-domain{
    flex:1 1 124px;
    max-width:none;
  }
  .dashboard-header .dashboard-domain #dashboardDomain{
    min-width:0;
    max-width:100%;
  }
  .dashboard-header .llm-filter-container{
    flex:1 1 150px;
    min-width:0;
    margin-left:0;
    order:initial;
  }
  .dashboard-header .llm-filter-select{
    width:100%;
    min-width:0;
    max-width:100%;
    flex:1 1 auto;
  }
  body:has(#dashboardState.active) .auth-header{
    height:auto;
    min-height:44px;
    padding:6px 8px;
  }
  body:has(#dashboardState.active) #anonCreditBadge,
  body:has(#dashboardState.active) #creditBadge,
  body:has(#dashboardState.active) .auth-btn-signup{
    display:none !important;
  }
}

/* Overview sections (What's New, Key Metrics, …) share the score-card row's
   exact gutter: tab padding 24px + 8px = the grid's 32px card inset. */
#tab-overview > .collapsible-section{ margin-left:8px; margin-right:8px; }

/* ═══ Header-integrated project controls + More menu (strips retired) ═══
   The #projectHistoryBar and #lhHelpfulBar strips are gone; their controls
   live in the single top bar in the same button language. */
#lhBarProjectControls{ display:flex; align-items:center; gap:8px; flex:none; }
#lhBarProjectControls:empty{ display:none; }
.hdr-range{ display:inline-flex; border:1px solid var(--border-strong,#28384C); border-radius:9px; overflow:hidden; background:#0C1622; flex:none; }
.hdr-range-btn{ background:none; border:none; padding:6px 9px; font:500 11.5px var(--font-mono); color:var(--text-secondary,#94A3B8); cursor:pointer; }
.hdr-range-btn + .hdr-range-btn{ border-left:1px solid var(--border,#1B2636); }
.hdr-range-btn.active{ background:var(--accent,#E8A830); color:#13130A; font-weight:600; }
.hdr-range-btn:not(.active):hover{ color:var(--accent,#E8A830); }
.hdr-version{ background:#0A121C; border:1px solid var(--border,#1B2636); color:var(--text-secondary,#94A3B8); border-radius:9px; padding:6px 8px; font-size:12px; max-width:150px; cursor:pointer; flex:none; }
@media (max-width:1620px){ .hdr-version{ display:none; } }

.lh-more-menu{
  position:absolute; top:calc(100% + 6px); right:0; min-width:216px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.5);
  z-index:1200; padding:4px;
}
.lh-more-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 12px; background:none; border:none; border-radius:8px;
  color:var(--text-primary); font-size:13px; cursor:pointer;
  text-align:left; text-decoration:none; font-family:inherit;
}
.lh-more-item:hover{ background:var(--bg-tertiary); }
.lh-more-item svg{ width:15px; height:15px; flex:none; stroke:currentColor; }
.lh-more-divider{ height:1px; background:var(--border); margin:4px 8px; }
.lh-more-label{ padding:6px 12px 2px; font-size:11px; color:var(--text-muted); }
.lh-more-thumbs{ display:flex; gap:6px; padding:4px 12px 8px; }
.lh-more-thumbs button{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:6px 10px; background:none; border:1px solid var(--border); border-radius:8px;
  color:var(--text-secondary); font-size:12px; cursor:pointer; font-family:inherit;
}
.lh-more-thumbs button:hover{ border-color:var(--accent,#E8A830); color:var(--accent,#E8A830); }
.lh-more-thumbs button.voted{ border-color:#22c55e; color:#22c55e; background:rgba(34,197,94,.08); }