/* shell2/paper.css — the brutal («کاغذ و مداد») skin for the PAGE BODY.
   ui.css skins the player device (bar/sheet/menu/sidebar); this sheet extends
   the same identity to the shell chrome and page content. Everything is scoped
   under html[data-ir2-skin="brutal"], so warm/engine keep the dark site as-is.
   Loaded LAST from shell.php so it can override page stylesheets.

   Identity rules (same language as ui.css):
   - paper #fbfaf5, graphite #1f1f1f, monochrome; the ONE allowed color is the
     red live-dot (the classic red pencil) + photos themselves
   - boxes are sketched: 1.6-2px graphite borders, wobbled corners, offset
     pencil shadows, slight alternating tilts (glued-photo feel)
   - dividers/underlines are the hand-wavy stroke, never a ruler line */

html[data-ir2-skin="brutal"] {
  --bg: #fbfaf5;
  --panel: #f1efe6;
  --line: #1f1f1f;
  --muted: rgba(31,31,31,.55);
  --gold: #1f1f1f;               /* monochrome: the old gold accents become pencil */
  --accent: #1f1f1f;
  --pp-wob-a: 14px 10px 16px 9px / 10px 15px 9px 16px;
  --pp-wob-b: 10px 13px 9px 14px / 13px 9px 14px 10px;
  --pp-potato: 47% 53% 46% 54% / 54% 46% 55% 45%;   /* hand-drawn circle, not a true 50% */
  --pp-shadow: 3px 4px 0 rgba(31,31,31,.14);
  --pp-pencil: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='5'%20viewBox='0%200%20120%205'%3E%3Cpath%20d='M0,2.5%20Q10,1.4%2020,2.4%20T40,2.6%20T60,2.4%20T80,2.6%20T100,2.4%20T120,2.5'%20fill='none'%20stroke='%231f1f1f'%20stroke-width='1.7'%20stroke-linecap='round'/%3E%3C/svg%3E");
}
html[data-ir2-skin="brutal"] body { background: var(--bg); color: #1f1f1f; }
html[data-ir2-skin="brutal"] .app-main { color: #1f1f1f; }

/* ---------- topbar ---------- */
html[data-ir2-skin="brutal"] .app-top {
  background: var(--bg);
  border-bottom: 2px solid var(--line);
  box-shadow: none;
}
/* the new «رادیو بوفی» owl logo is dark + colored for a LIGHT background, so it
   needs NO filter on paper (the old invert existed only to darken the old
   light-on-dark gold logo). Brand marks are a sanctioned color exception to the
   P-02 monochrome rule, same as photos and the red live dot. */
html[data-ir2-skin="brutal"] .tb-searchbtn { color: #1f1f1f; }   /* else white icon = invisible on the cream paper topbar */
html[data-ir2-skin="brutal"] .tb-browse { color: #1f1f1f; background: none; border-color: var(--line); }   /* pill like .tb-lang: ink on paper */
html[data-ir2-skin="brutal"] .tb-browse:hover { background: rgba(31,31,31,.06); color: #1f1f1f; }
html[data-ir2-skin="brutal"] .tb-browse.active { background: #1f1f1f; color: #fbfaf5; border-radius: var(--pp-wob-b); }   /* sketched fill, same as the old .litem.active */
html[data-ir2-skin="brutal"] .tb-search { background: #fff; border: 1.6px solid var(--line); border-radius: var(--pp-wob-b); }
html[data-ir2-skin="brutal"] .tb-search input { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .tb-search input::placeholder { color: rgba(31,31,31,.4); }
html[data-ir2-skin="brutal"] .tbs-ic { color: rgba(31,31,31,.55); }
html[data-ir2-skin="brutal"] .tb-lang { color: #1f1f1f; border-color: var(--line); }
html[data-ir2-skin="brutal"] .tb-login { background: #1f1f1f; color: #fbfaf5; }
html[data-ir2-skin="brutal"] .tb-drop { background: #fff; border: 1.6px solid var(--line); color: #1f1f1f; box-shadow: 4px 5px 0 rgba(31,31,31,.14); }
html[data-ir2-skin="brutal"] .tb-drop * { color: inherit; }
/* mobile search panel (#mSrch): mirror the topbar-search paper treatment so text
   is dark-on-cream, not the base dark-skin white-on-cream (= invisible). The
   results reuse .tb-drop above; the gold «دسته‌بندی‌ها» button stays gold. */
html[data-ir2-skin="brutal"] .msrch-card { background: #fbfaf5; border-bottom: 1.6px solid var(--line); box-shadow: 0 16px 34px rgba(31,31,31,.16); }
html[data-ir2-skin="brutal"] .msrch-field { background: #fff; border: 1.6px solid var(--line); }
html[data-ir2-skin="brutal"] .msrch-field input { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .msrch-field input::placeholder { color: rgba(31,31,31,.4); }
html[data-ir2-skin="brutal"] .msrch-field .tbs-ic { color: rgba(31,31,31,.55); }
html[data-ir2-skin="brutal"] .msrch-x { color: rgba(31,31,31,.55); }
html[data-ir2-skin="brutal"] .msrch-x:hover { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .tb-avamenu { background: #fff; border: 1.6px solid var(--line); color: #1f1f1f; }
html[data-ir2-skin="brutal"] .tb-avamenu a, html[data-ir2-skin="brutal"] .tb-avamenu button { color: #1f1f1f; }

/* ---------- mobile tabs (the .app-left/.litem nav skin retired 2026-07-09) ---------- */
html[data-ir2-skin="brutal"] .app-tabs { background: var(--bg); border-top: 2px solid var(--line); }
html[data-ir2-skin="brutal"] .app-tabs .tab { color: rgba(31,31,31,.55); }
html[data-ir2-skin="brutal"] .app-tabs .tab.active { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .app-right { background: var(--bg); border-color: var(--line); }
/* scrollbars: the base thumb is faint WHITE (dark-theme), invisible on the cream
   paper page — the operator couldn't tell the sidebar/main scrolled («اسکرول نمیشه»).
   Give paper an INK thumb, always a little visible (not hover-only) so the scroll
   affordance is obvious, darker on hover. */
html[data-ir2-skin="brutal"] .app-main,
html[data-ir2-skin="brutal"] .right-scroll { scrollbar-color: rgba(31,31,31,.28) transparent; }
html[data-ir2-skin="brutal"] .app-main:hover,
html[data-ir2-skin="brutal"] .right-scroll:hover { scrollbar-color: rgba(31,31,31,.45) transparent; }
html[data-ir2-skin="brutal"] .app-main::-webkit-scrollbar-thumb,
html[data-ir2-skin="brutal"] .right-scroll::-webkit-scrollbar-thumb { background: rgba(31,31,31,.28); }
html[data-ir2-skin="brutal"] .app-main:hover::-webkit-scrollbar-thumb,
html[data-ir2-skin="brutal"] .right-scroll:hover::-webkit-scrollbar-thumb { background: rgba(31,31,31,.45); }

/* ---------- section headers: bold graphite + hand-wavy underline ---------- */
html[data-ir2-skin="brutal"] .lsect .lh h2,
html[data-ir2-skin="brutal"] .hwel { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .lsect .lh h2 {
  padding-bottom: 7px;
  background: var(--pp-pencil) left bottom / 120px 5px repeat-x;
}
html[data-ir2-skin="brutal"] .lsect .lh .more { color: rgba(31,31,31,.55); }
html[data-ir2-skin="brutal"] .lsect .lh .more:hover { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .lsect .lh .hint { color: rgba(31,31,31,.5); }

/* ---------- tiles & strips: glued photos in pencil frames ---------- */
html[data-ir2-skin="brutal"] .ctile, html[data-ir2-skin="brutal"] .albtile, html[data-ir2-skin="brutal"] .artile { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .ctile .cta, html[data-ir2-skin="brutal"] .albtile .als { color: rgba(31,31,31,.55); }
html[data-ir2-skin="brutal"] .ctile .ccov,
html[data-ir2-skin="brutal"] .albtile .alcov,
html[data-ir2-skin="brutal"] .redisc .bigtile,
html[data-ir2-skin="brutal"] .redisc .smtile {
  border: 1.6px solid var(--line);
  border-radius: var(--pp-wob-b);
  box-shadow: var(--pp-shadow);
  background-color: #efede3;
}
html[data-ir2-skin="brutal"] .artile .acirc {
  border: 1.6px solid var(--line);
  border-radius: var(--pp-potato);
  box-shadow: var(--pp-shadow);
  background-color: #efede3;
  color: rgba(31,31,31,.6);
}
/* glued-in tilt, alternating so the page feels laid out by hand */
html[data-ir2-skin="brutal"] .strp > *:nth-child(odd) { transform: rotate(.6deg); }
html[data-ir2-skin="brutal"] .strp > *:nth-child(even) { transform: rotate(-.5deg); }
html[data-ir2-skin="brutal"] .strp > *:hover { transform: rotate(0deg) translateY(-3px); }
html[data-ir2-skin="brutal"] .redisc .bigtile:nth-child(odd), html[data-ir2-skin="brutal"] .redisc .smtile:nth-child(odd) { transform: rotate(.5deg); }
html[data-ir2-skin="brutal"] .redisc .bigtile:nth-child(even), html[data-ir2-skin="brutal"] .redisc .smtile:nth-child(even) { transform: rotate(-.5deg); }
html[data-ir2-skin="brutal"] .redisc .bigtile:hover, html[data-ir2-skin="brutal"] .redisc .smtile:hover { transform: rotate(0deg) translateY(-3px); }
/* photo tiles keep their dark gradient + white caption (text sits ON the photo) */

/* ---------- live hero cards: sketched boxes, graphite play, red-pencil dot ---------- */
html[data-ir2-skin="brutal"] .live-card {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--pp-wob-a);
  box-shadow: var(--pp-shadow);
  color: #1f1f1f;
}
html[data-ir2-skin="brutal"] .live-card:hover { border-color: var(--line); box-shadow: 4px 5px 0 rgba(31,31,31,.2); }
html[data-ir2-skin="brutal"] .live-card.on { background: #ece9dd; }
html[data-ir2-skin="brutal"] .live-card .lc-cov { border: 1.6px solid var(--line); border-radius: var(--pp-potato); box-shadow: none; background-color: #efede3; transform: rotate(-.6deg); }
html[data-ir2-skin="brutal"] .live-card .lc-badge { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .live-card .lc-dot { background: #d23c3c; }   /* the one color: red pencil */
html[data-ir2-skin="brutal"] .live-card .lc-name { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .live-card .lc-track { color: rgba(31,31,31,.6); }
html[data-ir2-skin="brutal"] .live-card .lc-play {
  background: #1f1f1f; color: #fbfaf5;
  border-radius: 52% 48% 55% 45% / 46% 56% 44% 54%;   /* pencil blob */
  box-shadow: 2px 3px 0 rgba(31,31,31,.18);
  transform: rotate(-1.2deg);
}
html[data-ir2-skin="brutal"] .live-card.on .lc-play { color: #fbfaf5; }
/* connecting = dashed pencil frame instead of the golden pulse */
html[data-ir2-skin="brutal"] .live-card.connecting { animation: none; border-style: dashed; }
html[data-ir2-skin="brutal"] .live-card.connecting .lc-play::before { border-color: rgba(251,250,245,.35); border-top-color: #fbfaf5; }

/* Radio Boofi Classic: same de-decoration in paper — no box, no pencil-blob
   play button. A quiet secondary row beside the VIP hero (2026-07-06,
   operator: «مینیمال‌کردن»). Every property the generic .live-card rules
   above set (background/border/box-shadow/etc.) must be re-declared here,
   not just added to — same specificity bucket, so an undeclared property
   falls through to the generic rule instead of landing.css's reset. The
   dashed divider itself moved to .hero-secondary on desktop (2026-07-08,
   operator: "خط چین... رو ادامه بده تا انتهای این ردیف") so it spans the
   whole row instead of just this card's column — .hero-secondary needs no
   matching override there since its border-bottom already reads
   var(--line) directly. */
html[data-ir2-skin="brutal"] .live-card.lc-v1 {
  background: none; border: none; border-radius: 0; box-shadow: none;
}
html[data-ir2-skin="brutal"] .live-card.lc-v1:hover { box-shadow: none; }
html[data-ir2-skin="brutal"] .live-card.lc-v1 .lc-cov { transform: none; }
html[data-ir2-skin="brutal"] .live-card.lc-v1 .lc-play {
  background: none; box-shadow: none; border-radius: 50%; transform: none; color: #1f1f1f;
}
/* mobile stacks the row into a single column, and the operator wants a
   divider under EACH card there instead of just once under the section
   (2026-07-08: "توی موبایل هم میخوام باشه زیر هر کدوم از ۳ قطعه") —
   landing.css handles .fal-feat/.ep-feat directly, but this card needs its
   own copy here: the general "border: none" rule right above resets
   border-bottom too, at (attr+2class+type) specificity landing.css's
   ".hero-secondary .live-card.lc-v1 {border-bottom:...}" (3 plain classes)
   ties on class-count and loses the type-selector tiebreak — same trap as
   everywhere else in this file. This block wins because it's the same
   selector, appearing later in the file. */
@media (max-width: 720px) {
  html[data-ir2-skin="brutal"] .live-card.lc-v1 { border-bottom: 1.6px dashed var(--line); }
}

/* ---------- VIP previous-tracks strip: paper cover tiles, red-pencil live tag ---------- */
html[data-ir2-skin="brutal"] .vhtile .ccov { border: 1.6px solid var(--line); border-radius: var(--pp-wob-b); box-shadow: none; background-color: #efede3; }
html[data-ir2-skin="brutal"] .vhtile .ctt { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .vhtile .cta { color: rgba(31,31,31,.6); }
html[data-ir2-skin="brutal"] .vhtile.live .ccov { border-color: #d23c3c; border-width: 2px; }
html[data-ir2-skin="brutal"] .vh-live { background: rgba(31,31,31,.78); color: #fbfaf5; }
html[data-ir2-skin="brutal"] .vh-live .dot { background: #d23c3c; }
html[data-ir2-skin="brutal"] .vhtile.live .lc-play { background: rgba(31,31,31,.75); color: #fbfaf5; }
html[data-ir2-skin="brutal"] .vhtile.live.connecting .lc-play::before { border-color: rgba(251,250,245,.35); border-top-color: #fbfaf5; }
/* mobile card grid: paper card instead of Spotify's dark tile. The live card's
   red-pencil border moves to the CARD itself (not also the inner cover — a
   border-in-a-border reads fussy at this small size). */
@media (max-width: 720px) {
  html[data-ir2-skin="brutal"] .vhtile { background: var(--panel); border: 1.6px solid var(--line); }
  html[data-ir2-skin="brutal"] .vhtile.live { border-color: #d23c3c; border-width: 2px; }
  /* the cover now bleeds to the card's edges — no border/wobble-radius of its
     own (the general rule's var(--pp-wob-b) has higher specificity than
     landing.css's reset, so it must be re-zeroed here too); the card's own
     border+radius+overflow:hidden frames and clips it (operator 2026-07-06,
     "فیت لبه‌های باکس") */
  html[data-ir2-skin="brutal"] .vhtile .ccov { border: none; border-radius: 0; }
  /* the live card's own background is the track's accent color (inline style
     from boot.js's vhAccent()). BUT the general "html[brutal] .vhtile .ctt/
     .cta {color:ink}" rule above (outside this media query, so it's always
     active) has higher specificity than landing.css's plain ".vhtile.live
     .ctt {color:var(--vh-fg)}" — same 3 classes, but its own "html" type
     selector wins the tiebreak — so the auto-contrast color never actually
     took effect (operator caught it: "فقط روی دگمه پلیر اعمال شد؟"). Redeclare
     it here with the same html[...] prefix so it wins instead. */
  html[data-ir2-skin="brutal"] .vhtile.live .ctt { color: var(--vh-fg, #fff); }
  html[data-ir2-skin="brutal"] .vhtile.live .cta { color: var(--vh-fg-soft, rgba(255,255,255,.8)); }
  /* same specificity trap as above: the general "html[brutal] .vhtile
     {background:var(--panel)}" rule right at the top of this block has one
     more class than landing.css's plain ".vhtile.live {background:var(
     --vh-accent)}", so it would silently win and flatten the live tile back
     to the plain panel color. Redeclare with the .live class + html[...]
     prefix so the accent actually shows (operator 2026-07-06 caught it
     leaking onto desktop instead, which is what led here). */
  html[data-ir2-skin="brutal"] .vhtile.live { background: var(--vh-accent, #2a2a2a); }
}

/* ---------- featured podcast + CTAs + banner ---------- */
/* flat row now (2026-07-06, «مینیمال‌کردن») — cover keeps a thin paper border,
   no box/shadow/circle button around it anymore. */
html[data-ir2-skin="brutal"] .ep-feat:hover { opacity: .68; }
html[data-ir2-skin="brutal"] .ep-feat .ef-cov { border: 1.6px solid var(--line); border-radius: var(--pp-potato); box-shadow: none; background-color: #efede3; }
html[data-ir2-skin="brutal"] .ep-feat .ef-k { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .ep-feat .ef-t { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .ep-feat .ef-s { color: rgba(31,31,31,.6); }
html[data-ir2-skin="brutal"] .ep-feat .ef-p { color: #1f1f1f; opacity: .7; }
html[data-ir2-skin="brutal"] .brcta { background: var(--panel); border: 1.6px solid var(--line); border-radius: var(--pp-wob-b); box-shadow: var(--pp-shadow); }
html[data-ir2-skin="brutal"] .brcta .brsub { color: rgba(31,31,31,.55); }
html[data-ir2-skin="brutal"] .brcta .brarr { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .gbanner { background: var(--panel); border: 1.6px solid var(--line); border-radius: var(--pp-wob-b); }
html[data-ir2-skin="brutal"] .gbanner .gbtxt b { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .gbanner .gbtn { background: #1f1f1f; color: #fbfaf5; }

/* ---------- personal radio cards: paper card, colored-pencil glow kept ---------- */
html[data-ir2-skin="brutal"] .mradios .mrcard {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--pp-wob-a);
  color: #1f1f1f;
  box-shadow: var(--pp-shadow);
}
html[data-ir2-skin="brutal"] .mradios .mrcard::before { opacity: .3; }   /* the seed tint reads as colored pencil on paper */
html[data-ir2-skin="brutal"] .mradios .mrcard:hover { transform: translateY(-4px); box-shadow: 4px 6px 0 rgba(31,31,31,.2); border-color: var(--line); }
html[data-ir2-skin="brutal"] .mradios .mrbadge { background: #1f1f1f; color: #fbfaf5; backdrop-filter: none; border-radius: var(--pp-wob-b); }
html[data-ir2-skin="brutal"] .mradios .mrcov { border-radius: 47% 53% 46% 54% / 54% 46% 55% 45%; box-shadow: none; border: 2px solid var(--line); background-color: #efede3; }
html[data-ir2-skin="brutal"] .mradios .mrmini { border-radius: 52% 48% 55% 45% / 46% 56% 44% 54%; box-shadow: none; border: 1.6px solid var(--line); background-color: #efede3; }
html[data-ir2-skin="brutal"] .mradios .mrt { color: #1f1f1f; text-shadow: none; }
html[data-ir2-skin="brutal"] .mradios .mra { color: rgba(31,31,31,.6); text-shadow: none; }

/* ---------- shared page primitives (rows/cards most pages reuse) ---------- */
html[data-ir2-skin="brutal"] .trow:hover { background: rgba(31,31,31,.05); }
html[data-ir2-skin="brutal"] .trow .ta,
html[data-ir2-skin="brutal"] .ta { color: rgba(31,31,31,.55); }
html[data-ir2-skin="brutal"] .trow img.th { background: #efede3; border: 1px solid rgba(31,31,31,.5); }
html[data-ir2-skin="brutal"] .mhero { background: var(--panel); border: 1.6px solid var(--line); box-shadow: var(--pp-shadow); }
html[data-ir2-skin="brutal"] .kebab, html[data-ir2-skin="brutal"] .row-addq { color: rgba(31,31,31,.5); }
html[data-ir2-skin="brutal"] .kebab:hover, html[data-ir2-skin="brutal"] .row-addq:hover { background: rgba(31,31,31,.08); color: #1f1f1f; }
html[data-ir2-skin="brutal"] .rowlike { color: rgba(31,31,31,.4); }
html[data-ir2-skin="brutal"] .rowlike.isliked { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .relsep { color: rgba(31,31,31,.6); }
html[data-ir2-skin="brutal"] .relsep::before, html[data-ir2-skin="brutal"] .relsep::after { background: none; height: 5px; background-image: var(--pp-pencil); background-repeat: repeat-x; background-size: 120px 5px; }

/* ---------- login modal (its own css is hardcoded dark) ---------- */
html[data-ir2-skin="brutal"] .rlogincard { background: #fbfaf5; border: 2px solid #1f1f1f; border-radius: var(--pp-wob-a); box-shadow: 5px 6px 0 rgba(31,31,31,.25); }
html[data-ir2-skin="brutal"] .rloginpop .rlptitle, html[data-ir2-skin="brutal"] .rloginpop .rlpsub { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .rloginx { background: rgba(31,31,31,.08); color: rgba(31,31,31,.6); }
html[data-ir2-skin="brutal"] .elform input { background: #fff; border: 1.6px solid #1f1f1f; color: #1f1f1f; }
html[data-ir2-skin="brutal"] .elform input::placeholder { color: rgba(31,31,31,.4); }
html[data-ir2-skin="brutal"] .elform .elcode { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .elform .elbtn { background: #1f1f1f; color: #fbfaf5; }
html[data-ir2-skin="brutal"] .elform .ellink { color: rgba(31,31,31,.6); }
html[data-ir2-skin="brutal"] .elform .elhint { color: rgba(31,31,31,.65); }

/* ---------- /list (playlist page — its inline styles assume the dark site) ---------- */
html[data-ir2-skin="brutal"] .playall {
  background: #1f1f1f; color: #fbfaf5;
  border-radius: var(--pp-wob-a);
  box-shadow: 2px 3px 0 rgba(31,31,31,.18);
  transform: rotate(-.8deg);
}
html[data-ir2-skin="brutal"] .editbtn {
  background: none; border: 1.6px solid var(--line); color: #1f1f1f;
  border-radius: var(--pp-wob-b);
}
html[data-ir2-skin="brutal"] .editbtn.on { background: #1f1f1f; border-color: #1f1f1f; color: #fbfaf5; }
html[data-ir2-skin="brutal"] .edinput { background: #fff; border: 1.6px solid var(--line); color: #1f1f1f; }
html[data-ir2-skin="brutal"] .addcur {
  background: rgba(31,31,31,.06);
  border: 1.6px solid var(--line); color: #1f1f1f;
  border-radius: var(--pp-wob-b);
}
html[data-ir2-skin="brutal"] .addcur:hover { background: #1f1f1f; color: #fbfaf5; }
html[data-ir2-skin="brutal"] .herobtn { background: #fbfaf5; border: 1.6px solid var(--line); color: #1f1f1f; backdrop-filter: none; border-radius: 47% 53% 46% 54% / 54% 46% 55% 45%; }
html[data-ir2-skin="brutal"] #plhero h1, html[data-ir2-skin="brutal"] #plhero .mc { text-shadow: none; }
html[data-ir2-skin="brutal"] .gate h2, html[data-ir2-skin="brutal"] .gate p { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .msg a { color: #1f1f1f; font-weight: 800; }
html[data-ir2-skin="brutal"] .lw .trow .idx { color: rgba(31,31,31,.5); }

/* ---------- /browse hub: data-colored tiles become colored-pencil patches ---------- */
html[data-ir2-skin="brutal"] .brw .sub { color: rgba(31,31,31,.6); opacity: 1; }
html[data-ir2-skin="brutal"] .brw .sectitle {
  opacity: 1; color: #1f1f1f;
  display: inline-block; padding-bottom: 7px;
  background: var(--pp-pencil) left bottom / 120px 5px repeat-x;
}
html[data-ir2-skin="brutal"] .brw .sec.bare { border-top: none; background: var(--pp-pencil) left top / 120px 5px repeat-x; }
html[data-ir2-skin="brutal"] .brw .subsec { border-inline-start: 2px solid rgba(31,31,31,.4); }
html[data-ir2-skin="brutal"] .brw .subtitle { opacity: 1; color: rgba(31,31,31,.6); }
html[data-ir2-skin="brutal"] .brw .tile,
html[data-ir2-skin="brutal"] .brw .grouptile {
  border: 1.6px solid var(--line);
  border-radius: var(--pp-wob-b);
  box-shadow: var(--pp-shadow);
}
html[data-ir2-skin="brutal"] .brw .tiles > *:nth-child(odd), html[data-ir2-skin="brutal"] .brw .gtiles > *:nth-child(odd) { transform: rotate(.5deg); }
html[data-ir2-skin="brutal"] .brw .tiles > *:nth-child(even), html[data-ir2-skin="brutal"] .brw .gtiles > *:nth-child(even) { transform: rotate(-.5deg); }
html[data-ir2-skin="brutal"] .brw .tile:hover, html[data-ir2-skin="brutal"] .brw .grouptile:hover { transform: rotate(0deg) translateY(-3px); }
html[data-ir2-skin="brutal"] .brw .backlink { background: none; border: 1.6px solid var(--line); color: #1f1f1f; opacity: 1; border-radius: var(--pp-wob-b); }
html[data-ir2-skin="brutal"] .brw .backlink:hover { background: rgba(31,31,31,.06); }
html[data-ir2-skin="brutal"] .brw .trow:hover { background: rgba(31,31,31,.05); }
html[data-ir2-skin="brutal"] .brw .trow .th { box-shadow: none; }
/* تازه‌ها's singles grid (.tlist.albgrid, 2026-07-09): same pencil-frame the
   .albtile covers next to it get, so the two grids read as one family. */
html[data-ir2-skin="brutal"] .brw .tlist.albgrid .trow .th { border: 1.6px solid var(--line); border-radius: var(--pp-wob-b); background-color: #efede3; }
html[data-ir2-skin="brutal"] .brw .tlist.albgrid .trow .rlike { background: rgba(251,250,245,.85); border: 1px solid var(--line); }
/* load-more tile (2026-07-09): dashed, not solid, so it visually reads as
   "more to come" rather than another real cover. Needs html[brutal]+.brw to
   outrank the plain .albtile .alcov / .trow .th rules above at equal specificity. */
html[data-ir2-skin="brutal"] .brw .loadmore-ic { border-style: dashed; border-color: rgba(31,31,31,.4); box-shadow: none; background-color: transparent; color: rgba(31,31,31,.5); }
html[data-ir2-skin="brutal"] .brw .loadmore-tile .alt { color: rgba(31,31,31,.75); }
html[data-ir2-skin="brutal"] .brw .rlike { color: rgba(31,31,31,.4); }
html[data-ir2-skin="brutal"] .brw .rlike.isliked { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .brw .qpbtn { background: #1f1f1f; color: #fbfaf5; border-radius: var(--pp-wob-a); box-shadow: 2px 3px 0 rgba(31,31,31,.18); }
html[data-ir2-skin="brutal"] .brw .qpbtn.save { background: none; border: 1.6px solid var(--line); color: #1f1f1f; }
html[data-ir2-skin="brutal"] .brw .pager a { background: none; border: 1.6px solid var(--line); color: #1f1f1f; border-radius: var(--pp-wob-b); }
html[data-ir2-skin="brutal"] .brw .empty { color: rgba(31,31,31,.5); opacity: 1; }

/* ---------- P-10 legibility scale (T-14): tracklists on wide screens ----------
   Operator's «عینک مطالعه» complaint: on tablet/desktop the rows sprawl full
   width with ant-sized covers/text. paper.css loads LAST, so these win over the
   per-page tracklist CSS without !important. ≥768 only; mobile stays dense. */
@media (min-width: 768px) {
  html[data-ir2-skin="brutal"] .app-main .tlist,
  html[data-ir2-skin="brutal"] .app-main .qlist,
  html[data-ir2-skin="brutal"] .app-main .brw .tlist { max-width: 860px; }
  html[data-ir2-skin="brutal"] .app-main .trow img.th,
  html[data-ir2-skin="brutal"] .app-main .trow .th { width: 60px; height: 60px; }
  html[data-ir2-skin="brutal"] .app-main .trow .tt { font-size: 1.06rem; }
  html[data-ir2-skin="brutal"] .app-main .trow .ta { font-size: .86rem; }
  html[data-ir2-skin="brutal"] .app-main .trow .idx { font-size: .9rem; }
  html[data-ir2-skin="brutal"] .app-main .trow { padding-top: 11px; padding-bottom: 11px; }
  /* .tlist.albgrid (تازه‌ها's big-cover singles grid, 2026-07-09) is a different
     layout mode entirely, not the narrow readable-row style P-10 targets above,
     so it opts back out. Same selector prefix + one more class = higher
     specificity than the plain .brw .tlist rule above, needed to actually win
     (found by inspecting computed styles live: .tlist.albgrid was still
     860px/5-columns wide next to the albums grid's full-width 9 columns,
     despite browse.css's own max-width:none, because THIS rule outranked it). */
  html[data-ir2-skin="brutal"] .app-main .brw .tlist.albgrid { max-width: none; }
}

/* ---------- /song (lyrics-only): white lyric text on white paper = «برف» ---------- */
html[data-ir2-skin="brutal"] .songpg.lyrics-only .lyr-head {
  border-bottom: none;
  background: var(--pp-pencil) left bottom / 120px 5px repeat-x;
  padding-bottom: 16px;
}
/* pasted-photo cover (operator 2026-07-08: this page had none at all, added
   to match the artist hero / sheet cover's "taped snapshot" language) */
html[data-ir2-skin="brutal"] .songpg.lyrics-only .lyr-cov {
  border: 2.5px solid var(--line); border-radius: var(--pp-wob-a);
  box-shadow: var(--pp-shadow); transform: rotate(-1.4deg);
  background-color: #efede3;
}
html[data-ir2-skin="brutal"] .songpg.lyrics-only .lyr-cov::after {
  content: ""; position: absolute; top: -9px; left: 50%; margin-left: 20px;
  width: 42px; height: 18px;
  background: rgba(31,31,31,.1); border: 1px solid rgba(31,31,31,.35);
  transform: rotate(3deg); pointer-events: none;
}
html[data-ir2-skin="brutal"] .songpg .lyr-title { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .songpg .lyr-artist { color: rgba(31,31,31,.6); }
html[data-ir2-skin="brutal"] .songpg .lyr-artist .lyr-fa { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .songpg .lhint { color: rgba(31,31,31,.5); }
/* synced lyric lines: graphite scale, active = bold ink (no colored glow) */
html[data-ir2-skin="brutal"] .songpg .lln { color: rgba(31,31,31,.34); }
html[data-ir2-skin="brutal"] .songpg .lln:hover { color: rgba(31,31,31,.62); }
html[data-ir2-skin="brutal"] .songpg .lln.past { color: rgba(31,31,31,.22); }
html[data-ir2-skin="brutal"] .songpg .lln.active { color: #1f1f1f; text-shadow: none; }
html[data-ir2-skin="brutal"] .songpg .lplain { color: rgba(31,31,31,.82); }
/* the I-01b action row (inline-styled in vip_song.php with cover-accent + white) */
html[data-ir2-skin="brutal"] .sng-playbtn {
  background: #1f1f1f; color: #fbfaf5;
  border-radius: var(--pp-wob-a); box-shadow: 2px 3px 0 rgba(31,31,31,.18);
  transform: rotate(-1deg);
}
/* The download pill is the play pill's opposite: outline at rest, filled on
   hover. In this skin --accent IS #1f1f1f, so the generic rule's dark hover
   text landed near-black on near-black and the whole button went out. It
   takes the play button's paper colour instead. */
html[data-ir2-skin="brutal"] .sng-dl {
  border-color: rgba(31,31,31,.45); color: #1f1f1f;
  border-radius: var(--pp-wob-a); box-shadow: 2px 3px 0 rgba(31,31,31,.10);
}
html[data-ir2-skin="brutal"] .sng-dl:hover {
  background: #1f1f1f; color: #fbfaf5; border-color: #1f1f1f;
}
html[data-ir2-skin="brutal"] .sng-like, html[data-ir2-skin="brutal"] .sng-menu, html[data-ir2-skin="brutal"] .sng-lyr { color: rgba(31,31,31,.6); }
html[data-ir2-skin="brutal"] .sng-like.isliked, html[data-ir2-skin="brutal"] .sng-lyr.on { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .sng-lyr .hdlabel {
  display: inline-block;
  background: var(--ir2-marker) left 100% / 40px 7px repeat-x;
  padding-bottom: 3px;
}
/* radio-context line: "فقط X" / "بهترین‌های X" identity (2026-07-08). Tiled
   (repeat-x), not a fixed background-size, so the underline spans the WHOLE
   phrase regardless of artist-name length (a fixed size clipped "بهترین‌های
   مرجان" to just its tail, operator screenshot caught this live). */
html[data-ir2-skin="brutal"] .radioctx .hdlabel {
  display: inline-block; color: #1f1f1f;
  background: var(--ir2-marker) left 100% / 54px 8px repeat-x;
  padding-bottom: 3px;
}
/* the shared save/share buttons (shell.css .radioctx-acts, 2026-07-09 rollout
   to every .mhero page): same muted-ink treatment as /song's .sng-like. */
html[data-ir2-skin="brutal"] .radioctx-acts button { color: rgba(31,31,31,.6); }

/* ---------- /shows + episode (.spg): dark cards + white text ---------- */
html[data-ir2-skin="brutal"] .spg { --panel: #f1efe6; --line: #1f1f1f; --muted: rgba(31,31,31,.6); --gold: #1f1f1f; }
html[data-ir2-skin="brutal"] .spg .backlink,
html[data-ir2-skin="brutal"] .spg .ep-back a { background: none; border: 1.6px solid var(--line); opacity: 1; color: #1f1f1f; }
html[data-ir2-skin="brutal"] .spg .shcard,
html[data-ir2-skin="brutal"] .spg .eprow,
html[data-ir2-skin="brutal"] .spg .chap,
html[data-ir2-skin="brutal"] .spg .ep-meta,
html[data-ir2-skin="brutal"] .spg .ep-byline,
html[data-ir2-skin="brutal"] .spg .ep-player { background: var(--panel); border-color: var(--line); border-width: 1.6px; box-shadow: var(--pp-shadow); }
html[data-ir2-skin="brutal"] .spg .scov, html[data-ir2-skin="brutal"] .spg .ecov,
html[data-ir2-skin="brutal"] .spg .hpic, html[data-ir2-skin="brutal"] .spg .ep-cover,
html[data-ir2-skin="brutal"] .spg .bp { background-color: #efede3; border-color: var(--line); }
html[data-ir2-skin="brutal"] .spg .schip { background: #1f1f1f; color: #fbfaf5; }
html[data-ir2-skin="brutal"] .spg .shhero .hshow,
html[data-ir2-skin="brutal"] .spg .ep-byline .bt { color: rgba(31,31,31,.65); }
html[data-ir2-skin="brutal"] .spg .ep-byline .bt b,
html[data-ir2-skin="brutal"] .spg .ep-titleblock h1,
html[data-ir2-skin="brutal"] .spg .ep-meta .m-pair dd,
html[data-ir2-skin="brutal"] .spg .chap,
html[data-ir2-skin="brutal"] .spg .ep-notes h2, html[data-ir2-skin="brutal"] .spg .ep-notes h3,
html[data-ir2-skin="brutal"] .spg .ep-notes h4, html[data-ir2-skin="brutal"] .spg .ep-notes strong,
html[data-ir2-skin="brutal"] .spg .ep-notes blockquote { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .spg .ep-notes { color: rgba(31,31,31,.85); }
html[data-ir2-skin="brutal"] .spg .empty { color: rgba(31,31,31,.5); }
html[data-ir2-skin="brutal"] .spg .hk, html[data-ir2-skin="brutal"] .spg .ep-kicker { color: #1f1f1f; border-color: var(--line); background: rgba(31,31,31,.05); }
html[data-ir2-skin="brutal"] .spg .ep-playbtn { background: #1f1f1f; color: #fbfaf5; box-shadow: var(--pp-shadow); }

/* ---------- /search (.srchpg) ---------- */
html[data-ir2-skin="brutal"] .srchpg .sub { color: rgba(31,31,31,.6); opacity: 1; }
html[data-ir2-skin="brutal"] .srchpg .sbox { background: #fff; border: 1.6px solid var(--line); border-radius: var(--pp-wob-b); }
html[data-ir2-skin="brutal"] .srchpg .sbox input { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .srchpg .sbox input::placeholder { color: rgba(31,31,31,.4); }
html[data-ir2-skin="brutal"] .srchpg .sclear { color: rgba(31,31,31,.45); }
html[data-ir2-skin="brutal"] .srchpg .trow:hover { background: rgba(31,31,31,.05); }
html[data-ir2-skin="brutal"] .srchpg .trow .th { background: #efede3; box-shadow: none; border: 1px solid rgba(31,31,31,.5); }
html[data-ir2-skin="brutal"] .srchpg .rlike { color: rgba(31,31,31,.4); }
html[data-ir2-skin="brutal"] .srchpg .rlike.isliked { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .srchpg .qpbtn { background: #1f1f1f; color: #fbfaf5; }
html[data-ir2-skin="brutal"] .srchpg .qpbtn.save { background: none; border: 1.6px solid var(--line); color: #1f1f1f; }
/* (the Telegram-request card keeps its Telegram blue — functional brand color) */

/* ---------- /me (.mepg) ---------- */
html[data-ir2-skin="brutal"] .mepg .prow {
  background: var(--panel); border: 1.6px solid var(--line);
  box-shadow: var(--pp-shadow); border-radius: var(--pp-wob-a);
}
html[data-ir2-skin="brutal"] .mepg .prow:hover { border-color: var(--line); }
html[data-ir2-skin="brutal"] .mepg .mosaic { background-color: #efede3; box-shadow: none; border: 1.6px solid var(--line); }
html[data-ir2-skin="brutal"] .mepg .avatar { background: #1f1f1f; color: #fbfaf5; box-shadow: none; }
/* .vipchip (gold badge) + .delchip (red delete) keep their meaning */

/* ========== WAVE 2 ========== */

/* ---------- shared skeleton (queueplayer.css: mood_station/program/radio/
   album/artist/studio all load it). mhero stays a framed PHOTO hero (P-06). ---------- */
html[data-ir2-skin="brutal"] .qpbtn { background: #1f1f1f; color: #fbfaf5; border-radius: var(--pp-wob-a); box-shadow: 2px 3px 0 rgba(31,31,31,.16); }
html[data-ir2-skin="brutal"] .qpbtn.save { background: none; border: 1.6px solid var(--line); color: #1f1f1f; box-shadow: none; }
html[data-ir2-skin="brutal"] .rlike { color: rgba(31,31,31,.4); }
html[data-ir2-skin="brutal"] .rlike.isliked { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .trow .th { background-color: #efede3; box-shadow: none; }
html[data-ir2-skin="brutal"] .mhero .mt { background: rgba(31,31,31,.55); border-color: rgba(251,250,245,.5); color: #fbfaf5; }   /* chip sits ON the photo */

/* ---------- /artist (.artpg): pasted-photo hero (operator 2026-07-08) ----------
   .mherobg + .mhero::after were a full-bleed blurred-photo treatment built for the
   old dark/VIP theme in the single-column era; on paper it read as an unrelated
   dark smear AND cropped heads off on wide desktop (a wide-short crop box centered
   on a portrait photo loses the top). Paper answer: skip the background photo
   entirely, show the real portrait as a small, complete, slightly-tilted "pasted"
   photo above the name, same border/shadow/tilt language as every other cover
   treatment on this site (.acard .ac, .mradios .mrcov, .live-card .lc-cov). */
html[data-ir2-skin="brutal"] .artpg .mhero { flex-direction: column; align-items: center; text-align: center; min-height: 0; padding: 18px 20px 20px; }
html[data-ir2-skin="brutal"] .artpg .mhero .mherobg, html[data-ir2-skin="brutal"] .artpg .mhero::after { display: none; }
html[data-ir2-skin="brutal"] .artpg .mhero .me {
  /* operator 2026-07-08: at least 250px wide (was 150), same 5:6 box ratio, just bigger */
  width: 250px; height: 300px; margin: 0 auto 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #efede3; border: 2.5px solid var(--line); border-radius: var(--pp-wob-a);
  box-shadow: var(--pp-shadow); transform: rotate(-1.6deg);
}
html[data-ir2-skin="brutal"] .artpg .meimg { width: 100%; height: 100%; object-fit: cover; border: none; border-radius: 0; box-shadow: none; transform: none; }
html[data-ir2-skin="brutal"] .artpg .qptools { justify-content: center; }
html[data-ir2-skin="brutal"] .artpg .acard .ac { background-color: #efede3; box-shadow: none; border: 1.6px solid var(--line); }
html[data-ir2-skin="brutal"] .artpg #tracksBack { background: none; border: 1.6px solid var(--line); color: #1f1f1f; }
html[data-ir2-skin="brutal"] .artpg #tracksBack:hover { background: rgba(31,31,31,.06); }

/* ---------- /mood /program /radio /album /browse /list hero: same pasted-photo
   treatment as .artpg, extended 2026-07-08 (mood/program/radio/album first,
   browse (.brw) + list (.lw) added same day). None of these ever had a real
   photo in .me: mood/program/radio/album showed a decorative emoji (🕒/📻/
   mood-glyph/🎵💿), browse showed a bare 🎵, list had no .me at all and used
   .mherobg for a 4-cover overlapping mosaic instead. Operator: drop the emoji/
   mosaic, default .me to ONE cover pulled from the page's own track pool -
   mood_cover()/daypart_cover()/the radio seed's own cover/the album's $cov/a
   browse.php random pick/a list.php random pick, each already had the data
   available, just reused here. Admin-editable override is a separate
   follow-up, not built yet. Square, not the artist portrait's 5:6 box: these
   are album-style cover art, a portrait aspect would crop them oddly. */
html[data-ir2-skin="brutal"] .mspg .mhero,
html[data-ir2-skin="brutal"] .albpg .mhero,
html[data-ir2-skin="brutal"] .brw .mhero,
html[data-ir2-skin="brutal"] .lw .mhero {
  flex-direction: column; align-items: center; text-align: center; min-height: 0; padding: 18px 20px 20px;
}
html[data-ir2-skin="brutal"] .mspg .mhero .mherobg, html[data-ir2-skin="brutal"] .mspg .mhero::after,
html[data-ir2-skin="brutal"] .albpg .mhero .mherobg, html[data-ir2-skin="brutal"] .albpg .mhero::after,
html[data-ir2-skin="brutal"] .brw .mhero .mherobg, html[data-ir2-skin="brutal"] .brw .mhero::after,
html[data-ir2-skin="brutal"] .lw .mhero .mherobg, html[data-ir2-skin="brutal"] .lw .mhero::after {
  display: none;
}
html[data-ir2-skin="brutal"] .mspg .mhero .me,
html[data-ir2-skin="brutal"] .albpg .mhero .me,
html[data-ir2-skin="brutal"] .brw .mhero .me,
html[data-ir2-skin="brutal"] .lw .mhero .me {
  width: 220px; height: 220px; margin: 0 auto 14px; overflow: hidden; position: relative;
  background-color: #efede3; background-size: cover; background-position: center;
  border: 2.5px solid var(--line); border-radius: var(--pp-wob-a);
  box-shadow: var(--pp-shadow); transform: rotate(-1.4deg);
  font-size: 0;
}
html[data-ir2-skin="brutal"] .mspg .mhero .me::after,
html[data-ir2-skin="brutal"] .albpg .mhero .me::after,
html[data-ir2-skin="brutal"] .brw .mhero .me::after,
html[data-ir2-skin="brutal"] .lw .mhero .me::after {
  content: ""; position: absolute; top: -9px; left: 50%; margin-left: 20px;
  width: 44px; height: 19px;
  background: rgba(31,31,31,.1); border: 1px solid rgba(31,31,31,.35);
  transform: rotate(3deg); pointer-events: none;
}
/* list.php's floating share button (.herobtn) sits absolute top/left inside
   .mhero from the old full-bleed layout; harmless to leave as-is, it just
   pins to the new smaller card's corner instead of the old banner's. */

/* ---------- /album (.albpg) ---------- */
html[data-ir2-skin="brutal"] .albpg .acov { background-color: #efede3; box-shadow: none; border: 1.6px solid var(--line); }

/* ---------- /mood (.moodpg): colored mood tiles kept (colored pencil) ---------- */
html[data-ir2-skin="brutal"] .moodpg .yourmood { background: var(--panel); border: 1.6px solid var(--line); }
html[data-ir2-skin="brutal"] .moodpg .ymrow input { background: #fff; border: 1.6px solid var(--line); color: #1f1f1f; }
html[data-ir2-skin="brutal"] .moodpg .ymrow button { background: #1f1f1f; color: #fbfaf5; }
html[data-ir2-skin="brutal"] .moodpg .mtile { border: 1.6px solid var(--line); box-shadow: var(--pp-shadow); border-radius: var(--pp-wob-b); }
html[data-ir2-skin="brutal"] .moodpg .mtile:nth-child(odd) { transform: rotate(.5deg); }
html[data-ir2-skin="brutal"] .moodpg .mtile:nth-child(even) { transform: rotate(-.5deg); }
html[data-ir2-skin="brutal"] .moodpg .mtile:hover { transform: rotate(0deg) translateY(-3px); }
html[data-ir2-skin="brutal"] .moodpg .ymsoon { color: rgba(31,31,31,.55); }   /* amber «به‌زودی» → graphite (P-07) */
html[data-ir2-skin="brutal"] .moodpg .discl { color: rgba(31,31,31,.5); }
html[data-ir2-skin="brutal"] .moodpg .discl a { color: #1f1f1f; }

/* ---------- /khanande (.khw — artist.php K-02, its own dark inline styles) ---------- */
html[data-ir2-skin="brutal"] .khw .count { color: rgba(31,31,31,.55); }
html[data-ir2-skin="brutal"] .khw .bio { background: var(--panel); border: 1.6px solid var(--line); color: rgba(31,31,31,.8); }
html[data-ir2-skin="brutal"] .khw .grid a { background: var(--panel); border: 1.6px solid var(--line); box-shadow: var(--pp-shadow); }
html[data-ir2-skin="brutal"] .khw .grid img { background-color: #efede3; }

/* ---------- scrollbars ---------- */
html[data-ir2-skin="brutal"] .app-main:hover, html[data-ir2-skin="brutal"] .right-scroll:hover { scrollbar-color: rgba(31,31,31,.3) transparent; }
html[data-ir2-skin="brutal"] .app-main:hover::-webkit-scrollbar-thumb,
html[data-ir2-skin="brutal"] .right-scroll:hover::-webkit-scrollbar-thumb { background: rgba(31,31,31,.3); }

/* the mobile search bar's own band, on the paper ground. The field itself is
   already dressed by the .tb-search rules above; only the strip behind it needs
   saying, or it keeps the dark shell colour and sits on the cream page like a
   patch. */
html[data-ir2-skin="brutal"] .msbar { background: #fbfaf5; border-bottom: 1.6px solid var(--line); }
html[data-ir2-skin="brutal"] .msbar .tb-search { box-shadow: 3px 3px 0 rgba(31,31,31,.13); }

/* the ☰ menu on the paper ground: ink on cream, same as the search sheet beside it */
html[data-ir2-skin="brutal"] .tb-burger { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .mmenu-card { background: #fbfaf5; border-bottom: 1.6px solid var(--line); box-shadow: 0 16px 34px rgba(31,31,31,.16); }
html[data-ir2-skin="brutal"] .mmenu-ttl { color: rgba(31,31,31,.5); }
html[data-ir2-skin="brutal"] .mmenu-x { color: rgba(31,31,31,.55); }
html[data-ir2-skin="brutal"] .mmi { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .mmi:active { background: rgba(31,31,31,.07); }
/* --gold is remapped to ink on this skin, so «active» is said with weight and a
   filled row instead of with colour */
html[data-ir2-skin="brutal"] .mmi.active { color: #1f1f1f; background: rgba(31,31,31,.09); font-weight: 800; }
html[data-ir2-skin="brutal"] .mmi-ava { background: rgba(31,31,31,.10); }