:root{--color-primary:#e62429;--color-secondary:#1677ff;--color-accent:#ffb020;--color-success:#22c55e;--color-warning:#f59e0b;--color-danger:#ef4444;--bg:#0b0d12;--bg-soft:#111722;--card:#151b26;--card-2:#1d2633;--text:#f7f7fb;--text-muted:#aab3c2;--border:rgba(255,255,255,.12);--hover:rgba(255,255,255,.08);--sidebar-bg:#0b1019;--sidebar-text:#e8edf7;--banner-bg:linear-gradient(135deg,#111827,#260608);--button-bg:var(--color-primary);--button-text:#fff;--input-bg:#0f1623;--input-text:#fff;--input-border:rgba(255,255,255,.18);--forum-bg:#101827;--shadow:0 18px 50px rgba(0,0,0,.35);--radius-sm:10px;--radius:18px;--radius-lg:28px;--space-1:6px;--space-2:10px;--space-3:16px;--space-4:24px;--space-5:34px;--font-xs:12px;--font-sm:14px;--font-base:16px;--font-lg:20px;--font-xl:32px;--transition:160ms ease}body.theme-dark{--bg:#080a0f;--bg-soft:#11131b;--card:#171923;--card-2:#202331;--text:#f5f7fb;--text-muted:#a7afbd;--sidebar-bg:#090b10;--banner-bg:linear-gradient(135deg,#12141f,#050507)}body.theme-light{--bg:#f5f7fb;--bg-soft:#fff;--card:#fff;--card-2:#eef2f8;--text:#111827;--text-muted:#5f6b7a;--border:rgba(16,24,40,.12);--hover:rgba(17,24,39,.06);--sidebar-bg:#fff;--sidebar-text:#111827;--banner-bg:linear-gradient(135deg,#ffffff,#eaf1ff);--input-bg:#fff;--input-text:#111827;--input-border:rgba(17,24,39,.2);--shadow:0 18px 45px rgba(17,24,39,.12)}body.theme-storm{--color-primary:#e62429;--color-secondary:#0ea5e9;--bg:#090b10;--bg-soft:#111827;--card:#151a24;--card-2:#202838;--text:#fff7f7;--text-muted:#b6bfcc;--sidebar-bg:#080c14;--banner-bg:radial-gradient(circle at top left,rgba(230,36,41,.35),transparent 34%),linear-gradient(135deg,#111827,#1a0507 70%)}body.theme-custom{--color-primary:#14b8a6;--color-secondary:#60a5fa;--bg:#0c1220;--card:#131b2c;--text:#f8fbff;--text-muted:#b4c0d0;--sidebar-bg:#0a1020;--banner-bg:linear-gradient(135deg,#0f172a,#0e7490)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:var(--font-base)}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.shell{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:32px 0}.shell-wide{width:min(1580px,calc(100% - 36px));margin:0 auto;padding:32px 0}.panel,.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--border);border-radius:14px;padding:11px 15px;background:var(--card-2);color:var(--text);font-weight:850;cursor:pointer;transition:var(--transition);white-space:nowrap}.btn:hover{transform:translateY(-1px);background:var(--hover)}.btn-primary,.btn-red{background:var(--button-bg);color:var(--button-text);border-color:transparent}.btn-danger{background:rgba(239,68,68,.15);color:#fecaca;border-color:rgba(239,68,68,.32)}.btn-soft{background:var(--card-2)}.badge{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);border-radius:999px;background:var(--card-2);padding:7px 11px;font-size:var(--font-sm);font-weight:800}.label{display:block;margin:0 0 8px;color:var(--text-muted);font-size:var(--font-sm);font-weight:900}.input,.select,.textarea{width:100%;border:1px solid var(--input-border);border-radius:14px;background:var(--input-bg);color:var(--input-text);padding:12px 14px;font:inherit;outline:none}.textarea{resize:vertical;min-height:92px}.input:focus,.select:focus,.textarea:focus{border-color:var(--color-secondary);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-secondary) 18%,transparent)}.alert{padding:14px 16px;border-radius:14px;margin:0 0 18px;font-weight:800}.alert-ok{background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.28);color:#bbf7d0}.alert-error{background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.28);color:#fecaca}.login-body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top,var(--card-2),var(--bg) 60%)}.login-card{width:min(440px,calc(100% - 32px));padding:32px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.login-logo{width:74px;height:74px;border-radius:24px;display:grid;place-items:center;margin:0 auto 16px;background:var(--color-primary);font-size:30px}.admin-layout{min-height:100vh;display:grid;grid-template-columns:290px minmax(0,1fr)}.admin-sidebar{position:sticky;top:0;height:100vh;overflow:auto;padding:20px;background:var(--sidebar-bg);color:var(--sidebar-text);border-right:1px solid var(--border);z-index:1100}.sidebar-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}.logo-mark{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--color-primary);color:#fff}.logo-title{font-weight:950;letter-spacing:-.04em}.sidebar-link{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:14px;color:var(--sidebar-text);font-weight:800;margin-bottom:5px}.sidebar-link:hover,.sidebar-link.is-active{background:var(--hover)}.admin-main{min-width:0;background:linear-gradient(180deg,var(--bg-soft),var(--bg));}.admin-topbar{position:sticky;top:0;z-index:900;background:color-mix(in srgb,var(--bg-soft) 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:14px 22px;display:flex;align-items:center;justify-content:space-between}.mobile-menu{display:none}.hero-banner{position:relative;min-height:320px;background:var(--banner-bg);border-bottom:1px solid var(--border);overflow:hidden}.hero-banner-inner{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:52px 0}.hero-title{font-size:clamp(42px,7vw,82px);line-height:.9;margin:0;font-weight:980;letter-spacing:-.075em}.hero-subtitle{max-width:720px;color:var(--text-muted);font-size:20px;line-height:1.55}.builder-zone[data-builder-zone]{outline:1px dashed transparent;outline-offset:5px}.builder-mode .builder-zone[data-builder-zone]{outline-color:var(--color-secondary)}.builder-toolbar{position:sticky;top:0;z-index:1200;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 16px;margin-bottom:18px;background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.builder-palette{display:flex;gap:8px;flex-wrap:wrap}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-section{padding:20px;margin-bottom:16px}.form-section-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.form-section-title{font-weight:950;font-size:19px;display:flex;gap:10px;align-items:center}.drag-handle{cursor:grab;border:1px solid var(--border);background:var(--card-2);border-radius:12px;padding:8px 10px;color:var(--text-muted)}.sortable-ghost{opacity:.45}.custom-field-toolbar{display:flex;gap:10px;margin-top:14px}.table-wrap{overflow:auto}.admin-table{width:100%;min-width:1120px;border-collapse:separate;border-spacing:0}.admin-table th,.admin-table td{padding:15px;border-bottom:1px solid var(--border);vertical-align:middle;text-align:left}.admin-table th{font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:var(--text-muted)}.actions-cell{width:350px}.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.champion-avatar{width:52px;height:52px;border-radius:16px;background:var(--card-2);display:grid;place-items:center;overflow:hidden}.champion-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}.champion-card{overflow:hidden}.champion-img{height:245px;background:var(--card-2);display:grid;place-items:center;overflow:hidden}.champion-img img{width:100%;height:100%;object-fit:cover}.admin-edit-float{position:fixed;right:18px;bottom:18px;z-index:1000}.dropzone{border:2px dashed var(--input-border);border-radius:22px;background:var(--input-bg);padding:28px;text-align:center;cursor:pointer;transition:var(--transition)}.dropzone.is-dragover{border-color:var(--color-secondary);background:color-mix(in srgb,var(--color-secondary) 12%,var(--input-bg))}.dropzone.is-error{border-color:var(--danger)}.thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:14px}.thumb-card{position:relative;background:var(--card-2);border:1px solid var(--border);border-radius:16px;padding:8px}.thumb-card img{width:100%;aspect-ratio:1;border-radius:12px;object-fit:cover}.thumb-meta{font-size:12px;color:var(--text-muted);margin-top:6px;overflow:hidden;text-overflow:ellipsis}.main-badge{position:absolute;top:12px;left:12px;background:var(--color-primary);color:#fff;border-radius:999px;padding:5px 8px;font-size:11px;font-weight:900}.thumb-remove{position:absolute;top:10px;right:10px}.forum-category{padding:20px;margin-bottom:18px}.forum-board{padding:14px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:16px}@media (max-width:900px){.admin-layout{grid-template-columns:1fr}.admin-sidebar{position:fixed;inset:0 auto 0 0;width:290px;transform:translateX(-102%);transition:var(--transition)}body.sidebar-open .admin-sidebar{transform:translateX(0)}.mobile-menu{display:inline-flex}.form-grid{grid-template-columns:1fr}.hero-banner-inner{padding:36px 0}.actions-cell{width:280px}}

/* Custom Tooltips for Builder palette */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: #0b0d19;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    white-space: normal;
    width: 220px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.15);
    opacity: 0;
    pointer-events: none;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
}
[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    border-width: 6px;
    border-style: solid;
    border-color: #0b0d19 transparent transparent transparent;
    opacity: 0;
    pointer-events: none;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
}
[data-tooltip]:hover::before, [data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* ══════════════════════════════════════════════════════════
   CANVAS EDITOR SYSTEM
   ══════════════════════════════════════════════════════════ */

.cms-canvas {
    position: relative;
    min-height: 600px;
    background: var(--bg-soft);
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color var(--transition);
    background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px);
    background-size: 20px 20px;
}
.cms-canvas.is-dragover {
    border-color: var(--color-secondary);
    background-color: color-mix(in srgb, var(--color-secondary) 5%, var(--bg-soft));
}
.cms-canvas-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 800;
    pointer-events: none;
    opacity: 0.6;
}
.cms-canvas-empty i {
    font-size: 42px;
    color: var(--color-secondary);
    opacity: 0.4;
}

