@font-face {
    font-family: IRANSans;
    src: url("/fonts/IRANSans-Regular.woff2") format("woff2"), local("IRANSans");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: IRANSans;
    src: url("/fonts/IRANSans-Bold.woff2") format("woff2"), local("IRANSans Bold");
    font-weight: 700;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --carbon: #141316;
    --surface: #201e22;
    --line: #41383b;
    --gold: #e6ba62;
    --red: #76283d;
    --rose: #ffb4c1;
    --text: #f7eee4;
    --muted: #cdc0b8;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--carbon); color: var(--text); font: 1rem/1.85 IRANSans, Tahoma, sans-serif; }
h1, h2, h3, p { margin-block: 0 .85rem; }
h1, h2, h3 { line-height: 1.45; }
small { color: var(--muted); }
a { color: var(--gold); text-underline-offset: .24em; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.shell { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.topbar { border-bottom: 1px solid var(--line); background: #19171b; }
.topbar-inner, .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }
.brand { text-decoration: none; font-size: 1.25rem; font-weight: 700; }
button, input { font: inherit; max-width: 100%; }
button, .button {
    display: inline-block; padding: .55rem 1.05rem; border: 1px solid var(--gold); border-radius: .55rem;
    background: var(--gold); color: #20160d; font-weight: 700; cursor: pointer; text-decoration: none;
}
button:hover, .button:hover { background: #f4d28e; }
button.secondary { background: transparent; color: var(--gold); }
button.secondary:hover { background: var(--surface); }
label { display: block; margin-block: .6rem; }
input:not([type="checkbox"]):not([type="hidden"]) {
    display: block; width: min(100%, 27rem); padding: .5rem .7rem; border: 1px solid #69595c;
    border-radius: .5rem; background: var(--carbon); color: var(--text);
}
input[type="checkbox"] { accent-color: var(--gold); }
[role="alert"] { border-inline-start: 4px solid var(--rose); background: #42202b; color: var(--rose); padding: .75rem 1rem; margin-block: 1rem; }
[role="status"] { color: var(--gold); }

.hero {
    display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: clamp(1rem, 5vw, 5rem);
    min-height: 30rem; margin-block: 2rem; padding: clamp(1.4rem, 5vw, 4.2rem);
    background: radial-gradient(ellipse at 0 100%, #411c29, transparent 65%), var(--surface);
    border: 1px solid var(--line); border-radius: 1.4rem;
}
.eyebrow { color: var(--gold); }
.hero h1 { font-size: clamp(3rem, 9vw, 7rem); margin-block-end: .35rem; }
.hero-subtitle { font-size: clamp(1.2rem, 3vw, 2rem); color: var(--gold); font-weight: 700; }
.hero-description { color: var(--muted); max-width: 36ch; margin-block-end: 1.5rem; }
.hero-art {
    display: grid; place-items: center; aspect-ratio: 1; width: min(100%, 19rem); margin-inline: auto;
    border-radius: 50%; background: radial-gradient(circle, var(--red), #3a1a25 65%, transparent 66%);
    border: 1px solid #956c4c; box-shadow: inset 0 0 0 .7rem #211b20, inset 0 0 0 .78rem #7a523e;
    color: var(--gold); font-size: clamp(4.5rem, 14vw, 11rem); font-weight: 700; line-height: 1;
}
.hero-art span { transform: translateY(-.12em); }
.hero-art img { display: block; width: 84%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.about { padding: 1.25rem 0 2rem; max-width: 45rem; }
.about p, .site-footer { color: var(--muted); }
.site-footer { border-top: 1px solid var(--line); }

.workspace-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-block: 1.8rem 1rem; }
.workspace-heading h1 { margin: 0; }
.workspace-layout { display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); align-items: start; gap: 1rem; }
.workspace-nav { display: grid; gap: .3rem; padding: .55rem; border: 1px solid var(--line); background: var(--surface); border-radius: .9rem; }
.workspace-nav a, .workspace-nav summary { display: block; padding: .4rem .7rem; border-radius: .45rem; text-decoration: none; }
.workspace-nav a:hover, .workspace-nav summary:hover { background: #2d262b; }
.workspace-nav a[aria-current="page"] { background: var(--gold); color: var(--carbon); font-weight: 700; }
.workspace-nav summary::after { content: "▾"; margin-inline-start: .5rem; }
.workspace-nav details[open] summary::after { content: "▴"; }
.workspace-nav details a { margin-inline-start: .65rem; }
.workspace-grid { display: grid; min-width: 0; gap: 1rem; margin-block-end: 2rem; }
.workspace-grid section, .gateway-card { border: 1px solid var(--line); background: var(--surface); border-radius: .9rem; padding: clamp(1rem, 2.5vw, 1.65rem); }
.brand-form + .brand-form { border-block-start: 1px solid var(--line); margin-block-start: 1rem; padding-block-start: .65rem; }
.brand-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-block-start: .65rem; }
.brand-preview { width: 3rem; height: 3rem; object-fit: contain; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .75rem; margin-block: 1rem; }
.metrics > div { display: grid; align-content: start; gap: .15rem; padding: .9rem 1rem; background: #2c2429; border-inline-start: 3px solid var(--gold); border-radius: .55rem; }
.metrics strong { color: var(--gold); font-size: clamp(1.15rem, 3vw, 1.65rem); }
.gateway-card { width: min(100%, 29rem); margin: clamp(2rem, 10vh, 7rem) auto; border-block-start: 3px solid var(--gold); }
.gateway-card button { width: 100%; margin-block-start: .5rem; }
table { border-collapse: collapse; width: 100%; margin-block: .6rem; }
th, td { text-align: start; padding: .5rem .4rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
thead { background: #2d262b; color: var(--gold); }
summary { cursor: pointer; color: var(--gold); }
td details { margin-block: .25rem; }
button[value="delete-observation"] { background: var(--red); color: var(--text); border-color: #9d5669; }
.member-trend { margin: 0; }
.trend-plot { display: flex; gap: .4rem; direction: ltr; }
.trend-scale { display: flex; flex-direction: column; justify-content: space-between; font-variant-numeric: tabular-nums; }
.trend-plot svg { display: block; width: 100%; min-width: 0; }
.trend-dates { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 .75rem; direction: ltr; }
.chart-grid { stroke: var(--line); }
.chart-line { stroke: var(--gold); }
.chart-dot { fill: var(--gold); }
.chart-dot:hover { fill: var(--rose); }

@media (max-width: 40rem) {
    .hero, .workspace-layout { grid-template-columns: minmax(0, 1fr); }
    .hero { min-height: 0; }
    .hero-art { width: min(55%, 10rem); }
    th, td { padding-inline: .25rem; }
}