/* ============================================================
   لوح‌های دیجیتالِ سارِوو — استایلِ مستقل (plaques.css) — نسخه‌ی ۲
   از متغیرهای ریشه‌ی همان style.css استفاده می‌کند (همه با مقدارِ جایگزین)،
   پس اگر متغیری در سایت نبود هم چیزی خراب نمی‌شود.

   ایده‌ی طراحی: لوح مثلِ یک «نشانِ افتخارِ فلزیِ حکاکی‌شده» است —
   قابِ دولایه، مدالیونِ برجسته در مرکز، خطِ تزئینی زیرِ عنوان و مهرِ سارِوو در پایین.
   یک جلوه‌ی اصلی: بازتابِ نورِ هولوگرافیک که با ماوس/سرانگشت جابه‌جا می‌شود.
   ============================================================ */

/* ---------------- تبِ «لوح‌ها» + نقطه‌ی هشدار ---------------- */
.sv-pv-tab-plaque{ position:relative; }
.sv-pv-plaque-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg,#ff6b81,#ffb56b); margin-inline-start:5px;
  box-shadow:0 0 0 2px var(--bg, #06070c), 0 0 10px rgba(255,107,129,.9);
  animation:svPlaqueDotPulse 1.6s ease-in-out infinite;
  vertical-align:middle;
}
@keyframes svPlaqueDotPulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.35); opacity:.65; }
}