/* ── Layer System ───────────────────────────────────── */
.cms-layer {
    position: absolute;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    cursor: default;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 100px;
}
.cms-layer:hover {
    border-color: color-mix(in srgb, var(--color-secondary) 50%, var(--border));
}
.cms-layer.is-selected {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary) 25%, transparent), 0 8px 24px rgba(0,0,0,0.3);
}
.cms-layer.is-container {
    min-height: 180px;
    border-style: dashed;
}

/* ── Layer Header & Handle ──────────────────────────── */
.cms-layer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
    user-select: none;
}
.cms-layer-type {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.cms-layer-drag-handle {
    cursor: grab;
    padding: 4px 6px;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 14px;
    transition: background var(--transition), color var(--transition);
}
.cms-layer-drag-handle:hover {
    background: var(--hover);
    color: var(--text);
}
.cms-layer-drag-handle:active {
    cursor: grabbing;
}
.cms-layer-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.cms-layer-actions button {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 6px;
    font-size: 11px;
    transition: all var(--transition);
}
.cms-layer-actions button:hover {
    background: var(--hover);
    color: var(--text);
}
.cms-layer-actions .btn-layer-delete:hover {
    color: var(--color-danger);
}

/* ── Layer Content Previews ─────────────────────────── */
.cms-layer-content {
    flex: 1;
    min-height: 30px;
}
.cms-layer-content .input,
.cms-layer-content .textarea,
.cms-layer-content .select {
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 8px;
}
.cms-layer-info {
    background: color-mix(in srgb, var(--color-secondary) 10%, var(--card));
    border: 1px solid color-mix(in srgb, var(--color-secondary) 25%, var(--border));
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 700;
}
.cms-layer-image-placeholder,
.cms-layer-gallery-placeholder {
    background: var(--card-2);
    border: 2px dashed var(--border);
    border-radius: 10px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-muted);
    font-weight: 800;
    font-size: 14px;
}
.cms-layer-rating {
    font-size: 22px;
    color: var(--color-accent);
    letter-spacing: 2px;
}

