@font-face {
  font-family: 'Tanha';
  src: url('./fonts/Tanha.woff2') format('woff2'),
       url('./fonts/Tanha.woff') format('woff'),
       url('./fonts/Tanha.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root{
  --bg: #e4e8eb;
  --card: #cacbcc; 
  --muted:#431515;
  --text:#0f172a;
  --ring:#0f172a;
  --shadow: 0 6px 24px rgba(15,23,42,0.08);
  --radius: 16px;
}

html,body{
  margin:0;
  padding:0;
  background:linear-gradient(135deg,#feffff,#eee5e7);
  font-family:'Tanha', iranyekan, Yekan, Segoe UI, Arial, sans-serif;
  color:var(--text);
}


.tab,
.btn {
  font-family: 'Tanha', sans-serif !important;
}

.container{max-width:1100px;margin:auto;padding:24px;}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
h1{font-size:26px;margin:0}
.sub{color:var(--muted);font-size:13px;margin-top:6px}
.btn{background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:10px 14px;cursor:pointer;box-shadow:var(--shadow);display:inline-flex;align-items:center;gap:8px}
.btn:hover{background:#f8fafc}
.card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.section-title{font-size:18px;margin:0 0 10px}
.section-sub{color:var(--muted);font-size:12px;margin:0 0 12px}
.grid{display:grid;gap:14px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:800px){.g-2,.g-3{grid-template-columns:1fr}}
label{display:block;font-size:13px;margin-bottom:6px;font-weight:600}
input[type="number"], input[type="text"]{
  width:100%;padding:10px 12px;border:1px solid #e5e7eb;border-radius:12px;outline:0;
}
input:focus{box-shadow:0 0 0 3px rgba(15,23,42,.12)}
.drop{
  border:2px dashed #000000; /* سیاه */
  border-radius:14px;
  padding:20px;
  text-align:center;
  color:#475569;
  cursor:pointer;
}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{background:#f3f4f6;border-radius:999px;padding:6px 12px;font-size:12px}
.results{display:grid;gap:12px}
.result{background:#f8fafc;border-radius:14px;padding:14px}
.result .k{font-size:12px;color:var(--muted)}
.result .v{margin-top:4px;font-size:22px;font-weight:700}
/* Tabs */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tab{background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:10px 14px;font-size:13px;box-shadow:var(--shadow);cursor:pointer}
.tab.active{background:#0f172a;color:#fff;border-color:#0f172a}
.panel{display:none;animation:fade .18s ease}
.panel.active{display:block}
@keyframes fade{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
.note{font-size:12px;color:var(--muted);line-height:1.9}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* کوچک‌تر کردن کادرهای ورودی درصدها */
input[type="number"],
input[type="text"] {
  max-width: 120px;   /* عرض کادر - می‌تونی کمتر یا بیشتر کنی */
  height: 36px;       /* ارتفاع کادر */
  font-size: 0.9rem;  /* کوچیک‌تر شدن متن داخل */
  padding: 4px 8px;   /* فضای داخلی کمتر */
}


/* === UI Uplift – Add to END of styles.css === */
:root{
  --accent:#7c3aed;          /* بنفش */
  --accent-2:#06b6d4;        /* فیروزه‌ای */
}

/* Cards: glass + motion highlight */
.card{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.6));
  border:1px solid rgba(15,23,42,.08);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, filter .35s;
  transform-style: preserve-3d;
}

.card:hover{ transform: translateY(-2px) scale(1.01); box-shadow: 0 16px 40px rgba(15,23,42,.12); }
.card:hover::after{ opacity:1; }

/* Tabs + sliding indicator */
.tabs{ position:relative; align-items:center; }
.tab{ position:relative; transition: transform .25s ease, background-color .25s; will-change: transform; }
.tab:hover{ transform: translateY(-1px); }
.tab.active{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; border-color:transparent;
}
.tab-indicator{
  position:absolute; height:3px; border-radius:999px; bottom:-6px; left:0; width:80px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 20px rgba(124,58,237,.35);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), width .35s, left .35s;
}

/* Buttons + ripple */
.btn{ position:relative; overflow:hidden; border-color: rgba(15,23,42,.06); }
.btn:active{ transform: translateY(1px); }
.ripple{
  position:absolute; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%;
  background: rgba(124,58,237, .25);
  transform: scale(0); animation: ripple .6s ease-out;
}
@keyframes ripple{ to{ transform: scale(14); opacity:0; } }

/* Inputs – glassy + micro states */
input[type="number"], input[type="text"], select{
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.6));
  border: 1px solid rgba(15,23,42,.08);
  transition: border-color .2s, box-shadow .2s, transform .12s;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 0 0 rgba(124,58,237,0);
}
input:hover, select:hover{ border-color: rgba(124,58,237,.45); }
input:focus, select:focus{
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(124,58,237,.15);
  border-color: rgba(124,58,237,.5);
}
/* اعتبارسنجی نرم (JS می‌گذارد) */
input[aria-invalid="true"]{ border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.15); }
input[aria-invalid="false"]{ border-color:#22c55e; }

/* Result cards */
.result{
  border:1px dashed rgba(15,23,42,.1);
  background: linear-gradient(180deg, #fff, #f8fafc);
}

/* Drop zone hover */
.drop{ transition: border-color .2s, background-color .2s, transform .2s; }
.drop:hover{ border-color: var(--accent); background: rgba(124,58,237,.05); transform: translateY(-1px); }

/* Panels reveal */
.panel.active{ animation: panel-in .4s ease both; }
.panel.active .card{ animation: card-in .6s ease both; }
.panel.active .card:nth-child(2){ animation-delay:.05s; }
.panel.active .card:nth-child(3){ animation-delay:.1s; }
@keyframes panel-in{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none; } }
@keyframes card-in{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none; } }



/* Subtle custom scrollbar */
*{ scrollbar-width:thin; scrollbar-color: rgba(124,58,237,.35) transparent; }
*::-webkit-scrollbar{ height:8px; width:8px; }
*::-webkit-scrollbar-thumb{ border-radius:999px; background: linear-gradient(180deg, rgba(124,58,237,.5), rgba(6,182,212,.4)); }
*::-webkit-scrollbar-track{ background: transparent; }



/* وسط‌چین کردن کارت‌های ورودی و خروجی CBR */
/* چیدمان CBR فقط در حالت active تا پیش‌فرض مخفی بودن panel خراب نشود */
#panel-CBR.panel.active{
  display: flex;            /* فقط وقتی active است */
  justify-content: center;  /* وسط‌چینِ افقی */
  gap: 20px;                /* فاصله بین کارت‌ها */
  margin-top: 12px;
}

