/* =====================================================================================================
   PRIME (پرایم) · 1.10 / 2.8 — the default look of IPN TV and Mr & Miss Iran.
   A quiet, professional system: neutral canvas, hairline borders, one accent, strong type, short motion.
   Shared primitives (tokens, buttons, fields, cards, tables, tabs, badges, menus, modal, reveal) for both
   platforms. Scoped to <html class="prime-ui">; area files (prime-ipn.css / prime-shy.css) map components.
   ===================================================================================================== */

html.prime-ui {
  /* canvas + surfaces */
  --p-bg: #F6F6F7;
  --p-surface: #FFFFFF;
  --p-surface-2: #F1F1F3;
  --p-surface-3: #E9E9EC;
  --p-line: #E4E4E8;
  --p-line-2: #D2D2D8;
  --p-ink: #111114;
  --p-ink-2: #3B3B43;
  --p-muted: #6F6F7A;
  --p-faint: #9A9AA5;
  /* accent */
  --p-accent: #E8313F;
  --p-accent-ink: #C8202E;
  --p-accent-soft: #FDEBED;
  --p-gold: #B8860B;
  --p-gold-soft: #FBF3DF;
  --p-ok: #15803D; --p-ok-soft: #E7F6EC;
  --p-warn: #B45309; --p-warn-soft: #FDF2E2;
  --p-bad: #B91C1C; --p-bad-soft: #FDECEC;
  --p-info: #1D4ED8; --p-info-soft: #E8EEFC;
  /* shape + motion */
  --p-r: 12px; --p-r-lg: 18px; --p-r-xl: 24px;
  --p-shadow-1: 0 1px 2px rgba(17,17,20,.05), 0 1px 1px rgba(17,17,20,.03);
  --p-shadow-2: 0 2px 4px rgba(17,17,20,.05), 0 12px 32px -16px rgba(17,17,20,.18);
  --p-shadow-3: 0 24px 60px -24px rgba(17,17,20,.3);
  --p-focus: 0 0 0 3px rgba(232,49,63,.22);
  --p-t: 180ms cubic-bezier(.2,.7,.2,1);
  --p-t-slow: 320ms cubic-bezier(.2,.7,.2,1);
  color-scheme: light;
}
html.prime-ui[data-mode="dark"] {
  --p-bg: #0B0C10;
  --p-surface: #15171C;
  --p-surface-2: #1C1F26;
  --p-surface-3: #242830;
  --p-line: #262930;
  --p-line-2: #343843;
  --p-ink: #F3F3F5;
  --p-ink-2: #C9CAD1;
  --p-muted: #8E909B;
  --p-faint: #5F6170;
  --p-accent: #FF4D5B;
  --p-accent-ink: #FF6B77;
  --p-accent-soft: rgba(255,77,91,.14);
  --p-gold: #E2B343;
  --p-gold-soft: rgba(226,179,67,.14);
  --p-ok: #4ADE80; --p-ok-soft: rgba(74,222,128,.12);
  --p-warn: #FBBF24; --p-warn-soft: rgba(251,191,36,.12);
  --p-bad: #F87171; --p-bad-soft: rgba(248,113,113,.12);
  --p-info: #7AA2FF; --p-info-soft: rgba(122,162,255,.12);
  --p-shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --p-shadow-2: 0 2px 4px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.8);
  --p-shadow-3: 0 30px 70px -30px rgba(0,0,0,.9);
  --p-focus: 0 0 0 3px rgba(255,77,91,.3);
  color-scheme: dark;
}
html.prime-ui body { background: var(--p-bg); color: var(--p-ink); -webkit-font-smoothing: antialiased; }
html.prime-ui ::selection { background: var(--p-accent); color: #fff; }
html.prime-ui { scrollbar-color: var(--p-line-2) transparent; }
html.prime-ui ::-webkit-scrollbar { width: 10px; height: 10px; }
html.prime-ui ::-webkit-scrollbar-thumb { background: var(--p-line-2); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }

/* ---------- Buttons ---------------------------------------------------------------------------------- */
html.prime-ui :is(.btn, .ac-btn, .ld-btn, .stg-btn, .gbtn, .sso__btn, .p-btn) {
  --b: var(--p-surface); --c: var(--p-ink); --bd: var(--p-line-2);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  border-radius: 10px; border: 1px solid var(--bd); background: var(--b); color: var(--c); font-weight: 600; letter-spacing: 0;
  box-shadow: var(--p-shadow-1); transition: background-color var(--p-t), border-color var(--p-t), color var(--p-t), transform var(--p-t), box-shadow var(--p-t);
  text-decoration: none !important; overflow: hidden; isolation: isolate;
}
html.prime-ui :is(.btn, .ac-btn, .ld-btn, .stg-btn, .gbtn, .p-btn):hover { --bd: var(--p-faint); transform: translateY(-1px); box-shadow: var(--p-shadow-2); }
html.prime-ui :is(.btn, .ac-btn, .ld-btn, .stg-btn, .gbtn, .p-btn):active { transform: translateY(0); box-shadow: none; transition-duration: 60ms; }
html.prime-ui :is(.btn, .ac-btn, .ld-btn, .stg-btn, .gbtn, .p-btn):focus-visible { outline: none; box-shadow: var(--p-focus); }
html.prime-ui :is(.btn--red, .btn--primary, .ac-btn--primary, .ld-btn--primary, .stg-btn--primary, .stg-btn.is-primary, .gbtn, .sso__btn, .p-btn--primary) { --b: var(--p-accent); --c: #fff; --bd: var(--p-accent); background-image: none !important; animation: none !important; }
html.prime-ui :is(.btn--red, .btn--primary, .ac-btn--primary, .ld-btn--primary, .p-btn--primary):hover { --b: var(--p-accent-ink); --bd: var(--p-accent-ink); color: #fff; }
html.prime-ui :is(.btn--gold) { --b: var(--p-ink); --c: var(--p-bg); --bd: var(--p-ink); background-image: none !important; animation: none !important; }
html.prime-ui :is(.btn--gold):hover { --b: var(--p-ink-2); }
html.prime-ui :is(.btn--ghost, .ac-btn--ghost, .btn--light, .btn--glass, .p-btn--ghost) { --b: transparent; --bd: var(--p-line-2); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.prime-ui :is(.btn--ghost, .ac-btn--ghost, .p-btn--ghost):hover { --b: var(--p-surface-2); }
html.prime-ui :is(.btn--ink) { --b: var(--p-ink); --c: var(--p-bg); --bd: var(--p-ink); }
html.prime-ui :is(.btn--danger, .act-danger .btn) { --b: var(--p-bad-soft); --c: var(--p-bad); --bd: transparent; }
html.prime-ui :is(.btn, .ac-btn) .ripple, html.prime-ui .au-ripple { opacity: .12; }
html.prime-ui .btn .ic, html.prime-ui .ac-btn .ic { width: 1.1em; height: 1.1em; }
/* icon buttons */
html.prime-ui :is(.hdr__icon, .ac-icon, .st-icon, .st-ibtn, .htool__btn, .rail__btn) { border-radius: 10px !important; transition: background-color var(--p-t), color var(--p-t), transform var(--p-t); }
html.prime-ui :is(.hdr__icon, .ac-icon, .st-icon, .st-ibtn, .htool__btn):hover { background: var(--p-surface-2) !important; color: var(--p-ink) !important; }

/* ---------- Fields ------------------------------------------------------------------------------------ */
html.prime-ui :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]), select, textarea) {
  border-radius: 10px !important; border: 1px solid var(--p-line-2) !important; background: var(--p-surface) !important; color: var(--p-ink) !important;
  box-shadow: none !important; transition: border-color var(--p-t), box-shadow var(--p-t);
}
html.prime-ui :is(input, select, textarea)::placeholder { color: var(--p-faint); }
html.prime-ui :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { outline: none !important; border-color: var(--p-accent) !important; box-shadow: var(--p-focus) !important; }
html.prime-ui input[type="checkbox"], html.prime-ui input[type="radio"] { accent-color: var(--p-accent); width: 18px; height: 18px; cursor: pointer; }
html.prime-ui label { cursor: pointer; }
/* custom checks of both platforms keep working but look like the system */
html.prime-ui .mk-check__box, html.prime-ui .mk-switch__track { border-color: var(--p-line-2) !important; }
html.prime-ui .mk-check input:checked ~ .mk-check__box, html.prime-ui .mk-switch input:checked ~ .mk-switch__track, html.prime-ui .st-switch input:checked + * { background: var(--p-accent) !important; border-color: var(--p-accent) !important; }

/* ---------- Surfaces --------------------------------------------------------------------------------- */
html.prime-ui .p-card, html.prime-ui [data-p-card] { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-r-lg); box-shadow: var(--p-shadow-1); }
html.prime-ui .p-lift { transition: transform var(--p-t), box-shadow var(--p-t), border-color var(--p-t); }
html.prime-ui .p-lift:hover { transform: translateY(-2px); box-shadow: var(--p-shadow-2); border-color: var(--p-line-2); }
html.prime-ui .p-chip, html.prime-ui .pi-chip { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--p-accent-soft); color: var(--p-accent-ink); flex: none; }
html.prime-ui .p-chip svg, html.prime-ui .pi-chip svg { width: 20px; height: 20px; }
html.prime-ui .p-chip--gold { background: var(--p-gold-soft); color: var(--p-gold); }
html.prime-ui .p-chip--ok { background: var(--p-ok-soft); color: var(--p-ok); }
html.prime-ui .p-chip--warn { background: var(--p-warn-soft); color: var(--p-warn); }
html.prime-ui .p-chip--info { background: var(--p-info-soft); color: var(--p-info); }
html.prime-ui .p-chip--muted { background: var(--p-surface-2); color: var(--p-muted); }

