/* Cookie Portal demo pages 2026-09-02 */
.demo-body .auth-main,
.demo-main {
    min-height: 100vh;
    background: #eef4f8;
    color: #0f172a;
}

.demo-shell {
    width: min(1240px, calc(100% - 28px));
    margin: 0 auto;
    padding: 34px 0 56px;
    display: grid;
    gap: 18px;
}

.demo-hero,
.demo-panel,
.demo-card {
    border: 1px solid #dbe5ee;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .065);
}

.demo-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 22px;
}

.demo-hero h1 {
    margin: 4px 0 8px;
    color: #0f172a;
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.05;
    letter-spacing: 0;
}

.demo-hero p,
.demo-card p,
.demo-panel p {
    margin: 0;
    color: #526173;
    font-size: 13px;
    line-height: 1.55;
}

.demo-nav,
.demo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.demo-nav a,
.demo-actions a,
.demo-actions button,
.demo-card a,
.demo-card button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid #0f766e;
    border-radius: 7px;
    background: #0f766e;
    color: #ffffff;
    padding: 8px 12px;
    font: 850 12px/1.1 system-ui,-apple-system,Segoe UI,sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.demo-nav a.secondary,
.demo-actions .secondary,
.demo-card .secondary {
    border-color: #d8e2eb;
    background: #f8fafc;
    color: #0f172a;
}

.demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.demo-card {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 18px;
    min-height: 210px;
}

.demo-card span,
.demo-panel span {
    color: #0f766e;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.demo-card h2,
.demo-panel h2 {
    margin: 0;
    color: #0f172a;
    font-size: 19px;
    line-height: 1.15;
}

.demo-checks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.demo-checks article {
    border: 1px solid #dbe5ee;
    border-radius: 8px;
    background: #f8fafc;
    padding: 12px;
}

.demo-checks strong,
.demo-checks small {
    display: block;
}

.demo-checks strong {
    color: #0f172a;
    font-size: 14px;
}

.demo-checks small {
    margin-top: 4px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
}

.demo-panel {
    padding: 18px;
    display: grid;
    gap: 12px;
}

.demo-code {
    overflow: auto;
    border: 1px solid #dbe5ee;
    border-radius: 8px;
    background: #101827;
    color: #dbeafe;
    padding: 12px;
    font: 12px/1.5 Consolas,Monaco,monospace;
}

.demo-status-pill {
    display: inline-flex;
    width: max-content;
    border: 1px solid #99f6e4;
    border-radius: 999px;
    background: #ecfeff;
    color: #0f766e;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 900;
}

@media (max-width: 980px) {
    .demo-hero,
    .demo-grid,
    .demo-checks {
        grid-template-columns: 1fr;
    }
}


/* Demo status board 2026-09-02 */
.demo-status-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.demo-status-board article {
    border: 1px solid #dbe5ee;
    border-radius: 9px;
    background: #ffffff;
    padding: 13px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .045);
}

.demo-status-board span,
.demo-status-board strong,
.demo-status-board small {
    display: block;
    overflow-wrap: anywhere;
}

.demo-status-board span {
    color: #64748b;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.demo-status-board strong {
    margin-top: 5px;
    color: #0f172a;
    font-size: 17px;
    line-height: 1.15;
}

