/* =====================================================================
   تەواف — سیستەمی دیزاین (Design System)
   ---------------------------------------------------------------------
   ئەم فایلە یەک شێواز دەداتە هەموو ١٠٤ لاپەڕەکە.

   چۆن کاردەکات:
     ١) هەموو ئەو گۆڕاوانەی کۆن دووبارە دیاری دەکاتەوە (--bg, --accent,
        --radius, --shadow...) — بۆیە هەموو لاپەڕەکانی کۆن خۆکارانە
        ڕەنگ و شێوازی نوێ وەردەگرن بەبێ دەستکاریکردنیان.
     ٢) پێوانەیەکی ڕێکخراو دادەنێت بۆ بۆشایی، ئەندازەی دەق، گۆشە و سێبەر.
     ٣) پێکهاتە هاوبەشەکان ڕێک دەخات: دوگمە، کارت، فۆرم، خشتە، ئاگاداری.

   گرنگ: ئەم فایلە دەبێت **دوای** هەموو فایلەکانی تر باربکرێت.
   ===================================================================== */

/* =====================================================================
   ١) بنەماکان — هەموو بڕیارێک لێرەدایە
   ===================================================================== */
:root{

  /* ---- ڕەنگی سەرەکی: سەوزی تەواف ---- */
  --tw-teal-900:#022726;
  --tw-teal-800:#033330;
  --tw-teal-700:#05403e;   /* ★ ڕەنگی سەرەکی */
  --tw-teal-600:#0a5754;
  --tw-teal-100:#f6f9f9;
  --tw-teal-50:#fbfcfc;

  /* ---- ئاڵتوونی ---- */
  --tw-khaki-700:#5c5840;
  --tw-khaki-600:#6a663f;
  --tw-khaki-500:#777252;   /* ★ ڕەنگی جیاکەرەوە */
  --tw-khaki-100:#efeee8;
  --tw-khaki-50:#f7f6f3;

  /* ---- بێلایەن ---- */
  --tw-ink:#0f172a;
  --tw-ink-2:#334155;
  --tw-muted:#7b8794;
  --tw-faint:#a8b3bd;
  --tw-line:#ebf1f1;
  --tw-line-2:#f1f5f5;
  --tw-page:#f4f8f8;
  --tw-card:#ffffff;

  /* ---- دۆخەکان ---- */
  --tw-ok:#05403e;      --tw-ok-bg:#f7f9f9;
  --tw-warn:#a8672c;    --tw-warn-bg:#f5f4f0;
  --tw-bad:#b3261e;     --tw-bad-bg:#fdeceb;
  --tw-info:#1d4ed8;    --tw-info-bg:#eff6ff;

  /* ---- بۆشایی: پێوانەی ٤ ---- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* ---- ئەندازەی دەق: شەش، نەک بیست ---- */
  --fs-xs:.68rem;   /* ناونیشانی بچووک */
  --fs-sm:.78rem;   /* دەقی یاریدەدەر */
  --fs-md:.86rem;   /* دەقی ئاسایی */
  --fs-lg:1rem;     /* ناونیشانی کارت */
  --fs-xl:1.25rem;  /* ناونیشانی بەش */
  --fs-2xl:1.6rem;  /* ژمارەی گەورە */
  --fs-3xl:2.1rem;  /* باڵانس */

  /* ---- گۆشەکان: چوار، نەک پازدە ---- */
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-full:999px;

  /* ---- سێبەر: سێ ---- */
  --sh-1:0 1px 2px rgba(16,27,24,.05);
  --sh-2:0 4px 14px -6px rgba(16,27,24,.14);
  --sh-3:0 16px 38px -16px rgba(7,38,32,.35);

  /* ---- جوڵە ---- */
  --ease:cubic-bezier(.3,.9,.3,1);
  --dur:.18s;

  /* ---- قەبارەی دەست ---- */
  --tap:46px;

  /* =====================================================================
     ٢) گۆڕاوە کۆنەکان — دووبارە دیاری دەکرێنەوە
     ئەمە وا دەکات هەموو لاپەڕەکانی کۆن ڕەنگی نوێ وەربگرن
     بەبێ ئەوەی دەستیان لێبدەین.
     ===================================================================== */
  --bg:var(--tw-page);
  --surface:var(--tw-card);
  --surface-2:var(--tw-teal-50);
  --text:var(--tw-ink);
  --text-muted:var(--tw-muted);
  --accent:var(--tw-teal-700);
  --accent-dark:var(--tw-teal-800);
  --accent-soft:var(--tw-teal-100);
  --gold:var(--tw-khaki-500);
  --gold-dark:var(--tw-khaki-600);
  --gold-soft:var(--tw-khaki-100);
  --maroon:var(--tw-bad);
  --border:var(--tw-line);
  --danger:var(--tw-bad);
  --danger-soft:var(--tw-bad-bg);
  --shadow:var(--sh-1);
  --shadow-lg:var(--sh-2);
  --radius:var(--r-lg);
  --radius-sm:var(--r-sm);
  --dp-line:var(--tw-line);

  --tint-blue:var(--tw-info);     --tint-blue-soft:var(--tw-info-bg);
  --tint-green:var(--tw-ok);      --tint-green-soft:var(--tw-ok-bg);
  --tint-purple:#0a5754;          --tint-purple-soft:#f1f6f5;
  --tint-red:var(--tw-bad);       --tint-red-soft:var(--tw-bad-bg);
}

