/* StudioZ — Phong cách giao diện dashboard theo hệ điều hành (chỉ trên máy tính).
   <html data-os="mac">: phong cách macOS (Sonoma/Sequoia) · <html data-os="win">: phong cách Windows 11 (Fluent).
   Tự nhận diện hệ điều hành khi mở app; chỉnh ở Tài khoản › Giao diện › Bố cục › Phong cách hệ điều hành.
   Bộ màu / màu nhấn / phông chữ người dùng tự chọn vẫn được ưu tiên (đặt trực tiếp trên thẻ html). */

/* =====================================================================
   macOS
   ===================================================================== */
html[data-os="mac"]{
 --ff:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;--ffd:var(--ff);
 --bg:#f5f5f7;--card:#ffffff;--tx:#1d1d1f;--mu:#6e6e73;--bd:#e3e3e8;--ac:#007aff;--acx:#ffffff;--ok:#248a3d;--bad:#d70015;--warn:#b25000;--pu:#8944ab;--bl:#0071e3;
 --r1:6px;--r2:10px;--r3:12px;
 --o-side:rgba(232,232,237,.78);--o-sideb:rgba(0,0,0,.06);--o-sel:rgba(0,0,0,.09);--o-hov:rgba(0,0,0,.045);--o-sech:rgba(60,60,67,.55);
 --o-btn:#ffffff;--o-btnb:rgba(0,0,0,.14);--o-btns:0 .5px 1.5px rgba(0,0,0,.14);--o-in:#ffffff;--o-inb:rgba(0,0,0,.16);--o-ring:rgba(0,122,255,.38);
 --o-seg:rgba(116,116,128,.12);--o-segon:#ffffff;--o-cards:0 0 0 .5px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.05);--o-stripe:rgba(0,0,0,.025);--o-head:rgba(60,60,67,.6)}
@media (prefers-color-scheme:dark){html[data-os="mac"]:not([data-theme="light"]){
 --bg:#1e1e20;--card:#2a2a2d;--tx:#f5f5f7;--mu:#98989f;--bd:#3a3a3d;--ac:#0a84ff;--acx:#ffffff;--ok:#32d74b;--bad:#ff453a;--warn:#ff9f0a;--pu:#bf5af2;--bl:#409cff;
 --o-side:rgba(40,40,44,.8);--o-sideb:rgba(255,255,255,.07);--o-sel:rgba(255,255,255,.11);--o-hov:rgba(255,255,255,.055);--o-sech:rgba(235,235,245,.45);
 --o-btn:#58585c;--o-btnb:rgba(255,255,255,.08);--o-btns:0 .5px 1px rgba(0,0,0,.4),inset 0 .5px 0 rgba(255,255,255,.14);--o-in:#1c1c1e;--o-inb:rgba(255,255,255,.14);--o-ring:rgba(10,132,255,.5);
 --o-seg:rgba(118,118,128,.24);--o-segon:#636366;--o-cards:0 0 0 .5px rgba(255,255,255,.08),0 1px 3px rgba(0,0,0,.3);--o-stripe:rgba(255,255,255,.03);--o-head:rgba(235,235,245,.55)}}
html[data-os="mac"][data-theme="dark"]{
 --bg:#1e1e20;--card:#2a2a2d;--tx:#f5f5f7;--mu:#98989f;--bd:#3a3a3d;--ac:#0a84ff;--acx:#ffffff;--ok:#32d74b;--bad:#ff453a;--warn:#ff9f0a;--pu:#bf5af2;--bl:#409cff;
 --o-side:rgba(40,40,44,.8);--o-sideb:rgba(255,255,255,.07);--o-sel:rgba(255,255,255,.11);--o-hov:rgba(255,255,255,.055);--o-sech:rgba(235,235,245,.45);
 --o-btn:#58585c;--o-btnb:rgba(255,255,255,.08);--o-btns:0 .5px 1px rgba(0,0,0,.4),inset 0 .5px 0 rgba(255,255,255,.14);--o-in:#1c1c1e;--o-inb:rgba(255,255,255,.14);--o-ring:rgba(10,132,255,.5);
 --o-seg:rgba(118,118,128,.24);--o-segon:#636366;--o-cards:0 0 0 .5px rgba(255,255,255,.08),0 1px 3px rgba(0,0,0,.3);--o-stripe:rgba(255,255,255,.03);--o-head:rgba(235,235,245,.55)}

html[data-os="mac"] body{-webkit-font-smoothing:antialiased;letter-spacing:-.003em}
html[data-os="mac"] h1{font-size:22px;font-weight:700;letter-spacing:-.02em}
html[data-os="mac"] h2{font-size:15px;font-weight:600;letter-spacing:-.01em}
html[data-os="mac"] .topbar h1{font-size:24px;font-weight:700;letter-spacing:-.022em}

/* thẻ */
html[data-os="mac"] .card{border:0;box-shadow:var(--o-cards);border-radius:var(--r2)}

/* thanh bên kiểu Finder / Cài đặt hệ thống */
html[data-os="mac"] .side{background:var(--o-side)!important;-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px);border:.5px solid var(--o-sideb)!important;border-radius:12px;color:var(--tx)!important;box-shadow:0 1px 3px rgba(0,0,0,.06)!important;padding:8px}
html[data-os="mac"] .side .sbt,html[data-os="mac"] .side .who,html[data-os="mac"] .side .who b{color:var(--tx)!important}
html[data-os="mac"] .side .mu{color:var(--mu)!important}
html[data-os="mac"] .side .nvh{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--o-sech)!important;padding:12px 10px 3px}
html[data-os="mac"] .side .nv{padding:5px 9px;border-radius:6px;font-size:13.5px;color:var(--tx)!important;background:transparent!important;border:0!important;box-shadow:none!important;margin-bottom:1px;gap:9px}
html[data-os="mac"] .side .nv .ic{color:var(--ac)!important;width:16px;height:16px}
html[data-os="mac"] .side .nv:hover{background:var(--o-hov)!important}
html[data-os="mac"] .side .nv.on{background:var(--o-sel)!important;color:var(--tx)!important;font-weight:500}
html[data-os="mac"] .side .railbtn{background:transparent;border:0;color:var(--mu)}

/* nút bấm kiểu macOS */
html[data-os="mac"] button,html[data-os="mac"] .btn{background:var(--o-btn);border:.5px solid var(--o-btnb);box-shadow:var(--o-btns);border-radius:6px;padding:5px 13px;color:var(--tx);font-weight:400;line-height:1.3}
html[data-os="mac"] button:hover:not(:disabled),html[data-os="mac"] .btn:hover{filter:brightness(.98)}
html[data-os="mac"] button:active:not(:disabled){filter:brightness(.93)}
html[data-os="mac"] button.pri,html[data-os="mac"] .btn.pri,html[data-os="mac"] button.on:not(.nv){background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 82%,#fff),var(--ac));color:var(--acx);border-color:color-mix(in srgb,var(--ac) 70%,#000);box-shadow:0 .5px 1.5px rgba(0,0,0,.2),inset 0 .5px 0 rgba(255,255,255,.25)}
html[data-os="mac"] button.sm,html[data-os="mac"] .btn.sm{padding:3px 9px;font-size:12.5px;border-radius:5px}
html[data-os="mac"] button.danger{color:var(--bad)}
html[data-os="mac"] button:focus-visible,html[data-os="mac"] .btn:focus-visible{outline:none;box-shadow:0 0 0 3.5px var(--o-ring)}
html[data-os="mac"] .ibtn{border-radius:7px}

/* ô nhập */
html[data-os="mac"] input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]),html[data-os="mac"] select,html[data-os="mac"] textarea{background:var(--o-in);border:.5px solid var(--o-inb);border-radius:6px;padding:6px 9px;box-shadow:inset 0 .5px 1px rgba(0,0,0,.06);transition:box-shadow .15s}
html[data-os="mac"] input:focus,html[data-os="mac"] select:focus,html[data-os="mac"] textarea:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3.5px var(--o-ring)}
html[data-os="mac"] label{font-size:12.5px;font-weight:500}
html[data-os="mac"] input[type=checkbox],html[data-os="mac"] input[type=radio]{accent-color:var(--ac)}

