/*
 * ZINE interface style — a loud neo-brutalist / riso-print revamp.
 *
 * Everything in this file is scoped to html.design-zine, which is toggled by
 * styles/design-mode.js from the browser-local preference chosen in
 * settings.php. Legacy, refined and edition modes are never touched.
 *
 * The look: warm cream paper, near-black ink, riso violet + acid yellow +
 * hot pink, chunky 2px borders, hard offset shadows, zero border radius,
 * uppercase display headlines and monospaced metadata.
 *
 * Like design-edition.css, this file first remaps the shared base tokens that
 * drive api/header.php, then layers component treatments, and finally remaps
 * the local palettes of the bespoke dark pages (market.php, burn.php,
 * styleshopnew.php) so every page adopts the zine look.
 */

/* ---------------------------------------------------------------
 * 1. TOKENS
 * --------------------------------------------------------------- */
html.design-zine {
    --zn-paper:      #f4efe2;
    --zn-paper-deep: #eae3cf;
    --zn-panel:      #fffcf2;
    --zn-ink:        #17121e;
    --zn-ink-soft:   #4c4458;
    --zn-violet:     #5526d9;
    --zn-violet-deep:#3b1a99;
    --zn-acid:       #f4e409;
    --zn-pink:       #ff2e88;
    --zn-green:      #0b7a3e;
    --zn-red:        #c81f44;
    --zn-amber:      #a55a00;

    --zn-display: "Archivo Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
    --zn-ui: "Space Grotesk", "Trebuchet MS", system-ui, -apple-system, sans-serif;
    --zn-mono: "Space Mono", ui-monospace, "Courier New", monospace;

    --zn-border: 2px solid var(--zn-ink);
    --zn-offset: 4px 4px 0 var(--zn-ink);
    --zn-offset-lg: 7px 7px 0 var(--zn-ink);

    /* Shared base tokens consumed by api/header.php components */
    --bg: var(--zn-paper);
    --surface: var(--zn-panel);
    --text: var(--zn-ink);
    --text-muted: var(--zn-ink-soft);
    --accent: var(--zn-violet);
    --accent-hover: var(--zn-violet-deep);
    --radius: 0px;
    --radius-sm: 0px;
    --shadow-sm: 2px 2px 0 var(--zn-ink);
    --shadow: var(--zn-offset);
    --shadow-lg: var(--zn-offset-lg);
    --transition: .12s steps(2, end);

    /* Neutral ramp: warm ink-on-paper greys */
    --gray-50:  #faf6ea;
    --gray-100: #f1ebda;
    --gray-200: var(--zn-ink);   /* most borders reference gray-200 */
    --gray-300: #9d94a8;
    --gray-400: #6f6580;
    --gray-500: var(--zn-ink-soft);
    --gray-600: #3e3749;
    --gray-700: #2c2536;
    --gray-800: var(--zn-ink);
    --gray-900: var(--zn-ink);

    /* Emerald ramp → riso violet so hardcoded emerald accents follow along */
    --emerald-50:  #efe9ff;
    --emerald-100: #e2d7ff;
    --emerald-200: #c4b0f7;
    --emerald-300: #9a7cec;
    --emerald-400: #7a52e4;
    --emerald-500: var(--zn-violet);
    --emerald-600: var(--zn-violet);
    --emerald-700: var(--zn-violet-deep);
    --emerald-800: #2c1373;
    --emerald-900: #200e54;
}

/* ---------------------------------------------------------------
 * 2. BASE
 * --------------------------------------------------------------- */
html.design-zine body {
    font-family: var(--zn-ui);
    color: var(--zn-ink);
    background:
        radial-gradient(color-mix(in srgb, var(--zn-ink) 9%, transparent) 1px, transparent 1.5px),
        var(--zn-paper);
    background-size: 26px 26px, auto;
}

html.design-zine body::before {
    background: none;
}

html.design-zine ::selection {
    background: var(--zn-acid);
    color: var(--zn-ink);
}

html.design-zine h1,
html.design-zine h2,
html.design-zine h3 {
    font-family: var(--zn-display);
    letter-spacing: -.01em;
}

