/* 16.11.57: Console, a storefront theme in the spirit of developer tools: near-black with an emerald accent, thin borders,
   a faint grid and a green glow at the top, monospace labels, numbered steps, the names as a bordered table.
   Read after store.css while Console is the active theme. Its colours are its own unless Customize says "Your colours". */

:root[data-theme="console"] {
    --bg: #fcfcfc; --surface: #ffffff; --soft: #f4f4f4; --text: #171717; --muted: #6b6b6b; --line: #e4e4e4;
    --brand: #1f9d68; --accent: #1f9d68; --accent-2: #18855a; --accent-text: #ffffff; --eye: #1f9d68;
    --deep: #f4f4f4; --deep-2: #ffffff; --deep-line: #e4e4e4; --deep-text: #171717; --deep-muted: #6b6b6b; --eye-deep: #1f9d68;
    --ok-bg: #e7f8ef; --ok-text: #126b45; --err-bg: #fde8e8; --err-text: #a11d1d;
    --radius: 10px; --radius-sm: 6px; --shadow: none;
    --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-head: Inter, system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --cs-grid: rgba(0, 0, 0, .05); --cs-glow: rgba(31, 157, 104, .18);
}
:root[data-theme="console"][data-mode="dark"] {
    --bg: #121212; --surface: #171717; --soft: #1c1c1c; --text: #ededed; --muted: #a0a0a0; --line: #2e2e2e;
    --brand: #3ecf8e; --accent: #3ecf8e; --accent-2: #5bdba2; --accent-text: #0b0b0b; --eye: #3ecf8e;
    --deep: #0f0f0f; --deep-2: #171717; --deep-line: #2e2e2e; --deep-text: #ededed; --deep-muted: #a0a0a0; --eye-deep: #3ecf8e;
    --ok-bg: #12301f; --ok-text: #8fe3b9; --err-bg: #3a1a1b; --err-text: #ffaaa3;
    --cs-grid: rgba(255, 255, 255, .045); --cs-glow: rgba(62, 207, 142, .22);
}
@media (prefers-color-scheme: dark) {
    :root[data-theme="console"][data-mode="auto"] {
        --bg: #121212; --surface: #171717; --soft: #1c1c1c; --text: #ededed; --muted: #a0a0a0; --line: #2e2e2e;
        --brand: #3ecf8e; --accent: #3ecf8e; --accent-2: #5bdba2; --accent-text: #0b0b0b; --eye: #3ecf8e;
        --deep: #0f0f0f; --deep-2: #171717; --deep-line: #2e2e2e; --deep-text: #ededed; --deep-muted: #a0a0a0; --eye-deep: #3ecf8e;
        --ok-bg: #12301f; --ok-text: #8fe3b9; --err-bg: #3a1a1b; --err-text: #ffaaa3;
        --cs-grid: rgba(255, 255, 255, .045); --cs-glow: rgba(62, 207, 142, .22);
    }
}

/* the bar: a thin line under it */
[data-theme="console"] .st-bar { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 85%, transparent); position: relative; z-index: 3; }
[data-theme="console"] .st-barin { padding-top: 12px; padding-bottom: 12px; }
[data-theme="console"] .st-logo { font-size: 16px; font-weight: 600; }
[data-theme="console"] .st-nav { font-size: 14px; gap: 20px; }
[data-theme="console"] .st-nav a { opacity: .75; font-weight: 500; }
[data-theme="console"] .st-nav a:hover, [data-theme="console"] .st-nav a[aria-current] { opacity: 1; color: var(--text); }

/* type: monospace for labels, names and numbers */
[data-theme="console"] .st-eye { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }
[data-theme="console"] .st-eye::before { content: "// "; opacity: .6; }
[data-theme="console"] .st-dn { font-family: var(--mono); font-weight: 500; }
[data-theme="console"] .st-h1 { font-weight: 600; letter-spacing: -.035em; font-size: clamp(38px, 6vw, 68px); line-height: 1.04;
    background: linear-gradient(180deg, var(--text) 35%, color-mix(in srgb, var(--text) 45%, var(--bg))); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="console"] .st-h2 { font-weight: 600; letter-spacing: -.025em; }