/* =====================================================================
   ٣) بنەڕەت
   ===================================================================== */
html, body{ max-width:100%; overflow-x:hidden; }
body{
  background:var(--tw-page);
  color:var(--tw-ink);
  font-family:'Noto Kufi Arabic','IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
img, svg, video{ max-width:100%; }

/* ژمارەکان هەمیشە بە ئینگلیزی و ڕێکخراو */
.num, .tw-num{
  direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums;
}

/* =====================================================================
   ٤) دوگمەکان — یەک شێواز بۆ هەموو سایتەکە
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--tap);
  padding:0 var(--sp-5);
  border-radius:var(--r-md);
  border:1px solid transparent;
  font-family:inherit;
  font-size:var(--fs-sm);
  font-weight:800;
  line-height:1;
  cursor:pointer;
  text-decoration:none;
  transition:background var(--dur), border-color var(--dur),
             transform var(--dur), box-shadow var(--dur);
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn:disabled, .btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }

.btn-primary{
  background:var(--tw-teal-700); color:#fff;
  box-shadow:0 6px 16px -8px rgba(15,76,63,.6);
}
.btn-primary:hover{ background:var(--tw-teal-800); }

.btn-gold{ background:var(--tw-khaki-500); color:#191811; }
.btn-gold:hover{ background:var(--tw-khaki-600); }

.btn-outline{
  background:var(--tw-card); color:var(--tw-teal-700);
  border-color:var(--tw-line);
}
.btn-outline:hover{ background:var(--tw-teal-100); border-color:var(--tw-teal-700); }

.btn-ghost{ background:var(--tw-line-2); color:var(--tw-ink-2); }
.btn-ghost:hover{ background:var(--tw-line); }

.btn-danger{ background:var(--tw-bad-bg); color:var(--tw-bad); }
.btn-danger:hover{ background:#fbdad7; }

.btn-sm{ min-height:38px; padding:0 var(--sp-4); font-size:var(--fs-xs); border-radius:var(--r-sm); }
.btn-lg{ min-height:54px; padding:0 var(--sp-8); font-size:var(--fs-md); border-radius:var(--r-lg); }
.btn-block{ width:100%; }

/* =====================================================================
   ٥) کارتەکان
   ===================================================================== */
.card, .panel, .tw-card{
  background:var(--tw-card);
  border:1px solid var(--tw-line);
  border-radius:var(--r-lg);
  padding:var(--sp-5);
  box-shadow:var(--sh-1);
}
.panel-head, .card-t{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); flex-wrap:wrap;
  margin-bottom:var(--sp-4);
}
.panel-head h2, .card-t h2, .panel-head h3, .card-t h3{
  margin:0; font-size:var(--fs-lg); font-weight:900; line-height:1.4;
}
.panel-head > a, .card-t > a{
  font-size:var(--fs-sm); font-weight:800; color:var(--tw-teal-700);
}