/* công tắc kiểu macOS cho các tuỳ chọn bật/tắt */
html[data-os="mac"] .swt input[type=checkbox]{-webkit-appearance:none;appearance:none;width:32px;height:19px;border-radius:10px;background:rgba(120,120,128,.32);position:relative;cursor:pointer;transition:background .2s;margin-top:1px;border:0}
html[data-os="mac"] .swt input[type=checkbox]:before{content:'';position:absolute;left:2px;top:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .2s}
html[data-os="mac"] .swt input[type=checkbox]:checked{background:var(--ac)}
html[data-os="mac"] .swt input[type=checkbox]:checked:before{transform:translateX(13px)}

/* điều khiển phân đoạn (segmented control) */
html[data-os="mac"] .seg{display:inline-flex;gap:0;padding:2px;background:var(--o-seg);border-radius:8px;flex-wrap:wrap}
html[data-os="mac"] .seg button{background:transparent;border:0;box-shadow:none;border-radius:6px;padding:3px 12px;font-size:12.5px;color:var(--tx);filter:none}
html[data-os="mac"] .seg button.on{background:var(--o-segon);color:var(--tx);box-shadow:0 1px 2px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.05);font-weight:500}
html[data-os="mac"] .snv{background:var(--o-seg);border:0;box-shadow:none!important;border-radius:9px;padding:3px;gap:2px;display:inline-flex;max-width:100%}
html[data-os="mac"] .snv button{background:transparent;border:0;box-shadow:none;color:var(--tx);padding:5px 14px;border-radius:7px;font-weight:500;font-size:13px;filter:none}
html[data-os="mac"] .snv button .ic{color:var(--mu)}
html[data-os="mac"] .snv button.on{background:var(--o-segon);color:var(--tx);box-shadow:0 1px 2px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.05)}
html[data-os="mac"] .snv button.on .ic{color:var(--ac)}
html[data-os="mac"] .snv button:not(.on):hover{background:rgba(127,127,127,.1)}

