/* ==========================================================================
   Gold / glass theme — adapted from the Claude Design "پنل ایتا" design.
   Reskins every existing class so the panels' HTML and JS stay untouched.
   Palette: dark luxury gold. Fonts: Vazirmatn (body) + JetBrains Mono (numbers).
   ========================================================================== */
@font-face {
  font-family:"Sahel";
  src:url("fonts/SahelVF.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}
@font-face { font-family: mono-fa; src: local("JetBrains Mono"), local("Consolas"), local("Menlo"); }

:root {
  color-scheme: dark;
  --bg-0:#0a0907; --bg-1:#08070a; --bg-2:#060507;
  --gold:#D4AF37; --gold-2:#EBCB6B; --gold-deep:#9c7b1f; --gold-soft:#F0D679;
  --panel:rgba(24,22,18,.88); --panel-solid:#14120d;
  --line:rgba(212,175,55,.20); --line-strong:rgba(212,175,55,.34);
  --text:#F4EFE3; --muted:#9a9588; --faint:#7a756a;
  --accent:var(--gold); --accent-2:var(--gold-2); --accent-3:var(--gold-deep);
  --danger:#e8617e; --good:#40c88c; --warn:#ff9a3c;
  --radius:20px; --radius-sm:14px; --radius-xs:10px;
  --shadow:0 30px 80px -30px rgba(0,0,0,.8), 0 2px 8px #0006;
  --glow:0 0 0 1px rgba(212,175,55,.28), 0 10px 34px rgba(212,175,55,.14);
  --mono:'mono-fa','JetBrains Mono',ui-monospace,monospace;
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }

body {
  margin:0; font-family:"Sahel", Tahoma, sans-serif; color:var(--text);
  background:
    radial-gradient(100% 80% at 82% -8%, rgba(212,175,55,.09), transparent 55%),
    radial-gradient(90% 70% at 8% 108%, rgba(196,128,38,.06), transparent 55%),
    linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 60%, var(--bg-2));
  min-height:100vh; -webkit-font-smoothing:antialiased; position:relative;
}
/* animated gold grid wash behind everything (no HTML needed) */
body::before {
  content:""; position:fixed; inset:-2px; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(212,175,55,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,55,.06) 1px, transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(circle at 50% 30%, black, transparent 86%);
  animation:gridpan 28s linear infinite;
}
@keyframes gridpan { 0%{background-position:0 0;} 100%{background-position:64px 64px;} }
.container { position:relative; z-index:1; }

::selection { background:rgba(212,175,55,.3); }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:rgba(212,175,55,.32); border-radius:20px; }
::-webkit-scrollbar-thumb:hover { background:rgba(212,175,55,.5); }

.container { width:min(1180px,calc(100% - 32px)); margin:36px auto 72px; }