/* موبایل: تک‌ستونه شود */
@media (max-width:800px){
  #panel-CBR.panel.active{
    flex-direction: column;
    align-items: stretch;
  }
}


#panel-CBR .card {
  flex: 0 0 auto;       /* اندازه کارت ثابت بمونه */
  width: 460px;         /* عرض معقول برای هر کارت */
  max-width: 100%;      /* در موبایل کشیده نشه */
  padding: 16px;
}

/* کارت دوم که خروجی است: margin-top inline را خنثی کن */

#panel-CBR .card + .card{ margin-top: 0 !important; }

/* فیلدهای ورودی CBR (همان جمع‌وجور قبلی) */
#panel-CBR input[type="number"]{
  max-width:160px;
  height:32px;
  font-size:0.9rem;
  padding:4px 8px;
}

/* خروجی طبیعی و پهنای کامل کارت */
#panel-CBR .results,
#panel-CBR .result{
  max-width: none;
}
#panel-CBR .result{             /* سایز متعادل مثل SWC */
  padding:12px 14px;
  font-size:1rem;
}
#panel-CBR .result .v{
  font-size:1.1rem;
  font-weight:600;
}


/* وسط‌چین کردن کارت‌های ورودی و خروجی FS */
#panel-FS.panel.active{
  display: flex;            /* فقط وقتی active باشه */
  justify-content: center;  /* وسط‌چین افقی */
  gap: 20px;                /* فاصله بین کارت‌ها */
  margin-top: 12px;
}

#panel-FS .card {
  flex: 0 0 auto;       /* اندازه کارت ثابت */
  width: 460px;         /* عرض معقول برای هر کارت */
  max-width: 100%;      /* در موبایل کشیده نشه */
  padding: 16px;
}

#panel-FS .card + .card {
  margin-top: 0 !important; /* جلوگیری از افتادن کارت دوم پایین */
}

/* خروجی FS */
#panel-FS .result{
  padding:12px 14px;
  font-size:1rem;
}
#panel-FS .result .v{
  font-size:1.1rem;
  font-weight:600;
}

/* در موبایل یک‌ستونه بشه */
@media (max-width:800px){
  #panel-FS.panel.active{
    flex-direction: column;
    align-items: stretch;
  }
}


/* چیدمان و وسط‌چین کردن پنل phi فقط وقتی فعال است */
#panel-phi.panel.active{
  display: flex;            /* فقط در حالت active؛ بقیه پنل‌ها طبق .panel/.active مخفی می‌مانند */
  justify-content: center;  /* وسط‌چین افقی */
  gap: 20px;                /* فاصله بین دو کارت */
  margin-top: 12px;
}