/* ── Resize Handle ──────────────────────────────────── */
.cms-layer-resize {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    cursor: se-resize;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}
.cms-layer:hover .cms-layer-resize {
    opacity: 0.6;
}
.cms-layer-resize:hover {
    opacity: 1 !important;
}

/* ── Nested Children Zone ───────────────────────────── */
.cms-layer-children {
    position: relative;
    min-height: 100px;
    border: 2px dashed color-mix(in srgb, var(--color-secondary) 20%, var(--border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg) 50%, transparent);
    margin-top: 6px;
}
.cms-layer-children-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    opacity: 0.5;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   BUILDER SIDEBAR
   ══════════════════════════════════════════════════════════ */

.builder-sidebar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.builder-sidebar-title {
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.builder-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-2);
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    cursor: grab;
    transition: all var(--transition);
    user-select: none;
}
.builder-item:hover {
    background: var(--hover);
    border-color: var(--color-secondary);
    transform: translateX(4px);
}
.builder-item:active {
    cursor: grabbing;
    opacity: 0.7;
}
.builder-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-primary) 15%, var(--card));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--color-primary);
    flex-shrink: 0;
}
.builder-label {
    flex: 1;
}

/* ── Builder Tooltips ───────────────────────────────── */
.builder-item[data-tooltip] {
    position: relative;
}
.builder-item[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) scale(0.95);
    background: var(--bg);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: normal;
    width: 220px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    border: 1px solid var(--border);
    opacity: 0;
    pointer-events: none;
    transition: all 0.15s ease;
    z-index: 9999;
}
.builder-item[data-tooltip]::after {
    content: '';
    position: absolute;
    left: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent var(--bg) transparent transparent;
    opacity: 0;
    pointer-events: none;
    transition: all 0.15s ease;
    z-index: 9999;
}
.builder-item[data-tooltip]:hover::before,
.builder-item[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* ══════════════════════════════════════════════════════════
   ACCORDION SYSTEM
   ══════════════════════════════════════════════════════════ */

.cms-accordion {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
}
.cms-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: none;
    color: var(--text);
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    transition: background var(--transition);
    text-align: left;
    gap: 12px;
}
.cms-accordion-header:hover {
    background: var(--hover);
}
.cms-accordion-header i {
    margin-right: 10px;
    color: var(--color-primary);
}
.cms-accordion-arrow {
    font-size: 14px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
.cms-accordion.is-collapsed .cms-accordion-arrow {
    transform: rotate(-90deg);
}
.cms-accordion-body {
    padding: 0 20px 20px;
    transition: max-height 0.3s ease;
}
.cms-accordion.is-collapsed .cms-accordion-body {
    display: none;
}

/* ══════════════════════════════════════════════════════════
   ADMIN MODULE FALLBACK PAGES
   ══════════════════════════════════════════════════════════ */

.admin-module-page {
    padding: 40px;
    text-align: center;
}
.admin-module-page h1 {
    font-size: 28px;
    font-weight: 900;
    margin: 0 0 16px;
    color: var(--color-primary);
}
.admin-module-page p {
    color: var(--text-muted);
    font-size: 16px;
    margin-bottom: 24px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Consolidated champion canvas/accordion repair */
.cms-canvas-container {
    width: 100%;
}
.form-section.cms-accordion {
    padding: 0;
}
.form-section.cms-accordion .cms-accordion-body {
    padding: 0 20px 20px;
}
.cms-accordion-header .form-section-title {
    margin: 0;
}
.cms-accordion-header .drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.cms-layer .layer-content {
    flex: 1;
    min-height: 30px;
}
.cms-layer-divider {
    border: 0;
    border-top: 2px solid var(--border);
    width: 100%;
    margin: 0;
}
.cms-layer-heading {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
    color: var(--text);
}
.cms-layer-link {
    color: var(--color-secondary);
    text-decoration: underline;
    font-weight: 800;
}
.cms-layer-children.is-dragover {
    border-color: var(--color-secondary);
    background: color-mix(in srgb, var(--color-secondary) 10%, transparent);
}
.cms-layer.is-container > .cms-layer-content {
    min-height: 70px;
}
.cms-layer.is-container {
    position: absolute;
}
.cms-layer-children .cms-layer {
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.builder-item[draggable="true"] {
    touch-action: none;
}
.builder-item[draggable="true"] .builder-label {
    pointer-events: none;
}
.admin-module-page {
    text-align: left;
}
.admin-module-page .admin-module-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Professional admin module switches and builder upgrade */
.sidebar-link.is-hidden,
.sidebar-link[hidden] {
    display: none !important;
}
.admin-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 26px;
    flex-wrap: wrap;
    border-left: 4px solid var(--color-primary);
    padding-left: 16px;
}
.admin-page-header h1 {
    margin: 0;
    font-size: 34px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0;
}
.admin-page-header p {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
}
.admin-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    border-radius: 14px;
    padding: 12px 17px;
    border: 1px solid var(--border);
    font-weight: 900;
    transition: all .3s ease-in-out;
}
.admin-action-button-primary {
    background: linear-gradient(135deg, var(--color-secondary), color-mix(in srgb, var(--color-secondary) 65%, #ffffff 10%));
    color: #fff;
    border-color: color-mix(in srgb, var(--color-secondary) 58%, transparent);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--color-secondary) 24%, transparent);
}
.module-manager-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: start;
}
.module-manager-panel {
    padding: 24px;
}
.module-manager-panel-header {
    display: flex;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
    margin-bottom: 18px;
}
.module-manager-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--card-2);
    font-size: 24px;
}
.module-manager-panel h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
}
.module-manager-panel p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}
.system-module-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.system-module-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--card-2) 82%, transparent);
    transition: all .3s ease-in-out;
}
.system-module-card.is-off {
    background: rgba(20, 20, 24, .72);
    border-color: rgba(255, 80, 80, .22);
}
.system-module-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.system-module-title-row strong {
    font-size: 16px;
}
.system-module-meta {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}
.system-module-meta code {
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px 6px;
}
.module-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.module-status.is-on {
    background: rgba(46, 213, 115, .16);
    color: #8fffc1;
    border: 1px solid rgba(46, 213, 115, .34);
}
.module-status.is-off {
    background: rgba(255, 47, 47, .16);
    color: #ff8a8a;
    border: 1px solid rgba(255, 47, 47, .34);
}
.module-toggle,
.toggle-switch,
.toggle-switch.off,
.module-toggle.off {
    position: relative;
    width: 74px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--border);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: all .3s ease-in-out;
    flex: 0 0 auto;
}
.system-module-card .module-toggle.is-off,
.system-module-card .module-toggle.off,
.module-toggle.toggle-off,
.toggle-switch.off {
    background: rgba(20, 20, 24, .72) !important;
    border: 1px solid rgba(255, 80, 80, .35) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.25) !important;
}
.system-module-card .module-toggle.is-on,
.module-toggle.toggle-on {
    background: linear-gradient(135deg, #16d86f, #05a94e) !important;
    border: 1px solid rgba(97, 255, 172, .58) !important;
    box-shadow: 0 0 22px rgba(34,197,94,.28), inset 0 1px 0 rgba(255,255,255,.34) !important;
}
.module-toggle .toggle-knob,
.toggle-switch .toggle-knob {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: all .3s ease-in-out;
    box-shadow: 0 6px 14px rgba(0,0,0,.32);
}
.system-module-card .module-toggle.is-off .toggle-knob,
.system-module-card .module-toggle.off .toggle-knob,
.module-toggle.toggle-off .toggle-knob,
.toggle-switch.off .toggle-knob {
    background: #ff2f2f !important;
    transform: translateX(0) !important;
}
.system-module-card .module-toggle.is-on .toggle-knob,
.module-toggle.toggle-on .toggle-knob {
    background: #ffffff !important;
    transform: translateX(38px) !important;
}
.module-toggle-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.9);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .08em;
    pointer-events: none;
    padding-left: 10px;
}
.module-toggle.is-on .module-toggle-label {
    padding-left: 0;
    padding-right: 20px;
    color: rgba(5,42,18,.88);
}
.module-toggle:disabled {
    opacity: .72;
    cursor: wait;
}
.module-empty-state {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
    padding: 20px;
    border: 1px dashed var(--border);
    border-radius: 14px;
}
.forum-admin-summary {
    padding: 22px;
    margin-bottom: 22px;
}
.forum-admin-summary h2 {
    margin: 12px 0 4px;
    font-size: 22px;
}
.forum-admin-summary p,
.forum-category-admin-header p,
.forum-board small {
    color: var(--text-muted);
}
.forum-category-admin-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

