:root {
    --ink: #102454;
    --ink-soft: #5b6680;
    --paper: #f7f4ee;
    --surface: #fffefb;
    --blue: #4aa9eb;
    --yellow: #f9c842;
    --green: #2f9472;
    --red: #b4444e;
    font-family: Inter, ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
    color: var(--ink);
    background: var(--paper);
    font-synthesis: none;
}

* { box-sizing: border-box; }

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 8% 0%, rgba(249, 200, 66, .22), transparent 25rem),
        radial-gradient(circle at 94% 18%, rgba(74, 169, 235, .17), transparent 28rem),
        var(--paper);
}

button, input, textarea { font: inherit; }

.admin-shell, .editor-shell {
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 3rem 0 2rem;
}

.editor-shell { width: min(900px, calc(100% - 2rem)); }

.admin-header, .editor-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.header-actions form { margin: 0; }

.quiet-action {
    padding: .6rem .7rem;
    border: 0;
    color: var(--ink-soft);
    background: transparent;
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: .2rem;
    cursor: pointer;
}

.quiet-action:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.admin-kicker {
    margin: 0 0 .45rem;
    color: #397ba9;
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

h1, h2, p { text-wrap: balance; }

h1 {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.7rem);
    line-height: 1;
    letter-spacing: -.05em;
}

.admin-intro, .editor-header p {
    max-width: 42rem;
    margin: .8rem 0 0;
    color: var(--ink-soft);
    font-size: 1.02rem;
    line-height: 1.55;
}

.primary-action, .secondary-action, .cancel-action, .set-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    border-radius: .85rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.primary-action {
    padding: .78rem 1.15rem;
    border: 2px solid var(--ink);
    color: white;
    background: var(--ink);
    box-shadow: 0 .28rem 0 rgba(16, 36, 84, .22);
    white-space: nowrap;
}

.primary-action:hover { transform: translateY(-1px); }
.primary-action:focus-visible, .set-action:focus-visible, .secondary-action:focus-visible, .cancel-action:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.notice {
    margin: 0 0 1.4rem;
    padding: .9rem 1rem;
    border: 1px solid;
    border-radius: .9rem;
    font-weight: 700;
}

.notice--success { color: #17654c; border-color: #90d3bb; background: #e9f8f2; }
.notice--error { color: #8b2934; border-color: #e7a5ac; background: #fff0f1; }

.set-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
}

.set-tile {
    position: relative;
    min-height: 18rem;
    padding: 1.25rem;
    border: 2px solid var(--ink);
    border-radius: 1.35rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--tile-paper, white);
    background-image: var(--tile-pattern, none);
    background-size: 22px 22px;
    box-shadow: 0 .55rem 1.4rem rgba(16, 36, 84, .1);
}

.set-tile::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 12rem;
    height: 12rem;
    right: -3rem;
    top: 2.6rem;
    border-radius: 44% 56% 62% 38%;
    background: var(--tile-blob, rgba(74, 169, 235, .14));
    transform: rotate(18deg);
}

