@font-face {
  font-family: "AbarMid";
  src: url("/static/fonts/AbarMid-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "AbarMid";
  src: url("/static/fonts/AbarMid-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

* { box-sizing: border-box; }
body {
  font-family: "AbarMid", Tahoma, system-ui, sans-serif;
  margin: 0; background: #f6f7f9; color: #1c2126; line-height: 1.7;
}
header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .5rem;
  background: #fff; padding: .6rem 1rem; border-bottom: 1px solid #e3e6ea;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 8px; display: block; }
.brand-text { margin-right: .5rem; font-weight: 700; font-size: .95rem; color: #1c2126; white-space: nowrap; }
.banner-ok { border-color: #a7e0bd; background: #eafaf1; }
.banner-warn { border-color: #f0d28a; background: #fffaf0; }
nav { display: flex; gap: .75rem; align-items: center; }
nav a { text-decoration: none; color: #1c2126; }
main { max-width: min(96vw, 1280px); margin: 1rem auto; padding: 0 1rem; }
h2 { margin: 1.4rem 0 .6rem; font-size: 1.1rem; }
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
th, td { padding: .6rem .5rem; text-align: right; border-bottom: 1px solid #eef0f3; font-size: .9rem; }
th { background: #f0f2f5; font-weight: 700; }
td.url { max-width: 420px; font-size: .78rem; color: #555; }
.j-title { display:block; font-weight:600; font-size:.88rem; color:#1c2126;
  line-height:1.5; margin-bottom:.15rem }
.j-meta { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center;
  font-size:.72rem; color:#8a94a0 }
.j-code { font-family:ui-monospace,Menlo,monospace; background:#f3f4f6;
  border-radius:4px; padding:0 .3rem; color:#4b5563 }
.j-src { color:#1f6feb; text-decoration:none }
.j-src:hover { text-decoration:underline }
td.when { white-space:nowrap; font-family:ui-monospace,Menlo,monospace;
  font-size:.74rem; color:#8a94a0; direction:ltr; text-align:left }
.badge { padding: .15rem .5rem; border-radius: 999px; font-size: .75rem; }
.s-queued { background: #e8eef7; color: #2c5fb3; }
.s-running { background: #fff3d6; color: #9a6a00; }
.s-done, .s-published { background: #e2f5e9; color: #1e7d46; }
.s-error { background: #fde2e2; color: #b3261e; }
.s-pending { background: #eee; color: #555; }
.s-exists { background: #ede7f6; color: #5e35b1; }
.err { display: block; color: #b3261e; }
.empty, .hint { color: #667; }

/* خلاصه‌ی وضعیت */
.summary { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 .8rem; font-size: .85rem; color: #555; }

/* چیپ‌های فیلتر */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .8rem; }
.chip {
  text-decoration: none; font-size: .8rem; padding: .25rem .7rem; border-radius: 999px;
  background: #fff; color: #444; border: 1px solid #d8dde3;
}
.chip.active { background: #1c2126; color: #fff; border-color: #1c2126; }

/* هشدارهای زرد */
.notif { display: block; color: #9a6a00; font-size: .72rem; margin-top: .15rem; }

/* صفحه‌بندی */
.pager { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 1rem 0; font-size: .85rem; }
.pager a { text-decoration: none; color: #2c5fb3; padding: .3rem .7rem; border: 1px solid #d8dde3; border-radius: 8px; background: #fff; }
.pager a.disabled { color: #aaa; pointer-events: none; border-color: #eee; }

/* فرم */
.card {
  background: #fff; padding: 1.2rem; border-radius: 10px;
  display: flex; flex-direction: column; gap: .6rem; max-width: 620px;
  border: 1px solid #e3e6ea;
}
label { font-weight: 700; font-size: .9rem; }
input, textarea {
  padding: .6rem; border: 1px solid #cfd4da; border-radius: 8px;
  font-size: .95rem; direction: ltr; text-align: left; font-family: monospace;
}
textarea { min-height: 120px; resize: vertical; }
.search { display: flex; gap: .5rem; margin: .2rem 0 .8rem; max-width: 420px; }
.search input { flex: 1; direction: ltr; }
.btn {
  background: #E5232D; color: #fff; border: 0; border-radius: 8px;
  padding: .55rem 1rem; cursor: pointer; text-decoration: none; font-size: .9rem;
  display: inline-block; font-family: inherit;
}
.btn:hover { opacity: .92; }
.btn-sm { padding: .25rem .6rem; font-size: .78rem; }
.btn-ghost { background: #fff; color: #2c5fb3; border: 1px solid #cfd4da; }
form.inline { display: inline; }

.lnk { color:#2c5fb3; text-decoration:none; font-size:.85rem; }
.lnk:hover { text-decoration:underline; }
h3 { margin:1.3rem 0 .5rem; font-size:1rem; }
table.kv { max-width:520px; }
table.kv th { width:140px; text-align:right; color:#555; font-weight:700; }
.gallery { display:flex; flex-wrap:wrap; gap:.4rem; }
.gallery img { width:96px; height:96px; object-fit:contain; background:#fff; border:1px solid #e3e6ea; border-radius:8px; }
.en-desc { max-width:760px; font-size:.85rem; max-height:340px; overflow:auto; }
.en-desc ul { padding-inline-start:1.1rem; }

/* موبایل: جدول‌ها افقی اسکرول شوند تا سرریز نکنند */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  th, td { white-space: nowrap; }
  td.url { max-width: 160px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   لایهٔ طراحیِ «شیشهٔ مایع» — از v2.4
   عمداً به‌صورتِ لایهٔ افزوده در انتهای فایل، نه بازنویسیِ قواعدِ بالا: هر
   کلاسی که قبلاً کار می‌کرد دست‌نخورده می‌ماند و این لایه فقط ظاهرش را
   بازتعریف می‌کند. اگر روزی خواستی برگردی، حذفِ همین بلوک کافی است.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#161b22; --muted:#6b7280; --line:#e6e9ee; --brand:#e5232d;
  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.82);
  --glass-brd:rgba(255,255,255,.72);
  --blur:saturate(180%) blur(20px);
  --shadow-s:0 1px 2px rgba(20,30,45,.05);
  --shadow-m:0 6px 22px rgba(20,30,45,.08);
  --shadow-l:0 14px 40px rgba(20,30,45,.12);
  --r-s:8px; --r-m:12px; --r-l:16px;
}

/* پس‌زمینه — شیشه بدونِ چیزی که پشتش بشکند، فقط خاکستری می‌شود */
body{
  /* لکه‌های رنگی عمدی‌اند: شیشه بدونِ چیزی پشتش فقط خاکستریِ کدر می‌شود.
     شدتشان با آزمونِ چشمی تنظیم شد — به‌اندازه‌ای که شیشه خوانده شود ولی
     متنِ جدول کنتراستش را از دست ندهد. */
  background:
    radial-gradient(1150px 620px at 86% -14%, rgba(229,35,45,.16), transparent 60%),
    radial-gradient(980px 560px at 6% -4%, rgba(58,120,215,.14), transparent 56%),
    radial-gradient(820px 520px at 46% 108%, rgba(255,168,60,.12), transparent 58%),
    linear-gradient(180deg,#f8fafc 0%,#e9edf3 55%,#e3e8ef 100%);
  background-attachment:fixed;
  color:var(--ink);
}

/* هدر عمداً اینجا نیست — استایلش در خودِ base.html است تا در یک جا بماند. */

/* ── سطوحِ کارتی: جدول‌ها و کادرها ───────────────────────────────────────── */
table{
  background:rgba(255,255,255,.66) !important;
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  backdrop-filter:saturate(150%) blur(14px);
  border:1px solid rgba(255,255,255,.65);
  border-radius:var(--r-l) !important;
  box-shadow:var(--shadow-m);
  overflow:hidden;
}
thead th{
  background:rgba(248,250,252,.72) !important;
  border-bottom:1px solid var(--line) !important;
  font-size:.82rem; letter-spacing:.01em; color:#4b5563;
}
tbody tr{transition:background .14s}
tbody tr:hover{background:rgba(255,255,255,.62)}
tbody tr:last-child td{border-bottom:0}
th,td{border-bottom:1px solid rgba(230,233,238,.7)}

/* ── چیپ‌های فیلتر ───────────────────────────────────────────────────────── */
.chip{
  background:rgba(255,255,255,.6) !important;
  border:1px solid rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:var(--shadow-s), inset 0 1px 0 rgba(255,255,255,.8);
  border-radius:999px !important; transition:transform .14s, background .14s;
}
.chip:hover{background:rgba(255,255,255,.9) !important;transform:translateY(-1px)}
.chip.active{
  background:linear-gradient(180deg,#2b323b,#1c2126) !important; color:#fff !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:0 6px 18px rgba(20,30,45,.22), inset 0 1px 0 rgba(255,255,255,.16);
}

/* ── نوارِ خلاصه — از متنِ ساده به پیل‌های شیشه‌ای ─────────────────────────── */
.summary{gap:.45rem !important;align-items:center}
.summary>span{
  background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-radius:999px; padding:.24rem .7rem; box-shadow:var(--shadow-s);
  font-size:.8rem;
}
.summary>span:empty,.summary>span.hint{background:none;border:0;box-shadow:none}

/* ── دکمه‌ها و ورودی‌ها ───────────────────────────────────────────────────── */
button,.btn,.btn-ack{
  border-radius:10px !important;
  transition:transform .14s, box-shadow .14s, background .14s;
}
.btn-ack{
  background:rgba(255,255,255,.66) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:var(--shadow-s), inset 0 1px 0 rgba(255,255,255,.8) !important;
  color:#1c2126;
}
.btn-ack:hover{background:rgba(255,255,255,.95) !important;transform:translateY(-1px);
  box-shadow:var(--shadow-m) !important}
.btn-ack.done{background:rgba(240,242,245,.7) !important;color:#6b7280}
input,select,textarea{
  background:rgba(255,255,255,.7) !important;
  border:1px solid rgba(255,255,255,.8) !important;
  border-radius:10px !important;
  box-shadow:var(--shadow-s), inset 0 1px 0 rgba(255,255,255,.7);
  transition:box-shadow .14s, background .14s;
}
input:focus,select:focus,textarea:focus{
  outline:none; background:#fff !important;
  border-color:rgba(229,35,45,.45) !important;
  box-shadow:0 0 0 3px rgba(229,35,45,.10), var(--shadow-s);
}

/* ── بجِ وضعیت — رنگِ معنایی می‌ماند، فقط شیشه‌ای‌تر ───────────────────────── */
.s-queued,.s-running,.s-done,.s-published,.s-error,.s-pending,.s-exists{
  border:1px solid rgba(255,255,255,.6); box-shadow:var(--shadow-s);
  border-radius:999px; padding:.14rem .55rem; font-size:.76rem;
}

/* ── عنوان‌ها ────────────────────────────────────────────────────────────── */
main h2{font-size:1.12rem;margin:1.1rem 0 .5rem;letter-spacing:-.01em}
main h2:first-child{margin-top:.4rem}

/* ── موبایل: ناوبری به‌جای شکستن، افقی اسکرول شود ─────────────────────────── */
@media (max-width:820px){
  header{padding:10px 12px !important}
  header nav{
    flex-wrap:nowrap !important; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; padding-bottom:2px;
  }
  header nav::-webkit-scrollbar{display:none}
  header nav a{white-space:nowrap;flex:0 0 auto}
  a.whoami{margin-right:.35rem !important}
  main{padding:0 .6rem}
}

/* حرکت را برای کسی که کاهشش را خواسته خاموش کن */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  header nav a:hover,.chip:hover,.btn-ack:hover{transform:none !important}
}