html.design-zine a {
    color: var(--zn-violet);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

html.design-zine a:hover {
    color: var(--zn-violet-deep);
}

/* Loud but consistent keyboard focus everywhere */
html.design-zine a:focus-visible,
html.design-zine button:focus-visible,
html.design-zine input:focus-visible,
html.design-zine select:focus-visible,
html.design-zine textarea:focus-visible,
html.design-zine [tabindex]:focus-visible {
    outline: 3px solid var(--zn-violet);
    outline-offset: 2px;
    border-radius: 0;
}

/* ---------------------------------------------------------------
 * 3. NAV — ink masthead bar with acid active stamps
 * --------------------------------------------------------------- */
html.design-zine {
    --em-bg: var(--zn-ink);
    --em-surface: var(--zn-ink);
    --em-surface-2: #241c30;
    --em-border: rgba(255,255,255,.28);
    --em-border-hover: var(--zn-acid);
    --em-emerald: var(--zn-acid);
    --em-emerald-dim: #b6aa14;
    --em-emerald-glow: rgba(244,228,9,.2);
    --em-text: #fdfaef;
    --em-text-muted: #b7aec6;
    --em-gold: var(--zn-pink);
    --font-brand: var(--zn-display);
    --font-ui: var(--zn-ui);
}

html.design-zine .site-nav {
    background: var(--zn-ink);
    border-bottom: 3px solid var(--zn-ink);
    box-shadow: 0 3px 0 var(--zn-acid);
}

html.design-zine .nav-brand-name {
    font-family: var(--zn-display);
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #fdfaef;
}

html.design-zine .nav-brand-name em {
    color: var(--zn-acid);
    font-style: normal;
}

html.design-zine .nav-brand:hover .nav-brand-gem svg {
    filter: none;
    transform: rotate(-8deg);
}

html.design-zine .nav-link,
html.design-zine .nav-dropdown-toggle {
    color: #cfc7dd;
    border-radius: 0;
    font-family: var(--zn-mono);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

html.design-zine .nav-link:hover,
html.design-zine .nav-dropdown-toggle:hover,
html.design-zine .nav-dropdown.open .nav-dropdown-toggle {
    color: var(--zn-ink);
    background: var(--zn-acid);
}

html.design-zine .nav-link.active,
html.design-zine .nav-dropdown-toggle.active {
    color: var(--zn-ink);
    background: var(--zn-acid);
    box-shadow: 2px 2px 0 var(--zn-pink);
}

html.design-zine .nav-dropdown-menu {
    background: var(--zn-panel);
    border: var(--zn-border);
    border-radius: 0;
    box-shadow: var(--zn-offset);
}

html.design-zine .nav-dropdown-menu .nav-link {
    color: var(--zn-ink);
    border-radius: 0;
}

html.design-zine .nav-dropdown-menu .nav-link:hover,
html.design-zine .nav-dropdown-menu .nav-link.active {
    background: var(--zn-acid);
    box-shadow: none;
}

html.design-zine .nav-badge-new {
    background: var(--zn-pink);
    color: var(--zn-ink);
    border: 1px solid var(--zn-ink);
    border-radius: 0;
    transform: rotate(-4deg);
}

html.design-zine .nav-notification-badge {
    background: var(--zn-pink);
    color: var(--zn-ink);
    border-radius: 0;
    border: 1px solid var(--zn-ink);
    box-shadow: none;
    font-family: var(--zn-mono);
}

html.design-zine .nav-balance-card {
    background: transparent;
    border: 1px solid rgba(253,250,239,.4);
    border-radius: 0;
}

html.design-zine .nav-balance-chip {
    color: #fdfaef;
    font-family: var(--zn-mono);
}

html.design-zine .nav-link--create {
    color: var(--zn-acid) !important;
    border: 1px solid var(--zn-acid);
    border-radius: 0;
}

html.design-zine .nav-link--create:hover {
    color: var(--zn-ink) !important;
    background: var(--zn-acid) !important;
}

html.design-zine .nav-link--logout:hover {
    color: var(--zn-ink) !important;
    background: var(--zn-pink) !important;
}

html.design-zine .nav-toggle {
    border: 1px solid rgba(253,250,239,.4);
    border-radius: 0;
}

html.design-zine .hamburger-line {
    background: #fdfaef;
}

html.design-zine .nav-drawer {
    background: var(--zn-ink);
    border-left: 3px solid var(--zn-acid);
}

html.design-zine .nav-drawer-label {
    color: var(--zn-acid);
    font-family: var(--zn-mono);
}

html.design-zine .nav-spotlight-trigger {
    border-radius: 0;
    font-family: var(--zn-mono);
}

/* News ticker → acid tape strip */
html.design-zine .news-ticker {
    background: var(--zn-acid);
    color: var(--zn-ink);
    border-bottom: 3px solid var(--zn-ink);
    font-family: var(--zn-mono);
    font-weight: 700;
    text-transform: uppercase;
}

html.design-zine .news-ticker::before {
    background: var(--zn-ink);
    color: var(--zn-acid);
    font-family: var(--zn-mono);
}

html.design-zine .news-ticker-link,
html.design-zine .news-ticker-item {
    color: var(--zn-ink);
}

html.design-zine .news-ticker-link:hover {
    color: var(--zn-violet-deep);
    background: transparent;
    text-decoration: underline;
    text-decoration-thickness: 3px;
}

html.design-zine .reading-progress {
    background: var(--zn-pink);
    border-bottom: 2px solid var(--zn-ink);
    height: 6px;
}

html.design-zine .site-message-banner {
    background: var(--zn-pink);
    color: var(--zn-ink);
    border-bottom: 3px solid var(--zn-ink);
}

html.design-zine .site-message-banner__label {
    border: 1px solid var(--zn-ink);
    border-radius: 0;
    font-family: var(--zn-mono);
}

/* ---------------------------------------------------------------
 * 4. BUTTONS — flat fills, thick borders, hard offsets
 * --------------------------------------------------------------- */
html.design-zine .btn,
html.design-zine .settings-btn,
html.design-zine .feedback-btn,
html.design-zine .notif-clear-btn,
html.design-zine .news-load-more {
    font-family: var(--zn-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 0;
    border: var(--zn-border);
    box-shadow: var(--zn-offset);
    background: var(--zn-panel);
    color: var(--zn-ink);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

html.design-zine .btn:hover,
html.design-zine .settings-btn:hover,
html.design-zine .feedback-btn:hover,
html.design-zine .notif-clear-btn:hover,
html.design-zine .news-load-more:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--zn-ink);
}

html.design-zine .btn:active,
html.design-zine .settings-btn:active,
html.design-zine .feedback-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--zn-ink);
}