/* ---- کارتی ئامار ---- */
.stats-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--sp-3); margin-bottom:var(--sp-5);
}
.stat-card{
  background:var(--tw-card); border:1px solid var(--tw-line);
  border-radius:var(--r-lg); padding:var(--sp-5);
  box-shadow:var(--sh-1);
  display:flex; align-items:flex-start; gap:var(--sp-3);
  transition:border-color var(--dur), box-shadow var(--dur);
}
.stat-card:hover{ border-color:var(--tw-khaki-500); box-shadow:var(--sh-2); }
.stat-icon{
  width:44px; height:44px; border-radius:var(--r-sm);
  display:grid; place-items:center; font-size:1.15rem; flex-shrink:0;
  background:var(--tw-teal-100);
}
.stat-body{ min-width:0; }
.stat-label{ font-size:var(--fs-xs); color:var(--tw-muted); font-weight:800; }
.stat-value{
  font-size:var(--fs-2xl); font-weight:900; line-height:1.3; margin-top:2px;
  direction:ltr; text-align:right; font-variant-numeric:tabular-nums;
}
.stat-value.gold, .stat-value.accent{ color:var(--tw-teal-700); }
.stat-card.tone-gold .stat-icon{ background:var(--tw-khaki-100); }

/* =====================================================================
   ٦) ئاگاداری
   ===================================================================== */
.alert{
  display:flex; align-items:flex-start; gap:var(--sp-2);
  border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-sm); font-weight:700; line-height:1.85;
  margin-bottom:var(--sp-3);
  border:1px solid transparent;
}
.alert-success, .alert.ok{ background:var(--tw-ok-bg);   color:var(--tw-ok);   border-color:#d5e0e0; }
.alert-error,   .alert.er{ background:var(--tw-bad-bg);  color:var(--tw-bad);  border-color:#f5cdc9; }
.alert-warning{            background:var(--tw-khaki-50); color:var(--tw-khaki-700); border-color:#d7d5c9; }
.alert-info{               background:var(--tw-info-bg); color:var(--tw-info);  border-color:#d5e3fd; }

/* =====================================================================
   ٧) نیشانە و چیپ
   ===================================================================== */
.badge, .chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px var(--sp-3);
  border-radius:var(--r-full);
  font-size:var(--fs-xs); font-weight:800; line-height:1.6;
  background:var(--tw-line-2); color:var(--tw-ink-2);
}
.badge-green,.badge-success{ background:var(--tw-ok-bg);   color:var(--tw-ok); }
.badge-red,.badge-danger{    background:var(--tw-bad-bg);  color:var(--tw-bad); }
.badge-gold,.badge-warning{  background:var(--tw-khaki-100);color:var(--tw-khaki-700); }
.badge-blue,.badge-info{     background:var(--tw-info-bg); color:var(--tw-info); }
.badge-grey{                 background:var(--tw-line-2);  color:var(--tw-muted); }

/* =====================================================================
   ٨) فۆرمەکان
   ===================================================================== */
.form-group{ margin-bottom:var(--sp-3); }
.form-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--sp-3);
}
label{
  display:block; font-size:var(--fs-xs); font-weight:800;
  color:var(--tw-ink-2); margin-bottom:6px;
}
input[type=text], input[type=number], input[type=email], input[type=tel],
input[type=password], input[type=date], input[type=search], input[type=url],
input[type=time], input[type=datetime-local], select, textarea{
  width:100%;
  font-family:inherit;
  font-size:16px;                 /* iOS زوم ناکات */
  padding:var(--sp-3) var(--sp-3);
  min-height:var(--tap);
  border:1px solid var(--tw-line);
  border-radius:var(--r-md);
  background:var(--tw-card);
  color:var(--tw-ink);
  transition:border-color var(--dur), box-shadow var(--dur);
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--tw-teal-700);
  box-shadow:0 0 0 3px rgba(15,76,63,.1);
}
textarea{ min-height:90px; resize:vertical; line-height:1.85; }
input[type=checkbox], input[type=radio]{
  width:20px; height:20px; min-height:auto; accent-color:var(--tw-teal-700);
}
.form-group small, .field-hint{
  display:block; font-size:var(--fs-xs); color:var(--tw-muted);
  font-weight:700; margin-top:5px; line-height:1.75;
}