/* WYSIWYG editor */
.wysiwyg-shell {
    border: 1px solid var(--input-border);
    border-radius: 16px;
    background: var(--input-bg);
    overflow: visible;
}
.wysiwyg-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--card-2) 76%, transparent);
    border-radius: 16px 16px 0 0;
}
.wysiwyg-tool {
    min-width: 34px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card);
    color: var(--text);
    font-weight: 900;
    cursor: pointer;
    transition: all .18s ease;
}
.wysiwyg-tool:hover {
    border-color: var(--color-secondary);
    transform: translateY(-1px);
}
.wysiwyg-editor {
    min-height: 160px;
    padding: 14px 16px;
    color: var(--input-text);
    outline: none;
    line-height: 1.6;
    font-weight: 600;
}
.wysiwyg-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
}
.wysiwyg-editor a,
.rich-text-content a {
    color: var(--color-secondary);
    text-decoration: underline;
    font-weight: 800;
}
.wysiwyg-editor img,
.rich-text-content img {
    max-width: 100%;
    border-radius: 12px;
    border: 1px solid var(--border);
}
.wysiwyg-emoji-panel {
    display: grid;
    grid-template-columns: repeat(8, 34px);
    gap: 6px;
    padding: 10px;
    border-top: 1px solid var(--border);
    background: var(--card);
    border-radius: 0 0 16px 16px;
}
.wysiwyg-emoji-panel[hidden] {
    display: none;
}
.wysiwyg-emoji {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card-2);
    font-size: 20px;
    cursor: pointer;
    transition: all .18s ease;
}
.wysiwyg-emoji:hover {
    transform: scale(1.08);
    border-color: var(--color-secondary);
}
.rich-text-content :first-child {
    margin-top: 0;
}
.rich-text-content :last-child {
    margin-bottom: 0;
}