html.design-zine .btn-primary,
html.design-zine .settings-btn,
html.design-zine .feedback-btn,
html.design-zine .btn-equip {
    background: var(--zn-acid);
    color: var(--zn-ink);
    border-color: var(--zn-ink);
}

html.design-zine .btn-primary:hover,
html.design-zine .settings-btn:hover,
html.design-zine .feedback-btn:hover {
    background: var(--zn-acid);
    color: var(--zn-ink);
    border-color: var(--zn-ink);
}

html.design-zine .btn-outline,
html.design-zine .btn-secondary {
    background: var(--zn-panel);
    color: var(--zn-ink);
    border-color: var(--zn-ink);
}

html.design-zine .btn-outline:hover,
html.design-zine .btn-secondary:hover {
    background: var(--zn-panel);
    color: var(--zn-violet-deep);
    border-color: var(--zn-ink);
}

html.design-zine .btn-ghost {
    border: 2px dashed var(--zn-ink-soft);
    border-radius: 0;
    box-shadow: none;
    color: var(--zn-ink-soft);
    font-family: var(--zn-mono);
    text-transform: uppercase;
}

html.design-zine .btn-ghost:hover {
    background: var(--zn-paper-deep);
    color: var(--zn-ink);
    border-color: var(--zn-ink);
    transform: none;
    box-shadow: none;
}

html.design-zine .btn-google {
    background: var(--zn-panel);
}

/* ---------------------------------------------------------------
 * 5. FORMS
 * --------------------------------------------------------------- */
