/* =====================================================================
   Linen — xDatalife template for Mini Engine (Persian / RTL)
   "Linen & Glaze": warm cream surfaces, mineral charcoal, a touch of
   clay brown. Editorial, calm, tactile.

   Rules of this file
     · every colour, size, radius and shadow comes from a token in :root
     · cards rest flat (hairline border, no shadow); only floating things
       and hovers get the soft daylight shadow
     · pills for small controls (buttons, chips, badges, search),
       16 / 24 / 32px radii for media, cards and large surfaces
     · no letter-spacing anywhere — it breaks Persian letter joining

   Contents
     1. Fonts & tokens       7. Home blocks
     2. Base                 8. Article
     3. Primitives           9. Comments
     4. Header              10. Forms & account
     5. Hero & page heads   11. Download, status, notices
     6. Feed & cards        12. Toasts & modal · 13. Footer
                            14. Responsive · 15. Squircle
   ===================================================================== */

/* ============================ 1. Fonts & tokens ============================ */

@font-face {
  font-family: 'per'; src: local('per'), url(../font/per.woff2) format('woff2'); font-display: swap;
}
@font-face {
  font-family: 'mono'; src: url(../font/mono.woff2) format('woff2'); font-display: swap;
}
:root {
  color-scheme: light;

  /* Cream neutrals */
  --page: #fbf9f6;
  --surface: #fbf9f6;
  --card: #fdfbf8;
  --tone: #f5f3f0;
  --tone-2: #efeeeb;
  --tone-3: #eae8e5;
  --x-marks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23e9e7e2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m10 10 4 4m0-4-4 4'/%3E%3C/svg%3E");
  --gold: #f3e6c4;
  --gold-text: #7a5a12;
  --x-marks-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23efe0bc' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m10 10 4 4m0-4-4 4'/%3E%3C/svg%3E");
  --x-marks-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23f0eeea' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m10 10 4 4m0-4-4 4'/%3E%3C/svg%3E");
  --line: rgba(52, 51, 48, .04);
  --line-strong: #e2dfd8;
  --field: var(--tone-2);
  --glass: rgba(251, 249, 246, .85);
  --veil: rgba(255, 255, 255, .55);
  --overlay: rgba(31, 30, 27, .35);

  /* Mineral charcoal */
  --ink: #343330;
  --ink-hover: #4a4844;
  --on-ink: #faf8f5;
  --on-ink-fill: rgba(250, 248, 245, .16);

  /* Text */
  --text: #1f1e1b;
  --text-2: #484740;
  --text-3: #6d6a62;
  --text-4: #8e8b82;
  --outline: #79776f;

  /* Ice blue — about 5% of the page */
  --clay: #ebe3f5;
  --clay-hover: #dfd3ef;
  --clay-dot: #c6b4e0;
  --x-marks-clay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23e2d8ef' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m10 10 4 4m0-4-4 4'/%3E%3C/svg%3E");
  --clay-mid: #8f6cc4;
  --clay-text: #5b3d8f;
  --clay-text-2: #4a3a66;
  --clay-ring: rgba(143, 108, 196, .35);
  --accent: #6a45a8;
  --accent-hover: #52338a;

  /* Status */
  --danger: #ba1a1a;
  --danger-soft: #ffdad6;
  --danger-text: #93000a;
  --ok: #2f8f4e;
  --ok-soft: #e1f3e6;
  --warn-soft: #fbf1dc;
  --warn-text: #7a5410;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --gutter: var(--sp-6);
  --edge: var(--sp-12);

  /* Radius */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 9999px;

  /* Controls */
  --h-xs: 24px;
  --h-sm: 36px;
  --h-md: 44px;
  --h-lg: 52px;

  /* Type */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-display: clamp(2rem, 2.4vw + 1rem, 3.25rem);
  --fs-headline: clamp(1.5rem, 1.3vw + 1rem, 2.25rem);

  /* Daylight elevation */
  --sh-float: 0 12px 32px -14px rgba(52, 51, 48, .07), 0 4px 12px -6px rgba(52, 51, 48, .03);
  --sh-modal: 0 24px 48px -12px rgba(52, 51, 48, .10), 0 8px 16px -4px rgba(52, 51, 48, .05);
  --sh-header: 0 1px 8px rgba(52, 51, 48, .04);
  --sh-footer: 0 -1px 12px rgba(52, 51, 48, .03);
  --sh-field: 0 2px 10px -2px rgba(52, 51, 48, .03);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --t: .2s var(--ease);
  --shell: 1200px;
}

/* ============================ 2. Base ============================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 104px; }
body { min-height: 100dvh; background: var(--page); color: var(--text); font-family: per, Tahoma, sans-serif; font-size: var(--fs-base); line-height: 1.9; direction: rtl; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -.001px; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; transition: color var(--t), background-color var(--t), border-color var(--t), box-shadow var(--t); }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.5; overflow-wrap: break-word; text-wrap: balance; }
[hidden], .hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--clay-mid); outline-offset: 2px; }
::selection { background: var(--clay); color: var(--text); }
.i { width: 22px; height: 22px; flex-shrink: 0; }
.shell { width: min(100% - 2 * var(--edge), var(--shell)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; right: var(--sp-4); z-index: 1000; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full); background: var(--ink); color: var(--on-ink); }
.skip-link:focus { top: var(--sp-4); }

/* ============================ 3. Primitives ============================ */

/* ---- Buttons: pill · primary / secondary / ghost / clay · sm / md / lg ---- */
.btn, .input-submit a, .input-submit button, .Button_Green, .system_Show_More, .status-actions a { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: var(--h-md); padding: 0 var(--sp-6); border: 0; border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color var(--t), color var(--t), transform var(--t), box-shadow var(--t); }
.btn .i { width: 20px; height: 20px; }
.btn--primary, .input-submit a, .input-submit button, .Button_Green { background: var(--ink); color: var(--on-ink); }
.btn--primary:hover, .input-submit a:hover, .input-submit button:hover, .Button_Green:hover { background: var(--ink-hover); color: var(--on-ink); box-shadow: var(--sh-float); transform: translateY(-1px); }
.btn--secondary, .system_Show_More, .status-actions a:not(.btn) { background: var(--tone-2); color: var(--ink); }
.btn--secondary:hover, .system_Show_More:hover, .status-actions a:not(.btn):hover { background: var(--tone-3); }
.btn--ghost { background: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--tone-2); color: var(--ink); }
.btn--clay { background: var(--clay); color: var(--clay-text); }
.btn--clay:hover { background: var(--clay-hover); color: var(--clay-text); }
.btn--sm { height: var(--h-sm); padding: 0 var(--sp-4); }
.btn--sm .i { width: 18px; height: 18px; }
.btn--lg { height: var(--h-lg); padding: 0 var(--sp-8); font-size: var(--fs-base); }
.btn--block { width: 100%; }
.btn.is-disabled { opacity: .45; pointer-events: none; }

