/* ============================================
   میز ابزار — سیستم طراحی
   کاغذ سرد · جوهر سرمه‌ای · سبز کاج · برنج
   ============================================ */

:root{
  --paper:#EDF0F3;
  --surface:#FFFFFF;
  --surface-2:#F7F9FA;
  --ink:#16202B;
  --ink-2:#3B4C5E;
  --muted:#697C8E;
  --line:#DCE3E9;
  --line-2:#EAEFF3;

  --accent:#146B54;
  --accent-hi:#12604B;
  --accent-soft:#E4EFEB;
  --brass:#B8862B;
  --brass-soft:#F7EFDD;
  --danger:#B3261E;
  --danger-soft:#FBEAE9;

  --r-sm:8px; --r:12px; --r-lg:18px;
  --shadow:0 1px 2px rgba(22,32,43,.05), 0 8px 24px -12px rgba(22,32,43,.18);
  --shadow-lg:0 2px 4px rgba(22,32,43,.06), 0 24px 48px -24px rgba(22,32,43,.28);
  --font:"Vazirmatn", "IRANSans", Tahoma, system-ui, sans-serif;
  --mono:"Vazirmatn", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:14.5px; line-height:1.75;
  font-feature-settings:"ss01";
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.4}
h1{font-size:1.6rem; font-weight:800}
h2{font-size:1.15rem}
h3{font-size:1rem}
p{margin:0 0 .8em}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}