/* badges / tags */
html.prime-ui :is(.badge, .st-tag, .pill, .vcard__tag, .evc__tag, .ac-tag) { border-radius: 8px !important; font-weight: 600; letter-spacing: 0; }
html.prime-ui .live-pill { background: var(--p-accent) !important; color: #fff !important; border-radius: 8px !important; box-shadow: none !important; }
html.prime-ui .live-pill--off { background: var(--p-surface-2) !important; color: var(--p-muted) !important; }

/* tables */
html.prime-ui :is(.st-table, .table, .ac-table) { border-collapse: separate; border-spacing: 0; }
html.prime-ui :is(.st-table, .table, .ac-table) th { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--p-muted); background: var(--p-surface-2); border-bottom: 1px solid var(--p-line) !important; }
html.prime-ui :is(.st-table, .table, .ac-table) td { border-bottom: 1px solid var(--p-line) !important; }
html.prime-ui :is(.st-table, .table, .ac-table) tbody tr { transition: background-color var(--p-t); }
html.prime-ui :is(.st-table, .table, .ac-table) tbody tr:hover { background: var(--p-surface-2); }

/* tabs & segmented controls */
html.prime-ui :is(.st-tabs, .st-seg, .tabs, .seg, .status-tabs, .cx-tabs, .evbar, .an-nav, .tk-nav) .mk-hl { background: var(--p-surface) !important; box-shadow: var(--p-shadow-1); border-radius: 9px !important; }
html.prime-ui :is(.st-seg, .seg) { background: var(--p-surface-2); border-radius: 11px; padding: 3px; }
html.prime-ui :is(.st-seg, .seg) > * { border-radius: 9px; font-weight: 600; }
html.prime-ui [data-scrollnav] { scrollbar-width: none; }
html.prime-ui [data-scrollnav]::-webkit-scrollbar { display: none; }