/* ---- Pills (badges, tags) ---- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--sp-3); border-radius: var(--r-full); background: var(--tone-2); color: var(--text-2); font-size: var(--fs-xs); font-weight: 700; line-height: 1; white-space: nowrap; }
.pill .i { width: 16px; height: 16px; }
a.pill:hover { background: var(--tone-3); color: var(--ink); }
.pill--xs { height: var(--h-xs); padding: 0 10px; font-size: 11.5px; }
.pill--clay { background: var(--clay); color: var(--clay-text); }
a.pill--clay:hover { background: var(--clay-hover); color: var(--clay-text); }
.pill--ink { background: var(--ink); color: var(--on-ink); }
.pill--light { background: var(--card); color: var(--text-2); }
.pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.dot { display: inline-block; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--accent); }
.pill--ink .dot { background: var(--clay-mid); }

/* ---- Small text ---- */
.overline { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; }
.overline a:hover { color: var(--ink); }

/* Separator between meta items — a "·" next to Persian digits reads like a zero (۰) */
.sep { display: inline-block; width: 1px; height: 0.9em; margin-inline: 6px; background: currentColor; opacity: .35; vertical-align: -0.1em; }
.link-more { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: var(--fs-sm); font-weight: 700; }
.link-more .i { width: 18px; height: 18px; transition: transform var(--t); }
.link-more:hover { color: var(--accent-hover); }
.link-more:hover .i { transform: translateX(-3px); }

/* ---- Icon circles ---- */
.icon-circle { display: inline-grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--tone-2); color: var(--ink); }
.icon-circle .i { width: 20px; height: 20px; }
.icon-circle--sm { width: 34px; height: 34px; }
.icon-circle--sm .i { width: 16px; height: 16px; }
.icon-circle--lg { width: 56px; height: 56px; }
.icon-circle--lg .i { width: 24px; height: 24px; }
.icon-circle--ink { background: var(--ink); color: var(--on-ink); }
.icon-circle--danger { background: var(--danger-soft); color: var(--danger); }

/* ---- Sections ---- */
.section { margin-top: var(--sp-16); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.section-title { margin-top: var(--sp-1); color: var(--text); font-size: var(--fs-2xl); }
.section-title--sm { font-size: var(--fs-xl); }
.divider { border: 0; border-top: 1px solid var(--line); }

/* ============================ 4. Header ============================ */
.site-header { position: sticky; top: 0; z-index: 50; box-shadow: var(--sh-header); background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.header-inner { display: flex; align-items: center; gap: var(--sp-8); width: min(100% - 2 * var(--edge), var(--shell)); height: 80px; margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.brand-name { color: var(--text); font-size: var(--fs-xl); font-weight: 800; white-space: nowrap; }
.header-panel { display: flex; flex: 1; align-items: center; gap: var(--sp-6); min-width: 0; }
.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav-link { padding: 6px var(--sp-3); border-radius: var(--r-full); color: var(--text-2); font-size: 14px; font-weight: 500; white-space: nowrap; }
.nav-link:hover { background: var(--tone-2); color: var(--text); }
.nav-link.is-active { color: var(--text); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 10px; }
.search { position: relative; width: min(340px, 100%); margin-inline-start: auto; }
.search > .i { position: absolute; top: 50%; inset-inline-start: var(--sp-4); width: 18px; height: 18px; color: var(--outline); transform: translateY(-50%); pointer-events: none; }
.search input[type] { width: 100%; height: var(--h-md); padding-inline: 44px var(--sp-5); font-size: var(--fs-sm); }
.search input[type]:focus { border-color: var(--clay-mid); background: var(--card); box-shadow: 0 0 0 3px var(--clay-ring); }
.search input::-webkit-search-cancel-button { display: none; }
.header-actions { display: flex; align-items: center; gap: var(--sp-2); }
.icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; color: var(--ink); }
.icon-btn:hover { background: var(--tone-2); }
.icon-btn--ink { background: var(--ink); color: var(--on-ink); }
.icon-btn--ink:hover { background: var(--ink-hover); }
.icon-btn img { width: 100%; height: 100%; object-fit: cover; }
.icon-btn-dot { position: absolute; top: 7px; left: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--clay-mid); box-shadow: 0 0 0 2px var(--surface); }
.menu-toggle { display: none; }
.menu-toggle .i-close, .site-header.is-open .menu-toggle .i-open { display: none; }
.site-header.is-open .menu-toggle .i-close { display: block; }

/* ============================ 5. Hero & page heads ============================ */
.hero { display: flex; flex-direction: column; gap: var(--sp-3); padding-block: var(--sp-12) var(--sp-8); }
.hero-title { color: var(--text); font-size: var(--fs-display); font-weight: 800; line-height: 1.3; }

/* Second half of the home title — the mockup's "for Modern Living" (outline colour, regular weight) */
.hero-title-accent { color: var(--outline); font-size: .62em; font-weight: 400; }
.hero-title-soft { color: var(--text-3); font-size: .55em; font-weight: 400; }
.hero-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-8); margin-top: var(--sp-1); }
.hero-text { max-width: 60ch; color: var(--text-2); line-height: 2; text-wrap: pretty; }

/* Stat pill — numbers in overlapping circles, then a short label */
.stat-pill { display: inline-flex; align-items: center; gap: var(--sp-3); padding: 6px var(--sp-3); border-radius: var(--r-full); background: var(--tone-2); color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; }
a.stat-pill:hover { background: var(--tone-3); }
.stat-pill-nums { display: flex; }
.stat-pill-nums b { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: var(--r-full); background: var(--clay); color: var(--clay-text); font-size: 14px; font-weight: 800; }
.stat-pill-nums b + b { margin-inline-start: -6px; background: var(--card); color: var(--text); }

/* Chips row + sort label */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-8); }
.toolbar .chips { margin-bottom: 0; min-width: 0; }
.page-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding-block: var(--sp-14) var(--sp-8); }
.page-title { color: var(--text); font-size: var(--fs-display); font-weight: 800; line-height: 1.35; }
.page-title-soft { color: var(--text-3); font-size: .6em; font-weight: 400; }

/* Empty search: the engine shows a status box with its own <h1> */
.shell:has(.status) > .page-head { display: none; }

/* ============================ 6. Feed & cards ============================ */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.chips a { display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--h-sm); padding: 0 var(--sp-4); border-radius: var(--r-full); background: var(--tone-2); color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.chips a:hover { background: var(--tone-3); color: var(--ink); }
.chips a.is-active { background: var(--ink); color: var(--on-ink); }
.chip-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--card); color: var(--text-2); font-size: 11px; font-weight: 700; }
.chips a.is-active .chip-count { background: var(--on-ink-fill); color: var(--on-ink); }
.main_Content, .card-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gutter); }
.search-results, .compact_Group { display: flex; flex-direction: column; gap: var(--sp-3); }
.compact_Group { grid-column: 1 / -1; }

/* ---- Post card ---- */
.post-card { position: relative; display: flex; flex-direction: column; padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); transition: box-shadow var(--t), transform var(--t); }
.post-card:hover { box-shadow: var(--sh-float); transform: translateY(-2px); }

/* Featured posts (shortstory_featured.tpl) share the bento feature's stone surface with small round-capped x marks */
.post-card--featured, .feature { background: var(--x-marks) 0 0 / 24px 24px, var(--tone-2); }

