/* =========================================================
   CNTRLZ VIP Terminal — custom theme
   (faithful reproduction of the original Tailwind v4 build)
   ========================================================= */

:root {
  --gold: #c5a028;
  --gold-bright: #ffd700;
  --bg: #050505;
  --bg-panel: #0a0a0a;
  --bg-card: #0f0f0f;
  --bg-input: #000;
  --text: #f0f0f0;
  --gray-300: #d1d5db;
  --gray-400: #99a1af;
  --gray-500: #6a7282;
  --gray-600: #4a5565;
  --gray-700: #364153;
  --gray-800: #1e2939;
  --gray-900: #101828;
  --font-sans: "Vazirmatn", "Inter", Tahoma, Arial, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", ui-monospace, SFMono-Regular, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--gold); color: #000; }

.font-mono { font-family: var(--font-mono); }

a { text-decoration: none; }

/* ===== Loading splash ===== */
.loading-screen {
  position: absolute;
  inset: 0;
  z-index: 1080;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border: 1px solid rgba(197, 160, 40, 0.1);
}

/* wrapper شورت‌کد برای جلوگیری از پوشش کل صفحه */
.cntrlz-wrap {
  position: relative;
  min-height: 100vh;
}
.loading-screen.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.loading-spinner {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px dashed var(--gold);
  border-top-color: transparent;
  box-shadow: 0 0 30px rgba(197, 160, 40, 0.25);
  animation: spin 1s linear infinite;
}
.loading-title {
  color: var(--gold);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  font-family: var(--font-mono);
}
.loading-sub {
  font-size: 0.75rem;
  color: var(--gray-400);
  font-weight: 800;
  margin-top: 0.25rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== App layout ===== */
.app-root {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
}
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}
@media (min-width: 992px) {
  .app-shell { flex-direction: row; }
}

/* ===== Sidebar ===== */
.sidebar {
  width: 100%;
  background: var(--bg-panel);
  border-bottom: 1px solid rgba(197, 160, 40, 0.1);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 992px) {
  .sidebar {
    width: 280px;
    flex-shrink: 0;
    border-bottom: 0;
    border-left: 1px solid rgba(197, 160, 40, 0.1);
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
  }
}

.brand-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(197, 160, 40, 0.1);
  justify-content: space-between;
}
@media (min-width: 992px) {
  .brand-row { flex-direction: column; align-items: stretch; }
}
.brand-logo {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(to top right, var(--gold), rgba(180, 83, 9, 0.8));
  padding: 1.5px;
  flex-shrink: 0;
}
.brand-logo > div {
  width: 100%; height: 100%;
  background: var(--bg);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-bright);
  font-weight: 900;
  font-size: 1rem;
}
.brand-title { color: var(--gold-bright); font-size: 1.25rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.brand-sub { font-size: 0.75rem; color: var(--gray-400); font-weight: 700; display: block; margin-top: 0.25rem; }

/* nav */
.nav-list { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 2rem; }
.nav-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--gray-400);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: right;
}
.nav-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.02); }
.nav-btn.active { background: rgba(197, 160, 40, 0.1); border-color: var(--gold); color: #fff; }
.nav-btn .nav-left { display: flex; align-items: center; gap: 0.75rem; }
.nav-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card);
  color: var(--gray-400);
  transition: transform 0.2s ease;
}
.nav-btn:hover .nav-icon { transform: scale(1.05); color: #fff; }
.nav-btn.active .nav-icon { background: var(--gold); color: #000; }
.nav-icon svg { width: 18px; height: 18px; }
.nav-label { font-size: 0.75rem; font-weight: 800; display: block; white-space: nowrap; }
.nav-btn.active .nav-label { color: var(--gold-bright); }
.nav-sub { font-size: 0.5625rem; color: var(--gray-500); display: block; margin-top: 0.125rem; }
.nav-lock {
  background: #000; color: var(--gold);
  font-size: 0.5rem; font-weight: 700;
  padding: 0.125rem 0.375rem;
  border: 1px solid rgba(197, 160, 40, 0.25);
  border-radius: 4px;
}
.nav-chevron { width: 14px; height: 14px; color: var(--gray-600); transition: all 0.2s; transform: translateX(4px); }
.nav-btn:hover .nav-chevron { color: var(--gray-400); transform: translateX(0); }
.nav-btn.active .nav-chevron { color: var(--gold); transform: translateX(0); }

/* support / channel cards */
.side-extra { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(16,24,40,0.4); display: flex; flex-direction: column; gap: 0.625rem; }
.side-card {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem;
  border-radius: 12px;
  cursor: pointer;
  text-align: right;
  border: 1px solid;
  transition: all 0.2s;
  background: transparent;
  color: #fff;
}
.side-card .sc-left { display: flex; align-items: center; gap: 0.625rem; }
.side-card .sc-ic { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; transition: transform 0.2s; }
.side-card:hover .sc-ic { transform: scale(1.05); }
.side-card .sc-title { font-size: 0.6875rem; font-weight: 800; display: block; }
.side-card .sc-sub { font-size: 0.5625rem; color: var(--gray-500); display: block; }
.side-card .sc-chev { width: 14px; height: 14px; }

.support-card { border-color: rgba(197,160,40,0.25); background: linear-gradient(to right, rgba(120,53,15,0.15), rgba(197,160,40,0.05)); }
.support-card:hover { border-color: var(--gold-bright); }
.support-card .sc-ic { background: var(--gold); color: #000; }
.support-card .sc-title { color: var(--gold-bright); }
.support-card .sc-chev { color: rgba(255,215,0,0.7); }

.channel-card { border-color: rgba(14,165,233,0.2); background: linear-gradient(to right, rgba(23,37,84,0.15), rgba(14,165,233,0.05)); }
.channel-card:hover { border-color: #38bdf8; }
.channel-card .sc-ic { background: #0ea5e9; color: #fff; }
.channel-card .sc-title { color: #38bdf8; }
.channel-card .sc-chev { color: rgba(56,189,248,0.7); }

/* side footer status */
.side-status { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--gray-900); display: flex; flex-direction: column; gap: 0.625rem; }
.side-status-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.625rem; }
.side-status-row .lbl { color: var(--gray-500); }
.status-ok { color: #10b981; font-weight: 700; display: flex; align-items: center; gap: 0.375rem; }
.status-clock { color: var(--gray-300); font-family: var(--font-mono); display: flex; align-items: center; gap: 0.25rem; }
.status-clock svg { width: 12px; height: 12px; color: var(--gold); }
.ping-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; animation: ping 1s cubic-bezier(0,0,0.2,1) infinite; }
@keyframes ping { 75%,100% { transform: scale(2); opacity: 0; } }

/* mobile top controls (coins/user) */
.mobile-controls { display: flex; align-items: center; gap: 0.375rem; }
@media (min-width: 992px) { .mobile-controls { display: none; } }

/* ===== Main ===== */
.main-area {
  flex: 1;
  background: var(--bg);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow-y: auto;
}
@media (min-width: 992px) { .main-area { padding: 2rem; } }

/* guest limit banner */
.guest-banner {
  width: 100%;
  background: rgba(120,53,15,0.2);
  border: 1px solid rgba(197,160,40,0.35);
  border-radius: 16px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: right;
}
@media (min-width: 576px) { .guest-banner { flex-direction: row; } }

/* page header */
.page-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  background: var(--bg-panel);
  border: 1px solid rgba(197,160,40,0.15);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}
@media (min-width: 576px) { .page-header { flex-direction: row; align-items: center; } }
.page-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 128px; height: 80px;
  background: linear-gradient(to bottom right, rgba(197,160,40,0.05), transparent);
  pointer-events: none;
}
.page-title { font-size: 1.125rem; font-weight: 900; color: #fff; display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.page-desc { font-size: 0.75rem; color: var(--gray-400); margin-top: 0.25rem; margin-bottom: 0; }

/* coin chip + user chips (header) */
.header-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.coin-chip {
  background: var(--bg-card);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 12px;
  padding: 0.375rem 0.875rem;
  display: flex; align-items: center; gap: 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.coin-chip:hover { border-color: var(--gold-bright); }
.coin-chip:active { transform: scale(0.95); }
.coin-chip .cc-ic { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,215,0,0.1); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--gold-bright); animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
.coin-chip .cc-amount { color: #fff; font-size: 0.625rem; font-weight: 800; display: block; line-height: 1; }
.coin-chip .cc-buy { color: var(--gold-bright); font-size: 0.5rem; font-weight: 700; display: block; margin-top: 0.125rem; }
.coin-chip:hover .cc-buy { text-decoration: underline; }
@keyframes pulse { 50% { opacity: 0.5; } }

.user-chip {
  background: var(--bg-card);
  border: 1px solid rgba(197,160,40,0.3);
  border-radius: 12px;
  padding: 0.5rem 1rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.user-chip svg { width: 16px; height: 16px; color: var(--gold); }
.user-chip .uc-name { color: #fff; font-size: 0.625rem; font-weight: 700; display: block; }
.user-chip .uc-role { color: var(--gray-500); font-family: var(--font-mono); font-size: 0.625rem; display: block; }

.logout-btn {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: #000;
  border: 1px solid rgba(127,29,29,0.4);
  color: #f87171;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.logout-btn:hover { border-color: #ef4444; background: rgba(69,10,10,0.2); }
.logout-btn:active { transform: scale(0.95); }
.logout-btn svg { width: 16px; height: 16px; }

.guest-chip {
  background: var(--bg-card);
  border: 1px solid rgba(197,160,40,0.25);
  border-radius: 12px;
  padding: 0.5rem 1rem;
  text-align: right;
  font-size: 0.625rem;
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--gray-300);
  cursor: pointer;
  transition: all 0.15s;
}
.guest-chip:hover { border-color: var(--gold); color: #fff; }
.guest-chip svg { width: 16px; height: 16px; color: var(--gold); }

/* page content fade */
.page-content { flex: 1; }
.fade-page { animation: fadePage 0.3s ease; }
@keyframes fadePage { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* generic placeholder card for not-yet-built sections */
.placeholder-card {
  background: var(--bg-panel);
  border: 1px solid rgba(197,160,40,0.15);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  color: var(--gray-400);
}

/* locked archive box */
.locked-box {
  text-align: center;
  padding: 5rem 1.5rem;
  background: rgba(0,0,0,0.4);
  border: 1px dashed rgba(69,10,10,0.4);
  border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  max-width: 56rem;
  margin: 0 auto;
}
.locked-box .lk-ic { width: 64px; height: 64px; background: rgba(69,10,10,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.875rem; }

/* ===== Footer ===== */
.app-footer {
  background: #020202;
  padding: 1rem;
  border-top: 1px solid var(--gray-900);
  text-align: center;
}
.app-footer span { font-size: 0.625rem; color: var(--gray-500); font-weight: 700; letter-spacing: 0.025em; }

/* =========================================================
   Modals (custom, framer-motion style transitions)
   ========================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  user-select: none;
}
.modal-backdrop-c {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(12px);
  animation: fadeIn 0.25s ease;
}
.modal-card {
  position: relative;
  z-index: 10;
  width: 100%;
  text-align: right;
  overflow-y: auto;
  max-height: 92vh;
  animation: popIn 0.25s cubic-bezier(0.16,1,0.3,1);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(0.95) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-overlay.closing .modal-backdrop-c { animation: fadeOut 0.2s ease forwards; }
.modal-overlay.closing .modal-card { animation: popOut 0.2s ease forwards; }
@keyframes popOut { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.95) translateY(20px); } }

.modal-top-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.modal-close {
  position: absolute;
  top: 0.875rem; left: 0.875rem;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: var(--gray-400);
  border: 1px solid rgba(16,24,40,0.6);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 30;
  transition: all 0.15s;
}
.modal-close:hover { background: rgba(69,10,10,0.4); color: #f87171; }

/* login modal */
.login-card {
  max-width: 420px;
  background: #070708;
  border: 1px solid rgba(197,160,40,0.35);
  border-radius: 16px;
  padding: 1.625rem;
  box-shadow: 0 25px 50px -12px rgba(197,160,40,0.15);
}
.login-head { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(16,24,40,0.8); }
.login-head .lh-ic {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(to top right, rgba(197,160,40,0.25), #000);
  border: 1px solid rgba(197,160,40,0.45);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.login-head h3 { font-size: 0.875rem; font-weight: 900; color: var(--gold-bright); margin: 0; }

.info-box {
  border-radius: 16px;
  padding: 0.875rem;
  margin-bottom: 1.25rem;
  font-size: 0.6875rem;
  color: var(--gray-300);
  line-height: 1.5;
  display: flex;
  gap: 0.5rem;
}
.info-box.amber { background: rgba(120,53,15,0.2); border: 1px solid rgba(197,160,40,0.25); }
.info-box.red { background: rgba(69,10,10,0.25); border: 1px solid rgba(127,29,29,0.35); }

.form-label-c { font-size: 0.75rem; font-weight: 700; color: var(--gray-400); display: block; text-align: right; margin-bottom: 0.375rem; }

.phone-wrap {
  display: flex; align-items: center;
  background: #000;
  border: 1px solid var(--gray-800);
  border-radius: 12px;
  overflow: hidden;
  padding: 0.25rem;
  transition: all 0.15s;
}
.phone-wrap:focus-within { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(197,160,40,0.1); }
.phone-prefix { display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.625rem; border-left: 1px solid var(--gray-800); flex-shrink: 0; }
.phone-prefix .flag { font-size: 1rem; }
.phone-prefix .code { color: var(--gray-500); font-size: 0.625rem; font-family: var(--font-mono); line-height: 1; }
.phone-input {
  width: 100%;
  background: transparent;
  color: #fff;
  font-family: var(--font-mono);
  text-align: left;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  border: none;
  outline: none;
  padding: 0.5rem;
}
.phone-input::placeholder { color: #374151; }
.hint { font-size: 0.59375rem; color: var(--gray-500); display: block; text-align: right; line-height: 1.6; margin-top: 0.25rem; }
.hint code { color: var(--gold-bright); font-weight: 700; background: rgba(17,24,39,0.3); padding: 0.125rem 0.375rem; border-radius: 4px; }

/* captcha */
.captcha-box { background: #111112; border: 1px solid var(--gray-900); border-radius: 16px; padding: 1.125rem; }
.captcha-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.captcha-head .ch-title { font-size: 0.625rem; font-weight: 700; color: var(--gold-bright); display: flex; align-items: center; gap: 0.25rem; }
.captcha-head .ch-title svg { width: 14px; height: 14px; color: var(--gold); }
.captcha-head .ch-sub { font-size: 0.5625rem; color: var(--gray-500); }
.captcha-stage {
  position: relative;
  width: 100%;
  height: 95px;
  background: #0c0c0d;
  border: 1px solid var(--gray-900);
  border-radius: 12px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.5s;
}
.captcha-stage.solved { border-color: var(--gold-bright); }
.captcha-grid {
  position: absolute; inset: 0;
  background-image:
          linear-gradient(to right, #1f1e1c 1px, transparent 1px),
          linear-gradient(to bottom, #1f1e1c 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.15;
  pointer-events: none;
}
.captcha-text { font-size: 1.5rem; z-index: 0; transition: color 0.5s; font-weight: 700; color: #1e2939; }
.captcha-stage.solved .captcha-text { color: var(--gold-bright); filter: drop-shadow(0 0 8px rgba(255,215,0,0.5)); }
.captcha-target {
  position: absolute;
  width: 28px; height: 28px;
  background: rgba(0,0,0,0.95);
  border: 2px dashed rgba(197,160,40,0.6);
  border-radius: 8px;
  z-index: 10;
  transition: all 0.05s;
}
.captcha-piece {
  position: absolute;
  width: 28px; height: 28px;
  background: linear-gradient(to top right, var(--gold-bright), #d97706);
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(245,158,11,0.25);
  z-index: 20;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.625rem; color: #000; font-weight: 800;
  transition: all 0.05s;
}
.captcha-slider {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  touch-action: none;
  background: #000;
  border-radius: 9999px;
  outline: none;
  width: 100%;
  height: 10px;
  margin-top: 1rem;
  opacity: 0.9;
}
.captcha-slider:hover { opacity: 1; }
.captcha-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  cursor: grab;
  background: linear-gradient(135deg, gold, var(--gold));
  border: 1px solid rgba(255,215,0,0.5);
  border-radius: 50%;
  width: 28px; height: 28px;
  transition: transform 0.15s cubic-bezier(0.16,1,0.3,1), box-shadow 0.15s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 0 10px rgba(255,215,0,0.4);
}
.captcha-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  background: linear-gradient(135deg, #fff, gold, var(--gold));
  transform: scale(1.3);
  box-shadow: 0 0 20px rgba(255,215,0,0.9), 0 0 35px rgba(255,165,0,0.5);
}
.captcha-slider::-moz-range-thumb {
  cursor: grab;
  background: linear-gradient(135deg, gold, var(--gold));
  border: 1px solid rgba(255,215,0,0.5);
  border-radius: 50%;
  width: 28px; height: 28px;
  box-shadow: 0 0 10px rgba(255,215,0,0.4);
}
.captcha-slider::-moz-range-thumb:active {
  cursor: grabbing;
  background: linear-gradient(135deg, #fff, gold, var(--gold));
  transform: scale(1.3);
}
.captcha-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 0.25rem; font-size: 0.5625rem; }
.captcha-foot .cf-side { color: var(--gray-500); }
.captcha-foot .cf-status { font-weight: 700; color: var(--gray-400); transition: all 0.3s; }
.captcha-stage.solved ~ .captcha-foot .cf-status,
.cf-status.ok { color: var(--gold-bright); filter: drop-shadow(0 0 6px rgba(255,215,0,0.4)); }

.success-golden-glow { animation: goldenGlowPulse 1.8s ease-in-out infinite; }
@keyframes goldenGlowPulse {
  0%, 100% { border-color: rgba(255,215,0,0.5); box-shadow: 0 0 12px 1px rgba(255,215,0,0.3); }
  50% { border-color: gold; box-shadow: 0 0 32px 10px rgba(255,215,0,0.8), 0 0 15px 4px rgba(255,165,0,0.3); }
}

/* terms checkbox */
.terms-row { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.65625rem; color: var(--gray-400); cursor: pointer; user-select: none; }
.terms-row input { margin-top: 0.25rem; accent-color: var(--gold); }

/* gold submit button */
.btn-gold {
  width: 100%;
  background: linear-gradient(to right, var(--gold), #b45309);
  color: #000;
  font-weight: 800;
  padding: 0.75rem;
  border: none;
  border-radius: 12px;
  font-size: 0.75rem;
  display: flex; justify-content: center; align-items: center; gap: 0.375rem;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-gold:hover { background: linear-gradient(to right, var(--gold-bright), var(--gold)); }
.btn-gold:disabled { background: linear-gradient(to right, var(--gray-900), #000); color: var(--gray-500); cursor: not-allowed; }
.btn-gold-solid { background: var(--gold); }
.btn-gold-solid:hover { background: var(--gold-bright); }

/* OTP */
.otp-sim {
  background: #0b0b0c;
  border: 1px solid var(--gray-800);
  border-radius: 16px;
  padding: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-bottom: 1rem;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.otp-sim .os-ic { width: 36px; height: 36px; border-radius: 12px; background: rgba(255,215,0,0.1); border: 1px solid rgba(255,215,0,0.2); display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.otp-sim .os-title { color: #fff; font-size: 0.6875rem; font-weight: 700; display: block; }
.otp-sim .os-sub { color: var(--gray-500); font-size: 0.5rem; display: block; }
.otp-code-badge { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 900; color: var(--gold-bright); letter-spacing: 0.2em; }
.otp-inputs { display: flex; justify-content: center; gap: 0.875rem; }
.otp-inputs input {
  width: 48px; height: 48px;
  background: #000;
  border: 1px solid var(--gray-800);
  color: #fff;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 1.125rem;
  border-radius: 12px;
  outline: none;
}
.otp-inputs input:focus { border-color: var(--gold); }
.otp-autoread { margin: 0.75rem 0; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.625rem; color: #34d399; font-weight: 800; animation: pulse 2s infinite; }
.otp-autoread .dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; animation: ping 1s infinite; }
.resend-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.65625rem; }
.resend-row .timer { color: var(--gray-500); }
.resend-row .timer strong { color: var(--gray-300); font-family: var(--font-mono); }
.resend-btn { background: none; border: none; color: var(--gold); font-weight: 700; cursor: pointer; }
.resend-btn:hover { text-decoration: underline; }

.btn-dark {
  background: #000;
  border: 1px solid var(--gray-800);
  color: var(--gray-400);
  border-radius: 12px;
  padding: 0.75rem;
  font-size: 0.75rem;
  display: flex; justify-content: center; align-items: center; gap: 0.25rem;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-dark:hover { border-color: var(--gold); color: #fff; }
.btn-dark svg { width: 14px; height: 14px; }

.input-c {
  width: 100%;
  background: #000;
  border: 1px solid var(--gray-800);
  color: #fff;
  font-size: 0.875rem;
  border-radius: 12px;
  padding: 0.625rem 0.875rem;
  outline: none;
  transition: border-color 0.15s;
}
.input-c:focus { border-color: var(--gold); }
.input-c.gold-border { border-color: rgba(197,160,40,0.35); }

/* support modal */
.support-modal-card {
  max-width: 32rem;
  background: var(--bg-panel);
  border: 1px solid rgba(197,160,40,0.3);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(197,160,40,0.05);
}
.support-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem;
  background: #000;
  border-radius: 12px;
  transition: all 0.2s;
}
.support-link.mail { border: 1px solid rgba(197,160,40,0.15); }
.support-link.mail:hover { background: rgba(197,160,40,0.1); }
.support-link.mail .sl-addr { color: var(--gold-bright); font-family: var(--font-mono); font-size: 0.6875rem; }
.support-link.tg { border: 1px solid rgba(14,165,233,0.15); }
.support-link.tg:hover { background: rgba(14,165,233,0.1); }
.support-link.tg .sl-addr { color: #38bdf8; font-family: var(--font-mono); font-size: 0.6875rem; }

/* toast / confirm modal */
.toast-card {
  max-width: 24rem;
  background: #08080a;
  border: 1px solid rgba(197,160,40,0.35);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6);
  overflow: hidden;
}
.toast-line { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.toast-line.success { background: linear-gradient(to right, transparent, #10b981, transparent); }
.toast-line.error { background: linear-gradient(to right, transparent, #ef4444, transparent); }
.toast-line.warning { background: linear-gradient(to right, transparent, #f59e0b, transparent); }
.toast-line.confirm { background: linear-gradient(to right, transparent, var(--gold-bright), transparent); }
.toast-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid; font-size: 1.125rem; }
.toast-ic.success { background: rgba(6,78,59,0.2); border-color: rgba(16,185,129,0.4); color: #34d399; }
.toast-ic.error { background: rgba(69,10,10,0.2); border-color: rgba(239,68,68,0.4); color: #f87171; }
.toast-ic.warning { background: rgba(120,53,15,0.2); border-color: rgba(245,158,11,0.4); color: #f59e0b; }
.toast-ic.confirm { background: rgba(120,53,15,0.3); border-color: rgba(197,160,40,0.5); color: var(--gold-bright); }
.toast-title { font-size: 0.875rem; font-weight: 900; color: #fff; margin: 0; }
.toast-msg { font-size: 0.6875rem; color: var(--gray-400); line-height: 1.6; margin-top: 0.5rem; margin-bottom: 0; }
.toast-actions { display: flex; gap: 0.625rem; justify-content: flex-end; margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid rgba(16,24,40,0.65); }
.btn-cancel { background: #000; border: 1px solid var(--gray-800); color: var(--gray-400); padding: 0.5rem 1rem; border-radius: 12px; font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.btn-cancel:hover { background: var(--gray-900); color: #fff; }
.btn-confirm { background: var(--gold); color: #000; padding: 0.5rem 1.25rem; border-radius: 12px; font-size: 0.75rem; font-weight: 900; border: none; cursor: pointer; transition: all 0.15s; }
.btn-confirm:hover { background: var(--gold-bright); }
.btn-ok { background: rgba(197,160,40,0.1); color: var(--gold-bright); border: 1px solid rgba(197,160,40,0.35); padding: 0.375rem 1.375rem; border-radius: 12px; font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.btn-ok:hover { background: rgba(197,160,40,0.25); }

/* scrollbar */
.scrollbar-thin { scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(197,160,40,0.4); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.animate-bounce { animation: bounce 1s infinite; }
@keyframes bounce { 0%,100% { transform: translateY(-12%); animation-timing-function: cubic-bezier(0.8,0,1,1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,0.2,1); } }

.d-none { display: none !important; }

/* utility text helpers used inline */
.text-gold { color: var(--gold); }
.text-gold-bright { color: var(--gold-bright); }
.text-gray-400c { color: var(--gray-400); }
.text-gray-500c { color: var(--gray-500); }

/* =========================================================
   Image Generator + Compressor (component "cg")
   ========================================================= */
.ig-root { width: 100%; max-width: 56rem; margin: 0 auto; }
.ig-tabswitch-wrap { display: flex; justify-content: center; margin-bottom: 0.25rem; }
.ig-tabswitch {
  background: var(--bg);
  border: 1px solid rgba(197,160,40,0.2);
  padding: 6px;
  border-radius: 16px;
  display: flex;
  gap: 4px;
  box-shadow: 0 10px 15px -3px rgba(197,160,40,0.05);
}
.ig-tab {
  padding: 8px 20px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--gray-400);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
@media (min-width: 576px) { .ig-tab { padding: 8px 32px; } }
.ig-tab:hover { color: #fff; background: rgba(255,255,255,0.05); }
.ig-tab.active { background: var(--gold); color: #000; box-shadow: 0 4px 6px -1px rgba(197,160,40,0.25); }
.ig-ic-sm { width: 14px; height: 14px; }
.ig-ic-xs { width: 12px; height: 12px; }
.ig-ic { width: 20px; height: 20px; }

.ig-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; width: 100%; margin-top: 1.5rem; }
@media (min-width: 992px) { .ig-grid { grid-template-columns: 7fr 5fr; } }
.ig-anim-left { animation: igLeft 0.25s ease; }
.ig-anim-right { animation: igRight 0.25s ease; }
@keyframes igLeft { from { opacity: 0; transform: translateX(-15px); } to { opacity: 1; transform: translateX(0); } }
@keyframes igRight { from { opacity: 0; transform: translateX(15px); } to { opacity: 1; transform: translateX(0); } }

.ig-panel {
  background: var(--bg-panel);
  border: 1px solid rgba(197,160,40,0.15);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.ig-panel-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(197,160,40,0.1);
  color: var(--gold);
}
.ig-panel-head .ig-ic { color: var(--gold-bright); }
.ig-panel-head h3 { font-weight: 700; font-size: 1rem; margin: 0; }

.ig-field { display: flex; flex-direction: column; gap: 8px; }
.ig-label { font-size: 0.75rem; color: var(--gold); font-weight: 700; }
.ig-label-bright { font-size: 0.75rem; color: var(--gold-bright); font-weight: 700; }
.ig-label-black { font-size: 0.6875rem; color: var(--gold); font-weight: 900; }
.ig-flexbetween { display: flex; justify-content: space-between; align-items: center; }
.ig-q-pct { font-size: 0.75rem; color: var(--gold-bright); font-family: var(--font-mono); font-weight: 800; background: rgba(255,215,0,0.1); padding: 2px 8px; border-radius: 6px; }

.ig-input {
  width: 100%;
  background: #000;
  border: 1px solid rgba(197,160,40,0.2);
  border-radius: 8px;
  padding: 10px 16px;
  color: #fff;
  font-size: 0.875rem;
  outline: none;
  transition: all 0.15s;
  font-family: var(--font-sans);
}
.ig-input::placeholder { color: var(--gray-500); }
.ig-input:focus { border-color: var(--gold-bright); box-shadow: 0 0 0 1px rgba(255,215,0,0.3); }
.ig-input.bright { border-color: rgba(255,215,0,0.3); padding: 8px 12px; }
.ig-custom { animation: igFieldIn 0.2s ease; }
@keyframes igFieldIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

.ig-select {
  width: 100%;
  background: #000;
  border: 1px solid rgba(197,160,40,0.2);
  border-radius: 8px;
  padding: 8px 12px;
  color: #fff;
  font-size: 0.875rem;
  outline: none;
  cursor: pointer;
  font-family: var(--font-sans);
}
.ig-select:focus { border-color: var(--gold-bright); }
.ig-select.bold { font-size: 0.75rem; font-weight: 700; padding: 12px 14px; min-height: 44px; }
.ig-select option { background: #000; }

.ig-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ig-comp-settings { gap: 1.25rem; margin-top: 0.25rem; }
@media (max-width: 575px) { .ig-comp-settings { grid-template-columns: 1fr; } }

.ig-actions { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
@media (min-width: 576px) { .ig-actions { flex-direction: row; } }
.ig-btn-outline {
  flex: 1;
  background: #000;
  color: var(--gold);
  border: 1px solid var(--gold);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.875rem;
}
.ig-btn-outline:hover { background: rgba(197,160,40,0.1); }
.ig-btn-outline:active { transform: scale(0.95); }
.ig-btn-gold {
  flex: 1;
  background: linear-gradient(to right, var(--gold), #9a7b1b);
  color: #000;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.875rem;
  box-shadow: 0 10px 15px -3px rgba(197,160,40,0.2);
}
.ig-btn-gold:hover { background: linear-gradient(to right, var(--gold-bright), var(--gold)); }
.ig-btn-gold:active { transform: scale(0.95); }

/* output card (right side) */
.ig-side { display: flex; flex-direction: column; min-width: 0; }
.ig-output-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(197,160,40,0.2);
  border-radius: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  overflow: hidden;
  position: relative;
  min-height: 350px;
}
.ig-corner { position: absolute; top: 0; right: 0; width: 96px; height: 96px; background: rgba(197,160,40,0.05); border-bottom-left-radius: 9999px; pointer-events: none; }
.ig-output-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid rgba(197,160,40,0.1); }
.ig-output-title { color: var(--gold); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px; }
.ig-output-title .ping-dot { width: 8px; height: 8px; }
.ig-badge { background: rgba(197,160,40,0.15); border: 1px solid rgba(197,160,40,0.35); color: var(--gold-bright); font-weight: 700; font-size: 10px; padding: 4px 10px; border-radius: 9999px; display: flex; align-items: center; gap: 6px; }
.ig-output-body { margin-top: 1.5rem; min-width: 0; width: 100%; max-width: 100%; }
.ig-output {
  font-size: 0.875rem;
  line-height: 1.85;
  max-height: none;
  overflow: visible;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-left: 4px;
  margin: 0;
}
.ig-output.fa { text-align: right; color: var(--gray-300); }
.ig-output.en { font-family: var(--font-mono); text-align: left; color: #e5e7eb; direction: ltr; user-select: all; }
.ig-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4rem 0; gap: 12px; }
.ig-empty p { font-size: 0.75rem; color: var(--gray-500); max-width: 220px; margin: 0; }
.ig-output-foot { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(197,160,40,0.1); display: flex; flex-direction: column; gap: 8px; animation: igFieldIn 0.3s ease; }
.ig-btn-copy {
  width: 100%;
  background: var(--gold);
  color: #000;
  font-weight: 800;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.875rem;
}
.ig-btn-copy:hover { background: var(--gold-bright); }
.ig-btn-copy:active { transform: scale(0.95); }

/* compressor dropzone */
.ig-drop {
  position: relative;
  border: 2px dashed rgba(197,160,40,0.2);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 190px;
  background: rgba(0,0,0,0.4);
}
.ig-drop:hover { border-color: rgba(255,215,0,0.5); background: rgba(0,0,0,0.8); }
.ig-drop.dragging { border-color: var(--gold-bright); background: rgba(197,160,40,0.05); box-shadow: 0 0 15px rgba(255,215,0,0.1); }
.ig-drop.loaded { border-color: rgba(16,185,129,0.3); background: rgba(6,78,59,0.02); cursor: default; }
.ig-drop-default { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ig-drop-ic { width: 48px; height: 48px; background: rgba(197,160,40,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold); transition: transform 0.2s; }
.ig-drop:hover .ig-drop-ic { transform: scale(1.1); }
.ig-drop-ic .ig-ic { color: var(--gold-bright); width: 24px; height: 24px; }
.ig-drop-title { font-size: 0.875rem; font-weight: 900; color: #e5e7eb; margin: 0; }
.ig-drop-sub { font-size: 11px; color: var(--gray-500); max-width: 420px; margin: 4px auto 0; line-height: 1.6; }

.ig-analyzing { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 1rem 0; }
.ig-spin { width: 40px; height: 40px; border: 2px solid var(--gold-bright); border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; }
.ig-analyzing-txt { font-size: 0.875rem; font-weight: 700; color: var(--gray-400); animation: pulse 2s infinite; }

.ig-loaded { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; text-align: right; }
@media (min-width: 576px) { .ig-loaded { flex-direction: row; } }
.ig-thumb { width: 80px; height: 80px; border-radius: 12px; overflow: hidden; border: 1px solid var(--gray-800); flex-shrink: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3); }
.ig-thumb img { max-width: 100%; max-height: 100%; object-fit: cover; }
.ig-loaded-info { flex: 1; min-width: 0; }
.ig-loaded-ok { font-size: 0.75rem; color: #34d399; font-weight: 800; display: flex; align-items: center; gap: 4px; }
.ig-loaded-name { font-size: 0.75rem; color: #e5e7eb; font-weight: 700; display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-loaded-meta { font-size: 10px; color: var(--gray-500); font-family: var(--font-mono); display: block; margin-top: 4px; }
.ig-remove { background: rgba(69,10,10,0.2); border: 1px solid rgba(127,29,29,0.3); color: #f87171; font-size: 0.75rem; font-weight: 700; padding: 8px 12px; border-radius: 12px; cursor: pointer; transition: all 0.15s; width: 100%; margin-top: 8px; }
@media (min-width: 576px) { .ig-remove { width: auto; margin-top: 0; } }
.ig-remove:hover { background: rgba(127,29,29,0.4); }
.ig-remove:active { transform: scale(0.95); }

.ig-png-note { background: rgba(0,0,0,0.5); border: 1px solid var(--gray-900); border-radius: 8px; padding: 12px; text-align: center; font-size: 10px; color: var(--gray-500); display: flex; align-items: center; justify-content: center; min-height: 44px; }
.ig-hint { font-size: 10px; color: var(--gray-500); line-height: 1.5; }
.ig-quality { display: flex; flex-direction: column; gap: 10px; justify-content: center; padding: 4px 0; }
.ig-range { width: 100%; height: 6px; background: #000; border-radius: 8px; -webkit-appearance: none; appearance: none; cursor: pointer; accent-color: var(--gold); min-height: 24px; outline: none; }
.ig-quality-foot { display: flex; justify-content: space-between; align-items: center; font-size: 9px; color: var(--gray-500); }
.ig-quality-label { color: var(--gold-bright); font-weight: 700; }

.ig-presets { background: rgba(0,0,0,0.3); border: 1px solid var(--gray-900); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ig-presets-title { font-size: 10px; color: var(--gold); font-weight: 700; }
.ig-presets-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ig-preset { padding: 8px 10px; border-radius: 8px; font-size: 10.5px; font-weight: 900; transition: all 0.15s; cursor: pointer; text-align: center; min-height: 38px; background: #111112; border: 1px solid var(--gray-800); color: var(--gray-400); }
.ig-preset:hover { color: #fff; background: rgba(255,255,255,0.05); }
.ig-preset.active { background: var(--gold); color: #000; border-color: var(--gold); box-shadow: 0 4px 6px -1px rgba(197,160,40,0.15); }

/* compressor report */
.ig-report { margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.ig-preview { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; border: 1px solid var(--gray-900); background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center; }
.ig-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ig-preview-fmt { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.85); border: 1px solid var(--gray-800); border-radius: 8px; padding: 4px 8px; font-size: 9px; color: var(--gold-bright); font-family: var(--font-mono); line-height: 1; }
.ig-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: center; }
.ig-stat { background: rgba(0,0,0,0.5); border: 1px solid #030712; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; }
.ig-stat.gold { background: rgba(197,160,40,0.05); border-color: rgba(197,160,40,0.2); }
.ig-stat-lbl { font-size: 10px; color: var(--gray-500); font-weight: 700; }
.ig-stat-lbl.gold { color: var(--gold-bright); }
.ig-stat-val { font-size: 0.875rem; font-family: var(--font-mono); font-weight: 900; margin-top: 2px; }
.ig-stat-val.gray { color: var(--gray-400); }
.ig-stat-val.goldv { color: var(--gold-bright); animation: pulse 2s infinite; }
.ig-stat-dim { font-size: 8px; color: var(--gray-600); font-family: var(--font-mono); margin-top: 2px; }
.ig-stat-ready { font-size: 8px; color: #34d399; font-weight: 700; margin-top: 2px; }
.ig-bar-block { background: rgba(0,0,0,0.4); border: 1px solid var(--gray-900); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ig-bar-head { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; }
.ig-bar-head span:first-child { color: var(--gray-400); }
.ig-bar-pct { color: #34d399; font-family: var(--font-mono); }
.ig-bar { width: 100%; background: #151516; height: 10px; border-radius: 9999px; overflow: hidden; display: flex; border: 1px solid #030712; box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); }
.ig-bar-fill { background: #10b981; height: 100%; transition: width 0.5s; border-radius: 8px; box-shadow: 0 0 8px rgba(16,185,129,0.3); }
.ig-bar-foot { display: flex; justify-content: space-between; font-size: 8px; color: var(--gray-500); }
.ig-saving { border-radius: 12px; padding: 8px 12px; }
.ig-saving.ok { background: rgba(6,78,59,0.2); border: 1px solid rgba(16,185,129,0.2); display: flex; align-items: center; justify-content: between; gap: 8px; justify-content: space-between; }
.ig-saving.ok span:first-child { font-size: 10px; color: #34d399; font-weight: 700; }
.ig-saving-badge { background: #10b981; color: #000; font-family: var(--font-mono); font-weight: 900; font-size: 0.75rem; padding: 2px 8px; border-radius: 6px; line-height: 1; }
.ig-saving.warn { background: rgba(120,53,15,0.2); border: 1px solid rgba(245,158,11,0.2); text-align: center; font-size: 10px; color: #f59e0b; line-height: 1.5; }

.ig-empty2 { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4rem 0; gap: 12px; }
.ig-empty2-ic { width: 56px; height: 56px; border-radius: 50%; background: rgba(197,160,40,0.05); border: 1px solid rgba(197,160,40,0.1); display: flex; align-items: center; justify-content: center; }
.ig-empty2-ic .ig-ic { color: rgba(197,160,40,0.6); }
.ig-empty2 p { font-size: 0.75rem; color: var(--gray-500); max-width: 210px; line-height: 1.7; margin: 0; }

.ig-btn-download {
  width: 100%;
  font-weight: 800;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.875rem;
  min-height: 44px;
  background: var(--gold);
  color: #000;
  border: none;
  box-shadow: 0 10px 15px -3px rgba(197,160,40,0.15);
}
.ig-btn-download:hover { background: var(--gold-bright); }
.ig-btn-download:active { transform: scale(0.95); }
.ig-btn-download.disabled, .ig-btn-download:disabled { background: #18181b; color: #52525b; border: 1px solid #030712; cursor: not-allowed; box-shadow: none; }

/* =========================================================
   AI Tools Directory (yT)
   ========================================================= */
.dir-root, .pf-root { width: 100%; max-width: 72rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
.dir-top { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center; }
@media (min-width: 992px) { .dir-top { grid-template-columns: 4fr 8fr; } }
.dir-search-wrap { position: relative; }
.dir-search {
  width: 100%; background: #000; border: 1px solid rgba(197,160,40,0.2);
  border-radius: 12px; padding: 12px 40px 12px 16px; color: #fff; font-size: 0.875rem; text-align: right; outline: none;
  font-family: var(--font-sans);
}
.dir-search::placeholder { color: var(--gray-500); }
.dir-search:focus { border-color: var(--gold-bright); box-shadow: 0 0 0 1px rgba(255,215,0,0.2); }
.dir-search-ic { position: absolute; right: 14px; top: 14px; width: 16px; height: 16px; color: var(--gold); }
.dir-cats { display: flex; flex-wrap: wrap; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.dir-cat-btn {
  padding: 8px 16px; border-radius: 12px; font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.2s;
  background: var(--bg-panel); border: 1px solid rgba(197,160,40,0.15); color: var(--gray-400); white-space: nowrap;
}
.dir-cat-btn:hover { color: #fff; background: #000; }
.dir-cat-btn.active { background: var(--gold); color: #000; border-color: var(--gold); box-shadow: 0 4px 6px -1px rgba(197,160,40,0.25); }

.dir-qfilter, .pf-ratiofilter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: rgba(0,0,0,0.3); border: 1px solid rgba(197,160,40,0.1); border-radius: 12px; padding: 12px; }
.dir-qfilter-label { font-size: 11px; font-weight: 700; color: var(--gold); margin-left: 8px; display: flex; align-items: center; gap: 4px; }
.dir-ic-xs { width: 14px; height: 14px; }
.dir-ic-lg { width: 48px; height: 48px; color: rgba(197,160,40,0.3); }
.dir-qtag { padding: 4px 10px; border-radius: 8px; font-size: 10px; font-weight: 700; cursor: pointer; transition: all 0.15s; background: rgba(197,160,40,0.2); border: 1px solid rgba(197,160,40,0.4); color: var(--gold-bright); }
.dir-qtag:not(.active) { background: transparent; border: 1px solid transparent; color: var(--gray-500); }
.dir-qtag:not(.active):hover { color: var(--gray-300); }
.dir-qtag-h { padding: 4px 10px; border-radius: 8px; font-size: 10px; cursor: pointer; transition: all 0.15s; background: var(--bg-panel); border: 1px solid var(--gray-800); color: var(--gray-400); }
.dir-qtag-h:hover { color: #e5e7eb; }
.dir-qtag-h.active { background: rgba(197,160,40,0.25); border: 1px solid var(--gold); color: var(--gold-bright); font-weight: 700; }

.dir-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .dir-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .dir-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.dir-card {
  background: var(--bg-card); border: 1px solid rgba(197,160,40,0.15); border-radius: 16px;
  padding: 14px; transition: all 0.3s; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 190px; animation: dirCardIn 0.2s ease;
}
@media (min-width: 576px) { .dir-card { padding: 20px; min-height: 200px; } }
@keyframes dirCardIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.dir-card:hover { border-color: var(--gold); background: rgba(197,160,40,0.03); transform: translateY(-4px); }
.dir-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; padding-bottom: 4px; margin-bottom: 10px; }
.dir-card-icon { font-size: 1.25rem; }
@media (min-width: 576px) { .dir-card-icon { font-size: 1.5rem; } }
.dir-card-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.dir-tag-mini { font-size: 8px; background: #000; border: 1px solid var(--gray-900); color: var(--gray-400); padding: 2px 6px; border-radius: 4px; }
.dir-card-name { font-weight: 800; color: var(--gold); transition: color 0.2s; font-size: 11px; margin-bottom: 6px; text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (min-width: 576px) { .dir-card-name { font-size: 0.875rem; } }
.dir-card:hover .dir-card-name { color: var(--gold-bright); }
.dir-card-desc { font-size: 10px; color: var(--gray-400); line-height: 1.6; text-align: right; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
@media (min-width: 576px) { .dir-card-desc { font-size: 0.75rem; -webkit-line-clamp: 3; } }
.dir-card-foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(197,160,40,0.1); display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.dir-card-cat { font-size: 8px; color: var(--gray-500); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 576px) { .dir-card-cat { font-size: 10px; } }
.dir-enter { background: #000; color: var(--gold); border: 1px solid rgba(197,160,40,0.7); padding: 4px 10px; border-radius: 8px; font-size: 9px; font-weight: 700; display: flex; align-items: center; gap: 4px; cursor: pointer; transition: all 0.15s; flex-shrink: 0; }
@media (min-width: 576px) { .dir-enter { font-size: 0.75rem; } }
.dir-enter:hover { background: var(--gold); color: #000; border-color: var(--gold); }
.dir-enter:active { transform: scale(0.95); }
.dir-enter svg { width: 10px; height: 10px; }
@media (min-width: 576px) { .dir-enter svg { width: 12px; height: 12px; } }
.dir-empty { width: 100%; padding: 4rem 0; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--bg-panel); border: 1px solid rgba(197,160,40,0.1); border-radius: 16px; }
.dir-empty-title { font-weight: 700; color: var(--gray-400); font-size: 0.875rem; margin-top: 8px; }
.dir-clear { font-size: 0.75rem; color: var(--gold); text-decoration: underline; margin-top: 4px; background: none; border: none; cursor: pointer; }

/* =========================================================
   Prompt Factory (vT)
   ========================================================= */
.pf-top { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center; }
@media (min-width: 992px) { .pf-top { grid-template-columns: 4fr 8fr; } }
.pf-search-wrap { position: relative; }
.pf-search { width: 100%; background: #000; border: 1px solid rgba(197,160,40,0.2); border-radius: 12px; padding: 10px 40px 10px 16px; color: #fff; font-size: 0.75rem; text-align: right; outline: none; font-family: var(--font-sans); }
.pf-search::placeholder { color: var(--gray-500); }
.pf-search:focus { border-color: var(--gold-bright); }
.pf-search-ic { position: absolute; right: 14px; top: 14px; width: 16px; height: 16px; color: var(--gold); }
.pf-cats { display: flex; flex-wrap: wrap; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.pf-cat-btn { padding: 8px 14px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: all 0.2s; background: var(--bg-panel); border: 1px solid rgba(197,160,40,0.15); color: var(--gray-400); white-space: nowrap; }
.pf-cat-btn:hover { color: #fff; }
.pf-cat-btn.active { background: var(--gold); color: #000; box-shadow: 0 4px 6px -1px rgba(197,160,40,0.2); }
.pf-ratiofilter { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; background: var(--bg-panel); border: 1px solid rgba(197,160,40,0.1); border-radius: 16px; padding: 16px; }
@media (min-width: 576px) { .pf-ratiofilter { flex-direction: row; align-items: center; } }
.pf-ratiofilter-label { font-size: 11px; font-weight: 700; color: var(--gray-400); display: flex; align-items: center; gap: 6px; padding-left: 8px; }
.pf-ratios { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-ratio-btn { padding: 6px 12px; border-radius: 8px; font-size: 10px; font-weight: 800; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: all 0.15s; background: #000; border: 1px solid rgba(197,160,40,0.1); color: var(--gray-400); }
.pf-ratio-btn:hover { color: #fff; border-color: rgba(197,160,40,0.25); }
.pf-ratio-btn.active { background: rgba(120,53,15,0.4); border: 1px solid var(--gold); color: var(--gold-bright); }
.pf-empty { background: var(--bg-panel); border: 1px dashed rgba(197,160,40,0.2); border-radius: 16px; padding: 3rem; text-align: center; color: var(--gray-500); font-size: 0.75rem; }

.pf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 992px) { .pf-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.pf-card { background: var(--bg-card); border: 1px solid rgba(197,160,40,0.15); border-radius: 16px; overflow: hidden; transition: all 0.3s; display: flex; flex-direction: column; justify-content: space-between; position: relative; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3); }
.pf-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.pf-preview { width: 100%; background: linear-gradient(to bottom right, #0c0c0d, #141416); position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: stretch; padding: 0; border: 0; border-bottom: 1px solid rgba(197,160,40,0.1); overflow: hidden; aspect-ratio: 1/1; max-height: 240px; }
/* ✅ FIX v7: نسبت‌های متناسب + max-height برای عمودی + contain */
.pf-preview-img-wrap { position: absolute; inset: 0; width: 100%; height: 100%; display: flex !important; align-items: center; justify-content: center; margin: 0; padding: 0; background: #0c0c0d; }
.pf-preview-img-wrap img { width: 100%; height: 100%; object-fit: contain; margin: 0; padding: 0; border: 0; }
@media (min-width: 576px) { .pf-preview { max-height: 280px; } }
.pf-blur { position: absolute; width: 144px; height: 144px; border-radius: 50%; background: rgba(197,160,40,0.1); filter: blur(40px); pointer-events: none; }
.pf-corner { position: absolute; width: 20px; height: 20px; }
.pf-corner.tl { top: 16px; left: 16px; border-top: 1px solid rgba(197,160,40,0.4); border-left: 1px solid rgba(197,160,40,0.4); border-top-left-radius: 4px; }
.pf-corner.tr { top: 16px; right: 16px; border-top: 1px solid rgba(197,160,40,0.4); border-right: 1px solid rgba(197,160,40,0.4); border-top-right-radius: 4px; }
.pf-corner.bl { bottom: 16px; left: 16px; border-bottom: 1px solid rgba(197,160,40,0.4); border-left: 1px solid rgba(197,160,40,0.4); border-bottom-left-radius: 4px; }
.pf-corner.br { bottom: 16px; right: 16px; border-bottom: 1px solid rgba(197,160,40,0.4); border-right: 1px solid rgba(197,160,40,0.4); border-bottom-right-radius: 4px; }
.pf-preview-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; z-index: 10; transition: transform 0.3s; width: 100%; height: 100%; margin: 0; padding: 0; }
.pf-card:hover .pf-preview-center { transform: scale(1.05); }
.pf-preview-ic { width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,0.85); border: 1px solid rgba(197,160,40,0.45); display: flex; align-items: center; justify-content: center; color: var(--gold); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3); animation: pulse 2s infinite; }
.pf-preview-ic .pf-ic { color: var(--gold-bright); width: 24px; height: 24px; }
.pf-preview-txt { display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.pf-preview-title { font-size: 10px; font-weight: 900; color: var(--gold-bright); letter-spacing: 0.05em; }
@media (min-width: 576px) { .pf-preview-title { font-size: 11px; } }
.pf-preview-sub { font-size: 8px; color: var(--gray-500); font-weight: 700; margin-top: 4px; }
.pf-ratio { position: absolute; bottom: 12px; left: 12px; background: rgba(0,0,0,0.9); border: 1px solid rgba(197,160,40,0.25); color: var(--gold-bright); font-size: 8px; font-family: var(--font-mono); padding: 2px 10px; border-radius: 8px; }
.pf-cat { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.9); border: 1px solid rgba(197,160,40,0.25); color: var(--gold-bright); font-size: 8px; font-weight: 800; padding: 2px 10px; border-radius: 8px; }
.pf-body { padding: 12px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; background: rgba(0,0,0,0.2); }
@media (min-width: 576px) { .pf-body { padding: 16px; } }
.pf-title { font-weight: 800; color: var(--gold); transition: color 0.2s; font-size: 11px; line-height: 1.6; text-align: right; margin-bottom: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (min-width: 576px) { .pf-title { font-size: 0.75rem; } }
.pf-card:hover .pf-title { color: #fff; }
.pf-code-box { position: relative; background: rgba(0,0,0,0.95); border: 1px solid var(--gray-950); border-radius: 12px; padding: 8px; text-align: left; direction: ltr; max-height: 48px; overflow: hidden; margin-bottom: 10px; }
@media (min-width: 576px) { .pf-code-box { max-height: 56px; } }
.pf-code { font-size: 8px; font-family: var(--font-mono); color: var(--gray-300); line-height: 1.3; display: block; user-select: all; }
@media (min-width: 576px) { .pf-code { font-size: 9px; } }
.pf-code-locked { position: absolute; inset: 0; background: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; user-select: none; pointer-events: none; }
.pf-code-locked span { font-size: 9px; color: var(--gray-500); font-weight: 700; line-height: 1.6; }
.pf-actions { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--gray-900); }
@media (min-width: 1280px) { .pf-actions { flex-direction: row; } }
.pf-copy { width: 100%; background: var(--gold); color: #000; font-weight: 800; padding: 6px 8px; border-radius: 8px; font-size: 10px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 4px; border: none; }
@media (min-width: 576px) { .pf-copy { font-size: 11px; } }
@media (min-width: 1280px) { .pf-copy { flex: 1; } }
.pf-copy:hover { background: var(--gold-bright); }
.pf-copy:active { transform: scale(0.95); }
.pf-load-wrap { display: flex; gap: 6px; width: 100%; }
@media (min-width: 1280px) { .pf-load-wrap { width: auto; } }
.pf-load { flex: 1; justify-content: center; background: #000; border: 1px solid var(--gray-800); color: var(--gray-400); padding: 6px 8px; border-radius: 8px; font-size: 9px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 4px; }
@media (min-width: 576px) { .pf-load { font-size: 10px; } }
@media (min-width: 1280px) { .pf-load { flex: none; } }
.pf-load:hover { border-color: var(--gold-bright); color: #fff; }
.pf-ic { width: 24px; height: 24px; }
.pf-ic-xs { width: 12px; height: 12px; }
.pf-ic-sm { width: 14px; height: 14px; }

/* =========================================================
   Video Generator (pT) + Copywriting (gT)
   ========================================================= */
.vg-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; width: 100%; max-width: 56rem; margin: 0 auto; }
@media (min-width: 768px) { .vg-grid { grid-template-columns: 7fr 5fr; } }
.vg-form { gap: 1.25rem; }

.cw-root { width: 100%; max-width: 56rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
.cw-tabs { width: 100%; overflow-x: auto; padding: 8px 4px 16px; display: flex; gap: 1rem; scroll-behavior: smooth; }
/* ✅ FIX: تب‌ها وقتی جا میشن وسط‌چین، وقتی سرریز میشن از ابتدا (راست RTL) شروع میشن */
@media (min-width: 768px) {
  .cw-tabs { justify-content: flex-start; }
  .cw-tab:first-child { margin-inline-start: auto; }
  .cw-tab:last-child  { margin-inline-end: auto; }
}
.cw-tab { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; background: none; border: none; }
.cw-tab-ring { width: 56px; height: 56px; border-radius: 50%; padding: 2px; transition: all 0.3s; }
@media (min-width: 768px) { .cw-tab-ring { width: 64px; height: 64px; } }
.cw-tab-inner { width: 100%; height: 100%; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; transition: transform 0.25s; }
@media (min-width: 768px) { .cw-tab-inner { font-size: 1.5rem; } }
.cw-tab:hover .cw-tab-inner { transform: scale(1.05); }
.cw-tab-label { font-size: 11px; font-weight: 700; transition: color 0.2s; }

.cw-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; min-width: 0; }
@media (min-width: 768px) { .cw-grid { grid-template-columns: 1fr 1fr; } }
.cw-form { gap: 1.25rem; }
.cw-form-head { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid rgba(197,160,40,0.1); }
.cw-form-head .ig-ic { color: var(--gold-bright); width: 20px; height: 20px; }
.cw-form-head h4 { font-weight: 700; font-size: 0.875rem; color: var(--gold); margin: 0; }
.cw-label { font-size: 0.75rem; color: var(--gray-400); font-weight: 700; }
.cw-output { font-size: 0.75rem; text-align: right; color: #e5e7eb; line-height: 1.85; max-height: none; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; width: 100%; max-width: 100%; min-width: 0; padding-left: 4px; }

/* =========================================================
   Archive / History manager (ST)
   ========================================================= */
.arc-root { width: 100%; max-width: 56rem; margin: 2rem auto 0; display: flex; flex-direction: column; gap: 1.25rem; border-top: 1px solid rgba(197,160,40,0.1); padding-top: 2.5rem; }
.arc-header { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 1rem; background: rgba(0,0,0,0.4); border: 1px solid rgba(197,160,40,0.15); border-radius: 16px; padding: 1.25rem; }
@media (min-width: 576px) { .arc-header { flex-direction: row; } }
.arc-header-left { display: flex; align-items: center; gap: 12px; color: var(--gold); }
.arc-header-ic { width: 40px; height: 40px; background: rgba(197,160,40,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.arc-header-ic .arc-ic { color: var(--gold-bright); width: 20px; height: 20px; }
.arc-header-title { font-weight: 800; font-size: 0.875rem; color: var(--gold-bright); margin: 0; }
.arc-header-sub { font-size: 10px; color: var(--gray-500); margin: 2px 0 0; }
.arc-header-actions { display: flex; gap: 10px; }
.arc-export { background: #000; border: 1px solid var(--gray-800); color: var(--gray-300); padding: 8px 16px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; transition: all 0.15s; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.arc-export:hover { background: var(--gray-900); }
.arc-clear { background: rgba(69,10,10,0.2); border: 1px solid rgba(127,29,29,0.4); color: #f87171; padding: 8px 16px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; transition: all 0.15s; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.arc-clear:hover { background: rgba(69,10,10,0.4); }
.arc-ic { width: 16px; height: 16px; }
.arc-ic.gold { color: var(--gold); }
.arc-ic.red { color: #ef4444; }
.arc-ic.spin { color: var(--gold-bright); animation: spin 1s linear infinite; }
.arc-ic-sm { width: 14px; height: 14px; }

.arc-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .arc-grid { grid-template-columns: 1fr 1fr; } }
/* ✅ FIX: کارت‌های آرشیو با ابعاد یکنواخت — عرض محدود، ارتفاع حداکثر با اسکرول */
.arc-card { background: var(--bg-panel); border: 1px solid var(--gray-900); border-radius: 16px; padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; transition: border-color 0.2s; animation: dirCardIn 0.2s ease; min-width: 0; max-width: 100%; overflow: hidden; }
.arc-card:hover { border-color: rgba(197,160,40,0.25); }
.arc-card-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--gray-900); margin-bottom: 10px; min-width: 0; }
.arc-time { font-size: 10px; color: var(--gray-500); font-family: var(--font-mono); flex-shrink: 0; }
.arc-type { font-size: 10px; font-weight: 700; padding: 4px 8px; border: 1px solid; border-radius: 9999px; display: flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap; }
.arc-type-image { color: #60a5fa; border-color: rgba(59,130,246,0.3); }
.arc-type-video { color: #fbbf24; border-color: rgba(245,158,11,0.3); }
.arc-type-content { color: #34d399; border-color: rgba(16,185,129,0.3); }
.arc-title { font-weight: 800; color: #fff; font-size: 0.75rem; text-align: right; margin-bottom: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
/* ✅ FIX: نتیجه آرشیو — عرض محدود به باکس، ارتفاع حداکثر با اسکرول داخلی، متن طولانی شکسته و اسکرول‌خور */
.arc-result { font-size: 11px; color: var(--gray-400); line-height: 1.7; text-align: right; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; user-select: all; padding: 10px; background: rgba(0,0,0,0.4); border-radius: 8px; border: 1px solid var(--gray-950); margin-bottom: 12px; max-height: 160px; overflow-y: auto; overflow-x: hidden; min-width: 0; }
.arc-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--gray-900); }
.arc-del { color: var(--gray-500); padding: 6px; border-radius: 6px; background: none; border: none; cursor: pointer; transition: all 0.15s; }
.arc-del:hover { color: #ef4444; background: #000; }
.arc-action { background: #000; color: var(--gold); border: 1px solid var(--gray-800); padding: 4px 12px; border-radius: 8px; font-size: 10px; font-weight: 700; display: flex; align-items: center; gap: 4px; transition: all 0.15s; cursor: pointer; }
.arc-action:hover { border-color: var(--gold); }
.arc-action:active { transform: scale(0.95); }
.arc-action:disabled { opacity: 0.5; cursor: not-allowed; }
.arc-empty { text-align: center; padding: 2.5rem 0; background: rgba(0,0,0,0.2); border: 1px dashed var(--gray-800); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.arc-empty-ic { width: 32px; height: 32px; color: var(--gray-600); }
.arc-empty p { font-size: 11px; color: var(--gray-500); margin: 0; }

/* =========================================================
   Wallet modal (full)
   ========================================================= */
.wallet-card { max-width: 460px; background: linear-gradient(to bottom, #0e0e11, #070708); border: 1px solid rgba(255,215,0,0.3); border-radius: 24px; padding: 28px; box-shadow: 0 25px 50px -12px rgba(255,215,0,0.1); }
.wallet-head { text-align: center; padding-bottom: 20px; border-bottom: 1px solid var(--gray-900); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wallet-head-ic { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,215,0,0.1); display: flex; align-items: center; justify-content: center; font-size: 1.875rem; }
.wallet-head h3 { font-size: 1rem; font-weight: 900; color: var(--gold-bright); margin: 0; letter-spacing: -0.02em; }
.wallet-head p { font-size: 10.5px; color: var(--gray-400); line-height: 1.7; max-width: 20rem; margin: 0; }
.wallet-stats { margin: 20px 0; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,215,0,0.2); border-radius: 16px; padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: center; }
.wallet-stat { display: flex; flex-direction: column; justify-content: center; }
.wallet-stat.bordered { border-left: 1px solid var(--gray-900); }
.wallet-stat-lbl { font-size: 10px; color: var(--gray-400); font-weight: 700; }
.wallet-stat-val { font-size: 1.25rem; font-family: var(--font-mono); font-weight: 900; margin-top: 4px; }
.wallet-stat-val.gold { color: var(--gold-bright); }
.wallet-stat-val.white { color: #fff; }
.wallet-stat-note { font-size: 8px; color: var(--gray-500); }
.wallet-packs { display: flex; flex-direction: column; gap: 12px; }
.wallet-packs-title { font-size: 11px; font-weight: 900; color: var(--gray-300); margin-bottom: 4px; }
.wallet-pack { background: #000; border: 1px solid var(--gray-900); border-radius: 16px; padding: 14px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all 0.15s; user-select: none; }
.wallet-pack:hover { border-color: rgba(255,215,0,0.6); background: rgba(255,215,0,0.05); }
.wallet-pack:active { transform: scale(0.98); }
.wallet-pack-left { display: flex; align-items: center; gap: 12px; }
.wallet-pack-ic { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(to top right, rgba(197,160,40,0.1), rgba(120,53,15,0.3)); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; color: var(--gold-bright); transition: transform 0.15s; }
.wallet-pack:hover .wallet-pack-ic { transform: scale(1.05); }
.wallet-pack-title { font-size: 0.75rem; font-weight: 900; color: #fff; display: block; }
.wallet-pack-count { font-size: 10px; color: var(--gold-bright); display: block; margin-top: 2px; font-weight: 700; font-family: var(--font-mono); }
.wallet-pack-right { text-align: left; }
.wallet-pack-price { background: rgba(255,215,0,0.1); border: 1px solid rgba(255,215,0,0.25); color: var(--gold-bright); padding: 4px 12px; border-radius: 8px; font-size: 10px; font-weight: 900; font-family: var(--font-mono); transition: all 0.15s; display: block; margin-bottom: 4px; text-align: center; }
.wallet-pack:hover .wallet-pack-price { background: var(--gold-bright); color: #000; }
.wallet-pack-bonus { font-size: 8px; color: var(--gold-bright); display: block; text-align: center; font-weight: 700; }

/* =========================================================
   cntrlz-manager: فرم ورود وردپرس داخل مودال ترمینال
   ========================================================= */
.wp-login-slot { min-height: 120px; }
.wp-login-slot input[type="text"],
.wp-login-slot input[type="tel"],
.wp-login-slot input[type="email"],
.wp-login-slot input[type="password"],
.wp-login-slot input[type="number"] {
  width: 100% !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--gray-800, #2a2a30) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  font-family: inherit !important;
  font-size: 0.8rem !important;
  box-shadow: none !important;
  margin-bottom: 10px;
}
.wp-login-slot input:focus { border-color: var(--gold, #c5a028) !important; outline: none !important; }
.wp-login-slot label { color: var(--gray-300, #ccc) !important; font-size: 0.75rem; font-weight: 700; display: block; margin-bottom: 6px; }
.wp-login-slot button[type="submit"],
.wp-login-slot input[type="submit"],
.wp-login-slot .button,
.wp-login-slot .digits-lite-btn, .wp-login-slot .dig_lite_button {
  width: 100% !important;
  background: linear-gradient(135deg, #ffd700, #c5a028) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 12px !important;
  font-weight: 900 !important;
  font-family: inherit !important;
  font-size: 0.8rem !important;
  cursor: pointer !important;
  margin-top: 6px;
}
.wp-login-slot button[type="submit"]:hover,
.wp-login-slot input[type="submit"]:hover { filter: brightness(1.08); }
.wp-login-slot a { color: var(--gold-bright, #ffd700) !important; font-size: 0.7rem; }
.wp-login-slot p, .wp-login-slot span, .wp-login-slot div { color: var(--gray-300, #ccc); font-size: 0.75rem; }
.wp-login-slot .error, .wp-login-slot .digits-lite-error { color: #f87171 !important; font-size: 0.7rem; }

/* =========================================================
   Mobile-only shell / drawer refinement
   ========================================================= */
.mobile-topbar,
.mobile-menu-btn,
.mobile-menu-close,
.sidebar-mobile-overlay { display: none; }

.sidebar-brand-main { min-width: 0; }

@media (max-width: 991.98px) {
  .cntrlz-wrap {
    min-height: 100svh;
    background: #000;
  }

  .app-root,
  .app-shell {
    min-height: 100svh;
  }

  .sidebar {
    position: fixed;
    inset: 0;
    z-index: 1045;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
  }

  .sidebar-mobile-overlay {
    display: block;
    position: absolute;
    inset: 0;
    border: 0;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.72);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }

  .sidebar-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(82vw, 320px);
    background: linear-gradient(180deg, #0b0b0d 0%, #09090b 100%);
    border-left: 1px solid rgba(197,160,40,0.18);
    box-shadow: -20px 0 60px rgba(0,0,0,0.55);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    transform: translateX(106%);
    transition: transform .24s cubic-bezier(.2,.8,.2,1);
    pointer-events: auto;
  }

  .sidebar.mobile-open {
    pointer-events: auto;
  }

  .sidebar.mobile-open .sidebar-mobile-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar.mobile-open .sidebar-drawer {
    transform: translateX(0);
  }

  .mobile-menu-close {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(90,110,140,0.28);
    background: #11131a;
    color: #8f9ab0;
    font-size: 1.15rem;
    cursor: pointer;
    flex-shrink: 0;
  }

  .sidebar .mobile-controls {
    display: none;
  }

  .brand-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: 1rem;
    margin-bottom: .75rem;
  }

  .brand-title {
    font-size: 1.05rem;
  }

  .brand-sub {
    font-size: .68rem;
  }

  .nav-list {
    margin-top: 1rem;
    gap: .55rem;
  }

  .nav-btn {
    padding: .85rem .9rem;
    border-radius: 14px;
  }

  .nav-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .nav-label {
    font-size: .82rem;
  }

  .nav-sub {
    font-size: .64rem;
  }

  .side-extra {
    margin-top: 1.25rem;
  }

  .side-status {
    margin-top: 1.25rem;
  }

  .main-area {
    width: 100%;
    padding: .35rem .45rem .9rem;
    gap: .8rem;
    overflow-x: hidden;
  }

  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    padding: .55rem .55rem .7rem;
    background: #111;
    border: 1px solid rgba(197,160,40,0.14);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 16px 30px rgba(0,0,0,.35);
  }

  .mobile-topbar-left {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
  }

  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255,215,0,0.42);
    background: #111;
    color: var(--gold-bright);
    font-size: 1.4rem;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(255,215,0,0.08);
    cursor: pointer;
    flex-shrink: 0;
  }

  .mobile-auth-chip,
  .mobile-coin-chip {
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255,215,0,0.2);
    background: #151515;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0 .75rem;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .mobile-auth-chip.logged {
    cursor: default;
    color: var(--gray-300);
  }

  .mobile-auth-ic {
    width: 14px;
    height: 14px;
    color: var(--gold-bright);
  }

  .mobile-coin-chip {
    color: #fff7c8;
  }

  .mobile-coin-count {
    font-family: var(--font-mono);
  }

  .mobile-coin-ic {
    font-size: .85rem;
  }

  .mobile-topbar-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    margin-right: auto;
  }

  .mobile-topbar-brandtxt {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
  }

  .mobile-topbar-title {
    color: var(--gold-bright);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
  }

  .mobile-topbar-sub {
    color: var(--gray-500);
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
  }

  .mobile-topbar-logo {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid rgba(255,215,0,0.48);
    background: linear-gradient(135deg, rgba(255,215,0,0.12), rgba(255,140,0,0.08));
    color: var(--gold-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(255,215,0,.08);
  }

  .page-header {
    padding: .8rem 1rem;
    border-radius: 18px;
    gap: .45rem;
    min-height: 88px;
    justify-content: center;
  }

  .page-header::before {
    width: 42%;
    height: 100%;
    left: auto;
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(197,160,40,0.06));
  }

  .page-header .header-actions {
    display: none;
  }

  .page-header > div:first-child {
    width: 100%;
    text-align: center !important;
    position: relative;
    z-index: 1;
  }

  .page-title {
    justify-content: center;
    font-size: 1.35rem;
  }

  .page-desc {
    display: none;
  }

  .guest-banner {
    border-radius: 18px;
    padding: .9rem;
  }

  .locked-box,
  .placeholder-card,
  .ig-panel,
  .ig-output-card,
  .dir-card,
  .pf-card,
  .arc-card,
  .toast-card,
  .wallet-card,
  .support-modal-card,
  .login-card {
    border-radius: 18px;
  }

  .coin-chip,
  .guest-chip,
  .user-chip {
    max-width: 100%;
  }
}

@media (min-width: 992px) {
  .sidebar-mobile-overlay,
  .mobile-menu-close,
  .mobile-topbar {
    display: none !important;
  }

  .sidebar-drawer {
    position: static;
    transform: none !important;
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: visible;
  }
}


/* =========================================================
   Mobile refinement v2
   ========================================================= */
@media (max-width: 991.98px) {
  .main-area {
    padding: .35rem .35rem 1rem;
    gap: .75rem;
  }

  .mobile-topbar {
    direction: rtl;
    padding: .55rem .6rem .65rem;
    gap: .55rem;
    border-radius: 0 0 20px 20px;
  }

  .mobile-topbar-brand {
    margin-right: 0;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-start;
  }

  .mobile-topbar-actions {
    display: flex;
    align-items: center;
    gap: .42rem;
    direction: ltr;
    flex-shrink: 0;
  }

  .mobile-topbar-title {
    font-size: .95rem;
  }

  .mobile-topbar-sub {
    font-size: .6rem;
  }

  .mobile-topbar-logo {
    width: 36px;
    height: 36px;
    font-size: .95rem;
  }

  .mobile-menu-btn,
  .mobile-auth-chip,
  .mobile-coin-chip {
    height: 40px;
    border-radius: 12px;
  }

  .mobile-menu-btn {
    width: 40px;
    height: 40px;
    font-size: 1.35rem;
  }

  .mobile-auth-chip,
  .mobile-auth-chip.logged,
  .mobile-coin-chip {
    padding: 0 .7rem;
    font-size: .76rem;
  }

  .mobile-auth-chip {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-auth-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-header,
  .guest-banner,
  .ig-panel,
  .ig-output-card,
  .placeholder-card,
  .locked-box,
  .dir-card,
  .pf-card,
  .arc-card,
  .wallet-card,
  .support-modal-card,
  .login-card,
  .toast-card {
    width: 100%;
  }

  .ig-root,
  .vg-grid,
  .cw-root,
  .dir-root,
  .pf-root,
  .arc-root {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .ig-grid,
  .vg-grid,
  .cw-grid,
  .dir-top,
  .pf-top,
  .arc-grid,
  .ig-row2,
  .cz-row,
  .cz-row-3 {
    grid-template-columns: 1fr !important;
  }

  .ig-field,
  .ig-field input,
  .ig-field textarea,
  .ig-field select,
  .ig-btn-gold,
  .ig-btn-outline,
  .ig-btn-copy,
  .ig-btn-download,
  .dir-search,
  .pf-search,
  .btn-gold,
  .btn-dark {
    width: 100%;
  }

  .ig-actions {
    flex-direction: column;
  }

  .page-content {
    width: 100%;
  }

  .ig-panel {
    padding: 1.1rem .95rem;
  }

  .ig-output-card {
    min-height: 280px;
    padding: 1rem;
  }

  .pf-preview {
    padding: 0;
    max-height: 200px;
  }
  
  /* ✅ FIX v7: موبایل - نسبت‌های متناسب + max-height + contain */
  .pf-preview-img-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: #0c0c0d;
  }
  .pf-preview-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .cw-tabs {
    gap: .7rem;
    padding: .35rem .15rem .85rem;
  }

  .cw-tab-ring {
    width: 54px;
    height: 54px;
  }

  .arc-root {
    margin-top: 1rem;
    padding-top: 1rem;
  }
}

.side-status { display: none !important; }

/* =========================================================
   Mobile refinement v3
   ========================================================= */
@media (max-width: 991.98px) {
  .cntrlz-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow-x: hidden;
    background: #050505;
  }

  .app-root,
  .app-shell,
  .main-area {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .main-area {
    padding: 0 10px 16px !important;
    gap: 12px !important;
  }

  .mobile-topbar {
    direction: ltr;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 8px 10px 10px;
    gap: 8px;
    border-radius: 0 0 24px 24px;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .mobile-topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    min-width: 0;
  }

  .mobile-topbar-brand {
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }

  .mobile-topbar-logo {
    order: 1;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    flex: 0 0 42px;
  }

  .mobile-topbar-brandtxt {
    order: 2;
    min-width: 0;
    flex: 1 1 auto;
    align-items: flex-end;
  }

  .mobile-topbar-title,
  .mobile-topbar-sub {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-menu-btn {
    order: 1;
    width: 42px;
    min-width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  .mobile-auth-chip,
  .mobile-auth-chip.logged,
  .mobile-coin-chip {
    height: 42px;
    min-width: 0;
    flex: 0 1 auto;
  }

  .mobile-auth-chip {
    order: 2;
    max-width: 110px;
  }

  .mobile-coin-chip {
    order: 3;
    padding-inline: 10px;
  }

  .page-header,
  .guest-banner,
  .placeholder-card,
  .locked-box,
  .ig-panel,
  .ig-output-card,
  .dir-root,
  .pf-root,
  .cw-root,
  .arc-root,
  .ig-root,
  .vg-grid,
  .cw-grid,
  .dir-top,
  .pf-top {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .page-header,
  .guest-banner,
  .placeholder-card,
  .locked-box,
  .ig-panel,
  .ig-output-card,
  .dir-card,
  .pf-card,
  .arc-card {
    box-sizing: border-box;
  }

  .ig-grid,
  .vg-grid,
  .cw-grid,
  .dir-top,
  .pf-top,
  .arc-grid,
  .ig-row2,
  .ig-stats,
  .ig-presets-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .ig-row2 > .ig-field,
  .ig-stats > *,
  .ig-presets-grid > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  .ig-row2 {
    gap: 14px !important;
  }

  .ig-input,
  .ig-select,
  .dir-search,
  .pf-search,
  .ig-btn-gold,
  .ig-btn-outline,
  .ig-btn-copy,
  .ig-btn-download,
  .btn-gold,
  .btn-dark,
  .coin-chip,
  .guest-chip,
  .user-chip {
    width: 100% !important;
    max-width: 100% !important;
  }

  .ig-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .page-header {
    min-height: 92px;
    padding: 14px 16px;
  }

  .page-title {
    font-size: 1.22rem;
    text-align: center;
  }

  .dir-grid,
  .pf-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   Mobile refinement v4
   ========================================================= */
textarea.ig-autogrow {
  resize: none !important;
  overflow: hidden !important;
  line-height: 1.8;
  min-height: 56px;
}

@media (max-width: 991.98px) {
  .mobile-topbar-brand {
    justify-content: flex-end;
    gap: 6px;
  }

  .mobile-topbar-brandtxt {
    flex: 0 1 auto;
    min-width: 0;
  }

  .mobile-topbar-title {
    font-size: .92rem;
  }

  .mobile-topbar-sub {
    font-size: .58rem;
  }

  .mobile-coin-chip {
    min-width: 72px;
    justify-content: center;
  }

  .mobile-coin-count {
    direction: ltr;
    font-size: .78rem;
  }

  textarea.ig-autogrow {
    min-height: 56px;
  }
}

/* =========================================================
   Mobile refinement v5 - brand block right align
   ========================================================= */
@media (max-width: 991.98px) {
  .mobile-topbar-brand {
    direction: rtl;
    justify-content: flex-end !important;
    text-align: right;
  }

  .mobile-topbar-logo {
    order: 0 !important;
    margin-right: 0;
    margin-left: 2px;
  }

  .mobile-topbar-brandtxt {
    order: 0 !important;
    align-items: flex-end !important;
    text-align: right;
  }
}

/* =========================================================
   Mobile refinement v6 - force brand block to far right
   ========================================================= */
@media (max-width: 991.98px) {
  .mobile-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    direction: ltr !important;
  }

  .mobile-topbar-actions {
    order: 1 !important;
    flex: 0 0 auto !important;
    margin-right: auto !important;
    margin-left: 0 !important;
  }

  .mobile-topbar-brand {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    direction: ltr !important;
    text-align: right !important;
  }

  .mobile-topbar-brandtxt {
    order: 1 !important;
    flex: 0 1 auto !important;
    align-items: flex-end !important;
    text-align: right !important;
    min-width: 0 !important;
  }

  .mobile-topbar-logo {
    order: 2 !important;
    flex: 0 0 42px !important;
    margin: 0 !important;
  }
}

/* =========================================================
   Mobile drawer header swap
   ========================================================= */
@media (max-width: 991.98px) {
  .sidebar .brand-row {
    direction: ltr !important;
  }

  .sidebar .brand-row .mobile-menu-close {
    order: 1 !important;
    margin-right: auto !important;
    margin-left: 0 !important;
  }

  .sidebar .brand-row .sidebar-brand-main {
    order: 2 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: right !important;
  }

  .sidebar .brand-row .sidebar-brand-main > div:last-child {
    text-align: right !important;
  }
}

/* =========================================================
   AI Directory cards: 2 columns per row
   ========================================================= */
@media (max-width: 991.98px) {
  .dir-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .dir-card {
    min-width: 0;
  }
}


/* =========================================================
   Media Lab section
   ========================================================= */
.cntrlz-media-lab-wrap {
  width: 100%;
  max-width: 100%;
  background: transparent;
}
.cntrlz-media-lab-frame {
  width: 100%;
  min-height: 100px;
  height: 100px;
  border: 1px solid rgba(197,160,40,0.15);
  border-radius: 20px;
  background: #050505;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
@media (max-width: 991.98px) {
  .cntrlz-media-lab-frame {
    min-height: 100px;
    height: 100px;
    border-radius: 18px;
  }
}

.ig-output.scrollable { max-height: 260px; overflow-y: auto; overflow-x: hidden; padding-left: 8px; }
.cw-output.scrollable { max-height: 260px; overflow-y: auto; overflow-x: hidden; padding-left: 8px; }