@font-face{
  font-family:'IRANSansDN';
  src:url('../font/IRANSansDN.woff') format('woff'),
      url('../font/IRANSansDN.ttf') format('truetype'),
      url('../font/IRANSansDN.eot') format('embedded-opentype'),
      url('../font/IRANSansDN.otf') format('opentype'),
      url('../font/IRANSansDN.svg#IRANSansDN') format('svg');
  font-weight:normal;font-style:normal;font-display:swap;
}

/* Light (default) */
:root{
  --bg:#f8fafc; --panel:#ffffff; --muted:#64748b; --text:#0f172a;
  --brand:#22c55e; --brandtxt:#052e16; --ring:#06b6d4; --red:#ef4444; --green:#16a34a;
  --border:#e2e8f0; --soft:#f1f5f9; --link:#0369a1;
}
/* Dark */
html[data-theme="dark"]{
  --bg:#0f172a; --panel:#111827; --muted:#94a3b8; --text:#e2e8f0;
  --brand:#22c55e; --brandtxt:#052e16; --ring:#2dd4bf; --red:#ef4444; --green:#22c55e;
  --border:#334155; --soft:#0b1220; --link:#93c5fd;
}

*{box-sizing:border-box}
html{direction:rtl}
body{margin:0;background:var(--bg);color:var(--text);font-family:IRANSansDN,tahoma,arial}
button,input,textarea{font-family:inherit}

/* Layout */
.container{max-width:1024px;margin:24px auto;padding:16px}
.card{background:var(--panel);border-radius:18px;padding:16px;border:1px solid var(--border);box-shadow:0 10px 24px rgba(0,0,0,.06)}
.header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.centered{display:flex;justify-content:center}
.divider{height:10px}