/* Featured posts in the feed: soft gold card; pills (ویژه, update note) and the category turn deep gold */
/* GOLD featured cards — switched off for the grey test:
.post-card--featured { background: var(--x-marks-gold) 0 0 / 24px 24px, var(--gold); }
.post-card--featured .pill--clay { background: var(--card); color: var(--gold-text); }
.post-card--featured .overline a { color: var(--gold-text); }
.post-card--featured .overline a:hover { color: var(--ink); }
*/
.post-card-media { position: relative; }
.media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--tone); }
.media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post-card:hover .media img { transform: scale(1.02); }

/* Card titles answer the hover in the accent colour */
.post-card-title, .feature-title, .mini-title, .swatch-title, .post-row-title, .cat-card-text b { transition: color var(--t); }
.post-card:hover .post-card-title, .feature:hover .feature-title, .mini:hover .mini-title, .swatch:hover .swatch-title, .post-row:hover .post-row-title, .cat-card:hover .cat-card-text b { color: var(--accent); }
.post-card .media { aspect-ratio: 1 / 1; }

/* No cover: the engine returns noimage.png — show the brand mark instead */
.media img[src$="noimage.png"] { display: none; }
.media-mark { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; color: var(--tone-3); transform: translate(-50%, -50%); }
.post-card-body { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-1) var(--sp-1); }
.post-card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.75; }

/* The title link covers the whole card; pills stay clickable above it */
.post-card-note { align-self: flex-start; max-width: 100%; height: auto; margin-top: var(--sp-1); padding-block: 3px; line-height: 1.8; }

/* The ellipsis needs overflow: hidden — the line-height above keeps Persian ascenders and descenders inside it */
.post-card-note span { overflow: hidden; text-overflow: ellipsis; line-height: inherit; }
.post-card-title a::after, .post-row-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

/* ---- Row (compact posts, search results) ---- */
.post-row { position: relative; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-5) var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); transition: box-shadow var(--t); }
.post-row:hover { box-shadow: var(--sh-float); }
.post-row .overline a, .post-card .overline a { position: relative; z-index: 2; }

/* Category name opens the meta line (kept off the photo) */
.post-card .overline { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 var(--sp-2); }
.post-card .overline a, .post-card-cat { color: var(--accent); }
.post-card .overline a:hover { color: var(--accent-hover); }
.post-row-title { color: var(--text); font-size: var(--fs-lg); font-weight: 700; line-height: 1.7; }
.post-row-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.95; }

/* ---- Pager ---- */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-12); }
.Navigation_Pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.navigation_Cube { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 var(--sp-2); border-radius: var(--r-full); color: var(--text-2); font-size: 14px; font-weight: 600; line-height: 1; }
a.navigation_Cube:hover { background: var(--tone-2); color: var(--ink); }
.navigation_Active { background: var(--ink); color: var(--on-ink); }
.navigation_Dots { min-width: 20px; color: var(--text-4); }

/* ============================ 7. Home blocks ============================ */
.home-duo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: stretch; gap: var(--gutter); margin-top: var(--gutter); }

/* ---- Bento: featured card (start side) + plugin palette + two popular cards ---- */
.bento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); }
.bento-side { display: flex; flex-direction: column; gap: var(--gutter); min-width: 0; }
.section-head--feed { margin-top: var(--sp-16); }

/* Featured card */
.feature { position: relative; display: flex; flex-direction: column; gap: var(--sp-4); height: 100%; padding: var(--sp-4); border-radius: var(--r-xl); }
.feature-head { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.feature-head .pill, .feature .btn { position: relative; z-index: 2; }
.feature-date { margin-inline-start: auto; }
.feature-media { aspect-ratio: 1; border-radius: var(--r-lg); }
.feature:hover .media img { transform: scale(1.02); }
.feature-body { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); padding: 0 var(--sp-2) var(--sp-1); }
.feature-text { min-width: 0; }
.feature-title { margin-top: var(--sp-1); color: var(--text); font-size: var(--fs-xl); font-weight: 800; line-height: 1.55; }
.feature-title a::after, .mini-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.feature-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: var(--sp-1); color: var(--text-3); font-size: var(--fs-sm); line-height: 1.95; }
.btn--tall { flex-shrink: 0; height: 64px; padding: 0 var(--sp-6); font-size: 14px; }

/* Palette card — three newest plugins as small swatches */
.palette { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--card); }
.palette-head { display: flex; align-items: center; gap: var(--sp-3); }
.palette-title { flex: 1; min-width: 0; color: var(--text); font-size: var(--fs-md); }
.palette-count { color: var(--text-3); font-size: var(--fs-xs); }
.palette-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.swatch { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; padding: var(--sp-2); border-radius: var(--r-md); background: var(--tone); transition: box-shadow var(--t), transform var(--t); }
.swatch:hover { box-shadow: var(--sh-float); transform: translateY(-2px); }
.swatch:hover .media img { transform: scale(1.02); }
.swatch-media { aspect-ratio: 1; border-radius: var(--r-sm); }
.swatch-title { overflow: hidden; padding-inline: var(--sp-1); color: var(--text); font-size: var(--fs-xs); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.palette-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); color: var(--text-3); font-size: var(--fs-xs); }

/* Two popular posts */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); flex: 1; }
.mini { position: relative; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--card); transition: box-shadow var(--t), transform var(--t); }
.mini:hover { box-shadow: var(--sh-float); transform: translateY(-2px); }
.mini-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.mini-views { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--text-3); font-size: var(--fs-xs); }
.mini-views .i { width: 15px; height: 15px; }
.mini-media { margin-bottom: var(--sp-2); }
.mini-media .media { aspect-ratio: 1; }
.mini:hover .media img { transform: scale(1.02); }
.mini-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; color: var(--text); font-size: var(--fs-base); font-weight: 700; line-height: 1.75; }
.mini-meta { color: var(--text-3); font-size: var(--fs-xs); }

/* ---- Panel (plugin updates) ---- */
.panel { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-xl); }
.panel--tone { background: var(--tone); }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.panel-title { flex: 1; min-width: 0; color: var(--text); font-size: var(--fs-md); }

/* Updates as small white cards inside the stone box */
.updates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.update { position: relative; display: flex; align-items: center; gap: var(--sp-3); min-width: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface); transition: box-shadow var(--t); }
.update:hover { box-shadow: var(--sh-float); }

/* Big version number on the start (right) side, on the card's own background */
.update-version { flex-shrink: 0; min-width: 48px; padding-inline-end: var(--sp-3); border-inline-end: 1px solid var(--tone-3); color: var(--text); font-size: var(--fs-xl); font-weight: 800; line-height: 1.2; text-align: center; }
.update-body { display: flex; flex-direction: column; min-width: 0; }
.update-title { overflow: hidden; color: var(--text); font-size: var(--fs-sm); font-weight: 700; line-height: 1.8; text-overflow: ellipsis; white-space: nowrap; transition: color var(--t); }

/* The title link covers the whole little card */
a.update-title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.update:hover .update-title { color: var(--accent); }
.update-meta { overflow: hidden; color: var(--text-3); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }

/* ---- Bands (release, community) ---- */
.band { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) auto; align-items: center; gap: var(--sp-10); overflow: hidden; padding: var(--sp-10) var(--sp-12); border-radius: var(--r-xl); }
.band--clay { background: var(--x-marks-clay) 0 0 / 24px 24px, var(--clay); }

/* Compact release card (home): stacked, smaller type */
.band--compact { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--sp-2); padding: var(--sp-6); }
.band--compact .band-title { font-size: var(--fs-xl); }
.band--compact .band-text { color: var(--clay-text-2); font-size: var(--fs-sm); line-height: 1.9; text-wrap: pretty; }
.band--compact .band-buttons { margin-top: var(--sp-1); }
.band--compact .btn--ghost { color: var(--clay-text); }
.band--compact .btn--ghost:hover { background: var(--veil); }
.band--tone { margin-top: var(--sp-16); background: var(--tone); grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.band-main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.band-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.band-tag { color: var(--text-3); font-size: var(--fs-sm); font-weight: 700; }
.band--clay .band-tag { color: var(--clay-text); }
.band-title { color: var(--text); font-size: var(--fs-headline); font-weight: 800; line-height: 1.45; }
.band-text { max-width: 58ch; color: var(--text-2); line-height: 2; }
.band--clay .band-text { color: var(--clay-text-2); }
.band-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }

/* ---- Perks (community band) ---- */
.perks { display: flex; flex-direction: column; gap: var(--sp-3); }
.perk { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); }
.perk > span:last-child { display: flex; flex-direction: column; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.8; }
.perk b { color: var(--text); font-size: var(--fs-base); }

/* ---- Category cards ---- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
.cat-card { display: flex; align-items: center; gap: var(--sp-3); padding-block: var(--sp-3); padding-inline: var(--sp-3) var(--sp-5); border-radius: var(--r-lg); background: var(--tone); transition: box-shadow var(--t), transform var(--t); }
.cat-card:hover { box-shadow: var(--sh-float); transform: translateY(-2px); }
.cat-card-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.6; }
.cat-card-text b { color: var(--text); font-size: var(--fs-base); }
.cat-card-text span { color: var(--text-3); font-size: var(--fs-xs); }
.cat-card-num { margin-inline-start: auto; color: var(--text-4); font-size: var(--fs-xs); font-weight: 700; }

/* ============================ 8. Article ============================ */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); color: var(--text-4); font-size: var(--fs-sm); }
.crumbs a { color: var(--text-3); }
.crumbs a:hover { color: var(--ink); }
.note { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-6); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--clay); color: var(--clay-text-2); line-height: 1.95; }
.note .i { margin-top: 4px; }

/* ---- Table of contents ---- */
.toc { margin-bottom: var(--sp-8); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.toc summary { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); color: var(--text); font-weight: 700; cursor: pointer; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc-chevron { color: var(--text-3); transition: transform var(--t); }
.toc details[open] .toc-chevron { transform: rotate(180deg); }
.toc-list { padding: 0 var(--sp-3) var(--sp-4); counter-reset: toc; }
.toc-list li:not(.toc-sub) { counter-increment: toc; }
.toc-list a { display: flex; gap: var(--sp-2); padding: 6px var(--sp-2); border-radius: var(--r-sm); color: var(--text-2); font-size: 14px; }
.toc-list li:not(.toc-sub) > a::before { content: counter(toc, persian) "."; min-width: 18px; color: var(--text-4); }
.toc-list a:hover { background: var(--tone); color: var(--ink); }
.toc-sub a { padding-inline-start: 34px; font-size: var(--fs-sm); }

/* ---- Prose ---- */
.prose { color: var(--text); font-size: 17px; line-height: 2.15; overflow-wrap: anywhere; }
.prose > * + * { margin-top: var(--sp-5); }
.prose h2, .prose h3, .prose h4 { margin-top: var(--sp-10); line-height: 1.6; scroll-margin-top: 96px; }
.prose h2 { font-size: var(--fs-xl); }
.prose h3 { font-size: var(--fs-lg); }
.prose h4 { font-size: var(--fs-md); }
.prose b, .prose strong { font-weight: 800; }
.prose a:not(.btn, .attach a) { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.prose a:not(.btn, .attach a):hover { color: var(--accent-hover); }
.prose img { border-radius: var(--r-md); }
.system_PhotoClass { display: inline-block; }
.prose ul, .prose ol { padding-inline-start: var(--sp-6); }
.prose ul { list-style: disc; }
.prose ol { list-style: persian; }
.prose li + li { margin-top: var(--sp-2); }
.prose li::marker { color: var(--text-4); }
.prose hr { margin-block: var(--sp-10); border: 0; border-top: 1px solid var(--line); }

/* The engine outputs <span class="engineHeadLine"> followed by <br> — it must stay inline,
   or the <br> after it becomes an extra empty line */
.engineHeadLine { display: inline-flex; align-items: center; margin-block: 0 var(--sp-2); vertical-align: middle; gap: var(--sp-3); color: var(--text); font-size: var(--fs-lg); font-weight: 800; scroll-margin-top: 96px; }

/* Thick charcoal bar on the start (right) side */
.engineHeadLine::before { content: ""; align-self: stretch; width: 6px; min-height: 1.4em; flex-shrink: 0; border-radius: var(--r-full); background: var(--ink); }
.prose blockquote, .quote { --quote-bg: var(--tone); padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); background: var(--quote-bg); color: var(--text-2); font-size: var(--fs-base); line-height: 2; }
.quote b { color: var(--text); }
.quote_blue { --quote-bg: var(--clay); }
.quote_yellow { --quote-bg: var(--warn-soft); }
.quote_purple { --quote-bg: var(--tone-2); }
.quote_green { --quote-bg: var(--ok-soft); }
.quote_red { --quote-bg: var(--danger-soft); }
.prose table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); font-size: 14px; }
.prose th, .prose td { padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--line); text-align: start; }
.prose tr:last-child td { border-bottom: 0; }
.prose th { background: var(--tone); font-weight: 700; }
.system_Tag_Hide { display: block; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--warn-soft); color: var(--warn-text); font-size: var(--fs-base); }
pre { direction: ltr; padding: var(--sp-5) var(--sp-6); overflow-x: auto; border-radius: var(--r-md); background: var(--ink); color: var(--on-ink); font-size: 13.5px; line-height: 1.9; text-align: left; white-space: pre-wrap; word-wrap: break-word; }
code { font-family: mono, ui-monospace, Consolas, per, monospace; }
:not(pre) > code { padding: 2px 8px; border-radius: var(--r-sm); background: var(--tone-2); font-size: .88em; }

