/* ============================================================================
   bale.css — پالت پیام‌رسان بله روی استودیو
   ----------------------------------------------------------------------------
   قاعدهٔ سخت این فایل: **فقط رنگ**. هیچ display/grid/flex/position/اندازه/فاصله/
   z-index اینجا نوشته نمی‌شود، تا رنگ‌بندی هرگز چیدمان را نشکند. (این را تست
   ui-check تضمین می‌کند: اگر کسی در آینده پراپرتی چیدمانی اضافه کند، تست قرمز
   می‌شود.)
   پالت از سایت رسمی بله گرفته شده: سبزآبی #00B894 اصلی، آبی #238FF3،
   یاسی #ECE2F5، خاکستری #5E6C84، سفید.
   ==========================================================================*/

html[data-theme] /* ── روشن (پیش‌فرض) ─────────────────────────────────────────────────────── */
:root, html[data-theme="light"]{
  --bg: #eef6f4;
  --bg2: #ffffff;
  --surf: #ffffff;
  --surf2: #f2f9f7;
  --surf3: #e4f3ef;
  --line: #d5e9e4;
  --line2: #b7ddd4;
  --txt: #0e2622;
  --dim: #4b6b65;
  --dim2: #7d9a94;
  --amber: #00b894;      /* رنگ اصلی بله */
  --amber2: #008d73;
  --cyan: #238ff3;
  --violet: #a58bd4;
  --green: #00c08b;
  --red: #ef5350;
  --engrave: #3b9df5;
  --shadow: 0 16px 40px rgba(0, 92, 74, .16);
}

/* ── تاریک ──────────────────────────────────────────────────────────────── */
html[data-theme="dark"]{
  --bg: #0b1614;
  --bg2: #0f1e1b;
  --surf: #112320;
  --surf2: #152a26;
  --surf3: #1b352f;
  --line: #1f3b35;
  --line2: #2b4f47;
  --txt: #e6f3f0;
  --dim: #9dbcb5;
  --dim2: #6f8d87;
  --amber: #00d6a7;
  --amber2: #00b894;
  --cyan: #56b6ff;
  --violet: #b9a2e0;
  --green: #2fe0a8;
  --red: #ff6b6b;
  --engrave: #63b3ff;
  --shadow: 0 18px 44px rgba(0, 0, 0, .5);
}

html[data-theme] /* ── کاغذ و سطح‌ها ──────────────────────────────────────────────────────── */
body{
  background:
    radial-gradient(1100px 560px at 85% -10%, rgba(0, 184, 148, .10), transparent 62%),
    radial-gradient(900px 520px at -5% 0%, rgba(35, 143, 243, .07), transparent 58%),
    var(--bg);
  color: var(--txt);
}
html[data-theme="light"] body{
  background:
    radial-gradient(1100px 560px at 85% -12%, rgba(0, 184, 148, .12), transparent 60%),
    radial-gradient(820px 480px at -5% 0%, rgba(35, 143, 243, .06), transparent 55%),
    var(--bg);
}
html[data-theme] ::selection{ background: rgba(0, 184, 148, .22); }
html[data-theme] ::-webkit-scrollbar-thumb{ background: rgba(0, 184, 148, .22); }
html[data-theme] ::-webkit-scrollbar-thumb:hover{ background: rgba(0, 184, 148, .38); }

html[data-theme] .topbar{
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .82));
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .topbar{
  background: linear-gradient(180deg, rgba(17, 35, 32, .94), rgba(17, 35, 32, .8));
  border-bottom-color: var(--line);
}
html[data-theme] .brand .logo{
  background: linear-gradient(160deg, rgba(0, 184, 148, .18), rgba(35, 143, 243, .06));
  border-color: rgba(0, 184, 148, .32);
}
html[data-theme] .brand b .studio{ color: var(--amber); }

