/* PDM admin — Claude Design "Admin Dashboard v2" — 2026-09-11.

   The palette, the radii, the shadows and the control geometry below are the
   design's own values, taken from the project file rather than eyeballed from
   a picture.

   One deliberate departure: the design loads Space Grotesk and Vazirmatn from
   Google's font service. This site serves no such host — it is unreachable for
   a large part of the audience — and the design's own Persian stack puts
   Vazirmatn FIRST, with Space Grotesk only behind it. Vazirmatn already covers
   the Latin letters and digits this panel shows, and it is already self-hosted,
   so dropping the second family changes nothing on screen and saves the round
   trip. */

@font-face { font-family: Vazirmatn; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/vazirmatn-regular.woff2) format("woff2"); }
@font-face { font-family: Vazirmatn; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/vazirmatn-500.woff2) format("woff2"); }
@font-face { font-family: Vazirmatn; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/vazirmatn-600.woff2) format("woff2"); }
@font-face { font-family: Vazirmatn; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/vazirmatn-700.woff2) format("woff2"); }
@font-face { font-family: Vazirmatn; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/vazirmatn-800.woff2) format("woff2"); }

/* Light is the fallback; the panel opens dark, as the site does. */
:root {
    --canvas: oklch(0.975 0.004 265);
    --surface: oklch(1 0 0);
    --raised: oklch(0.982 0.004 265);
    --line: oklch(0.915 0.008 265);
    --ink: oklch(0.26 0.02 265);
    --ink2: oklch(0.48 0.02 265);
    --ink3: oklch(0.61 0.018 265);
    --track: oklch(0.93 0.008 265);
    --accent: oklch(0.55 0.19 255);
    --accent-soft: oklch(0.55 0.19 255 / .10);
    --on-accent: oklch(1 0 0);
    --pos: oklch(0.60 0.15 160);
    --pos-soft: oklch(0.60 0.15 160 / .12);
    --warn: oklch(0.65 0.15 75);
    --warn-soft: oklch(0.65 0.15 75 / .13);
    --neg: oklch(0.58 0.20 25);
    --neg-soft: oklch(0.58 0.20 25 / .11);
    --shadow: 0 6px 22px oklch(0.55 0.03 265 / .10);
    --topbar: oklch(0.975 0.004 265 / .88);
    color-scheme: light;
}
[data-theme=dark] {
    --canvas: oklch(0.165 0.014 265);
    --surface: oklch(0.205 0.016 265);
    --raised: oklch(0.245 0.017 265);
    --line: oklch(0.295 0.018 265);
    --ink: oklch(0.97 0.005 265);
    --ink2: oklch(0.76 0.018 265);
    --ink3: oklch(0.60 0.02 265);
    --track: oklch(0.28 0.017 265);
    --accent: oklch(0.70 0.17 255);
    --accent-soft: oklch(0.70 0.17 255 / .16);
    --on-accent: oklch(0.15 0.02 265);
    --pos: oklch(0.78 0.15 160);
    --pos-soft: oklch(0.78 0.15 160 / .16);
    --warn: oklch(0.82 0.15 82);
    --warn-soft: oklch(0.82 0.15 82 / .16);
    --neg: oklch(0.68 0.19 22);
    --neg-soft: oklch(0.68 0.19 22 / .16);
    --shadow: 0 8px 28px oklch(0.10 0.02 265 / .55);
    --topbar: oklch(0.165 0.014 265 / .85);
    color-scheme: dark;
}

/* The six screens written before this design landed use the older names. They
   are aliases now, so every one of them adopts the new palette without a line
   of its own changing. */