/* Syntax colours for the engine's PHP highlighter (on the charcoal code block) */
.php-keyword { color: #f4a3c4; font-weight: 700; }
.php-constant { color: #9fd3f2; font-weight: 700; }
.php-builtin-function { color: #c4dd8c; }
.php-function { color: #f2c99a; }
.php-class-name { color: #9fd3f2; font-weight: 700; }
.php-method { color: #f4a3c4; }
.php-property { color: #f2c99a; }
.php-variable { color: #f0eee9; }
.php-string { color: #f1dfa0; }
.php-number { color: #cdbff0; }
.php-comment { color: #a19e96; font-style: italic; }
.php-operator { color: #f0eee9; }
.php-punctuation { color: #f0eee9; }
.php-namespace { color: #9fd3f2; }

/* ---- Attachment, photos ---- */
.attach { display: flex; align-items: center; gap: var(--sp-3); margin-block: var(--sp-5); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); line-height: 1.6; }
.attach-info { display: flex; flex-direction: column; min-width: 0; }
.prose .attach-title, .attach-title { color: var(--text); font-size: var(--fs-base); font-weight: 700; text-decoration: none; }
.attach-title:hover { color: var(--accent); }
.attach-meta { color: var(--text-3); font-size: var(--fs-xs); }
.attach .btn { margin-inline-start: auto; }

/* Post photos: 5 squares per row filling the column */
.post-photos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
.post-photos a { display: block; overflow: hidden; border-radius: var(--r-sm); background: var(--tone-3); box-shadow: var(--sh-float); transition: box-shadow var(--t); }
.post-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s var(--ease); }
.post-photos a:hover img { transform: scale(1.04); }

/* ---- Article footer & like ---- */
.article-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-10); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.article-more { margin-inline-start: auto; }
.article-foot > .comment-form { flex-basis: 100%; order: 1; }
.like-btn { display: inline-flex; align-items: center; gap: 6px; height: var(--h-sm); padding: 0 var(--sp-4); border: 1px solid var(--line-strong); border-radius: var(--r-full); background: var(--card); color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; }
.like-btn svg { width: 18px; height: 18px; transition: transform .15s ease; }
.like-btn:hover { color: var(--danger); }
.like-btn:hover svg { transform: scale(1.1); }
.like-btn.liked { --heart-fill: currentColor; border-color: var(--danger-soft); background: var(--danger-soft); color: var(--danger); }
.like-count:empty { display: none; }

/* ---- Plugin product page (fullstory_plugin.tpl) ---- */
.pp-crumbs { padding-top: var(--sp-8); }

/* Hero: identity + actions on the start side, cover on the end side */
.pp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: center; gap: var(--sp-10); margin-top: var(--sp-5); padding: var(--sp-8); border-radius: var(--r-xl); background: var(--x-marks-soft) 0 0 / 24px 24px, var(--tone); }
.pp-intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); min-width: 0; }
.pp-id { display: flex; align-items: center; gap: var(--sp-4); }
.pp-icon { width: 72px; height: 72px; flex-shrink: 0; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--sh-float); object-fit: cover; }
.pp-icon--empty { display: grid; place-items: center; color: var(--clay-text); }
.pp-icon--empty .i { width: 32px; height: 32px; }
.pp-title { color: var(--text); font-size: var(--fs-display); font-weight: 800; line-height: 1.35; }
.pp-summary { max-width: 56ch; color: var(--text-2); font-size: var(--fs-md); line-height: 2; text-wrap: pretty; }
.pp-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.pp-actions .btn--secondary { background: var(--card); }
.pp-actions .btn--secondary:hover { background: var(--tone-3); }
.pp-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); color: var(--text-3); font-size: var(--fs-sm); }
.pp-meta > * { display: inline-flex; align-items: center; gap: 6px; }
.pp-meta .i { width: 18px; height: 18px; }
.pp-cover { overflow: hidden; border-radius: var(--r-lg); background: var(--tone-2); box-shadow: var(--sh-float); }
.pp-cover img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pp-cover:has(img[src$="noimage.png"]), .pp-cover:empty { display: none; }
.pp-hero:has(.pp-cover:empty), .pp-hero:has(img[src$="noimage.png"]) { grid-template-columns: minmax(0, 1fr); }
.pp-gallery:not(:has(.post-photos)) { display: none; }
.story .pp-gallery { margin-top: var(--sp-8); }

/* Key facts strip */
.pp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.pp-facts li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.pp-fact-icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r-md); background: var(--tone-2); color: var(--text-2); }
.pp-fact-icon .i { width: 24px; height: 24px; }
.pp-fact-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-fact-text span { color: var(--text-3); font-size: var(--fs-xs); }
.pp-fact-text b { color: var(--text); font-size: var(--fs-lg); font-weight: 800; line-height: 1.5; }

/* Content + sticky side card */
.pp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: var(--sp-10); margin-top: var(--sp-10); }
.pp-main { min-width: 0; }

/* No screenshots: no gallery section */
.pp-section + .pp-section { margin-top: var(--sp-12); }
.pp-section-title { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); color: var(--text); font-size: var(--fs-xl); font-weight: 800; }
.pp-count { color: var(--text-4); font-size: var(--fs-sm); font-weight: 600; }

/* Features: two columns of checks */
.pp-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.pp-features li { --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9'/%3E%3C/svg%3E"); position: relative; padding: var(--sp-3) var(--sp-4); padding-inline-start: 48px; border-radius: var(--r-md); background: var(--tone); color: var(--text-2); font-size: 14px; font-weight: 600; line-height: 1.9; }
.pp-features li::before { content: ""; position: absolute; inset-inline-start: var(--sp-3); top: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--clay); }

/* The theme check icon (round caps), centred in the circle */
.pp-features li::after { content: ""; position: absolute; inset-inline-start: var(--sp-3); top: 14px; width: 24px; height: 24px; background: var(--clay-text); -webkit-mask: var(--check-icon) center / 14px 14px no-repeat; mask: var(--check-icon) center / 14px 14px no-repeat; }

/* Changelog timeline */
.pp-versions { display: flex; flex-direction: column; }
.pp-version { position: relative; padding-inline-start: var(--sp-8); padding-bottom: var(--sp-6); }
.pp-version::before { content: ""; position: absolute; inset-inline-start: 7px; top: 14px; bottom: -6px; width: 2px; background: var(--tone-3); }
.pp-version:last-child { padding-bottom: 0; }
.pp-version:last-child::before { display: none; }
.pp-version::after { content: ""; position: absolute; inset-inline-start: 0; top: 7px; width: 10px; height: 10px; border: 3px solid var(--page); border-radius: 50%; background: var(--outline); box-sizing: content-box; }
.pp-version:first-child::after { background: var(--accent); }
.pp-version-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.pp-version-num { color: var(--text); font-size: var(--fs-md); font-weight: 800; }
.pp-version-meta { color: var(--text-3); font-size: var(--fs-xs); }
.pp-version-changes { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--tone); color: var(--text-2); font-size: 12px; line-height: 1.9; }
.pp-version-changes li { position: relative; padding-inline-start: var(--sp-4); }
.pp-version-changes li::before { content: ""; position: absolute; inset-inline-start: 0; top: .85em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-4); }