/* =====================================================================
   ٩) خشتەکان — لەسەر مۆبایل دەبنە کارت
   ===================================================================== */
.table-wrap{
  background:var(--tw-card); border:1px solid var(--tw-line);
  border-radius:var(--r-lg); overflow-x:auto;
}
.table-wrap table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.table-wrap th{
  text-align:right; padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-xs); font-weight:800; color:var(--tw-muted);
  border-bottom:1px solid var(--tw-line); white-space:nowrap;
}
.table-wrap td{
  padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--tw-line-2);
}
.table-wrap tr:last-child td{ border-bottom:none; }

/* =====================================================================
   ١٠) دۆخی بەتاڵ
   ===================================================================== */
.empty-state, .tw-empty{
  text-align:center; padding:var(--sp-10) var(--sp-5);
  color:var(--tw-faint); font-size:var(--fs-sm); font-weight:700;
  background:var(--tw-card); border:1px dashed var(--tw-line);
  border-radius:var(--r-lg);
}

/* =====================================================================
   ١١) تابەکان
   ===================================================================== */
.tabs-pill{
  display:flex; gap:6px; background:var(--tw-line-2);
  padding:5px; border-radius:var(--r-md);
  margin-bottom:var(--sp-4); overflow-x:auto;
}
.tabs-pill a, .tabs-pill button{
  flex:1; min-width:90px; text-align:center;
  padding:10px var(--sp-3); border-radius:var(--r-sm);
  border:none; background:transparent;
  font-family:inherit; font-size:var(--fs-sm); font-weight:800;
  color:var(--tw-muted); white-space:nowrap; cursor:pointer;
}
.tabs-pill a.on, .tabs-pill a.active,
.tabs-pill button.on, .tabs-pill button.active{
  background:var(--tw-card); color:var(--tw-teal-700); box-shadow:var(--sh-1);
}

/* =====================================================================
   ١٢) سەرپەڕی بەشەکان — یەک شێواز بۆ هەموو لاپەڕەکان
   ===================================================================== */
.tw-hero{
  background:linear-gradient(150deg,var(--tw-teal-700),var(--tw-teal-600) 55%,var(--tw-teal-900));
  color:#fff;
  border-radius:var(--r-xl);
  padding:var(--sp-6);
  margin-bottom:var(--sp-5);
  position:relative; overflow:hidden;
}
.tw-hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 86% 10%,rgba(201,162,39,.28),transparent 55%);
}
.tw-hero > *{ position:relative; z-index:1; }
.tw-hero h2{ margin:0 0 var(--sp-2); font-size:var(--fs-xl); font-weight:900; }
.tw-hero p{ margin:0; font-size:var(--fs-sm); opacity:.9; line-height:1.95; max-width:660px; }

/* =====================================================================
   ١٣) مۆبایل
   ===================================================================== */