/* nhãn, bảng, lịch */
html[data-os="mac"] .tag{border:0;background:rgba(120,120,128,.14);font-weight:500;padding:2px 8px}
html[data-os="mac"] .tag.cho{background:rgba(255,149,0,.15)}html[data-os="mac"] .tag.xn{background:color-mix(in srgb,var(--ac) 14%,transparent)}html[data-os="mac"] .tag.ht{background:rgba(52,199,89,.15)}html[data-os="mac"] .tag.huy{background:rgba(255,59,48,.13)}
html[data-os="mac"] .card th{font-size:11.5px;font-weight:600;color:var(--o-head);border-top:0;border-bottom:.5px solid var(--bd)}
html[data-os="mac"] .card td{border-top:0;font-size:13.5px}
html[data-os="mac"] .card table tr:nth-child(even) td{background:var(--o-stripe)}
html[data-os="mac"] .cal button{border:0;box-shadow:none;background:transparent;border-radius:8px}
html[data-os="mac"] .cal button:hover{background:var(--o-hov)}
html[data-os="mac"] .cal button.today{background:color-mix(in srgb,var(--ac) 12%,transparent);box-shadow:none}
html[data-os="mac"] .row{border-top:.5px solid var(--bd)}
html[data-os="mac"] .kpi{font-weight:600;letter-spacing:-.02em}
html[data-os="mac"] .bg{background:#ff3b30}
html[data-os="mac"] .nbar{border-left-width:3px}
html[data-os="mac"] .studio-header{border-radius:14px}
html[data-os="mac"] ::selection{background:color-mix(in srgb,var(--ac) 30%,transparent)}

/* =====================================================================
   Windows 11 (Fluent)
   ===================================================================== */
html[data-os="win"]{
 --ff:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;--ffd:"Segoe UI Variable Display","Segoe UI Variable","Segoe UI",system-ui,sans-serif;
 --bg:#f3f3f3;--card:#fbfbfb;--tx:#1b1b1b;--mu:#5f5f5f;--bd:#e5e5e5;--ac:#005fb8;--acx:#ffffff;--ok:#0f7b0f;--bad:#c42b1c;--warn:#9d5d00;--pu:#7a3fd1;--bl:#005fb8;
 --r1:4px;--r2:8px;--r3:8px;
 --o-sel:rgba(0,0,0,.055);--o-hov:rgba(0,0,0,.037);--o-btn:#fbfbfb;--o-btnh:#f6f6f6;--o-btnb:rgba(0,0,0,.0578);--o-btnbb:rgba(0,0,0,.1622);
 --o-in:#ffffffb3;--o-inf:#ffffff;--o-inb:rgba(0,0,0,.0578);--o-inbb:rgba(0,0,0,.4458);--o-cardb:rgba(0,0,0,.0578);--o-stroke:rgba(0,0,0,.0803);--o-head:#5f5f5f;--o-tgl:rgba(0,0,0,.6063)}
@media (prefers-color-scheme:dark){html[data-os="win"]:not([data-theme="light"]){
 --bg:#202020;--card:#2b2b2b;--tx:#ffffff;--mu:#c5c5c5;--bd:#3a3a3a;--ac:#60cdff;--acx:#000000;--ok:#6ccb5f;--bad:#ff99a4;--warn:#fce100;--pu:#c6a1ff;--bl:#60cdff;
 --o-sel:rgba(255,255,255,.0605);--o-hov:rgba(255,255,255,.0419);--o-btn:#2d2d2d;--o-btnh:#323232;--o-btnb:rgba(255,255,255,.0698);--o-btnbb:rgba(255,255,255,.0698);
 --o-in:#ffffff0f;--o-inf:#1f1f1f;--o-inb:rgba(255,255,255,.0698);--o-inbb:rgba(255,255,255,.5442);--o-cardb:rgba(0,0,0,.1);--o-stroke:rgba(255,255,255,.0837);--o-head:#c5c5c5;--o-tgl:rgba(255,255,255,.786)}}
html[data-os="win"][data-theme="dark"]{
 --bg:#202020;--card:#2b2b2b;--tx:#ffffff;--mu:#c5c5c5;--bd:#3a3a3a;--ac:#60cdff;--acx:#000000;--ok:#6ccb5f;--bad:#ff99a4;--warn:#fce100;--pu:#c6a1ff;--bl:#60cdff;
 --o-sel:rgba(255,255,255,.0605);--o-hov:rgba(255,255,255,.0419);--o-btn:#2d2d2d;--o-btnh:#323232;--o-btnb:rgba(255,255,255,.0698);--o-btnbb:rgba(255,255,255,.0698);
 --o-in:#ffffff0f;--o-inf:#1f1f1f;--o-inb:rgba(255,255,255,.0698);--o-inbb:rgba(255,255,255,.5442);--o-cardb:rgba(0,0,0,.1);--o-stroke:rgba(255,255,255,.0837);--o-head:#c5c5c5;--o-tgl:rgba(255,255,255,.786)}

html[data-os="win"] h1{font-family:var(--ffd);font-size:20px;font-weight:600}
html[data-os="win"] h2{font-size:15px;font-weight:600}
html[data-os="win"] .topbar h1{font-family:var(--ffd);font-size:28px;font-weight:600;letter-spacing:0}

/* thẻ (Card) trên nền Mica */
html[data-os="win"] .card{border:1px solid var(--o-stroke);box-shadow:none;border-radius:8px}

/* NavigationView */
html[data-os="win"] .side{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0;color:var(--tx)!important;padding:4px 4px 4px 0}
html[data-os="win"] .side .sbt,html[data-os="win"] .side .who,html[data-os="win"] .side .who b{color:var(--tx)!important}
html[data-os="win"] .side .mu{color:var(--mu)!important}
html[data-os="win"] .side .nvh{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--tx)!important;opacity:.62;padding:14px 12px 4px}
html[data-os="win"] .side .nv{position:relative;padding:8px 12px;border-radius:4px;font-size:14px;color:var(--tx)!important;background:transparent!important;border:0!important;box-shadow:none!important;margin-bottom:3px;gap:14px}
html[data-os="win"] .side .nv .ic{color:var(--tx)!important;width:16px;height:16px}
html[data-os="win"] .side .nv:hover{background:var(--o-hov)!important}
html[data-os="win"] .side .nv.on{background:var(--o-sel)!important;color:var(--tx)!important}
html[data-os="win"] .side .nv.on:before{content:'';position:absolute;left:0;top:50%;width:3px;height:16px;margin-top:-8px;border-radius:2px;background:var(--ac)}
html[data-os="win"] .side .railbtn{background:transparent;border:0;color:var(--tx)}

/* nút bấm Fluent */
html[data-os="win"] button,html[data-os="win"] .btn{background:var(--o-btn);border:1px solid var(--o-btnb);border-bottom-color:var(--o-btnbb);border-radius:4px;padding:5px 11px;color:var(--tx);font-weight:400;line-height:1.35;box-shadow:none}
html[data-os="win"] button:hover:not(:disabled),html[data-os="win"] .btn:hover{background:var(--o-btnh)}
html[data-os="win"] button:active:not(:disabled){color:var(--mu);border-bottom-color:var(--o-btnb)}
html[data-os="win"] button.pri,html[data-os="win"] .btn.pri,html[data-os="win"] button.on:not(.nv){background:var(--ac);color:var(--acx);border-color:rgba(255,255,255,.08);border-bottom-color:rgba(0,0,0,.4)}
html[data-os="win"] button.pri:hover:not(:disabled),html[data-os="win"] button.on:not(.nv):hover{background:color-mix(in srgb,var(--ac) 90%,var(--bg))}
html[data-os="win"] button.pri:active:not(:disabled){color:color-mix(in srgb,var(--acx) 78%,var(--ac))}
html[data-os="win"] button.sm,html[data-os="win"] .btn.sm{padding:3px 9px;font-size:13px}
html[data-os="win"] button.danger{color:var(--bad)}
html[data-os="win"] button:focus-visible,html[data-os="win"] .btn:focus-visible{outline:2px solid var(--tx);outline-offset:1px}

/* ô nhập TextBox */
html[data-os="win"] input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]),html[data-os="win"] select,html[data-os="win"] textarea{background:var(--o-in);border:1px solid var(--o-inb);border-bottom-color:var(--o-inbb);border-radius:4px;padding:6px 10px}
html[data-os="win"] input:not([type=checkbox]):not([type=radio]):focus,html[data-os="win"] select:focus,html[data-os="win"] textarea:focus{outline:none;background:var(--o-inf);border-bottom:2px solid var(--ac);padding-bottom:5px}
html[data-os="win"] label{font-size:13px;color:var(--tx);opacity:.85}
html[data-os="win"] input[type=checkbox],html[data-os="win"] input[type=radio]{accent-color:var(--ac)}

/* ToggleSwitch */
html[data-os="win"] .swt input[type=checkbox]{-webkit-appearance:none;appearance:none;width:40px;height:20px;border-radius:10px;border:1px solid var(--o-tgl);background:transparent;position:relative;cursor:pointer;margin-top:1px;transition:background .15s}
html[data-os="win"] .swt input[type=checkbox]:before{content:'';position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--o-tgl);transition:transform .15s,width .1s}
html[data-os="win"] .swt input[type=checkbox]:checked{background:var(--ac);border-color:var(--ac)}
html[data-os="win"] .swt input[type=checkbox]:checked:before{background:var(--acx);transform:translateX(20px)}

/* SelectorBar: chữ + thanh chỉ báo màu nhấn dưới mục đang chọn */
html[data-os="win"] .seg{gap:2px}
html[data-os="win"] .seg button{position:relative;background:transparent;border:0;border-radius:4px;color:var(--mu);padding:5px 12px 8px}
html[data-os="win"] .seg button:hover:not(:disabled){background:var(--o-hov);color:var(--tx)}
html[data-os="win"] .seg button.on{background:transparent;color:var(--tx);font-weight:600}
html[data-os="win"] .seg button.on:after{content:'';position:absolute;left:50%;bottom:1px;width:16px;height:3px;margin-left:-8px;border-radius:2px;background:var(--ac)}
html[data-os="win"] .snv{background:transparent;border:0;box-shadow:none!important;border-radius:0;padding:0;gap:4px;border-bottom:1px solid var(--o-stroke)}
html[data-os="win"] .snv button{position:relative;background:transparent;border:0;color:var(--mu);padding:8px 14px 10px;border-radius:4px 4px 0 0;font-weight:400;font-size:14px}
html[data-os="win"] .snv button .ic{color:inherit}
html[data-os="win"] .snv button:not(.on):hover{background:var(--o-hov);color:var(--tx)}
html[data-os="win"] .snv button.on{background:transparent;color:var(--tx);font-weight:600}
html[data-os="win"] .snv button.on:after{content:'';position:absolute;left:50%;bottom:-1px;width:20px;height:3px;margin-left:-10px;border-radius:2px;background:var(--ac)}
html[data-os="win"] .snv button.on .shbd{background:var(--ac);color:var(--acx)}

/* nhãn, bảng, lịch */
html[data-os="win"] .tag{border-radius:4px;border:1px solid var(--o-stroke);background:var(--o-hov)}
html[data-os="win"] .card th{font-size:12px;font-weight:600;color:var(--o-head);border-top:0;border-bottom:1px solid var(--o-stroke)}
html[data-os="win"] .card td{border-top:1px solid var(--o-stroke);font-size:14px}
html[data-os="win"] .card table tr:hover td{background:var(--o-hov)}
html[data-os="win"] .cal button{border-radius:4px}
html[data-os="win"] .cal button.today{border:1px solid var(--ac);box-shadow:inset 0 0 0 1px var(--ac)}
html[data-os="win"] .row{border-top:1px solid var(--o-stroke)}
html[data-os="win"] .kpi{font-family:var(--ffd);font-weight:600}
html[data-os="win"] .bg{background:var(--bad)}
html[data-os="win"] .studio-header{border-radius:8px}
html[data-os="win"] ::selection{background:color-mix(in srgb,var(--ac) 35%,transparent)}

/* chung */
html[data-os] *{scrollbar-width:thin}
html[data-os] .chfab{border-radius:50%}