/* Side cards */
.pp-side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: var(--sp-4); }
.pp-card { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--card); }
.pp-get { border: 0; background: var(--x-marks-clay) 0 0 / 24px 24px, var(--clay); }
.pp-get-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.pp-get-label { color: var(--clay-text-2); font-size: var(--fs-sm); font-weight: 700; }
.pp-get-version { color: var(--text); font-size: var(--fs-xl); font-weight: 800; }
.pp-get-file { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--card); color: var(--text-2); font-size: var(--fs-sm); }
.pp-get-file span { overflow: hidden; direction: ltr; text-overflow: ellipsis; white-space: nowrap; }
.pp-get-file b { flex-shrink: 0; margin-inline-start: auto; color: var(--text); }
.pp-get-file .i { width: 16px; height: 16px; flex-shrink: 0; color: var(--clay-text); }
.pp-get-note, .pp-get-update { display: flex; align-items: flex-start; gap: var(--sp-2); color: var(--clay-text-2); font-size: var(--fs-xs); line-height: 1.9; }
.pp-get-note a { color: var(--clay-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pp-get-note .i, .pp-get-update .i { width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; }
.pp-get-update { padding-top: var(--sp-3); border-top: 1px dashed var(--clay-dot); }
.pp-card-title { color: var(--text); font-size: var(--fs-md); font-weight: 800; }
.pp-specs { display: flex; flex-direction: column; }
.pp-specs div { display: flex; justify-content: space-between; gap: var(--sp-3); padding-block: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.pp-specs div:first-child { border-top: 0; padding-top: 0; }
.pp-specs dt { color: var(--text-3); }
.pp-specs dd { color: var(--text); font-weight: 700; text-align: end; }

/* Blog posts (fullstory.tpl) reuse the product page layout */
.story-author { display: flex; align-items: center; gap: var(--sp-3); }
.story-author > span:last-child { display: flex; flex-direction: column; line-height: 1.7; }
.story-author b { color: var(--text); font-size: var(--fs-sm); }
.story-author small { color: var(--text-3); font-size: var(--fs-xs); }
.pp-side .toc { margin: 0; }
.pp-side .toc-list { max-height: 46vh; overflow-y: auto; scrollbar-width: thin; }
.pp-specs dd a:hover { color: var(--accent); }

/* Phones: sticky download bar */
.pp-bar { display: none; }

/* ---- Plugin license box (plugin_license*.tpl, loaded by js/theme.js): title, then at most 3 rows ---- */
.pp-license { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.pp-license.is-busy .pp-lic-body { opacity: .55; pointer-events: none; transition: opacity .2s ease; }
.pp-lic-title { color: var(--text); font-size: var(--fs-lg); font-weight: 800; line-height: 1.5; }
.pp-lic-lead { color: var(--text-3); font-size: var(--fs-xs); line-height: 1.8; }
/* Title on the start side, three small text steps on the end side (state from js/theme.js: .is-done, .is-current) */
.pp-lic-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); }
.pp-lic-steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.pp-lic-steps li { display: inline-flex; align-items: center; gap: 5px; color: var(--text-4); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.pp-lic-steps li + li::before { content: ""; width: 5px; height: 5px; margin-inline-end: var(--sp-2); border-bottom: 1.5px solid var(--line-strong); border-left: 1.5px solid var(--line-strong); transform: rotate(45deg); }
.pp-lic-steps .i { width: 15px; height: 15px; }
.pp-lic-steps .pp-lic-ok,
.pp-lic-steps li.is-done .i:not(.pp-lic-ok) { display: none; }
.pp-lic-steps li.is-done .pp-lic-ok { display: block; }
.pp-lic-steps li.is-done { color: var(--ok); }
.pp-lic-steps li.is-current { color: var(--text); font-weight: 800; }
.pp-lic { display: flex; flex-direction: column; gap: var(--sp-3); }
.pp-lic-loading { color: var(--text-4); font-size: var(--fs-sm); }
.pp-lic-msg { margin: 0; }
.pp-lic-state { display: flex; align-items: center; gap: var(--sp-3); }
.pp-lic-state p { flex: 1; min-width: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.9; }
/* Domain(s) and the code side by side */
.pp-lic-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.pp-lic-domains { display: flex; flex-direction: column; gap: 6px; }
.pp-lic-domain { display: flex; flex: 1; align-items: center; gap: var(--sp-2); padding: 6px; padding-inline-start: var(--sp-4); border-radius: var(--r-md); background: var(--tone); }
.pp-lic-domain-name { flex: 1; min-width: 0; color: var(--text); font-size: var(--fs-sm); font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.pp-lic-tag { padding: 0 var(--sp-2); border-radius: 6px; background: var(--card); color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; }
.pp-lic-remove { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; transition: background-color var(--t), color var(--t); }
.pp-lic-remove:hover { background: var(--danger-soft); color: var(--danger); }
.pp-lic-remove .i { width: 16px; height: 16px; }
.pp-lic-form { display: flex; gap: var(--sp-2); }
.pp-lic-form input[type="text"] { flex: 1; min-width: 0; height: var(--h-sm); }
.pp-lic-form .btn { flex-shrink: 0; }
.pp-lic-code { display: flex; align-items: center; gap: var(--sp-3); padding: 6px; padding-inline-start: var(--sp-4); border-radius: var(--r-md); background: var(--clay); }
.pp-lic-value { flex: 1; min-width: 0; padding: 0; background: none; color: var(--clay-text); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: var(--fs-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.pp-lic-code .btn { flex-shrink: 0; min-width: 96px; background: var(--card); color: var(--ink); }
.pp-lic-note { color: var(--text-4); font-size: var(--fs-xs); line-height: 1.9; }
.pp-lic-warn { display: block; margin-top: 2px; color: var(--danger-text); font-weight: 700; }
.pp-lic-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.pp-lic-link:hover { text-decoration: underline; }

/* ============================ 9. Comments ============================ */
.comments { margin-top: var(--sp-12); }
.comments-list { margin-top: var(--sp-4); }
.comments-list:has(> #system_comments_Holder:empty) { display: none; }
.comments-empty { display: none; margin-top: var(--sp-4); padding: var(--sp-5); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--text-3); text-align: center; }
.comments-list:has(> #system_comments_Holder:empty) ~ .comments-empty { display: block; }
#system_comments_Holder { display: flex; flex-direction: column; gap: var(--sp-3); }
.px10 { display: none; }
#system_Landing { display: block; }
#system_Landing > .comment_Spacer { margin-top: var(--sp-3); }
.comment { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.comment-avatar { width: 42px; height: 42px; flex-shrink: 0; overflow: hidden; border-radius: 50%; background: var(--tone-2); }
.comment-avatar img, .comment-avatar svg, .avatar-initial { width: 100%; height: 100%; object-fit: cover; }
.avatar-initial { display: flex; align-items: center; justify-content: center; padding-top: 2px; color: var(--on-ink); font-weight: 800; }
.comment-body { flex: 1; min-width: 0; }
.comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-2); }
.comment-author { color: var(--text); font-weight: 700; }

/* Staff (group 1) */
.badge_group_Class1 { display: inline-flex; align-items: center; height: var(--h-xs); padding: 0 10px; border-radius: var(--r-full); background: var(--ink); color: var(--on-ink); font-size: var(--fs-xs); }
.comment-date { margin-inline-start: auto; color: var(--text-3); font-size: var(--fs-xs); }
.comment-text { margin-top: var(--sp-2); color: var(--text-2); line-height: 2; overflow-wrap: anywhere; }
.comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin-top: var(--sp-3); }
.comment-actions > a, .comment-actions > span > a { display: inline-flex; align-items: center; height: 30px; padding: 0 var(--sp-3); border-radius: var(--r-full); color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; }
.comment-actions > a:hover, .comment-actions > span > a:hover { background: var(--tone-2); color: var(--ink); }
.comment-actions .like-btn { height: 30px; padding: 0 10px; border-color: transparent; background: transparent; }
.answer-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.answer-list:empty { display: none; }
.comment--reply { padding: var(--sp-4); border-color: transparent; background: var(--tone); }
.comment--reply .comment-avatar { width: 34px; height: 34px; }
.mini_Add_text { margin-top: var(--sp-3); }
.comment-form { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--tone); }
.comment-textarea textarea { display: block; min-height: 130px; }
.comment-form--reply { padding: var(--sp-3); background: var(--card); }
.comment-form--reply textarea { min-height: 90px; }
.system_Show_More { width: 100%; margin-top: var(--sp-3); }

/* ============================ 10. Forms & account ============================ */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="title"], input[type="number"], input[type="url"], input[type="tel"], input:not([type]), textarea, select { width: 100%; height: 48px; padding: 0 var(--sp-5); border: 1px solid transparent; border-radius: var(--r-full); background: var(--field); box-shadow: var(--sh-field); color: var(--text); font-size: var(--fs-sm); transition: border-color var(--t), box-shadow var(--t), background-color var(--t); }
textarea { height: auto; min-height: 150px; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); line-height: 1.95; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--outline); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--clay-mid); background: var(--card); box-shadow: 0 0 0 3px var(--clay-ring); }
input[type="file"] { width: 100%; color: var(--text-3); font-size: var(--fs-sm); }
input[type="file"]::file-selector-button { height: var(--h-sm); margin-inline-end: var(--sp-3); padding: 0 var(--sp-4); border: 0; border-radius: var(--r-full); background: var(--tone-2); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { color: var(--text); font-size: 14px; font-weight: 700; }
.field-hint { color: var(--text-3); font-size: var(--fs-xs); }
.field-error, .alert { display: flex; align-items: flex-start; gap: var(--sp-2); background: var(--danger-soft); color: var(--danger-text); line-height: 1.8; }
.field-error { width: fit-content; padding: 6px var(--sp-3); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; }
.field-error .i { width: 15px; height: 15px; margin-top: 3px; }
.alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: 14px; }
.alert .i { margin-top: 4px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.input-submit a, .input-submit button { height: var(--h-md); }
.form-actions--stack .input-submit, .form-actions--stack .input-submit a, .form-actions--stack .input-submit button { width: 100%; }
.auth { display: grid; place-items: center; padding-block: var(--sp-14); }
.auth-card { display: flex; flex-direction: column; gap: var(--sp-5); width: min(100%, 460px); padding: var(--sp-10); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--card); }
.auth--wide .auth-card { width: min(100%, 640px); }
.auth-head { display: flex; flex-direction: column; gap: var(--sp-2); }
.auth-title { color: var(--text); font-size: var(--fs-2xl); font-weight: 800; line-height: 1.5; }
.auth-text { color: var(--text-2); font-size: 14px; line-height: 2; }
.auth-text a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.auth-switch { padding-top: var(--sp-4); border-top: 1px solid var(--line); color: var(--text-3); font-size: 14px; text-align: center; }
.auth-switch a { color: var(--accent); font-weight: 700; }
.auth-switch a:hover { color: var(--accent-hover); }
.profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
.profile-info { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.profile-avatar { position: relative; display: block; width: 88px; height: 88px; flex-shrink: 0; overflow: hidden; border-radius: 50%; background: var(--tone-2); cursor: pointer; }
.profile-avatar img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); }
.profile-avatar-empty .i { width: 34px; height: 34px; }
.profile-avatar-edit { position: absolute; z-index: 2; bottom: 2px; inset-inline-end: 2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--on-ink); box-shadow: 0 0 0 3px var(--card); }
.profile-avatar-edit .i { width: 14px; height: 14px; }