@media (max-width:820px){
  .card, .panel, .tw-card, .stat-card{ padding:var(--sp-4); border-radius:var(--r-md); }
  .tw-hero{ padding:var(--sp-5); border-radius:var(--r-lg); }
  .stats-grid{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp-2); }
  .stat-value{ font-size:var(--fs-xl); }
  .btn{ padding:0 var(--sp-4); }

  /* خشتە دەبێتە کارت — ناونیشانەکان لە data-label ەوە دێن */
  .table-wrap{ border:none; background:transparent; overflow:visible; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td{ display:block; width:100%; }
  .table-wrap thead{ display:none; }
  .table-wrap tr{
    background:var(--tw-card); border:1px solid var(--tw-line);
    border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4);
    margin-bottom:var(--sp-2); box-shadow:var(--sh-1);
  }
  .table-wrap td{
    display:flex; justify-content:space-between; align-items:center;
    gap:var(--sp-3); padding:7px 0; border:none; text-align:right;
    white-space:normal; max-width:none;
  }
  .table-wrap td + td{ border-top:1px solid var(--tw-line-2); }
  .table-wrap td::before{
    content:attr(data-label);
    font-size:var(--fs-xs); font-weight:800; color:var(--tw-muted); flex-shrink:0;
  }
}

@media (max-width:420px){
  .stat-value{ font-size:var(--fs-lg); }
  .tw-hero h2{ font-size:var(--fs-lg); }
}

/* =====================================================================
   ١٤) چاپکردن
   ===================================================================== */
@media print{
  .btn, .fab-wrap, .sidebar, .dash-topbar, .site-header, .tabs-pill{ display:none !important; }
  .card, .panel, .stat-card{ box-shadow:none; border-color:#ccc; }
  body{ background:#fff; }
}


/* =====================================================================
   ٩) پێکهاتەی برێندی تەواف — یەک زمانی دیزاین بۆ هەموو لاپەڕەکان
   ---------------------------------------------------------------------
   بنەما: زەمینەی سپی · کارتی گۆشەنەرم · ئایکۆنی خانەیی بە زەمینەی
   کاڵ · تەنها **یەک** کارتی ڕەنگاوڕەنگ لە هەر شاشەیەکدا.
   ===================================================================== */

/* ── ٩.١ سەردێڕی بەش: ناونیشان + «هەمووی» ────────────────────── */
.tw-sec{ display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:22px 0 12px; }
.tw-sec h2{ margin:0; font-size:var(--fs-lg); font-weight:900;
  color:var(--tw-ink); letter-spacing:-.01em; }
.tw-sec a{ font-size:var(--fs-sm); font-weight:800; color:var(--tw-teal-700);
  text-decoration:none; flex-shrink:0; }

/* ── ٩.٢ خانەی ئایکۆن — بنەمای ڕیزی جۆرەکان ──────────────────── */
.tw-tile{ display:grid; justify-items:center; gap:8px; text-decoration:none;
  color:inherit; }
.tw-tile .ic{ width:52px; height:52px; border-radius:16px; display:grid;
  place-items:center; font-size:1.28rem;
  background:var(--tw-teal-100); color:var(--tw-teal-700);
  transition:transform var(--dur) var(--ease); }
.tw-tile:active .ic{ transform:scale(.94); }
.tw-tile span{ font-size:var(--fs-xs); font-weight:800; color:var(--tw-ink-2);
  text-align:center; line-height:1.5; }
/* ڕەنگی جیاواز بۆ جیاکردنەوە — بەڵام هەمووی کاڵ */
.tw-tile.gold .ic{ background:var(--tw-khaki-100); color:var(--tw-khaki-700); }
.tw-tile.info .ic{ background:var(--tw-info-bg); color:var(--tw-info); }
.tw-tile.warn .ic{ background:var(--tw-warn-bg); color:var(--tw-warn); }
.tw-tile.bad  .ic{ background:var(--tw-bad-bg);  color:var(--tw-bad); }

.tw-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tw-tiles.five{ grid-template-columns:repeat(5,1fr); }
@media (max-width:360px){ .tw-tiles.five{ grid-template-columns:repeat(4,1fr); } }

/* ── ٩.٣ ڕیزی لیست: ئایکۆن + ناو + وردەکاری + تیر ────────────── */
.tw-row{ display:flex; align-items:center; gap:13px; padding:13px 14px;
  background:var(--tw-card); border:1px solid var(--tw-line);
  border-radius:var(--r-md); text-decoration:none; color:inherit;
  margin-bottom:9px; }
.tw-row:active{ background:var(--tw-teal-50); }
.tw-row > .ic{ width:42px; height:42px; border-radius:13px; flex-shrink:0;
  display:grid; place-items:center; font-size:1.02rem;
  background:var(--tw-teal-100); color:var(--tw-teal-700); }
.tw-row .tx{ flex:1; min-width:0; }
.tw-row .tx b{ display:block; font-size:var(--fs-md); font-weight:800;
  color:var(--tw-ink); }
.tw-row .tx small{ display:block; font-size:var(--fs-xs); color:var(--tw-muted);
  font-weight:700; margin-top:2px; }
.tw-row .go{ color:var(--tw-faint); font-size:.9rem; flex-shrink:0; }

/* ── ٩.٤ کارتی باڵانس — تاکە شوێنی ڕەنگی تۆخ ─────────────────── */
.tw-balance{ position:relative; overflow:hidden; border-radius:var(--r-lg);
  padding:20px 22px; color:#fff;
  background:linear-gradient(135deg,var(--tw-teal-700),var(--tw-teal-900));
  box-shadow:0 18px 40px -24px rgba(38,52,15,.9); }
.tw-balance::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 88% 8%,rgba(201,162,39,.28),transparent 58%); }
.tw-balance > *{ position:relative; z-index:1; }
.tw-balance .lbl{ font-size:var(--fs-xs); font-weight:800; opacity:.75;
  letter-spacing:.3px; }