html.design-zine .form-input,
html.design-zine .form-textarea,
html.design-zine .search-input,
html.design-zine .filter-select,
html.design-zine .settings-select,
html.design-zine .settings-textarea,
html.design-zine .settings-input,
html.design-zine .feedback-textarea,
html.design-zine .comment-textarea,
html.design-zine .rich-editor,
html.design-zine .site-banner-admin-tools textarea {
    background: var(--zn-panel);
    border: var(--zn-border);
    border-radius: 0;
    color: var(--zn-ink);
    font-family: var(--zn-ui);
}

html.design-zine .form-input:focus,
html.design-zine .form-textarea:focus,
html.design-zine .search-input:focus,
html.design-zine .filter-select:focus,
html.design-zine .settings-select:focus,
html.design-zine .settings-textarea:focus,
html.design-zine .settings-input:focus,
html.design-zine .feedback-textarea:focus,
html.design-zine .comment-textarea:focus {
    border-color: var(--zn-ink);
    box-shadow: 3px 3px 0 var(--zn-violet);
    background: #fff;
}

html.design-zine .form-label,
html.design-zine .filter-label,
html.design-zine .settings-title + .settings-help,
html.design-zine .form-hint {
    color: var(--zn-ink-soft);
}

html.design-zine .form-label {
    font-family: var(--zn-mono);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .75rem;
}

/* ---------------------------------------------------------------
 * 6. PANELS — every boxy surface becomes a pasted-on cutout
 * --------------------------------------------------------------- */
html.design-zine .card,
html.design-zine .settings-card,
html.design-zine .profile-section,
html.design-zine .login-card,
html.design-zine .news-toolbar,
html.design-zine .news-class-filter,
html.design-zine .article-view,
html.design-zine .edit-section,
html.design-zine .feedback-card,
html.design-zine .culture-card,
html.design-zine .sotw-card,
html.design-zine .economy-card,
html.design-zine .trade-card,
html.design-zine .mail-panel,
html.design-zine .mail-modal-card,
html.design-zine .notif-item,
html.design-zine .comments-section {
    background: var(--zn-panel);
    border: var(--zn-border);
    border-radius: 0;
    box-shadow: var(--zn-offset);
}

html.design-zine .card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--zn-offset-lg);
}

/* Home hero → acid poster block */
html.design-zine .hero-card {
    background: var(--zn-acid);
    color: var(--zn-ink);
    border: var(--zn-border);
    border-radius: 0;
    box-shadow: var(--zn-offset-lg);
}

html.design-zine .hero-card::before {
    background: radial-gradient(circle, rgba(255,46,136,.35) 0%, transparent 68%);
}

html.design-zine .hero-card h1 {
    font-family: var(--zn-display);
    text-transform: uppercase;
}

html.design-zine .hero-card .username {
    color: var(--zn-violet-deep);
}

html.design-zine .hero-subtitle {
    color: var(--zn-ink);
    opacity: 1;
    font-weight: 500;
}

html.design-zine .hero-card .btn-primary {
    background: var(--zn-ink);
    color: var(--zn-acid);
    border-color: var(--zn-ink);
    box-shadow: 4px 4px 0 var(--zn-pink);
}

html.design-zine .hero-card .btn-outline {
    background: var(--zn-panel);
    color: var(--zn-ink);
    border-color: var(--zn-ink);
}

html.design-zine .admin-banner {
    background: var(--zn-ink);
    border: var(--zn-border);
    border-radius: 0;
    box-shadow: 4px 4px 0 var(--zn-pink);
}

html.design-zine .admin-badge {
    background: var(--zn-pink);
    color: var(--zn-ink);
    border-radius: 0;
    border: 1px solid var(--zn-ink);
    box-shadow: none;
    transform: rotate(-3deg);
    font-family: var(--zn-mono);
}

/* ---------------------------------------------------------------
 * 7. PAGE HEADERS — headline with a marker swipe
 * --------------------------------------------------------------- */
html.design-zine .page-title {
    font-family: var(--zn-display);
    text-transform: uppercase;
    letter-spacing: -.01em;
    color: var(--zn-ink);
}

html.design-zine .page-title-icon {
    color: var(--zn-ink);
    background: var(--zn-acid);
    border: var(--zn-border);
    padding: 3px;
    width: 34px;
    height: 34px;
    transform: rotate(-4deg);
}