/* ============================ 11. Download, status, notices ============================ */

/* ---- Download page (download_dle*.tpl) — reuses the product page layout ---- */
.dl { padding-top: var(--sp-8); }
.dl-hero .pp-get-version { color: var(--text); font-size: clamp(3rem, 3vw + 1.5rem, 4rem); line-height: 1.15; }
.dl-hero .pp-get-version small { color: var(--clay-text-2); font-size: var(--fs-md); font-weight: 600; }
.dl-get { margin-inline-start: auto; }
.dl-steps { display: flex; flex-direction: column; gap: var(--sp-4); counter-reset: step; }
.dl-steps li { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-inline-start: 40px; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.9; counter-increment: step; }
.dl-steps li::before { content: counter(step, persian); position: absolute; inset-inline-start: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--clay); color: var(--clay-text); font-size: var(--fs-xs); font-weight: 800; }
.dl-steps b { color: var(--text); }
.download_Empty { padding: var(--sp-8); border-radius: var(--r-xl); background: var(--tone); color: var(--text-3); text-align: center; }
.status { display: grid; place-items: center; min-height: 56vh; padding-block: var(--sp-14); }
.status--screen { min-height: 100dvh; padding: var(--sp-4); }
.status-card { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); width: min(100%, 540px); padding: var(--sp-10); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--card); text-align: center; }
.status-title { color: var(--text); font-size: var(--fs-xl); font-weight: 800; line-height: 1.7; }
.status-text { color: var(--text-2); line-height: 2; }
.status-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
.notices { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-6); }
.notice { display: flex; align-items: center; gap: var(--sp-3); padding: 6px var(--sp-5) 6px 6px; border-radius: var(--r-full); background: var(--clay); color: var(--clay-text-2); }
.notice .icon-circle { background: var(--card); color: var(--clay-text); }
.notice-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); flex: 1; min-width: 0; font-size: 14px; }
.notice-title { color: var(--text); font-weight: 700; }
.notice-date { flex-shrink: 0; font-size: var(--fs-xs); }

/* {type} comes free-form from engine/data/notifications.json (default "info") */
.notice--warning { background: var(--warn-soft); color: var(--warn-text); }
.notice--danger, .notice--error { background: var(--danger-soft); color: var(--danger-text); }
.notice--success { background: var(--ok-soft); color: var(--ok); }