/* Full-color builder icons and giant champion canvas */
.builder-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.06) !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: inherit !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
}
.canvas-editor-page .canvas-editor-fullrow {
    grid-column: 1 / -1;
}
.canvas-editor-page .champion-form-column {
    min-width: 0;
}
.canvas-editor-page .cms-canvas-container,
.cms-canvas-container {
    width: 100%;
    max-width: none;
    min-height: 80vh;
    margin: 0;
    padding: 24px;
    display: block;
    background: rgba(5, 8, 14, .42);
    border: 1px solid rgba(120, 160, 255, .18);
    border-radius: 24px;
}
.canvas-editor-page .cms-canvas,
.cms-canvas {
    position: relative;
    width: 100%;
    min-height: max(800px, 80vh);
    height: auto;
    background: rgba(12, 16, 24, .92);
    border: 1px solid rgba(120, 160, 255, .25);
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 20px 60px rgba(0,0,0,.25);
    overflow: auto;
    background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 22px 22px;
}
@media (min-height: 900px) {
    .canvas-editor-page .cms-canvas,
    .cms-canvas {
        min-height: max(800px, calc(100vh - 220px));
    }
}
.cms-layer.is-selected {
    outline: 2px solid #4da3ff;
    box-shadow: 0 0 0 4px rgba(77, 163, 255, .18), 0 14px 34px rgba(0,0,0,.32);
}
.cms-canvas-empty {
    font-size: 17px;
    opacity: .78;
}