.tw-balance .amt{ font-size:var(--fs-3xl); font-weight:900; margin:6px 0 0;
  direction:ltr; text-align:end; font-variant-numeric:tabular-nums;
  line-height:1.15; }
.tw-balance .amt small{ font-size:var(--fs-md); font-weight:700; opacity:.8; }

/* ── ٩.٥ گەڕان — پیل، زەمینەی کاڵ ────────────────────────────── */
.tw-search{ display:flex; align-items:center; gap:10px; }
.tw-search .box{ flex:1; display:flex; align-items:center; gap:10px;
  background:var(--tw-card); border:1px solid var(--tw-line);
  border-radius:var(--r-full); padding:0 18px; height:52px; }
.tw-search .box i{ color:var(--tw-faint); font-size:.95rem; flex-shrink:0; }
.tw-search input{ flex:1; border:0; background:none; font:inherit;
  font-size:var(--fs-md); color:var(--tw-ink); min-width:0; }
.tw-search input:focus{ outline:0; }
.tw-search .fx{ width:52px; height:52px; flex-shrink:0; border:0;
  border-radius:var(--r-md); display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--tw-teal-700),var(--tw-teal-800)); }

/* ── ٩.٦ چیپی پاڵاوتن ─────────────────────────────────────────── */
.tw-chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;
  scrollbar-width:none; }
.tw-chips::-webkit-scrollbar{ display:none; }
.tw-chip{ flex:0 0 auto; padding:9px 17px; border-radius:var(--r-full);
  background:var(--tw-card); border:1px solid var(--tw-line);
  font-size:var(--fs-sm); font-weight:800; color:var(--tw-ink-2);
  text-decoration:none; }