/* ---------------- بنرِ «لوحِ جدید داری» بالای پروفایل ---------------- */
#svPvPlaqueBanner:empty{ display:none; }
.sv-plaque-banner-btn{
  width:100%; display:flex; align-items:center; gap:14px; text-align:right;
  padding:14px 16px; margin:14px 0; border-radius:var(--r-md, 16px);
  background:
    linear-gradient(120deg, rgba(255,183,90,.20), rgba(179,79,255,.20)),
    var(--surface, rgba(255,255,255,.04));
  border:1px solid rgba(255,215,106,.5);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 10px 30px rgba(255,150,60,.16);
  position:relative; overflow:hidden; cursor:pointer; color:inherit; font-family:inherit;
  transition:transform .2s var(--ease, ease), border-color .2s, box-shadow .2s;
}
.sv-plaque-banner-btn::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.24) 45%, transparent 60%);
  transform:translateX(-100%); animation:svPlaqueBannerSheen 2.8s ease-in-out infinite;
}
@keyframes svPlaqueBannerSheen{
  0%{ transform:translateX(-120%); }
  55%,100%{ transform:translateX(120%); }
}
.sv-plaque-banner-btn:hover{ transform:translateY(-2px); border-color:#ffd76a; box-shadow:0 0 0 1px rgba(255,255,255,.07) inset, 0 14px 34px rgba(255,150,60,.24); }
.sv-plaque-banner-btn:focus-visible{ outline:2px solid #ffd76a; outline-offset:3px; }
.sv-plaque-banner-ic{
  font-size:24px; flex-shrink:0; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; position:relative; z-index:1;
  background:radial-gradient(circle at 30% 25%, #fff3c4, #f0b13a 55%, #9a6408);
  box-shadow:0 0 0 2px rgba(255,255,255,.35), 0 6px 16px rgba(255,183,90,.45), inset 0 -3px 6px rgba(0,0,0,.25);
}
.sv-plaque-banner-txt{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; position:relative; z-index:1; }
.sv-plaque-banner-txt b{ font-size:14.5px; font-weight:800; }
.sv-plaque-banner-txt span{ font-size:12px; color:var(--text-dim, #a7adc8); }
.sv-plaque-banner-arrow{ font-size:22px; color:var(--text-dim, #a7adc8); transform:scaleX(-1); flex-shrink:0; position:relative; z-index:1; }

/* ---------------- قابِ کلی و چیدمانِ گرید ---------------- */
#svPvPlaquesPane{ padding-top:6px; }
.sv-plaque-inbox-row{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:22px; justify-content:center; }
.sv-plaque-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:20px;
}
.sv-plaque-admin-link{ margin-top:18px; text-align:center; }
.sv-plaque-admin-link a{
  font-size:12.5px; color:var(--text-dim, #a7adc8); border:1px dashed var(--border-strong, rgba(255,255,255,.25));
  padding:8px 14px; border-radius:999px; display:inline-block; transition:.2s;
}
.sv-plaque-admin-link a:hover{ color:var(--cyan, #2fd8ff); border-color:var(--cyan, #2fd8ff); }

/* ---------------- کارتِ مهروموم‌شده (لوحِ بازنشده در صندوق) ---------------- */
.sv-plaque-sealed{
  position:relative; overflow:hidden; isolation:isolate;
  width:184px; min-height:212px; border:0; padding:20px 14px;
  border-radius:var(--r-md, 16px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  text-align:center; cursor:pointer; color:var(--text, #f6f7fd); font-family:inherit;
  background:#0f1326;
  box-shadow:0 14px 34px rgba(179,79,255,.22);
  animation:svPlaqueSealedFloat 2.6s ease-in-out infinite;
  transition:filter .2s;
}
/* حاشیه‌ی نورانیِ چرخان */
.sv-plaque-sealed::before{
  content:''; position:absolute; z-index:-2; left:50%; top:50%; width:220%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg, transparent 0 20%, rgba(47,216,255,.9) 30%, transparent 42%, transparent 60%, rgba(179,79,255,.9) 72%, transparent 84%);
  animation:svPlaqueSpin 5s linear infinite;
}
.sv-plaque-sealed::after{
  content:''; position:absolute; z-index:-1; inset:1.5px; border-radius:calc(var(--r-md, 16px) - 1.5px);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(179,79,255,.22), transparent 60%),
    linear-gradient(165deg, #141a35, #0c0f20);
}
.sv-plaque-sealed:hover{ filter:brightness(1.12); }
.sv-plaque-sealed:focus-visible{ outline:2px solid var(--cyan, #2fd8ff); outline-offset:4px; }
.sv-plaque-sealed:disabled{ opacity:.6; cursor:default; animation:none; }
@keyframes svPlaqueSealedFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}
@keyframes svPlaqueSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
.sv-plaque-seal-ic{
  font-size:30px; width:66px; height:66px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.25), rgba(255,255,255,.04) 60%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 0 0 6px rgba(179,79,255,.12), 0 8px 20px rgba(47,216,255,.25);
  animation:svPlaqueSealPulse 2s ease-in-out infinite;
}
@keyframes svPlaqueSealPulse{
  0%,100%{ box-shadow:0 0 0 6px rgba(179,79,255,.12), 0 8px 20px rgba(47,216,255,.25); }
  50%{ box-shadow:0 0 0 12px rgba(179,79,255,0), 0 8px 26px rgba(47,216,255,.4); }
}
.sv-plaque-seal-txt{ font-size:14px; font-weight:800; }
.sv-plaque-seal-sub{ font-size:11.5px; color:var(--text-dim, #a7adc8); }

/* ============================================================
   کارتِ اصلیِ لوح
   هر ظاهر فقط این متغیرها را عوض می‌کند:
   --pl-a (روشن)، --pl-b (میانه)، --pl-c (تیره)، --pl-fg (رنگِ متن)،
   --pl-line (خطِ قاب)، --pl-pill (زمینه‌ی برچسب‌ها)، --pl-glow (درخششِ سایه)
   ============================================================ */
.sv-plaque{
  --pl-a:#ffe9a8; --pl-b:#e3a92a; --pl-c:#8a5e08;
  --pl-fg:#2b1c00; --pl-line:rgba(43,28,0,.34); --pl-pill:rgba(43,28,0,.12);
  --pl-glow:rgba(227,169,42,.45);
  --mx:50%; --my:0%; --rx:0deg; --ry:0deg;

  position:relative; isolation:isolate; overflow:hidden;
  border-radius:20px; padding:18px 16px 12px; min-height:236px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px;
  color:var(--pl-fg);
  border:1px solid rgba(255,255,255,.4);
  background:
    radial-gradient(120% 80% at var(--mx) var(--my), rgba(255,255,255,.42), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 7px),
    linear-gradient(150deg, var(--pl-a), var(--pl-b) 60%, var(--pl-c));
  box-shadow:
    0 22px 44px -16px var(--pl-glow),
    0 10px 22px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(0,0,0,.3);
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .28s ease-out, box-shadow .3s;
  -webkit-tap-highlight-color:transparent;
}
.sv-plaque:hover{
  box-shadow:0 28px 52px -14px var(--pl-glow), 0 12px 26px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.3);
}
/* قابِ داخلیِ دولایه (مثلِ حکاکیِ لوح‌های واقعی) */
.sv-plaque::before{
  content:''; position:absolute; inset:7px; z-index:0; pointer-events:none;
  border-radius:14px; border:1px solid var(--pl-line);
  box-shadow:0 0 0 3px rgba(255,255,255,.14), inset 0 0 22px rgba(0,0,0,.06);
}
/* الگوی دایره‌ایِ ظریف (شبیهِ گیلوشِ اسکناس) پشتِ مدالیون */
.sv-plaque::after{
  content:''; position:absolute; left:50%; top:22px; width:230px; aspect-ratio:1; z-index:0; pointer-events:none;
  transform:translateX(-50%); border-radius:50%; opacity:.9;
  background:repeating-radial-gradient(circle, transparent 0 9px, rgba(255,255,255,.14) 9px 10px);
  -webkit-mask-image:radial-gradient(circle, #000 20%, transparent 68%);
          mask-image:radial-gradient(circle, #000 20%, transparent 68%);
}
.sv-plaque > *{ position:relative; z-index:1; }

/* درخششِ عبوری */
.sv-plaque > .sv-plaque-shine{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(115deg, transparent 22%, rgba(255,255,255,.5) 36%, transparent 50%);
  transform:translateX(-130%); animation:svPlaqueShine 4.2s ease-in-out infinite;
  mix-blend-mode:overlay;
}
@keyframes svPlaqueShine{
  0%{ transform:translateX(-130%); }
  55%,100%{ transform:translateX(130%); }
}

/* برچسبِ دسته (امتیاز / دنبال‌کننده / ...) */
.sv-plaque-kind{
  font-size:10.5px; font-weight:700; line-height:1; padding:5px 11px; border-radius:999px;
  background:var(--pl-pill); border:1px solid var(--pl-line);
}

/* مدالیونِ برجسته */
.sv-plaque-icon{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  font-size:30px; line-height:1; margin:3px 0 2px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.9), rgba(255,255,255,.12) 58%),
    linear-gradient(150deg, var(--pl-b), var(--pl-c));
  box-shadow:
    0 0 0 3px rgba(255,255,255,.4),
    0 0 0 4.5px var(--pl-line),
    0 10px 18px rgba(0,0,0,.32),
    inset 0 -5px 9px rgba(0,0,0,.28);
  filter:none;
}

.sv-plaque-title{
  font-size:15.5px; font-weight:900; line-height:1.65; text-wrap:balance; overflow-wrap:anywhere;
}
/* خطِ تزئینیِ زیرِ عنوان */
.sv-plaque-title::after{
  content:''; display:block; width:64px; height:2px; margin:8px auto 0; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--pl-line) 25%, var(--pl-line) 75%, transparent);
}
.sv-plaque-desc{ font-size:12.3px; opacity:.88; line-height:1.85; overflow-wrap:anywhere; }
.sv-plaque-thanks{
  width:100%; margin-top:8px; padding:8px 12px; border-radius:12px;
  background:var(--pl-pill); border:1px solid var(--pl-line);
  font-size:11.8px; line-height:1.85; opacity:.92; overflow-wrap:anywhere;
}
/* پاورقی: تاریخ + مهرِ سارِوو */
.sv-plaque-foot{
  width:100%; margin-top:auto; padding:10px 6px 4px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:10.5px; opacity:.78;
}
.sv-plaque-date{ font-size:10.5px; opacity:1; margin:0; }
.sv-plaque-brand{ font-weight:800; letter-spacing:.02em; display:inline-flex; align-items:center; gap:4px; }
.sv-plaque-brand::before{ content:'✦'; font-size:10px; }

/* ============================================================
   ۱۲ ظاهرِ رنگی (نام‌ها همان قبلی‌اند؛ پایگاه‌داده تغییر نمی‌کند)
   ============================================================ */
.sv-plaque-gold    { --pl-a:#ffeeb5; --pl-b:#e3a92a; --pl-c:#8a5e08; --pl-fg:#2b1c00; --pl-line:rgba(43,28,0,.34);  --pl-pill:rgba(43,28,0,.12);  --pl-glow:rgba(227,169,42,.5); }
.sv-plaque-silver  { --pl-a:#f7f9fd; --pl-b:#c3cad9; --pl-c:#7c8598; --pl-fg:#1a1f29; --pl-line:rgba(26,31,41,.3);  --pl-pill:rgba(26,31,41,.1);  --pl-glow:rgba(195,202,217,.4); }
.sv-plaque-bronze  { --pl-a:#f0c99b; --pl-b:#b07a3e; --pl-c:#6b4420; --pl-fg:#2a1a08; --pl-line:rgba(42,26,8,.34);  --pl-pill:rgba(42,26,8,.13);  --pl-glow:rgba(176,122,62,.45); }
.sv-plaque-emerald { --pl-a:#a6ffdd; --pl-b:#20c98a; --pl-c:#0a6e4c; --pl-fg:#04211a; --pl-line:rgba(4,33,26,.34);  --pl-pill:rgba(4,33,26,.13);  --pl-glow:rgba(32,201,138,.45); }
.sv-plaque-sapphire{ --pl-a:#b4e6ff; --pl-b:#3a86e6; --pl-c:#173e8f; --pl-fg:#08152e; --pl-line:rgba(8,21,46,.36);  --pl-pill:rgba(8,21,46,.14);  --pl-glow:rgba(58,134,230,.5); }
.sv-plaque-ruby    { --pl-a:#ffbccb; --pl-b:#e13a5c; --pl-c:#7f1230; --pl-fg:#2c0510; --pl-line:rgba(44,5,16,.36);  --pl-pill:rgba(44,5,16,.14);  --pl-glow:rgba(225,58,92,.5); }
.sv-plaque-amethyst{ --pl-a:#ebd2ff; --pl-b:#a24fe0; --pl-c:#511a8a; --pl-fg:#1c0630; --pl-line:rgba(28,6,48,.36);  --pl-pill:rgba(28,6,48,.14);  --pl-glow:rgba(162,79,224,.5); }
.sv-plaque-platinum{ --pl-a:#ffffff; --pl-b:#d7dce6; --pl-c:#9aa4b6; --pl-fg:#161a22; --pl-line:rgba(22,26,34,.28);  --pl-pill:rgba(22,26,34,.09);  --pl-glow:rgba(215,220,230,.45); }
.sv-plaque-rose    { --pl-a:#ffe1ea; --pl-b:#e88fa6; --pl-c:#a3435f; --pl-fg:#2c0713; --pl-line:rgba(44,7,19,.32);  --pl-pill:rgba(44,7,19,.12);  --pl-glow:rgba(232,143,166,.5); }
.sv-plaque-obsidian{
  --pl-a:#5a6182; --pl-b:#20222f; --pl-c:#08090d; --pl-fg:#eef1ff;
  --pl-line:rgba(47,216,255,.5); --pl-pill:rgba(47,216,255,.1); --pl-glow:rgba(47,216,255,.35);
  border-color:rgba(47,216,255,.55);
}
.sv-plaque-obsidian .sv-plaque-icon{
  background:radial-gradient(circle at 30% 24%, rgba(47,216,255,.55), rgba(47,216,255,.05) 60%), linear-gradient(150deg,#2b2f45,#08090d);
  box-shadow:0 0 0 3px rgba(47,216,255,.35), 0 0 0 4.5px rgba(47,216,255,.5), 0 0 22px rgba(47,216,255,.45), inset 0 -5px 9px rgba(0,0,0,.5);
}
.sv-plaque-aurora{
  --pl-a:#00ffc2; --pl-b:#2fd8ff; --pl-c:#b34fff; --pl-fg:#04121a;
  --pl-line:rgba(4,18,26,.34); --pl-pill:rgba(4,18,26,.13); --pl-glow:rgba(47,216,255,.55);
  background:
    radial-gradient(120% 80% at var(--mx) var(--my), rgba(255,255,255,.42), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 7px),
    linear-gradient(135deg, #00ffc2, #2fd8ff 35%, #b34fff 70%, #00ffc2);
  background-size:100% 100%, auto, 250% 250%;
  animation:svPlaqueFlow 8s ease-in-out infinite;
}
.sv-plaque-sunset{
  --pl-a:#ffd08a; --pl-b:#ff6b81; --pl-c:#b34fff; --pl-fg:#2a0710;
  --pl-line:rgba(42,7,16,.34); --pl-pill:rgba(42,7,16,.13); --pl-glow:rgba(255,107,129,.55);
  background:
    radial-gradient(120% 80% at var(--mx) var(--my), rgba(255,255,255,.4), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 7px),
    linear-gradient(135deg, #ffd08a, #ff6b81 35%, #b34fff 70%, #ffd08a);
  background-size:100% 100%, auto, 250% 250%;
  animation:svPlaqueFlow 8s ease-in-out infinite;
}
@keyframes svPlaqueFlow{
  0%,100%{ background-position:0 0, 0 0, 0% 50%; }
  50%{ background-position:0 0, 0 0, 100% 50%; }
}

/* ---------------- نسخه‌ی کوچک (جدولِ پنلِ مدیریت) ---------------- */
.sv-plaque.sv-plaque-sm{
  width:150px; min-height:0; padding:12px 10px; gap:5px; border-radius:14px;
  transform:none; box-shadow:0 8px 18px -8px var(--pl-glow), 0 4px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.5);
}
.sv-plaque-sm::before{ inset:4px; border-radius:10px; }
.sv-plaque-sm::after{ display:none; }
.sv-plaque-sm .sv-plaque-icon{ width:36px; height:36px; font-size:18px; margin:0; box-shadow:0 0 0 2px rgba(255,255,255,.4), 0 0 0 3px var(--pl-line), 0 5px 10px rgba(0,0,0,.28), inset 0 -3px 6px rgba(0,0,0,.25); }
.sv-plaque-sm .sv-plaque-title{ font-size:11.5px; line-height:1.6; }
.sv-plaque-sm .sv-plaque-title::after{ width:34px; margin-top:5px; }
.sv-plaque-sm .sv-plaque-kind,
.sv-plaque-sm .sv-plaque-desc,
.sv-plaque-sm .sv-plaque-thanks,
.sv-plaque-sm .sv-plaque-foot{ display:none; }

/* پیش‌نمایش در فرمِ مدیر */
.sv-plaque-preview-wrap{ display:flex; justify-content:center; margin:14px 0; }
.sv-plaque-preview-wrap .sv-plaque{ width:min(240px, 100%); }

/* انتخابگرِ رنگیِ ظاهر (پنلِ مدیریت) */
.sv-plaque-swatches{ display:flex; flex-wrap:wrap; gap:9px; margin-top:10px; }
.sv-plaque-swatch{
  width:32px; height:32px; border-radius:50%; padding:0; cursor:pointer; position:relative;
  border:2px solid rgba(255,255,255,.35);
  box-shadow:0 3px 8px rgba(0,0,0,.35), inset 0 -3px 5px rgba(0,0,0,.25), inset 0 2px 3px rgba(255,255,255,.5);
  transition:transform .15s, box-shadow .15s;
}
.sv-plaque-swatch:hover{ transform:scale(1.12); }
.sv-plaque-swatch:focus-visible{ outline:2px solid var(--cyan, #2fd8ff); outline-offset:3px; }
.sv-plaque-swatch.is-active{ border-color:#fff; box-shadow:0 0 0 3px rgba(47,216,255,.7), 0 3px 8px rgba(0,0,0,.35); transform:scale(1.08); }

/* ---------------- مودالِ بازکردنِ لوح + کاغذشادی ---------------- */
.sv-plaque-modal-overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(90% 70% at 50% 40%, rgba(40,26,80,.7), rgba(4,5,10,.9));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .25s var(--ease, ease); padding:56px 20px 24px; overflow-y:auto;
}
.sv-plaque-modal-overlay.show{ opacity:1; }
.sv-plaque-modal{
  position:relative; z-index:2; width:min(340px, 100%); text-align:center; margin:auto;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  transform:scale(.75) translateY(20px); opacity:0; transition:.45s var(--ease-back, cubic-bezier(.34,1.56,.64,1));
}
.sv-plaque-modal-overlay.show .sv-plaque-modal{ transform:scale(1) translateY(0); opacity:1; }
/* پرتوهای نورِ چرخان پشتِ لوح */
.sv-plaque-modal::before{
  content:''; position:absolute; z-index:-1; left:50%; top:46%; width:640px; height:640px; max-width:180vw;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg, rgba(255,215,106,.22) 0 8deg, transparent 8deg 20deg);
  -webkit-mask-image:radial-gradient(circle, #000 12%, transparent 66%);
          mask-image:radial-gradient(circle, #000 12%, transparent 66%);
  animation:svPlaqueSpin 24s linear infinite; pointer-events:none;
}
.sv-plaque-modal-cong{
  font-size:17px; font-weight:900; color:#fff; text-shadow:0 2px 18px rgba(255,215,106,.7);
  animation:svPlaqueCong .7s .25s var(--ease-back, cubic-bezier(.34,1.56,.64,1)) backwards;
}
@keyframes svPlaqueCong{ from{ opacity:0; transform:translateY(10px) scale(.9); } to{ opacity:1; transform:none; } }
.sv-plaque-modal .sv-plaque-reveal{
  width:100%; min-height:270px; padding-top:22px;
  animation:svPlaqueReveal .95s cubic-bezier(.2,.9,.3,1.15) .12s backwards;
}
.sv-plaque-modal .sv-plaque-reveal .sv-plaque-icon{ width:76px; height:76px; font-size:36px; }
.sv-plaque-modal .sv-plaque-reveal .sv-plaque-title{ font-size:17px; }
@keyframes svPlaqueReveal{
  0%{ transform:perspective(900px) rotateY(90deg) scale(.7); opacity:0; }
  60%{ transform:perspective(900px) rotateY(-10deg) scale(1.04); opacity:1; }
  100%{ transform:perspective(900px) rotateY(0) scale(1); }
}
.sv-plaque-modal-close{
  position:absolute; top:-44px; left:0; width:36px; height:36px; border-radius:50%; cursor:pointer;
  background:var(--surface-strong, rgba(255,255,255,.12)); border:1px solid var(--border, rgba(255,255,255,.2)); color:var(--text, #f6f7fd);
  font-size:15px; display:flex; align-items:center; justify-content:center; transition:.2s;
}
.sv-plaque-modal-close:hover{ background:rgba(255,255,255,.22); transform:rotate(90deg); }
.sv-plaque-modal-close:focus-visible{ outline:2px solid #ffd76a; outline-offset:3px; }
.sv-plaque-modal-ok{
  width:100%; cursor:pointer; border:0; border-radius:14px; padding:13px 16px; font-family:inherit;
  font-size:14.5px; font-weight:800; color:#06070c;
  background:linear-gradient(120deg, #ffd76a, #ff9f6b 55%, #ff6b81);
  box-shadow:0 10px 26px rgba(255,150,60,.35); transition:transform .15s, box-shadow .2s;
}
.sv-plaque-modal-ok:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(255,150,60,.45); }
.sv-plaque-modal-ok:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.sv-plaque-confetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.sv-confetti-piece{
  position:absolute; top:-5%; width:9px; height:14px; opacity:.95; border-radius:2px;
  animation-name:svConfettiFall; animation-timing-function:cubic-bezier(.4,.1,.6,.9); animation-fill-mode:forwards;
}
.sv-confetti-piece.is-round{ border-radius:50%; width:9px; height:9px; }
.sv-confetti-piece.is-long{ width:5px; height:20px; }
@keyframes svConfettiFall{
  0%{ transform:translate3d(0,-10vh,0) rotate(0deg); opacity:1; }
  30%{ transform:translate3d(18px,30vh,0) rotate(200deg); }
  60%{ transform:translate3d(-18px,65vh,0) rotate(400deg); }
  85%{ opacity:1; }
  100%{ transform:translate3d(10px,108vh,0) rotate(640deg); opacity:0; }
}

/* ---------------- ریسپانسیو ---------------- */
@media (max-width:520px){
  .sv-plaque-grid{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 156px), 1fr)); gap:14px; }
  .sv-plaque{ min-height:214px; padding:16px 12px 10px; border-radius:18px; }
  .sv-plaque-icon{ width:56px; height:56px; font-size:26px; }
  .sv-plaque-title{ font-size:14px; }
  .sv-plaque-desc{ font-size:11.8px; }
  .sv-plaque-thanks{ font-size:11.3px; padding:7px 9px; }
  .sv-plaque-sealed{ width:calc(50% - 8px); min-width:150px; min-height:190px; }
}
@media (max-width:340px){
  .sv-plaque-sealed{ width:100%; }
  .sv-plaque-banner-btn{ padding:12px; gap:10px; }
  .sv-plaque-banner-ic{ width:40px; height:40px; font-size:20px; }
}
/* صفحه‌های خیلی بزرگ: لوح‌ها کمی بزرگ‌تر و باشکوه‌تر */
@media (min-width:1400px){
  .sv-plaque-grid{ grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:24px; }
}

/* اصلاح‌شده: دراپ‌داونِ «ظاهرِ لوح» در پنلِ مدیریت — روی بعضی مرورگرها (خصوصا موبایل)
   پس‌زمینه‌ی نیمه‌شفافِ سایت برای خودِ جعبه‌ی select اِعمال نمی‌شود و مرورگر پس‌زمینه‌ی
   سفیدِ پیش‌فرض می‌گذارد؛ چون رنگِ متن از سایت به ارث می‌رسد (تقریبا سفید)، هم خودِ
   جعبه و هم لیستِ بازشده عملا نامرئی/غیرقابل‌خواندن می‌شوند. اینجا با یک پس‌زمینه‌ی
   کاملا مات (نه نیمه‌شفاف) این مشکل را برای هر دو حالت (پنلِ مدیریتِ اصلی و پنلِ
   مستقلِ admin-plaques.php) قطعی حل می‌کنیم. */
#pgStyle, #peStyle, #apStyle, #apEditStyle{
  color-scheme: dark;
  background-color:#11162a !important;
  color:#f6f7fd !important;
}
#pgStyle option, #peStyle option, #apStyle option, #apEditStyle option{
  background:#11162a; color:#f6f7fd;
}

/* ---------------- کادرِ «لوحِ جدید داری» کنارِ دکمه‌ی پروفایل در نوارِ اصلی ---------------- */
/* min-width:0 و white-space:nowrap تضمین می‌کنند متن هیچ‌وقت بریده نشود */
.sv-plaque-home-badge{
  display:flex; align-items:center; gap:8px; margin:2px 4px 10px; text-decoration:none; color:inherit;
  padding:8px 14px 8px 12px; border-radius:999px; position:relative; overflow:hidden; width:fit-content; max-width:100%;
  background:linear-gradient(120deg, rgba(255,183,90,.2), rgba(179,79,255,.2));
  border:1px solid rgba(255,215,106,.55);
  animation:svPlaqueHomeBadgePulse 2.2s ease-in-out infinite;
  transition:transform .2s, border-color .2s;
}
.sv-plaque-home-badge:hover{ transform:translateY(-1px); border-color:#ffd76a; }
.sv-plaque-home-badge:focus-visible{ outline:2px solid #ffd76a; outline-offset:2px; }
.sv-plaque-home-badge::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 45%, transparent 60%);
  transform:translateX(-100%); animation:svPlaqueBannerSheen 2.8s ease-in-out infinite;
}
@keyframes svPlaqueHomeBadgePulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,183,90,.3); }
  50%{ box-shadow:0 0 0 7px rgba(255,183,90,0); }
}
.sv-plaque-home-badge-ic{ font-size:17px; flex-shrink:0; position:relative; z-index:1; line-height:1; filter:drop-shadow(0 2px 4px rgba(255,183,90,.5)); }
.sv-plaque-home-badge-txt{
  font-size:13px; font-weight:800; white-space:nowrap; min-width:0;
  position:relative; z-index:1; line-height:1.2;
}

/* در صفحه‌های کوچک، نوار فقط آیکن نشان می‌دهد (مثل بقیه‌ی آیتم‌های نوار) */
@media (max-width:820px){
  .sv-plaque-home-badge{ justify-content:center; padding:10px 0; gap:0; margin:2px 4px 8px; }
  .sv-plaque-home-badge-txt{ display:none; }
}

/* ---------------- احترام به کاربرانی که حرکتِ کمتر می‌خواهند ---------------- */
@media (prefers-reduced-motion: reduce){
  .sv-plaque, .sv-plaque-shine, .sv-plaque-sealed, .sv-plaque-sealed::before, .sv-plaque-seal-ic,
  .sv-plaque-banner-btn::before, .sv-plaque-home-badge, .sv-plaque-home-badge::before,
  .sv-pv-plaque-dot, .sv-plaque-modal::before, .sv-plaque-modal .sv-plaque-reveal, .sv-plaque-modal-cong{
    animation:none !important;
  }
  .sv-plaque{ transform:none !important; transition:none; }
  .sv-plaque-modal{ transition:opacity .2s; transform:none; }
  .sv-confetti-piece{ display:none; }
}