html.design-zine .page-header {
    border-bottom: 3px solid var(--zn-ink);
    padding-bottom: .9rem;
    position: relative;
}

html.design-zine .page-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 120px;
    height: 4px;
    background: var(--zn-pink);
}

html.design-zine .page-subtitle {
    font-family: var(--zn-mono);
    color: var(--zn-ink-soft);
}

/* ---------------------------------------------------------------
 * 8. NEWS FEED
 * --------------------------------------------------------------- */
html.design-zine .news-card {
    background: var(--zn-panel);
    border: var(--zn-border);
    border-radius: 0;
    box-shadow: var(--zn-offset);
    overflow: visible;
}

html.design-zine .news-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: var(--zn-offset-lg);
}

/* Alternate cards tilt ever so slightly, like pasted clippings */
html.design-zine .news-list > .news-card:nth-child(odd)  { rotate: -0.35deg; }
html.design-zine .news-list > .news-card:nth-child(even) { rotate:  0.35deg; }
html.design-zine .news-list > .news-card:hover { rotate: 0deg; }

html.design-zine .news-card-thumb {
    border-bottom: var(--zn-border);
    background: var(--zn-paper-deep);
}

html.design-zine .news-card:hover .news-card-thumb img {
    transform: none;
}

html.design-zine .news-card-title {
    font-family: var(--zn-display);
    text-transform: uppercase;
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--zn-ink);
}

html.design-zine .news-card-meta,
html.design-zine .article-meta,
html.design-zine .meta-date,
html.design-zine .meta-category {
    font-family: var(--zn-mono);
}

html.design-zine .meta-id {
    background: var(--zn-ink);
    color: var(--zn-acid);
    border-radius: 0;
    font-family: var(--zn-mono);
}

html.design-zine .meta-category {
    background: var(--zn-acid);
    color: var(--zn-ink);
    border: 1px solid var(--zn-ink);
    border-radius: 0;
    padding: 0 .35rem;
    text-transform: uppercase;
}

html.design-zine .news-card-excerpt {
    color: var(--zn-ink-soft);
}

html.design-zine .news-card-tags {
    font-family: var(--zn-mono);
    color: var(--zn-violet);
}

html.design-zine .search-icon { color: var(--zn-ink); }

html.design-zine .skeleton-card {
    background: var(--zn-panel);
    border: 2px dashed var(--zn-ink-soft);
    border-radius: 0;
    box-shadow: none;
}

html.design-zine .skeleton {
    background: var(--zn-paper-deep);
    border-radius: 0;
}

html.design-zine .spinner {
    border: 3px solid var(--zn-paper-deep);
    border-top-color: var(--zn-pink);
    border-radius: 50%;
}

html.design-zine .news-empty-icon { filter: grayscale(1); }

html.design-zine .news-page-indicator {
    font-family: var(--zn-mono);
}

html.design-zine .class-choice-card {
    background: var(--zn-ink);
    color: var(--zn-paper);
    border: var(--zn-border);
    border-radius: 0;
    box-shadow: var(--zn-offset);
    font-family: var(--zn-mono);
    text-transform: uppercase;
}

html.design-zine .class-choice-card:hover {
    background: var(--zn-violet-deep);
    transform: translate(-2px, -2px);
    box-shadow: var(--zn-offset-lg);
}

html.design-zine .class-choice-card.is-active {
    background: var(--zn-acid);
    color: var(--zn-ink);
    border-color: var(--zn-ink);
    box-shadow: 3px 3px 0 var(--zn-pink);
}

/* Edition front-page structures render as plain zine sections when reused */
html.design-zine .edition-section-label {
    font-family: var(--zn-mono);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--zn-ink);
    border-bottom: 3px solid var(--zn-ink);
}

/* ---------------------------------------------------------------
 * 9. ARTICLE VIEW + COMMENTS
 * --------------------------------------------------------------- */
html.design-zine .article-hero {
    border-bottom: var(--zn-border);
    background: var(--zn-paper-deep);
}

html.design-zine .article-title {
    font-family: var(--zn-display);
    text-transform: uppercase;
    font-size: clamp(1.5rem, 4vw, 2.3rem);
    line-height: 1.12;
}

html.design-zine .article-content {
    color: var(--zn-ink);
    font-size: 1.02rem;
}