/* ============================ 12. Toasts & modal ============================ */
#toastContainer { position: fixed; bottom: var(--sp-5); left: var(--sp-5); z-index: 10000; display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none; }
.toast { display: flex; align-items: center; gap: var(--sp-3); min-width: 240px; max-width: 360px; padding: var(--sp-3) var(--sp-5); border-radius: var(--r-full); background: var(--ink); color: var(--on-ink); font-size: 14px; font-weight: 600; line-height: 1.7; direction: rtl; box-shadow: var(--sh-modal); pointer-events: all; opacity: 0; transform: translateY(12px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.toast.toast-visible { opacity: 1; transform: none; }
.toast-icon { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--on-ink-fill); font-size: var(--fs-xs); line-height: 1; }

/* Built by website.js as "toast-" + type */
.toast-success .toast-icon { background: var(--ok); }
.toast-error .toast-icon { background: var(--danger); }
.toast-warning .toast-icon { background: var(--warn-text); }
.toast-spinner { width: 18px; height: 18px; flex-shrink: 0; border: 2px solid var(--on-ink-fill); border-top-color: var(--on-ink); border-radius: 50%; animation: spin .7s linear infinite; }

@keyframes spin {
  to { transform: rotate(360deg); }
}
.modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); background: var(--overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-content { display: flex; flex-direction: column; gap: var(--sp-2); width: min(100%, 420px); padding: var(--sp-8); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-modal); }
.confirmTitle { color: var(--text); font-size: var(--fs-lg); font-weight: 800; }
.confirmMessage { color: var(--text-2); line-height: 1.95; }
.modal-buttons { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-4); }

/* ============================ 13. Footer ============================ */
.site-footer { margin-top: var(--sp-16); padding-block: var(--sp-14) var(--sp-8); background: var(--tone); box-shadow: var(--sh-footer); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-10); }
.footer-about p { max-width: 44ch; margin: var(--sp-3) 0 var(--sp-4); color: var(--text-3); font-size: 14px; line-height: 2; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.footer-title { margin-bottom: var(--sp-1); color: var(--text); font-size: 14px; }
.footer-col a { color: var(--text-3); font-size: var(--fs-sm); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-12); padding-top: var(--sp-5); border-top: 1px solid var(--tone-3); color: var(--text-3); font-size: var(--fs-xs); }
.footer-bottom a:hover { color: var(--accent); }

/* ============================ 14. Responsive ============================ */

@media (max-width: 1280px) {
  .main_Content, .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .header-inner { gap: var(--sp-5); }
  .search { width: min(260px, 100%); }
}

@media (max-width: 1100px) {
  :root { --edge: var(--sp-8); }
  .menu-toggle { display: grid; }

  /* The nav and search drop down from the header */
  .header-panel { position: absolute; top: calc(100% + var(--sp-2)); inset-inline: var(--edge); display: none; flex-direction: column; align-items: stretch; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-modal); }
  .site-header.is-open .header-panel { display: flex; }
  .nav { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-link { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); }
  .nav-link.is-active { background: var(--tone-2); text-decoration: none; }
  .search { width: 100%; margin: 0; }
  .header-actions { margin-inline-start: auto; }
  .bento, .home-duo, .band, .band--tone { grid-template-columns: minmax(0, 1fr); }
  .feature-media { align-self: center; width: min(100%, 520px); }
  .pp-hero, .pp-layout { grid-template-columns: minmax(0, 1fr); }
  .pp-hero { gap: var(--sp-6); }
  .pp-cover { order: -1; justify-self: center; width: min(100%, 360px); }
  .pp-side { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

  /* Download stays one tap away */
  .story .pp-side { order: -1; }
  .story .toc-list { max-height: none; }
  .story .pp-side .pp-card { display: none; }
  .story .pp-side { display: block; }
  .story.pp, .dl.pp { padding-bottom: 0; }
  .pp { padding-bottom: 80px; }
  .pp-bar { position: fixed; inset-inline: var(--edge); bottom: var(--sp-3); z-index: 30; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); padding-inline-start: var(--sp-5); border-radius: var(--r-full); background: var(--ink); box-shadow: var(--sh-modal); }
  .pp-bar-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.6; }
  .pp-bar-info b { overflow: hidden; color: var(--on-ink); font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
  .pp-bar-info span { color: var(--on-ink); font-size: var(--fs-xs); opacity: .7; }
  .pp-bar .btn { flex-shrink: 0; margin-inline-start: auto; background: var(--clay); color: var(--clay-text); }
  .pp-bar .btn:hover { background: var(--clay-hover); color: var(--clay-text); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .main_Content, .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero { padding-top: var(--sp-10); }
}

@media (max-width: 600px) {
  .post-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-license { padding: var(--sp-4); }
  .pp-lic-state { flex-wrap: wrap; }
  .pp-lic-state .btn { width: 100%; }
  .pp-lic-row { grid-template-columns: minmax(0, 1fr); }
  :root {
    --edge: var(--sp-5);
    --gutter: var(--sp-4);
  }
  .header-inner { height: 68px; }
  .brand .pill { display: none; }
  .pp-crumbs { padding-top: var(--sp-5); }
  .pp-hero { padding: var(--sp-5); border-radius: var(--r-lg); }
  .pp-icon { width: 56px; height: 56px; border-radius: var(--r-md); }
  .pp-actions .btn { flex: 1 1 auto; }
  .pp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-facts li { padding: var(--sp-3); }
  .pp-fact-icon { width: 38px; height: 38px; }
  .pp-fact-text b { font-size: var(--fs-md); }
  .pp-features, .pp-side { grid-template-columns: minmax(0, 1fr); }
  .pp-card { padding: var(--sp-5); border-radius: var(--r-lg); }

  /* Chips: smaller and wrapping, so every one stays on screen */
  .chips { gap: 6px; }
  .chips a { height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-xs); }
  .main_Content, .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .updates { grid-template-columns: minmax(0, 1fr); }
  .pair { gap: var(--sp-3); }
  .mini { padding: var(--sp-3); border-radius: var(--r-lg); }
  .mini-title { font-size: var(--fs-sm); }
  .feature-body { flex-direction: column; align-items: stretch; }
  .btn--tall { height: var(--h-lg); }
  .palette-grid { gap: var(--sp-2); }
  .band, .panel { padding: var(--sp-6); border-radius: var(--r-lg); }
  .cat-grid { grid-template-columns: minmax(0, 1fr); }
  .pager [data-pager-step] span { display: none; }
  .pager [data-pager-step] { width: var(--h-sm); padding: 0; }
  .prose { font-size: 16px; }
  .article-more { width: 100%; margin: 0; }
  .comment { padding: var(--sp-4); }
  .auth-card, .status-card { padding: var(--sp-6); border-radius: var(--r-lg); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  #toastContainer { left: var(--sp-3); right: var(--sp-3); }
  .toast { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ============================ 15. Squircle corners ============================ */
/* Squircles read smaller than round corners of the same radius, so the radius
   tokens grow with them. True circles (dots, avatars, icon circles, step numbers) stay round. */

@supports (corner-shape: squircle) {
  :root {
    --r-sm: 13px;
    --r-md: 20px;
    --r-lg: 30px;
    --r-xl: 40px;
  }
  *, *::before, *::after { corner-shape: squircle; }
  .dot, .icon-circle, .icon-btn, .icon-btn-dot, .comment-avatar, .profile-avatar, .profile-avatar-edit, .dl-steps li::before, .pp-lic-remove, .stat-pill-nums b, .pp-features li::before, .pp-version::after, .pp-version-changes li::before, .toast-icon, .toast-spinner { corner-shape: round; }
  .pp-lic-code .btn { corner-shape: squircle; }
}