/* =========================
   Fonts (place files in /fonts)
   ========================= */
@font-face{
  font-family:'IRANSans';
  src:url('/fonts/IRANSansWeb_Medium.woff2') format('woff2'),
      url('/fonts/IRANSansWeb_Medium.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IRANSans';
  src:url('/fonts/IRANSansWeb_Bold.woff2') format('woff2'),
      url('/fonts/IRANSansWeb_Bold.woff') format('woff');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IRANSansX';
  src:url('/fonts/IRANSansX.woff2') format('woff2'),
      url('/fonts/IRANSansX.woff') format('woff');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* =========================
   Theme Tokens
   ========================= */
:root{
  /* palette */
  --bg:#eef2f7;            --surface:#fbfdff;
  --card:#fff;             --text:#0f172a;
  --subtext:#1f2937;       --muted:#6b7280;
  --border:#e5e7eb;        --border-2:#d9e0ea;
  --accent:#7c3aed;        --accent-2:#a78bfa; --accent-3:#6d28d9;

  /* radii & shadow */
  --r-lg:20px; --r-md:12px; --r-sm:10px;
  --shadow:0 12px 34px rgba(16,24,40,.08), 0 6px 16px rgba(16,24,40,.06);
  --shadow-sm:0 8px 22px rgba(16,24,40,.07), 0 3px 10px rgba(16,24,40,.05);

  /* spacing */
  --s-1:6px; --s-2:8px; --s-3:10px; --s-4:12px; --s-5:14px; --s-6:16px; --s-7:18px;

  /* type scale */
  --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-20:20px;

  /* timings */
  --t-fast:.15s ease; --t:.2s ease; --t-slow:.35s ease;
}

/* Dark theme (opt-in via body[data-theme="dark"]) */
body[data-theme="dark"]{
  --bg:#0b1020; --surface:#0b1220; --card:#0f1426;
  --text:#e6e9f2; --subtext:#f1f5f9; --muted:#9aa4b2;
  --border:#1a2440; --border-2:#223055;
  --shadow:0 12px 34px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.3);
}

/* =========================
   Base Reset (ultra-compact)
   ========================= */
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%; width:100%}
html{scroll-behavior:smooth}
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'IRANSansX', 'IRANSans', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* -moz-osx-font-smoothing: grayscale; */ /* بسته شد! */
}
/* global transitions (reduced-motion safe) */
*{transition:background var(--t), color var(--t), border-color var(--t)}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }

/* Scrollbar */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px;border:2px solid #f1f5f9}
*::-webkit-scrollbar-thumb:hover{background:#b6c2d2}
*::-webkit-scrollbar-track{background:#f1f5f9;border-radius:999px}

/* =========================
   Layout
   ========================= */
.app{display:grid; grid-template-columns:220px 1fr; min-height:100vh; overflow-x:hidden}
.main{padding:var(--s-6); overflow-x:hidden}
.full{grid-column:1/-1}

/* Sidebar */
.sidebar{
  background:linear-gradient(180deg,#f6f7fb,#f2f5fb);
  border-inline-start:0; border-inline-end:1px solid var(--border);
  padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-3); overflow-y:auto
}
.side-nav{display:flex; flex-direction:column; gap:var(--s-2)}
.logo{
  width:48px; height:48px; border-radius:14px; margin-block-end:4px; flex-shrink:0;
  display:grid; place-items:center; color:#fff; font-weight:900; letter-spacing:.3px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:var(--shadow-sm)
}
.spacer{flex:1}

/* Topbar */
.topbar{display:flex; gap:var(--s-3); align-items:center; justify-content:space-between; flex-wrap:wrap; margin-block-end:var(--s-6)}
.sticky{position:sticky; inset-block-start:0; z-index:50}
.brand{font-weight:800; color:var(--subtext); font-size:var(--fs-18)}
.actions,.btn-group{display:flex; gap:var(--s-2); align-items:center; flex-wrap:wrap}

/* Grid */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px}
.col{display:flex; flex-direction:column; gap:var(--s-3)}
h3{margin-block-end:var(--s-3); color:#111827}
.row{display:grid; gap:var(--s-3)}
.row.two{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.row.three{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.row.four{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* =========================
   Cards & Blocks
   ========================= */
.card{
  background:var(--card); border:1px solid #ecf0f6; border-radius:var(--r-lg);
  padding:var(--s-6); box-shadow:var(--shadow)
}
.soft{background:linear-gradient(180deg,#fff,var(--surface))}
.mini{
  background:#fff; border:1px solid #eceff5; border-radius:var(--r-md);
  padding:var(--s-4); display:flex; flex-direction:column; gap:var(--s-2)
}
.mini-lbl{font-size:var(--fs-12); color:#475569; font-weight:600}
.mini-row{display:flex; gap:var(--s-2); align-items:center; flex-wrap:wrap}
.section-inner{margin-block:10px 2%}

/* =========================
   Buttons
   ========================= */
.btn{
  border:1px solid var(--border); background:#fff; color:#111827;
  border-radius:var(--r-md); padding:12px 16px; font-weight:600; cursor:pointer;
  transition:transform var(--t), box-shadow var(--t), background var(--t); white-space:nowrap
}
.btn:hover{background:#f3f4f6; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid #d8ccff; outline-offset:2px}
.btn.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border:none;
  box-shadow:0 6px 16px rgba(124,58,237,.25)
}
.btn.primary:hover{filter:brightness(.98)}
.btn.ghost{border:1px dashed #d1d5db; background:transparent}

.pill{
  border:none; border-radius:999px; padding:10px 14px; white-space:nowrap;
  background:linear-gradient(180deg,#fff,#f8faff); box-shadow:var(--shadow-sm);
  font-weight:600; cursor:pointer; transition:transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast)
}
.pill:hover{transform:translateY(-1px)}
.pill:focus-visible{outline:3px solid #d8ccff; outline-offset:2px}
.pill.outline{background:transparent; border:1px dashed #cbd5e1; box-shadow:none}
.pill.tiny{padding:6px 10px; font-size:var(--fs-12)}
.pill.danger{background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca}

/* =========================
   Forms
   ========================= */
.field{display:flex; flex-direction:column; gap:6px}
.field>span{color:#475569; font-size:var(--fs-13); font-weight:600}

input,select{
  width:100%; background:#fff; color:var(--text);
  border:1px solid var(--border-2); border-radius:var(--r-md); padding:12px;
  transition:border-color var(--t), box-shadow var(--t), background var(--t)
}
input:focus,select:focus{outline:none; border-color:#c7b8ff; box-shadow:0 0 0 3px rgba(167,139,250,.25)}
select{
  appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%, #9aa4b2 50%),
    linear-gradient(135deg, #9aa4b2 50%, transparent 50%);
  background-position:calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.colorfield .color-wrap{display:grid; grid-template-columns:1fr 52px; gap:var(--s-2)}
input[type=color]{width:52px; height:44px; padding:0; cursor:pointer; border-radius:var(--r-md); border:1px solid var(--border-2)}

.checkline{display:flex; align-items:center; gap:8px}
.inline-help{display:flex; align-items:center; gap:10px}

/* =========================
   Links, Previews, Code
   ========================= */
.link{margin-top:6px; font-size:var(--fs-12); color:var(--accent-3); text-decoration:none; font-weight:700}
.link:hover{text-decoration:underline}

.preview-box{
  width:100%; aspect-ratio:3/4; display:grid; place-items:center; overflow:hidden;
  border:1px dashed var(--border); border-radius:16px; background:#fafbff
}
.preview-box.tall{aspect-ratio:3/4}
.preview-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s-3); margin-top:var(--s-2)}

.imgbox{
  width:100%; aspect-ratio:4/3; overflow:hidden; border-radius:14px;
  border:1px dashed var(--border); background:#f9fbff
}
.imgbox img,.preview-box img{width:100%; height:100%; object-fit:cover; display:block}

.toolbar{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-bottom:10px}
.code{
  background:#0f172a; color:#e2e8f0; border:1px solid #0b1220; border-radius:16px;
  padding:14px; white-space:pre-wrap; max-height:480px; overflow:auto; scrollbar-width:thin;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace
}
/* styles.css - اضافه کردن این استایل‌ها */
.custom-prompt-box {
    background: var(--surface);
    padding: 15px;
    border-radius: var(--r-md);
    margin: 15px 0;
    border: 1px solid var(--border);
}

.modal {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: none;
}

.modal-content {
    background-color: var(--card);
    margin: 5% auto;
    padding: 20px;
    border-radius: var(--r-lg);
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
}

.close {
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: var(--muted);
}

.close:hover {
    color: var(--text);
}

.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
}

.tab-btn {
    padding: 10px 15px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    border-radius: var(--r-md);
    transition: all var(--t);
}

.tab-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.standard-item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
    padding: 10px;
    background: var(--surface);
    border-radius: var(--r-md);
}

.standard-item input {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--card);
}

.standard-item button {
    padding: 8px 12px;
    background: var(--danger);
    color: white;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
}
/* =========================
   Utilities
   ========================= */
.stack{display:grid; gap:var(--s-2)}
.hide{display:none !important}
.only-mobile{display:none}
.brand small{color:var(--muted); font-weight:500}
/* استایل‌های مودال و تب‌ها */
.modal {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: none;
}

.modal-content {
    background-color: var(--card);
    margin: 5% auto;
    padding: 20px;
    border-radius: var(--r-lg);
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
}

.close {
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: var(--muted);
}

.close:hover {
    color: var(--text);
}

.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
}

.tab-btn {
    padding: 10px 15px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    border-radius: var(--r-md);
    transition: all var(--t);
}

.tab-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.standard-item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
    padding: 10px;
    background: var(--surface);
    border-radius: var(--r-md);
}

.standard-item input {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--card);
}

.standard-item button {
    padding: 8px 12px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
}

.modal-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.custom-prompt-box {
    background: var(--surface);
    padding: 15px;
    border-radius: var(--r-md);
    margin: 15px 0;
    border: 1px solid var(--border);
}
/* =========================
   Responsive (≤1100px)
   ========================= */
@media (max-width:1100px){
  .grid{grid-template-columns:1fr}
  .app{grid-template-columns:1fr}
  .only-mobile{display:inline-flex}
  .sidebar{
    position:fixed; inset-block:0; inset-inline-start:0; width:260px; z-index:60;
    transform:translateX(0); transition:transform var(--t);
  }
  .sidebar.hide{transform:translateX(110%)}
}

/* استایل‌های مودال و تب‌ها */
.modal {
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: none;
}

.modal-content {
    background-color: var(--card);
    margin: 5% auto;
    padding: 20px;
    border-radius: var(--r-lg);
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
}

.close {
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: var(--muted);
}

.close:hover {
    color: var(--text);
}

.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
}

.tab-btn {
    padding: 10px 15px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    border-radius: var(--r-md);
    transition: all var(--t);
}

.tab-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.standard-item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
    padding: 10px;
    background: var(--surface);
    border-radius: var(--r-md);
}

.standard-item input {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--card);
}

.standard-item button {
    padding: 8px 12px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
}

.modal-actions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.custom-prompt-box {
    background: var(--surface);
    padding: 15px;
    border-radius: var(--r-md);
    margin: 15px 0;
    border: 1px solid var(--border);
}
/* =========================
   PromptMaker – Unified Styles v9.0
   فیکس شده، تمیز، Dark Mode کامل، Mobile-First
   ========================= */

@font-face{
  font-family:'IRANSans';
  src:url('/fonts/IRANSansWeb_Medium.woff2') format('woff2'),
      url('/fonts/IRANSansWeb_Medium.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IRANSans';
  src:url('/fonts/IRANSansWeb_Bold.woff2') format('woff2'),
      url('/fonts/IRANSansWeb_Bold.woff') format('woff');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IRANSansX';
  src:url('/fonts/IRANSansX.woff2') format('woff2'),
      url('/fonts/IRANSansX.woff') format('woff');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ========================= Theme Tokens ========================= */
:root{
  --bg:#eef2f7; --surface:#fbfdff; --card:#fff; --text:#0:#0f172a; --text:#1e293b;
  --subtext:#475569; --muted:#94a3b8; --border:#e2e8f0; --border-2:#cbd5e1;
  --accent:#7c3aed; --accent-hover:#6d28d9; --accent-light:#a78bfa;
  --danger:#dc2626; --success:#16a34a;

  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --shadow:0 12px 34px rgba(16,24,40,.08),0 6px 16px rgba(16,24,40,.06);
  --shadow-lg:0 20px 50px rgba(0,0,0,.12);
  --shadow-sm:0 4px 12px rgba(0,0,0,.08);

  --s-1:6px; --s-2:10px; --s-3:14px; --s-4:18px; --s-5:24px; --s-6:32px;
  --t:.22s ease;
}

/* Dark Mode */
body[data-theme="dark"]{
  --bg:#0f172a; --surface:#1e293b; --card:#1e293b; --text0:#f8fafc; --text:#e2e8f0;
  --subtext:#cbd5e1; --muted:#64748b; --border:#334155; --border-2:#475569;
  --accent:#a78bfa; --accent-hover:#c4b5fd; --accent-light:#ddd6fe;
}

body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:'IRANSansX','IRANSans',system-ui,sans-serif;
  direction:rtl;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

/* بقیه استایل‌ها (تب‌ها، کارت‌ها، toolbar، مودال و ...) دقیقاً مثل قبل اما بدون باگ */
.app{display:flex; flex:1; position:relative;}
.sidebar{width:280px; background:var(--card); box-shadow:var(--shadow); height:100vh; position:sticky; top:0; overflow-y:auto; transition:var(--t);}
.sidebar.hide{transform:translateX(-100%);}
.main{flex:1; padding:20px; max-width:1400px; margin:0 auto; width:100%;}

.fixed-toolbar{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--card); padding:12px 28px; border-radius:50px;
  box-shadow:var(--shadow-lg); z-index:1000; display:flex; gap:12px;
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
}

.nav-btn{
  padding:14px 20px; background:none; border:none; width:100%; text-align:right;
  border-radius:var(--r-md); cursor:pointer; transition:var(--t); font-weight:500;
}
.nav-btn:hover{background:var(--accent-light,0.15);}
.nav-btn.active{background:var(--accent); color:#fff;}

.section-container{display:none;}
.section-container.active{display:block;}

.card{background:var(--card); border-radius:var(--r-lg); padding:24px; margin-bottom:24px;
  box-shadow:var(--shadow-sm); border:1px solid var(--border);}

.field{margin-bottom:16px;}
.field label{display:block; margin-bottom:8px; font-weight:600; color:var(--text);}
.field input,.field select,.field textarea{
  width:100%; padding:12px 16px; border:1px solid var(--border-2);
  border-radius:var(--r-md); background:var(--surface); color:var(--text);
  font-family:inherit;
}
.field textarea{min-height:100px; resize:vertical;}

.btn-primary{
  background:var(--accent); color:#fff; border:none; padding:12px 24px;
  border-radius:var(--r-md); cursor:pointer; font-weight:600; transition:var(--t);
}
.btn-primary:hover{background:var(--accent-hover);}

/* مودال OTP و تنظیمات */
#otpModal{
  position:fixed; inset:0; background:rgba(15,23,42,.7); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; z-index:9999;
}
#otpModal > div{
  background:var(--card); border-radius:16px; width:92%; max-width:420px;
  box-shadow:var(--shadow-lg); overflow:hidden;
}
#otpModal h3{margin:0; padding:18px 24px; border-bottom:1px solid var(--border); font-size:18px;}

/* Dark/Light Switch */
.theme-toggle{
  position:fixed; top:20px; left:20px; z-index:9999; background:var(--card);
  padding:10px; border-radius:50%; box-shadow:var(--shadow); cursor:pointer;
}

/* Responsive */
@media (max-width:1100px){
  .app{flex-direction:column;}
  .sidebar{position:fixed; top:0; left:0; width:100%; height:100%; z-index:999;
    transform:translateX(-100%); transition:var(--t); background:var(--card);}
  .sidebar.show{transform:translateX(0);}
  #btnToggleSidebar{display:block !important;}
  .main{padding:20px 15px;}
}
/* خط 67 */
body {
    background: var(--bg); 
    color: var(--text);
    display: flex; 
    flex-direction: column; 
    min-height: 100vh;
    font-family: 'IRANSansX', 'IRANSans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6; 
    -webkit-font-smoothing: antialiased;
    /* حذف -moz-osx-font-smoothing */
}

/* خط 76 - اگر مشکل در سلکتور است */
/* احتمالاً مشکل در media query است */
@media (max-width: 1100px) {
    .grid {
        grid-template-columns: 1fr;
    }
    /* بقیه استایل‌ها */
}