/* headings */
html.prime-ui :is(h1, h2, h3) { letter-spacing: -.015em; }
html.prime-ui :is(.st-card__title, .panel__head h2, .ac-card__h, .rail__title, .sec__title) { font-weight: 700; }

/* ---------- User menu (avatar + name + dropdown) ------------------------------------------------------ */
html.prime-ui .umenu { position: relative; }
html.prime-ui .umenu > summary, html.prime-ui .umenu__btn { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid var(--p-line); background: var(--p-surface); color: var(--p-ink); cursor: pointer; font-weight: 600; font-size: 14px; transition: border-color var(--p-t), background-color var(--p-t); }
html.prime-ui[dir="rtl"] .umenu > summary, html.prime-ui[dir="rtl"] .umenu__btn { padding: 3px 3px 3px 10px; }
html.prime-ui .umenu > summary::-webkit-details-marker { display: none; }
html.prime-ui .umenu > summary:hover, html.prime-ui .umenu__btn:hover { border-color: var(--p-line-2); background: var(--p-surface-2); }
html.prime-ui .umenu__av, html.prime-ui .st-av, html.prime-ui .ac-av, html.prime-ui .gav { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--p-ink) !important; color: var(--p-bg) !important; font-weight: 700; font-size: 13px; box-shadow: none !important; overflow: hidden; }
html.prime-ui .umenu__av img { width: 100%; height: 100%; object-fit: cover; }
html.prime-ui .umenu__name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.prime-ui .umenu > summary .ic:last-child { width: 16px; height: 16px; color: var(--p-muted); transition: transform var(--p-t); }
html.prime-ui .umenu[open] > summary .ic:last-child { transform: rotate(180deg); }
html.prime-ui :is(.umenu__panel, .st-user__menu) { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; min-width: 260px; padding: 6px; border-radius: 14px; background: var(--p-surface); border: 1px solid var(--p-line); box-shadow: var(--p-shadow-3); animation: p-pop var(--p-t) both; }
@keyframes p-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
html.prime-ui :is(.umenu__panel, .st-user__menu) :is(a, button) { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--p-ink); font: inherit; font-size: 14px; font-weight: 500; text-align: start; cursor: pointer; transition: background-color var(--p-t); }
html.prime-ui :is(.umenu__panel, .st-user__menu) :is(a, button):hover { background: var(--p-surface-2); }
html.prime-ui :is(.umenu__panel, .st-user__menu) .ic { width: 18px; height: 18px; color: var(--p-muted); }
html.prime-ui :is(.umenu__panel, .st-user__menu) hr { border: 0; border-top: 1px solid var(--p-line); margin: 6px 4px; }
html.prime-ui .umenu__who, html.prime-ui .st-user__who { display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 8px; }
html.prime-ui .umenu__who strong, html.prime-ui .st-user__who strong { font-size: 14px; }
html.prime-ui .umenu__who small, html.prime-ui .st-user__who small { color: var(--p-muted); font-size: 12px; direction: ltr; text-align: start; }
html.prime-ui .umenu__n { margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--p-accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
html.prime-ui .umenu__danger { color: var(--p-bad) !important; }

/* ---------- Back to top ------------------------------------------------------------------------------- */
html.prime-ui .totop, html.prime-ui .p-totop { position: fixed; inset-inline-end: 18px; bottom: 84px; z-index: 70; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--p-line); background: var(--p-surface) !important; color: var(--p-ink) !important; box-shadow: var(--p-shadow-2) !important; cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity var(--p-t), transform var(--p-t); }
html.prime-ui :is(.totop, .p-totop).is-on, html.prime-ui :is(.totop, .p-totop):not([hidden]).is-show { opacity: 1; transform: none; pointer-events: auto; }
html.prime-ui :is(.totop, .p-totop) .ic { width: 20px; height: 20px; }
html.prime-ui :is(.totop, .p-totop):hover { background: var(--p-ink) !important; color: var(--p-bg) !important; }
@media (min-width: 1024px) { html.prime-ui .totop, html.prime-ui .p-totop { bottom: 28px; } }