/* کارت‌ها جمع‌وجور و هم‌اندازه */
#panel-phi .card{
  flex: 0 0 auto;
  width: 460px;
  max-width: 100%;
  padding: 16px;
}

/* کارت دوم (خروجی) بالا بیاید */
#panel-phi .card + .card{ margin-top: 0 !important; }

/* ورودی‌ها کمی کوچک‌تر مثل CBR/FS */
#panel-phi input[type="number"]{
  max-width:160px;
  height:32px;
  font-size:0.9rem;
  padding:4px 8px;
}

/* خروجی اندازه متعادل */
#panel-phi .result{
  padding:12px 14px;
  font-size:1rem;
}
#panel-phi .result .v{
  font-size:1.1rem;
  font-weight:600;
}

/* در موبایل تک‌ستونه شود */
@media (max-width:800px){
  #panel-phi.panel.active{
    flex-direction: column;
    align-items: stretch;
  }
}

/* وسط‌چین کردن کارت‌های ورودی و خروجی Cohesion */
#panel-cohesion.panel.active{
  display: flex;            /* فقط وقتی active است */
  justify-content: center;  /* وسط‌چین افقی */
  gap: 20px;                /* فاصله بین کارت‌ها */
  margin-top: 12px;
}

#panel-cohesion .card{
  flex: 0 0 auto;
  width: 460px;         /* عرض معقول کارت */
  max-width: 100%;
  padding: 16px;
}

/* کارت دوم (خروجی) بالاتر بیاد */
#panel-cohesion .card + .card{ margin-top: 0 !important; }

/* ورودی‌های کوچکتر مثل بقیه مدل‌ها */
#panel-cohesion input[type="number"]{
  max-width:160px;
  height:32px;
  font-size:0.9rem;
  padding:4px 8px;
}

/* خروجی مرتب */
#panel-cohesion .result{
  padding:12px 14px;
  font-size:1rem;
}
#panel-cohesion .result .v{
  font-size:1.1rem;
  font-weight:600;
}

/* موبایل تک‌ستونه */
@media (max-width:800px){
  #panel-cohesion.panel.active{
    flex-direction: column;
    align-items: stretch;
  }
}


/* === Quick Theme – خاکی/زمین‌شناسی === */