/* Page manager visual canvas */
.page-builder-page .page-builder-panel {
    padding: 24px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
}
.page-builder-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.page-builder-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.page-builder-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 950;
    text-transform: uppercase;
}
.page-builder-header p {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}
.page-builder-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}
.page-builder-palette {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
}
.page-builder-palette-title {
    font-size: 12px;
    font-weight: 950;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
}
.page-builder-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card-2);
    font-size: 13px;
    font-weight: 850;
    cursor: grab;
    user-select: none;
    transition: all .18s ease;
}
.page-builder-item:hover {
    border-color: var(--color-secondary);
    transform: translateX(3px);
}
.page-builder-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
}
.page-builder-canvas {
    position: relative;
    width: 100%;
    min-height: max(800px, 80vh);
    border-radius: 20px;
    border: 1px solid rgba(120, 160, 255, .24);
    background: rgba(10, 14, 22, .94);
    background-image: radial-gradient(circle, rgba(255,255,255,.085) 1px, transparent 1px);
    background-size: 22px 22px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 20px 55px rgba(0,0,0,.24);
    overflow: auto;
}
.page-builder-canvas.is-dragover {
    border-color: var(--color-secondary);
}
.page-builder-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 17px;
    font-weight: 900;
    pointer-events: none;
}
.page-builder-layer {
    position: absolute;
    min-width: 180px;
    background: rgba(21, 27, 38, .92);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
.page-builder-layer.is-selected {
    outline: 2px solid #4da3ff;
    box-shadow: 0 0 0 4px rgba(77,163,255,.18), 0 16px 38px rgba(0,0,0,.32);
}
.page-builder-layer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
    user-select: none;
}
.page-builder-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    font-weight: 900;
}
.page-builder-layer-title {
    flex: 1;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.page-builder-layer-actions {
    display: inline-flex;
    gap: 4px;
}
.page-builder-layer-actions button {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--card-2);
    color: var(--text);
    cursor: pointer;
}
.page-builder-layer-content .input,
.page-builder-layer-content .textarea,
.page-builder-layer-content .select {
    font-size: 13px;
    border-radius: 10px;
}
.page-builder-image-preview {
    margin-top: 9px;
    min-height: 150px;
    border-radius: 12px;
    border: 2px dashed var(--border);
    background: rgba(0,0,0,.22);
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-weight: 900;
}
.page-builder-children {
    position: relative;
    min-height: 160px;
    margin-top: 10px;
    border-radius: 12px;
    border: 2px dashed rgba(120, 160, 255, .26);
    background: rgba(0,0,0,.18);
}
.page-builder-children.is-dragover {
    border-color: var(--color-secondary);
    background: color-mix(in srgb, var(--color-secondary) 10%, transparent);
}
.page-builder-children-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 850;
    pointer-events: none;
}
.page-builder-resize {
    position: absolute;
    right: 8px;
    bottom: 5px;
    cursor: se-resize;
    color: var(--text-muted);
    font-size: 12px;
}
.legacy-blocks-panel {
    border: 1px dashed var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--card) 80%, transparent);
}
.legacy-blocks-panel summary {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}
.legacy-blocks-panel textarea {
    margin-top: 12px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
}
@media (max-width: 1200px) {
    .module-manager-grid,
    .page-builder-layout,
    .champion-builder-layout,
    .page-builder-page {
        grid-template-columns: 1fr !important;
    }
    #cmsBuilderSidebar {
        position: static !important;
    }
}

/* ── Section Layer Specific Styles ───────────────────── */
.cms-section-layer {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    transition: box-shadow var(--transition), border-color var(--transition);
}

.cms-section-layer.is-selected {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary), 0 12px 40px rgba(0,0,0,0.5) !important;
}

.cms-section-layer .cms-layer-header {
    background: color-mix(in srgb, var(--color-primary) 8%, var(--surface)) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 10px 14px !important;
    cursor: default;
}

.cms-section-layer .cms-section-body {
    flex: 1;
    overflow: auto;
    padding: 16px;
}