.set-tile > * { position: relative; z-index: 1; }
.theme-swatch-1 { --tile-paper: #fffdf6; --tile-blob: rgba(74,169,235,.2); --tile-pattern: radial-gradient(circle, rgba(16,36,84,.07) 1.5px, transparent 1.7px); }
.theme-swatch-2 { --tile-paper: #f8fffc; --tile-blob: rgba(72,204,167,.22); --tile-pattern: repeating-linear-gradient(135deg, rgba(8,127,109,.06) 0 2px, transparent 2px 16px); }
.theme-swatch-3 { --tile-paper: #fff9fb; --tile-blob: rgba(218,91,148,.18); --tile-pattern: linear-gradient(rgba(154,53,107,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(154,53,107,.05) 1px, transparent 1px); }
.theme-swatch-4 { --tile-paper: #fffdf7; --tile-blob: rgba(251,173,72,.22); }
.theme-swatch-5 { --tile-paper: #fbfaff; --tile-blob: rgba(133,104,211,.2); }
.theme-swatch-6 { --tile-paper: #f7fdff; --tile-blob: rgba(74,174,211,.2); }
.theme-swatch-7 { --tile-paper: #fbfff8; --tile-blob: rgba(127,196,92,.2); }
.theme-swatch-8 { --tile-paper: #fffafa; --tile-blob: rgba(232,106,101,.18); }

.set-tile__top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.set-count, .default-badge { padding: .35rem .55rem; border-radius: 99px; font-size: .75rem; font-weight: 850; }
.set-count { color: var(--ink-soft); background: rgba(255,255,255,.75); }
.default-badge { color: #17654c; background: #cdf1e2; }

.set-tile__body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 1.2rem .2rem; }
.set-tile h2 { max-width: 23rem; margin: 0; font-size: clamp(1.55rem, 3.3vw, 2.3rem); line-height: 1.05; letter-spacing: -.04em; }
.set-tile__body p { max-width: 30rem; margin: .7rem 0 0; color: var(--ink-soft); line-height: 1.45; }

.set-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.set-actions form { display: contents; }
.set-action { min-height: 2.35rem; padding: .48rem .72rem; border: 1px solid rgba(16,36,84,.22); color: var(--ink); background: rgba(255,255,255,.78); font-size: .82rem; }
.set-action--open { border-color: var(--ink); color: white; background: var(--ink); }

.empty-state { padding: 4rem 1rem; border: 2px dashed rgba(16,36,84,.2); border-radius: 1.25rem; text-align: center; }
.admin-footer { padding-top: 2rem; text-align: center; }
.admin-footer a, .back-link { color: var(--ink-soft); font-weight: 750; }

.back-link { display: inline-block; margin-bottom: 1rem; }
.set-editor { display: grid; gap: 1.4rem; }
.editor-panel, .card-editor-row { border: 1px solid rgba(16,36,84,.14); border-radius: 1.2rem; background: rgba(255,255,255,.82); box-shadow: 0 .35rem 1rem rgba(16,36,84,.06); }
.editor-panel { padding: 1.25rem; display: grid; gap: 1rem; }
.field-group { display: grid; gap: .42rem; }
.field-group label { color: var(--ink); font-size: .86rem; font-weight: 850; }
.field-group input, .field-group textarea { width: 100%; padding: .75rem .82rem; border: 1.5px solid rgba(16,36,84,.2); border-radius: .72rem; color: var(--ink); background: white; font-size: 1rem; line-height: 1.4; }
.field-group textarea { resize: vertical; }

.field-help {
    margin: 0;
    color: var(--ink-soft);
    font-size: .82rem;
    line-height: 1.45;
}

.back-art-field {
    padding-top: .3rem;
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.back-art-preview {
    width: 7rem;
    aspect-ratio: 16 / 25;
    overflow: hidden;
    border: 4px solid var(--ink);
    border-radius: .8rem;
    background: white;
    box-shadow: 0 .35rem .8rem rgba(16,36,84,.12);
}

.back-art-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
}

.back-art-control input[type="file"] {
    padding: .55rem;
    background: white;
}

.response-settings {
    margin: .4rem 0 0;
    padding: 1rem;
    border: 1.5px solid rgba(16,36,84,.16);
    border-radius: .9rem;
    display: grid;
    gap: .9rem;
    background: rgba(247, 250, 255, .72);
}

.response-settings legend {
    padding: 0 .4rem;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 850;
}

.response-label-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.cards-editor { display: grid; gap: .85rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: .4rem .2rem; }
.section-heading h2 { margin: 0; font-size: 1.8rem; }
.formatting-help { margin: -.25rem .2rem .2rem; color: var(--ink-soft); font-size: .82rem; line-height: 1.45; }
.formatting-help code { padding: .12rem .28rem; border-radius: .3rem; color: var(--ink); background: rgba(16,36,84,.07); font-size: .78rem; }
.secondary-action { min-height: 2.6rem; padding: .6rem .85rem; border: 1.5px solid var(--ink); color: var(--ink); background: white; }
#cardRows { display: grid; gap: .8rem; }
.card-editor-row { padding: 1rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: start; }
.card-editor-row__number { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--ink); font-size: .8rem; font-weight: 850; }
.card-editor-row__fields { display: grid; gap: .85rem; }
.card-side-label { margin: 0; color: var(--ink); font-size: .72rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.card-side-label span { margin-left: .35rem; padding: .2rem .38rem; border-radius: 99px; color: var(--ink-soft); background: rgba(16,36,84,.08); font-size: .62rem; letter-spacing: .04em; }
.optional-label { margin-left: .25rem; color: var(--ink-soft); font-size: .7rem; font-weight: 700; }
.optional-back-fields { margin-top: .25rem; padding: 1rem; border: 1.5px dashed rgba(16,36,84,.2); border-radius: .85rem; display: grid; gap: .8rem; background: rgba(247,250,255,.58); }
.remove-card { padding: .45rem; border: 0; color: var(--red); background: transparent; font-size: .8rem; font-weight: 800; cursor: pointer; }
.remove-card:disabled { opacity: .28; cursor: default; }
.editor-actions { position: sticky; bottom: 0; padding: 1rem 0 max(1rem, env(safe-area-inset-bottom)); display: flex; justify-content: flex-end; align-items: center; gap: .75rem; background: linear-gradient(transparent, var(--paper) 35%); }
.cancel-action { padding: .65rem .8rem; color: var(--ink-soft); }

.login-page {
    display: grid;
    place-items: center;
    padding: 1rem;
}

.login-shell { width: min(100%, 450px); }

.login-card {
    position: relative;
    padding: clamp(1.5rem, 6vw, 2.5rem);
    overflow: hidden;
    border: 2px solid var(--ink);
    border-radius: 1.5rem;
    background: rgba(255, 254, 251, .94);
    box-shadow: 0 1.2rem 3rem rgba(16, 36, 84, .15);
}

.login-card::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 15rem;
    height: 15rem;
    right: -7rem;
    top: -6rem;
    border-radius: 46% 54% 60% 40%;
    background: rgba(74, 169, 235, .15);
    transform: rotate(18deg);
}

.login-card > * { position: relative; z-index: 1; }
.login-card h1 { font-size: clamp(2.15rem, 10vw, 3.15rem); }
.login-intro { margin: .75rem 0 1.4rem; color: var(--ink-soft); line-height: 1.5; }
.login-form { display: grid; gap: 1rem; }
.login-form .primary-action { width: 100%; }
.login-back { display: block; margin: 1.3rem 0 0; text-align: center; }
.login-mark { width: 3.6rem; height: 4.7rem; margin-bottom: 1.2rem; position: relative; }
.login-mark span { position: absolute; inset: 0; border: 2px solid var(--ink); border-radius: .55rem; background: white; }
.login-mark span:nth-child(1) { transform: translateX(.65rem) rotate(7deg); background: #f9df88; }
.login-mark span:nth-child(2) { transform: translateX(.32rem) rotate(3deg); background: #a9daf4; }
.login-mark span:nth-child(3) { transform: none; background: #fff; }

@media (max-width: 720px) {
    .admin-shell, .editor-shell { width: min(100% - 1.2rem, 680px); padding-top: 1.25rem; }
    .admin-header, .editor-header { align-items: flex-start; flex-direction: column; gap: 1.1rem; }
    .header-actions { width: 100%; justify-content: space-between; }
    .set-grid { grid-template-columns: 1fr; }
    .set-tile { min-height: 16rem; }
    .card-editor-row { grid-template-columns: auto minmax(0, 1fr); }
    .remove-card { grid-column: 2; justify-self: start; padding-left: 0; }
    .back-art-field { grid-template-columns: 5.5rem minmax(0, 1fr); }
    .back-art-preview { width: 5.5rem; }
    .response-label-fields { grid-template-columns: 1fr; }
}