:root {
    color-scheme: light;
    --brand-bg: #fbf8f3;
    --brand-surface: #fffefd;
    --brand-ink: #252238;
    --brand-muted: #6b667b;
    --brand-primary: #514089;
    --brand-primary-deep: #352861;
    --brand-accent: #d97962;
    --brand-positive: #2f7a5c;
    --brand-line: #e2dce9;
    --radius-card: 16px;
    --container: 1240px;
    font-family: Vazirmatn, Tahoma, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--brand-ink);
    background:
        radial-gradient(circle at 18% 16%, rgb(81 64 137 / 13%), transparent 34rem),
        radial-gradient(circle at 86% 82%, rgb(217 121 98 / 10%), transparent 28rem),
        var(--brand-bg);
}

.shell {
    width: min(100% - 32px, var(--container));
    min-height: 100vh;
    margin-inline: auto;
    display: grid;
    place-items: center;
}

.hero {
    width: min(100%, 720px);
    padding: 56px 32px;
    text-align: center;
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-card);
    background: rgb(255 254 253 / 92%);
    box-shadow: 0 24px 80px rgb(53 40 97 / 10%);
}

.brand-mark {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    display: grid;
    place-items: center;
    color: white;
    background: linear-gradient(145deg, var(--brand-primary), var(--brand-primary-deep));
    border-radius: 50% 50% 48% 52%;
    font-size: 32px;
    font-weight: 800;
}

.eyebrow { color: var(--brand-accent); font-weight: 700; }
h1 { margin: 8px 0 12px; color: var(--brand-primary-deep); font-size: clamp(40px, 9vw, 72px); }
.lead { margin: 0 auto; max-width: 580px; color: var(--brand-muted); font-size: clamp(17px, 3vw, 21px); line-height: 2; }
.status { display: inline-block; margin: 28px 0 0; padding: 10px 16px; color: var(--brand-primary-deep); background: #ede8fa; border-radius: 999px; font-weight: 700; }

.auth-shell {
    width: min(100% - 32px, 520px);
    min-height: 100vh;
    margin-inline: auto;
    display: grid;
    place-items: center;
}

.auth-card {
    width: 100%;
    padding: 36px;
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-card);
    background: var(--brand-surface);
    box-shadow: 0 24px 80px rgb(53 40 97 / 10%);
}

.auth-card h1 { font-size: clamp(32px, 8vw, 48px); }
.auth-card form { display: grid; gap: 12px; margin-top: 28px; }
.auth-card label { margin-top: 8px; font-weight: 700; }
.auth-card input { width: 100%; padding: 12px 14px; border: 1px solid var(--brand-line); border-radius: 10px; font: inherit; }
.auth-card button { margin-top: 12px; padding: 12px; color: white; border: 0; border-radius: 10px; background: var(--brand-primary); font: inherit; font-weight: 700; cursor: pointer; }
.auth-card .button-link { margin-top: 0; padding: 0; color: var(--brand-primary-deep); background: transparent; }
.auth-card a { color: var(--brand-primary-deep); font-weight: 700; }
.form-error { padding: 12px; color: #7b1f1f; border-radius: 8px; background: #f9dfdf; }

@media (max-width: 600px) {
    .hero { padding: 40px 20px; }
}

.admin-shell { width: min(100% - 28px, var(--container)); margin: 32px auto 80px; }
.admin-header, .section-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.admin-header h1 { font-size: clamp(34px, 7vw, 56px); }
.admin-header p { color: var(--brand-muted); }
.admin-grid { display: grid; gap: 20px; }
.admin-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { margin: 20px 0; padding: 24px; border: 1px solid var(--brand-line); border-radius: var(--radius-card); background: var(--brand-surface); box-shadow: 0 10px 40px rgb(53 40 97 / 6%); }
.panel h2, .panel h3 { color: var(--brand-primary-deep); }
.stack-form { display: grid; gap: 12px; }
.stack-form label { display: grid; gap: 6px; font-weight: 700; }
.stack-form input, .stack-form select, .stack-form textarea, .inline-form select { width: 100%; padding: 10px 12px; border: 1px solid var(--brand-line); border-radius: 10px; background: white; font: inherit; }
button, .button { display: inline-block; padding: 10px 16px; color: white; border: 0; border-radius: 10px; background: var(--brand-primary); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.button.secondary { color: var(--brand-primary-deep); border: 1px solid var(--brand-primary); background: transparent; }
.product-form { grid-template-columns: repeat(4, 1fr); }
.product-form .wide { grid-column: 1 / -1; }
.product-card summary { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; cursor: pointer; }
.product-card summary span:first-child { display: grid; gap: 4px; }
.product-card summary small { color: var(--brand-muted); direction: ltr; text-align: right; }
.product-body { margin-top: 24px; }
.badge { padding: 6px 10px; border-radius: 999px; font-size: 13px; }
.badge.published { color: #14532d; background: #dcfce7; }
.badge.draft { color: #854d0e; background: #fef9c3; }
.badge.archived { color: #52525b; background: #e4e4e7; }
.inline-form { display: flex; gap: 8px; }
.compact-form { margin-top: 22px; }
.variant-list { margin: 24px 0; }
.variant-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--brand-line); }
.variant-form { grid-template-columns: repeat(4, 1fr); }
.flash { margin: 12px 0; padding: 14px 18px; border-radius: 10px; }
.flash.success { color: #14532d; background: #dcfce7; }
.flash.error { color: #7f1d1d; background: #fee2e2; }
.empty-state { color: var(--brand-muted); }

@media (max-width: 900px) {
    .admin-grid.two, .product-form, .variant-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .admin-header, .section-title { align-items: flex-start; flex-direction: column; }
    .admin-grid.two, .product-form, .variant-form { grid-template-columns: 1fr; }
    .product-card summary { grid-template-columns: 1fr auto; }
    .product-card summary > span:last-child { grid-column: 1 / -1; }
    .variant-row { grid-template-columns: 1fr 1fr; }
}