html[data-theme] .viewseg{ background: rgba(0, 184, 148, .06); border-color: var(--line); }
html[data-theme] .viewseg button{ color: var(--dim); }
html[data-theme] .viewseg button:hover{ color: var(--txt); background: rgba(0, 184, 148, .10); }
html[data-theme] .viewseg button.on{ background: var(--amber); color: #fff; }
html[data-theme="light"] .viewseg button.on{ background: var(--amber); color: #fff; }

html[data-theme] /* ── دکمه‌ها ────────────────────────────────────────────────────────────── */
.btn{
  background: var(--surf2);
  border-color: var(--line);
  color: var(--txt);
}
html[data-theme] .btn:hover{ background: var(--surf3); border-color: var(--line2); }
html[data-theme] .btn.primary{ background: var(--amber); border-color: var(--amber); color: #fff; }
html[data-theme] .btn.primary:hover{ background: var(--amber2); border-color: var(--amber2); color: #fff; }
html[data-theme="light"] .btn.primary{ background: var(--amber); color: #fff; }
html[data-theme="dark"] .btn.primary{ background: var(--amber); border-color: var(--amber); color: #06211c; }
html[data-theme="dark"] .btn.primary:hover{ background: var(--amber2); color: #06211c; }
html[data-theme] .btn.on{ border-color: var(--amber); color: var(--amber); background: rgba(0, 184, 148, .10); }
html[data-theme] .btn:focus-visible{ outline-color: rgba(0, 184, 148, .55); }
html[data-theme] .btn.kbd kbd{ background: rgba(0, 184, 148, .10); border-color: var(--line); }
html[data-theme] .dlmenu{ background: var(--surf); border-color: var(--line2); box-shadow: var(--shadow); }
html[data-theme] .dlmenu button:hover{ background: rgba(0, 184, 148, .10); }
html[data-theme] .dlmenu b{ color: var(--txt); }
html[data-theme] .dlmenu i{ color: var(--dim2); }
html[data-theme] .dlmenu button.hl{ border-color: rgba(0, 184, 148, .34); background: rgba(0, 184, 148, .08); }
html[data-theme] .dlmenu button.hl b{ color: var(--amber); }

html[data-theme] /* ── ورودی‌ها ───────────────────────────────────────────────────────────── */
input, html[data-theme] select{ background: var(--surf2); border-color: var(--line); color: var(--txt); }
html[data-theme] input:hover, html[data-theme] select:hover{ border-color: var(--line2); }
html[data-theme] input:focus, html[data-theme] select:focus{
  border-color: rgba(0, 184, 148, .65);
  box-shadow: 0 0 0 3px rgba(0, 184, 148, .16);
  background: var(--surf);
}

html[data-theme] /* ── کارت‌ها و بخش‌ها ───────────────────────────────────────────────────── */
.sec{ background: var(--surf); border-color: var(--line); }
html[data-theme] .sec > summary .hd, html[data-theme] .sec > summary .badge{ color: var(--dim2); }
html[data-theme] .badge{ background: rgba(0, 184, 148, .10); border-color: rgba(0, 184, 148, .25); color: var(--amber); }
html[data-theme] .quick{ background: var(--surf); border-color: var(--line2); }
html[data-theme="light"] .quick{ background: var(--surf); border-color: var(--line2); }
html[data-theme] .qhead b{ color: var(--txt); }
html[data-theme] .qhead small{ color: var(--dim2); }
html[data-theme] .qhint{ color: var(--dim2); }
html[data-theme] .qseg .viewseg{ background: rgba(0, 184, 148, .07); }
html[data-theme="light"] .qseg .viewseg{ background: rgba(0, 184, 148, .07); }
html[data-theme] .morehead .hd{ color: var(--dim2); }

html[data-theme] /* ── کتابخانه ───────────────────────────────────────────────────────────── */
.pcard{ background: var(--surf2); border-color: var(--line); }
html[data-theme] .pcard:hover{ background: var(--surf3); border-color: rgba(0, 184, 148, .45); }
html[data-theme] .pcard.on{ border-color: var(--amber); background: rgba(0, 184, 148, .08); }
html[data-theme] .pcard .pthumb{ background: var(--surf); }
html[data-theme] .pcard .star, html[data-theme] .pcard .cmptog{ background: var(--surf); border-color: var(--line); color: var(--dim); }
html[data-theme] .pcard .star.on, html[data-theme] .pcard .cmptog.on{ color: var(--amber); border-color: rgba(0, 184, 148, .45); }
html[data-theme] .catrow button, html[data-theme] .usagerow button{
  background: var(--surf2); border-color: var(--line); color: var(--dim);
}
html[data-theme] .catrow button.on{
  background: var(--amber); border-color: var(--amber); color: #fff;
}
html[data-theme] .catrow button.on i, html[data-theme] .catrow button.on .en{ color: rgba(255, 255, 255, .8); }
html[data-theme] .usagerow button b{ color: var(--amber); }
html[data-theme] .search{ background: var(--surf2); border-color: var(--line); }
html[data-theme] .cmpbar{ border-top-color: var(--line); }

html[data-theme] /* ── صحنه ───────────────────────────────────────────────────────────────── */
.statbar .chip{ background: var(--surf2); border-color: var(--line); color: var(--dim); }
html[data-theme] .chip .dot.amber{ background: var(--amber); }
html[data-theme] .chip .dot.cyan{ background: var(--cyan); }
html[data-theme] .chip .dot.violet{ background: var(--violet); }
html[data-theme] .chip .dot.green{ background: var(--green); }
html[data-theme] .chip.mode{ border-color: var(--line2); color: var(--dim2); }
html[data-theme] .pane{
  background: linear-gradient(180deg, rgba(0, 184, 148, .05), rgba(35, 143, 243, .02));
  border-color: var(--line);
}
html[data-theme="light"] .pane{ background: linear-gradient(180deg, #fbfefd, #f3faf8); }
html[data-theme] .pane-bar{ border-bottom-color: var(--line); }
html[data-theme] .ic{ color: var(--dim); }
html[data-theme] .ic:hover{ background: rgba(0, 184, 148, .10); color: var(--txt); }
html[data-theme] .ic.on{ background: var(--amber); border-color: var(--amber); color: #fff; }
html[data-theme] .sheetlabel{ color: var(--dim2); }
html[data-theme] .canvas-scroll{ background-color: var(--surf); background-image: radial-gradient(rgba(0, 120, 97, .16) 1px, transparent 1px); }
html[data-theme="light"] .canvas-scroll{ background-color: #ffffff; background-image: radial-gradient(rgba(0, 120, 97, .14) 1px, transparent 1px); }
html[data-theme] .canvas > svg{ background: var(--surf); }
html[data-theme="light"] .canvas > svg{ background: #ffffff; box-shadow: inset 0 0 40px rgba(0, 92, 74, .05); }
html[data-theme] .iso{ background: radial-gradient(70% 60% at 50% 30%, #ffffff 0%, #e9f7f3 66%, #dcf1eb 100%); }
html[data-theme="dark"] .iso{ background: radial-gradient(70% 60% at 50% 30%, #16302a 0%, #102420 66%, #0c1b18 100%); }
html[data-theme] .iso-meta{ border-top-color: var(--line); color: var(--dim2); }
html[data-theme] .iso-meta b{ color: var(--txt); }
html[data-theme] .lg.cut i{ background: var(--amber); }
html[data-theme] .lg.score i{ background: var(--cyan); }
html[data-theme] .lg.engrave i{ background: var(--engrave); }
html[data-theme] .partsbar{ background: linear-gradient(180deg, rgba(0, 184, 148, .05), rgba(0, 184, 148, .02)); border-color: var(--line); }
html[data-theme] .ptitle{ color: var(--dim2); }
html[data-theme] .ptable th{ color: var(--dim2); border-bottom-color: var(--line); }
html[data-theme] .ptable td{ border-bottom-color: var(--line); }
html[data-theme] .ptable tr:hover td{ background: rgba(0, 184, 148, .07); }
html[data-theme] .selinfo{ color: var(--amber); }

html[data-theme] /* ── کار و هزینه ────────────────────────────────────────────────────────── */
.jobcard{ background: var(--surf2); border-color: var(--line); }
html[data-theme] .jobcard b, html[data-theme] .jobcard strong{ color: var(--txt); }
html[data-theme] .warnbox{ color: var(--dim2); }
html[data-theme] .warnbox.on{
  background: rgba(239, 83, 80, .08);
  border-color: rgba(239, 83, 80, .38);
  color: #c62828;
}
html[data-theme="dark"] .warnbox.on{ color: #ff9d9a; }
html[data-theme] .jointlib .jc, html[data-theme] .jc{ background: var(--surf2); border-color: var(--line); }
html[data-theme] .jc.on, html[data-theme] .jc:hover{ border-color: var(--amber); color: var(--amber); }
html[data-theme] .jthumb path{ stroke: var(--amber); }
html[data-theme="light"] .jthumb path{ stroke: #0b8f74; }

html[data-theme] /* ── پوسته‌های شناور ────────────────────────────────────────────────────── */
.modal{ background: rgba(8, 44, 38, .42); }
html[data-theme] .modal-card, html[data-theme] .cmdk-card{ background: var(--surf); border-color: var(--line2); box-shadow: var(--shadow); }
html[data-theme] .modal-head{ border-bottom-color: var(--line); }
html[data-theme] .cmdk-card input{ background: var(--surf2); }
html[data-theme] .cmdk-list .item:hover, html[data-theme] .cmdk-list .item.on{ background: rgba(0, 184, 148, .10); }
html[data-theme] .cmdk-foot{ border-top-color: var(--line); color: var(--dim2); }
html[data-theme] .cmdk-foot kbd{ background: var(--surf2); border-color: var(--line); }
html[data-theme] .toast{ background: rgba(14, 38, 34, .96); border-color: rgba(0, 184, 148, .35); color: #eafaf6; }
html[data-theme="light"] .toast{ background: rgba(255, 255, 255, .98); color: var(--txt); border-color: rgba(0, 184, 148, .40); }
html[data-theme] .toast.bad{ border-color: rgba(239, 83, 80, .5); color: #ffc9c9; }
html[data-theme] .wz-steps span.on{ background: var(--amber); color: #fff; }
html[data-theme] .wz-nav{ border-top-color: var(--line); }
html[data-theme] .wz-prev, html[data-theme] .cmpthumb{ background: radial-gradient(70% 60% at 50% 30%, #ffffff, #e9f7f3 70%); }
html[data-theme] .cmp-grid .col{ border-color: var(--line); }
html[data-theme] .saves .sv{ background: var(--surf2); border-color: var(--line); }
html[data-theme] .saves .sv:hover{ border-color: var(--amber); }
html[data-theme] .ftr{ border-top-color: var(--line); color: var(--dim2); }
html[data-theme] .ftr b{ color: var(--dim); }
html[data-theme] .filebtn{ background: var(--surf2); border-color: var(--line); color: var(--dim); }
html[data-theme] .filebtn:hover{ border-color: rgba(0, 184, 148, .5); color: var(--txt); }
html[data-theme] .oplist .op{ background: var(--surf2); border-color: var(--line); }
html[data-theme] .empty{ color: var(--dim2); }
html[data-theme] .hint{ color: var(--dim2); }
html[data-theme] .help b{ color: var(--txt); }
html[data-theme] .clamped{ border-color: var(--red); }
html[data-theme] .err{ color: #c62828; }
html[data-theme="dark"] .err{ color: #ff9d9a; }