:root, [data-theme=dark] {
    --bg: var(--canvas);
    --bg2: var(--raised);
    --card: var(--surface);
    --border: var(--line);
    --fg: var(--ink);
    --muted: var(--ink3);
    --primary: var(--accent);
    --chip: var(--accent-soft);
    --accent2: var(--pos);
    --danger: var(--neg);
    --ring: var(--accent-soft);
    --sidebar: var(--surface);
}

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes drawIn { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ================= shell ================================================= */
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0; background: var(--canvas); color: var(--ink);
    font-family: Vazirmatn, system-ui, sans-serif; font-size: 13px; line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* Identifiers stay Latin and left to right inside the Persian panel. On a
   table CELL only the base direction is set: display:inline-block on a <td>
   stops it being a cell and breaks the column grid. */
.a-ltr, .a-num { direction: ltr; }
.a-num { font-variant-numeric: tabular-nums; }
span.a-ltr, strong.a-ltr, small.a-ltr, .a-badge.a-ltr,
span.a-num, strong.a-num, small.a-num { unicode-bidi: isolate; display: inline-block; }
[dir=rtl] .a-table td.a-ltr, [dir=rtl] .a-table td.a-num { text-align: right; }
[dir=ltr] .a-table td.a-ltr, [dir=ltr] .a-table td.a-num { text-align: left; }

.a-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }

.a-side {
    display: flex; flex-direction: column; padding: 16px 12px;
    background: var(--surface); border-inline-end: 1px solid var(--line);
    position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.a-brand { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px; margin-bottom: 22px; }
.a-brand-mark {
    width: 32px; height: 32px; border-radius: 9px; background: var(--accent);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
}
.a-brand-mark img { width: 32px; height: 32px; display: block; }
.a-brand-t { font-weight: 700; font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.a-brand-s { font-size: 10.5px; color: var(--ink3); white-space: nowrap; margin-top: 1px; }

.a-nav { display: flex; flex-direction: column; gap: 20px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.a-nav-group { display: flex; flex-direction: column; gap: 2px; }
.a-side-label { font-size: 10px; font-weight: 700; color: var(--ink3); letter-spacing: .7px; padding: 0 10px 7px; opacity: .85; }
.a-side a {
    display: inline-flex; align-items: center; gap: 11px; width: 100%; height: 38px; padding: 0 11px;
    border-radius: 9px; font-size: 12.5px; font-weight: 500; color: var(--ink2);
    white-space: nowrap; transition: background .2s, color .2s;
}
.a-side a:hover { background: var(--raised); color: var(--ink); }
.a-side a.is-on { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.a-side a svg { flex-shrink: 0; }
.a-side-count {
    margin-inline-start: auto; display: inline-flex; align-items: center; font-size: 10px; font-weight: 700;
    padding: 1px 7px; border-radius: 100px; background: var(--accent-soft); color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.a-side a.is-on .a-side-count { background: oklch(1 0 0 / .22); color: var(--on-accent); }

.a-side-foot { padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.a-side-user { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px; min-width: 0; }
.a-avatar {
    width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.a-side-user div { min-width: 0; }
.a-side-name { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-side-mail { font-size: 10.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; }
.a-side-actions { display: flex; gap: 6px; }
.a-side-actions > * { flex: 1; }

/* ================= topbar =============================================== */
.a-topbar {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px;
    padding: 12px 22px; min-height: 66px; flex-wrap: wrap;
    background: var(--topbar); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.a-crumbs { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink3); font-weight: 500; }
.a-crumbs span:nth-child(2) { opacity: .45; }
.a-crumbs .a-crumb-now { color: var(--ink2); }
.a-topbar h1 { font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.2px; line-height: 1.2; }
.a-topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.a-main { padding: 18px 22px 40px; animation: fade .25s both; }

/* ================= buttons ============================================== */
.a-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 36px; padding: 0 13px; border-radius: 9px; border: 1px solid var(--line);
    background: var(--raised); color: var(--ink2); font-size: 12.5px; font-weight: 600;
    cursor: pointer; white-space: nowrap; transition: filter .15s, border-color .15s, color .15s;
}
.a-btn:hover { filter: brightness(1.06); color: var(--ink); }
.a-btn-primary { background: var(--accent); color: var(--on-accent); border-color: transparent; padding: 0 14px; }
.a-btn-primary:hover { color: var(--on-accent); }
.a-btn-quiet { background: var(--raised); }
.a-btn-danger { background: transparent; border-color: var(--neg); color: var(--neg); }
.a-btn-danger:hover { background: var(--neg-soft); color: var(--neg); }
.a-btn-sm { height: 30px; padding: 0 11px; font-size: 12px; }
.a-btn-icon { width: 36px; height: 36px; padding: 0; background: var(--surface); }
.a-btn[disabled], .a-btn.is-off { opacity: .42; pointer-events: none; }
.a-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.a-inline { display: inline; }

/* ================= cards ================================================ */
.a-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--shadow); overflow: hidden; animation: rise .4s both;
}
.a-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 20px; border-bottom: 1px solid var(--line); min-height: 58px; flex-wrap: wrap;
}
.a-card h2 { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.1px; }
.a-card-sub { margin-top: 3px; font-size: 11.5px; color: var(--ink3); font-weight: 500; }
.a-card-pad { padding: 18px 20px; }

/* ================= KPI ================================================== */
.a-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.a-kpi { padding: 16px 18px; }
.a-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 20px; }
.a-kpi-top > span:first-child { font-size: 11.5px; font-weight: 600; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-kpi-mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 14px; }
.a-kpi-v { font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; direction: ltr; }
.a-kpi svg { width: 82px; height: 32px; flex-shrink: 0; overflow: visible; }
.a-kpi-hint { font-size: 11px; color: var(--ink3); font-weight: 500; margin-top: 10px; height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-delta { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 100px; font-variant-numeric: tabular-nums; direction: ltr; flex-shrink: 0; }
.a-delta-up { background: var(--pos-soft); color: var(--pos); }
.a-delta-down { background: var(--neg-soft); color: var(--neg); }
.a-delta-flat { background: var(--raised); color: var(--ink3); }

/* ================= chart ================================================ */
.a-two-col { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.a-chart-wrap { padding: 18px 20px 14px; }
.a-plot { position: relative; height: 212px; }
.a-grid-lines { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.a-grid-line { display: flex; align-items: center; gap: 10px; }
.a-grid-line span:first-child { font-size: 10px; color: var(--ink3); font-variant-numeric: tabular-nums; width: 32px; text-align: end; flex-shrink: 0; direction: ltr; }
.a-grid-line span:last-child { flex: 1; height: 1px; background: var(--line); }
.a-plot svg { position: absolute; inset-inline-start: 42px; top: 0; width: calc(100% - 42px); height: 100%; overflow: visible; }
.a-axis { display: flex; justify-content: space-between; padding-inline-start: 42px; margin-top: 10px; }
.a-axis span { font-size: 10.5px; color: var(--ink3); font-weight: 500; font-variant-numeric: tabular-nums; direction: ltr; }
.a-legend { display: flex; align-items: center; gap: 14px; }
.a-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink2); }
.a-legend i { width: 8px; height: 2px; border-radius: 2px; display: inline-block; }
.a-draw { stroke-dasharray: 1200; animation: drawIn 1.1s cubic-bezier(.22, 1, .36, 1) both; }

/* ================= share bars =========================================== */
.a-bars { padding: 18px 20px; display: flex; flex-direction: column; gap: 15px; }
.a-bar-row > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.a-bar-name { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink); min-width: 0; }
.a-bar-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-bar-name i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.a-bar-pct { font-size: 12px; font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; direction: ltr; flex-shrink: 0; }
.a-track { display: block; height: 6px; border-radius: 100px; background: var(--track); overflow: hidden; }
.a-track i { display: block; height: 100%; border-radius: 100px; }
.a-mini { border-top: 1px solid var(--line); padding-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.a-mini-v { font-size: 19px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; direction: ltr; line-height: 1.1; }
.a-mini-l { font-size: 11px; color: var(--ink3); font-weight: 500; margin-top: 4px; }

/* ================= list rows (releases share, activity) ================= */
.a-rows { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.a-rowcard { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--raised); }
.a-rowcard-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.a-rowcard-body { flex: 1; min-width: 0; }
.a-rowcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.a-rowcard-name { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-rowcard-meta { font-size: 11px; font-weight: 500; color: var(--ink3); white-space: nowrap; font-variant-numeric: tabular-nums; direction: ltr; flex-shrink: 0; }
.a-rowcard .a-track { height: 5px; margin-top: 8px; }
.a-rowcard-n { font-size: 12.5px; font-weight: 700; color: var(--ink); width: 44px; text-align: end; font-variant-numeric: tabular-nums; direction: ltr; flex-shrink: 0; }

.a-feed-list { padding: 6px 20px 16px; }
.a-feed-item { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.a-feed-item:last-child { border-bottom: 0; }
.a-feed-ic { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--accent-soft); color: var(--accent); }
.a-feed-ic.is-pos { background: var(--pos-soft); color: var(--pos); }
.a-feed-ic.is-warn { background: var(--warn-soft); color: var(--warn); }
.a-feed-t { font-size: 12.5px; font-weight: 500; color: var(--ink); line-height: 1.55; }
.a-feed-w { font-size: 10.5px; color: var(--ink3); font-weight: 500; margin-top: 3px; }

/* ================= charts read left to right ============================
   An SVG's coordinate system ignores `direction`, so bars always run left to
   right. The axis beside them is a flex row, which does not — in this RTL
   panel its first label went to the right, and every label named the far end
   of the chart from the bars underneath it. A chart is a figure, not prose:
   both plots are laid out left to right, which also puts the value scale on
   the left where a chart normally has it. Persian copy around them is not
   affected — only these three boxes. */
.a-plot, .a-axis, .a-chart-axis { direction: ltr; }

/* ================= responsive =========================================== */
.a-side-toggle { display: none; }
@media (max-width: 1080px) { .a-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .a-two-col { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
    .a-shell { grid-template-columns: 1fr; }
    .a-side { position: fixed; inset-block: 0; inset-inline-end: 0; width: 262px; z-index: 40; transform: translateX(100%); transition: transform .22s ease; box-shadow: var(--shadow); }
    [dir=ltr] .a-side { transform: translateX(-100%); }
    body.a-open .a-side { transform: none; }
    body.a-open::after { content: ""; position: fixed; inset: 0; background: oklch(0.10 0.02 265 / .55); z-index: 30; }
    .a-side-toggle { display: inline-flex; }
    .a-main { padding: 14px 14px 46px; }
    .a-topbar { padding: 10px 14px; }
}
@media (max-width: 560px) {
    .a-kpis { grid-template-columns: 1fr; }
    .a-topbar h1 { font-size: 17px; }
    .a-topbar-actions { width: 100%; margin-inline-start: 0; }
}
@media print { .a-side, .a-topbar { display: none; } .a-shell { grid-template-columns: 1fr; } }

/* ================= page header (the six screens written earlier) =========
   The dashboard puts its title in the topbar, as the design does. The other
   screens still carry their own heading, so the layout prints a topbar title
   only when a screen asks for one — otherwise the same words would appear
   twice, once above the other. */
.a-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.a-head h1 { font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.2px; line-height: 1.3; }
.a-head p { color: var(--ink3); font-size: 11.5px; font-weight: 500; margin-top: 3px; max-width: 64ch; }
.a-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ================= stat grid (the six screens written earlier) =========== */
.a-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); margin-bottom: 16px; }
.a-cols { display: grid; gap: 14px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.a-stat { padding: 16px 18px; display: block; }
.a-stat > span { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink3); }
.a-stat strong { display: block; font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -1px; margin-top: 12px; font-variant-numeric: tabular-nums; }
.a-stat small { display: block; font-size: 11px; color: var(--ink3); font-weight: 500; margin-top: 10px; }
.a-stat small .a-num, .a-stat small span { display: inline-block; font-size: inherit; font-weight: inherit; color: inherit; }
a.a-stat { transition: border-color .15s, transform .15s; }
a.a-stat:hover { border-color: var(--accent); transform: translateY(-2px); }
a.a-stat.is-on { border-color: var(--accent); }
a.a-stat.is-on strong { color: var(--accent); }

/* ================= range strip ========================================== */
/* The design's own active tab: a soft accent fill, accent text, no border. */
.a-btn.is-on-range { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.a-btn.is-on-range:hover { color: var(--accent); }

/* ================= screens written before this design ==================== */
/* ---------- rows (key → value lists) ---------------------------------- */
.a-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.a-row:last-child { border-bottom: 0; }
.a-row > span:first-child { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-row strong { flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* ---------- table ------------------------------------------------------ */
.a-scroll { overflow-x: auto; border-radius: 16px; }
.a-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.a-table th, .a-table td { padding: 12px 14px; text-align: start; font-size: 13px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.a-table th { background: var(--bg2); font-weight: 800; color: var(--muted); font-size: 11.5px; }
.a-table tbody tr:last-child td { border-bottom: none; }
.a-table tbody tr:hover { background: var(--chip); }
.a-table td.a-wrap { white-space: normal; }

/* ---------- badges ----------------------------------------------------- */
/* A badge is not a button. The old panel used .btn with pointer-events:none,
   which looked clickable and was not. */
.a-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 100px; background: var(--chip); color: var(--muted); white-space: nowrap; }
.a-badge-ok { background: color-mix(in srgb, var(--accent2) 18%, transparent); color: var(--accent2); }
.a-badge-info { background: var(--chip); color: var(--primary); }
.a-badge-warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.a-badge-bad { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }

/* ---------- forms ------------------------------------------------------ */
.a-field { margin-bottom: 15px; }
.a-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.a-input, .a-field input, .a-field select, .a-field textarea {
    width: 100%; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--border);
    background: var(--bg2); color: var(--fg); font: inherit; font-size: 13.5px;
}
.a-input:focus, .a-field input:focus, .a-field select:focus, .a-field textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; }
.a-field textarea { min-height: 110px; resize: vertical; font-family: ui-monospace, monospace; font-size: 13px; }
.a-field-hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.a-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- messages --------------------------------------------------- */
.a-note { padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; font-size: 13.5px; font-weight: 600; border: 1px solid var(--border); background: var(--card); }
.a-note-ok { background: color-mix(in srgb, var(--accent2) 12%, transparent); border-color: var(--accent2); }
.a-note-bad { background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: var(--danger); }
.a-note ul { margin: 0; padding-inline-start: 18px; font-weight: 500; }
.a-empty { padding: 30px 22px; color: var(--muted); font-size: 13px; text-align: center; }
.a-foot-note { color: var(--muted); font-size: 12px; line-height: 1.9; margin-top: 20px; }

/* ---------- pagination -------------------------------------------------- */
/* One pager for every list. There used to be three, plus one list with none. */
.a-pager { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.a-pager-state { font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- feed (reviews / feedback entries) --------------------------- */
.a-feed { background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.a-item { padding: 17px 20px; border-bottom: 1px solid var(--border); }
.a-item:last-child { border-bottom: 0; }
.a-item-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.a-item-top strong { font-size: 13.5px; }
.a-when { color: var(--muted); font-size: 11.5px; margin-inline-start: auto; }
.a-body { margin-top: 10px; font-size: 13.5px; line-height: 2; white-space: pre-line; word-break: break-word; }
.a-stars { color: #ffb524; font-size: 13px; letter-spacing: 1px; direction: ltr; unicode-bidi: isolate; }
.a-item-actions { margin-top: 13px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- code / json ------------------------------------------------- */
.a-code { background: #0b1220; color: #cfe0ff; border-radius: 12px; padding: 15px; font-family: ui-monospace, monospace; font-size: 12.5px; line-height: 1.7; overflow-x: auto; white-space: pre; direction: ltr; text-align: left; }
.a-kv { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 9px 18px; font-size: 13.5px; }
.a-kv dt { color: var(--muted); font-weight: 700; }
.a-kv dd { margin: 0; word-break: break-all; }

/* ---------- guest (sign-in) ---------------------------------------------- */
.a-guest { min-height: 100vh; display: grid; place-items: start center; padding: 9vh 20px 40px; }
.a-guest-box { width: 100%; max-width: 390px; }
.a-guest-brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 800; margin-bottom: 18px; }
.a-guest-brand img { width: 38px; height: 38px; border-radius: 11px; }

/* ---------- sign-in + copy state --------------------------------------- */
.a-remember { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.a-remember input { width: auto; }
.is-copied { color: var(--accent2); }

/* ---------- chart ------------------------------------------------------- */
/* No charting library. The panel loads no third-party script at all, and a
   60 KB dependency to draw thirty rectangles would be the largest thing on
   the page. Bars carry their own figure in a <title>. */
.a-chart svg { width: 100%; display: block; }
.a-chart-axis { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 11px; color: var(--muted); }
.a-chart-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 22px 0; }

/* ---------- small text helpers ------------------------------------------ */
.a-quiet { color: var(--muted); font-weight: 600; }
.a-bad { color: var(--danger); }
.a-mono { font-family: ui-monospace, monospace; font-size: 12.5px; }
.a-link { color: var(--primary); font-weight: 700; }
.a-link:hover { text-decoration: underline; }
.a-sigma { color: var(--muted); font-size: 11.5px; cursor: help; margin-inline-start: 4px; }

/* ---------- figures row (release downloads) ----------------------------- */
.a-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 16px; margin-bottom: 18px; }
.a-figures > div { min-width: 0; }
.a-figures > div > small { display: block; font-size: 11px; color: var(--ink3); margin-top: 3px; }
.a-figures strong { display: block; font-size: 25px; font-weight: 800; line-height: 1.3; }
.a-figures > div > span { color: var(--muted); font-size: 12px; }

/* ---------- forms inside rows ------------------------------------------- */
.a-inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.a-reason { width: auto; min-width: 190px; padding: 7px 11px; font-size: 12.5px; }
.a-date-form { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-inline-start: auto; }
.a-date-form label { font-size: 11.5px; color: var(--muted); }
.a-date-input { width: auto; padding: 6px 10px; font-size: 12.5px; }
.a-select-sm { width: auto; padding: 3px 7px; font-size: 12px; border-radius: 8px; }

/* ---------- kept from the first pass ------------------------------------ */
.a-feed-flat { border: 0; box-shadow: none; background: transparent; border-radius: 0; }
.a-details { margin-top: 12px; }
.a-details summary { cursor: pointer; color: var(--primary); font-size: 12.5px; font-weight: 700; }
.a-pre { white-space: pre-wrap; word-break: break-word; font-size: 11.5px; margin-top: 10px;
         max-height: 340px; overflow: auto; color: var(--muted); direction: ltr; text-align: left; }
.a-reply { margin-top: 10px; }
.a-reply textarea { line-height: 1.7; resize: vertical; font-family: Vazirmatn, system-ui, sans-serif; font-size: 13.5px; }
.a-reply-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 9px; flex-wrap: wrap; }

/* ---------- tabs -------------------------------------------------------- */
/* ---------- inbox: a message card ---------------------------------------- */
/* The old card put the kind, the id, the date and the read button in one flat
   row, then a bare run of six unlabelled values under the message — you could
   not tell the channel from the language from the build. Header, message and
   facts are three separate registers now. */
.a-msg { margin-bottom: 14px; padding: 0; overflow: hidden; }
.a-msg-head {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding: 13px 18px; border-bottom: 1px solid var(--border); background: var(--bg2);
}
.a-msg-id { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.a-msg-when { font-size: 11.5px; color: var(--muted); }
.a-msg-head form { margin-inline-start: auto; }
.a-msg-body { padding: 16px 18px; font-size: 14px; line-height: 1.95; white-space: pre-wrap; word-break: break-word; }
.a-msg-foot { padding: 0 18px 15px; }

/* Unread is a state, not a shade: a solid bar and a badge, not opacity. */
.a-msg.is-new { border-inline-start: 3px solid var(--primary); }
.a-msg.is-read .a-msg-head { background: transparent; }
.a-msg.is-read .a-msg-body { color: var(--muted); }

/* The six facts, each under its own label. */
.a-facts {
    display: grid; gap: 10px 18px; padding: 13px 18px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
    border-top: 1px solid var(--border); background: var(--bg2);
}
.a-fact dt { font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: .2px; }
.a-fact dd { margin: 0; font-size: 12.5px; font-weight: 600; word-break: break-word; }
.a-fact dd.is-none { color: var(--muted); font-weight: 500; }

/* A reply already sent, shown as what it is: a quote, not another paragraph. */
.a-quote {
    border-inline-start: 2px solid var(--accent2); padding: 8px 13px; margin-top: 10px;
    background: color-mix(in srgb, var(--accent2) 7%, transparent);
    border-radius: 0 10px 10px 0; font-size: 13px; line-height: 1.9;
    white-space: pre-wrap; word-break: break-word;
}
[dir=ltr] .a-quote { border-radius: 10px 0 0 10px; }

/* ---------- segmented filter --------------------------------------------- */
/* Five separate outlined buttons read as five decisions. One segmented strip
   reads as one. */
.a-seg { display: inline-flex; background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.a-seg a { padding: 7px 13px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.a-seg a:hover { color: var(--fg); }
.a-seg a.is-on { background: var(--primary); color: #fff; }
.a-seg-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.a-seg-bar .a-pager-state { margin-inline-start: auto; }