/* THEME SWITCH */
.theme-switch{width:74px;height:36px;border-radius:999px;padding:4px;position:relative;cursor:pointer;
  background:linear-gradient(135deg,#7c3aed,#3b82f6);box-shadow:0 6px 14px rgba(0,0,0,.25);
  display:inline-flex;align-items:center;justify-content:space-between}
.theme-switch .icon{width:18px;height:18px;display:block;opacity:.9;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.theme-switch .knob{position:absolute;top:3px;left:3px;width:30px;height:30px;border-radius:999px;background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.35);transform:translateX(0);transition:transform .2s ease}
html[data-theme="dark"] .theme-switch .knob{transform:translateX(38px)}

/* Logo + Title */
.logo{display:flex;justify-content:center}
.logo img{max-width:160px;height:auto;display:block;margin:0 auto}
.site-title{margin-top:8px;text-align:center;font-size:28px;font-weight:700}

/* Form */
.input-wrap{margin-top:12px}
input[type=text]{width:100%;padding:14px;border-radius:12px;border:2px solid var(--border);
  background:var(--soft);color:var(--text);font-size:16px;text-align:left;direction:ltr}
.btn{padding:12px 18px;border-radius:12px;border:0;background:var(--brand);color:var(--brandtxt);
  font-weight:700;cursor:pointer;transition:transform .05s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{display:flex;margin:10px auto 0;font-size:18px;padding:14px 22px}

/* KPIs (کاملاً ریسپانسیو) */
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:12px}
.kpi{background:#e91e6317;border:1px solid var(--border);border-radius:12px;padding:12px;min-width:0;text-align: center;}
.kpi b{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.kpi span{font-size:15px}
.badge-green{display:inline-flex;align-items:center;gap:6px;background:rgba(16,185,129,0.15);color:var(--green);
  padding:6px 10px;border-radius:999px;border:1px solid rgba(16,185,129,0.3)}
.dot{width:8px;height:8px;border-radius:999px;background:var(--green)}
.sep{border:none;border-top:1px solid var(--border);margin:10px 0}

/* Progress */
.progress{margin-top:14px;background:var(--soft);border-radius:12px;overflow:hidden;height:12px;border:1px solid var(--border)}
.bar{height:100%;width:0%;background:linear-gradient(90deg,#22c55e,#16a34a)}
.statcard{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.statpill{background:var(--soft);border:1px solid var(--border);border-radius:12px;padding:10px 14px;min-width:150px;text-align:center;color:var(--muted);font-size:13px}
.statpill b{display:block;color:var(--text);font-size:14px;margin-top:4px}
.iframebox{margin-top:12px;border:1px dashed var(--border);border-radius:12px;overflow:hidden;transition:max-height .3s ease}
iframe{display:block;width:100%;height:260px;background:var(--soft);border:0}

/* Selection bar */
.selectbar{display:none;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 0;justify-content:center}
.selectbar textarea{width:100%;min-height:90px;background:var(--soft);border:1px solid var(--border);border-radius:12px;
  color:var(--text);padding:10px;direction:ltr;text-align:left;white-space:pre}

/* ===== TABLE ===== */
.table{width:100%;border-collapse:separate;border-spacing:0 8px;margin-top:10px}
.table,.tr{direction:ltr}

/* Desktop: checkbox | name | size | time | action */
.tr{
  display:grid;
  grid-template-columns:46px minmax(260px,1.4fr) minmax(110px,.6fr) minmax(110px,.6fr) minmax(120px,.5fr);
  gap:8px; align-items:stretch;
}
.th,.td{
  display:flex;align-items:center;padding:12px;
  background:var(--soft);border:1px solid var(--border);direction:ltr;min-height:46px;
}
.head{font-weight:700;color:var(--muted);background:transparent;border:none}
.head .th{background:var(--soft)}
.tr > .th:first-child,.tr > .td:first-child{border-radius:12px 0 0 12px}
.tr > .th:last-child,.tr > .td:last-child{border-radius:0 12px 12px 0}

.td.name{
  direction:ltr;text-align:left;
  white-space:normal !important;      /* ⬅️ اجازه‌ی چند لاینه شدن نام */
  word-break:break-word;
}
.td.size{direction:ltr;text-align:center;font-variant-numeric:tabular-nums}
.td.time{direction:ltr;text-align:center;font-variant-numeric:tabular-nums}
.td .tleft{direction:ltr}
.action .btn{width:100%;text-align:center}
a.lnk{color:var(--link);text-decoration:none}

/* Footer */
.footer{text-align:center;color:var(--muted);font-size:12px;margin-top:8px}

/* CTA/Success bar */
.dl-ready{display:none;margin-top:12px;text-align:center}
.dl-ready.active{display:block}
.dl-ready .btn-large{font-size:18px;padding:14px 22px}
.pinned-success{
  display:none;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(34,197,94,.15);color:var(--green);
  border:1px solid rgba(34,197,94,.3);border-radius:12px;padding:10px 12px;margin:10px 0;
}
.pinned-success.active{display:flex}
.file-row.just-added{animation:pulseGlow 1.2s ease-in-out infinite alternate}
@keyframes pulseGlow{from{box-shadow:0 0 0 0 #FF5722}to{box-shadow:0 0 0 10px #3F51B5}}

/* SweetAlert2 fallback (mini) */
.mswal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:9999}
.mswal{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:16px;max-width:420px;width:calc(100% - 40px);padding:18px;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.mswal-title{font-size:18px;margin:0 0 6px;text-align:right}
.mswal-html{font-size:14px;color:var(--muted);text-align:right}
.mswal-actions{display:flex;gap:10px;justify-content:flex-start;margin-top:14px}
.mswal-btn{padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:700}
.mswal-confirm{background:var(--brand);color:var(--brandtxt)}
.mswal-cancel{background:#475569;color:#fff}
.mswal-toast{position:fixed;top:14px;left:50%;transform:translateX(-50%);background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:10px 14px;font-size:14px;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.25)}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .container{padding:12px}
}

@media (max-width:760px){
  /* KPIs با ستون‌های خودکار */
  .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .logo img{max-width:130px}
  .site-title{font-size:24px}

  /* جدول موبایل: سرصفحه مخفی و لیبل‌ها داخل سلول‌ها */
  .tr.head{display:none}
  .tr{
    grid-template-columns:36px 1fr;      /* چک‌باکس | محتوا */
    grid-auto-rows:auto;
  }
  .td{min-height:44px}

  /* ردیف: [checkbox][name] ؛ سپس اندازه و زمان و در نهایت دکمه دانلود */
  .td:nth-child(1){grid-column:1}
  .td.name{grid-column:2}
  .td.size{grid-column:2}
  .td.time{grid-column:2}
  .td.action{grid-column:1 / -1}

  /* لیبل‌های موبایل */
  .td.name::before,
  .td.size::before,
  .td.time::before,
  .td.action::before{
    content:attr(data-label);
    display:block;
    font-size:12px;color:var(--muted);margin-bottom:4px;
  }
  /* مقدار لیبل‌ها (درصورتی که data-label ست نشده باشد) */
  .td.name:not([data-label])::before{content:'نام فایل'}
  .td.size:not([data-label])::before{content:'حجم'}
  .td.time:not([data-label])::before{content:'زمان حذف'}
  .td.action:not([data-label])::before{content:'دانلود نیم‌بها'}

  /* نام فایل چند خطی و تمیز */
  .td.name{white-space:normal;line-height:1.5}
}
/* CTA bar - mobile: stack + center */
@media (max-width:760px){
  .pinned-success{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  .pinned-success span{ display:block }
  .pinned-success .lnk{
    display:block;
    white-space: normal;
    word-break: break-word;
    direction: ltr;            /* اسم فایل درست نمایش داده بشه */
  }
  .pinned-success .btn{
    width: 100%;
    max-width: 260px;          /* قشنگ وسط می‌ایسته و بیرون نمی‌زند */
  }

  /* اگر خواستی CTA زیر پروگرس هم تو موبایل تمام‌عرض باشه */
  .dl-ready .btn-large{ width:100%; max-width:320px }
}
.pinned-success .btn{ transition: transform .08s ease }
.pinned-success .btn:active{ transform: translateY(1px) }
/* بدون زیرخط برای متن داخل دکمه‌ها */
a.btn,
.action .btn,
.pinned-success .btn,
.dl-ready .btn {
  text-decoration: none !important;
}

a.btn:hover,
a.btn:focus {
  text-decoration: none !important;
}
/* تایمرِ انسانی داخل جدول */
.td .tleft{
  direction: rtl;         /* متن فارسی */
  text-align: center;     /* وسط‌چین در ستون */
  white-space: normal;    /* اجازه‌ی رفتن به خط بعد */
  line-height: 1.8;       /* خوانایی بهتر */
}
/* دکمه‌ها زیرخط نداشته باشند */
a.btn, .btn { text-decoration: none; }

/* ستون‌های حجم و زمان را همیشه وسط‌چین نگه داریم در دسکتاپ */
.th.size, .td.size,
.th.time, .td.time { text-align: center; }

/* اعداد یکدست */
.td.size, .th.size,
.td.time, .th.time { font-variant-numeric: tabular-nums; }

/* --- موبایل --- */
@media (max-width:760px){
  /* هدر جدول دیده نشود */
  .tr.head { display: none; }

  /* چیدمان کارت‌گونه: چک‌باکس | نام | حجم | زمان | اکشن */
  .tr{
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-areas:
      "chk name"
      "chk size"
      "chk time"
      "chk action";
    gap: 8px;
    align-items: stretch;
  }
  .tr > .td:first-child { grid-area: chk; border-radius: 12px; }     /* checkbox */
  .td.name   { grid-area: name;   direction: ltr; text-align: left; }
  .td.size   { grid-area: size; }
  .td.time   { grid-area: time; }
  .td.action { grid-area: action; }

  /* برچسب‌های «حجم» و «زمان حذف» فقط برای این دو ستون */
  .td.size, .td.time{
    display: flex;
    align-items: center;
    gap: 10px;
    direction: rtl;                 /* برچسب سمت راست، مقدار سمت چپ */
    justify-content: space-between; /* فاصله‌ی مرتب بین برچسب و مقدار */
    text-align: initial;            /* اجازه بده مقدار خودش چپ/راست شود */
    white-space: normal;            /* اجازه به چندخطی شدن */
  }
  .td.size::before { content: attr(data-label); color: var(--muted); }
  .td.time::before { content: attr(data-label); color: var(--muted); }

  /* نمایش مقدارِ زمان با خوانایی بهتر */
  .td.time .tleft{
    direction: rtl;
    line-height: 1.8;
    text-align: left;               /* مقدار سمت چپِ کارت */
    flex: 1 1 auto;
  }

  /* دکمه دانلود تمام‌عرض و زیر ستون‌ها */
  .td.action .btn{
    width: 100%;
    display: block;
    text-align: center;
  }
}
@media (max-width:760px){
  /* فقط size/time برچسب داشته باشند */
  .td.name::before,
  .td.action::before { content: none !important; }
}
/* جلوگیری از بیرون‌زدن ردیف‌ها در گرید */
.table, .tr, .td, .td.name { min-width: 0; }

/* نام فایل حتماً چندخطی شود و اجازه‌ی شکست داشته باشد */
.td.name a {
  display: block;
  white-space: normal !important;
  overflow-wrap: anywhere;      /* در صورت نبود فاصله، هرجا لازم شد بشکنه */
  word-break: break-word;
}

/* اگر فایل خیلی طولانی شد باز هم از کارت بیرون نزنه */
.card .table { overflow: hidden; }

/* کمی اطمینان بیشتر برای ستون‌ها */
.td.name, .td.size, .td.time { overflow: hidden; }
/* فاصله‌ی عمودی ملایم بین ردیف‌ها */
.tr{ margin: 6px 0; }                 /* یا اگر ترجیح میدی کمتر: 4px */

/* پالسِ بالای همه‌ی سلول‌های ردیف (نه پشت‌شون) */
.file-row{ position: relative; z-index: 0; }
.file-row.just-added{ z-index: 5; }   /* بالاتر از بقیه‌ی ردیف‌ها قرار بگیره */

.file-row.just-added::after{
  content: "";
  position: absolute;
  inset: -6px;                        /* هاله کمی بزرگ‌تر از ردیف */
  border-radius: 16px;                /* با قوس کارت هماهنگ شود */
  pointer-events: none;               /* روی کلیک‌ها اثری نداشته باشد */
  box-shadow: 0 0 0 0 rgba(63,81,181,0);       /* شروع */
  animation: rowPulse 1.2s ease-in-out infinite alternate;
}

/* اگر می‌خوای همان رنگ‌های قبلیت حفظ شوند */
@keyframes rowPulse{
  from { box-shadow: 0 0 0 0   rgba(255,87,34, .00); }   /* #FF5722 */
  to   { box-shadow: 0 0 0 10px rgba(63,81,181,.35); }   /* #3F51B5 */
}
/* شبکه KPI: دسکتاپ دقیقاً 5 ستون (دو ردیف 5تایی)، کوچیک‌ترها auto-fit */
.kpis{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
@media (min-width: 1024px){
  .kpis{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}

/* کارت لینک‌ها */
.kpi.kpi-cta{
  display:block; text-decoration:none; color:inherit; min-width:0;
  transition:transform .05s ease, box-shadow .2s ease;
}
.kpi.kpi-cta:hover{ box-shadow:0 8px 18px rgba(0,0,0,.06) }
.kpi.kpi-cta span{ color:var(--link); font-weight:700 }

/* کارت وضعیت (سبز و متمایز) */
.kpi.kpi-status{
  background:rgb(34 197 94 / 39%);
  border:1px solid rgba(34,197,94,.35);
}
.kpi.kpi-list{
  background:rgb(197 233 249); text-decoration:none;
  border:1px solid rgba(34,197,94,.35);
}
.kpi.kpi-status .on{ color:#16a34a; display:inline-flex; align-items:center; gap:8px; }
.kpi.kpi-status .dot{ width:8px; height:8px; border-radius:999px; background:#16a34a; display:inline-block }

/* ایمن‌سازی عرض صفحه (جلوگیری از اسکرول افقی ناخواسته) */
.container{ max-width:1024px; width:100%; margin:24px auto; padding:16px; }
body{ overflow-x:hidden; }

/* جدول همیشه داخل عرض کارت بماند */
.table{ width:100%; max-width:100%; }
/* Site title styling */
.site-title{
  margin-top:8px;
  text-align:center;
  font-size:28px;
  font-weight:700;
  line-height:1.35;
}
.site-title .brand{ color:#e11d48; }          /* قرمز برای «نیم لینک» */
.site-title .site-subtitle{
  margin-top:4px;
  font-size:14px;
  color:var(--muted);
}
.site-title .site-subtitle a{
  color:var(--link);
  text-decoration:none;                       /* بدون زیرخط */
  direction:ltr;
  display:inline-block;
}
.site-title .site-subtitle a:hover{ text-decoration:underline; }

@media (max-width:760px){
  .site-title{ font-size:24px; }
}