/* Design system shared by every screen. Colour tokens come from theme.css. */
@font-face { font-family:'Vazirmatn'; src:url('/static/fonts/Vazirmatn-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Vazirmatn'; src:url('/static/fonts/Vazirmatn-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }

:root {
  --r-sm:8px; --r-md:11px; --r-lg:16px; --r-xl:20px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sh-1:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --sh-2:0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.04);
  --sh-3:0 14px 40px rgba(16,24,40,.14);
  --ring:0 0 0 3px var(--acc-s);
  --maxw:1040px;
  --font:'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
  --mono:'Cascadia Mono', Consolas, 'Courier New', monospace;
}
:root[data-theme="dark"] { --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 4px 14px rgba(0,0,0,.45); --sh-3:0 16px 44px rgba(0,0,0,.55); }

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
/* wins over component display rules, so the hidden attribute always works */
[hidden] { display:none !important; }
body {
  margin:0; background:var(--bg); color:var(--ink); font:15px/1.85 var(--font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:radial-gradient(1200px 400px at 100% 0, color-mix(in srgb, var(--acc) 7%, transparent), transparent 70%);
  background-repeat:no-repeat; background-attachment:fixed;
}
::selection { background:color-mix(in srgb, var(--acc) 26%, transparent); }
:focus-visible { outline:2px solid var(--acc); outline-offset:2px; border-radius:var(--r-sm); }

/* ---------- layout ---------- */
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-4) var(--sp-6); }
.topbar {
  position:sticky; top:0; z-index:20; backdrop-filter:saturate(160%) blur(12px);
  background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom:1px solid var(--line);
}
.topbar > div { max-width:var(--maxw); margin:0 auto; padding:10px var(--sp-4); display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }

/* ---------- application shell: fixed sidebar + content, RTL so the rail sits on the right ---------- */
:root { --rail:250px; --shell-pad:var(--sp-5); }
body.shell { background-attachment:local; }
.shell { display:grid; grid-template-columns:var(--rail) minmax(0,1fr); min-height:100vh; }
.sidebar {
  grid-column:1; display:flex; flex-direction:column; gap:var(--sp-2);
  background:var(--card); border-inline-end:1px solid var(--line);
  padding:var(--sp-4) var(--sp-3) var(--sp-5); position:sticky; top:0; align-self:start; width:var(--rail);
  height:100vh; height:100dvh; min-height:0; overflow-y:auto; z-index:30;
}
.sidebar .brand { padding:0 var(--sp-2) var(--sp-4); }
.sidebar nav { display:grid; gap:2px; }
.sidebar nav a, .sidebar nav button {
  display:flex; align-items:center; gap:9px; justify-content:flex-start; width:100%; text-align:start;
  text-decoration:none; color:var(--mute); font-size:12.5px; padding:7px 8px 7px 11px; padding-inline-start:22px; border-radius:var(--r-sm);
  min-height:38px; border:1px solid transparent; background:transparent;
}
.sidebar nav a:hover, .sidebar nav button:hover { color:var(--ink); background:var(--acc-s); }
.sidebar nav a[aria-current="page"], .sidebar nav button[aria-current="page"] {
  color:var(--brand); background:var(--acc-s); border-color:color-mix(in srgb, var(--acc) 30%, transparent);
  font-weight:600; box-shadow:inset 3px 0 0 var(--acc);
}
.sidebar .group { padding:var(--sp-3) var(--sp-2) var(--sp-1); font-size:14px; font-weight:700; color:var(--ink); letter-spacing:0; }
.nav-submenu { margin:0 4px 5px; border-inline-start:1px solid var(--line); padding-inline-start:8px; color:var(--mute); font-size:12px; }
.nav-submenu summary { cursor:pointer; padding:5px 8px; list-style-position:inside; }
.nav-submenu-list { display:grid; gap:3px; padding:2px 0 5px; }
.nav-article { padding-inline-start:7px; }
.sidebar nav details.nav-article { margin-inline-start:8px; border-inline-start:1px solid var(--line); }
.sidebar nav details.nav-article > summary { display:block; padding:5px 8px; padding-inline-start:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; font-size:12px; }
.nav-article summary[aria-current="page"] { color:var(--brand); font-weight:700; }
.sidebar nav a.nav-subitem, .sidebar nav button.nav-subitem { min-height:30px; padding:4px 8px 4px 10px; padding-inline-start:34px; font-size:11.5px; border:0; }
.nav-submenu-empty { padding:4px 8px; font-size:11.5px; }
.sidebar nav details.nav-parent > summary { display:flex; align-items:center; width:100%; min-height:38px; padding:7px 8px 7px 11px; padding-inline-start:22px; border:1px solid transparent; border-radius:var(--r-sm); color:var(--mute); font-size:12.5px; cursor:pointer; list-style-position:inside; }
.sidebar nav details.nav-parent > summary:hover { color:var(--ink); background:var(--acc-s); }
.sidebar nav details.nav-parent > summary[aria-current="page"] { color:var(--brand); background:var(--acc-s); border-color:color-mix(in srgb, var(--acc) 30%, transparent); font-weight:600; box-shadow:inset 3px 0 0 var(--acc); }
.sidebar .foot { margin-top:auto; padding:var(--sp-3) var(--sp-2) 0; border-top:1px solid var(--line); display:grid; gap:var(--sp-2); }
.sidebar .foot .jf-user { flex-direction:column; align-items:flex-start; gap:6px; }
.sidebar .foot .jf-user .jf-who { border:0; padding:0; }
.sidebar .foot .jf-pal { flex-wrap:wrap; padding-top:var(--sp-2); border-top:1px solid var(--line); }
.content { grid-column:2; min-width:0; padding:var(--sp-5) var(--shell-pad) var(--sp-6); }
.content > .page-head { padding-top:0; }
.menu-toggle { display:none; }
.rail-resizer { position:fixed; z-index:35; top:0; bottom:0; left:calc(100% - var(--rail) - 7px); width:14px; cursor:col-resize; touch-action:none; user-select:none; }
.rail-resizer::after { content:""; position:absolute; inset-block:0; left:5px; width:4px; background:var(--line); border-radius:3px; box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.rail-resizer:hover::after, .rail-resizer:focus-visible::after, body.resizing-columns .rail-resizer::after { background:var(--acc); }
body.resizing-columns { cursor:col-resize; user-select:none; }
  .content.plain { max-width:min(var(--maxw), 100%); }
  .bar { inset-inline-start:var(--rail); inset-inline-end:0; }

@media (max-width:900px) {
  .shell { grid-template-columns:minmax(0,1fr); }
  .content { grid-column:1; padding:var(--sp-4) var(--sp-4) var(--sp-6); }
  .bar { inset-inline-start:0; }
  .rail-resizer { display:none; }
  .sidebar {
    position:fixed; inset-block:0; inset-inline-start:0; width:min(84vw,300px); height:100vh; height:100dvh; min-height:0;
    transform:translateX(100%); transition:transform .2s ease; box-shadow:var(--sh-3); border-inline-end:0;
  }
  [dir="rtl"] .sidebar { transform:translateX(100%); }
  body.menu-open .sidebar { transform:none; }
  .menu-toggle { display:inline-flex; position:sticky; top:var(--sp-2); z-index:40; margin:var(--sp-2) var(--sp-4) 0; }
  .scrim { position:fixed; inset:0; background:rgba(9,14,18,.5); z-index:25; }
}
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; text-decoration:none; color:var(--ink); }
.brand-logo { width:38px; height:38px; flex:none; display:block; object-fit:contain; border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:var(--sh-1); }
.sidebar .brand { align-items:flex-start; }
.sidebar .brand-logo { width:42px; height:42px; }
.sidebar .brand small { max-width:164px; font-size:10.5px; line-height:1.55; }
.brand .mark {
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 55%, #000 12%));
  color:var(--on-brand); font-size:15px; font-weight:700; box-shadow:var(--sh-1);
}
.brand small { display:block; font-weight:400; font-size:11.5px; color:var(--mute); line-height:1.4; }
.nav { display:flex; gap:var(--sp-1); margin-inline-start:auto; flex-wrap:wrap; align-items:center; }
.nav a {
  text-decoration:none; color:var(--mute); font-size:13.5px; padding:7px 12px; border-radius:var(--r-sm);
  border:1px solid transparent; transition:color .15s, background .15s, border-color .15s;
}
.nav a:hover { color:var(--ink); background:var(--acc-s); }
.nav a[aria-current="page"] { color:var(--brand); background:var(--acc-s); border-color:color-mix(in srgb, var(--acc) 30%, transparent); font-weight:600; }
.page-head { padding:var(--sp-6) 0 var(--sp-4); max-width:760px; }
.page-head h1 { margin:0; font-size:clamp(21px,2.4vw,27px); letter-spacing:-.2px; }
.page-head p { margin:6px 0 0; color:var(--mute); font-size:14px; }

/* ---------- cards ---------- */
.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-5); box-shadow:var(--sh-1); margin-bottom:var(--sp-4);
}
.card.tight { padding:var(--sp-4); }
.card.no-pad { padding:0; overflow:hidden; }
.card-head { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3); flex-wrap:wrap; }
.card-head h2, .card > h2:first-child { margin:0; font-size:16.5px; }
.card-head .step {
  flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:13px;
  background:var(--acc-s); color:var(--brand); font-weight:700;
}
.card-head .spacer { margin-inline-start:auto; }
.muted { color:var(--mute); }
.hint { color:var(--mute); font-size:12.5px; line-height:1.7; margin:var(--sp-2) 0 0; }
.grid-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--sp-4); align-items:start; }

