/* School of Gains component styles. Depends on sog-tokens.css. Safe to paste into GHL custom CSS. */
.sog-root, .sog-root *{box-sizing:border-box}
.sog-root{background:var(--sog-bg);color:var(--sog-text);font-family:var(--sog-font-body);font-size:var(--sog-font-size-base);line-height:var(--sog-line-height-normal)}
.sog-h1,.sog-h2,.sog-h3,.sog-display{font-family:var(--sog-font-display);font-weight:var(--sog-font-weight-extrabold);line-height:var(--sog-line-height-tight);letter-spacing:var(--sog-letter-spacing-display);margin:0}
.sog-display{font-size:var(--sog-font-size-display)} .sog-h1{font-size:var(--sog-font-size-4xl)} .sog-h2{font-size:var(--sog-font-size-3xl)} .sog-h3{font-size:var(--sog-font-size-xl);font-weight:var(--sog-font-weight-bold)}
.sog-accent{color:var(--sog-green-400)}
.sog-eyebrow{font:var(--sog-font-weight-bold) 11px/1 var(--sog-font-body);letter-spacing:var(--sog-letter-spacing-eyebrow);text-transform:uppercase;color:var(--sog-green-400)}
.sog-eyebrow--amber{color:var(--sog-amber)}
.sog-muted{color:var(--sog-text-muted)} .sog-subtle{color:var(--sog-text-subtle)}

/* Button: portal style, 12px radius, sentence case */
.sog-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--sog-button-height-md);padding:0 20px;border-radius:var(--sog-button-radius);border:1px solid transparent;font:var(--sog-font-weight-extrabold) 15px/1 var(--sog-font-body);text-decoration:none;cursor:pointer;transition:background var(--sog-motion-duration) var(--sog-motion-ease),transform var(--sog-motion-duration-fast) var(--sog-motion-ease),box-shadow var(--sog-motion-duration);white-space:nowrap}
.sog-btn:focus-visible{outline:none;box-shadow:var(--sog-shadow-focus)}
.sog-btn:active{transform:translateY(1px)}
.sog-btn--primary{background:var(--sog-green-400);color:var(--sog-on-green)} .sog-btn--primary:hover{background:#19d65c}
.sog-btn--secondary{background:var(--sog-border-strong);color:var(--sog-text)} .sog-btn--secondary:hover{background:#474747}
.sog-btn--outline{background:transparent;border-color:var(--sog-green-500);color:var(--sog-green-400)} .sog-btn--outline:hover{background:var(--sog-green-tint)}
.sog-btn--ghost{background:transparent;color:var(--sog-text)} .sog-btn--ghost:hover{background:rgba(255,255,255,.06)}
.sog-btn--school{background:var(--sog-school);color:#fff} .sog-btn--school:hover{background:#6c77f4}
.sog-btn--danger{background:var(--sog-danger);color:#fff}
.sog-btn--sm{height:var(--sog-button-height-sm);padding:0 14px;font-size:13px} .sog-btn--lg{height:var(--sog-button-height-lg);padding:0 28px;font-size:16px}
.sog-btn--block{width:100%}
.sog-btn[disabled],.sog-btn.is-disabled{opacity:.45;cursor:not-allowed;transform:none}
.sog-btn.is-loading{color:transparent;position:relative;pointer-events:none}
.sog-btn.is-loading::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid var(--sog-on-green);border-right-color:transparent;animation:sog-spin .7s linear infinite}
@keyframes sog-spin{to{transform:rotate(360deg)}}

.sog-link{color:var(--sog-green-400);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,201,72,.4)} .sog-link:hover{text-decoration-color:currentColor}
.sog-link--muted{color:var(--sog-text-muted);text-decoration:none} .sog-link--muted:hover{color:var(--sog-text)}

.sog-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--sog-radius-pill);font:var(--sog-font-weight-bold) 12px/1.2 var(--sog-font-body);background:rgba(255,255,255,.08);color:var(--sog-text);border:1px solid var(--sog-border)}
.sog-badge--green{background:var(--sog-green-tint);color:var(--sog-green-400);border-color:rgba(0,201,72,.3)}
.sog-badge--amber{background:rgba(242,179,74,.12);color:var(--sog-amber);border-color:rgba(242,179,74,.3)}
.sog-badge--danger{background:rgba(233,61,61,.12);color:#ff6b6b;border-color:rgba(233,61,61,.3)}
.sog-badge--live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(0,201,72,.25)}

