/* ★ VỎ STUDIO SÁNG — bảng màu của bộ thiết kế «OpenCADs Arena» (CEO 17/09 01:07:
   «trang studio, ví dùng giao diện studio, ví mới trong folder Giao diện»).

   Nạp SAU `vo-studio.css` và TRƯỚC <style> riêng của màn: cùng tên biến, chỉ
   đổi GIÁ TRỊ — đúng luật của chính tệp vỏ («đổi giá trị thì không sửa chỗ
   nào»). Màn nào nạp tệp này thì thanh bên dùng chung (thanh-ben.js) cũng
   dựng bản SÁNG.

   Phạm vi 17/09: `studio.html` · `tool.html` (cặp DANH SÁCH → CHI TIẾT). Năm màn
   còn lại của khu Studio (dang-tool · quan-ly-tool · connect · ket-noi · xuong)
   còn 60+ chỗ viết cứng `rgba(255,255,255,…)`/`color:#fff` cho nền tối — bật
   tệp này lên đó khi chưa sửa là chữ trắng trên nền trắng. Chuyển ở vòng sau,
   từng màn, có ảnh chụp.

   Số đo lấy từ bản thiết kế: nền khung #F5F5F3 · thẻ trắng · viền
   rgba(20,20,20,.06–.08) · chữ #151515 / #6E6E73 / #9A9A9F · cam #FF6A1A ·
   mục đang chọn rgba(255,106,26,.10) · bóng 0 30px 70px -34px rgba(20,20,20,.34). */
:root{
  color-scheme: light;

  --page:#ECECEA;
  --nen:#F5F5F3;
  --bg:var(--nen);
  --side:rgba(255,255,255,.5);
  --sunk:#EFEFED;
  --surface:#FBFBFA;
  --surface-2:#FEFEFE;

  --ink:#151515;
  --ink-2:#6E6E73;
  --ink-3:#8E8E93;
  --ink-4:#9A9A9F;

  --line:rgba(20,20,20,.08);
  --hair:rgba(20,20,20,.05);
  --hairline:rgba(20,20,20,.08);

  --brand:#FF6A1A;
  --brand-600:#EA580C;
  --brand-soft:rgba(255,106,26,.10);
  --brand-on:#EA580C;
  --orange:#FF6A1A;
  --orange-600:#EA580C;
  --orange-050:rgba(255,106,26,.10);

  --ok:#1E9E6A;   --ok-on:#0F7A4F;  --ok-050:rgba(30,158,106,.12);
  --warn:#B7791F;
  --bad:#D93B3B;  --bad-on:#B42525;
  --err:#D93B3B;
  --luc:#1E9E6A;  --luc-050:rgba(30,158,106,.12);
  --blue:#2563EB;

  --solid:#151515;
  --on-solid:#FFFFFF;

  --ava-nen:#E9E9E7;
  --ava-chu:#6E6E73;
  --code:#151515;

  --sh-1:0 1px 2px rgba(20,20,20,.06);
  --sh-2:0 10px 30px rgba(20,20,20,.10);
  --sh-3:0 30px 70px -34px rgba(20,20,20,.34);

  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
html{background:var(--nen)}
input,textarea,select{color-scheme:light}
::-webkit-scrollbar-thumb{background:rgba(20,20,20,.18);background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(20,20,20,.3);background-clip:content-box}

/* ── studio.html: rail ba nhịp mặc kiểu cột phụ 196px của bản thiết kế ──────
   (tấm 17 «Participant Studio»: cột phụ nền rgba(255,255,255,.5), tiêu đề nhóm
   11px 700 viết hoa #9A9A9F, mục 13px bo 10px, đang chọn cam nhạt). Chỉ đổi
   màu và số đo — ba nhịp (IA CEO 11/09) và mọi mục giữ nguyên. */
.sh-goc .rail{width:196px;background:var(--side);border-right:1px solid rgba(20,20,20,.06)}
.sh-goc .rail.hep{width:64px}
.sh-goc .rg{padding:20px 14px 4px}
.sh-goc .rg>h2{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;color:#9A9A9F;padding:0 10px}
.sh-goc .ri{height:auto;padding:9px 11px;border-radius:10px;font-size:13px;color:#6E6E73}
.sh-goc .ri:hover{background:rgba(20,20,20,.04);color:var(--ink)}
.sh-goc .ri.on{background:rgba(255,106,26,.10);color:#FF6A1A}
.sh-goc .ri.on>span.lb{font-weight:600}
.sh-goc .ri>span.bg{background:var(--brand-soft);color:var(--brand-on)}
.sh-goc .rcol:hover{background:rgba(20,20,20,.05)}
.sh-goc .rnhip .rn.on{background:rgba(255,106,26,.10);color:#FF6A1A}
.sh-goc .tpick:hover{border-color:rgba(20,20,20,.22)}
.sh-goc .tpick .dot{background:rgba(20,20,20,.25)}
.sh-goc .tt-chip{background:rgba(20,20,20,.05)}
.sh-goc .tb{background:rgba(255,255,255,.66);backdrop-filter:blur(24px)}
/* brand đã nằm trên thanh bên dùng chung — không lặp ở thanh trên khi thanh ấy đứng */
@media (min-width:1024px){ html.oc-co-thanh .sh-goc .tb .lock{display:none} }
/* tool.html · quan-ly-tool.html: nút phụ trong hộp báo dùng nền trắng mờ cho nền tối */
.bao button{background:rgba(20,20,20,.08)!important}
/* dang-tool.html (bảng bảy bước): ô/thanh/đường kẻ khai trắng mờ trên thẻ tối —
   những chỗ nằm TRÊN ẢNH hoặc trên nền cam/xanh giữ nguyên (chữ trắng đúng chỗ). */
.sfs .sf-m div{background:rgba(20,20,20,.05)!important}
.sfs .sf-m div.on{background:rgba(20,20,20,.09)!important}
.sfs .sf-p{background:rgba(20,20,20,.10)!important}
.sfs .sec::after{background:rgba(20,20,20,.08)!important}
.sfs .sf-done .fx span{background:rgba(20,20,20,.06)!important;color:var(--ink-2)!important}
.sfs .sf-id span{background:rgba(20,20,20,.06)!important;color:var(--ink-3)!important}
.sfs .cc b{color:var(--ink)!important}
.oneline .cp{border-color:rgba(20,20,20,.18)!important}
/* xuong.html: đường kẻ đậm khai trắng mờ */
:root{--line-dam:rgba(20,20,20,.18)}
/* connect.html · ket-noi.html: rãnh công tắc khai trắng mờ (nút gạt vẫn trắng) */
.sw{background:rgba(20,20,20,.14)!important}
.swr[aria-checked="true"] .sw{background:var(--orange)!important}
/* tool.html: thanh trên viết cứng nền tối rgba(16,17,19,.86) — đổi sang kính sáng của
   bản thiết kế; logo đã nằm trên thanh bên dùng chung nên không lặp khi thanh ấy đứng. */
.ochdr{background:rgba(255,255,255,.66)!important;backdrop-filter:blur(24px);border-bottom:1px solid rgba(20,20,20,.06)}
@media (min-width:1024px){ html.oc-co-thanh .ochdr .lg{visibility:hidden} }