/* ---------- cards (glass gold panels) ---------- */
.card {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow);
  position:relative; overflow:hidden; animation:rise .5s cubic-bezier(.2,.7,.2,1) both;
}
/* gold gradient hairline border via mask */
.card::before {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:.6;
  background:linear-gradient(140deg, var(--gold), transparent 42%, transparent 68%, var(--gold-2));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.narrow { width:min(440px,100%); margin:12vh auto; padding:42px 38px; }

@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
section.grid > .card:nth-child(2) { animation-delay:.06s; }

/* ---------- typography ---------- */
h1,h2,p { margin-top:0; }
h1 { font-size:1.45rem; letter-spacing:-.02em; font-weight:800;
  background:linear-gradient(90deg,var(--gold-2),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
h2 { font-size:1.08rem; font-weight:800; display:flex; align-items:center; gap:9px; color:var(--text); }
h2::before { content:""; width:6px; height:18px; border-radius:6px;
  background:linear-gradient(var(--gold),var(--gold-deep)); box-shadow:0 0 12px rgba(212,175,55,.5); }
p,.hint { color:var(--muted); line-height:1.85; }
.hint { font-size:.88rem; color:var(--faint); }

/* ---------- topbar ---------- */
.topbar {
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  margin-bottom:22px; padding:18px 22px; border-radius:22px;
  border:1px solid var(--line); background:var(--panel);
}
.topbar h1 { font-size:1.15rem; }
#account-status { color:var(--muted); font-size:.8rem; margin:5px 0 0; font-family:var(--mono); }

/* ---------- grids/forms ---------- */
.grid { display:grid; gap:20px; margin:20px 0; }
.two { grid-template-columns:1.05fr .95fr; }
.form-grid { display:grid; gap:16px; }
.job-form { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; }
.inline-form { display:flex; gap:10px; align-items:end; margin:12px 0; }
.inline-form label { flex:1; }

label { display:grid; gap:7px; color:var(--muted); font-size:.84rem; font-weight:600; }
input,select,textarea {
  width:100%; background:rgba(0,0,0,.28); color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 15px;
  font:inherit; transition:border-color .2s, box-shadow .2s, background .2s;
}
input::placeholder,textarea::placeholder { color:var(--faint); }
input:hover,select:hover,textarea:hover { border-color:var(--line-strong); }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.14); background:rgba(0,0,0,.4); }
textarea { min-height:90px; resize:vertical; }
/* ---------- dropdowns (select) ---------- */
select {
  cursor:pointer; appearance:none; -webkit-appearance:none; padding-left:40px; font-weight:600;
  /* gold chevron drawn as two gradients, on the left (RTL) */
  background-image:linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position:calc(0% + 16px) 55%, calc(0% + 21px) 55%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
select:hover { border-color:var(--gold); }
select:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.14); }
/* the native option list (Chromium honors these) */
select option { background:#14120d; color:var(--text); font-weight:600; padding:8px; }
select option:hover, select option:checked { background:var(--gold-deep); color:#1a1305; }

/* ---------- buttons (shiny gold — adapted from 21st.dev shiny-button) ---------- */
@property --sh-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
button {
  border:1.5px solid transparent; border-radius:999px; cursor:pointer; font:inherit; font-weight:800;
  padding:12px 22px; color:#1a1305; position:relative; overflow:hidden;
  /* gold fill (padding-box) + rotating shine ring (border-box) */
  background:
    linear-gradient(145deg,var(--gold-2),var(--gold) 55%,var(--gold-deep)) padding-box,
    conic-gradient(from var(--sh-angle), transparent 0 22%, rgba(255,243,207,.95) 32%, var(--gold-soft) 40%, transparent 50% 100%) border-box;
  box-shadow:0 8px 22px -8px rgba(212,175,55,.6), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s, box-shadow .2s, filter .2s;
}
@keyframes shAngle { to { --sh-angle:360deg; } }
button:hover { transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(212,175,55,.7); filter:brightness(1.05); animation:shAngle 2.4s linear infinite; }
button:active { transform:translateY(0) scale(.98); }
button::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.4),transparent 45%); opacity:0; transition:opacity .3s; }
button:hover::after { opacity:1; }
button.secondary {
  background:var(--panel); color:var(--text); border:1px solid var(--line-strong);
  box-shadow:none;
}
button.secondary:hover { background:rgba(212,175,55,.12); border-color:var(--gold); filter:none; }
button.danger { background:linear-gradient(145deg,#ff8fa3,#e8617e 60%,#b83b57); color:#2a0910; box-shadow:0 8px 22px -8px rgba(232,97,126,.5); }
button.danger.ghost { background:transparent; color:#ff9ab0; border:1px solid rgba(232,97,126,.45); box-shadow:none; }
button.danger.ghost:hover { background:rgba(232,97,126,.14); border-color:var(--danger); box-shadow:none; filter:none; }
.actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; }
.check { display:flex; align-items:center; gap:9px; color:var(--text); font-weight:600; cursor:pointer; }
.check input { width:auto; accent-color:var(--gold); width:18px; height:18px; }

/* ---------- login screen ---------- */
#admin-login { animation:rise .5s both; }
#admin-login h1 { font-size:1.5rem; text-align:center; }
#admin-login > p { text-align:center; }

/* ---------- browser preview ---------- */
.browser-card { display:flex; flex-direction:column; }
.browser-card img {
  display:block; width:100%; min-height:240px; flex:1; object-fit:contain;
  background:repeating-linear-gradient(45deg,#0d0b07,#0d0b07 12px,#100d09 12px,#100d09 24px);
  border:1px solid var(--line); border-radius:14px; transition:opacity .25s;
}
.preview-wrap { position:relative; flex:1; display:flex; }
.live-dot { position:absolute; top:12px; left:12px; display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--good); background:rgba(6,5,7,.7); padding:4px 10px; border-radius:20px; border:1px solid rgba(64,200,140,.3); }
.live-dot::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 8px var(--good); animation:pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.7);} }

