/* SURYABETON Midnight Tech / v1.0
   Distinct brand layer after original editorial and v1.4 system styles.
   Colors below are editable in CMS through CSS custom properties emitted in the document head. */
:root {--sb-primary:#22d7ff;--sb-secondary:#9748ff;--sb-gold:#ffbc29}
html[data-variant="ultraviolet"]{--sb-bg-1:#09071e;--sb-bg-2:#1c1245;--sb-header-1:#100925;--sb-header-2:#2d1460;--sb-panel:#171330;--sb-panel-border:#433065}
html[data-variant="electric"]{--sb-bg-1:#050e23;--sb-bg-2:#081d3e;--sb-header-1:#061a33;--sb-header-2:#083e62;--sb-panel:#091f36;--sb-panel-border:#1d476e}
html[data-variant="midnight"]{--sb-bg-1:#090a1d;--sb-bg-2:#0e1630;--sb-header-1:#090a22;--sb-header-2:#1b1243;--sb-panel:#121a32;--sb-panel-border:#2b3960}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:var(--sb-bg-1);--ink:#f0f5ff;--muted:#91a1cd;--line:var(--sb-panel-border);
  --accent:var(--sb-primary);--accent-alt:var(--sb-secondary);--light:#25204c;
  --surface:var(--sb-panel);--surface-2:var(--sb-bg-2);--surface-3:#212950;
  --elevated:#1b2648;--text-subtle:#b3c1e1;--soft-border:var(--sb-panel-border);
  --glow:rgba(43,194,255,.13);--shadow:0 18px 48px rgba(0,0,0,.3);
  --gold:var(--sb-gold);--cyan:var(--sb-primary);--purple:var(--sb-secondary);
  --footer:#080b1c;--footer-text:#a2add3;
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f1f6ff;--ink:#152341;--muted:#5d6b88;--line:#c9d5f0;
  --accent:color-mix(in srgb,var(--sb-primary) 46%,#12468b);--accent-alt:color-mix(in srgb,var(--sb-secondary) 68%,#203666);
  --surface:#fff;--surface-2:#eaf2ff;--surface-3:#e0ebfc;
  --elevated:#f6f9ff;--text-subtle:#536581;--soft-border:#d0dcf1;
  --gold:color-mix(in srgb,var(--sb-gold) 62%,#926100);
  --cyan:var(--sb-primary);--purple:var(--sb-secondary)
}
html{background:var(--bg)}
body{background-color:var(--bg)!important;
 background-image:radial-gradient(circle at 95% 15%,rgba(17,158,255,.085),transparent 35%),radial-gradient(ellipse at 6% 45%,rgba(117,53,255,.10),transparent 35%)!important}
html[data-theme="dark"] body{background-color:var(--bg)!important;background-image:radial-gradient(circle at 95% 0%,rgba(27,98,244,.17),transparent 30%),radial-gradient(ellipse at 0% 55%,rgba(128,32,255,.10),transparent 45%)!important}
/* Distinct Suryabeton masthead: deeper, cinematic, more technical than Pusaka. */
.utility-strip{background:#060b20!important;border-bottom:1px solid #1b2946!important}
.utility-content>span:first-child{color:var(--sb-primary)!important;letter-spacing:1.8px}
.site-header{background:linear-gradient(110deg,var(--sb-header-1),var(--sb-header-2))!important;position:relative}
.site-header:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;background:repeating-linear-gradient(90deg,transparent 0 54px,#6591ff 55px 56px,transparent 57px 110px);mask-image:linear-gradient(90deg,transparent,#000 35%,#000 80%,transparent)}
.site-header::before{background:linear-gradient(90deg,var(--sb-primary),var(--sb-secondary),var(--sb-gold),var(--sb-primary))!important;box-shadow:0 0 20px color-mix(in srgb,var(--sb-secondary) 38%,transparent)}
.header-inner{height:113px;position:relative;z-index:1}
.brand img{width:380px!important;max-width:380px!important;max-height:114px!important;object-fit:contain;object-position:left center}
.header-kicker{color:#c7d4ef!important;max-width:154px}
.header-search{border-color:#364c81!important;background:rgba(8,16,42,.65)!important}
.header-search button,.theme-toggle svg{color:var(--sb-gold)!important}
.theme-toggle{background:linear-gradient(115deg,rgba(27,30,74,.94),rgba(50,24,93,.9))!important;border-color:#58528b!important}
.nav-wrap{background:#080f26!important;border-bottom:1px solid #23325c!important}
.main-nav a:hover,.main-nav a:focus-visible{color:var(--sb-primary)!important}
.main-nav a:first-child::before{background:linear-gradient(90deg,var(--sb-primary),var(--sb-secondary))!important}
.news-ticker{background:#0a1430!important;border-color:#1b3359!important}
.ticker-label,.ticker-items a:hover{color:var(--sb-primary)!important}
.ticker-date{color:var(--sb-gold)!important}
/* Dark command bar, scanline grid and three-color halo. No huge hero banner. */
.home-intro{margin-top:22px;margin-bottom:27px;border:1px solid color-mix(in srgb,var(--sb-primary) 24%,#26345c)!important;
 background:linear-gradient(105deg,#091229 0%,#111d3e 49%,#231448 100%)!important;
 box-shadow:0 16px 55px rgba(0,6,28,.28)!important;border-radius:12px!important;padding-top:23px;padding-bottom:25px;isolation:isolate}
.home-intro:before{opacity:.18!important;background:linear-gradient(110deg,transparent 36%,rgba(10,210,252,.15)),repeating-linear-gradient(0deg,transparent 0 17px,rgba(90,167,255,.15) 18px 19px)!important}
.home-intro:after{right:-30px!important;top:-125px!important;width:390px!important;height:360px!important;border:2px solid color-mix(in srgb,var(--sb-primary) 50%,transparent)!important;box-shadow:0 0 0 45px rgba(15,195,255,.04),0 0 0 92px rgba(125,70,244,.04),inset 0 0 40px rgba(52,150,251,.06)!important}
.home-intro-line{color:var(--sb-primary)!important;letter-spacing:2.25px!important}
.status-led{background:var(--sb-primary)!important;box-shadow:0 0 16px var(--sb-primary)!important}
.intro-slash{color:var(--sb-gold)!important}
.home-intro h1{font-size:clamp(27px,3.6vw,45px)!important;letter-spacing:-1.3px!important;font-weight:900!important}
.home-intro h1 span{color:var(--sb-gold)!important}
.intro-counter strong{color:var(--sb-primary)!important}
/* Panels and article stream */
.home-layout{grid-template-columns:minmax(0,1fr) 328px;gap:24px}
.home-section-eyebrow{color:var(--accent)!important}
.eyebrow-dot{background:var(--sb-gold)!important}
.lead-story,.post-card,.topic-card{border-radius:12px!important;overflow:hidden}
.lead-story,.post-card,.sidebar .side-box,.topic-card{border:1px solid var(--line)!important;box-shadow:0 6px 25px rgba(2,6,25,.10)!important}
html[data-theme="dark"] .lead-story,html[data-theme="dark"] .post-card,html[data-theme="dark"] .topic-card,html[data-theme="dark"] .side-box:not(:first-child){background:linear-gradient(155deg,var(--surface) 0%,var(--surface-2) 100%)!important}
.lead-story:hover,.post-card:hover{border-color:var(--sb-primary)!important;box-shadow:0 14px 34px color-mix(in srgb,var(--sb-primary) 11%,transparent)!important}
.lead-media{border-radius:11px 11px 0 0!important}
.lead-ribbon{background:linear-gradient(100deg,var(--sb-secondary),color-mix(in srgb,var(--sb-secondary) 68%,#0b8fe9))!important}
.lead-copy h2,.card-body h3,.section-heading h2{letter-spacing:-.75px}
.section-heading{position:relative}
.section-heading:after{content:"";height:2px;position:absolute;bottom:-1px;left:0;width:68px;background:linear-gradient(90deg,var(--sb-primary),var(--sb-secondary));border-radius:2px}
.meta-line a,.section-heading .eyebrow,.eyebrow,.read-more{color:var(--accent)!important}
.topic-card:hover{border-color:var(--sb-secondary)!important}
/* Blogroll: top card in RIGHT SIDEBAR only */
.sidebar .side-box:first-child{background:linear-gradient(154deg,#111c40 0%,#1d1642 69%,#0b2946 100%)!important;border:1px solid color-mix(in srgb,var(--sb-secondary) 44%,#244064)!important;box-shadow:0 18px 35px rgba(0,0,0,.22)!important;border-radius:12px!important}
.sidebar .side-box:first-child:before{background:radial-gradient(circle,color-mix(in srgb,var(--sb-secondary) 44%,transparent),transparent 69%)!important}
.sidebar .side-box:first-child .side-icon{background:linear-gradient(135deg,var(--sb-primary),var(--sb-secondary))!important;color:#071023!important}
.sidebar .side-box:first-child .blogroll-list a:hover strong{color:var(--sb-primary)!important}
.sidebar .side-box:first-child .blogroll-list svg{color:var(--sb-gold)!important}
.footer{background:linear-gradient(112deg,#050a1c 0%,#11152f 65%,#1a1040 100%)!important;border-color:var(--sb-secondary)!important}
.footer-logo img{max-width:330px!important;max-height:110px!important}
.footer h3{color:var(--sb-primary)!important}
.article-meta .author-avatar{background:linear-gradient(125deg,var(--sb-primary),var(--sb-secondary))!important;color:#080d20!important}
.prose h2,.prose h3{color:var(--ink)!important}
.prose a:hover{color:var(--accent-alt)!important}
/* Preset mood. User-editable brand colors remain the main interactive tokens. */
html[data-variant="ultraviolet"] .home-intro{background:linear-gradient(115deg,#120a2b,#2b1558,#171b43)!important}
html[data-variant="ultraviolet"] .sidebar .side-box:first-child{background:linear-gradient(145deg,#201243,#321b5b,#1b183b)!important}
html[data-variant="electric"] .home-intro{background:linear-gradient(115deg,#051a30,#102d5a,#101845)!important}
html[data-variant="electric"] .sidebar .side-box:first-child{background:linear-gradient(145deg,#082646,#132955,#0d1a40)!important}
@media(max-width:1120px){.brand img{width:305px!important;max-width:305px!important}.home-layout{grid-template-columns:minmax(0,1fr) 300px}}
@media(max-width:860px){.home-layout{grid-template-columns:minmax(0,1fr)}.brand img{width:275px!important;max-width:275px!important}}
@media(max-width:760px){.brand img{width:238px!important;max-width:238px!important}.header-inner{height:91px}}
@media(max-width:540px){.brand img{width:184px!important;max-width:184px!important}.header-inner{height:74px}.home-intro:after{right:-180px!important}}