[data-theme="console"] .st-meta, [data-theme="console"] .st-price, [data-theme="console"] .st-bigprice { font-family: var(--mono); }

/* the hero: a faint grid fading out, a green glow at the top */
[data-theme="console"] .st-hero { background-image: linear-gradient(var(--cs-grid) 1px, transparent 1px), linear-gradient(90deg, var(--cs-grid) 1px, transparent 1px);
    background-size: 56px 56px; background-position: center top; -webkit-mask-image: none; }
:root[data-theme="console"] .st-hero::before { inset: 0; right: 0; width: auto; height: 100%; transform: none; border-radius: 0; opacity: 1;
    background: radial-gradient(50% 45% at 50% 0%, var(--cs-glow), transparent 75%), linear-gradient(transparent 55%, var(--bg)); }
[data-theme="console"] .st-heroin { padding-top: 90px; padding-bottom: 110px; }
[data-theme="console"] .st-search { border-radius: var(--radius-sm); background: var(--surface); }
[data-theme="console"] .st-search input { font-family: var(--mono); font-size: 14px; }

/* buttons: small, green, dark text */
[data-theme="console"] .st-btn { min-height: 38px; padding: 0 14px; font-size: 14px; font-weight: 500; border-radius: var(--radius-sm); }
[data-theme="console"] .st-btn-line { background: var(--soft); border-color: var(--line); }
[data-theme="console"] .st-btn-line:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--line)); }

/* cards: borders, no shadows; the accent shows on hover */
[data-theme="console"] .st-card, [data-theme="console"] .st-fc, [data-theme="console"] .st-ncard { background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
[data-theme="console"] .st-fc:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
[data-theme="console"] .st-fc-dark { background: var(--surface); color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
[data-theme="console"] .st-fc-dark .st-cat { color: var(--accent); }
[data-theme="console"] .st-why { margin-top: -40px; }
[data-theme="console"] .st-three > div { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--soft); }
[data-theme="console"] .st-ico { color: var(--accent); }

/* steps: 01, 02, 03 */
[data-theme="console"] .st-band { background: var(--deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
[data-theme="console"] .st-step { border: 1px solid var(--deep-line); border-radius: var(--radius); background: var(--deep-2); }
[data-theme="console"] .st-n { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--eye-deep); }
[data-theme="console"] .st-n::before { content: "0"; }

/* the figures */
[data-theme="console"] .st-counts { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 26px 10px; }
[data-theme="console"] .st-counts strong { font-family: var(--mono); font-weight: 500; color: var(--accent); }

/* the names: a bordered table */
[data-theme="console"] .st-list { border: 1px solid var(--line); border-radius: var(--radius); padding: 0; background: var(--surface); overflow: hidden; }
[data-theme="console"] .cs-row { padding: 12px 18px; gap: 6px 16px; }
[data-theme="console"] .cs-row:hover { background: var(--soft); }
[data-theme="console"] .cs-row .st-dn { font-size: 15px; color: var(--text); }
[data-theme="console"] .cs-row .st-dn:hover { color: var(--accent); }
[data-theme="console"] .cs-row .st-cat { font-family: var(--mono); font-size: 12px; color: var(--muted); }
[data-theme="console"] .cs-row .st-price { font-size: 15px; font-weight: 500; }
:root[data-theme="console"][data-th-names="cards"] .cs-row { border: 1px solid var(--line); background: var(--surface); }
:root[data-theme="console"][data-th-names="cards"] .st-list { border: 0; background: none; overflow: visible; }

/* contact and footer */
[data-theme="console"] .st-contact { background: radial-gradient(40% 90% at 100% 0%, var(--cs-glow), transparent 70%), var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); }
[data-theme="console"] .st-contact .st-muted, [data-theme="console"] .st-contact p { color: var(--muted); }
[data-theme="console"] .st-contact .st-btn { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
[data-theme="console"] .st-foot { border-top: 1px solid var(--line); background: var(--bg); }
[data-theme="console"] .st-prose code, [data-theme="console"] .st-prose pre { font-family: var(--mono); }

@media (max-width: 600px) {
    [data-theme="console"] .st-heroin { padding-top: 50px; padding-bottom: 80px; }
    [data-theme="console"] .st-hero { background-size: 40px 40px; }
}