/* ---------- Confirm modal (IPN.confirm / SHS.confirm) -------------------------------------------------- */
.p-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(10,10,14,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: p-fade var(--p-t, 180ms) both; }
.p-modal__box { width: min(440px, 100%); padding: 22px; border-radius: 18px; background: var(--p-surface, #fff); color: var(--p-ink, #111); border: 1px solid var(--p-line, #e4e4e8); box-shadow: var(--p-shadow-3, 0 30px 70px -30px rgba(0,0,0,.6)); animation: p-pop 200ms both; }
.p-modal__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--p-warn-soft, #FDF2E2); color: var(--p-warn, #B45309); margin-bottom: 12px; }
.p-modal__ic.is-danger { background: var(--p-bad-soft, #FDECEC); color: var(--p-bad, #B91C1C); }
.p-modal__ic svg { width: 22px; height: 22px; }
.p-modal__t { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.p-modal__p { margin: 0 0 18px; color: var(--p-muted, #666); line-height: 1.7; font-size: 14.5px; white-space: pre-line; }
.p-modal__acts { display: flex; gap: 8px; justify-content: flex-end; }
.p-modal__acts button { min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--p-line-2, #d2d2d8); background: var(--p-surface, #fff); color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.p-modal__acts button.is-ok { background: var(--p-ink, #111); color: var(--p-bg, #fff); border-color: transparent; }
.p-modal__acts button.is-danger { background: var(--p-bad, #B91C1C); color: #fff; border-color: transparent; }
@keyframes p-fade { from { opacity: 0; } }

/* ---------- Toasts ---------------------------------------------------------------------------------- */
html.prime-ui .mk-toast { border-radius: 12px !important; background: var(--p-ink) !important; color: var(--p-bg) !important; box-shadow: var(--p-shadow-3) !important; border: 0 !important; }

/* ---------- Scroll reveal (prime.js adds .p-in) --------------------------------------------------------- */
html.prime-ui.p-js .p-rv { opacity: 0; transform: translateY(12px); transition: opacity var(--p-t-slow), transform var(--p-t-slow); transition-delay: calc(var(--ri, 0) * 40ms); }
html.prime-ui.p-js .p-rv.p-in { opacity: 1; transform: none; }

/* ---------- Loading bar ------------------------------------------------------------------------------- */
.p-bar { position: fixed; inset: 0 0 auto; height: 2px; z-index: 9999; background: var(--p-accent, #E8313F); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; transition: transform 6s cubic-bezier(.1,.6,.1,1), opacity .3s; pointer-events: none; }
[dir="rtl"] .p-bar { transform-origin: 100% 50%; }
.p-bar.is-on { opacity: 1; transform: scaleX(.85); }

/* ---------- Icon micro-motion (subtle) --------------------------------------------------------------- */
html.prime-ui svg[class*="ic--"] { transform-box: fill-box; transform-origin: center; transition: transform var(--p-t); }
html.prime-ui :is(a, button, summary, label):is(:hover, :focus-visible) :is(.ic--arrow-right, .ic--chevron-right, .ic--arrow-up-right, .ic--external-link) { transform: translateX(2px); }
html.prime-ui :is(a, button, summary, label):is(:hover, :focus-visible) :is(.ic--arrow-left, .ic--chevron-left) { transform: translateX(-2px); }
html.prime-ui :is(a, button, summary, label):is(:hover, :focus-visible) :is(.ic--bell, .ic--bell-ring) { transform: rotate(-12deg); }
html.prime-ui :is(a, button, summary, label):is(:hover, :focus-visible) :is(.ic--heart, .ic--star, .ic--crown, .ic--sparkles, .ic--trophy) { transform: scale(1.15); }
html.prime-ui :is(a, button, summary, label):is(:hover, :focus-visible) :is(.ic--settings, .ic--refresh-cw, .ic--refresh-ccw) { transform: rotate(45deg); }
html.prime-ui :is(a, button, summary, label):is(:hover, :focus-visible) :is(.ic--download, .ic--chevron-down) { transform: translateY(2px); }
html.prime-ui :is(a, button, summary, label):is(:hover, :focus-visible) :is(.ic--upload, .ic--arrow-up, .ic--chevron-up, .ic--rocket) { transform: translateY(-2px); }
html.prime-ui :is(a, button, summary, label):is(:hover, :focus-visible) :is(.ic--search, .ic--scan-line, .ic--eye) { transform: scale(1.1) rotate(-6deg); }
html.prime-ui :is(a, button, summary, label):is(:hover, :focus-visible) :is(.ic--play, .ic--circle-play) { transform: scale(1.12); }
html.prime-ui :is(a, button, summary, label):is(:hover, :focus-visible) :is(.ic--trash-2, .ic--x, .ic--ban) { transform: rotate(8deg); }
html.prime-ui :is(a, button, summary, label):is(:hover, :focus-visible) :is(.ic--send, .ic--mail, .ic--send-horizontal) { transform: translate(2px, -2px); }
html.prime-ui .is-live .ic--radio, html.prime-ui .ic--radio.is-live { animation: p-pulse 1.8s ease-in-out infinite; }
@keyframes p-pulse { 50% { opacity: .55; transform: scale(1.08); } }

/* remove the louder effects of older looks when they are also loaded */
html.prime-ui .au-sky, html.prime-ui .sc-bg .sc-noise { display: none !important; }
html.prime-ui :is(.btn, .ac-btn)::after { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html.prime-ui *, html.prime-ui *::before, html.prime-ui *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html.prime-ui.p-js .p-rv { opacity: 1; transform: none; }
}

/* broken pictures → quiet placeholder */
img.is-broken { object-fit: cover; color: transparent; background: linear-gradient(135deg, var(--p-surface-2), var(--p-surface-3)); position: relative; }
img.is-broken::before { content: ""; position: absolute; inset: 0; background: inherit; }
.has-broken { background: linear-gradient(135deg, var(--p-surface-2), var(--p-surface-3)); }