/* ---------- forms ---------- */
label { display:block; font-size:12.5px; color:var(--mute); margin:0 0 var(--sp-3); }
label > span { display:block; margin-bottom:5px; }
input, select, textarea {
  font:inherit; color:var(--ink); background:var(--surf, var(--card));
  border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; width:100%;
  min-height:42px; transition:border-color .15s, box-shadow .15s, background .15s;
}
input:hover, select:hover, textarea:hover { border-color:color-mix(in srgb, var(--acc) 40%, var(--line)); }
input:focus, select:focus, textarea:focus { border-color:var(--acc); box-shadow:var(--ring); outline:none; }
input::placeholder, textarea::placeholder { color:color-mix(in srgb, var(--mute) 78%, transparent); }
textarea { min-height:120px; resize:vertical; line-height:1.8; }
input[type=file] { padding:8px; min-height:0; }
.file-field { display:grid; gap:5px; min-width:0; }
.file-picker { position:relative; display:flex; align-items:center; gap:var(--sp-2); min-width:0; min-height:42px; padding:5px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surf,var(--card)); }
.file-picker input[type=file] { position:absolute; inline-size:1px; block-size:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.file-picker:focus-within { border-color:var(--acc); box-shadow:var(--ring); }
.file-picker-button { display:inline-flex; align-items:center; justify-content:center; flex:none; min-height:32px; margin:0; padding:4px 12px; border:1px solid var(--acc); border-radius:var(--r-sm); background:var(--brand); color:var(--on-brand,#fff); cursor:pointer; font-size:13px; white-space:nowrap; }
.file-picker-button:hover { filter:brightness(.96); }
.file-name { min-width:0; margin:0; overflow:hidden; color:var(--mute); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
input[dir=ltr], input[type=url], input[type=email], input[type=number] { direction:ltr; text-align:left; }
.fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0 var(--sp-4); }
.fields .full, .full { grid-column:1/-1; }
fieldset { border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-4); margin:0 0 var(--sp-3); }
legend { font-size:13px; color:var(--mute); padding:0 6px; }

/* ---------- buttons ---------- */
button, .btn {
  font:inherit; cursor:pointer; border:1px solid var(--line); background:var(--surf, var(--card)); color:var(--ink);
  border-radius:var(--r-md); padding:9px 15px; min-height:40px; display:inline-flex; align-items:center; justify-content:center;
  gap:7px; text-decoration:none; transition:background .15s, border-color .15s, box-shadow .15s, transform .06s;
}
button:hover:not(:disabled), .btn:hover { border-color:color-mix(in srgb, var(--acc) 45%, var(--line)); box-shadow:var(--sh-1); }
button:active:not(:disabled), .btn:active { transform:translateY(1px); }
button:disabled { opacity:.5; cursor:not-allowed; }
button.primary, .btn.primary {
  background:linear-gradient(180deg, color-mix(in srgb, var(--acc) 92%, #fff 8%), var(--acc));
  border-color:color-mix(in srgb, var(--acc) 80%, #000 6%); color:var(--on-brand); font-weight:600;
  box-shadow:var(--sh-1);
}
button.primary:hover:not(:disabled), .btn.primary:hover { box-shadow:var(--sh-2); }
button.ghost, .btn.ghost { background:transparent; }
button.sm, .btn.sm { min-height:32px; padding:5px 11px; font-size:13px; }
button.icon { padding:6px; min-height:32px; width:32px; }
button.danger { color:var(--bad); border-color:color-mix(in srgb, var(--bad) 40%, var(--line)); }
button.wide { width:100%; }
.actions { display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; }
.actions.end { justify-content:flex-end; }

/* ---------- badges, stats, banners ---------- */
.badge {
  display:inline-flex; align-items:center; gap:5px; font-size:12px; line-height:1.9; padding:1px 10px;
  border-radius:999px; border:1px solid var(--line); color:var(--mute); background:var(--bg); white-space:nowrap;
}
.badge.ok { color:var(--ok); border-color:color-mix(in srgb, var(--ok) 38%, var(--line)); background:color-mix(in srgb, var(--ok) 10%, transparent); }
.badge.warn { color:var(--warn); border-color:color-mix(in srgb, var(--warn) 38%, var(--line)); background:color-mix(in srgb, var(--warn) 10%, transparent); }
.badge.error, .badge.bad { color:var(--bad); border-color:color-mix(in srgb, var(--bad) 38%, var(--line)); background:color-mix(in srgb, var(--bad) 10%, transparent); }
.badge.brand { color:var(--brand); border-color:color-mix(in srgb, var(--acc) 38%, var(--line)); background:var(--acc-s); }
.badge.mono { font-family:var(--mono); direction:ltr; font-size:11.5px; }
.stat { display:flex; flex-direction:column; gap:2px; padding:var(--sp-3) var(--sp-4); border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg); }
.stat b { font-size:19px; line-height:1.4; }
.stat span { color:var(--mute); font-size:12px; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--sp-3); }
.note {
  display:flex; gap:10px; padding:11px 14px; border-radius:var(--r-md); font-size:13.5px; line-height:1.75;
  border:1px solid color-mix(in srgb, var(--acc) 32%, var(--line)); background:var(--acc-s); color:var(--ink);
}
.note.ok { border-color:color-mix(in srgb, var(--ok) 36%, var(--line)); background:color-mix(in srgb, var(--ok) 10%, transparent); }
.note.warn { border-color:color-mix(in srgb, var(--warn) 36%, var(--line)); background:color-mix(in srgb, var(--warn) 11%, transparent); }
.note.error { border-color:color-mix(in srgb, var(--bad) 36%, var(--line)); background:color-mix(in srgb, var(--bad) 10%, transparent); }
#message:empty, .note:empty { display:none; }

/* ---------- lists ---------- */
.list { display:grid; gap:var(--sp-2); margin:0; padding:0; list-style:none; }
.list li { display:flex; align-items:center; gap:var(--sp-3); padding:10px var(--sp-3); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surf, var(--card)); }
.list li:hover { border-color:color-mix(in srgb, var(--acc) 35%, var(--line)); }
.list .name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list .idx { flex:none; width:24px; height:24px; border-radius:50%; background:var(--acc-s); color:var(--brand); font-size:12px; display:grid; place-items:center; font-weight:600; }
.list a { color:var(--brand); text-decoration:none; font-weight:500; }
.list a:hover { text-decoration:underline; }
.row { display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; }
.row.between { justify-content:space-between; }

/* ---------- dropzone ---------- */
.drop {
  border:2px dashed color-mix(in srgb, var(--acc) 30%, var(--line)); border-radius:var(--r-lg); padding:var(--sp-6) var(--sp-4);
  text-align:center; color:var(--mute); cursor:pointer; background:color-mix(in srgb, var(--acc) 4%, transparent);
  transition:border-color .18s, background .18s, color .18s;
}
.drop:hover, .drop.over { border-color:var(--acc); color:var(--brand); background:var(--acc-s); }
.drop b { display:block; color:var(--ink); font-size:15px; margin-bottom:3px; }

/* ---------- localized file picker ---------- */
.upload-field { display:grid; gap:var(--sp-1); min-width:0; }
.upload-label { color:var(--mute); font-size:13px; }
.upload-picker { position:relative; display:flex; align-items:center; gap:var(--sp-2); min-width:0; min-height:42px; padding:4px 6px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surf); }
.upload-picker input[type=file] { position:absolute; inline-size:1px; block-size:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.upload-picker:focus-within { outline:2px solid color-mix(in srgb,var(--brand) 32%,transparent); outline-offset:1px; }
.upload-picker-button { display:inline-flex; align-items:center; justify-content:center; flex:none; min-height:32px; margin:0; padding:4px 11px; border-radius:var(--r-sm); background:var(--brand); color:var(--on-brand,#fff); cursor:pointer; font-size:13px; font-weight:600; text-align:center; white-space:nowrap; }
.upload-picker-button:hover { filter:brightness(1.06); }
.upload-file-name { flex:1; min-width:0; margin:0; overflow:hidden; color:var(--mute); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- progress ---------- */
progress { width:100%; height:8px; border:0; border-radius:999px; overflow:hidden; background:var(--line); appearance:none; }
progress::-webkit-progress-bar { background:var(--line); border-radius:999px; }
progress::-webkit-progress-value { background:linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 60%, #fff 20%)); border-radius:999px; transition:width .2s; }
progress::-moz-progress-bar { background:var(--acc); border-radius:999px; }
.spin { width:16px; height:16px; flex:none; border:2.5px solid var(--line); border-top-color:var(--acc); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.status { display:flex; align-items:center; gap:10px; font-size:14px; }

/* ---------- tables ---------- */
table.data { width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
table.data th, table.data td { padding:9px 12px; text-align:start; border-bottom:1px solid var(--line); vertical-align:top; }
table.data thead th { background:var(--bg); color:var(--mute); font-weight:400; font-size:12.5px; position:sticky; top:0; }
table.data tbody tr:last-child td { border-bottom:0; }
table.data tbody tr:hover { background:color-mix(in srgb, var(--acc) 4%, transparent); }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:var(--r-md); }

/* ---------- code / diff ---------- */
pre {
  margin:0; font-family:var(--mono); font-size:12.5px; line-height:1.75; direction:ltr; text-align:left;
  white-space:pre-wrap; overflow-wrap:anywhere; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-3); max-height:60vh; overflow:auto;
}
pre.diff .add { color:var(--ok); } pre.diff .del { color:var(--bad); }

/* ---------- details ---------- */
details.raw { padding:0; border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); margin-bottom:var(--sp-3); overflow:hidden; }
details.raw > summary { cursor:pointer; padding:12px var(--sp-4); font-weight:600; font-size:14px; list-style:none; display:flex; align-items:center; gap:8px; }
details.raw > summary::-webkit-details-marker { display:none; }
details.raw > summary::before { content:'▸'; color:var(--mute); transition:transform .18s; }
details.raw[open] > summary::before { transform:rotate(90deg); }
details.raw > summary:hover { background:var(--acc-s); }
details.raw > .body { padding:0 var(--sp-4) var(--sp-4); }

/* ---------- toast ---------- */
.toast {
  position:fixed; inset-block-end:var(--sp-5); inset-inline-start:50%; transform:translateX(50%) translateY(14px);
  background:var(--ink); color:var(--bg); padding:11px 18px; border-radius:999px; font-size:13.5px; z-index:60;
  box-shadow:var(--sh-3); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:88vw;
}
.toast.show { opacity:1; transform:translateX(50%) translateY(0); }

/* ---------- palette switcher ---------- */
.jf-pal { display:flex; gap:6px; align-items:center; }
.jf-sw { width:20px; height:20px; border-radius:50%; background:var(--c); border:2px solid var(--card); padding:0; min-height:0; cursor:pointer; box-shadow:var(--sh-1); }
.jf-sw[aria-pressed=true] { outline:2px solid var(--ink); outline-offset:1px; }
.jf-mode { font-size:12.5px; padding:4px 11px; min-height:32px; border-radius:999px; }
.jf-user { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:13px; }
.jf-user .jf-who { color:var(--mute); border-inline-end:1px solid var(--line); padding-inline-end:10px; }
.jf-user a { color:var(--brand); text-decoration:none; font-size:13px; }
.jf-user a:hover { text-decoration:underline; }
.jf-user a[aria-current="page"] { font-weight:600; text-decoration:underline; }
.jf-out { min-height:32px; padding:4px 12px; font-size:13px; border-radius:999px; }

/* ---------- responsive ---------- */
@media (max-width:720px) {
  .card { padding:var(--sp-4); }
  .page-head { padding:var(--sp-5) 0 var(--sp-3); }
  .topbar > div { padding:8px var(--sp-3); }
  .nav { width:100%; margin-inline-start:0; }
}
@media print { .topbar, .jf-pal, .actions, .toast { display:none !important; } body { background:#fff; } }