/* ---------- نوار بالا ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__in{
  max-width:1180px; margin:0 auto; padding:0 20px; height:60px;
  display:flex; align-items:center; gap:26px;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:800; text-decoration:none}
.brand:hover{text-decoration:none}
.brand__mark{
  width:22px; height:22px; border-radius:6px; flex:0 0 auto;
  background:var(--accent);
  box-shadow:inset 0 0 0 2px var(--surface), 0 0 0 1px var(--accent);
  position:relative;
}
.brand__mark::after{
  content:""; position:absolute; inset:5px 5px auto 5px; height:2px;
  background:var(--brass); border-radius:2px;
}
.brand__name{font-size:15px; letter-spacing:-.02em}
.topnav{display:flex; gap:4px; margin-inline-start:auto}
.topnav a{
  padding:7px 13px; border-radius:99px; color:var(--muted);
  font-size:13.5px; font-weight:600; text-decoration:none;
}
.topnav a:hover{background:var(--surface-2); color:var(--ink); text-decoration:none}
.topnav a.is-on{background:var(--accent-soft); color:var(--accent-hi)}
.who{display:flex; align-items:center; gap:12px; padding-inline-start:20px; border-inline-start:1px solid var(--line)}
.who__name{font-size:13px; color:var(--ink-2); font-weight:600; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- ساختار ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:34px 20px 80px}
.wrap--narrow{max-width:760px}
.pagehead{margin-bottom:26px}
.pagehead .eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.12em;
  color:var(--brass); text-transform:uppercase; margin-bottom:6px;
}
.pagehead p{color:var(--muted); margin:6px 0 0; max-width:62ch}
.row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.row--between{justify-content:space-between}
.spacer{flex:1}

/* ---------- کارت ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
}
.card__head{
  padding:16px 20px; border-bottom:1px solid var(--line-2);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.card__body{padding:20px}
.card__body--flush{padding:0}

/* ---------- دیوار ابزارها (عنصر امضا) ---------- */
.wall{display:grid; grid-template-columns:repeat(auto-fill, minmax(268px,1fr)); gap:16px}
.tool{
  position:relative; display:block; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px 20px 18px; text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow); overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tool::before{
  content:""; position:absolute; inset-inline-start:0; top:14px; bottom:14px;
  width:3px; border-radius:0 3px 3px 0; background:var(--brass);
}
.tool:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:#C9D5DE; text-decoration:none}
.tool__icon{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-hi); font-size:19px; margin-bottom:12px;
}
.tool__title{font-weight:700; font-size:15px; letter-spacing:-.02em}
.tool__desc{color:var(--muted); font-size:13px; margin-top:5px; line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.tool__foot{margin-top:14px; display:flex; align-items:center; gap:8px}
.tool__go{font-size:12.5px; font-weight:700; color:var(--accent)}

/* پلاک قفل‌شده */
.tool--locked{
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, rgba(105,124,142,.045) 7px 14px),
    var(--surface-2);
  border-style:dashed; box-shadow:none; cursor:default;
}
.tool--locked::before{background:var(--line)}
.tool--locked:hover{transform:none; box-shadow:none; border-color:var(--line)}
.tool--locked .tool__icon{background:#E6EBEF; color:var(--muted)}
.tool--locked .tool__title{color:var(--ink-2)}

/* ---------- برچسب ---------- */
.chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:99px; font-size:11.5px; font-weight:700;
  background:var(--surface-2); color:var(--muted); border:1px solid var(--line);
}
.chip--ok{background:var(--accent-soft); color:var(--accent-hi); border-color:transparent}
.chip--wait{background:var(--brass-soft); color:#8A6317; border-color:transparent}
.chip--off{background:var(--danger-soft); color:var(--danger); border-color:transparent}
.chip--brass{background:var(--brass-soft); color:#8A6317; border-color:transparent}

/* ---------- دکمه ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 18px; border-radius:10px; border:1px solid transparent;
  background:var(--accent); color:#fff; font:inherit; font-size:13.5px; font-weight:700;
  cursor:pointer; text-decoration:none; transition:background .15s, box-shadow .15s, opacity .15s;
  white-space:nowrap;
}
.btn:hover{background:var(--accent-hi); text-decoration:none; color:#fff}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent; color:var(--ink-2); border-color:var(--line)}
.btn--ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn--soft{background:var(--accent-soft); color:var(--accent-hi)}
.btn--soft:hover{background:#D6E8E1; color:var(--accent-hi)}
.btn--danger{background:var(--danger)}
.btn--danger:hover{background:#8F1E17}
.btn--sm{padding:6px 12px; font-size:12.5px; border-radius:8px}
.btn--block{width:100%}
.btn--google{
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
}
.btn--google:hover{background:var(--surface-2); color:var(--ink)}
.btn[disabled]{opacity:.5; pointer-events:none}

/* ---------- فرم ---------- */
.field{margin-bottom:16px}
.field > label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:6px}
.field .hint{font-size:12px; color:var(--muted); margin-top:5px; line-height:1.7}
.input, .select, .textarea{
  width:100%; padding:11px 13px; font:inherit; font-size:14px;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:10px; transition:border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.textarea{min-height:110px; resize:vertical; line-height:1.8}
.select{appearance:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' stroke='%23697C8E' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 12px center; background-size:12px; padding-inline-start:34px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
@media(max-width:640px){.grid-2{grid-template-columns:1fr}}

.switchrow{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface); cursor:pointer;
  margin-bottom:8px; transition:border-color .15s, background .15s;
}
.switchrow:hover{border-color:#C9D5DE}
.switchrow input{width:17px; height:17px; accent-color:var(--accent); flex:0 0 auto; cursor:pointer}
.switchrow small{display:block; color:var(--muted); font-size:12px; font-weight:400}
.switchrow strong{font-size:13.5px; font-weight:700}
.switchrow.is-on{background:var(--accent-soft); border-color:#BFD9D0}

/* ---------- پیام ---------- */
.note{
  padding:12px 15px; border-radius:10px; font-size:13.5px; margin-bottom:18px;
  border:1px solid transparent; line-height:1.8;
}
.note--ok{background:var(--accent-soft); color:var(--accent-hi)}
.note--err{background:var(--danger-soft); color:var(--danger)}
.note--info{background:var(--brass-soft); color:#7A5712}

/* ---------- جدول ---------- */
.tablewrap{overflow-x:auto}
table.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
.tbl th{
  text-align:right; padding:11px 16px; font-size:11.5px; font-weight:700; color:var(--muted);
  letter-spacing:.06em; background:var(--surface-2); border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.tbl td{padding:12px 16px; border-bottom:1px solid var(--line-2); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl .cell-actions{display:flex; gap:6px; justify-content:flex-end}

/* ---------- آمار ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:24px}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px}
.stat__k{font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.06em}
.stat__v{font-size:26px; font-weight:800; letter-spacing:-.03em; margin-top:2px}
.stat__v small{font-size:13px; font-weight:600; color:var(--muted)}

/* ---------- خالی ---------- */
.empty{text-align:center; padding:56px 24px; color:var(--muted)}
.empty h3{color:var(--ink); margin-bottom:6px}
.empty__mark{
  width:46px; height:46px; margin:0 auto 14px; border-radius:12px;
  border:2px dashed var(--line); display:grid; place-items:center; font-size:20px;
}

/* ---------- صفحه‌ی ورود ---------- */
.v-auth{min-height:100dvh; display:grid; grid-template-columns:1fr 1fr; background:var(--surface)}
/* در راست‌چین، فرم سمت راست بنشیند و پنل تیره سمت چپ */
.auth__main{order:1}
.auth__side{order:2}
.auth__side{
  background:#0F2A24;
  color:#E8F0ED; padding:56px 52px; display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.auth__side::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 10%, #000, transparent 75%);
          mask-image:radial-gradient(120% 90% at 70% 10%, #000, transparent 75%);
}
.auth__side > *{position:relative; z-index:1}
.auth__logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:15px}
.auth__logo .brand__mark{box-shadow:inset 0 0 0 2px #0F2A24, 0 0 0 1px rgba(255,255,255,.25)}
.auth__pitch h2{font-size:1.85rem; font-weight:800; line-height:1.55; letter-spacing:-.03em}
.auth__pitch p{color:#9EB8B0; margin-top:14px; max-width:38ch; font-size:14px}
.auth__plates{display:flex; flex-direction:column; gap:9px; margin-top:26px}
.plate{
  display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); font-size:13px;
}
.plate span:first-child{
  width:24px; height:24px; border-radius:6px; background:rgba(184,134,43,.22);
  color:#E7C078; display:grid; place-items:center; font-size:12px; flex:0 0 auto;
}
.plate--dim{opacity:.45; border-style:dashed}
.plate--dim span:first-child{background:rgba(255,255,255,.07); color:#9EB8B0}
.auth__foot{font-size:12px; color:#6E8B83}

.auth__main{display:grid; place-items:center; padding:40px 24px}
.auth__box{width:100%; max-width:372px}
.auth__box h1{font-size:1.5rem; margin-bottom:6px}
.auth__box > p{color:var(--muted); font-size:13.5px; margin-bottom:26px}
.divider{display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--muted); font-size:12px}
.divider::before,.divider::after{content:""; height:1px; background:var(--line); flex:1}
.auth__alt{margin-top:24px; text-align:center; font-size:13px; color:var(--muted)}
@media(max-width:900px){
  .v-auth{grid-template-columns:1fr}
  .auth__side{display:none}
}

/* ---------- نمای ابزار ---------- */
.toolbar{
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:12px 0;
}
.toolbar__in{max-width:1180px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:14px}
.toolbar h1{font-size:1.05rem}
.frame{width:100%; height:calc(100dvh - 118px); border:0; display:block; background:var(--surface)}

/* ---------- ادمین ---------- */
.adminlayout{display:grid; grid-template-columns:222px 1fr; gap:26px; align-items:start}
.side{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:8px; position:sticky; top:78px;
}
.side a{
  display:flex; align-items:center; gap:9px; padding:9px 13px; border-radius:9px;
  color:var(--ink-2); font-size:13.5px; font-weight:600; text-decoration:none;
}
.side a:hover{background:var(--surface-2); text-decoration:none}
.side a.is-on{background:var(--accent-soft); color:var(--accent-hi)}
.side .side__label{
  padding:12px 13px 6px; font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.1em;
}
@media(max-width:820px){
  .adminlayout{grid-template-columns:1fr}
  .side{position:static; display:flex; gap:4px; overflow-x:auto}
}

/* ---------- ابزارهای نمونه ---------- */
.tp{max-width:1180px; margin:0 auto; padding:26px 20px 70px}
.bars{display:flex; align-items:flex-end; gap:10px; height:190px; padding-top:10px}
.bars .bar{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:8px; height:100%}
.bars .bar i{
  display:block; width:100%; border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg, var(--accent) 0%, #1E8567 100%);
  min-height:4px; transition:height .5s cubic-bezier(.2,.8,.2,1);
}
.bars .bar b{font-size:11px; color:var(--muted); font-weight:600}
.bars .bar.is-peak i{background:linear-gradient(180deg, var(--brass) 0%, #D3A24A 100%)}

@media print{
  .topbar,.toolbar,.no-print{display:none !important}
  body{background:#fff}
  .card{box-shadow:none; border-color:#ccc}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}