.cms-section-layer .cms-layer-children {
    border-top: 1px dashed var(--border);
    background: color-mix(in srgb, var(--surface) 95%, #fff);
    min-height: 60px;
    padding: 8px;
}

/* ── Collapsed Section Style ─────────────────────────── */
.cms-section-layer.is-collapsed {
    height: 46px !important;
    min-height: 46px !important;
    overflow: hidden !important;
}

.cms-section-layer.is-collapsed .cms-section-body,
.cms-section-layer.is-collapsed .cms-layer-children,
.cms-section-layer.is-collapsed .cms-layer-resize {
    display: none !important;
}

.cms-section-layer.is-collapsed .cms-section-collapse i {
    transform: rotate(-90deg);
}

/* ── Fullscreen override to let canvas occupy maximum viewport width ── */
.canvas-editor-page {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 10px;
}

.cms-canvas-container {
    width: 100%;
    min-height: 1200px;
    border-radius: 20px;
    background: var(--bg-soft);
    box-shadow: inset 0 4px 20px rgba(0,0,0,0.2);
    overflow: auto;
}

.cms-canvas {
    min-height: 1500px;
    width: 100%;
    min-width: 1200px;
    position: relative;
}

/* Professional visual editor upgrade: rich text, media, video and wide workspaces. */
.admin-page.canvas-editor-page,
.admin-page.champion-builder-page,
.admin-page.page-builder-page,
.canvas-editor-page {
    max-width: none;
    width: 100%;
}

.champion-builder-shell,
.page-builder-shell,
.canvas-builder-shell {
    width: 100%;
    max-width: 95vw;
    margin: 0 auto;
}

.page-builder-layout,
.champion-builder-shell,
.canvas-builder-shell {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.cms-canvas-container,
.page-builder-canvas-wrap,
.champion-builder-canvas-wrap {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.cms-canvas,
.page-builder-canvas,
.champion-canvas {
    position: relative;
    width: 100%;
    min-height: 85vh;
    box-sizing: border-box;
    overflow: auto;
}

.page-builder-canvas {
    background: rgba(12, 16, 24, .92);
    border: 1px solid rgba(120, 160, 255, .25);
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 20px 60px rgba(0,0,0,.25);
}

.cms-layer.is-focused,
.page-builder-layer.is-focused {
    outline: 2px solid #7dd3fc;
    box-shadow: 0 0 0 5px rgba(125, 211, 252, .16);
}

.text-block-container,
.cms-layer[data-layer-type="text"],
.cms-layer[data-layer-type="textarea"],
.cms-layer[data-layer-type="heading"],
.cms-layer[data-layer-type="info"],
.cms-rich-text,
.cms-section-body,
.cms-section-layer,
.gop-rich-text,
.page-builder-rich-text {
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.text-block-container,
.cms-rich-text,
.gop-rich-text,
.page-builder-rich-text {
    padding: 15px 20px;
}

.gop-rich-text {
    min-height: 56px;
    width: 100%;
    border-radius: 14px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.1);
    cursor: text;
}

.gop-rich-text h1,
.gop-rich-text h2,
.gop-rich-text h3,
.gop-rich-text p {
    margin-top: 0;
}

.gop-contextual-quill {
    width: 100%;
    position: relative;
    z-index: 50;
}

.gop-contextual-quill .ql-toolbar,
.gop-quill-shell .ql-toolbar {
    border-radius: 12px 12px 0 0;
    background: rgba(245, 247, 251, .96);
    border-color: rgba(15, 23, 42, .14);
}

.gop-contextual-quill .ql-container,
.gop-quill-shell .ql-container {
    border-radius: 0 0 12px 12px;
    background: #fff;
    color: #111827;
    border-color: rgba(15, 23, 42, .14);
}

.gop-contextual-quill .ql-editor,
.gop-quill-shell .ql-editor {
    min-height: 92px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.gop-quill-emoji-panel {
    display: grid;
    grid-template-columns: repeat(8, 34px);
    gap: 6px;
    margin-top: 8px;
    padding: 10px;
    border-radius: 14px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    width: max-content;
    max-width: 100%;
}

.gop-quill-emoji-panel[hidden] {
    display: none;
}

.gop-quill-emoji-panel button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-2);
    font-size: 20px;
    cursor: pointer;
}

.cms-media-object,
.page-builder-media-object {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 150px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    background: rgba(255,255,255,.055);
    color: var(--text);
    cursor: pointer;
    overflow: hidden;
}

.cms-media-object img,
.page-builder-media-object img {
    width: 100%;
    height: 100%;
    min-height: 150px;
    object-fit: cover;
}

.cms-layer-image-placeholder,
.cms-layer-video-placeholder,
.page-builder-media-placeholder {
    display: grid;
    place-items: center;
    gap: 7px;
    min-height: 150px;
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
}

.cms-layer-image-placeholder i,
.cms-layer-video-placeholder i {
    font-size: 32px;
    color: var(--color-secondary);
}

.cms-video-actions,
.page-builder-video-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.gop-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #05070d;
}

.gop-video-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.gop-responsive-video {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    background: #05070d;
}

.gop-media-modal[hidden] {
    display: none;
}

.gop-media-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
}

.gop-media-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .68);
    backdrop-filter: blur(10px);
}

.gop-media-panel {
    position: relative;
    width: min(980px, calc(100vw - 32px));
    max-height: calc(100vh - 44px);
    margin: 22px auto;
    overflow: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 30px 90px rgba(0,0,0,.45);
}

.gop-media-header,
.gop-media-footer,
.gop-media-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.gop-media-footer {
    border-top: 1px solid var(--border);
    border-bottom: 0;
    justify-content: flex-end;
}

.gop-media-tabs {
    justify-content: flex-start;
}

.gop-media-tabs button {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-2);
    color: var(--text);
    padding: 9px 13px;
    font-weight: 850;
    cursor: pointer;
}

.gop-media-tabs button.is-active {
    background: var(--color-secondary);
    border-color: transparent;
    color: #fff;
}

.gop-media-tab {
    display: none;
    padding: 18px;
}

.gop-media-tab.is-active {
    display: block;
}

.gop-media-status {
    padding: 0 18px;
    color: var(--text-muted);
    font-weight: 800;
}

.gop-media-status.is-error {
    color: #fecaca;
}

.gop-media-dropzone {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 240px;
    border: 2px dashed var(--input-border);
    border-radius: 18px;
    background: var(--input-bg);
    cursor: pointer;
    text-align: center;
    font-weight: 900;
}

.gop-media-dropzone.is-dragover {
    border-color: var(--color-secondary);
    background: color-mix(in srgb, var(--color-secondary) 14%, var(--input-bg));
}