html.design-zine .article-content a {
    color: var(--zn-violet);
    text-decoration-thickness: 2px;
}

html.design-zine .article-content img {
    border: var(--zn-border);
    box-shadow: var(--zn-offset);
    border-radius: 0;
}

html.design-zine .breadcrumb-link {
    font-family: var(--zn-mono);
    text-transform: uppercase;
    color: var(--zn-ink-soft);
}

html.design-zine .breadcrumb-link:hover { color: var(--zn-violet); }

html.design-zine .comments-title {
    font-family: var(--zn-display);
    text-transform: uppercase;
}

html.design-zine .comment {
    background: var(--zn-panel);
    border: var(--zn-border);
    border-radius: 0;
    box-shadow: 3px 3px 0 var(--zn-ink);
}

html.design-zine .comment-list > .comment:nth-child(odd)  { rotate: -0.3deg; }
html.design-zine .comment-list > .comment:nth-child(even) { rotate:  0.3deg; }

html.design-zine .comment-author {
    font-family: var(--zn-mono);
    font-weight: 700;
    color: var(--zn-violet-deep);
}

html.design-zine .comment-date {
    font-family: var(--zn-mono);
    color: var(--zn-ink-soft);
}

html.design-zine .comment-replies {
    border-left: 3px solid var(--zn-pink);
}

/* ---------------------------------------------------------------
 * 10. LANDING / LOGIN (index.php)
 * --------------------------------------------------------------- */
html.design-zine .landing-title {
    font-family: var(--zn-display);
    text-transform: uppercase;
    color: var(--zn-ink);
}

html.design-zine .landing-title-accent {
    color: var(--zn-violet);
    background: var(--zn-acid);
    padding: 0 .18em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

html.design-zine .landing-desc {
    color: var(--zn-ink-soft);
}

html.design-zine .login-card-subtitle {
    font-family: var(--zn-mono);
    color: var(--zn-ink-soft);
}

html.design-zine .login-divider-text {
    font-family: var(--zn-mono);
    background: var(--zn-panel);
}

html.design-zine .alert {
    border-radius: 0;
    border: var(--zn-border);
    font-weight: 600;
}

html.design-zine .alert-success,
html.design-zine .settings-alert--ok,
html.design-zine .feedback-alert--ok {
    background: #dff3e4;
    color: var(--zn-green);
    border: 2px solid var(--zn-green);
    border-radius: 0;
}

html.design-zine .alert-error,
html.design-zine .settings-alert--error,
html.design-zine .feedback-alert--error {
    background: #fbe3e8;
    color: var(--zn-red);
    border: 2px solid var(--zn-red);
    border-radius: 0;
}

/* ---------------------------------------------------------------
 * 11. SETTINGS — chunky selectable style cards
 * --------------------------------------------------------------- */
html.design-zine .settings-title {
    font-family: var(--zn-display);
    text-transform: uppercase;
}

html.design-zine .settings-help {
    color: var(--zn-ink-soft);
}

html.design-zine .settings-link {
    color: var(--zn-violet);
}

html.design-zine .settings-choice label {
    background: var(--zn-panel);
    border: var(--zn-border);
    border-radius: 0;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
}

html.design-zine .settings-choice label:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--zn-offset);
}

html.design-zine .settings-choice label:has(input:checked) {
    background: var(--zn-acid);
    box-shadow: var(--zn-offset);
}

html.design-zine .settings-choice input[type="radio"] {
    accent-color: var(--zn-ink);
}

html.design-zine .settings-choice span {
    color: var(--zn-ink-soft);
}

html.design-zine .settings-choice label:has(input:checked) span {
    color: var(--zn-ink);
}

/* ---------------------------------------------------------------
 * 12. PROFILES / LEADERBOARD
 * --------------------------------------------------------------- */
html.design-zine .profile-card {
    background: var(--zn-panel);
    border: var(--zn-border);
    border-radius: 0;
    box-shadow: var(--zn-offset);
}

html.design-zine .profile-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--zn-offset-lg);
}

html.design-zine .profile-card--you {
    outline: 3px solid var(--zn-pink);
    outline-offset: 3px;
}

