/* ANISSOFEA Fashion — Seller Centre v9: lapisan reka bentuk "s9"
   ---------------------------------------------------------------------------------------------
   Fail ini mereka bentuk semula Seller Centre (#bo), laci (#bd) dan Studio Produk (#stu) supaya
   ringkas, mudah dan profesional. Ia dimuatkan SELEPAS seller-centre.css / responsif.css dan
   setiap peraturan bermula dengan `.s9` (kelas pada <html>), jadi ia mengatasi gaya lama tanpa
   menyentuh kedai (storefront) atau cetakan (#prt — waybill & invois kekal seperti asal).

   Susunan:  1 token · 2 rangka (sisi, bar atas, carian, bar bawah) · 3 komponen asas
             4 laci & editor lanjutan · 5 laman Utama · 6 senarai produk · 7 Studio Produk
             8 Ejen AI Produk · 9 tetapan · 10 log masuk · 11 responsif · 12 gerakan
   Markup baharu dijana oleh js/24-sc-ui.js, js/25-sc-studio.js dan js/26-sc-ejen-produk.js.
*/

/* ============ 1. TOKEN ============ */
.s9{
  --s-bg:#f6f5f2; --s-card:#fff; --s-soft:#faf9f6; --s-line:#e8e5df; --s-line2:#f1efea; --s-line3:#d9d5ce;
  --s-ink:#1d1a19; --s-ink2:#4a4441; --s-mut:#7b746f;
  --s-acc:#a63d57; --s-acc-d:#8a2f47; --s-acc-l:#fbeef1;
  --s-ok:#1f7a4d; --s-ok-l:#e7f5ed; --s-warn:#9a5b00; --s-warn-l:#fff4dc;
  --s-bad:#b42318; --s-bad-l:#fdecea; --s-info:#0b5cad; --s-info-l:#e8f1fc;
  --s-ai:linear-gradient(135deg,#a63d57,#c58a3e); --s-ai-l:#fdf6f1; --s-ai-b:#f0dfd3;
  --s-r:14px; --s-r-sm:9px; --s-pill:999px;
  --s-sh:0 1px 2px #1d1a190a,0 6px 20px #1d1a190a; --s-sh2:0 16px 48px #1d1a1926;
  --s-f:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --s-ease:cubic-bezier(.2,.7,.2,1);
}

/* ============ 2. RANGKA ============ */
.s9 #bo{background:var(--s-bg);grid-template-columns:252px minmax(0,1fr);grid-template-rows:minmax(0,1fr);font:14px/1.5 var(--s-f);color:var(--s-ink);padding:0;height:auto}
.s9 #bo ::selection,.s9 #bd ::selection,.s9 #stu ::selection{background:#f3d6dd}
.s9 .ik{flex:none;display:block}

/* --- menu sisi --- */
.s9 .sn{background:#fff;border-right:1px solid var(--s-line);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.s9 .sn-top{padding:20px 20px 10px;display:flex;flex-direction:column;gap:6px;flex:none}
.s9 .sn-top img{width:148px;height:auto}
.s9 .sn-top small{font-size:10.5px;letter-spacing:.18em;font-weight:700;color:var(--s-acc);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s9 #bo .sn-add{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 14px 10px;padding:.72em 1em;background:var(--s-ink);border:1px solid var(--s-ink);color:#fff;border-radius:10px;font-size:13.5px;font-weight:600;flex:none}
.s9 #bo .sn-add:hover{background:#000}
.s9 .sn-nav{flex:1;overflow:auto;padding:4px 10px 14px;scrollbar-width:thin}
.s9 .sn-i{display:flex;align-items:center;gap:11px;padding:9px 10px;margin:1px 0;border-radius:9px;color:var(--s-ink2);font-weight:500;cursor:pointer;user-select:none;transition:background .12s,color .12s}
.s9 .sn-i .ik{color:var(--s-mut);transition:color .12s}
.s9 .sn-i:hover{background:var(--s-soft);color:var(--s-ink)}
.s9 .sn-i.buka{color:var(--s-ink);font-weight:650}
.s9 .sn-i.buka .ik{color:var(--s-ink)}
.s9 .sn-i.on{background:var(--s-acc-l);color:var(--s-acc-d);font-weight:650}
.s9 .sn-i.on .ik{color:var(--s-acc)}
.s9 .sn em{margin-left:auto;font-style:normal;background:var(--s-acc);color:#fff;border-radius:var(--s-pill);font-size:11px;line-height:1;padding:3px 7px;font-weight:700;min-width:20px;text-align:center}
.s9 .sn-sub{margin:2px 0 8px 19px;padding-left:10px;border-left:1.5px solid var(--s-line)}
.s9 .sn-sub a{display:flex;align-items:center;padding:7px 10px;border-radius:8px;font-size:13.5px;color:var(--s-ink2);cursor:pointer}
.s9 .sn-sub a:hover{background:var(--s-soft);color:var(--s-ink)}
.s9 .sn-sub a.on{color:var(--s-acc-d);font-weight:650;background:var(--s-acc-l)}
.s9 .sn-sub em{background:var(--s-line2);color:var(--s-ink2)}
.s9 .sn-gp{height:1px;background:var(--s-line2);margin:10px 8px}
.s9 .sn-ft{flex:none;border-top:1px solid var(--s-line);padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--s-mut)}
.s9 .sn-ft a{display:flex;align-items:center;gap:8px;color:var(--s-ink2);font-weight:500;padding:6px 6px;border-radius:8px;cursor:pointer}
.s9 .sn-ft a:hover{background:var(--s-soft);color:var(--s-ink)}
.s9 .sn-st{display:flex;align-items:center;gap:8px;padding:0 6px}
.s9 .dot{width:8px;height:8px;border-radius:50%;background:var(--s-ok);flex:none;box-shadow:0 0 0 3px var(--s-ok-l)}
.s9 .dot.off{background:var(--s-bad);box-shadow:0 0 0 3px var(--s-bad-l)}
.s9 .sn-scrim{display:none}

/* --- bar atas --- */
.s9 .smn{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;position:relative}
.s9 .tb{display:flex;align-items:center;gap:10px;height:64px;padding:0 28px;background:#fff;border-bottom:1px solid var(--s-line);flex:none;position:relative;z-index:6}
.s9 .tb-t{min-width:0;margin-right:auto}
.s9 .tb-t h1{font-size:18px;font-weight:650;letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.s9 .tb-t p{font-size:12.5px;color:var(--s-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s9 .tb-q{position:relative;width:min(340px,30vw);flex:none}
.s9 .tb-q>.ik{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--s-mut);pointer-events:none}
.s9 #bo .tb-q input{width:100%;margin:0;padding:.62em .8em .62em 38px;background:var(--s-soft);border-color:var(--s-line);font-size:13.5px}
.s9 #bo .tb-q input:focus{background:#fff}
.s9 .tb-q kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:600 10.5px var(--s-f);color:var(--s-mut);border:1px solid var(--s-line);border-radius:5px;padding:1px 5px;background:#fff;pointer-events:none}
.s9 .tb-q input:focus~kbd{display:none}
.s9 .pop{position:absolute;top:calc(100% + 8px);background:#fff;border:1px solid var(--s-line);border-radius:var(--s-r);box-shadow:var(--s-sh2);padding:6px;z-index:30;max-height:min(70vh,560px);overflow:auto;animation:s9pop .16s var(--s-ease)}
.s9 .qp{left:0;right:0;min-width:320px}
.s9 .pop>small{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--s-mut);padding:8px 10px 4px}
.s9 .pop a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;color:var(--s-ink)}
.s9 .pop a:hover,.s9 .pop a.on{background:var(--s-soft)}
.s9 .pop a>.ik{color:var(--s-mut)}
.s9 .pop a span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s9 .pop a span small{display:block;color:var(--s-mut);font-size:12px}
.s9 .pop a>i{font-style:normal;font-size:12px;color:var(--s-mut);flex:none}
.s9 .pop .kos{padding:18px 12px;color:var(--s-mut);text-align:center;font-size:13px}
.s9 #bo .ib{position:relative;display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:10px;background:none;border:1px solid transparent;color:var(--s-ink2);flex:none}
.s9 #bo .ib:hover{background:var(--s-soft);border-color:var(--s-line);color:var(--s-ink)}
.s9 #bo .ib b{position:absolute;top:-3px;right:-5px;min-width:17px;height:17px;border-radius:var(--s-pill);background:var(--s-acc);color:#fff;font-size:10.5px;font-weight:700;line-height:17px;padding:0 4px;text-align:center;border:2px solid #fff;box-sizing:content-box}
.s9 #bo .ib.krit b{background:var(--s-bad)}
.s9 .tb-w{position:relative;flex:none}
.s9 .alp{right:0;width:min(400px,calc(100vw - 24px));padding:0}
.s9 .alp>header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px;font-weight:650}
.s9 .alp>header small{font-weight:500;color:var(--s-mut);font-size:12.5px}
.s9 .alp>div{padding:0 6px 6px}
.s9 .al9{display:flex;gap:10px;align-items:flex-start;padding:10px 8px;border-radius:10px;cursor:pointer}
.s9 .al9:hover{background:var(--s-soft)}
.s9 .al9>i{width:8px;height:8px;border-radius:50%;margin-top:7px;flex:none;background:var(--s-info)}
.s9 .al9.t-k>i{background:var(--s-bad)}.s9 .al9.t-a>i{background:#d98a00}
.s9 .al9 span{flex:1;min-width:0;font-size:13.5px;line-height:1.4}
.s9 .al9 span small{display:block;color:var(--s-mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s9 .alp>footer{border-top:1px solid var(--s-line2);padding:8px}
.s9 .alp>footer a{justify-content:center;font-weight:600;color:var(--s-acc-d)}
.s9 #bo .usr{display:flex;align-items:center;gap:10px;padding:4px 10px 4px 4px;border-radius:var(--s-pill);background:none;border:1px solid var(--s-line);color:var(--s-ink);text-align:left;flex:none;max-width:230px}
.s9 #bo .usr:hover{background:var(--s-soft);border-color:var(--s-line3)}
.s9 .av{width:32px;height:32px;border-radius:50%;background:var(--s-ink);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:.02em;flex:none;overflow:hidden}
.s9 .av img{width:100%;height:100%;object-fit:cover}
.s9 .usr>span:not(.av){min-width:0;line-height:1.2;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s9 .usr>span:not(.av) small{display:block;font-weight:500;color:var(--s-mut);font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
.s9 .up9{right:0;min-width:230px}
.s9 .up9 a.bahaya{color:var(--s-bad)}
.s9 #bo .mnb,.s9 #bo .qb{display:none}

/* --- kandungan --- */
.s9 .bc{flex:1;overflow:auto;padding:26px 28px 80px}
.s9 .pg{max-width:1360px;margin:0 auto}
.s9 .bb{display:none}

/* ============ 3. KOMPONEN ASAS (markup sedia ada) ============ */
.s9 .ui h2{font-size:20px;font-weight:650;letter-spacing:-.012em}
.s9 .ui button{background:var(--s-ink);color:#fff;border:1px solid var(--s-ink);border-radius:var(--s-r-sm);padding:.62em 1.05em;font-size:13.5px;font-weight:600;line-height:1.25;transition:background .14s,border-color .14s,color .14s,box-shadow .14s}
.s9 .ui button:hover{background:#000;border-color:#000;color:#fff}
.s9 .ui button.l{background:#fff;color:var(--s-ink);border-color:var(--s-line3)}
.s9 .ui button.l:hover{background:var(--s-soft);border-color:var(--s-ink);color:var(--s-ink)}
.s9 .ui button.r{background:var(--s-acc);border-color:var(--s-acc);color:#fff}
.s9 .ui button.r:hover{background:var(--s-acc-d);border-color:var(--s-acc-d)}
.s9 .ui button.g{background:var(--s-ok);border-color:var(--s-ok);color:#fff}
.s9 .ui button.g:hover{background:#17623d;border-color:#17623d}
.s9 .ui button.sm{padding:.44em .8em;font-size:12.5px;border-radius:8px}
.s9 .ui button:disabled{opacity:.45;cursor:not-allowed}
.s9 .ui button:focus-visible,.s9 .ui a:focus-visible,.s9 .ui [tabindex]:focus-visible{outline:2px solid var(--s-acc);outline-offset:2px}
.s9 .ui .x{background:#fff;color:var(--s-ink2);border:1px solid var(--s-line);width:34px;height:34px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:13px}
.s9 .ui .x:hover{background:var(--s-soft);border-color:var(--s-line3);color:var(--s-ink)}
.s9 .ui input:where(:not([type=checkbox],[type=radio],[type=range],[type=file])),.s9 .ui select,.s9 .ui textarea{border:1px solid var(--s-line3);border-radius:var(--s-r-sm);padding:.6em .8em;font-size:14px;color:var(--s-ink);background-color:#fff;transition:border-color .14s,box-shadow .14s}
.s9 .ui input:where(:not([type=checkbox],[type=radio],[type=range],[type=file])):focus,.s9 .ui select:focus,.s9 .ui textarea:focus{outline:0;border-color:var(--s-acc);box-shadow:0 0 0 3px var(--s-acc-l)}
.s9 .ui input:disabled,.s9 .ui select:disabled{background:var(--s-soft);color:var(--s-mut)}
.s9 .ui input::placeholder,.s9 .ui textarea::placeholder{color:#a8a19b}
.s9 .ui input[type=checkbox],.s9 .ui input[type=radio]{accent-color:var(--s-acc);width:16px;height:16px;vertical-align:-3px}
.s9 .ui input.scan{font-size:17px;padding:.8em 1em;border:2px solid var(--s-ink)}
.s9 .ui textarea{line-height:1.5;resize:vertical}

.s9 .cd{background:#fff;border:1px solid var(--s-line);border-radius:var(--s-r);padding:18px 20px;margin-bottom:18px;box-shadow:0 1px 2px #1d1a1907}
.s9 .ui .cd{overflow-x:auto}
.s9 .cd h3{font-size:15px;font-weight:650;margin:0 0 14px;letter-spacing:-.005em}
.s9 .g2,.s9 .g3,.s9 .g2e{gap:18px}
.s9 .kp{grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:14px;margin-bottom:18px}
.s9 .kp>div{background:#fff;border:1px solid var(--s-line);border-radius:var(--s-r);padding:16px 18px;box-shadow:0 1px 2px #1d1a1907}
.s9 .kp small{color:var(--s-mut);font-size:12.5px;font-weight:500}
.s9 .kp b{font-size:22px;font-weight:650;letter-spacing:-.015em;margin:4px 0 2px}
.s9 .kp i{font-size:12px;color:var(--s-mut)}
.s9 .ui .up{color:var(--s-ok)!important}.s9 .ui .dn{color:var(--s-bad)!important}.s9 .ui .mu{color:var(--s-mut)}
.s9 .ui .lk{color:var(--s-acc-d);font-weight:600}
.s9 .tw{border:1px solid var(--s-line);border-radius:var(--s-r);background:#fff}
.s9 .ui table{font-size:13.5px}
.s9 .ui th{background:var(--s-soft);color:var(--s-mut);font-size:12px;font-weight:600;letter-spacing:.02em;padding:10px 14px;border-bottom:1px solid var(--s-line)}
.s9 .ui td{padding:11px 14px;border-bottom:1px solid var(--s-line2)}
.s9 .ui tr:hover td{background:#fcfbf9}
.s9 .ui td small,.s9 .ui th small{font-size:12px}
.s9 .pl{padding:3px 10px;font-size:11.5px;font-weight:650;letter-spacing:.01em;line-height:1.5}
.s9 .st{gap:2px;border-bottom:1px solid var(--s-line);margin-bottom:18px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.s9 .st::-webkit-scrollbar{display:none}
.s9 .ui .st button{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;color:var(--s-mut);padding:.78em .9em;font-weight:600;font-size:13.5px;white-space:nowrap;margin-bottom:-1px;flex:none}
.s9 .ui .st button:hover{color:var(--s-ink);background:none}
.s9 .ui .st button.on{border-bottom-color:var(--s-acc);color:var(--s-ink)}
.s9 .st em{background:var(--s-line2);border-radius:var(--s-pill);padding:1px 7px;font-size:11.5px;color:var(--s-ink2);margin-left:6px;font-weight:600}
.s9 .st button.on em{background:var(--s-acc-l);color:var(--s-acc-d)}
.s9 .ac{gap:10px;margin-bottom:14px}
.s9 .ui .ac input.w{min-width:260px}
.s9 .ui .ac label{font-size:13px;color:var(--s-ink2);font-weight:500}
.s9 .bk{background:var(--s-ink);border-radius:12px;padding:10px 14px;gap:8px;top:-26px;box-shadow:var(--s-sh2)}
.s9 .ui .bk button{background:#ffffff1f;border-color:transparent;color:#fff}
.s9 .ui .bk button:hover{background:#fff;color:var(--s-ink);border-color:#fff}
.s9 .ui .bk button.r{background:var(--s-acc);border-color:var(--s-acc)}
.s9 .chip{padding:5px 12px;border:1px solid var(--s-line3);font-size:12.5px;font-weight:500;color:var(--s-ink2);transition:.14s}
.s9 .chip:hover{border-color:var(--s-ink)}
.s9 .chip.on{background:var(--s-ink);border-color:var(--s-ink);color:#fff}
.s9 label.chip{display:inline-flex;align-items:center;gap:6px}
.s9 .dr9{color:var(--s-warn);font-weight:600}
.s9 .tg{padding:12px 0;border-bottom:1px solid var(--s-line2);font-weight:600;font-size:14px}
.s9 .tg small{color:var(--s-mut);font-size:12.5px}
.s9 .tg>span{background:#cfcac3;width:40px;flex-basis:40px;height:23px}
.s9 .tg>span:after{width:17px;height:17px;box-shadow:0 1px 2px #0003}
.s9 .tg input:checked+span{background:var(--s-ok)}
.s9 .tg input:checked+span:after{left:20px}
.s9 .hb>div{font-size:13px;margin:9px 0}
.s9 .hb em{background:var(--s-line2);height:8px}
.s9 .hb i{background:#3b3432}
.s9 .vb i{background:#e2c5cd;border-radius:5px 5px 0 0}
.s9 .vb>div:hover i{background:var(--s-acc)}
.s9 .vb span{font-size:10.5px;color:var(--s-mut)}
.s9 .pbar{height:8px;background:var(--s-line2)}
.s9 .pbar i{background:var(--s-ai);border-radius:var(--s-pill)}
.s9 .todo{gap:12px}
.s9 .todo div{border:1px solid var(--s-line);border-radius:12px;padding:14px 12px;transition:.14s}
.s9 .todo div:hover{border-color:var(--s-ink);background:var(--s-soft)}
.s9 .todo b{font-size:24px;font-weight:650;letter-spacing:-.02em}
.s9 .todo small{color:var(--s-mut);font-size:12.5px}
.s9 .todo .hot b{color:var(--s-bad)}
.s9 .pipe div{background:var(--s-soft);border:1px solid var(--s-line2);border-radius:12px}
.s9 .pipe div:hover{background:#fff;border-color:var(--s-ink)}
.s9 .pipe b{font-size:24px;font-weight:650}
.s9 .rw{padding:10px 0;border-bottom:1px solid var(--s-line2);font-size:13.5px;gap:12px}
.s9 .rw:last-child{border-bottom:0}
.s9 .fm{gap:4px 16px}
.s9 .fm label{font-size:13px;color:var(--s-ink2);font-weight:600}
.s9 .tl>div{border-left-color:var(--s-line)}
.s9 .tl>div:before{background:var(--s-ink)}.s9 .tl>div:first-child:before{background:var(--s-acc)}
.s9 .tl b{font-size:13.5px}.s9 .tl small{color:var(--s-mut)}
.s9 .nt{background:var(--s-warn-l);border-color:#f0dca4;border-radius:10px}
.s9 .lvh{color:var(--s-ink2);font-size:13px}
.s9 .lvd{background:var(--s-ok)}
.s9 .al div{padding:9px 0;border-bottom:1px solid var(--s-line2);font-size:13.5px}
.s9 .al div:hover{color:var(--s-acc-d)}
.s9 .crd{border:1px solid var(--s-line);border-radius:var(--s-r);padding:16px}
.s9 .pki{border:1px solid var(--s-line);border-radius:12px}
.s9 .pki.ok{border-color:var(--s-ok);background:var(--s-ok-l)}
.s9 .th{width:42px;height:56px;border-radius:8px;background:var(--s-line2)}
.s9 .ui .sav{background:var(--s-ink)}
.s9 .jsn{border-radius:12px}
.s9 .agc,.s9 .hsc{border-color:var(--s-line);border-radius:var(--s-r)}
.s9 .agc{border-top:3px solid var(--ac)}
.s9 .agm span{background:var(--s-soft)}
.s9 .agmd label{border-color:var(--s-line);border-radius:12px}
.s9 .agmd label.on{border-color:var(--s-acc);box-shadow:0 0 0 1px var(--s-acc)}
.s9 .alr{padding:12px 6px;border-bottom-color:var(--s-line2)}
.s9 .wci{border-radius:10px}.s9 .wci.on{background:var(--s-ok-l)}
.s9 .wmsg{border-radius:12px}
.s9 .upz{border-color:var(--s-line3);border-radius:var(--s-r)}
.s9 .upz:hover,.s9 .upz.on{border-color:var(--s-acc);background:var(--s-acc-l)}
.s9 .mit{border-color:var(--s-line);border-radius:12px}.s9 .mit.main{border-color:var(--s-ink)}
.s9 .gsp{border-color:var(--s-line);border-radius:12px}
.s9 body:has(#bo.on) #toast{background:var(--s-ink);border-radius:12px;font:500 13.5px/1.45 var(--s-f);padding:12px 18px;bottom:28px;box-shadow:var(--s-sh2)}
/* keadaan kosong */
.s9 .ksg{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:44px 20px;color:var(--s-mut)}
.s9 .ksg .ik{color:var(--s-line3);margin-bottom:6px}
.s9 .ksg b{color:var(--s-ink);font-size:15px}
.s9 .ksg p{max-width:400px;font-size:13.5px}
.s9 .ksg button{margin-top:10px}
/* menu lungsur <details> */
.s9 .mn9{position:relative;display:inline-block}
.s9 .mn9>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--s-ink);border:1px solid var(--s-line3);border-radius:var(--s-r-sm);padding:.62em .9em;font-size:13.5px;font-weight:600;line-height:1.25;user-select:none}
.s9 .mn9>summary::-webkit-details-marker{display:none}
.s9 .mn9>summary:hover{border-color:var(--s-ink);background:var(--s-soft)}
.s9 .mn9.sm>summary{padding:.44em .7em;font-size:12.5px;border-radius:8px}
.s9 .mn9>div{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;background:#fff;border:1px solid var(--s-line);border-radius:12px;box-shadow:var(--s-sh2);padding:6px;z-index:12;animation:s9pop .16s var(--s-ease)}
.s9 .mn9>div a,.s9 .mn9>div label{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:13.5px;cursor:pointer;color:var(--s-ink);font-weight:500;white-space:nowrap}
.s9 .mn9>div a:hover,.s9 .mn9>div label:hover{background:var(--s-soft)}
.s9 .mn9>div a .ik,.s9 .mn9>div label .ik{color:var(--s-mut)}
.s9 .mn9>div hr{border:0;border-top:1px solid var(--s-line2);margin:5px 4px}

/* ============ 4. LACI & EDITOR LANJUTAN ============ */
.s9 #bdo{background:#1d1a1966;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.s9 #bd{background:var(--s-bg);width:min(640px,100%);padding:26px;font:14px/1.5 var(--s-f);color:var(--s-ink);box-shadow:var(--s-sh2)}
.s9 #bd.wide{width:min(1040px,100%)}
.s9 #bd .cd{margin-top:16px}
.s9 #bd .x{float:right;position:sticky;top:0;z-index:6}
.s9 #bd .eph h2{font-size:19px}
.s9 .epqb{border-color:var(--s-line);border-radius:12px;padding:10px 14px}
.s9 #bd .ept{background:var(--s-bg);border-bottom-color:var(--s-line);margin:14px -26px 0;padding:10px 26px;top:-26px}
.s9 #bd .ept button{background:#fff;color:var(--s-ink2);border:1px solid var(--s-line3);border-radius:var(--s-pill);padding:.5em .95em;font-size:12.5px}
.s9 #bd .ept button:hover{border-color:var(--s-ink);color:var(--s-ink)}
.s9 #bd .ept button.on{background:var(--s-ink);color:#fff;border-color:var(--s-ink)}
.s9 #bd .ept button i{background:#e0a100;border:2px solid #fff;width:10px;height:10px;top:-2px;right:-2px}
.s9 #bd .epf{background:#fffffff2;border-top-color:var(--s-line);margin:18px -26px 0;padding:12px 26px calc(12px + env(safe-area-inset-bottom));bottom:calc(-26px - env(safe-area-inset-bottom))}
.s9 #bd .fm{gap:8px 16px}
.s9 .mtag,.s9 .vtag{border-radius:6px;background:var(--s-ink)}
.s9 .vtag{background:var(--s-acc)}

/* ============ 5. LAMAN UTAMA ============ */
.s9 .hm-hi{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.s9 .hm-hi h2{font-size:24px;font-weight:650;letter-spacing:-.02em}
.s9 .hm-hi p{color:var(--s-mut);font-size:13.5px;margin-top:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.s9 .hm-hi .ac{margin:0}
.s9 .hm-s{margin-bottom:22px}
.s9 .hm-s>h3{font-size:15px;font-weight:650;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.s9 .hm-s>h3 span{background:var(--s-acc);color:#fff;border-radius:var(--s-pill);font-size:11.5px;padding:2px 8px;font-weight:700}
.s9 .hm-s>h3 a{margin-left:auto;font-size:13px;font-weight:600;color:var(--s-acc-d);cursor:pointer}
.s9 .tk{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.s9 .tk a{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--s-line);border-radius:var(--s-r);padding:14px 16px;cursor:pointer;transition:border-color .14s,box-shadow .14s,transform .14s}
.s9 .tk a:hover{border-color:var(--s-ink);box-shadow:var(--s-sh);transform:translateY(-1px)}
.s9 .tk a>b{min-width:46px;height:46px;border-radius:12px;background:var(--s-soft);display:grid;place-items:center;font-size:19px;font-weight:650;padding:0 8px;letter-spacing:-.01em}
.s9 .tk a.t-k>b{background:var(--s-bad-l);color:var(--s-bad)}
.s9 .tk a.t-a>b{background:var(--s-warn-l);color:var(--s-warn)}
.s9 .tk a.t-u>b{background:var(--s-acc-l);color:var(--s-acc-d)}
.s9 .tk a span{flex:1;min-width:0;line-height:1.3}
.s9 .tk a strong{display:block;font-weight:650;font-size:14px}
.s9 .tk a small{color:var(--s-mut);font-size:12.5px}
.s9 .tk a>.ik{color:var(--s-line3)}
.s9 .tk a:hover>.ik{color:var(--s-ink)}
.s9 .tk-ok{display:flex;align-items:center;gap:12px;background:var(--s-ok-l);border:1px solid #cfe9da;color:#17623d;border-radius:var(--s-r);padding:14px 16px;font-weight:500}
.s9 .sp9{background:#fff;border:1px solid var(--s-line);border-radius:var(--s-r);padding:18px 20px;margin-bottom:22px}
.s9 .sp9-h{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.s9 .sp9-h b{font-size:15px;font-weight:650;display:block}
.s9 .sp9-h small{color:var(--s-mut);font-size:13px}
.s9 .sp9-h .pbar{flex:1;min-width:80px;max-width:240px;margin:0 0 0 auto}
.s9 .sp9-l{display:grid;gap:2px}
.s9 .sp9-l a{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:10px;cursor:pointer}
.s9 .sp9-l a:hover{background:var(--s-soft)}
.s9 .sp9-l i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--s-line3);flex:none;display:grid;place-items:center;color:#fff}
.s9 .sp9-l a.siap i{background:var(--s-ok);border-color:var(--s-ok)}
.s9 .sp9-l a.siap span{color:var(--s-mut);text-decoration:line-through}
.s9 .sp9-l span{flex:1;font-weight:600;font-size:14px}
.s9 .sp9-l span small{display:block;font-weight:400;color:var(--s-mut);font-size:12.5px;text-decoration:none}
.s9 .sp9-l u{text-decoration:none;font-size:13px;font-weight:600;color:var(--s-acc-d)}
.s9 .hm-ai{display:flex;align-items:center;gap:14px;background:var(--s-ai-l);border:1px solid var(--s-ai-b);border-radius:var(--s-r);padding:14px 16px;margin-bottom:22px;cursor:pointer}
.s9 .hm-ai:hover{border-color:#dcbfae}
.s9 .hm-ai span{flex:1;min-width:0;font-size:13.5px;line-height:1.4}
.s9 .hm-ai span b{display:block;font-weight:650;font-size:14px}
.s9 .aic{width:38px;height:38px;border-radius:11px;background:var(--s-ai);color:#fff;display:grid;place-items:center;flex:none}
.s9 .aic.sm{width:26px;height:26px;border-radius:8px}

/* ============ 6. SENARAI PRODUK ============ */
.s9 .pr-n{display:flex;gap:12px;align-items:center;min-width:220px}
.s9 .pr-n img{width:40px;height:52px;object-fit:cover;border-radius:8px;background:var(--s-line2);flex:none}
.s9 .pr-n div{min-width:0;line-height:1.35}
.s9 .pr-n b{display:block;font-weight:600;font-size:14px;cursor:pointer}
.s9 .pr-n b:hover{color:var(--s-acc-d)}
.s9 .pr-n small{color:var(--s-mut);font-size:12px}
.s9 .pr-t td:last-child{white-space:nowrap;text-align:right}
.s9 .pr-t .tg{border:0;padding:0}
.s9 .qz{display:inline-block;font-size:11px;font-weight:700;border-radius:var(--s-pill);padding:1px 7px;margin-left:6px;vertical-align:1px}

/* ============ 7. STUDIO PRODUK ============ */
.s9 #stu{position:fixed;inset:0;z-index:205;background:var(--s-bg);display:none;flex-direction:column;font:14px/1.5 var(--s-f);color:var(--s-ink)}
.s9 #stu.on{display:flex;animation:s9in .22s var(--s-ease)}
.s9 .su-h{flex:none;display:flex;align-items:center;gap:12px;height:64px;padding:0 24px;background:#fff;border-bottom:1px solid var(--s-line)}
.s9 #stu .su-bk{display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--s-line);color:var(--s-ink2);padding:.5em .8em .5em .55em;border-radius:var(--s-r-sm);font-weight:600}
.s9 #stu .su-bk:hover{background:var(--s-soft);border-color:var(--s-line3);color:var(--s-ink)}
.s9 .su-ti{min-width:0;margin-right:auto;line-height:1.25}
.s9 .su-h .hb9{display:flex;gap:8px;flex:none}
.s9 .su-ti b{display:block;font-size:16.5px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s9 .su-ti small{color:var(--s-mut);font-size:12.5px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.s9 .su-b{flex:1;overflow:auto;scroll-behavior:smooth}
.s9 .su-g{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:24px;max-width:1220px;margin:0 auto;padding:24px 24px 110px;align-items:start}
.s9 .su-m{min-width:0;display:flex;flex-direction:column;gap:18px}
.s9 .su-r{position:sticky;top:20px;display:flex;flex-direction:column;gap:16px;min-width:0}
.s9 .su-c{background:#fff;border:1px solid var(--s-line);border-radius:16px;padding:22px 24px;scroll-margin-top:16px}
.s9 .su-ch{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.s9 .su-ch>i{width:28px;height:28px;border-radius:50%;background:var(--s-ink);color:#fff;font-style:normal;font-weight:700;font-size:13px;display:grid;place-items:center;flex:none}
.s9 .su-ch>i.siap{background:var(--s-ok)}
.s9 .su-ch h3{font-size:16.5px;font-weight:650;letter-spacing:-.01em;line-height:1.25}
.s9 .su-ch small{display:block;color:var(--s-mut);font-size:13px;font-weight:400}
.s9 .su-ch>div{flex:1;min-width:0}
/* langkah */
.s9 .stp{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px;min-width:0;max-width:100%}
.s9 .stp::-webkit-scrollbar{display:none}
.s9 #stu .stp button{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--s-line);color:var(--s-ink2);border-radius:var(--s-pill);padding:.5em .95em .5em .5em;font-size:13px;font-weight:600;white-space:nowrap;flex:none}
.s9 #stu .stp button:hover{border-color:var(--s-ink);color:var(--s-ink);background:#fff}
.s9 .stp i{width:22px;height:22px;border-radius:50%;background:var(--s-line2);color:var(--s-ink2);font-style:normal;font-size:12px;font-weight:700;display:grid;place-items:center}
.s9 .stp .siap i{background:var(--s-ok);color:#fff}
/* zon muat naik & grid media */
.s9 .dz9{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;border:2px dashed var(--s-line3);border-radius:16px;padding:34px 18px;background:var(--s-soft);transition:.16s;cursor:pointer}
.s9 .dz9:hover,.s9 .dz9.on{border-color:var(--s-acc);background:var(--s-acc-l)}
.s9 .dz9>.ik{color:var(--s-acc)}
.s9 .dz9 b{font-size:15.5px;font-weight:650}
.s9 .dz9 p{color:var(--s-mut);font-size:13px;max-width:440px}
.s9 .dz9 div{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.s9 #stu .dz9 button,.s9 #stu .mn-ai button,.s9 #stu .am9 .bt9 button{display:inline-flex;align-items:center;gap:6px}
.s9 .mg9{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}
.s9 .mt9{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--s-line2);border:2px solid transparent;cursor:pointer;user-select:none;transition:border-color .14s,transform .14s,opacity .14s}
.s9 .mt9 img,.s9 .mt9 video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.s9 .mt9.pilih{border-color:var(--s-acc);box-shadow:0 0 0 3px var(--s-acc-l)}
.s9 .mt9.seret{opacity:.4}
.s9 .mt9.atas{border-color:var(--s-ink);transform:scale(1.03)}
.s9 .mt9 .lb9{position:absolute;left:6px;top:6px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.s9 .mt9 .lb9 span{background:#1d1a19e0;color:#fff;font-size:10px;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:6px}
.s9 .mt9 .lb9 span.v{background:var(--s-acc)}
.s9 .mt9 .lb9 span.c{background:var(--s-info)}
.s9 .mt9 .qs{position:absolute;left:6px;right:6px;bottom:6px;display:flex;gap:4px;flex-wrap:wrap}
.s9 .mt9 .qs span{background:#ffffffeb;color:var(--s-ink);font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:var(--s-pill);display:flex;align-items:center;gap:4px}
.s9 .mt9 .qs span:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--s-ok)}
.s9 .mt9 .qs span.t-a:before{background:#d98a00}
.s9 #stu .mt9 .bx{position:absolute;right:6px;top:6px;width:26px;height:26px;padding:0;border-radius:50%;background:#ffffffeb;border:0;color:var(--s-ink);display:grid;place-items:center}
.s9 #stu .mt9 .bx:hover{background:#fff;color:var(--s-bad)}
.s9 .mt9.tgu{display:grid;place-items:center;cursor:default}
.s9 .mt9.tgu i{width:26px;height:26px;border-radius:50%;border:3px solid var(--s-line3);border-top-color:var(--s-acc);animation:s9pus .8s linear infinite}
.s9 .mt9.tgu small{position:absolute;bottom:8px;left:6px;right:6px;text-align:center;font-size:10.5px;color:var(--s-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s9 .mt9.tmb{border:2px dashed var(--s-line3);background:var(--s-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--s-mut);font-size:12.5px;font-weight:600}
.s9 .mt9.tmb:hover{border-color:var(--s-acc);color:var(--s-acc-d);background:var(--s-acc-l)}
.s9 .ma9{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:12px;padding:10px;background:var(--s-soft);border:1px solid var(--s-line);border-radius:12px}
.s9 .ma9>small{color:var(--s-mut);font-size:12.5px;margin-right:auto;padding-left:4px}
.s9 #stu .ma9 button{display:inline-flex;align-items:center;gap:6px}
.s9 .ma9 input{flex:1 1 220px;margin:0!important;min-width:160px}
.s9 .mn-ai{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:12px 14px;background:var(--s-ai-l);border:1px solid var(--s-ai-b);border-radius:12px;font-size:13.5px;line-height:1.45}
.s9 .mn-ai>div{flex:1;min-width:0}
.s9 .mn-ai b{font-weight:650}
.s9 .mn-ai ul{margin:4px 0 0 16px;color:var(--s-ink2)}
.s9 .mn-ai .bt9{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.s9 .tip{font-size:12.5px;color:var(--s-mut);margin-top:10px;display:flex;gap:8px;align-items:flex-start}
.s9 .tip .ik{margin-top:1px}
/* medan */
.s9 .f9{display:block;margin-bottom:16px;min-width:0}
.s9 .f9:last-child{margin-bottom:0}
.s9 .f9>label,.s9 .f9>.lbl{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--s-ink);margin-bottom:6px;min-height:24px}
.s9 .f9>label em,.s9 .f9>.lbl em{font-style:normal;color:var(--s-bad)}
.s9 .f9>label i,.s9 .f9>.lbl i{font-style:normal;font-weight:400;color:var(--s-mut);font-size:12.5px}
.s9 #stu .f9 input:where(:not([type=checkbox],[type=radio])),.s9 #stu .f9 select,.s9 #stu .f9 textarea,.s9 #bo .f9 input:where(:not([type=checkbox],[type=radio])),.s9 #bo .f9 select,.s9 #bo .f9 textarea{width:100%;margin:0;padding:.7em .85em;font-size:14.5px}
.s9 .f9 .hint{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--s-mut);margin-top:5px;line-height:1.4}
.s9 .f9 .hint b{font-weight:600;color:var(--s-ink2)}
.s9 .f9.salah input,.s9 .f9.salah textarea{border-color:var(--s-bad)!important;box-shadow:0 0 0 3px var(--s-bad-l)!important}
.s9 .f9 .er9{color:var(--s-bad);font-size:12.5px;margin-top:5px;font-weight:500}
.s9 .f9.ai input,.s9 .f9.ai textarea{border-color:#e2bfa9;background:linear-gradient(#fffdfb,#fffdfb)}
.s9 .ai-t{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:#8a4a2f;background:#fbeadf;border-radius:var(--s-pill);padding:1px 7px;display:inline-flex;align-items:center;gap:3px}
.s9 #stu .aib,.s9 #bo .aib{margin-left:auto;display:inline-flex;align-items:center;gap:5px;background:var(--s-ai-l);border:1px solid var(--s-ai-b);color:#7a3a36;border-radius:var(--s-pill);padding:.3em .75em;font-size:12px;font-weight:650}
.s9 #stu .aib:hover,.s9 #bo .aib:hover{background:#fbeadf;border-color:#dcbfae;color:#5e2a2c}
.s9 .r9{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.s9 .r9.t3{grid-template-columns:repeat(3,minmax(0,1fr))}
.s9 .rm9{position:relative}
.s9 .rm9>span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--s-mut);font-weight:600;font-size:14px;pointer-events:none}
.s9 #stu .rm9 input{padding-left:42px!important}
.s9 .ch9{display:flex;gap:8px;flex-wrap:wrap}
.s9 #stu .ch9 button,.s9 #bo .ch9 button{background:#fff;border:1px solid var(--s-line3);color:var(--s-ink2);border-radius:var(--s-pill);padding:.5em 1em;font-size:13.5px;font-weight:500}
.s9 #stu .ch9 button:hover,.s9 #bo .ch9 button:hover{border-color:var(--s-ink);color:var(--s-ink);background:#fff}
.s9 #stu .ch9 button.on,.s9 #bo .ch9 button.on{background:var(--s-ink);border-color:var(--s-ink);color:#fff;font-weight:600}
.s9 .sw9{display:flex;gap:10px;flex-wrap:wrap}
.s9 #stu .sw9 button{width:34px;height:34px;padding:0;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--s-line3);background:var(--c)}
.s9 #stu .sw9 button:hover{box-shadow:0 0 0 2px var(--s-ink2);background:var(--c)}
.s9 #stu .sw9 button.on{box-shadow:0 0 0 2.5px var(--s-acc);background:var(--c)}
.s9 .sz9{width:100%;border-collapse:collapse;border:1px solid var(--s-line);border-radius:12px;overflow:hidden;margin-top:4px}
.s9 #stu .sz9 th{position:static;font-size:12px;padding:8px 12px}
.s9 #stu .sz9 td{padding:7px 12px}
.s9 #stu .sz9 input{margin:0;width:110px;padding:.5em .7em}
.s9 .sz9 small{color:var(--s-mut)}
.s9 .inf9{display:flex;gap:10px;align-items:flex-start;background:var(--s-soft);border:1px solid var(--s-line2);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--s-ink2);line-height:1.45}
.s9 .inf9.ai{background:var(--s-ai-l);border-color:var(--s-ai-b)}
.s9 .inf9.amr{background:var(--s-warn-l);border-color:#f0dca4;color:#6b4100}
.s9 .inf9 .ik{margin-top:1px;flex:none}
.s9 .inf9 a{color:var(--s-acc-d);font-weight:600;cursor:pointer;white-space:nowrap}
.s9 .lg9s{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--s-line2)}
.s9 .lg9s:last-child{border-bottom:0;padding-bottom:0}
.s9 .lg9s:first-child{padding-top:0}
.s9 .lg9s span{min-width:0;font-weight:600;font-size:14px}
.s9 .lg9s span small{display:block;font-weight:400;color:var(--s-mut);font-size:12.5px}
.s9 .lg9s .tg{border:0;padding:0}
.s9 .acc9 a{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--s-line2);cursor:pointer}
.s9 .acc9 a:last-child{border-bottom:0}
.s9 .acc9 a:hover span b{color:var(--s-acc-d)}
.s9 .acc9 a>.ik:first-child{color:var(--s-mut)}
.s9 .acc9 span{flex:1;min-width:0;line-height:1.35}
.s9 .acc9 span b{display:block;font-weight:600;font-size:14px}
.s9 .acc9 span small{color:var(--s-mut);font-size:12.5px}
.s9 .acc9 a>i{font-style:normal;font-size:12px;color:var(--s-mut);white-space:nowrap}
.s9 .acc9 a>i.siap{color:var(--s-ok);font-weight:600}
/* pratonton & senarai semak */
.s9 .pn9{background:#fff;border:1px solid var(--s-line);border-radius:16px;padding:16px 18px}
.s9 .pn9>h4{font-size:13px;font-weight:650;margin-bottom:12px;display:flex;align-items:center;gap:8px;color:var(--s-ink2);letter-spacing:.01em}
.s9 .pn9>h4 small{margin-left:auto;font-weight:500;color:var(--s-mut)}
.s9 .pv9{display:flex;gap:14px;align-items:flex-start}
.s9 .pv9 .pvi{width:112px;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--s-line2);flex:none;position:relative}
.s9 .pv9 .pvi img{width:100%;height:100%;object-fit:cover}
.s9 .pv9 .pvi i{position:absolute;left:6px;top:6px;background:var(--s-acc);color:#fff;font-style:normal;font-size:10px;font-weight:700;border-radius:5px;padding:1px 6px}
.s9 .pv9 div{min-width:0;line-height:1.35}
.s9 .pv9 small{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--s-mut);font-weight:600}
.s9 .pv9 b{display:block;font-size:14px;font-weight:600;margin:3px 0 6px;overflow-wrap:anywhere}
.s9 .pv9 strong{font-size:16px;font-weight:650}
.s9 .pv9 s{color:var(--s-mut);font-size:12.5px;margin-left:6px}
.s9 .pv9 p{color:var(--s-mut);font-size:12px;margin-top:6px}
.s9 .ck9 .pbar{margin:0 0 12px}
.s9 .ck9 a{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:13.5px;cursor:pointer;line-height:1.35}
.s9 .ck9 a:hover span{color:var(--s-acc-d)}
.s9 .ck9 a>i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--s-line3);flex:none;display:grid;place-items:center;color:#fff;margin-top:1px}
.s9 .ck9 a.siap>i{background:var(--s-ok);border-color:var(--s-ok)}
.s9 .ck9 a.siap span{color:var(--s-mut)}
.s9 .ck9 a.wjb:not(.siap)>i{border-color:var(--s-bad)}
.s9 .ck9 a span{flex:1}
.s9 .ck9 a u{text-decoration:none;font-size:11px;font-weight:700;color:var(--s-bad);letter-spacing:.03em}
.s9 .ck9>p{font-size:12.5px;color:var(--s-mut);margin-top:10px;padding-top:10px;border-top:1px solid var(--s-line2)}
/* bar bawah (telefon) & helaian */
.s9 .su-f{display:none}
.s9 .sh9{position:absolute;inset:0;background:#1d1a1980;z-index:20;display:grid;place-items:center;padding:20px;animation:s9in .18s}
.s9 .sh9>div{background:#fff;border-radius:18px;padding:26px;width:min(480px,100%);max-height:90%;overflow:auto;box-shadow:var(--s-sh2)}
.s9 .sh9 h3{font-size:18px;font-weight:650;margin-bottom:6px;letter-spacing:-.01em}
.s9 .sh9 p{color:var(--s-ink2);font-size:14px}
.s9 .sh9 ul{margin:12px 0 0;list-style:none;display:grid;gap:8px}
.s9 .sh9 li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;background:var(--s-warn-l);border-radius:10px;padding:9px 12px;color:#6b4100;line-height:1.4}
.s9 .sh9 li.t-k{background:var(--s-bad-l);color:#8c1c13}
.s9 .sh9 .bt9{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.s9 .ok9{text-align:center}
.s9 .ok9>i{width:60px;height:60px;border-radius:50%;background:var(--s-ok-l);color:var(--s-ok);display:grid;place-items:center;margin:0 auto 14px}
.s9 .ok9 .pv9{text-align:left;background:var(--s-soft);border-radius:12px;padding:12px;margin:16px 0 0}
.s9 .ok9 .pv9 .pvi{width:64px}
.s9 .ok9 .bt9{justify-content:center}

/* ============ 8. EJEN AI PRODUK ============ */
.s9 .ag9{background:#fff;border:1px solid var(--s-ai-b);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px #a63d5708,0 8px 28px #a63d570d}
.s9 .ag9-h{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--s-ai-l);border-bottom:1px solid var(--s-ai-b)}
.s9 .ag9-h div{flex:1;min-width:0;line-height:1.3}
.s9 .ag9-h b{display:block;font-size:14.5px;font-weight:650}
.s9 .ag9-h small{color:var(--s-ink2);font-size:12.5px;display:flex;align-items:center;gap:6px}
.s9 .ag9-b{padding:14px 16px;display:flex;flex-direction:column;gap:10px;max-height:min(46vh,430px);overflow:auto;scroll-behavior:smooth}
.s9 .am9{font-size:13.5px;line-height:1.5;color:var(--s-ink);background:var(--s-soft);border-radius:4px 14px 14px 14px;padding:10px 13px;max-width:100%;overflow-wrap:anywhere;animation:s9up .25s var(--s-ease)}
.s9 .am9.sy{background:var(--s-ink);color:#fff;border-radius:14px 4px 14px 14px;align-self:flex-end;max-width:88%}
.s9 .am9 b{font-weight:650}
.s9 .am9 ul{margin:6px 0 0;list-style:none;display:grid;gap:4px}
.s9 .am9 li{display:flex;gap:8px;align-items:flex-start;font-size:13px}
.s9 .am9 li:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--s-ok);margin-top:7px;flex:none}
.s9 .am9 li.t-a:before{background:#d98a00}.s9 .am9 li.t-k:before{background:var(--s-bad)}.s9 .am9 li.t-i:before{background:var(--s-line3)}
.s9 .am9 .bt9{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.s9 #stu .am9 .bt9 button{font-size:12.5px;padding:.42em .8em;border-radius:var(--s-pill)}
.s9 .am9 .q9{margin-top:10px}
.s9 .am9 .q9>small{display:block;font-weight:650;font-size:12.5px;margin-bottom:6px;color:var(--s-ink2)}
.s9 #stu .am9 .q9 input{padding:.5em .7em;font-size:14px}
.s9 .am9 i:not([class]){font-style:italic;color:var(--s-ink2)}
.s9 #stu .am9 .ch9 button{font-size:12.5px;padding:.38em .8em}
.s9 .am9.fk i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--s-mut);margin-right:4px;animation:s9dot 1s infinite}
.s9 .am9.fk i:nth-child(2){animation-delay:.15s}.s9 .am9.fk i:nth-child(3){animation-delay:.3s}
.s9 .ag9-f{border-top:1px solid var(--s-line2);padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px}
.s9 .ag9-in{display:flex;gap:8px;align-items:flex-end}
.s9 #stu .ag9-in textarea{margin:0;flex:1;min-height:42px;max-height:120px;font-size:13.5px;padding:.6em .8em;resize:none}
.s9 #stu .ag9-in button{width:42px;height:42px;padding:0;border-radius:11px;display:grid;place-items:center;flex:none}
.s9 #stu .ai-go,.s9 #bo .ai-go{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--s-ai);border:0;color:#fff;padding:.8em 1em;border-radius:11px;font-weight:650;font-size:14px;box-shadow:0 6px 18px #a63d5733}
.s9 #stu .ai-go:hover,.s9 #bo .ai-go:hover{filter:brightness(1.06);background:var(--s-ai)}
.s9 .ag9-f>small{font-size:11.5px;color:var(--s-mut);line-height:1.4;text-align:center}

/* ============ 9. TETAPAN ============ */
.s9 .st9{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;align-items:start}
.s9 .st9 .cd{margin:0 0 18px}
.s9 .st9 .cd>p{color:var(--s-mut);font-size:13px;margin:-8px 0 14px}
.s9 .lgu{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.s9 .lgu .av{width:72px;height:72px;font-size:22px}
.s9 .lgu div{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.s9 .lgu small{color:var(--s-mut);font-size:12.5px}
.s9 .lgu span{display:flex;gap:8px;flex-wrap:wrap}
.s9 .sv9{position:sticky;bottom:-80px;display:flex;align-items:center;gap:12px;justify-content:flex-end;padding:12px 0 0}
.s9 .hub9{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:22px}
.s9 .hub9 a{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--s-line);border-radius:var(--s-r);padding:16px;cursor:pointer;transition:.14s}
.s9 .hub9 a:hover{border-color:var(--s-ink);box-shadow:var(--s-sh)}
.s9 .hub9 a.on{border-color:var(--s-acc);box-shadow:0 0 0 1px var(--s-acc)}
.s9 .hub9 a>.ik{color:var(--s-acc);margin-top:2px}
.s9 .hub9 span{flex:1;min-width:0;line-height:1.35}
.s9 .hub9 b{display:block;font-weight:650;font-size:14px}
.s9 .hub9 small{color:var(--s-mut);font-size:12.5px}

/* ============ 10. LOG MASUK ============ */
.s9 .lg9{max-width:400px;margin:0 auto;padding:6px 2px 2px;font-family:var(--s-f);color:var(--s-ink)}
.s9 .lg9>img{height:40px;width:auto;margin:0 0 20px}
.s9 #mc .lg9 h2{font:650 23px/1.2 var(--s-f);letter-spacing:-.02em;margin:0 0 4px;color:var(--s-ink)}
.s9 .lg9>p{color:var(--s-mut);font-size:14px;margin-bottom:22px}
.s9 .lg9 label{display:block;font-size:13.5px;font-weight:600;margin-bottom:14px;color:var(--s-ink)}
.s9 .lg9 input{display:block;width:100%;margin:6px 0 0;padding:.78em .9em;border:1px solid var(--s-line3);border-radius:10px;font:400 15px var(--s-f);background:#fff;color:var(--s-ink)}
.s9 .lg9 input:focus{outline:0;border-color:var(--s-acc);box-shadow:0 0 0 3px var(--s-acc-l)}
.s9 .lg9 .pw{position:relative}
.s9 .lg9 .pw button{position:absolute;right:6px;bottom:6px;padding:.4em .7em;font-size:12.5px;font-weight:600;color:var(--s-mut);border-radius:7px}
.s9 .lg9 .pw button:hover{color:var(--s-ink);background:var(--s-soft)}
.s9 .lg9 .err{background:var(--s-bad-l);color:#8c1c13;border-radius:10px;padding:9px 12px;font-size:13.5px;margin-bottom:14px}
.s9 .lg9 .go{width:100%;background:var(--s-ink);color:#fff;border-radius:10px;padding:.9em;font:600 15px var(--s-f);margin-top:4px}
.s9 .lg9 .go:hover{background:#000}
.s9 .lg9 details{margin-top:22px;border-top:1px solid var(--s-line2);padding-top:14px}
.s9 .lg9 summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--s-ink2)}
.s9 .lg9 .dm{display:grid;gap:6px;margin-top:10px}
.s9 .lg9 .dm button{display:flex;justify-content:space-between;gap:10px;align-items:center;text-align:left;border:1px solid var(--s-line);border-radius:10px;padding:9px 12px;font-size:13px;background:#fff;color:var(--s-ink)}
.s9 .lg9 .dm button:hover{border-color:var(--s-ink);background:var(--s-soft)}
.s9 .lg9 .dm b{font-weight:600}
.s9 .lg9 .dm small{color:var(--s-mut);font-size:12px}
.s9 .lg9>small{display:block;color:var(--s-mut);font-size:12px;margin-top:16px;line-height:1.45}
html.sc.s9,html.sc.s9 body{background:var(--s-bg)}
html.sc.s9 #scs{background:radial-gradient(90% 60% at 50% 0%,#fff 0%,var(--s-bg) 70%);color:var(--s-ink)}
html.sc.s9 .scsb small{color:var(--s-acc);letter-spacing:.3em}
html.sc.s9 .scsb p{color:var(--s-ink2)}
html.sc.s9 .scsb .btn{background:var(--s-ink);color:#fff;border-radius:11px}
html.sc.s9 .scsb .btn:hover{background:#000}
html.sc.s9 .scsb .scsi{border:1px solid var(--s-line3);border-radius:11px;color:var(--s-ink);background:#fff}
html.sc.s9 .scsb .scsi:hover{border-color:var(--s-ink)}
html.sc.s9 .scsb a{color:var(--s-mut)}
html.sc.s9 .scsb a:hover{color:var(--s-ink)}
html.sc.s9:not(.in) .modal{background:#f6f5f2e6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.sc.s9:not(.in) .modal .box{max-width:460px;border:1px solid var(--s-line);box-shadow:var(--s-sh2);border-radius:20px;padding:30px}

/* ============ 11. RESPONSIF ============ */
@media(min-width:901px) and (max-width:1180px){
  .s9 #bo{grid-template-columns:224px minmax(0,1fr)}
  .s9 .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s9 .tb{padding:0 20px}.s9 .bc{padding:22px 20px 80px}
  .s9 .tb-t p{display:none}
  .s9 .usr>span:not(.av){display:none}.s9 #bo .usr{padding:4px}
  .s9 .su-g{grid-template-columns:minmax(0,1fr) 330px;gap:18px;padding:20px 18px 110px}
}
@media(max-width:1020px){
  /* satu lajur: langkah → media → Ejen AI → borang → senarai semak */
  .s9 .su-g{display:flex;flex-direction:column;align-items:stretch}
  .s9 .su-m,.s9 .su-r{display:contents}
  .s9 .stp{order:0}.s9 #s-media{order:1}.s9 .ag9{order:2}.s9 #s-info{order:3}.s9 #s-harga{order:4}.s9 #s-hantar{order:5}.s9 #s-lagi{order:6}.s9 .pn9.ck9{order:7}
  .s9 .su-r .pn9.pvw{display:none}
  .s9 .ag9-b{max-height:300px}
  .s9 .st9{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:900px){
  .s9 #bo{grid-template-columns:minmax(0,1fr);height:100vh;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
  .s9 .sn{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:40;transform:translateX(-104%);transition:transform .26s var(--s-ease);box-shadow:var(--s-sh2);padding-top:env(safe-area-inset-top)}
  .s9 #bo.mnu .sn{transform:none}
  .s9 #bo.mnu .sn-scrim{display:block;position:fixed;inset:0;background:#1d1a1966;z-index:39}
  .s9 .tb{height:56px;padding:0 10px 0 6px;gap:4px}
  .s9 .tb-t h1{font-size:16.5px}.s9 .tb-t p{display:none}
  .s9 #bo .mnb,.s9 #bo .qb{display:grid}
  .s9 .tb-q{display:none;position:absolute;left:8px;right:8px;top:8px;width:auto;z-index:8}
  .s9 .tb.cari .tb-q{display:block}
  .s9 .tb-q kbd{display:none}
  .s9 #bo .tb-q input{background:#fff;font-size:16px;padding-top:.5em;padding-bottom:.5em}
  .s9 .usr>span:not(.av){display:none}.s9 #bo .usr{padding:3px;border-color:transparent}
  .s9 .alp{position:fixed;left:12px;right:12px;top:calc(60px + env(safe-area-inset-top));width:auto}
  .s9 .bc{padding:16px 14px calc(96px + env(safe-area-inset-bottom))}
  .s9 .bb{display:flex;position:absolute;left:0;right:0;bottom:0;z-index:7;background:#fffffff5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--s-line);padding:6px 6px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;align-items:flex-end}
  .s9 #bo .bb button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;color:var(--s-mut);font-size:11px;font-weight:600;padding:6px 2px;border-radius:10px;position:relative;min-width:0}
  .s9 #bo .bb button:hover{background:none;color:var(--s-ink)}
  .s9 #bo .bb button.on{color:var(--s-acc-d)}
  .s9 #bo .bb button b{position:absolute;top:1px;left:calc(50% + 6px);min-width:16px;height:16px;border-radius:var(--s-pill);background:var(--s-acc);color:#fff;font-size:10px;line-height:16px;padding:0 4px}
  .s9 #bo .bb button.tmb{flex:0 0 58px}
  .s9 #bo .bb button.tmb i{width:48px;height:48px;border-radius:16px;background:var(--s-ink);color:#fff;display:grid;place-items:center;margin-top:-18px;box-shadow:0 8px 20px #1d1a1940;border:3px solid var(--s-bg)}
  .s9 .ui input:where(:not([type=checkbox],[type=radio],[type=range],[type=file])),.s9 .ui select,.s9 .ui textarea{font-size:16px}
  .s9 .g2,.s9 .g3,.s9 .g2e,.s9 .pk,.s9 .wai{grid-template-columns:minmax(0,1fr)}
  .s9 .g2>*,.s9 .g3>*,.s9 .g2e>*,.s9 .pk>*,.s9 .wai>*{min-width:0}
  .s9 .kp{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .s9 .kp>div{padding:13px 14px}.s9 .kp b{font-size:18px}
  .s9 .cd{padding:16px}
  .s9 .hm-hi h2{font-size:21px}
  .s9 .tk{grid-template-columns:minmax(0,1fr)}
  .s9 .bk{top:-16px}
  .s9 #bd{padding:max(18px,env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom))}
  .s9 #bd .ept{margin:14px -16px 0;padding:10px 16px;top:-18px}
  .s9 #bd .epf{margin:18px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));bottom:calc(-18px - env(safe-area-inset-bottom))}
  /* senarai produk → kad */
  .s9 .pr-t thead,.s9 .pr-t tr.hd9{display:none}
  .s9 .pr-t,.s9 .pr-t tbody{display:block}
  .s9 .pr-t tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:12px;border-bottom:1px solid var(--s-line2)}
  .s9 .pr-t tr:hover td{background:none}
  .s9 .ui .pr-t td{display:block;padding:0;border:0}
  .s9 .pr-t td.c-n{grid-column:2/4}
  .s9 .pr-t td.c-h{grid-column:2}
  .s9 .pr-t td.c-s{grid-column:3;text-align:right}
  .s9 .pr-t td.c-k,.s9 .pr-t td.c-m{display:none}
  .s9 .pr-t td.c-a{grid-column:2}
  .s9 .pr-t td.c-t{grid-column:3;text-align:right}
  .s9 .pr-n{min-width:0}
  /* studio */
  .s9 .su-h{height:56px;padding:0 10px;gap:8px}
  .s9 .su-h .hb9{display:none}
  .s9 #stu .su-bk span{display:none}.s9 #stu .su-bk{padding:.5em}
  .s9 .su-ti b{font-size:15.5px}
  .s9 .su-g{padding:14px 12px calc(110px + env(safe-area-inset-bottom));gap:14px}
  .s9 .su-m{gap:14px}
  .s9 .su-c{padding:18px 16px;border-radius:14px}
  .s9 .r9,.s9 .r9.t3{grid-template-columns:minmax(0,1fr)}
  .s9 .r9.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s9 .mg9{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .s9 .dz9{padding:26px 14px}
  .s9 .su-f{display:flex;gap:10px;position:absolute;left:0;right:0;bottom:0;z-index:5;background:#fffffff5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--s-line);padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .s9 #stu .su-f button{flex:1;padding:.85em .6em;font-size:14.5px}
  .s9 #stu{position:fixed}
  .s9 .sh9{align-items:end;padding:0}
  .s9 .sh9>div{width:100%;border-radius:20px 20px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom))}
  .s9 #stu .sh9 .bt9 button{flex:1}
  .s9 .lgu .av{width:60px;height:60px}
}
@media(max-width:480px){
  .s9 .kp b{font-size:17px}
  .s9 .hub9{grid-template-columns:minmax(0,1fr)}
  .s9 #stu .sz9 input{width:84px}
}

/* ============ 12. GERAKAN & CETAK ============ */
@keyframes s9pop{from{opacity:0;transform:translateY(-4px)}}
@keyframes s9in{from{opacity:0}}
@keyframes s9up{from{opacity:0;transform:translateY(6px)}}
@keyframes s9pus{to{transform:rotate(360deg)}}
@keyframes s9dot{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media(prefers-reduced-motion:reduce){.s9 #bo *,.s9 #bd *,.s9 #stu *,.s9 #stu{animation:none!important;transition:none!important}}
@media print{.s9 #stu{display:none!important}}