/* پس‌زمینه کلی با گرادیان خاکی */
body {
  background: linear-gradient(135deg, #f6f3ef, #e8e3da);
  color: #2b2a27;
}

/* کارت‌ها با سایه و گوشه نرم */
.card {
  background: #fffdf9;
  border: 1px solid rgba(43, 42, 39, 0.08);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(43, 42, 39, 0.1);
}

/* تب‌ها و دکمه‌ها با رنگ تأکیدی خاکی/زیتونی */
.tab.active,
.btn {
  background: #7b5e3b;
  color: #fff;
  border-color: transparent;
}
.tab:hover,
.btn:hover {
  background: #6b8e23;
  color: #fff;
}

/* تیترهای بخش‌ها تیره‌تر برای کنتراست */
.section-title {
  color: #2b2a27;
  font-weight: 700;
}

/* زیرنویس‌ها با رنگ خاکی ملایم */
.section-sub,
.note {
  color: #6a5c48;
}

/* نتایج (خروجی‌ها) هایلایت ملایم */
.result {
  border: 1px dashed rgba(43, 42, 39, 0.15);
  background: #faf7f2;
}
.result .k {
  color: #6a5c48;
}
.result .v {
  color: #2b2a27;
}

/* برچسب‌ها (badge) با پس‌زمینه بژ روشن */
.badge {
  background: #ede7db;
  color: #2b2a27;
}

/* اینپوت‌ها با پس‌زمینه روشن و حاشیه خاکی */
input[type="number"],
input[type="text"],
select {
  background: #fdfcf9;
  border: 1px solid #c7bca4;
}
input:focus,
select:focus {
  border-color: #7b5e3b;
  box-shadow: 0 0 0 3px rgba(123,94,59,0.2);
}


/* === سبک خاکی بافت‌دار – هویت بصری سبک === */

/* پس‌زمینه: لایه‌های نرم خاکی با بافت خیلی ملایم */
body {
  background: linear-gradient(180deg, #f6f3ef, #e9e3d8);
  color: #2b2a27;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>\
    <circle cx='2' cy='2' r='1' fill='rgba(0,0,0,0.05)'/>\
  </svg>");
  background-repeat: repeat;
  background-size: 60px 60px; /* نویز ریز شبیه دانه خاک */
}

/* کارت‌ها با حس لایه خاک */
.card {
  background: linear-gradient(180deg, #fffdf9, #fdfcf6);
  border: 1px solid rgba(43, 42, 39, 0.08);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(43, 42, 39, 0.08);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(123,94,59,0.05), transparent 70%);
  pointer-events: none;
}

/* تیترهای بخش: پررنگ‌تر */
.section-title {
  font-weight: 700;
  color: #3e2e20;
}

/* توضیحات: رنگ خاکی ملایم */
.section-sub, .note {
  color: #6a5c48;
}

/* سیستم رنگ وضعیت‌ها */
.result {
  border-radius: 12px;
  border: 1px solid rgba(43, 42, 39, 0.1);
  padding: 14px;
  background: #faf7f2;
}
.result.success { background: #f0f6ef; border-color: #7ba05b; }
.result.warning { background: #fdf6e6; border-color: #d7a23a; }
.result.error   { background: #fae9e7; border-color: #b85c47; }

/* برچسب‌ها (badge) با طیف خاکی */
.badge {
  background: #ede7db;
  color: #2b2a27;
  border: 1px solid rgba(43,42,39,0.1);
}

/* تب‌ها و دکمه‌ها */
.tab.active, .btn {
  background: linear-gradient(135deg, #7b5e3b, #6b8e23);
  color: #fff;
  border: none;
}
.tab:hover, .btn:hover {
  background: linear-gradient(135deg, #6b8e23, #7b5e3b);
}

/* ورودی‌ها با شیشه‌ای-خاکی */
input[type="number"], input[type="text"], select {
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,247,240,0.8));
  border: 1px solid #c7bca4;
  transition: all 0.2s ease;
}
input:focus, select:focus {
  border-color: #7b5e3b;
  box-shadow: 0 0 0 3px rgba(123,94,59,0.2);
}

/* ریسپانسیو برای کارت‌ها در موبایل (زیر 800px) */
@media (max-width: 800px) {
  #panel-FS .card,
  #panel-CBR .card,
  #panel-phi .card,
  #panel-cohesion .card {
    width: 360px; /* عرض کوچکتر در موبایل */
    max-width: 100%; /* همچنان محدود به عرض صفحه */
  }
}



/* === Inline Hint Bubble for inputs (FS) === */
/* === FS Hint List (stable) === */
.hint-list{
  margin:6px 0 0;
  padding:8px 12px;
  border:1px solid #f3d27a;
  background:#fff8e1;
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  direction:rtl;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.hint-list[hidden]{display:none;}
.hint-list li{
  margin:4px 0;
  font-size:12px;
  line-height:1.7;
  color:#6a5c48;
}
.hint-list.show {
  opacity: 1;
  transform: translateY(0);
}

/* === FS Warn List (validation) === */
.warn-list{
  margin:6px 0 0;
  padding:8px 12px;
  border:1px solid #ef4444;
  background:#fee2e2;
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  direction:rtl;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.warn-list[hidden]{display:none;}
.warn-list li{
  margin:4px 0;
  font-size:12px;
  line-height:1.7;
  color:#b91c1c; /* قرمز تیره برای متن */
}
.warn-list.show {
  opacity: 1;
  transform: translateY(0);
}

/* ریسپانسیو برای موبایل (زیر 800px) */
@media (max-width: 800px) {
  .hint-list, .warn-list {
    max-width: 200px; /* عرض کوچکتر در موبایل */
    margin: 4px 8px; /* حاشیه‌های کناری برای جلوگیری از چسبیدن به لبه */
  }
  
  /* اطمینان از اینکه لیست زیر input باشد و روی هم نیفتد */
  #panel-FS .card {
    position: relative;
    padding-bottom: 24px; /* فضای کافی برای لیست‌ها */
  }
}

/* استایل اضافی برای ورودی نامعتبر (از aria-invalid استفاده می‌کند) */
input[aria-invalid="true"]{ border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.15); }
input[aria-invalid="false"]{ border-color:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.15); } /* سبز برای معتبر */
/* === Auth Gate === */
.auth-gate{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  z-index: 9999;
}
.auth-card{
  width: 360px;
  max-width: 90vw;
  background: #fffdf9;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
}
.auth-card h2{ margin: 0 0 12px; font-size: 20px; }
.auth-card label{ margin-top: 8px; display:block; font-weight:700; }
.auth-card input{ width: 100%; height: 36px; padding: 6px 10px; }
.auth-error{ color: #b91c1c; font-size: 12px; margin-top: 8px; }