.gop-media-library {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.gop-media-card {
    min-height: 150px;
    display: grid;
    gap: 8px;
    align-content: start;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card-2);
    color: var(--text);
    padding: 8px;
    cursor: pointer;
    text-align: left;
}

.gop-media-card.is-selected {
    outline: 2px solid var(--color-secondary);
}

.gop-media-card img,
.gop-media-video-tile {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    object-fit: cover;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.07);
    font-size: 34px;
}

.gop-media-card span {
    font-size: 12px;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

@media (min-width: 1920px) {
    .champion-builder-shell,
    .page-builder-shell,
    .canvas-builder-shell {
        max-width: 96vw;
        grid-template-columns: 280px minmax(0, 1fr);
    }
}

@media (min-width: 2560px) {
    .champion-builder-shell,
    .page-builder-shell,
    .canvas-builder-shell {
        max-width: 97vw;
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .cms-canvas,
    .page-builder-canvas,
    .champion-canvas {
        min-height: 88vh;
    }
}

@media (min-width: 3840px) {
    .champion-builder-shell,
    .page-builder-shell,
    .canvas-builder-shell {
        max-width: 98vw;
        grid-template-columns: 340px minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .page-builder-layout,
    .champion-builder-shell,
    .page-builder-shell,
    .canvas-builder-shell {
        grid-template-columns: 1fr;
    }

    .builder-sidebar,
    .page-builder-palette {
        position: relative;
        top: auto;
    }
}

/* Focused Champion Builder geometry fix */
body.champion-builder-page .admin-main > .shell-wide,
.shell-wide:has(.canvas-editor-page.champion-builder-page) {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}

.canvas-editor-page.champion-builder-page {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
}

.canvas-editor-page.champion-builder-page .champion-builder-shell,
.champion-builder-shell {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - 80px);
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: start;
    padding: 24px;
    box-sizing: border-box;
    margin: 0 !important;
}

.champion-builder-sidebar {
    width: 280px !important;
    min-width: 280px !important;
    position: sticky !important;
    top: 80px !important;
    z-index: 20 !important;
    align-self: start;
}

.champion-builder-main,
.canvas-editor-page.champion-builder-page .champion-builder-main,
.canvas-editor-page.champion-builder-page .canvas-editor-fullrow {
    min-width: 0;
    width: 100%;
    grid-column: auto !important;
    margin: 0 !important;
}

.canvas-editor-page.champion-builder-page .cms-canvas-viewport,
.canvas-editor-page.champion-builder-page .cms-canvas-container {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: calc(100vh - 180px) !important;
    height: auto !important;
    overflow: auto !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 24px !important;
}

.canvas-editor-page.champion-builder-page #cmsCanvas,
.canvas-editor-page.champion-builder-page .cms-canvas,
.canvas-editor-page.champion-builder-page .champion-canvas {
    position: relative;
    width: 100% !important;
    min-width: 1600px !important;
    min-height: 1200px !important;
    height: auto !important;
    box-sizing: border-box;
    overflow: visible !important;
}

.canvas-editor-page.champion-builder-page .cms-section-layer {
    min-width: 360px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    overflow: visible !important;
}

.canvas-editor-page.champion-builder-page .cms-section-layer .cms-layer-header {
    flex: 0 0 auto;
}

.canvas-editor-page.champion-builder-page .cms-section-layer .cms-section-body {
    flex: 1 1 auto;
    overflow: visible !important;
    padding: 18px;
}

.canvas-editor-page.champion-builder-page .cms-section-layer .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.canvas-editor-page.champion-builder-page .cms-section-layer textarea.textarea {
    min-height: 110px;
}

.canvas-editor-page.champion-builder-page .cms-layer-children {
    min-height: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.cms-overlay-drop-hint,
.canvas-editor-page.champion-builder-page .cms-layer-children-empty {
    display: none !important;
}

.cms-layer.is-drag-over .cms-overlay-drop-hint,
.cms-media-layer:hover .cms-overlay-drop-hint,
.cms-layer.is-container:hover > .cms-layer-children > .cms-overlay-drop-hint {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 1px dashed rgba(80, 180, 255, .35);
    border-radius: 12px;
    color: rgba(200, 230, 255, .65);
    font-size: 12px;
    margin: 8px;
}

@media (min-width: 1920px) {
    .canvas-editor-page.champion-builder-page #cmsCanvas,
    .canvas-editor-page.champion-builder-page .cms-canvas,
    .canvas-editor-page.champion-builder-page .champion-canvas {
        min-width: 1800px !important;
    }
}

@media (min-width: 2560px) {
    .canvas-editor-page.champion-builder-page #cmsCanvas,
    .canvas-editor-page.champion-builder-page .cms-canvas,
    .canvas-editor-page.champion-builder-page .champion-canvas {
        min-width: 2200px !important;
    }
}

@media (max-width: 900px) {
    .canvas-editor-page.champion-builder-page .champion-builder-shell {
        grid-template-columns: 1fr !important;
        padding: 16px;
    }

    .champion-builder-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        position: relative !important;
        top: auto !important;
    }
}