html.design-zine .profile-card-banner {
    border-bottom: var(--zn-border);
}

html.design-zine .profile-card-avatar,
html.design-zine .profile-hero-avatar {
    border: var(--zn-border) !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 var(--zn-ink);
}

html.design-zine .profile-card-name {
    font-family: var(--zn-display);
}

html.design-zine .profile-you-badge {
    background: var(--zn-pink);
    color: var(--zn-ink);
    border: 1px solid var(--zn-ink);
    border-radius: 0;
    transform: rotate(-3deg);
    font-family: var(--zn-mono);
}

html.design-zine .profiles-count {
    font-family: var(--zn-mono);
}

html.design-zine .profile-section-title {
    font-family: var(--zn-display);
    text-transform: uppercase;
}

html.design-zine .profile-hero {
    border: var(--zn-border);
    border-radius: 0;
    box-shadow: var(--zn-offset);
}

html.design-zine .leaderboard-list {
    border: var(--zn-border);
    border-radius: 0;
}

html.design-zine .leaderboard-list > * + * {
    border-top: var(--zn-border);
}

html.design-zine .leaderboard-rank {
    font-family: var(--zn-mono);
    font-weight: 700;
    border: 1px solid var(--zn-ink);
    border-radius: 0;
    background: var(--zn-panel);
    color: var(--zn-ink);
}