/* ---------- jobs ---------- */
.jobs { display:grid; gap:16px; }
.job {
  border:1px solid var(--line); border-radius:16px; padding:18px;
  background:rgba(0,0,0,.22); transition:border-color .2s, transform .2s, box-shadow .2s;
  animation:rise .4s both;
}
.job:hover { border-color:var(--line-strong); transform:translateY(-2px); box-shadow:0 12px 30px #0005; }
.job-header { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.job-title { font-weight:800; font-size:1rem; }
.badge {
  border-radius:999px; padding:5px 13px; font-size:.74rem; font-weight:800; font-family:var(--mono);
  display:inline-flex; align-items:center; gap:7px; background:rgba(212,175,55,.16); color:var(--gold-2);
}
.badge::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
.badge.running { background:rgba(212,175,55,.18); color:var(--gold-2); }
.badge.running::before { animation:pulse 1.3s infinite; }
.badge.completed { background:rgba(64,200,140,.18); color:#7af0b6; }
.badge.retrying { background:rgba(255,154,60,.18); color:#ffb974; }
.badge.retrying::before { animation:pulse 1.3s infinite; }
.badge.stopped,.badge.failed,.badge.queued { background:rgba(232,97,126,.18); color:#ff9ab0; }
.job-meta { font-size:.82rem; color:var(--muted); margin:10px 0 6px; font-family:var(--mono); }
.job-error { color:#ff9ab0; white-space:pre-wrap; font-size:.85rem; }
.artifacts { margin-top:14px; display:flex; gap:9px; flex-wrap:wrap; }
.download {
  color:var(--gold-2); text-decoration:none; border:1px solid rgba(212,175,55,.4);
  border-radius:10px; padding:8px 12px; font-size:.84rem; font-weight:700;
  display:inline-flex; align-items:center; gap:7px; transition:background .2s, transform .15s, border-color .2s;
  background:rgba(212,175,55,.08);
}
.download::before { content:"\2193"; font-weight:800; }
.download:hover { background:rgba(212,175,55,.2); transform:translateY(-2px); border-color:var(--gold); }

/* ---------- analysis ---------- */
.analysis { margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.analysis summary { cursor:pointer; font-weight:800; color:var(--gold); list-style:none; display:flex; align-items:center; gap:8px; transition:color .2s; }
.analysis summary::before { content:"\25C2"; transition:transform .2s; font-size:.8em; }
.analysis[open] summary::before { transform:rotate(-90deg); }
.analysis summary:hover { color:var(--gold-2); }
.analysis-body { margin-top:14px; display:grid; gap:14px; animation:rise .3s both; }
.analysis-section { display:grid; gap:9px; }
.analysis-section strong { color:var(--text); }
.analysis-section hr { border:none; border-top:1px solid var(--line); margin:4px 0; }
.ref-label { display:grid; gap:7px; color:var(--muted); font-size:.84rem; }
.chart-option { display:flex; align-items:flex-start; gap:9px; padding:11px 13px; border:1px solid rgba(212,167,44,.35); border-radius:10px; background:rgba(212,167,44,.07); color:var(--text); font-size:.88rem; line-height:1.7; cursor:pointer; }
.chart-option input { width:18px; height:18px; margin-top:3px; flex:0 0 auto; accent-color:var(--gold); }
input[type=file] { padding:9px; cursor:pointer; }

/* ---------- notice ---------- */
#notice { min-height:0; color:var(--gold-2); margin:0 0 12px; font-weight:600; transition:opacity .2s; }
#notice:empty { margin:0; }
#notice:not(:empty) { padding:12px 16px; border-radius:var(--radius-sm); background:rgba(212,175,55,.1); border:1px solid rgba(212,175,55,.28); animation:rise .3s both; }
#notice.error { color:#ffb3c2 !important; background:rgba(232,97,126,.1) !important; border-color:rgba(232,97,126,.32) !important; }

/* ---------- date picker ---------- */
.jalali-date { cursor:pointer; }
.jalali-date:disabled { opacity:.4; cursor:not-allowed; }
.jdp-pop {
  position:absolute; z-index:1000; width:264px; background:rgba(16,14,10,.97);
  border:1px solid var(--line-strong); border-radius:16px; padding:14px;
  box-shadow:0 24px 60px #000a; backdrop-filter:blur(16px);
  transform-origin:top center; opacity:0; transform:translateY(-6px) scale(.97);
  transition:opacity .16s ease, transform .16s ease;
}
.jdp-pop.jdp-in { opacity:1; transform:none; }
.jdp-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.jdp-title { flex:1; background:transparent; color:var(--text); font-weight:800; font-size:.95rem; box-shadow:none; padding:8px; border-radius:9px; border:0; }
.jdp-title:hover { background:rgba(212,175,55,.12); transform:none; filter:none; }
.jdp-title-static { text-align:center; }
.jdp-nav {
  background:rgba(212,175,55,.12); color:var(--text); border-radius:9px; border:0;
  padding:0; width:36px; height:36px; font-size:1.25rem; line-height:1; box-shadow:none;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.jdp-nav:hover { background:var(--gold); color:#1a1305; transform:none; }
.jdp-week { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:6px; }
.jdp-week span { text-align:center; color:var(--faint); font-size:.74rem; font-weight:700; padding:4px 0; }
.jdp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.jdp-empty { display:block; }
.jdp-day,.jdp-cell {
  background:transparent; color:var(--text); border-radius:9px; padding:8px 0; border:1px solid transparent;
  font-weight:600; font-size:.86rem; box-shadow:none;
}
.jdp-cell { padding:12px 4px; }
.jdp-anim > button { animation:cellpop .26s both; }
@keyframes cellpop { from { opacity:0; transform:scale(.8); } to { opacity:1; transform:none; } }
.jdp-day:hover,.jdp-cell:hover { background:rgba(212,175,55,.16); transform:translateY(-1px); filter:none; }
.jdp-day.today,.jdp-cell.today { border-color:var(--gold); }
.jdp-day.sel,.jdp-cell.sel { background:linear-gradient(145deg,var(--gold-2),var(--gold-deep)); color:#1a1305; font-weight:800; }
.jdp-months { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.jdp-foot { margin-top:10px; text-align:center; }
.jdp-today { background:rgba(212,175,55,.14); color:var(--text); border-radius:9px; padding:8px 22px; font-size:.84rem; font-weight:700; box-shadow:none; border:0; }
.jdp-today:hover { background:var(--gold); color:#1a1305; }

.opt { color:var(--faint); font-weight:400; font-size:.8em; }

/* ---------- platform tabs ---------- */
.platform-tabs {
  display:flex; gap:8px; margin-bottom:22px; padding:7px; border-radius:999px;
  background:var(--panel); border:1px solid var(--line); width:fit-content;
  animation:rise .5s both;
}
.platform-tabs a {
  text-decoration:none; color:var(--muted); font-weight:700; font-size:.92rem;
  padding:10px 22px; border-radius:999px; transition:background .2s, color .2s, transform .15s;
}
.platform-tabs a:hover { color:var(--text); background:rgba(212,175,55,.1); }
.platform-tabs a.active {
  color:#1a1305; background:linear-gradient(145deg,var(--gold-2),var(--gold-deep));
  box-shadow:0 6px 18px -6px rgba(212,175,55,.6);
}

/* ---------- spinners & busy state ---------- */
.spinner {
  display:inline-block; width:15px; height:15px; vertical-align:-2px; margin-left:8px;
  border:2px solid rgba(26,19,5,.35); border-top-color:#1a1305; border-radius:50%;
  animation:spin .7s linear infinite;
}
.spinner.big { width:30px; height:30px; border-width:3px; margin:0;
  border-color:rgba(212,175,55,.22); border-top-color:var(--gold); }
@keyframes spin { to { transform:rotate(360deg); } }
button.busy { cursor:progress; filter:saturate(.8) brightness(.96); transform:none !important; box-shadow:none; }
button.busy::after { opacity:0 !important; }
button.secondary .spinner, button.danger.ghost .spinner { border-color:rgba(212,175,55,.3); border-top-color:var(--gold); }
button:disabled, button[aria-disabled="true"] {
  cursor:not-allowed; opacity:.58; transform:none !important; filter:saturate(.55);
  box-shadow:none; animation:none !important;
}

/* ---------- guided flow & global operation feedback ---------- */
.ux-route-guide {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px;
  margin:-10px 0 22px; padding:8px; border:1px solid var(--line);
  border-radius:16px; background:rgba(12,10,7,.68); box-shadow:0 12px 34px #0004;
}
.ux-route-guide span {
  display:flex; align-items:center; justify-content:center; gap:8px; min-height:42px;
  color:var(--muted); font-size:.78rem; font-weight:700; text-align:center;
  border-radius:11px; background:rgba(255,255,255,.018);
}
.ux-route-guide b {
  display:grid; place-items:center; width:24px; height:24px; flex:0 0 24px;
  border-radius:50%; color:#1a1305; background:linear-gradient(145deg,var(--gold-2),var(--gold));
  font-family:var(--mono); font-size:.72rem; box-shadow:0 0 14px rgba(212,175,55,.25);
}
.ux-operation-status {
  position:sticky; top:12px; z-index:80; display:grid;
  grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px;
  margin:0 0 18px; padding:15px 17px; border:1px solid rgba(212,175,55,.45);
  border-radius:16px; background:rgba(20,18,13,.96); backdrop-filter:blur(16px);
  box-shadow:0 18px 48px #0009, 0 0 28px rgba(212,175,55,.10); animation:rise .22s both;
}
.ux-operation-copy { display:grid; gap:5px; min-width:0; }
.ux-operation-title { color:var(--gold-soft); font-size:.94rem; }
.ux-operation-detail { color:var(--muted); font-size:.8rem; line-height:1.65; }
.ux-operation-time { color:var(--gold); font:700 .76rem var(--mono); white-space:nowrap; }
.ux-operation-bar { height:4px; margin-top:3px; overflow:hidden; border-radius:20px; background:rgba(212,175,55,.13); }
.ux-operation-bar span { display:block; width:34%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--gold-deep),var(--gold-2)); animation:indet 1.25s ease-in-out infinite; }
.ux-operation-status.is-finishing { opacity:0; transform:translateY(-5px); transition:opacity .35s, transform .35s; }
.ux-operation-status.is-error { border-color:rgba(232,97,126,.55); }

/* Stronger grouping without changing the existing document structure. */
.card + .card, .card + .grid, .grid + .card { margin-top:20px; }
.card > h2:first-child { margin-bottom:14px; }
.form-grid > label, .inline-form > label { min-width:0; }
.job-card, .job { isolation:isolate; }
.job-card .job-progress:not(:empty) { padding:11px 13px; border-radius:11px; background:rgba(212,175,55,.07); border:1px solid rgba(212,175,55,.18); }

/* Visual-only indeterminate progress for every long-running platform job.
   It follows existing status classes and never changes job state or progress. */
.job:has(.badge.running, .badge.queued, .badge.retrying),
.job-card:has(.badge.running, .badge.queued, .badge.retrying) {
  position:relative; padding-bottom:30px !important;
}
.job:has(.badge.running, .badge.queued, .badge.retrying)::after,
.job-card:has(.badge.running, .badge.queued, .badge.retrying)::after {
  content:""; position:absolute; right:18px; left:18px; bottom:10px; height:6px;
  border:1px solid rgba(212,175,55,.22); border-radius:999px;
  background-color:rgba(212,175,55,.10);
  background-image:linear-gradient(90deg,var(--gold-deep),var(--gold-2),#fff2b2,var(--gold));
  background-repeat:no-repeat; background-size:34% 100%;
  box-shadow:inset 0 1px 2px #0006,0 0 13px rgba(212,175,55,.22);
  pointer-events:none; animation:jobIndeterminate 1.45s ease-in-out infinite;
}
@keyframes jobIndeterminate {
  0% { background-position:-55% 0; }
  100% { background-position:155% 0; }
}

/* ---------- live operation panel (analysis) ---------- */
.op-progress {
  display:flex; align-items:center; gap:16px; margin-top:16px; padding:16px 18px;
  border-radius:16px; border:1px solid rgba(212,175,55,.3);
  background:linear-gradient(135deg, rgba(212,175,55,.12), rgba(156,123,31,.06));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 30px #0005;
  animation:rise .3s both;
}
.op-progress-body { flex:1; display:grid; gap:7px; min-width:0; }
.op-stage { font-weight:800; color:var(--gold-soft); font-size:.96rem; }
.op-sub { font-size:.8rem; color:var(--faint); font-family:var(--mono); }
.op-timer { color:var(--gold); font-weight:800; font-variant-numeric:tabular-nums; font-family:var(--mono); }
.op-bar { height:5px; border-radius:20px; background:rgba(212,175,55,.16); overflow:hidden; position:relative; }
.op-bar > span {
  position:absolute; inset:0; width:38%; border-radius:20px;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  box-shadow:0 0 12px rgba(212,175,55,.5); animation:indet 1.25s ease-in-out infinite;
}
@keyframes indet { 0%{transform:translateX(-130%);} 100%{transform:translateX(330%);} }

/* ---------- responsive ---------- */
@media (max-width:760px) {
  .two,.job-form { grid-template-columns:1fr; }
  .inline-form,.topbar { flex-direction:column; align-items:stretch; }
  .inline-form label { width:100%; }
  .container { margin:16px auto 56px; width:calc(100% - 24px); }
  h1 { font-size:1.25rem; }
  .card { padding:18px 16px; }
  .narrow { padding:28px 22px; }
  .platform-tabs { width:100%; justify-content:stretch; }
  .platform-tabs a { flex:1; text-align:center; padding:10px 12px; font-size:.85rem; }
  .narrow { margin:8vh auto; }
  .jdp-pop { width:calc(100vw - 32px); max-width:310px; }
  .actions { gap:7px; }
  button { padding:13px 18px; font-size:.95rem; }
  .ux-route-guide { grid-template-columns:1fr 1fr; margin-top:-8px; }
  .ux-route-guide span { justify-content:flex-start; padding:7px 9px; text-align:right; }
  .ux-operation-status { top:8px; grid-template-columns:auto 1fr; }
  .ux-operation-time { grid-column:2; }
}

@media (max-width:400px) {
  .container { width:calc(100% - 16px); }
  .card { padding:14px 12px; }
  .platform-tabs a { font-size:.78rem; padding:10px 8px; }
}

/* prevent mobile browser zoom on input focus (needs font-size >= 16px) */
@media (max-width:760px) {
  input, select, textarea { font-size:16px !important; }
}

/* bigger touch targets on mobile */
@media (pointer:coarse) {
  button { min-height:44px; }
  input, select { min-height:44px; }
  .jdp-day,.jdp-cell { padding:10px 0; }
  .jdp-nav { width:42px; height:42px; }
  .download { padding:10px 14px; }
  .check input { width:22px; height:22px; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}
/* ==========================================================================
   Digital Serenity site background + Aurora processing background
   (adapted from 21st.dev digital-serenity + animated-background, gold-tuned).
   Injected once by theme-bg.js so no per-page HTML changes are needed.
   ========================================================================== */
#site-bg { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
#site-bg .glow {
  position:absolute; top:0; left:0; width:520px; height:520px; border-radius:50%;
  transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(212,175,55,.1), transparent 64%);
  opacity:0; transition:opacity .6s ease; will-change:transform;
}
#site-bg .dot { position:absolute; border-radius:50%; }
#site-bg .orb { position:absolute; border-radius:50%; }
#site-bg .corner { position:absolute; width:46px; height:46px; }
@keyframes serenityFloat {
  0%,100% { transform:translateY(0) translateX(0); opacity:.5; }
  25% { transform:translateY(-22px) translateX(12px); opacity:1; }
  50% { transform:translateY(-12px) translateX(-10px); opacity:.7; }
  75% { transform:translateY(-26px) translateX(8px); opacity:.9; }
}
@keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-14px); } }

/* PROCESSING STATE — no extra heavy layer; instead the SAME ambient background
   visibly changes so it's obvious the app is working. All cheap (no blur). */
body.processing::before {           /* the grid brightens, turns gold and speeds up */
  opacity:.9; animation-duration:9s;
  background-image:linear-gradient(rgba(212,175,55,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(212,175,55,.15) 1px, transparent 1px);
}
body.processing::after {            /* a breathing gold wash from the top */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(130% 90% at 50% -5%, rgba(212,175,55,.16), transparent 55%);
  animation:procPulse 2.4s ease-in-out infinite;
}
@keyframes procPulse { 0%,100%{opacity:.45;} 50%{opacity:1;} }
body.processing #site-bg .dot { animation-duration:6s !important; }   /* dots float faster */
body.processing #site-bg .orb { filter:blur(16px) brightness(1.6); } /* orbs glow up */
body.processing #site-bg::before {  /* a gold sweep line at the top = "working" */
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold-2), transparent); animation:sweep 1.8s linear infinite;
}
@keyframes sweep { 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* Hierarchical Menu Styles */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.menu-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.menu-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  border-color: var(--gold);
}

.menu-card svg.logo {
  width: 100px;
  height: 100px;
  transition: transform 0.3s ease;
}

.menu-card:hover svg.logo {
  transform: scale(1.1);
}

.menu-card h2 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: bold;
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.menu-list-btn {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 1.5rem;
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
}

.menu-list-btn:hover {
  transform: translateY(-5px);
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 10px 30px rgba(0, 122, 255, 0.3);
}

.menu-logo-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  transition: transform 0.3s ease;
  margin-bottom: 1rem;
}

.menu-card:hover .menu-logo-img {
  transform: scale(1.1);
}


/* New UI Redesign V2 */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.home-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 30px;
  aspect-ratio: 1; /* Makes it perfectly square */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  cursor: pointer;
  padding: 2rem;
}

.home-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  border-color: var(--gold);
}

.home-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.home-card:hover img {
  transform: scale(1.1);
}

/* Unified landing page: platform identity and all capabilities in one view. */
.home-shell { width:min(1880px,calc(100% - 32px)); }
.home-hero {
  position:relative; overflow:hidden; margin-bottom:26px; padding:34px 38px;
  border:1px solid var(--line); border-radius:26px; text-align:center;
  background:linear-gradient(135deg,rgba(33,29,20,.94),rgba(15,13,10,.92));
  box-shadow:var(--shadow);
}
.home-hero::after {
  content:""; position:absolute; width:360px; height:360px; top:-285px; left:50%;
  transform:translateX(-50%); border-radius:50%; pointer-events:none;
  background:rgba(212,175,55,.18); filter:blur(32px);
}
.home-eyebrow {
  display:inline-flex; margin-bottom:10px; padding:6px 13px; border-radius:999px;
  color:var(--gold-soft); border:1px solid rgba(212,175,55,.3);
  background:rgba(212,175,55,.08); font-size:.76rem; font-weight:800;
}
.home-hero h1 { margin:0; font-size:clamp(1.45rem,2.5vw,2.15rem); }
.home-hero p { margin:11px 0 0; color:var(--muted); }

.platform-hub-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch;
  width:100%; max-width:1800px; margin:0 auto; justify-content:center;
}
.platform-hub-card {
  --platform-tint:212,175,55;
  position:relative; overflow:hidden; display:flex; flex-direction:column; min-width:0;
  padding:24px 20px; border:1px solid var(--line); border-radius:28px; text-align:center;
  background:linear-gradient(160deg,rgba(var(--platform-tint),.08),transparent 34%),var(--panel);
  box-shadow:var(--shadow); animation:rise .45s both;
}
.platform-hub-card:nth-child(2) { animation-delay:.06s; }
.platform-hub-card:nth-child(3) { animation-delay:.12s; }
.platform-telegram { --platform-tint:42,171,238; }
.platform-eitaa { --platform-tint:242,142,35; }
.platform-bale { --platform-tint:55,185,143; }
.platform-hub-card::before {
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; padding:1px;
  background:linear-gradient(145deg,rgba(var(--platform-tint),.72),transparent 38%,transparent 70%,rgba(212,175,55,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.platform-hub-header {
  display:flex; flex-direction:row; justify-content:center; align-items:center; gap:20px;
  min-height:174px; padding:6px 8px 24px; border-bottom:1px solid var(--line); text-align:right;
}
.platform-logo-wrap {
  width:124px; height:124px; display:grid; place-items:center; padding:11px;
  border-radius:30px; border:1px solid rgba(var(--platform-tint),.3);
  background:rgba(var(--platform-tint),.10); box-shadow:inset 0 0 24px rgba(var(--platform-tint),.08);
}
.platform-logo-wrap img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 9px 14px #0007); }
.platform-bale .platform-logo-wrap { overflow:hidden; }
.platform-bale .platform-logo-wrap img { object-fit:cover; object-position:center top; }
.platform-summary { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.platform-kicker { color:rgba(var(--platform-tint),.95); font-size:.9rem; font-weight:900; }
.platform-hub-header p { margin:0; color:var(--faint); font-size:.91rem; line-height:1.8; }

.platform-capabilities { display:flex; flex-direction:column; gap:18px; padding-top:22px; }
.capability-link {
  display:grid; grid-template-columns:42px minmax(0,1fr) 26px; gap:8px; align-items:center;
  min-height:92px; padding:15px 12px; border:1.5px solid transparent; border-radius:18px;
  color:#1a1305; text-decoration:none; text-align:center; font-weight:900; font-size:1.16rem;
  line-height:1.55; white-space:nowrap; position:relative; overflow:hidden;
  background:
    linear-gradient(145deg,var(--gold-2),var(--gold) 57%,var(--gold-deep)) padding-box,
    conic-gradient(from var(--sh-angle),transparent 0 25%,rgba(255,248,220,.95) 34%,transparent 44% 100%) border-box;
  box-shadow:0 9px 22px -11px rgba(212,175,55,.85),inset 0 1px 0 rgba(255,255,255,.32);
  transition:transform .16s,box-shadow .2s,filter .2s;
}
.capability-link:hover {
  transform:translateY(-3px); filter:brightness(1.06);
  box-shadow:0 15px 30px -12px rgba(212,175,55,.95); animation:shAngle 2.4s linear infinite;
}
.capability-link:focus-visible { outline:3px solid rgba(240,214,121,.42); outline-offset:3px; }
.capability-number {
  display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
  color:#171004; background:rgba(26,19,5,.22); border:2px solid rgba(26,19,5,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2); font-family:inherit; font-size:1rem; font-weight:900;
}
.capability-arrow { font-size:1.28rem; font-weight:900; transition:transform .18s; }
.capability-link:hover .capability-arrow { transform:translateX(-4px); }

/* Keep the current desktop dashboard within a standard-height viewport.
   Scrolling remains untouched and naturally returns when content grows. */
@media (min-width:1481px) {
  .home-shell { margin-top:16px; margin-bottom:20px; }
  .home-hero { margin-bottom:16px; padding:20px 32px; }
  .home-hero p { margin-top:7px; }
}

@media (max-width:1480px) {
  .platform-hub-grid { grid-template-columns:1fr; }
  .platform-hub-card { width:100%; max-width:980px; justify-self:center; }
}

@media (max-width:680px) {
  .home-shell { width:calc(100% - 20px); margin-top:16px; }
  .home-hero { padding:26px 18px; border-radius:20px; }
  .home-hero p { font-size:.84rem; }
  .platform-hub-card { display:flex; padding:19px; border-radius:22px; }
  .platform-hub-header { min-height:150px; gap:14px; border-left:0; border-bottom:1px solid var(--line); padding:2px 1px 18px; }
  .platform-logo-wrap { width:104px; height:104px; border-radius:25px; flex:0 0 auto; }
  .platform-kicker { font-size:.84rem; }
  .platform-hub-header p { font-size:.82rem; }
  .platform-capabilities { gap:14px; padding-top:18px; }
  .capability-link { min-height:82px; font-size:1rem; white-space:normal; }
  .capability-number { width:36px; height:36px; font-size:.92rem; }
}

.submenu-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 800px;
  margin: 2rem auto;
}

.logo-header-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  margin-bottom: 1rem;
}

.logo-header-card img {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
}

.action-btn-card {
  border: 1.5px solid transparent;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 900;
  font-size: 1.4rem;
  padding: 2.5rem 2rem;
  color: #1a1305;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 1rem;
  
  /* gold fill (padding-box) + rotating shine ring (border-box) */
  background:
    linear-gradient(145deg, var(--gold-2), var(--gold) 55%, var(--gold-deep)) padding-box,
    conic-gradient(from var(--sh-angle), transparent 0 22%, rgba(255,243,207,.95) 32%, var(--gold-soft) 40%, transparent 50% 100%) border-box;
  box-shadow: 0 8px 22px -8px rgba(212,175,55,.6), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .15s, box-shadow .2s, filter .2s;
}

.action-btn-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px -8px rgba(212,175,55,.8);
  filter: brightness(1.05);
  animation: shAngle 2.4s linear infinite;
}

.highlight-section {
  border-color: var(--gold) !important;
  box-shadow: 0 0 15px rgba(212,175,55,.3) !important;
  transform: scale(1.02);
  z-index: 10;
  position: relative;
}
.highlight-section h2 {
  color: var(--gold);
}

#report-content h1, #report-content h2, #report-content h3 {
  color: #1a1a1a !important;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 5px;
  margin-top: 1.5em;
}

@media print {
  /* Hide non-print elements explicitly to avoid visibility layout bugs */
  header, #account-section, #dashboard, #ai-section, #jobs-section, 
  #output-section > div:first-child, .actions {
    display: none !important;
  }
  
  html, body {
    background: #fff !important;
    color: #000 !important;
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
  }

  .card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    backdrop-filter: none !important;
  }
  
  #export-container {
    padding: 0 !important;
    background: transparent !important;
  }
  
  #report-content {
    border: none !important;
    background: transparent !important;
    color: #000 !important;
    font-size: 12pt !important;
  }
  
  /* Ensure page breaks don't cut charts */
  #charts-container canvas {
    page-break-inside: avoid;
    max-width: 100% !important;
    margin-bottom: 30px !important;
  }
  
  h1, h2, h3, h4 {
    page-break-after: avoid;
    color: #000 !important;
  }
  
  p, li, table {
    page-break-inside: avoid;
  }
}