.demo-status-board strong[data-state="ok"] { color: #0f766e; }
.demo-status-board strong[data-state="warn"] { color: #b45309; }
.demo-status-board strong[data-state="wait"] { color: #475569; }

.demo-status-board small {
    margin-top: 5px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
}

.demo-code {
    max-height: 220px;
}

@media (max-width: 980px) {
    .demo-status-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .demo-status-board {
        grid-template-columns: 1fr;
    }
}


/* Demo matrix 2026-09-02 */
.demo-matrix {
    display: grid;
    grid-template-columns: minmax(260px, .65fr) minmax(0, 1.35fr);
    gap: 14px;
    align-items: start;
    border: 1px solid #dbe5ee;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .055);
    padding: 18px;
}

.demo-matrix > div {
    display: grid;
    gap: 7px;
}

.demo-matrix span {
    color: #0f766e;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.demo-matrix h2 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.15;
}

.demo-matrix p {
    margin: 0;
    color: #526173;
    font-size: 13px;
    line-height: 1.55;
}

.demo-matrix table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border: 1px solid #dbe5ee;
    border-radius: 8px;
    font-size: 12px;
}

.demo-matrix th,
.demo-matrix td {
    padding: 10px 11px;
    border-bottom: 1px solid #e5edf5;
    text-align: left;
    vertical-align: top;
}

.demo-matrix th {
    background: #f8fafc;
    color: #334155;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.demo-matrix tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 860px) {
    .demo-matrix {
        grid-template-columns: 1fr;
        overflow-x: auto;
    }

    .demo-matrix table {
        min-width: 640px;
    }
}


/* Privacy demo journey 2026-09-02 */
.demo-journey {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.demo-journey article {
    display: grid;
    gap: 10px;
    align-content: start;
    border: 1px solid #dbe5ee;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
    padding: 16px;
}

.demo-journey span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #ecfeff;
    color: #0f766e;
    font-size: 12px;
    font-weight: 950;
}

.demo-journey strong {
    color: #0f172a;
    font-size: 16px;
    line-height: 1.15;
}

.demo-journey p {
    margin: 0;
    color: #526173;
    font-size: 12px;
    line-height: 1.5;
}

.demo-journey a,
.demo-journey button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    min-height: 34px;
    border: 1px solid #0f766e;
    border-radius: 7px;
    background: #0f766e;
    color: #ffffff;
    padding: 8px 11px;
    font: 850 12px/1.1 system-ui,-apple-system,Segoe UI,sans-serif;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 1040px) {
    .demo-journey {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .demo-journey {
        grid-template-columns: 1fr;
    }
}


/* Demo center guidance polish 2026-09-02 */
.demo-body { background: #eef4f8; color: #142033; }
.demo-main { padding: 14px 0 28px; }
.demo-shell { width: min(1500px, calc(100% - 28px)); gap: 12px; }
.demo-hero { min-height: 112px; padding: 16px; border-radius: 10px; align-items: center; }
.demo-hero h1 { font-size: clamp(24px, 2.7vw, 36px); line-height: 1.08; margin-bottom: 7px; }
.demo-hero p { font-size: 12.5px; line-height: 1.5; max-width: 820px; }
.demo-nav { gap: 6px; }
.demo-nav a { min-height: 30px; padding: 7px 10px; border-radius: 7px; font-size: 10.8px; }
.demo-status-board,
.demo-checks,
.demo-grid { gap: 8px; }
.demo-status-board article,
.demo-checks article,
.demo-card,
.demo-panel,
.demo-matrix,
.demo-journey article { border-radius: 9px; box-shadow: 0 12px 30px rgba(15,23,42,.045); }
.demo-status-board article { padding: 11px; min-height: 76px; }
.demo-status-board strong { font-size: 15px; }
.demo-checks article { min-height: 78px; }
.demo-card { min-height: 168px; padding: 14px; }
.demo-card h2 { font-size: 16px; line-height: 1.16; }
.demo-card p { font-size: 12px; line-height: 1.45; }
.demo-install-panel { grid-template-columns: minmax(0,.72fr) minmax(420px,1fr); align-items: start; }
.demo-install-copy { display: grid; gap: 6px; }
.demo-install-copy h2 { font-size: 20px; line-height: 1.12; margin: 0; }
.demo-install-copy p { font-size: 12.5px; line-height: 1.5; max-width: 760px; }
.demo-install-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.demo-install-steps article { display: grid; gap: 4px; border: 1px solid #dbe5ef; border-radius: 8px; background: #f8fafc; padding: 10px; }
.demo-install-steps strong { color: #0f172a; font-size: 12px; line-height: 1.15; }
.demo-install-steps small { color: #526173; font-size: 10.8px; line-height: 1.35; }
.demo-install-panel .demo-code { grid-column: 1 / -1; max-height: 160px; font-size: 11px; }
.secondary-code { background: #172033; color: #ccfbf1; }
.demo-install-panel .demo-actions { grid-column: 1 / -1; }
.demo-matrix { padding: 14px; }
.demo-matrix h2 { font-size: 18px; }
.demo-matrix p,
.demo-matrix td { font-size: 11.5px; }
@media (max-width: 980px) {
  .demo-install-panel,
  .demo-install-steps { grid-template-columns: 1fr; }
}


/* Demo install route clarity 2026-09-02 */
.demo-route-panel, .blocking-install-guide { border-color: #99f6e4; background: linear-gradient(135deg,#f0fdfa,#fff 72%); }
.demo-route-panel h2, .blocking-install-guide h2 { margin: 0 0 4px; font-size: 19px; line-height: 1.12; color: #0f172a; }
.demo-route-panel p { margin: 0 0 10px; color: #526174; font-size: 12px; line-height: 1.45; }
.demo-route-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.demo-route-grid article { display: grid; gap: 4px; min-height: 88px; border: 1px solid #dbe5ef; border-radius: 8px; background: #fff; padding: 10px; }
.demo-route-grid strong { color: #0f172a; font-size: 12.5px; line-height: 1.18; }
.demo-route-grid small { color: #526174; font-size: 10.8px; line-height: 1.35; }
.demo-install-panel code, .demo-route-panel code { border-radius: 5px; background: #eef6ff; color: #1e3a8a; padding: 1px 4px; }
@media(max-width:1100px){ .demo-route-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:640px){ .demo-route-grid { grid-template-columns: 1fr; } }


/* Demo cockpit minimal UX 2026-09-02 */
.demo-command-board{grid-template-columns:repeat(4,minmax(0,1fr))!important}.demo-choice-panel{display:grid;grid-template-columns:minmax(240px,.55fr) minmax(0,1.45fr);gap:12px;align-items:stretch;border:1px solid #dbe5ef;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:0 14px 34px rgba(15,23,42,.045);padding:14px}.demo-choice-panel h2{margin:2px 0 5px;color:#0f172a;font-size:20px;line-height:1.12}.demo-choice-panel p{margin:0;color:#526174;font-size:12px;line-height:1.45}.demo-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.demo-choice-grid a,.demo-choice-grid button{display:grid;gap:4px;align-content:start;min-height:106px;border:1px solid #dbe5ef;border-radius:9px;background:#fff;color:inherit;padding:11px;text-align:left;text-decoration:none;font:inherit;cursor:pointer;box-shadow:none;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.demo-choice-grid a:hover,.demo-choice-grid button:hover{border-color:#14b8a6;box-shadow:0 15px 32px rgba(15,118,110,.08);transform:translateY(-1px)}.demo-choice-grid span{width:max-content;border:1px solid #99f6e4;border-radius:999px;background:#ecfdf5;color:#0f766e;padding:3px 6px;font-size:9px;font-weight:950;text-transform:uppercase}.demo-choice-grid strong{color:#0f172a;font-size:13px;line-height:1.18}.demo-choice-grid small{color:#526174;font-size:10.8px;line-height:1.35}.demo-collapsible-panel{display:block!important;padding:0!important;overflow:hidden}.demo-collapsible-panel>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:0 14px;cursor:pointer;list-style:none}.demo-collapsible-panel>summary::-webkit-details-marker{display:none}.demo-collapsible-panel>summary span{color:#0f766e;font-size:9.5px;font-weight:950;text-transform:uppercase}.demo-collapsible-panel>summary strong{color:#0f172a;font-size:13px;line-height:1.15}.demo-collapsible-panel>summary em{border:1px solid #dbe5ef;border-radius:999px;background:#fff;color:#475569;padding:5px 8px;font-size:10px;font-style:normal;font-weight:950}.demo-collapsible-panel[open]>summary{border-bottom:1px solid #dbe5ef;background:#fbfdff}.demo-collapsible-panel[open]>summary em{border-color:#99f6e4;background:#ecfdf5;color:#047857}.demo-collapsible-panel>div,.demo-collapsible-panel>table,.demo-collapsible-panel>.demo-install-copy,.demo-collapsible-panel>.demo-install-steps,.demo-collapsible-panel>.demo-code,.demo-collapsible-panel>.demo-actions{margin:12px 14px}.demo-collapsible-panel.demo-install-panel{grid-template-columns:1fr!important}.demo-collapsible-panel.demo-install-panel[open]{display:grid!important}.demo-route-panel{padding:14px!important}.demo-route-grid article{box-shadow:none}.demo-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.demo-card{box-shadow:0 10px 26px rgba(15,23,42,.04)!important}.demo-card a,.demo-card button{min-height:32px!important;font-size:11px!important}.demo-hero{background:linear-gradient(135deg,#0f172a,#143238)!important}.demo-hero h1{max-width:760px}.demo-hero p{color:#d8e3ee!important}.demo-hero code{background:rgba(255,255,255,.12)!important;color:#ccfbf1!important}@media(max-width:1120px){.demo-command-board,.demo-choice-grid,.demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.demo-choice-panel{grid-template-columns:1fr}}@media(max-width:640px){.demo-command-board,.demo-choice-grid,.demo-grid{grid-template-columns:1fr!important}.demo-collapsible-panel>summary{align-items:flex-start;flex-direction:column;padding:10px 14px}.demo-collapsible-panel>div,.demo-collapsible-panel>table,.demo-collapsible-panel>.demo-install-copy,.demo-collapsible-panel>.demo-install-steps,.demo-collapsible-panel>.demo-code,.demo-collapsible-panel>.demo-actions{margin:10px}}


/* Demo practice flow 2026-09-02 */
.demo-practice-flow{display:grid;grid-template-columns:minmax(260px,.58fr) minmax(0,1.42fr);gap:12px;align-items:stretch;border:1px solid #cfe4ee;border-radius:10px;background:linear-gradient(135deg,#ffffff,#f6fbfc 78%);box-shadow:0 14px 34px rgba(15,23,42,.045);padding:14px}.demo-practice-flow h2{margin:2px 0 5px;color:#0f172a;font-size:20px;line-height:1.12}.demo-practice-flow p{margin:0;color:#526174;font-size:12px;line-height:1.45;max-width:660px}.demo-practice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.demo-practice-grid a,.demo-practice-grid button{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 8px;align-content:start;min-height:118px;border:1px solid #dbe5ef;border-radius:9px;background:#fff;color:inherit;padding:11px;text-align:left;text-decoration:none;font:inherit;cursor:pointer;box-shadow:none;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.demo-practice-grid a:hover,.demo-practice-grid button:hover{border-color:#14b8a6;box-shadow:0 16px 34px rgba(15,118,110,.08);transform:translateY(-1px)}.demo-practice-grid span{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:#eef8fb;color:#0f766e;font-size:10px;font-weight:950}.demo-practice-grid strong{align-self:center;color:#0f172a;font-size:12.8px;line-height:1.18}.demo-practice-grid small{grid-column:1/-1;color:#526174;font-size:10.8px;line-height:1.35}.demo-checks{grid-template-columns:repeat(4,minmax(0,1fr))!important}.demo-checks article{min-height:66px!important;padding:10px!important;box-shadow:none!important}.demo-checks strong{font-size:12px!important}.demo-checks small{font-size:10.7px!important}@media(max-width:1120px){.demo-practice-flow{grid-template-columns:1fr}.demo-practice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.demo-practice-grid,.demo-checks{grid-template-columns:1fr!important}}


/* CP premium demo finish 2026-09-03 */
.demo-body,
.ecommerce-demo-body {
    background: #f3f4f0 !important;
    color: #171b16 !important;
    font-family: "Helvetica Neue", Inter, "Segoe UI", Arial, sans-serif !important;
    letter-spacing: 0 !important;
}
.demo-body *:not(code):not(pre),
.ecommerce-demo-body *:not(code):not(pre) {
    font-family: "Helvetica Neue", Inter, "Segoe UI", Arial, sans-serif !important;
    letter-spacing: 0 !important;
}
.demo-main {
    padding: 18px 0 32px !important;
}
.demo-shell {
    width: min(1480px, calc(100% - 36px)) !important;
    gap: 12px !important;
}
.demo-hero {
    min-height: 132px !important;
    border: 1px solid #1f2a24 !important;
    border-radius: 22px !important;
    background: radial-gradient(circle at 78% 20%, rgba(169,255,83,.18), transparent 26%), linear-gradient(135deg,#111 0%,#1d2420 58%,#143c35 100%) !important;
    box-shadow: 0 24px 64px rgba(17,17,17,.16) !important;
    overflow: hidden !important;
}
.demo-hero .eyebrow,
.demo-hero h1,
.demo-hero p {
    letter-spacing: 0 !important;
}
.demo-hero h1 {
    max-width: 760px !important;
    font-size: clamp(28px, 3vw, 44px) !important;
    font-weight: 820 !important;
    line-height: 1.02 !important;
}
.demo-hero p {
    max-width: 780px !important;
    color: rgba(255,255,255,.75) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
.demo-nav {
    align-self: center !important;
    justify-content: flex-end !important;
}
.demo-nav a {
    min-height: 34px !important;
    border-radius: 999px !important;
    border-color: rgba(255,255,255,.16) !important;
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    backdrop-filter: blur(12px) !important;
}
.demo-nav a.secondary {
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.78) !important;
}
.demo-nav a:hover,
.demo-nav a:focus {
    background: #a9ff53 !important;
    border-color: #a9ff53 !important;
    color: #111 !important;
}
.demo-status-board article,
.demo-choice-panel,
.demo-practice-flow,
.demo-checks article,
.demo-card,
.demo-panel,
.demo-matrix,
.demo-journey article,
.demo-route-panel {
    border-radius: 18px !important;
    border-color: #e0e5dd !important;
    background: #fff !important;
    box-shadow: 0 18px 42px rgba(30,33,29,.045) !important;
}
.demo-status-board article {
    min-height: 82px !important;
    padding: 12px !important;
}
.demo-status-board span,
.demo-checks strong,
.demo-card span,
.demo-panel span,
.demo-choice-grid span,
.demo-practice-grid span {
    letter-spacing: 0 !important;
}
.demo-status-board span,
.demo-choice-grid span,
.demo-practice-grid span,
.demo-card span,
.demo-panel > span,
.demo-route-panel > div > span {
    color: #51720a !important;
}
.demo-status-board strong {
    color: #111 !important;
    font-size: 16px !important;
    font-weight: 820 !important;
}
.demo-choice-panel,
.demo-practice-flow {
    grid-template-columns: minmax(260px,.52fr) minmax(0,1.48fr) !important;
    padding: 14px !important;
}
.demo-choice-panel h2,
.demo-practice-flow h2,
.demo-matrix h2,
.demo-install-copy h2,
.demo-route-panel h2 {
    color: #111 !important;
    font-size: 20px !important;
    line-height: 1.12 !important;
    font-weight: 820 !important;
}
.demo-choice-panel p,
.demo-practice-flow p,
.demo-matrix p,
.demo-install-copy p,
.demo-route-panel p {
    color: #5f695f !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}
.demo-choice-grid a,
.demo-choice-grid button,
.demo-practice-grid a,
.demo-practice-grid button,
.demo-route-grid article,
.demo-install-steps article {
    border-radius: 16px !important;
    border-color: #e0e5dd !important;
    background: #fbfcf8 !important;
    box-shadow: none !important;
}
.demo-choice-grid a:hover,
.demo-choice-grid button:hover,
.demo-practice-grid a:hover,
.demo-practice-grid button:hover {
    border-color: #a9ff53 !important;
    background: #f8fff0 !important;
    box-shadow: 0 14px 34px rgba(30,33,29,.055) !important;
}
.demo-choice-grid span,
.demo-practice-grid span {
    border-color: #a9ff53 !important;
    background: #f0ffd9 !important;
    color: #426600 !important;
}
.demo-choice-grid strong,
.demo-practice-grid strong,
.demo-card h2,
.demo-panel h2,
.demo-route-grid strong,
.demo-install-steps strong,
.demo-journey strong {
    color: #111 !important;
    font-weight: 820 !important;
}
.demo-choice-grid small,
.demo-practice-grid small,
.demo-checks small,
.demo-card p,
.demo-route-grid small,
.demo-install-steps small,
.demo-journey p {
    color: #5f695f !important;
}
.demo-checks {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
}
.demo-checks article {
    min-height: 72px !important;
    background: #fbfcf8 !important;
}
.demo-card {
    min-height: 164px !important;
}
.demo-card a,
.demo-card button,
.demo-actions a,
.demo-actions button,
.demo-journey a,
.demo-journey button {
    border-radius: 999px !important;
    border-color: #111 !important;
    background: #111 !important;
    color: #fff !important;
    font-weight: 850 !important;
}
.demo-card a.secondary,
.demo-card button.secondary,
.demo-actions .secondary,
.demo-journey .secondary {
    background: #fff !important;
    color: #111 !important;
}
.demo-code,
.stress-log {
    border-radius: 16px !important;
    background: #111 !important;
    color: #e8f3ef !important;
    border-color: #202820 !important;
}
.demo-collapsible-panel > summary {
    min-height: 54px !important;
}
.demo-collapsible-panel > summary strong {
    color: #111 !important;
    font-size: 13px !important;
}
.demo-collapsible-panel > summary em {
    border-radius: 999px !important;
    background: #f7f8f4 !important;
    color: #111 !important;
}
.demo-route-panel {
    background: linear-gradient(135deg,#fff,#f8fff0 92%) !important;
}
.demo-route-grid article {
    min-height: 96px !important;
}
@media(max-width:1120px){
    .demo-choice-panel,.demo-practice-flow { grid-template-columns: 1fr !important; }
    .demo-nav { justify-content: flex-start !important; }
}
@media(max-width:720px){
    .demo-shell { width: min(100% - 22px, 1480px) !important; }
    .demo-hero { border-radius: 18px !important; }
    .demo-checks,.demo-status-board,.demo-choice-grid,.demo-practice-grid,.demo-grid { grid-template-columns: 1fr !important; }
}


/* Guided demo product cockpit 2026-09-03 */
.demo-body,
.demo-main {
    font-family: Inter, "Helvetica Neue", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background: linear-gradient(180deg, #f7f8f4 0%, #eef2ed 100%);
}
.demo-shell {
    width: min(100% - 36px, 1480px);
    gap: 14px;
}
.demo-hero,
.demo-panel,
.demo-card,
.demo-guide-panel,
.demo-cms-panel {
    border-color: #e0e5dd;
    border-radius: 16px;
    box-shadow: 0 16px 42px rgba(30, 33, 29, .045);
}
.demo-hero {
    background: linear-gradient(135deg, #ffffff, #f8faf6 78%);
    padding: 20px;
}
.demo-hero h1 {
    font-size: clamp(26px, 2.4vw, 40px);
    font-weight: 820;
    letter-spacing: 0;
}
.demo-nav a,
.demo-actions a,
.demo-actions button,
.demo-card a,
.demo-card button,
.demo-guide-grid a,
.demo-guide-grid button {
    min-height: 34px;
    border-radius: 10px;
    border-color: #111;
    background: #111;
    color: #fff;
    font-size: 11.5px;
    font-weight: 820;
    box-shadow: none;
}
.demo-nav a.secondary,
.demo-actions .secondary,
.demo-card .secondary {
    border-color: #dfe5dc;
    background: #fff;
    color: #111;
}
.demo-nav a:hover,
.demo-actions a:hover,
.demo-actions button:hover,
.demo-card a:hover,
.demo-card button:hover,
.demo-guide-grid a:hover,
.demo-guide-grid button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(17, 17, 17, .09);
}
.demo-guide-panel,
.demo-cms-panel {
    display: grid;
    gap: 12px;
    border: 1px solid #e0e5dd;
    background: rgba(255,255,255,.9);
    padding: 16px;
}
.demo-guide-panel {
    grid-template-columns: minmax(260px, .45fr) minmax(0, 1fr);
    align-items: stretch;
}
.demo-guide-copy {
    display: grid;
    align-content: center;
    gap: 8px;
    border-radius: 14px;
    background: #111;
    color: #fff;
    padding: 18px;
}
.demo-guide-copy .eyebrow { color: #a9ff53; }
.demo-guide-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1.08;
}
.demo-guide-copy p:not(.eyebrow) {
    color: rgba(255,255,255,.72);
    font-size: 12.5px;
    line-height: 1.48;
}
.demo-guide-grid,
.demo-cms-grid,
.demo-route-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.demo-cms-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.demo-guide-grid article,
.demo-cms-grid article,
.demo-route-grid article {
    display: grid;
    align-content: start;
    gap: 6px;
    min-height: 132px;
    border: 1px solid #e0e5dd;
    border-radius: 14px;
    background: #fff;
    padding: 12px;
}
.demo-guide-grid span,
.demo-cms-panel .eyebrow,
.demo-card span,
.demo-panel span {
    color: #0f766e;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}
.demo-guide-grid strong,
.demo-cms-grid strong,
.demo-route-grid strong {
    color: #111827;
    font-size: 13.5px;
    line-height: 1.18;
}
.demo-guide-grid small,
.demo-cms-grid small,
.demo-route-grid small {
    color: #647066;
    font-size: 11.3px;
    line-height: 1.38;
}
.demo-guide-grid a,
.demo-guide-grid button {
    margin-top: auto;
    width: max-content;
    max-width: 100%;
    padding: 0 11px;
    text-decoration: none;
    cursor: pointer;
}
.demo-cms-panel > div:first-child {
    display: grid;
    gap: 6px;
    max-width: 760px;
}
.demo-cms-panel h2 {
    margin: 0;
    color: #111827;
    font-size: clamp(20px, 2vw, 30px);
}
.demo-cms-panel p:not(.eyebrow) {
    margin: 0;
    color: #647066;
    font-size: 12.5px;
    line-height: 1.48;
}
.demo-status-board article,
.demo-checks article {
    border-color: #e0e5dd;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
}
.demo-command-board article:first-child,
.demo-checks article:first-child {
    border-color: #c7f1b6;
    background: #f8fff0;
}
.demo-collapsible-panel summary {
    cursor: pointer;
    border-radius: 12px;
}
@media (max-width: 1160px) {
    .demo-guide-panel,
    .demo-guide-grid,
    .demo-cms-grid,
    .demo-route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .demo-shell { width: min(100% - 20px, 100%); }
    .demo-guide-panel,
    .demo-guide-grid,
    .demo-cms-grid,
    .demo-route-grid { grid-template-columns: 1fr; }
    .demo-guide-grid article,
    .demo-cms-grid article,
    .demo-route-grid article { min-height: 0; }
}

/* Product demo high-class UX 2026-09-03 */
.demo-body,.demo-main,.ecommerce-demo-body,.ecommerce-demo{font-family:"CP Open Sans","Helvetica Neue",Arial,sans-serif!important;background:linear-gradient(180deg,#f5f6f2 0%,#fbfbf8 48%,#eef3f1 100%)!important;color:#171817!important;}
.demo-body *,.ecommerce-demo-body *{letter-spacing:0!important;box-sizing:border-box!important;}
.demo-shell,.ecommerce-demo{width:min(100% - clamp(24px,3vw,56px),1680px)!important;margin-inline:auto!important;padding:16px 0 56px!important;display:grid!important;gap:12px!important;}
.demo-hero,.shop-hero{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:14px!important;min-height:102px!important;padding:18px 20px!important;border:1px solid #e2e7df!important;border-radius:12px!important;background:#fff!important;box-shadow:0 14px 38px rgba(22,25,22,.045)!important;}
.demo-hero h1,.shop-hero h1{max-width:960px!important;margin:0 0 6px!important;color:#111!important;font-size:clamp(28px,2.7vw,44px)!important;line-height:1.04!important;font-weight:820!important;}
.demo-hero p:not(.eyebrow),.shop-hero p:not(.eyebrow){max-width:880px!important;margin:0!important;color:#626b61!important;font-size:12.5px!important;line-height:1.5!important;}
.demo-nav{display:flex!important;justify-content:flex-end!important;gap:6px!important;flex-wrap:wrap!important;}
.demo-nav a{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:32px!important;padding:0 11px!important;border:1px solid #dfe5dc!important;border-radius:999px!important;background:#fff!important;color:#171817!important;text-decoration:none!important;font-size:11px!important;font-weight:800!important;box-shadow:none!important;}
.demo-nav a:not(.secondary),.demo-nav a:hover{border-color:#111!important;background:#111!important;color:#fff!important;}
.demo-status-board,.demo-checks,.shop-consent-board{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;}
.demo-status-board article,.demo-checks article,.shop-consent-board article{min-height:74px!important;padding:10px 12px!important;border:1px solid #e2e7df!important;border-radius:11px!important;background:#fff!important;box-shadow:0 8px 22px rgba(22,25,22,.025)!important;}
.demo-status-board span,.shop-consent-board span,.demo-checks strong,.demo-card span,.demo-panel span,.demo-guide-grid span,.demo-cms-panel .eyebrow,.shop-system-matrix .eyebrow{color:#647064!important;font-size:9.5px!important;font-weight:850!important;text-transform:uppercase!important;}
.demo-status-board strong,.shop-consent-board strong{display:block!important;margin-top:4px!important;color:#111!important;font-size:17px!important;line-height:1.1!important;font-weight:820!important;}
.demo-status-board small,.shop-consent-board small,.demo-checks small{display:block!important;margin-top:3px!important;color:#626b61!important;font-size:10.8px!important;line-height:1.35!important;}
.demo-choice-panel,.demo-practice-flow,.demo-guide-panel,.demo-cms-panel,.demo-panel,.demo-matrix,.shop-system-matrix{display:grid!important;gap:12px!important;padding:16px!important;border:1px solid #e2e7df!important;border-radius:12px!important;background:#fff!important;box-shadow:0 12px 34px rgba(22,25,22,.035)!important;}
.demo-choice-panel,.demo-practice-flow,.demo-guide-panel{grid-template-columns:minmax(280px,.42fr) minmax(0,1fr)!important;align-items:stretch!important;}
.demo-choice-panel>div:first-child,.demo-practice-flow>div:first-child,.demo-guide-copy{display:grid!important;align-content:center!important;gap:7px!important;padding:16px!important;border-radius:10px!important;background:#111!important;color:#fff!important;}
.demo-choice-panel h2,.demo-practice-flow h2,.demo-guide-copy h2{margin:0!important;color:#fff!important;font-size:clamp(20px,2vw,30px)!important;line-height:1.08!important;font-weight:820!important;}
.demo-choice-panel p:not(.eyebrow),.demo-practice-flow p:not(.eyebrow),.demo-guide-copy p:not(.eyebrow){margin:0!important;color:rgba(255,255,255,.7)!important;font-size:12px!important;line-height:1.45!important;}
.demo-choice-panel .eyebrow,.demo-practice-flow .eyebrow,.demo-guide-copy .eyebrow{color:#a9ff53!important;}
.demo-choice-grid,.demo-practice-grid,.demo-guide-grid,.demo-cms-grid,.demo-route-grid,.shop-system-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;}
.demo-cms-grid,.shop-system-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
.demo-choice-grid a,.demo-choice-grid button,.demo-practice-grid a,.demo-practice-grid button,.demo-guide-grid article,.demo-cms-grid article,.demo-route-grid article,.shop-system-grid article,.demo-card{display:grid!important;align-content:start!important;gap:6px!important;min-height:116px!important;padding:12px!important;border:1px solid #e2e7df!important;border-radius:11px!important;background:#fbfcf8!important;color:#171817!important;text-align:left!important;text-decoration:none!important;box-shadow:none!important;}
.demo-choice-grid a:hover,.demo-choice-grid button:hover,.demo-practice-grid a:hover,.demo-practice-grid button:hover,.demo-guide-grid article:hover,.demo-card:hover{border-color:#111!important;background:#fff!important;transform:none!important;box-shadow:0 12px 28px rgba(22,25,22,.06)!important;}
.demo-choice-grid span,.demo-practice-grid span{display:grid!important;place-items:center!important;width:28px!important;height:28px!important;border-radius:9px!important;border:1px solid #bdeca8!important;background:#f4ffe8!important;color:#426600!important;font-size:10px!important;font-weight:850!important;}
.demo-choice-grid strong,.demo-practice-grid strong,.demo-guide-grid strong,.demo-cms-grid strong,.demo-route-grid strong,.shop-system-grid strong,.demo-card h2{color:#111!important;font-size:14px!important;line-height:1.18!important;font-weight:820!important;}
.demo-choice-grid small,.demo-practice-grid small,.demo-guide-grid small,.demo-cms-grid small,.demo-route-grid small,.shop-system-grid small,.demo-card p{color:#626b61!important;font-size:11.2px!important;line-height:1.38!important;}
.demo-card a,.demo-card button,.demo-actions a,.demo-actions button,.demo-guide-grid a,.demo-guide-grid button,.shop-actions button,.shop-hero-actions button{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:max-content!important;max-width:100%!important;min-height:32px!important;margin-top:auto!important;padding:0 11px!important;border:1px solid #111!important;border-radius:999px!important;background:#111!important;color:#fff!important;font-size:10.8px!important;font-weight:850!important;text-decoration:none!important;cursor:pointer!important;}
.demo-card .secondary,.demo-actions .secondary,.shop-hero-actions .ghost,.shop-actions .ghost{border-color:#dfe5dc!important;background:#fff!important;color:#111!important;}
.demo-code{border-radius:10px!important;background:#111!important;color:#eff7f2!important;border:1px solid #222822!important;font-size:11px!important;line-height:1.5!important;}
.shop-grid{display:grid!important;grid-template-columns:minmax(320px,.8fr) minmax(320px,.9fr) minmax(300px,.75fr) minmax(320px,.9fr)!important;gap:10px!important;}
.product-panel,.checkout-panel,.widget-panel,.event-panel{border:1px solid #e2e7df!important;border-radius:12px!important;background:#fff!important;box-shadow:0 12px 34px rgba(22,25,22,.04)!important;padding:16px!important;}
.product-panel h2,.checkout-panel h2,.widget-panel h2,.event-panel h2,.shop-system-matrix h2{margin:0!important;color:#111!important;font-size:22px!important;line-height:1.08!important;font-weight:820!important;}
.product-media{min-height:170px!important;border-radius:12px!important;background:linear-gradient(135deg,#111,#2d332b)!important;display:grid!important;place-items:center!important;color:#a9ff53!important;font-weight:850!important;}
.event-panel ol{max-height:320px!important;overflow:auto!important;padding-left:18px!important;font-size:11.5px!important;color:#445044!important;}
@media(max-width:1260px){.demo-choice-panel,.demo-practice-flow,.demo-guide-panel,.shop-grid{grid-template-columns:1fr!important}.demo-choice-grid,.demo-practice-grid,.demo-guide-grid,.demo-cms-grid,.demo-route-grid,.shop-system-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.demo-status-board,.demo-checks,.shop-consent-board{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:700px){.demo-shell,.ecommerce-demo{width:min(100% - 20px,100%)!important}.demo-hero,.shop-hero{grid-template-columns:1fr!important}.demo-nav{justify-content:flex-start!important}.demo-choice-grid,.demo-practice-grid,.demo-guide-grid,.demo-cms-grid,.demo-route-grid,.shop-system-grid,.demo-status-board,.demo-checks,.shop-consent-board{grid-template-columns:1fr!important}.demo-choice-panel>div:first-child,.demo-practice-flow>div:first-child,.demo-guide-copy{padding:14px!important}.product-media{min-height:130px!important}}
/* Demo flow studio polish 2026-09-04 */
.demo-body,
.ecommerce-demo-body {
    background: #f3f5f1 !important;
    color: #171817 !important;
}
.demo-shell,
.ecommerce-demo {
    width: min(100% - 40px, 1680px) !important;
    gap: 12px !important;
    padding: 18px 0 30px !important;
}
.demo-hero,
.shop-hero {
    min-height: 128px !important;
    padding: 20px !important;
    border: 1px solid #e0e6dc !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 18px 50px rgba(17,17,17,.055) !important;
}
.demo-hero h1,
.shop-hero h1 {
    max-width: 860px !important;
    color: #111 !important;
    font-size: clamp(28px, 3vw, 48px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
}
.demo-hero p:not(.eyebrow),
.shop-hero p:not(.eyebrow) {
    max-width: 780px !important;
    color: #5f6a5d !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}
.demo-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: flex-end !important;
}
.demo-nav a {
    min-height: 32px !important;
    padding: 0 12px !important;
    border: 1px solid #e0e6dc !important;
    border-radius: 999px !important;
    background: #fbfcf8 !important;
    color: #222721 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}
.demo-nav a:not(.secondary),
.demo-nav a:hover {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
}
.demo-status-board,
.shop-consent-board {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
}
.demo-status-board article,
.shop-consent-board article,
.demo-checks article {
    min-height: 72px !important;
    padding: 12px !important;
    border: 1px solid #e0e6dc !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 10px 26px rgba(17,17,17,.025) !important;
}
.demo-status-board span,
.shop-consent-board span,
.demo-checks strong {
    color: #667064 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}
.demo-status-board strong,
.shop-consent-board strong {
    color: #111 !important;
    font-size: 17px !important;
    line-height: 1.1 !important;
}
.demo-status-board small,
.shop-consent-board small,
.demo-checks small {
    color: #697367 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
}
.demo-choice-panel,
.demo-practice-flow,
.demo-guide-panel,
.demo-cms-panel,
.demo-panel,
.demo-route-panel,
.shop-system-matrix {
    border-radius: 18px !important;
    border-color: #e0e6dc !important;
    box-shadow: 0 14px 34px rgba(17,17,17,.035) !important;
}
.demo-choice-grid a,
.demo-choice-grid button,
.demo-practice-grid a,
.demo-practice-grid button,
.demo-guide-grid article,
.demo-cms-grid article,
.demo-route-grid article,
.shop-system-grid article,
.demo-card {
    min-height: 104px !important;
    border-radius: 14px !important;
    background: #fff !important;
}
.demo-choice-grid strong,
.demo-practice-grid strong,
.demo-guide-grid strong,
.demo-cms-grid strong,
.demo-route-grid strong,
.shop-system-grid strong,
.demo-card h2 {
    font-size: 14px !important;
    line-height: 1.16 !important;
}
.demo-matrix,
.demo-collapsible-panel {
    border: 1px solid #e0e6dc !important;
    border-radius: 18px !important;
    background: #fff !important;
    overflow: hidden !important;
}
.demo-collapsible-panel summary {
    min-height: 46px !important;
    padding: 10px 14px !important;
    background: #fbfcf8 !important;
    cursor: pointer !important;
}
.demo-code {
    max-height: 180px !important;
    overflow: auto !important;
    border-radius: 14px !important;
}
@media(max-width:980px){
    .demo-status-board,
    .shop-consent-board { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .demo-hero,
    .shop-hero { grid-template-columns: 1fr !important; }
    .demo-nav { justify-content: flex-start !important; }
}
@media(max-width:640px){
    .demo-shell,
    .ecommerce-demo { width: min(100% - 20px, 100%) !important; }
    .demo-status-board,
    .shop-consent-board { grid-template-columns: 1fr !important; }
}
/* Demo command center clarity pass 2026-09-07 */
.demo-body .auth-main,
.demo-main,
.ecommerce-demo-body {
    background: #f3f6f1 !important;
    color: #101214 !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.demo-shell,
.ecommerce-demo {
    width: min(1420px, calc(100% - 28px)) !important;
    gap: 14px !important;
}
.demo-hero,
.demo-panel,
.demo-card,
.demo-status-board article,
.demo-matrix,
.demo-choice-panel,
.demo-guide-panel,
.demo-cms-panel,
.demo-practice-flow,
.shop-hero,
.shop-grid > article,
.shop-consent-board article,
.shop-system-matrix {
    border: 1px solid #d7dfd7 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 16px 38px rgba(17, 24, 39, .045) !important;
}
.demo-hero,
.shop-hero {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 22px !important;
    background: linear-gradient(135deg, #fff, #f6f9f4) !important;
}
.demo-hero h1,
.shop-hero h1 {
    color: #101214 !important;
    font-size: clamp(30px, 4vw, 56px) !important;
    line-height: .98 !important;
    font-weight: 950 !important;
    max-width: 920px !important;
}
.demo-hero p,
.shop-hero p,
.demo-panel p,
.demo-card p,
.demo-card small,
.demo-panel small,
.shop-system-grid small,
.shop-consent-board small {
    color: #495463 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
.demo-nav,
.demo-actions,
.shop-hero-actions,
.shop-actions {
    gap: 7px !important;
}
.demo-nav a,
.demo-actions a,
.demo-actions button,
.demo-card a,
.demo-card button,
.shop-actions .button,
.shop-hero-actions .button {
    min-height: 38px !important;
    border-radius: 999px !important;
    border: 1px solid #101214 !important;
    background: #101214 !important;
    color: #fff !important;
    font-weight: 900 !important;
    padding: 9px 14px !important;
}
.demo-nav a.secondary,
.demo-actions .secondary,
.demo-card .secondary,
.shop-hero-actions .button.ghost,
.shop-actions .button.ghost {
    background: #fff !important;
    color: #101214 !important;
    border-color: #d7dfd7 !important;
}
.demo-status-board,
.demo-checks,
.demo-choice-grid,
.demo-practice-grid,
.demo-guide-grid,
.demo-cms-grid,
.demo-route-grid,
.shop-consent-board {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}
.demo-choice-grid a,
.demo-choice-grid button,
.demo-practice-grid a,
.demo-practice-grid button,
.demo-guide-grid article,
.demo-cms-grid article,
.demo-route-grid article,
.demo-checks article,
.shop-system-grid article {
    border: 1px solid #d7dfd7 !important;
    border-radius: 12px !important;
    background: #fbfcfa !important;
    color: #101214 !important;
    min-height: 118px !important;
    padding: 14px !important;
    box-shadow: none !important;
}
.demo-choice-grid strong,
.demo-practice-grid strong,
.demo-guide-grid strong,
.demo-cms-grid strong,
.demo-route-grid strong,
.demo-card h2,
.demo-panel h2,
.shop-system-matrix h2,
.product-panel h2,
.checkout-panel h2,
.widget-panel h2,
.event-panel h2 {
    color: #101214 !important;
    font-weight: 950 !important;
}
.demo-status-board strong,
.demo-checks strong,
.shop-consent-board strong {
    color: #101214 !important;
    font-size: 16px !important;
    font-weight: 950 !important;
}
.demo-card {
    min-height: 190px !important;
    padding: 18px !important;
}
.demo-code,
.stress-log {
    border-color: #1f2937 !important;
    border-radius: 12px !important;
    background: #0b111a !important;
    color: #edf7ff !important;
    font: 12.5px/1.55 Consolas, Monaco, "Courier New", monospace !important;
}
.demo-collapsible-panel > summary {
    border-radius: 12px !important;
    background: #f7f9f5 !important;
    color: #101214 !important;
    padding: 14px !important;
}
.demo-matrix table {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #d7dfd7 !important;
}
.demo-matrix th {
    background: #101214 !important;
    color: #fff !important;
}
.shop-grid {
    grid-template-columns: minmax(320px, 1fr) minmax(300px, .82fr) minmax(300px, .82fr) minmax(320px, 1fr) !important;
    gap: 12px !important;
}
.product-media {
    background: radial-gradient(circle at 20% 18%, #9aff53 0 9%, transparent 28%), linear-gradient(135deg, #101214, #00766f) !important;
    color: #fff !important;
    border-radius: 14px !important;
}
@media (max-width: 1180px) {
    .demo-status-board,
    .demo-checks,
    .demo-choice-grid,
    .demo-practice-grid,
    .demo-guide-grid,
    .demo-cms-grid,
    .demo-route-grid,
    .shop-consent-board,
    .shop-system-grid,
    .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .demo-matrix,
    .shop-system-matrix { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
    .demo-hero,
    .shop-hero,
    .demo-status-board,
    .demo-checks,
    .demo-choice-grid,
    .demo-practice-grid,
    .demo-guide-grid,
    .demo-cms-grid,
    .demo-route-grid,
    .shop-consent-board,
    .shop-system-grid,
    .shop-grid { grid-template-columns: 1fr !important; }
}