html.design-zine .leaderboard-rank.rank-1 { background: var(--zn-acid); transform: rotate(-4deg); }
html.design-zine .leaderboard-rank.rank-2 { background: var(--zn-pink); transform: rotate(3deg); }
html.design-zine .leaderboard-rank.rank-3 { background: var(--zn-violet); color: #fff; transform: rotate(-2deg); }

html.design-zine .leaderboard-value {
    font-family: var(--zn-mono);
}

/* ---------------------------------------------------------------
 * 13. MESSAGES / NOTIFICATIONS / FEEDBACK / CULTURE PAGES
 * --------------------------------------------------------------- */
html.design-zine .mail-tab,
html.design-zine .mail-action-link {
    font-family: var(--zn-mono);
    text-transform: uppercase;
    border-radius: 0;
}

html.design-zine .mail-tab--active {
    background: var(--zn-acid);
    color: var(--zn-ink);
    border: 1px solid var(--zn-ink);
}

html.design-zine .mail-row {
    border-bottom: 2px dashed var(--zn-ink-soft);
}

html.design-zine .mail-row-avatar {
    border-radius: 0;
    border: 1px solid var(--zn-ink);
    background: var(--zn-acid);
    color: var(--zn-ink);
}

html.design-zine .mail-row-avatar--sent {
    background: var(--zn-pink);
}

html.design-zine .notif-item {
    box-shadow: 3px 3px 0 var(--zn-ink);
}

html.design-zine .culture-hero,
html.design-zine .sotw-hero {
    background: var(--zn-ink);
    color: var(--zn-paper);
    border: var(--zn-border);
    border-radius: 0;
    box-shadow: 5px 5px 0 var(--zn-pink);
}

html.design-zine .culture-hero h1,
html.design-zine .sotw-hero h1 {
    color: var(--zn-acid);
    text-transform: uppercase;
}

html.design-zine .culture-table th {
    background: var(--zn-ink);
    color: var(--zn-acid);
    font-family: var(--zn-mono);
    text-transform: uppercase;
    border-radius: 0;
}

html.design-zine .culture-table td {
    border-bottom: 1px solid var(--zn-ink);
}

html.design-zine .economy-label {
    font-family: var(--zn-mono);
    text-transform: uppercase;
    color: var(--zn-ink-soft);
}

html.design-zine .economy-value {
    font-family: var(--zn-display);
}

html.design-zine .trade-direction {
    font-family: var(--zn-mono);
}

html.design-zine .status-message {
    border: var(--zn-border);
    border-radius: 0;
    background: var(--zn-panel);
}

/* ---------------------------------------------------------------
 * 14. FOOTER — inverted ink block
 * --------------------------------------------------------------- */
html.design-zine .site-footer {
    background: var(--zn-ink);
    color: var(--zn-paper);
    border-top: 4px solid var(--zn-ink);
    box-shadow: inset 0 4px 0 var(--zn-acid);
    font-family: var(--zn-mono);
    padding-top: 1.6rem;
}

html.design-zine .footer-links a {
    color: var(--zn-paper);
    text-transform: uppercase;
    font-size: .78rem;
}

html.design-zine .footer-links a:hover {
    color: var(--zn-acid);
}

/* ---------------------------------------------------------------
 * 15. BESPOKE DARK PAGES — remap their local palettes to zine paper
 *     (same approach as design-edition.css: keep functional
 *     buy/sell + danger/success semantics, swap the atmosphere)
 * --------------------------------------------------------------- */
html.design-zine {
    /* market.php */
    --bg-color: var(--zn-paper);
    --card-bg: var(--zn-panel);
    --card-border: var(--zn-ink);
    --text-main: var(--zn-ink);
    --accent-blue: var(--zn-violet);
    --buy-color: var(--zn-green);
    --sell-color: var(--zn-red);
    --frenzy-color: var(--zn-amber);
    --font-family: var(--zn-ui);

    /* burn.php ("The Hole") — extends the shared --bg/--text/--accent remap */
    --panel: var(--zn-panel);
    --line: var(--zn-ink);
    --muted: var(--zn-ink-soft);

    /* styleshopnew.php ("The Wandering Merchant") — the pixel-art shop
       scene is hardcoded dark, so this page gets a "night zine" set:
       ink-violet panels, acid accents, light text. The page body still
       turns to zine paper via --ui-bg. */
    --ui-bg: var(--zn-paper);
    --ui-panel: #241c30;
    --ui-panel-dark: var(--zn-ink);
    --ui-border: var(--zn-ink);
    --ui-ink: #f6f2e6;
    --ui-gold: var(--zn-acid);
    --ui-danger: #ff8ba4;
    --ui-success: #7ce8a8;
    --ui-muted: #b7aec6;
    --ui-wood: var(--zn-ink);
}

html.design-zine .market-title,
html.design-zine .title-wrap h1,
html.design-zine .menu-title,
html.design-zine .shop-panel-title {
    font-family: var(--zn-display);
    text-transform: uppercase;
    letter-spacing: 0;
}

/* market.php hardcodes a few light-on-dark colours outside its custom
   properties; repaint those for the paper background. */
html.design-zine .market-title,
html.design-zine .header-info h1,
html.design-zine .market-chip strong,
html.design-zine .market-order-receipt strong {
    color: var(--zn-ink);
}

html.design-zine .market-chip,
html.design-zine .streak-box,
html.design-zine .market-debug-btn {
    background: var(--zn-panel);
    border: var(--zn-border);
    border-radius: 0;
    color: var(--zn-ink);
}

html.design-zine .market-debug-btn:hover {
    background: var(--zn-acid);
    color: var(--zn-ink);
}

html.design-zine .market-form input,
html.design-zine .market-form select {
    background: var(--zn-panel);
    color: var(--zn-ink);
    border: var(--zn-border);
    border-radius: 0;
}

html.design-zine .market-order-receipt {
    background: #dff3e4;
    border: 2px solid var(--zn-green);
    border-radius: 0;
    color: var(--zn-green);
}

html.design-zine .market-card,
html.design-zine .header-card,
html.design-zine .market-pane {
    border-radius: 0;
}

/* ---------------------------------------------------------------
 * 16. RESPONSIVE + MOTION
 * --------------------------------------------------------------- */
@media (max-width: 600px) {
    html.design-zine {
        --zn-offset: 3px 3px 0 var(--zn-ink);
        --zn-offset-lg: 5px 5px 0 var(--zn-ink);
    }

    html.design-zine .page-title { font-size: 1.45rem; }
    html.design-zine .news-list > .news-card { rotate: 0deg; }
    html.design-zine .comment-list > .comment { rotate: 0deg; }
}

@media (prefers-reduced-motion: reduce) {
    html.design-zine *,
    html.design-zine *::before,
    html.design-zine *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    html.design-zine .btn:hover,
    html.design-zine .card:hover,
    html.design-zine .news-card:hover,
    html.design-zine .profile-card:hover,
    html.design-zine .settings-choice label:hover {
        transform: none;
    }
}