/* Forms */
.sog-field{display:grid;gap:6px}
.sog-label{font:var(--sog-font-weight-bold) 13px/1.2 var(--sog-font-body);color:var(--sog-text)}
.sog-help{font-size:12px;color:var(--sog-text-subtle)} .sog-help--error{color:#ff6b6b}
.sog-input,.sog-select,.sog-textarea{width:100%;height:46px;padding:0 14px;border-radius:var(--sog-radius-md);border:1px solid var(--sog-border-strong);background:var(--sog-surface);color:var(--sog-text);font:inherit;font-size:15px;transition:border-color var(--sog-motion-duration),box-shadow var(--sog-motion-duration)}
.sog-textarea{height:auto;min-height:110px;padding:12px 14px;resize:vertical}
.sog-input::placeholder,.sog-textarea::placeholder{color:var(--sog-text-subtle)}
.sog-input:focus,.sog-select:focus,.sog-textarea:focus{outline:none;border-color:var(--sog-green-400);box-shadow:var(--sog-shadow-focus)}
.sog-input.is-error{border-color:var(--sog-danger)}
.sog-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#b0b0b0 50%),linear-gradient(135deg,#b0b0b0 50%,transparent 50%);background-position:calc(100% - 20px) 20px,calc(100% - 15px) 20px;background-size:5px 5px;background-repeat:no-repeat}
.sog-input-group{display:flex;gap:8px} .sog-input-group .sog-input{flex:1}
.sog-check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--sog-text-muted);cursor:pointer}
.sog-check input{appearance:none;width:18px;height:18px;border:1px solid var(--sog-border-strong);border-radius:5px;background:var(--sog-surface);display:grid;place-content:center;margin:0}
.sog-check input[type=radio]{border-radius:50%}
.sog-check input:checked{background:var(--sog-green-400);border-color:var(--sog-green-400)}
.sog-check input:checked::after{content:"";width:8px;height:8px;border-radius:2px;background:var(--sog-on-green)}
.sog-switch{position:relative;width:40px;height:22px;appearance:none;background:var(--sog-border-strong);border-radius:999px;cursor:pointer;transition:background var(--sog-motion-duration);margin:0}
.sog-switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform var(--sog-motion-duration) var(--sog-motion-ease)}
.sog-switch:checked{background:var(--sog-green-400)} .sog-switch:checked::after{transform:translateX(18px)}
.sog-code{display:flex;gap:8px}
.sog-code input{width:48px;height:56px;text-align:center;font:var(--sog-font-weight-extrabold) 22px var(--sog-font-display);border-radius:var(--sog-radius-md);border:1px solid var(--sog-border-strong);background:var(--sog-surface);color:var(--sog-text)}
.sog-code input:focus{outline:none;border-color:var(--sog-green-400);box-shadow:var(--sog-shadow-focus)}
.sog-divider{display:flex;align-items:center;gap:12px;color:var(--sog-text-subtle);font-size:12px} .sog-divider::before,.sog-divider::after{content:"";flex:1;height:1px;background:var(--sog-border)}

/* Cards */
.sog-card{background:var(--sog-surface);border:1px solid var(--sog-border);border-radius:var(--sog-radius-lg);padding:var(--sog-space-6);box-shadow:var(--sog-shadow-card)}
.sog-card--interactive{transition:border-color var(--sog-motion-duration),transform var(--sog-motion-duration) var(--sog-motion-ease)} .sog-card--interactive:hover{border-color:var(--sog-green-500);transform:translateY(-2px)}
.sog-card--featured{border-color:var(--sog-green-500);background:linear-gradient(180deg,rgba(0,201,72,.08),var(--sog-surface) 40%)}
.sog-card__icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--sog-green-tint);color:var(--sog-green-400);margin-bottom:16px}
.sog-price{font:var(--sog-font-weight-extrabold) 40px/1 var(--sog-font-display)} .sog-price small{font-size:14px;color:var(--sog-text-muted);font-family:var(--sog-font-body);font-weight:600}
.sog-list{list-style:none;padding:0;margin:16px 0;display:grid;gap:10px;font-size:14px;color:var(--sog-text-muted)}
.sog-list li{display:flex;gap:10px} .sog-list li::before{content:"✓";color:var(--sog-green-400);font-weight:800}

