/* فاز ۱۲ — رنگ لهجه‌ی صفحه از پلن فعال مشتری می‌آید؛ [data-shell-page] روی
   ریشه‌ی صفحه ست می‌شود (در tools.js) و --accent را از توکن‌های panel.css
   می‌گیرد. اگر پلنی نبود (عضویت غیرفعال)، پیش‌فرض همان طلایی برند است. */
[data-shell-page] { --accent: var(--color-gold) }
[data-shell-page][data-plan="plan-free"] { --accent: var(--plan-free) }
[data-shell-page][data-plan="plan-iran"] { --accent: var(--plan-iran) }
[data-shell-page][data-plan="plan-basic"] { --accent: var(--plan-basic) }
[data-shell-page][data-plan="plan-silver"] { --accent: var(--plan-silver) }
[data-shell-page][data-plan="plan-gold"] { --accent: var(--plan-gold) }
[data-shell-page][data-plan="plan-diamond"] { --accent: var(--plan-diamond) }

.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px }
.tool-card {
  position: relative; background: var(--color-navy-light); border: 1px solid rgba(196,163,90,.3); border-radius: 14px;
  padding: 22px; cursor: pointer; border-width: 1px; border-style: solid; text-align: start; font-family: inherit;
}
.tool-card .tool-title { font-size: 16px; font-weight: 700; margin-bottom: 6px }
.tool-card .tool-desc { font-size: 13px; color: var(--text-70) }
.tool-card.locked { filter: grayscale(1); opacity: .55 }
.tool-card.exhausted { cursor: not-allowed; opacity: .65 }
.tool-card:not(.locked):hover { border-color: var(--accent, var(--color-gold)) }

/* دستور کار نسخه ۲، بند ۷ — نوار ۱px طلایی + نور چرخان پادساعت‌گرد، فقط
   با اشتراک فعال (کلاس tool-glow، نه locked). عنصر فرزند (نه ::before) تا
   با محتوای دکمه تداخل نکند؛ mask فقط همان ۱px محیط را نشان می‌دهد، نه
   کل مربع را — طبق سند: «فقط نوار، نه پرکردن باکس». transform-only روی
   GPU (نه layout)، بدون توقف تا وقتی مشتری در همین صفحه است. */
.tool-card.tool-glow { --tool-glow-duration: 3s; border-color: var(--plan-gold, #D4AF37) }
.tool-glow-ring {
  position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 65%, var(--plan-gold, #D4AF37) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: tool-glow-spin var(--tool-glow-duration) linear infinite;
  will-change: transform;
}
.tool-card:not(.tool-glow) .tool-glow-ring { display: none }
@keyframes tool-glow-spin { to { transform: rotate(-360deg) } }
@media (prefers-reduced-motion: reduce) {
  .tool-glow-ring { animation: none }
}

/* ---- «Features» (features_snapshot) ---- */
.feature-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px }
.feature-chip {
  font-size: 12.5px; color: var(--color-cream); background: rgba(255,255,255,.06);
  border: 1px solid var(--accent, var(--color-gold)); border-radius: 999px; padding: 5px 12px;
}

/* ---- «My Logins» (فهرست عمودی) ---- */
.my-logins { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 24px }
.login-row {
  background: var(--color-navy-light); border: 1px solid rgba(196,163,90,.25); border-inline-start: 3px solid var(--accent, var(--color-gold));
  border-radius: 12px; padding: 16px 18px;
}
.login-row .login-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px }
.login-row .login-number { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; unicode-bidi: isolate }
.login-row .login-badges { display: flex; gap: 6px; flex-wrap: wrap }
.login-badge {
  font-size: 11.5px; border-radius: 6px; padding: 3px 8px; border: 1px solid rgba(196,163,90,.4); color: var(--text-82);
}
.login-row .login-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 4px 16px; font-size: 12.5px; color: var(--text-70) }
.login-row .login-meta b { color: var(--text-82); font-weight: 600; unicode-bidi: isolate }
.my-logins-empty { font-size: 13px; color: var(--text-70); margin: 0 0 20px }

/* ---- فاز ۱۴ — فایل‌های دانلودی با شمارش معکوس ---- */
.file-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 24px }
.file-row {
  background: var(--color-navy-light); border: 1px solid rgba(196,163,90,.25); border-inline-start: 3px solid var(--accent, var(--color-gold));
  border-radius: 12px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.file-row-info { display: flex; flex-direction: column; gap: 2px }
.file-title { font-weight: 700; font-size: 14px }
.file-kind { font-size: 12px; color: var(--text-70) }
.file-countdown { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--accent, var(--color-gold)); min-width: 70px; text-align: center }
.file-row-expired { opacity: .5 }
.file-row-expired .file-countdown { color: var(--bad, #e05d5d) }

/* ---- فرم ثبت Login معاملاتی (مودال، کارت اکسپرت) ---- */
.tl-overlay {
  position: fixed; inset: 0; background: rgba(8,12,24,.72); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.tl-modal {
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  background: var(--color-navy-dark); border: 1px solid rgba(196,163,90,.5); border-radius: 16px;
  padding: 26px;
}
.tl-modal h3 { font-family: var(--font-heading); font-size: 19px; margin: 0 0 6px }
.tl-modal .tl-sub { font-size: 13px; color: var(--text-70); margin: 0 0 20px }
.tl-modal .field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.tl-modal select {
  background: var(--color-navy-dark); border: 1px solid rgba(196,163,90,.5); border-radius: 10px;
  color: var(--color-cream); font-family: inherit; font-size: 15px; padding: 12px 14px; width: 100%;
}
.tl-modal input[readonly] { color: var(--text-70); cursor: default }
.tl-modal .tl-actions { display: flex; gap: 10px; margin-top: 18px }
.tl-modal .tl-actions .btn-outline { flex: none; padding: 12px 18px }
.tl-modal .tl-hint { font-size: 11.5px; color: var(--text-70); margin: -4px 0 12px }
.tl-modal .field-error input,
.tl-modal .field-error select { border-color: #a04452 !important }
.tl-modal .field-error-msg { font-size: 12px; color: #a04452; margin: 2px 0 0 }

/* دستور کار نسخه ۲، بند ۹ — فیلدها زیر هم، نه کنار هم، تا عرض تبلت (۷۶۸px)؛
   فقط در دسکتاپ واقعی دو‌ستونه می‌ماند. هیچ overflow-x روی هیچ کانتینری. */
@media (max-width: 768px) {
  .tl-modal .field-row-2 { grid-template-columns: 1fr }
}