/* ==========================================================================
   Dashboard Services Grid & Toggles
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.service-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;
  overflow: hidden;
  animation: rise .5s cubic-bezier(.2,.7,.2,1) both;
}
.service-card::before {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:.6;
  background:linear-gradient(140deg, var(--gold), transparent 42%, transparent 68%, var(--gold-2));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}

.service-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.service-title {
  margin: 0;
  font-size: 1.15rem;
}

.service-status-text {
  color: var(--muted);
  font-size: 0.9rem;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
}
.status-badge.on {
  background: rgba(64, 200, 140, 0.15);
  color: var(--good);
  border: 1px solid rgba(64, 200, 140, 0.3);
}
.status-badge.off {
  background: rgba(232, 97, 126, 0.15);
  color: var(--danger);
  border: 1px solid rgba(232, 97, 126, 0.3);
}

.open-btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  margin-top: auto;
}
.open-btn.disabled {
  pointer-events: none;
  opacity: 0.5;
  filter: grayscale(1);
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255,255,255,0.1);
  transition: .3s;
  border-radius: 26px;
  border: 1px solid var(--line);
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 3px;
  background-color: var(--muted);
  transition: .3s;
  border-radius: 50%;
}
input:checked + .toggle-slider {
  background-color: rgba(212, 175, 55, 0.3);
  border-color: var(--gold);
}
input:checked + .toggle-slider:before {
  transform: translateX(24px);
  background-color: var(--gold);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
}
input:disabled + .toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}
/* AI connection credentials are managed only from the global settings page.
   The legacy controls stay in the DOM as an internal compatibility bridge for
   existing feature scripts, but are never exposed as per-feature settings. */