/* Alerts */
.sog-alert{display:flex;gap:12px;padding:14px 16px;border-radius:var(--sog-radius-md);border:1px solid;font-size:14px}
.sog-alert strong{display:block;color:var(--sog-text);margin-bottom:2px}
.sog-alert--success{background:rgba(0,201,72,.08);border-color:rgba(0,201,72,.3);color:#9fe8b9}
.sog-alert--warning{background:rgba(242,179,74,.08);border-color:rgba(242,179,74,.3);color:#f5d199}
.sog-alert--danger{background:rgba(233,61,61,.08);border-color:rgba(233,61,61,.3);color:#f3a5a5}
.sog-alert--info{background:rgba(21,94,239,.1);border-color:rgba(21,94,239,.35);color:#a9c3fa}

/* Tabs */
.sog-tabs__list{display:flex;gap:4px;padding:4px;background:var(--sog-surface);border:1px solid var(--sog-border);border-radius:var(--sog-radius-md);width:max-content}
.sog-tabs__tab{border:0;background:transparent;color:var(--sog-text-muted);font:var(--sog-font-weight-bold) 14px var(--sog-font-body);padding:8px 16px;border-radius:9px;cursor:pointer}
.sog-tabs__tab[aria-selected=true]{background:var(--sog-border-strong);color:var(--sog-text)}
.sog-tabs__panel{padding:16px 2px;color:var(--sog-text-muted)} .sog-tabs__panel[hidden]{display:none}

/* Accordion */
.sog-accordion{border:1px solid var(--sog-border);border-radius:var(--sog-radius-lg);overflow:hidden}
.sog-accordion details{border-bottom:1px solid var(--sog-border);background:var(--sog-surface)} .sog-accordion details:last-child{border-bottom:0}
.sog-accordion summary{list-style:none;cursor:pointer;padding:18px 20px;font:var(--sog-font-weight-bold) 16px var(--sog-font-display);display:flex;justify-content:space-between}
.sog-accordion summary::after{content:"+";color:var(--sog-green-400);font-size:20px;transition:transform var(--sog-motion-duration)}
.sog-accordion details[open] summary::after{transform:rotate(45deg)}
.sog-accordion .sog-accordion__body{padding:0 20px 18px;color:var(--sog-text-muted);font-size:15px}

/* Modal */
.sog-modal{border:1px solid var(--sog-border);border-radius:var(--sog-radius-lg);background:var(--sog-elevated);color:var(--sog-text);padding:28px;max-width:440px;width:calc(100% - 32px)}
.sog-modal::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(4px)}
.sog-modal__actions{display:flex;gap:8px;justify-content:flex-end;margin-top:24px}

/* Header */
.sog-header{height:var(--sog-layout-header-height);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 24px;background:rgba(10,10,10,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--sog-border)}
.sog-header__logo img{height:44px;display:block}
.sog-nav{display:flex;gap:4px} .sog-nav a{color:var(--sog-text-muted);text-decoration:none;font:var(--sog-font-weight-semibold) 14px var(--sog-font-body);padding:8px 12px;border-radius:8px} .sog-nav a:hover,.sog-nav a[aria-current]{color:var(--sog-text);background:rgba(255,255,255,.05)}
.sog-header__actions{display:flex;gap:8px}

/* Footer */
.sog-footer{border-top:1px solid var(--sog-border);padding:48px 24px 24px;background:var(--sog-bg)}
.sog-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.sog-footer h4{font:var(--sog-font-weight-bold) 13px var(--sog-font-display);margin:0 0 12px;color:var(--sog-text)}
.sog-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:14px}
.sog-footer__disclaimer{margin-top:40px;padding-top:20px;border-top:1px solid var(--sog-border);font-size:12px;color:var(--sog-text-subtle);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sog-footer__disclaimer strong{color:var(--sog-text-muted)}

/* Hero */
.sog-hero{position:relative;padding:96px 48px;border-radius:var(--sog-radius-lg);overflow:hidden;background:radial-gradient(60% 70% at 25% 0%,var(--sog-green-glow),transparent 70%),var(--sog-bg);border:1px solid var(--sog-border)}
.sog-hero__actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.sog-hero__proof{margin-top:24px;font-size:14px;color:var(--sog-text-muted)} .sog-hero__proof b{color:var(--sog-amber)}

/* Newsletter / embeds */
.sog-newsletter{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.sog-embed{border:1px dashed var(--sog-border-strong);border-radius:var(--sog-radius-lg);background:var(--sog-surface);padding:20px}
.sog-embed__bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.sog-embed iframe{width:100%;border:0;border-radius:var(--sog-radius-md);background:var(--sog-surface-2)}

/* Consent: bottom-docked bar that reserves space so it never covers CTAs */
.sog-consent{position:sticky;bottom:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;background:var(--sog-elevated);border-top:1px solid var(--sog-border);font-size:13px;color:var(--sog-text-muted)}
.sog-consent__actions{display:flex;gap:8px;flex-shrink:0}

/* Free School feed */
.sog-feed{background:linear-gradient(180deg,#151515,#0f0f0f);border:1px solid var(--sog-border);border-radius:var(--sog-radius-lg);padding:16px}
.sog-feed__head{display:flex;justify-content:space-between;margin-bottom:12px}
.sog-feed__media{aspect-ratio:16/9;border-radius:12px;background:radial-gradient(circle at 70% 30%,rgba(0,201,72,.35),transparent 60%),linear-gradient(135deg,#1e1e1e,#0a0a0a);display:grid;place-items:center;font:800 28px var(--sog-font-display);color:#fff}
.sog-feed__meta{display:flex;align-items:center;gap:8px;margin:12px 0 6px;font-size:12px;color:var(--sog-text-subtle)}
.sog-feed__meta b{color:var(--sog-text)}
.sog-dot{width:18px;height:18px;border-radius:5px;background:var(--sog-school);display:inline-block}

.sog-avatar{width:40px;height:40px;border-radius:50%;background:var(--sog-green-700);color:#fff;display:inline-grid;place-items:center;font:800 14px var(--sog-font-display);border:2px solid var(--sog-bg)}
.sog-avatar--lg{width:56px;height:56px;font-size:18px}
.sog-tooltip{position:relative} .sog-tooltip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--sog-text);color:var(--sog-bg);font-size:12px;font-weight:700;padding:6px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--sog-motion-duration)} .sog-tooltip:hover::after{opacity:1}
.sog-meter{height:8px;border-radius:999px;background:var(--sog-border);overflow:hidden} .sog-meter span{display:block;height:100%;background:linear-gradient(90deg,var(--sog-green-500),var(--sog-green-400));border-radius:inherit}
.sog-loader{width:28px;height:28px;border-radius:50%;border:3px solid var(--sog-border-strong);border-top-color:var(--sog-green-400);animation:sog-spin .8s linear infinite}
.sog-table{width:100%;border-collapse:collapse;font-size:14px} .sog-table th{text-align:left;color:var(--sog-text-subtle);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em;padding:10px 12px;border-bottom:1px solid var(--sog-border)} .sog-table td{padding:12px;border-bottom:1px solid var(--sog-border);color:var(--sog-text-muted)}
.sog-breadcrumbs{display:flex;gap:8px;font-size:13px;color:var(--sog-text-subtle)} .sog-breadcrumbs a{color:var(--sog-text-muted);text-decoration:none} .sog-breadcrumbs span[aria-current]{color:var(--sog-text)}
.sog-pagination{display:flex;gap:6px} .sog-pagination a{min-width:36px;height:36px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--sog-border);color:var(--sog-text-muted);text-decoration:none;font-weight:700;font-size:14px} .sog-pagination a[aria-current]{background:var(--sog-green-400);color:var(--sog-on-green);border-color:transparent}
@media (max-width:760px){.sog-footer__grid,.sog-newsletter{grid-template-columns:1fr}.sog-nav{display:none}.sog-display{font-size:44px}.sog-hero{padding:56px 24px}.sog-consent{flex-direction:column;align-items:stretch}}

/* ===================== v2: Portal match ===================== */
.sog-root{background:var(--sog-gradient-page);background-attachment:fixed}
.sog-card{border-radius:var(--sog-radius-lg);box-shadow:none;padding:16px 18px}
.sog-sub{background:var(--sog-surface-3);border:1px solid var(--sog-border);border-radius:var(--sog-radius-sub);padding:10px 12px}
/* Section label */
.sog-eyebrow,.sog-label-sm{font:var(--sog-label-weight) var(--sog-label-size)/1.2 var(--sog-font-display);letter-spacing:var(--sog-label-tracking);text-transform:uppercase;color:var(--sog-green-400)}
.sog-label-sm{display:inline-flex;gap:8px;align-items:center}
.sog-label-sm .sog-label-sm__meta{color:var(--sog-text-subtle);letter-spacing:0;text-transform:none;font-weight:600;font-size:10px}
.sog-label-sm--amber,.sog-eyebrow--amber{color:var(--sog-amber)} .sog-label-sm--blue{color:var(--sog-blue)} .sog-label-sm--school{color:#8C95FF} .sog-label-sm--muted{color:var(--sog-text-subtle)}
/* Two-tone headline */
.sog-headline{font:800 clamp(24px,3.4vw,40px)/1.05 var(--sog-font-display);text-transform:uppercase;letter-spacing:-0.01em;margin:6px 0 8px}
.sog-headline em{font-style:normal;color:var(--sog-green-400)}
.sog-title{font:800 22px/1.2 var(--sog-font-display);margin:4px 0}
/* Buttons v2 */
.sog-btn{font-family:var(--sog-font-display);font-weight:700;font-size:13px;height:36px;padding:0 14px;border-radius:10px}
.sog-btn--lg{height:46px;font-size:14px}
.sog-btn--primary{background:var(--sog-green-400);color:#04130A}
.sog-btn--ghost{background:transparent;border:1px solid var(--sog-border-strong);color:var(--sog-text)} .sog-btn--ghost:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.24)}
.sog-btn--secondary{background:var(--sog-surface-3);border-color:var(--sog-border-strong)}
.sog-btn--pill{border-radius:var(--sog-radius-pill)}
.sog-btn--school svg,.sog-btn svg{width:16px;height:16px;flex:none}
.sog-chip{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 12px;border-radius:var(--sog-radius-pill);border:1px solid var(--sog-border-strong);background:transparent;color:var(--sog-text);font:700 11px var(--sog-font-display);cursor:pointer}
.sog-chip:hover,.sog-chip.is-active{border-color:var(--sog-green-400);color:var(--sog-green-400)}
/* Ticker */
.sog-ticker{position:relative;overflow:hidden;border-block:1px solid var(--sog-border);padding:7px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.sog-ticker__track{display:flex;gap:36px;width:max-content;animation:sog-marquee 30s linear infinite;font:700 11px var(--sog-font-display);color:var(--sog-text);white-space:nowrap}
.sog-ticker__track span{color:var(--sog-text-muted);font-weight:600} .sog-ticker__track b{color:var(--sog-green-400)} .sog-ticker__track b.neg{color:var(--sog-red)}
.sog-ticker:hover .sog-ticker__track{animation-play-state:paused}
@keyframes sog-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.sog-ticker__track{animation:none}}
/* Accent card */
.sog-accent-card{position:relative;overflow:hidden;background:var(--sog-gradient-accent);border:1px solid rgba(0,201,72,.45);border-radius:var(--sog-radius-lg);padding:16px 18px;box-shadow:var(--sog-glow-green),inset 0 0 30px rgba(0,201,72,.06)}
.sog-accent-card::before,.sog-accent-card::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(0,201,72,.18);pointer-events:none}
.sog-accent-card::before{width:150px;height:150px;top:-50px;right:-30px} .sog-accent-card::after{width:90px;height:90px;top:-20px;right:0}
.sog-accent-card p{color:var(--sog-text-muted);font-size:12px;margin:2px 0 12px}
/* Pills */
.sog-pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:var(--sog-radius-pill);font:800 9px/1 var(--sog-font-display);letter-spacing:.1em;text-transform:uppercase;border:1px solid transparent;white-space:nowrap}
.sog-pill--live{background:var(--sog-green-dark);color:var(--sog-green-400);border-color:rgba(0,201,72,.25)}
.sog-pill--open{background:rgba(255,255,255,.08);color:var(--sog-text-muted)}
.sog-pill--outline{border-color:var(--sog-border-strong);color:var(--sog-text);text-transform:none;letter-spacing:0;font-weight:700;font-size:10px}
.sog-pill--blue{border-color:rgba(79,155,255,.5);color:var(--sog-blue);background:rgba(79,155,255,.08);text-transform:none;letter-spacing:0;font-size:10px}
.sog-pill--new{background:var(--sog-green-400);color:#04130A;height:18px;padding:0 7px}
.sog-pill--new-outline{border-color:rgba(0,201,72,.4);color:var(--sog-green-400);height:18px}
.sog-counter{font:800 10px var(--sog-font-display);color:var(--sog-green-400)}
.sog-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:5px;font:700 10px/1.4 var(--sog-font-display)}
.sog-tag--indigo{background:rgba(124,131,247,.16);color:#AAB0FF} .sog-tag--teal{background:rgba(45,212,191,.13);color:var(--sog-teal)} .sog-tag--red{background:rgba(240,72,72,.16);color:#FF7A7A} .sog-tag--green{background:var(--sog-green-dark);color:var(--sog-green-400)}
/* Stat pill / streak */
.sog-stat{display:inline-flex;align-items:center;border:1px solid var(--sog-border-strong);border-radius:10px;background:var(--sog-surface);height:32px;font:700 11px var(--sog-font-display);overflow:hidden}
.sog-stat > span{display:inline-flex;align-items:center;gap:6px;padding:0 10px;height:100%}
.sog-stat > span + span{border-left:1px solid var(--sog-border-strong)}
.sog-stat__streak{color:var(--sog-amber);background:rgba(242,179,74,.08)} .sog-stat__new{color:var(--sog-green-400)}
.sog-dot{width:6px;height:6px;border-radius:50%;background:var(--sog-green-400);display:inline-block}
/* Progress */
.sog-ring-cap{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--sog-border-strong);background:var(--sog-surface);border-radius:12px;padding:6px 12px 6px 8px}
.sog-ring{--p:0;width:28px;height:28px;border-radius:50%;background:conic-gradient(var(--sog-green-400) calc(var(--p)*1%),rgba(255,255,255,.1) 0);display:grid;place-items:center}
.sog-ring::after{content:"";width:22px;height:22px;border-radius:50%;background:var(--sog-surface)}
.sog-ring-cap b{display:block;font:800 12px var(--sog-font-display)} .sog-ring-cap small{display:block;font-size:9px;color:var(--sog-text-subtle)}
.sog-bar{height:4px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden} .sog-bar > i{display:block;height:100%;background:var(--sog-green-400);border-radius:inherit}
.sog-big-stat{font:800 28px var(--sog-font-display)} .sog-big-stat small{font-size:12px;color:var(--sog-text-subtle)}
/* Course outline */
.sog-outline{background:var(--sog-surface);border:1px solid var(--sog-border);border-radius:var(--sog-radius-lg);padding:12px;max-width:320px}
.sog-outline__head{display:flex;justify-content:space-between;font:700 12px var(--sog-font-display);padding:2px 4px 10px} .sog-outline__head small{color:var(--sog-text-subtle);font-weight:600;font-size:10px}
.sog-outline__group{display:flex;justify-content:space-between;padding:6px 4px;font:800 9px var(--sog-font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--sog-text-subtle)}
.sog-step{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;border:1px solid transparent;font:700 12px var(--sog-font-display)}
.sog-step__n{width:20px;height:20px;border-radius:50%;border:1px solid var(--sog-border-strong);display:grid;place-items:center;font-size:10px;flex:none}
.sog-step__t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sog-step small{color:var(--sog-text-subtle);font-size:10px}
.sog-step.is-current{border-color:var(--sog-border-strong);background:var(--sog-surface-3)} .sog-step.is-current small{color:var(--sog-green-400)}
.sog-step.is-done .sog-step__n{background:var(--sog-green-400);border-color:var(--sog-green-400);color:#04130A}
/* Sidebar */
.sog-side{width:220px;background:rgba(10,12,11,.92);border-right:1px solid var(--sog-border);padding:14px 10px;display:flex;flex-direction:column;gap:2px;min-height:560px;font-family:var(--sog-font-display)}
.sog-side__brand{display:flex;align-items:center;gap:8px;padding:0 6px 16px;font:800 12px/1.15 var(--sog-font-display)} .sog-side__brand img{width:28px}
.sog-side__fold{margin-left:auto;width:22px;height:22px;border-radius:7px;border:1px solid var(--sog-border-strong);display:grid;place-items:center;color:var(--sog-text-muted);background:none;cursor:pointer}
.sog-nav-item{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:10px;color:var(--sog-text);text-decoration:none;font:600 12px var(--sog-font-display)}
.sog-nav-item svg{width:15px;height:15px;flex:none;color:var(--sog-text-muted)} .sog-nav-item .sog-counter{margin-left:auto}
.sog-nav-item:hover{background:rgba(255,255,255,.04)}
.sog-nav-item.is-active{background:var(--sog-green-dark);color:var(--sog-green-400)} .sog-nav-item.is-active svg{color:var(--sog-green-400)}
.sog-side__group{font:800 9px var(--sog-font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--sog-amber);padding:14px 10px 6px}
.sog-side__promo{margin-top:auto;background:var(--sog-surface);border:1px solid var(--sog-border);border-radius:12px;padding:10px;font-size:11px} .sog-side__promo b{font:700 11px var(--sog-font-display);display:block} .sog-side__promo p{color:var(--sog-text-subtle);margin:6px 0 8px;font-size:10px}
.sog-side__user{display:flex;align-items:center;gap:8px;padding:12px 6px 0;font:600 11px var(--sog-font-display)}
.sog-side.is-collapsed{width:72px;align-items:center} .sog-side.is-collapsed .sog-nav-item{width:44px;justify-content:center;padding:0}
.sog-side.is-collapsed .sog-nav-label,.sog-side.is-collapsed .sog-counter,.sog-side.is-collapsed .sog-side__brand span,.sog-side.is-collapsed .sog-side__promo p,.sog-side.is-collapsed .sog-side__promo b,.sog-side.is-collapsed .sog-side__group{display:none}
.sog-side.is-collapsed .sog-side__group + *{border-top:1px solid var(--sog-border);margin-top:8px;padding-top:0}
.sog-side.is-collapsed .sog-side__promo{background:none;border:0;padding:0} .sog-side.is-collapsed .sog-side__promo .sog-btn span{display:none}
.sog-has-dot{position:relative} .sog-has-dot::after{content:"";position:absolute;top:-2px;right:-3px;width:6px;height:6px;border-radius:50%;background:var(--sog-green-400)}
/* List row with accent */
.sog-row{position:relative;display:flex;align-items:center;gap:12px;background:var(--sog-surface);border:1px solid var(--sog-border);border-radius:12px;padding:10px 14px 10px 20px;font-family:var(--sog-font-display)}
.sog-row::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--accent,var(--sog-green-400))}
.sog-row__body{flex:1;min-width:0} .sog-row__body b{font:800 13px var(--sog-font-display)} .sog-row__body small{color:var(--sog-text-subtle);font-size:10px;margin-left:6px}
.sog-row--blue{--accent:var(--sog-blue)} .sog-row--school{--accent:var(--sog-school)} .sog-row--amber{--accent:var(--sog-amber)}
.sog-row--link{cursor:pointer} .sog-row--link::after{content:"›";color:var(--sog-text-muted);font-size:18px}
/* Date block */
.sog-date{width:38px;height:42px;border-radius:8px;background:var(--sog-surface-3);border:1px solid var(--sog-border);display:grid;place-content:center;text-align:center;font-family:var(--sog-font-display);flex:none}
.sog-date small{font:800 7px/1 var(--sog-font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--sog-text-subtle)} .sog-date b{font:800 16px/1.05 var(--sog-font-display)}
.sog-event{display:flex;gap:10px;align-items:center;background:var(--sog-surface);border:1px solid var(--sog-border);border-radius:12px;padding:8px 10px}
.sog-event__body{flex:1;min-width:0} .sog-event__body b{display:block;font:800 11px var(--sog-font-display)} .sog-event__body small{color:var(--sog-text-subtle);font-size:9px}
/* Podium */
.sog-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:end;max-width:420px}
.sog-podium__tile{background:var(--sog-surface-3);border:1px solid var(--sog-border);border-radius:10px;padding:8px;text-align:center;font-family:var(--sog-font-display)}
.sog-podium__tile small{display:block;font:700 9px var(--sog-font-display);color:var(--sog-text-subtle)} .sog-podium__tile b{display:block;font:800 12px var(--sog-font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sog-podium__tile .sog-up,.sog-podium__tile .sog-down{font:800 10px var(--sog-font-display)}
.sog-podium__tile--1{border-color:var(--sog-gold);box-shadow:var(--sog-glow-gold);padding:12px 8px} .sog-podium__tile--1 small{color:var(--sog-gold)}
.sog-medal{width:38px;height:38px;margin:0 auto 4px;border-radius:50%;display:grid;place-items:center;font:800 14px var(--sog-font-display);border:2px solid var(--m);position:relative;background:var(--sog-surface)}
.sog-medal--1{--m:var(--sog-gold);width:46px;height:46px} .sog-medal--2{--m:var(--sog-silver)} .sog-medal--3{--m:var(--sog-bronze)}
.sog-crown{color:var(--sog-gold);font-size:12px;display:block;line-height:1}
.sog-up{color:var(--sog-green-400)} .sog-down{color:var(--sog-red)}
/* Module card */
.sog-module{background:var(--sog-surface);border:1px solid var(--sog-border);border-radius:var(--sog-radius-lg);padding:8px 8px 12px;font-family:var(--sog-font-display)}
.sog-module__num{height:44px;border-radius:8px;display:flex;align-items:center;padding:0 10px;font:800 18px var(--sog-font-display);color:rgba(255,255,255,.85);background:var(--sog-gradient-module-1)}
.sog-module__num--2{background:var(--sog-gradient-module-2)} .sog-module__num--3{background:var(--sog-gradient-module-3)} .sog-module__num--4{background:var(--sog-gradient-module-4)}
.sog-module h4{font:800 13px var(--sog-font-display);margin:12px 4px 2px} .sog-module > small{display:block;margin:0 4px 8px;color:var(--sog-text-subtle);font-size:10px}
.sog-module ol{list-style:none;margin:10px 4px 0;padding:0;font-size:10px;color:var(--sog-text-muted);display:grid;gap:3px}
.sog-blur{filter:blur(3px);user-select:none}
/* Tool card */
.sog-tool{display:flex;gap:10px;justify-content:space-between;background:var(--sog-surface);border:1px solid var(--sog-border);border-radius:12px;padding:10px 12px}
.sog-tool b{font:800 12px var(--sog-font-display)} .sog-tool p{margin:3px 0 0;color:var(--sog-text-subtle);font-size:10px;line-height:1.4}
.sog-tool .sog-used{color:var(--sog-green-400);font:700 9px var(--sog-font-display);margin-left:6px}
.sog-type{align-self:flex-start;height:18px;padding:0 7px;border-radius:5px;border:1px solid var(--sog-border-strong);font:800 8px/16px var(--sog-font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--sog-text-muted);white-space:nowrap}
/* Merch card */
.sog-merch{background:var(--sog-surface);border:1px solid var(--sog-border);border-radius:12px;overflow:hidden;font-family:var(--sog-font-display);position:relative}
.sog-merch__img{aspect-ratio:1/1;background:#F2F2F0;display:block;width:100%;object-fit:cover}
.sog-merch .sog-pill--new{position:absolute;top:8px;left:8px}
.sog-merch__body{padding:8px 10px 10px} .sog-merch__body b{display:block;font:800 11px var(--sog-font-display);min-height:28px}
.sog-merch__foot{display:flex;justify-content:space-between;font:800 11px var(--sog-font-display)} .sog-merch__foot a{color:var(--sog-text-subtle);font-weight:600;text-decoration:none;font-size:10px}
/* Accordion row */
.sog-acc{background:var(--sog-surface);border:1px solid var(--sog-border);border-radius:12px;margin-bottom:8px}
.sog-acc summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;font-family:var(--sog-font-display)}
.sog-acc summary::-webkit-details-marker{display:none}
.sog-acc summary div{flex:1} .sog-acc summary b{display:block;font:800 12px var(--sog-font-display)} .sog-acc summary small{color:var(--sog-text-subtle);font-size:10px}
.sog-acc summary::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--sog-text-muted);border-bottom:1.5px solid var(--sog-text-muted);transform:rotate(45deg);transition:transform var(--sog-motion-duration)}
.sog-acc[open] summary::after{transform:rotate(-135deg)} .sog-acc__body{padding:0 14px 14px;color:var(--sog-text-muted);font-size:12px}
.sog-acc--link summary::after{transform:rotate(-45deg)}
/* Checklist */
.sog-checklist{background:var(--sog-surface);border:1px solid var(--sog-border);border-radius:12px;padding:12px 14px;list-style:none;margin:0;display:grid;gap:8px;font-size:12px;color:var(--sog-text-muted)}
.sog-checklist li{display:flex;gap:10px;align-items:center} .sog-checklist li::before{content:"";width:9px;height:5px;border-left:2px solid var(--sog-green-400);border-bottom:2px solid var(--sog-green-400);transform:rotate(-45deg) translateY(-2px);flex:none}
/* Locked */
.sog-locked{position:relative;border-radius:var(--sog-radius-lg);overflow:hidden;border:1px solid var(--sog-border)}
.sog-locked__content{filter:blur(4px);opacity:.5;pointer-events:none;padding:16px}
.sog-locked__veil{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:6px;background:rgba(10,15,12,.55);padding:16px}
.sog-locked__veil b{font:800 14px var(--sog-font-display)} .sog-locked__veil p{margin:0 0 6px;color:var(--sog-text-muted);font-size:12px;max-width:300px}
.sog-lock{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--sog-surface-3);border:1px solid var(--sog-border-strong);color:var(--sog-blue)}
/* Empty state */
.sog-empty{border:1px dashed var(--sog-border-strong);border-radius:var(--sog-radius-lg);padding:28px 20px;text-align:center;color:var(--sog-text-muted);font-size:12px}
.sog-empty b{display:block;color:var(--sog-text);font:800 14px var(--sog-font-display);margin:8px 0 4px} .sog-empty .sog-btn{margin-top:12px}
.sog-empty__icon{width:40px;height:40px;margin:0 auto;border-radius:12px;display:grid;place-items:center;background:var(--sog-green-dark);color:var(--sog-green-400)}
/* Carousel dots */
.sog-carousel-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sog-dots{display:flex;gap:4px;align-items:center} .sog-dots i{width:5px;height:5px;border-radius:99px;background:rgba(255,255,255,.22);transition:width var(--sog-motion-duration) var(--sog-motion-ease)} .sog-dots i.is-active{width:16px;background:#8C95FF}
.sog-dots--green i.is-active{background:var(--sog-green-400)}
.sog-arrow{width:22px;height:22px;border-radius:6px;border:1px solid var(--sog-border-strong);background:var(--sog-surface);color:var(--sog-text);display:grid;place-items:center;font-size:12px;cursor:pointer}
.sog-count{font:700 10px var(--sog-font-display);color:var(--sog-text-subtle)}