.tw-chip.on{ background:var(--tw-teal-700); border-color:var(--tw-teal-700);
  color:#fff; }

/* ── ٩.٧ تاب بە هێڵی ژێرەوە ───────────────────────────────────── */
.tw-tabs{ display:flex; border-bottom:1.5px solid var(--tw-line);
  margin-bottom:18px; }
.tw-tabs a, .tw-tabs button{ flex:1; padding:13px 0 12px; background:none;
  border:0; font:inherit; font-size:var(--fs-md); font-weight:800;
  color:var(--tw-faint); text-align:center; text-decoration:none;
  position:relative; cursor:pointer; }
.tw-tabs .on{ color:var(--tw-teal-700); }
.tw-tabs .on::after{ content:''; position:absolute; inset-block-end:-1.5px;
  inset-inline-start:21%; width:58%; height:2.5px; border-radius:2px;
  background:var(--tw-teal-700); }

/* ── ٩.٨ کارتی ئامار بە هێڵی جیاکەرەوە ───────────────────────── */
.tw-stats{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  background:var(--tw-card); border:1px solid var(--tw-line);
  border-radius:var(--r-md); overflow:hidden; }
.tw-stats > *{ padding:16px 4px 14px; text-align:center; text-decoration:none;
  color:inherit; position:relative; }
.tw-stats > * + *::before{ content:''; position:absolute;
  inset-inline-start:0; top:22%; height:56%; width:1px;
  background:var(--tw-line); }
.tw-stats b{ display:block; font-size:var(--fs-xl); font-weight:900;
  color:var(--tw-ink); direction:ltr; font-variant-numeric:tabular-nums;
  line-height:1.15; }
.tw-stats span{ display:block; font-size:var(--fs-xs); color:var(--tw-muted);
  font-weight:700; margin-top:4px; }

/* ── ٩.٩ سەردێڕی سڵاو ─────────────────────────────────────────── */
.tw-hello{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.tw-hello .av{ width:46px; height:46px; border-radius:50%; overflow:hidden;
  flex-shrink:0; background:linear-gradient(135deg,var(--tw-teal-700),var(--tw-teal-600));
  color:#fff; display:grid; place-items:center; font-weight:900; }
.tw-hello .av img{ width:100%; height:100%; object-fit:cover; }
.tw-hello .tx{ flex:1; min-width:0; }
.tw-hello .tx small{ display:block; font-size:var(--fs-sm);
  color:var(--tw-muted); font-weight:700; }
.tw-hello .tx b{ display:block; font-size:var(--fs-lg); font-weight:900;
  color:var(--tw-ink); }
.tw-hello .bell{ width:44px; height:44px; border-radius:14px; flex-shrink:0;
  background:var(--tw-card); border:1px solid var(--tw-line);
  display:grid; place-items:center; color:var(--tw-ink-2); position:relative; }
.tw-hello .bell .dot{ position:absolute; top:11px; inset-inline-end:11px;
  width:8px; height:8px; border-radius:50%; background:var(--tw-bad);
  border:2px solid var(--tw-card); }

/* ── ٩.١٠ کارتی زانیاری: ئایکۆن + ناونیشان + دەق ─────────────── */
.tw-card{ background:var(--tw-card); border:1px solid var(--tw-line);
  border-radius:var(--r-md); padding:16px 17px; margin-bottom:12px; }
.tw-card > h3{ margin:0 0 10px; font-size:var(--fs-md); font-weight:900;
  color:var(--tw-ink); display:flex; align-items:center; gap:9px; }
.tw-card > h3 .ic{ width:30px; height:30px; border-radius:9px; flex-shrink:0;
  background:var(--tw-teal-100); color:var(--tw-teal-700);
  display:grid; place-items:center; font-size:.82rem; }
.tw-card > p{ margin:0; font-size:var(--fs-md); line-height:1.95;
  color:var(--tw-muted); }

/* ── ٩.١١ دوگمە ───────────────────────────────────────────────── */
.tw-btn{ display:inline-flex; align-items:center; justify-content:center;
  gap:8px; min-height:var(--tap); padding:0 24px; border:0;
  border-radius:var(--r-md); font:inherit; font-size:var(--fs-md);
  font-weight:800; text-decoration:none; cursor:pointer;
  background:linear-gradient(135deg,var(--tw-teal-700),var(--tw-teal-800));
  color:#fff; box-shadow:0 10px 24px -16px rgba(38,52,15,.9); }
.tw-btn:active{ transform:translateY(1px); }
.tw-btn.ghost{ background:var(--tw-card); color:var(--tw-ink);
  border:1.5px solid var(--tw-line); box-shadow:none; }
.tw-btn.gold{ background:linear-gradient(135deg,var(--tw-khaki-500),var(--tw-khaki-600));
  color:#1a1a1a; }
.tw-btn.block{ width:100%; }