#ai-settings-section,
.ai-card,
[data-legacy-ai-settings] {
  display: none !important;
}

.grid.two:has(> [data-legacy-ai-settings]),
.analysis-grid:has(> .ai-card[hidden]) {
  grid-template-columns: minmax(0, 1fr) !important;
}
.shield-word-search {
  display: grid;
  gap: 0.45rem;
  margin-top: 1rem;
}

.shield-word-list {
  display: grid;
  gap: 0.5rem;
  max-height: 21rem;
  overflow: auto;
  padding-inline-end: 0.25rem;
  scrollbar-width: thin;
}

.shield-word-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.8rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0.75rem;
  background: rgba(15, 23, 42, 0.28);
}

.shield-word-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.shield-word-value {
  font-family: ui-monospace, "Cascadia Code", "Courier New", monospace;
  letter-spacing: 0.08em;
}

.shield-word-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.shield-collapsible-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.shield-collapsible-head h2,
.shield-collapsible-head p {
  margin-block: 0;
}

.shield-collapsible-head p {
  margin-top: 0.4rem;
}

.shield-collapsible-content {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.shield-collapsible-content[hidden] {
  display: none !important;
}

/* Block-causing messages: keep long Persian text legible inside the dark shield tables. */
.block-messages-box {
  display: block;
  min-width: 18rem;
  color: var(--text);
}

.block-messages-box > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: rgba(212, 175, 55, 0.1);
  color: var(--gold-2);
  font-weight: 800;
  line-height: 1.6;
}

.block-messages-box[open] > summary {
  background: rgba(212, 175, 55, 0.16);
}

.block-messages-box > div {
  display: grid;
  gap: 0.65rem;
  width: min(36rem, 78vw);
  max-height: 24rem;
  overflow: auto;
  margin-top: 0.65rem;
  padding: 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(6, 5, 7, 0.94);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.block-message-item {
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 0.75rem;
  background: rgba(25, 22, 17, 0.98);
  color: var(--text);
}

.block-message-item small {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--gold-2);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.7;
}

.block-message-item p {
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .block-messages-box {
    min-width: 14rem;
  }

  .block-messages-box > div {
    width: min(30rem, 84vw);
  }

  .shield-collapsible-head {
    align-items: stretch;
    flex-direction: column;
  }
}