/* SmartDota's shared navigation and surface system. Page layouts stay independent. */
:root {
  --sd-bg: #0b1118;
  --sd-surface: #17232ed9;
  --sd-surface-strong: #1b2a36ed;
  --sd-line: #ffffff26;
  --sd-text: #edf3f5;
  --sd-muted: #a6b6c0;
  --sd-accent: #eb7b65;
}
html { scroll-padding-top: 108px; }
body { color: var(--sd-text); font-family: Vazirmatn, Tahoma, sans-serif; }
button, input, select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 3px; }
.sd-header {
  position: sticky; top: 0; z-index: 80; height: 76px;
  background: #101923df; border-bottom: 1px solid var(--sd-line);
  box-shadow: 0 10px 34px #03080e52;
  backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
}
.sd-header-inner { height: 100%; max-width: 1550px; margin: auto; padding: 0 clamp(18px, 3vw, 46px); display: flex; align-items: center; gap: clamp(22px, 3vw, 45px); }
.sd-brand { display: flex; flex: none; align-items: center; gap: 10px; direction: ltr; color: var(--sd-text); text-decoration: none; white-space: nowrap; }
.sd-brand img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 3px 12px #eb634a55); }
.sd-brand-label { display: block; direction: ltr; font: 900 21px/1 Arial, sans-serif; letter-spacing: .025em; }
.sd-brand-label b { color: var(--sd-accent); }
body .sd-brand-label, body .sd-brand-label b { font-family: Arial, sans-serif !important; }
.sd-brand-label small { display: block; margin-top: 5px; color: #a3b1bb; font: 500 10px/1.4 Vazirmatn, Tahoma, sans-serif; text-align: right; letter-spacing: 0; }
.sd-nav { display: flex; align-items: center; align-self: stretch; gap: 5px; min-width: 0; }
.sd-nav a { display: inline-flex; align-items: center; height: 100%; padding: 0 13px; position: relative; color: #b7c3ca; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: color .2s; }
.sd-nav a:hover, .sd-nav a.active { color: #fff; }
.sd-nav a.active::after { content: ''; position: absolute; bottom: 0; right: 13px; left: 13px; height: 2px; border-radius: 2px; background: var(--sd-accent); box-shadow: 0 0 14px #ef7b6a91; }
.sd-action { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-right: auto; padding: 10px 17px; min-height: 42px; flex: none; border: 1px solid #faac9b81; border-radius: 8px; color: #fff; background: linear-gradient(125deg, #aa4b3e, #dc6d57); box-shadow: inset 0 1px #ffffff3e, 0 8px 24px #8a302e3b; font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; cursor: pointer; }
.sd-action:hover { background: linear-gradient(125deg, #be5949, #ef806b); }
.sd-action span { font-size: 16px; line-height: 1; }
.sd-language { display: inline-flex; flex: none; padding: 3px; border: 1px solid var(--sd-line); border-radius: 8px; background: #20303dc4; direction: ltr; }
.sd-language button { border: 0; background: transparent; color: #a9bac3; min-height: 29px; padding: 3px 9px; border-radius: 5px; font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.sd-language button[aria-pressed="true"] { color: #fff; background: #ac5244; box-shadow: inset 0 1px #ffffff40; }
.lang-en body { font-family: Arial, sans-serif; }
.lang-en body :is(h1,h2,h3,h4,h5,p,li,dt,dd,a,button,input,select,textarea,label,summary,small,span,strong,b,em,th,td,blockquote) { font-family: Arial, sans-serif !important; letter-spacing: normal; }
.lang-en .sd-brand-label, .lang-en .sd-brand-label b { font-family: Arial, sans-serif !important; }
.lang-en .sd-brand-label small { font-family: Arial, sans-serif !important; text-align: left; }
.lang-en .sd-action { margin-right: 0; margin-left: auto; }
.lang-en .sd-nav a.active::after { left: 13px; right: 13px; }
.lang-en body:has(.hero-stage) :is(.hero-intro,.ability-panel,.upgrade-card,.directory-card,.build-phase,.final-build,.item-build-head,.upgrade-head,.story-dialog,.picker-dialog) { direction: ltr; text-align: left; }
.lang-en body:has(.shop-layout) :is(.shop-column,.detail-copy,.recipe-panel,.shop-intro,.shop-filters) { direction: ltr; text-align: left; }
.lang-en body:has(.shop-layout) .shop-layout { direction: ltr; }
.lang-en body:has(.sd-header) :is(.content,.match-main,.topbar) { direction: ltr; }

/* Shared canvas and glass surfaces, scoped to each existing component family. */
body:has(.sd-header) { background-color: var(--sd-bg); }
body:has(.sd-header) :is(.summary-strip, .role-card, .next-step, .directory-toolbar, .directory-card, .stats-band, .ability-panel, .upgrade-card, .build-phase, .final-build, .group-surface, .neutral-surface, .details-surface, .stat-card, .panel, .metric-tile, .match-list-panel, .trend-panel, .training-hero, .count-card, .training-panel, .viz-card, .focus-wrap, .insight-tile, .scoreboard-team) {
  border-color: var(--sd-line);
}
body:has(.sd-header) :is(.directory-card, .upgrade-card, .build-phase, .final-build, .group-surface, .neutral-surface, .details-surface, .stat-card, .panel, .metric-tile, .match-list-panel, .trend-panel, .count-card, .training-panel, .viz-card, .focus-wrap, .insight-tile, .scoreboard-team) {
  background: linear-gradient(145deg, #253847a8, #15212ddc);
  box-shadow: inset 0 1px #ffffff16, 0 12px 35px #03070b27;
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  border-radius: 12px;
}
body:has(.sd-header) :is(.directory-card, .upgrade-card, .build-phase):hover { border-color: #e5806c88; }
body:has(.sd-header) :is(.eyebrow, .ability-eyebrow, .item-build-head>span) { color: var(--sd-accent); }

/* The dashboard and model pages now use the same navigation as the guides. */
body:has(.sd-header) .shell { display: block; min-height: calc(100vh - 76px); }
body:has(.sd-header) .sidebar { display: none; }
body:has(.sd-header) .main { width: 100%; }
body:has(.sd-header) .topbar { height: 55px; padding-inline: clamp(18px, 3vw, 46px); background: #13202aa8; border-bottom-color: var(--sd-line); }
body:has(.sd-header) .content { max-width: 1550px; padding: 36px clamp(18px, 3vw, 46px) 28px; }
body:has(.sd-header) .training-hero { background: radial-gradient(circle at 85% 20%, #d1665040, transparent 40%), linear-gradient(135deg, #253a46d9, #162530dc); }
body:has(.training-content) { --green: var(--sd-accent); }
body:has(.sd-header) .training-content { max-width: 1550px; }
body:has(.sd-header) .training-content .hero-kicker, body:has(.sd-header) .training-content .training-hero h2 { color: var(--sd-text); }
body:has(.sd-header) .training-content .status-pulse.live { background: var(--sd-accent); box-shadow: 0 0 0 5px #eb7b652b; }
body:has(.sd-header) .training-content .progress-dial { background: conic-gradient(var(--sd-accent) var(--progress), #38434a var(--progress)); box-shadow: 0 0 0 1px #eb7b654a, 0 18px 55px #0e1b1780; }
body:has(.sd-header) .training-content .dial-inner { background: #172630; }

/* The item shop keeps its four columns and the hero page keeps its media stage. */
body:has(.shop-layout) { background-image: radial-gradient(circle at 16% 14%, #557f9852, transparent 34%), radial-gradient(circle at 82% 77%, #ad574643, transparent 36%), linear-gradient(135deg, #0b1822df, #121923e8), url('/static/item-workbench.webp'); }
body:has(.shop-layout) .shop-toolbar { background: #172631c4; border-bottom: 1px solid var(--sd-line); }
body:has(.shop-layout) .shop-layout { padding-top: 14px; }
body:has(.shop-layout) .shop-column>h1, body:has(.shop-layout) .shop-column>h2 { color: #c6d3d9; }
body:has(.hero-stage) .directory-page { background: radial-gradient(circle at 50% 5%, #3a526555, transparent 45%), linear-gradient(#111b25ac, #111b25d9), url('https://cdn.steamstatic.com/apps/dota2/images/dota_react/backgrounds/grey_painterly.png') center top/cover; }
body:has(.hero-stage) .stats-band { background: #17242e; }
body:has(.hero-stage) .ability-section { background-color: #15232d; }
body:has(.hero-stage) .upgrade-section, body:has(.hero-stage) .item-build-section { background-color: #101b25; }
body:has(.hero-stage) .ability-panel { background: #101b25ea; border: 1px solid var(--sd-line); border-radius: 12px; overflow: hidden; }
body:has(.hero-stage) .ability-panel-head { background: #25333d91; }
body:has(.match-main) .match-main { max-width: 1550px; padding-inline: clamp(18px, 3vw, 46px); }
body:has(.match-main) .result-hero { border-color: var(--sd-line); background: radial-gradient(circle at 24% 18%, #38533978, transparent 35%), radial-gradient(circle at 82% 55%, #91483a62, transparent 35%), #1a2a35d9; }
body:has(.sd-header) footer { border-top: 1px solid var(--sd-line); color: var(--sd-muted); background-color: #0e1822; }
body:has(.sd-header) footer a:hover { color: var(--sd-accent); }

@media (max-width: 1000px) {
  .sd-header-inner { gap: 12px; }
  .sd-nav a { padding-inline: 9px; }
  .sd-action { display: none; }
}
@media (max-width: 680px) {
  .sd-header { height: auto; }
  .sd-header-inner { display: block; padding: 11px 16px 0; position: relative; }
  .sd-brand img { width: 34px; height: 34px; }
  .sd-brand-label { font-size: 18px; }
  .sd-brand-label small { font-size: 9px; margin-top: 3px; }
  .sd-nav { display: flex; height: 42px; gap: 0; overflow-x: auto; scrollbar-width: none; margin-top: 7px; }
  .sd-nav::-webkit-scrollbar { display: none; }
  .sd-nav a { height: 42px; padding: 0 12px; font-size: 11px !important; }
  .sd-nav a.active::after { right: 12px; left: 12px; }
  .sd-language { position: absolute; top: 12px; left: 16px; }
  .lang-en .sd-language { left: auto; right: 16px; }
  body:has(.sd-header) .topbar { height: 49px; }
  body:has(.sd-header) .content { padding-top: 24px; }
  body:has(.hero-stage) .hero-stage { height: 790px; min-height: 790px; }
}