@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Fraunces:wght@600;700&family=General+Sans:wght@400;500;600;700&family=Clash+Display:wght@600;700&display=swap');

        * { box-sizing: border-box; }
        body {
            font-family: 'Space Grotesk', 'Segoe UI', Tahoma, sans-serif;
            margin: 0;
            background: #f7f7f7;
            color: #222;
        }
        header { background: #111; color: #fff; padding: 16px 24px; }
        .header-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
        .header-left { display:flex; flex-direction:column; gap:6px; }
        .header-right { display:flex; align-items:center; gap:8px; margin-left:auto; }
        nav { display:flex; flex-wrap:wrap; gap:8px; }
        nav a { color: #fff; margin-right: 0; text-decoration: none; }
        .cart-link {
            display:inline-flex;
            align-items:center;
            gap:6px;
            background: linear-gradient(135deg, rgba(178,123,255,0.9), rgba(109,213,255,0.9));
            color:#1b1230;
            padding:8px 14px;
            border-radius:999px;
            text-decoration:none;
            font-weight:700;
            border:1px solid rgba(255,255,255,0.35);
            box-shadow: 0 8px 18px rgba(105,70,180,0.35);
        }
        .cart-link:hover {
            filter: brightness(1.05);
            box-shadow: 0 10px 22px rgba(105,70,180,0.45);
        }
        .cart-icon { width:16px; height:16px; display:inline-block; }
        main { padding: 24px; max-width: 1400px; width: min(1400px, 100%); margin: 0 auto; background: #fff; }
        .card { border: 1px solid #e3e3e3; padding: 16px; border-radius: 8px; margin-bottom: 16px; }
        .muted { color: #666; }
        img { max-width: 100%; height: auto; }
        input, select, textarea, button { max-width: 100%; }
        table { width: 100%; border-collapse: collapse; }
        th, td { word-break: break-word; }

        /* Admin-only styling */
        body.admin-page {
            --admin-bg: #12151c;
            --admin-panel: #1b202a;
            --admin-panel-2: #1e2430;
            --admin-border: #2c3444;
            --admin-text: #f3f4f7;
            --admin-muted: #a8b0c3;
            --admin-accent: #c6ff4e;
            --admin-accent-2: #ffb347;
            --admin-link: #f6f7fb;
            font-family: 'General Sans', 'Space Grotesk', sans-serif;
            background:
                radial-gradient(900px 520px at 12% -10%, rgba(198,255,78,0.16), transparent 55%),
                radial-gradient(760px 420px at 90% -12%, rgba(255,107,107,0.18), transparent 55%),
                linear-gradient(160deg, #12151c 0%, #1a1f28 55%, #0f131a 100%);
            color: var(--admin-text);
            position: relative;
            overflow-x: hidden;
        }
        body.admin-page::before {
            content: "";
            position: fixed;
            inset: 0;
            background:
                repeating-radial-gradient(circle at 0 0, rgba(255,255,255,0.06) 0 1px, transparent 1px 9px);
            opacity: 0.35;
            pointer-events: none;
            z-index: 0;
        }
        body.admin-page header {
            background: rgba(18,21,28,0.92);
            backdrop-filter: blur(10px);
            box-shadow: 0 12px 32px rgba(0,0,0,0.45);
        }
        body.admin-page main { background: transparent; max-width: 1320px; position: relative; z-index: 1; }
        body.admin-page .card {
            background: var(--admin-panel);
            border: 1px solid var(--admin-border);
            border-radius: 14px;
            padding: 18px;
            box-shadow: 0 14px 26px rgba(0,0,0,0.35);
        }
        body.admin-page h1, body.admin-page h2 {
            margin-top: 0;
            font-family: 'Clash Display', 'Fraunces', 'Space Grotesk', serif;
            letter-spacing: 0.01em;
        }
        body.admin-page nav a {
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.18);
            padding: 6px 10px;
            border-radius: 999px;
            font-weight: 600;
        }
        body.admin-page nav a:hover { background: rgba(255,255,255,0.18); }
        body.admin-page .cart-link { background:#f2f2f2; color:#111; }
        body.admin-page a { color: var(--admin-link); }
        body.admin-page a:hover { color: #d2f4eb; }
        body.admin-page input, body.admin-page select, body.admin-page textarea {
            background: #202733;
            color: var(--admin-text);
            border: 1px solid #2f3646;
            border-radius: 10px;
            padding: 9px 10px;
        }
        body.admin-page input::placeholder, body.admin-page textarea::placeholder { color: #e0e0e0; }
        body.admin-page button {
            background: #242a35;
            color: #f2f4f8;
            border: 1px solid #303848;
            padding: 8px 14px;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
            box-shadow: 0 6px 12px rgba(0,0,0,0.25);
        }
        body.admin-page button:hover {
            border-color: #c6ff4e;
            color: #f9ffda;
            box-shadow: 0 10px 18px rgba(0,0,0,0.3), 0 0 0 2px rgba(198,255,78,0.15);
        }
        body.admin-page button[style*="color:#a00"] {
            background: #2a1f22;
            color: #ffb4b0;
            border: 1px solid #7a3a4f;
        }
        body.admin-page button[style*="color:#a60"] {
            background: #2a2320;
            color: #ffd1a8;
            border: 1px solid #7a5a3a;
        }
        body.admin-page table.admin-table {
            background: #1f2631;
            border: 1px solid #2c3444;
            border-radius: 12px;
            overflow: hidden;
            table-layout: fixed;
        }
        body.admin-page th {
            background: #242a35;
            font-weight: 700;
            color: #f2f2f2;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            font-size: 12px;
        }
        body.admin-page td, body.admin-page th {
            padding: 10px;
            border-bottom: 1px solid #2c3444;
        }
        body.admin-page tr:nth-child(even) td { background: #222937; }
        body.admin-page .muted { color: var(--admin-muted); }
        body.admin-page .card .card { box-shadow: none; border-style: dashed; }
        body.admin-page .table-wrap { overflow-x: auto; border-radius: 10px; }
        body.admin-page .admin-pill { display:inline-block; padding:4px 8px; border-radius:999px; background:#242a35; border:1px solid #2c3444; font-size:12px; color:#f2f2f2; }
        body.admin-page .admin-actions-inline { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
        body.admin-page .admin-actions-inline a { font-weight:600; }
        body.admin-page .action-pill {
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:6px 12px;
            border-radius:999px;
            border:1px solid #303848;
            background:#222937;
            color:#e7ecf5;
            text-decoration:none;
            font-weight:600;
        }
        body.admin-page .action-pill:hover {
            border-color:#c6ff4e;
            color:#f9ffda;
        }
        body.admin-page .email-entry {
            background: #222937;
            border: 1px solid #2c3444;
            color: #f2f2f2;
        }
        body.admin-page .email-entry .muted { color:#e0e0e0; }
        body.admin-page .email-preview {
            background: #1f2631;
            border: 1px solid #2c3444;
            color: #f2f2f2;
        }
        body.admin-page .email-preview * { color: inherit; }
        body.admin-page .email-preview img { max-width: 100%; height: auto; }
        body.admin-page .email-preview table { width: 100%; border-collapse: collapse; }
        body.admin-page .email-preview a { color: #caa6ff; }
        body.admin-page .email-preview img { filter: brightness(0.85) contrast(1.05) saturate(0.95); }
        body.admin-page .email-preview table,
        body.admin-page .email-preview td,
        body.admin-page .email-preview th,
        body.admin-page .email-preview div,
        body.admin-page .email-preview p,
        body.admin-page .email-preview span {
            background: transparent !important;
            color: #f2f2f2 !important;
        }
        body.admin-page .email-preview-inner {
            background: #1f2631;
            color: #f2f2f2;
        }
        body.admin-page .editor-shell { background:#1f2631; border:1px solid #2c3444; }
        body.admin-page .editor-toolbar { background:#242a35; }
        body.admin-page .editor-toolbar button,
        body.admin-page .editor-toolbar select {
            background:#222937;
            color:#f2f2f2;
            border:1px solid #2c3444;
        }
        body.admin-page .editor-area {
            background:#1f2631;
            color:#f2f2f2;
        }

        body:not(.admin-page) header {
            background: linear-gradient(135deg, #0f0c1f 0%, #1c1841 55%, #0c0a1b 100%);
            box-shadow: 0 18px 36px rgba(0,0,0,0.4);
        }
        body:not(.admin-page) .header-inner { justify-content:center; }
        .shop-header-banner {
            display:flex;
            align-items:center;
            justify-content:center;
            padding: 8px 0 12px;
        }
        .shop-header-banner img {
            height: 140px;
            max-width: 880px;
            width: auto;
            display:block;
            filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
        }
        .shop-admin-link {
            position: absolute;
            top: 14px;
            left: 18px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.22);
            background: rgba(255,255,255,0.08);
            color: #f5f2ff;
            text-decoration: none;
            font-weight: 600;
            font-size: 13px;
        }
        .site-nav {
            display: inline-flex;
            gap: 8px;
            align-items: center;
        }
        .site-nav a {
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.18);
            padding: 6px 12px;
            border-radius: 999px;
            font-weight: 600;
            color: #fff;
            text-decoration: none;
        }
        .site-nav a:hover { background: rgba(255,255,255,0.16); }
        .site-nav a.is-active {
            background: rgba(178,123,255,0.3);
            border-color: rgba(178,123,255,0.7);
            box-shadow: 0 0 0 1px rgba(178,123,255,0.3);
        }
        body:not(.admin-page) .header-right { margin-left:auto; }
        body:not(.admin-page) nav a {
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.18);
            padding: 6px 10px;
            border-radius: 999px;
            font-weight: 600;
        }
        body:not(.admin-page) nav a:hover { background: rgba(255,255,255,0.16); }
        body.admin-page .header-inner {
            align-items: flex-start;
        }
        body.admin-page .header-left {
            gap: 10px;
        }
        body.admin-page nav {
            width: 100%;
            justify-content: flex-start;
        }
        .admin-bar {
            background: #0f1118;
            color: #fff;
            padding: 10px 18px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            position: relative;
            z-index: 80;
            overflow: visible;
        }
        .admin-bar nav {
            flex-wrap: wrap;
            gap: 8px;
            overflow: visible;
            white-space: normal;
            padding-bottom: 0;
        }
        .admin-bar nav a {
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.18);
            padding: 6px 10px;
            border-radius: 999px;
            font-weight: 600;
            flex: 0 0 auto;
        }
        .admin-bar .admin-menu {
            position: relative;
            flex: 0 0 auto;
            overflow: visible;
            padding-bottom: 10px;
            margin-bottom: -10px;
        }
        .admin-bar .admin-menu-trigger {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.18);
            padding: 6px 10px;
            border-radius: 999px;
            font-weight: 600;
            color: #fff;
            text-decoration: none;
        }
        .admin-bar .admin-menu-trigger:hover {
            background: rgba(255,255,255,0.18);
        }
        .admin-bar .admin-menu-dropdown {
            position: absolute;
            top: calc(100% - 2px);
            left: 0;
            background: #0f1118;
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 14px;
            padding: 8px;
            min-width: 180px;
            max-width: min(280px, calc(100vw - 32px));
            box-shadow: 0 12px 24px rgba(0,0,0,0.35);
            display: none;
            z-index: 120;
        }
        .admin-bar .admin-menu:hover .admin-menu-dropdown,
        .admin-bar .admin-menu:focus-within .admin-menu-dropdown {
            display: grid;
            gap: 6px;
        }
        .admin-bar .admin-menu-dropdown a {
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.18);
            padding: 6px 10px;
            border-radius: 999px;
            font-weight: 600;
            text-decoration: none;
            color: #fff;
        }
        .admin-bar-inner { display:flex; align-items:center; gap:12px; }
        .admin-bar .cart-link { margin-left:auto; }
        .shop-announcement {
            background: rgba(178,123,255,0.18);
            border: 1px solid rgba(178,123,255,0.5);
            color: #f5f2ff;
            padding: 14px 18px;
            border-radius: 12px;
            font-size: 14px;
            margin: 0 auto 12px;
            max-width: 1180px;
            text-align: left;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .shop-announcement-image {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            object-fit: contain;
            background: rgba(10, 8, 24, 0.55);
            border: 1px solid rgba(255,255,255,0.2);
            box-shadow: 0 8px 16px rgba(0,0,0,0.35);
            flex: 0 0 auto;
        }
        .shop-announcement-text { min-width: 0; }
        .shop-announcement a { color: #fef7ff; font-weight: 600; }
        @media (max-width: 900px) {
            body:not(.admin-page) .header-left,
            body:not(.admin-page) .header-right {
                justify-content:center;
                margin-left:0;
            }
            body:not(.admin-page) nav { justify-content:center; }
        }
        @media (max-width: 900px) {
            .admin-bar {
                padding: 10px 12px;
            }
            .admin-bar nav {
                gap: 6px;
            }
            .admin-bar .admin-menu-dropdown {
                left: 0;
                right: auto;
                min-width: 180px;
            }
        }

        body.admin-page .page-shell { display:flex; flex-direction:column; gap:18px; }
        body.admin-page .page-head {
            display:flex;
            justify-content:space-between;
            gap:16px;
            flex-wrap:wrap;
            align-items:flex-start;
        }
        body.admin-page .page-head h1 { margin-bottom:6px; }
        body.admin-page .page-kicker { text-transform:uppercase; letter-spacing:0.18em; font-size:11px; color: var(--admin-muted); font-weight:600; }
        body.admin-page .page-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
        body.admin-page .page-hero .page-head { flex-wrap:nowrap; }
        body.admin-page .page-hero .page-head > div { min-width:0; }
        body.admin-page .page-hero .page-head > div:first-child { flex:1 1 0; }
        body.admin-page .page-hero .page-actions {
            margin-left:auto;
            flex-wrap:nowrap;
            white-space:nowrap;
            gap:8px;
        }
        body.admin-page .page-hero .action-pill { padding:6px 10px; font-size:13px; }
        @media (max-width: 1100px) {
            body.admin-page .page-hero .page-head { flex-wrap:wrap; }
            body.admin-page .page-hero .page-actions { width:100%; flex-wrap:wrap; white-space:normal; }
        }
        body.admin-page .panel-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
        body.admin-page .panel {
            background: var(--admin-panel-2);
            border: 1px solid var(--admin-border);
            border-radius: 16px;
            padding: 16px;
        }
        body.admin-page .page-shell > .card:first-of-type,
        body.admin-page .digest-shell > .card:first-of-type,
        body.admin-page .page-hero {
            position: relative;
            overflow: hidden;
            border-radius: 18px;
            background: #1b202a;
            border: 1px solid #2c3444;
            box-shadow: 0 16px 30px rgba(0,0,0,0.4);
        }
        body.admin-page .page-shell > .card:first-of-type::before,
        body.admin-page .digest-shell > .card:first-of-type::before,
        body.admin-page .page-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 12% 12%, rgba(198,255,78,0.18), transparent 45%),
                radial-gradient(circle at 88% -5%, rgba(255,107,107,0.2), transparent 45%),
                repeating-linear-gradient(120deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 8px);
            opacity: 0.8;
            pointer-events: none;
        }
        body.admin-page .page-shell > .card:first-of-type > *,
        body.admin-page .digest-shell > .card:first-of-type > *,
        body.admin-page .page-hero > * {
            position: relative;
            z-index: 1;
        }
        body.admin-page .panel-title { display:flex; justify-content:space-between; gap:10px; align-items:center; }
        body.admin-page .panel-title h3 { margin:0; font-size:18px; }
        body.admin-page .panel-title span { font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color: var(--admin-muted); }
        body.admin-page .stat-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }
        body.admin-page .stat-card { background:#1a202b; border:1px solid #2c3444; border-radius:14px; padding:14px; }
        body.admin-page .stat-card strong { font-size:22px; display:block; margin-top:4px; }
        body.admin-page .inline-filter { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
        body.admin-page .chip { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 10px; background:#1a202b; border:1px solid #2c3444; font-size:12px; }
        body.admin-page .tag { display:inline-flex; align-items:center; gap:6px; border-radius:10px; padding:6px 10px; background:#1a202b; border:1px solid #2c3444; font-size:12px; }
        body.admin-page .tag.tag-active { background:#2a3a52; border-color:#4a90d9; color:#a8d4ff; }
        body.admin-page .split-layout { display:grid; grid-template-columns: 320px 1fr; gap:18px; }
        body.admin-page .split-layout.wide-left { grid-template-columns: minmax(340px, 420px) 1fr; }
        body.admin-page .ghost-card { border:1px dashed #3a445c; background: rgba(24,30,42,0.7); border-radius:14px; padding:14px; }
        body.admin-page .table-toolbar { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:center; }
        body.admin-page .table-toolbar .muted { font-size:12px; }
        body.admin-page .fade-up { animation: fadeUp 0.45s ease both; }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Responsive admin tables */
        @media (max-width: 700px) {
            body.admin-page table.admin-table.responsive thead { display:none; }
            body.admin-page table.admin-table.responsive,
            body.admin-page table.admin-table.responsive tbody,
            body.admin-page table.admin-table.responsive tr,
            body.admin-page table.admin-table.responsive td {
                display:block;
                width:100%;
            }
            body.admin-page table.admin-table.responsive tr {
                border: 1px solid #2c3444;
                border-radius: 10px;
                margin-bottom: 12px;
                overflow: hidden;
                background: #1b202a;
            }
            body.admin-page table.admin-table.responsive td {
                display:flex;
                justify-content:space-between;
                gap:10px;
                border-bottom: 1px solid #242437;
            }
            body.admin-page table.admin-table.responsive td::before {
                content: attr(data-label);
                color:#9aa0b2;
                font-weight:600;
                text-transform: uppercase;
                letter-spacing:0.04em;
                font-size:11px;
                flex: 0 0 40%;
            }
            body.admin-page table.admin-table.responsive td:last-child { border-bottom: none; }
            body.admin-page table.admin-table.responsive td[data-label="Actions"] { flex-direction:column; align-items:flex-start; }
        }
        @media (max-width: 900px) {
            body.admin-page .split-layout { grid-template-columns: 1fr; }
        }
        @media (max-width: 700px) {
            header { padding: 12px 16px; }
            main { padding: 14px; }
            .card { padding: 12px; }
        }