/* ══ app.css — skrin ahli ═════════════════════════════════════════════
   BACA DULU: fail ni ada DUA seksyen. Seksyen 1 (di bawah) ialah gaya asal.
   Seksyen 2 bermula pada `:root{--container:1200px...}` — reka bentuk semula
   yang ditambah di atasnya, bukan digabungkan ke dalamnya. Kekhususan sama,
   jadi SEKSYEN 2 MENANG untuk setiap sifat yang ia sebut semula.

   Sunting seksyen 2 dahulu. Kalau perubahan anda nampak tak jadi apa-apa,
   itu sebabnya: ada salinan lebih bawah yang menulis ganti.

   ponytail: 57 pemilih wujud dalam kedua-dua seksyen. Yang MATI SEPENUHNYA
   sudah dibuang; yang tinggal masih membawa sifat hidup, jadi ia kekal.
   Gabungan penuh ialah kerja berjam-jam yang tiada ujian boleh sahkan, untuk
   sifar perubahan pada skrin. Buat bila fail ni disentuh untuk sebab lain. */

h1{margin:0}
.sub{margin:16px 0 40px;max-width:68ch}
h1,h2,.sub,.doc p,.doc li,.doc h2,.doc h3{overflow-wrap:anywhere}
.row > *{min-width:0}
.card{padding:var(--pad)}
.card{display:block;text-decoration:none;margin-bottom:var(--gap);transition:border-color .15s}
.card:hover{border-color:var(--line-hi)}
.card > * + *{margin-top:12px}
ul{margin:0;padding-left:20px}
li::marker{color:var(--mut)}
ol.todo{list-style:none;padding-left:0;counter-reset:todo}
.todo label{display:flex;gap:10px;align-items:flex-start;
  margin:0;padding:6px 0;cursor:pointer;counter-increment:todo}
.todo label span{display:block;font-size:inherit;line-height:inherit;
  color:inherit;text-transform:none;letter-spacing:normal}
.todo label::before{content:counter(todo) ".";flex:0 0 1.75em;color:var(--mut)}
.todo input{appearance:auto;-webkit-appearance:auto;accent-color:var(--ok);
  background:none;border:0;padding:0;width:18px;height:18px;min-height:0;
  flex:0 0 auto;line-height:inherit;
  margin-top:5px;margin-top:calc((1lh - 18px) / 2)}
.todo input:checked + span{color:var(--mut);text-decoration:line-through}
.btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:8px 18px}
.btn.sm{min-height:36px;padding:4px 12px}
.row{display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-start;gap:16px}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{--s:60;
  background:hsl(var(--h) calc(var(--s) * 0.7%) 17%);
  border:1px solid hsl(var(--h) calc(var(--s) * 0.55%) 30%);
  color:hsl(var(--h) calc(var(--s) * 1%) 78%);
  border-radius:6px;padding:3px 11px;line-height:20px}
.home-head .sub{margin:12px 0 0}
.library{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.lib-card{display:flex;flex-direction:column;gap:10px;margin-bottom:0}
.lib-card > * + *{margin-top:0}      
.lib-foot{margin-top:auto}
.lib-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ident{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:10px;flex:none;
  background:var(--raise);border:1px solid var(--line);
  color:var(--head);font-size:15px;font-weight:500;text-transform:uppercase}
.lib-desc{color:var(--text);font-size:14px;line-height:22px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lib-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:10px;border-top:1px solid var(--line-soft);flex:none}
.chev{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;color:var(--mut)}
.lib-card:hover .chev{color:var(--head)}
.lib-card.is-owned .ident{background:color-mix(in srgb,var(--acc) 10%,transparent);border-color:color-mix(in srgb,var(--acc) 45%,transparent);color:var(--acc-hi)}
.lib-card.is-locked .ident{color:var(--mut)}
.lib-card:active{border-color:var(--line-hi)}
.execution{background:var(--sunk);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);border-radius:var(--r);
  padding:20px;margin:0 0 28px}
.execution h2{font-size:20px;line-height:28px;color:var(--head)}
.execution-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.execution-count{color:var(--acc-hi);font-size:12px;line-height:20px;white-space:nowrap}
.execution-bar{height:6px;margin:16px 0;background:var(--raise);border-radius:99px;overflow:hidden}
.execution-bar span{display:block;height:100%;background:var(--acc-fill);border-radius:inherit}
.execution-steps{display:grid;gap:8px;margin:16px 0 20px}
.execution-step{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:13px;line-height:20px}
.execution-step b{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border:1px solid var(--line-hi);border-radius:50%;font-size:11px;font-weight:500;flex:none}
.execution-step.done{color:var(--text)}
.execution-step.next{color:var(--head)}
.execution-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.execution-actions .btn{width:100%}
.execution-toggle{background:none;border:0;padding:0;color:var(--mut);font:inherit;font-size:12px;cursor:pointer;text-decoration:underline}
.execution-toggle:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.sk-eyebrow{width:92px;height:12px}
.sk-title{width:210px;height:26px;margin-top:12px}
.sk-card{height:180px;border-radius:var(--r)}   
.modlist{display:grid;gap:10px}
.mod{display:flex;align-items:center;gap:16px;min-height:var(--tap);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;text-decoration:none;transition:border-color .15s}
.mod:hover{border-color:var(--line-hi)}
.mod:active{border-color:var(--line-hi);background:var(--sunk)}
.mod:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.mod-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.mod-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mod-eyebrow{font-size:11px;line-height:18px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--mut)}
.mod-title{color:var(--head);font-size:16px;line-height:22px;font-weight:500;
  overflow-wrap:anywhere}
.mod-desc{color:var(--mut);font-size:13px;line-height:22px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mod.is-locked .mod-title{color:var(--text)}
.seg{display:flex;gap:4px;padding:4px;margin:16px 0 20px;max-width:400px;
  background:var(--sunk);border:1px solid var(--line);border-radius:10px}
.seg-b{flex:1;display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;border-radius:7px;text-decoration:none;min-width:max-content;
  color:var(--mut);font-size:14px;font-weight:500}
.seg-b:hover{color:var(--head)}
.seg-b:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.lockbox{background:var(--sunk);border:1px solid var(--line);
  border-radius:var(--r);padding:18px 20px;margin-bottom:var(--gap)}
.lockbox-h{display:flex;align-items:center;gap:8px;
  color:var(--head);font-size:15px;line-height:24px;font-weight:500}
.lockbox-h svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lockbox-b{color:var(--mut);font-size:13px;line-height:22px;margin-top:8px}
.lockbox-p{color:var(--head);font-size:20px;line-height:28px;margin-top:12px}
.lockbox .btn{margin-top:14px;width:100%;max-width:320px}
.modhead h1{font-size:26px;line-height:34px;letter-spacing:-.6px}
.grid{display:grid;grid-template-columns:1fr;gap:40px}
.stack{display:grid;gap:40px;align-content:start}
.doc h3{font-size:16px;line-height:24px;color:var(--head);font-weight:500;margin:0}
.doc ul,.doc ol{padding-left:24px}
.doc > * + *{margin-top:20px}
.doc h2 + *,.doc h3 + *{margin-top:12px}
.doc > * + h2,.doc > * + h3{margin-top:36px}
.refs{display:flex;flex-wrap:wrap;gap:8px}
.ref{--h:142;--s:45;
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;
  background:hsl(var(--h) calc(var(--s) * 0.7%) 17%);
  border:1px solid hsl(var(--h) calc(var(--s) * 0.55%) 30%);
  color:hsl(var(--h) calc(var(--s) * 1%) 78%);
  border-radius:6px;font-size:13px;line-height:20px}
.ref svg{flex:none;opacity:.85}
.ref-img{--h:142}     
.ref-model{--h:222}   
.ref-video{--h:265}   
.ref-audio{--h:43}    
.ref-text{--h:14}     
.ref-link{--h:192}    
.ref-none{--s:0;color:var(--mut)}
.doc code{background:var(--raise);border:1px solid var(--line);border-radius:4px;
  padding:1px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.code{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);overflow:hidden}
.codebar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:10px 14px;border-bottom:1px solid var(--line);background:var(--sunk)}
.codebar .eyebrow{margin:0}
.btn.sm{padding:4px 12px;font-size:13px;line-height:20px;color:var(--head)}
.doc pre{margin:0;padding:16px;overflow-x:auto}
.doc pre code{background:none;border:0;padding:0;font-size:13px;line-height:24px;
  white-space:pre;color:var(--text)}
.appbar{position:sticky;top:0;z-index:10;background:var(--bg);
  border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.appbar[hidden]{display:none}
.appbar-in{max-width:var(--container);margin:0 auto;min-height:56px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
.appbar-l,.appbar-r{display:flex;align-items:center;gap:10px;min-width:0}
.appbar-l > *,.appbar-r > *{min-width:0}
.appbar-r{flex:none}
.brand{font-size:14px;font-weight:500;color:var(--head);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.backlink{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);
  margin-left:-8px;padding:0 8px;border-radius:var(--r-sm);
  color:var(--mut);font-size:14px;font-weight:500;text-decoration:none}
.backlink:hover{color:var(--head)}
.backlink svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.acct{position:relative;min-width:0}
.acct > summary{display:flex;align-items:center;gap:6px;min-height:var(--tap);
  padding:0 8px;border-radius:var(--r-sm);cursor:pointer;list-style:none;
  font-size:13px;line-height:20px;color:var(--mut);max-width:18ch;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct > summary::-webkit-details-marker{display:none}
.acct > summary:hover{background:var(--raise);color:var(--head)}
.acct > summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.acct[open] > summary{background:var(--raise);color:var(--head)}
.acct-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;
  min-width:100%;padding:6px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm)}
.acct-menu .btn{width:100%}
.acct-menu .btn.danger:hover{border-color:#ff4d3d;background:#ff4d3d24}
.btn.locked{background:transparent;color:var(--mut);cursor:default}
.gate{max-width:380px;margin:0 auto;text-align:center;padding-top:40px}
.gate h1{margin-bottom:8px}
.gate form{display:grid;gap:10px;margin-top:28px;text-align:left}
.gate input{background:var(--surface);padding:11px 14px;line-height:20px}
.gate form button{width:100%;padding:11px 18px}
.gate .swap{margin-top:20px;font-size:12px;line-height:20px;color:var(--mut)}
.gate a.lnk,.gate .swap a,.gate .lnk{cursor:pointer;text-decoration:underline}
.gate .lnk{background:none;border:0;padding:0;width:auto;
  font:inherit;color:inherit}
.gate .lnk:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.note{margin-top:20px;font-size:12px;line-height:20px;color:var(--mut);
  border:1px solid var(--line);border-radius:6px;padding:12px 14px;text-align:left}
.note.err{color:var(--err);border-color:#e8918f55;padding:8px 12px;text-align:center;
  max-width:300px;margin:20px auto 0}
@media(min-width:640px){
  .acct > summary{max-width:22ch}
  .home-head{margin-bottom:24px}
}
@media(min-width:768px){
  .grid{grid-template-columns:1.35fr 1fr;column-gap:56px}
  .row{flex-direction:row;gap:24px}
  .modhead h1{font-size:30px;line-height:40px;letter-spacing:-.75px}
  .modhead.row{align-items:center}
  .seg-b{padding:0 22px}
  .lockbox .btn{width:auto}
}
/* Warna datang dari /ui.css — satu palet untuk seluruh tapak. Yang tinggal
   di sini ialah yang benar-benar berbeza untuk ruang kerja: bekas yang lebih
   lebar, dan bucu yang lebih bulat.

   --acc-fill ialah isian butang utama, bukan warna teks: hijau limau yang
   sama dengan tanda jenama (favicon.svg), dengan dakwat gelapnya sebagai
   teks. Ia satu-satunya warna tepu pada skrin ahli — sebab itulah butang
   utama kelihatan tanpa perlu dicari. Nilai tetap, bukan token tema: limau
   ialah isian pada kertas mahupun pada gelap, dan teks di atasnya sentiasa
   dakwat yang sama. */
:root{--container:1200px;--r:12px;--r-sm:8px;--pad:24px;--gap:20px;
  --acc-fill:#c6f27f;--on-acc:#131a22;--acc-fill-hi:#d4f79b}
:root[data-theme="light"]{--acc-fill-hi:#b6e968}
body{font-size:16px;line-height:1.7}
main{padding:32px 24px 72px}
main:focus{outline:none}
h1{font-size:32px;line-height:1.16;letter-spacing:-1px;font-weight:500;text-wrap:balance}
h2{font-weight:500;font-size:22px;line-height:1.35;letter-spacing:-.5px}
.sub{font-size:16px;line-height:1.75;color:var(--mut);max-width:60ch}
.eyebrow{font-size:13px;line-height:1.5;text-transform:none;letter-spacing:.02em;color:var(--acc)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.btn{font-size:14px;min-height:46px;padding:10px 18px;white-space:normal;text-align:center;
  transition:background-color .18s,border-color .18s}
.btn.primary{background:var(--acc-fill);border-color:var(--acc-fill);color:var(--on-acc)}
.btn.primary:hover{background:var(--acc-fill-hi);border-color:var(--acc-fill-hi);color:var(--on-acc)}
.btn.primary .chev{color:inherit}
.btn:not(.primary):hover{background:var(--raise)}
/* ── Bar atas ─────────────────────────────────────────────────────────
   Satu bentuk untuk setiap kawalan: tinggi 44, bucu 10, satu garis
   sempadan, latar lut. Sebelum ni butang tema datang dari .btn dalam
   ui.css (kotak berisi), cip akaun ialah pil bersempadan, dan Kakiprompt
   butang padu — tiga sistem dalam satu bar, dan yang paling kuat
   antaranya ialah destinasi paling kurang penting. Isian padu kini
   disimpan untuk tindakan utama halaman sahaja. Bentuk yang sama dipakai
   header home.html, jadi tapak awam dan ruang kerja terasa satu produk. */
.appbar{background:var(--bg);background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.appbar-in{min-height:76px;padding-inline:24px;gap:10px;flex-wrap:nowrap}
.appbar-l{gap:12px;flex:1}
.appbar-r{gap:10px}
.app-logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;flex:none;
  color:var(--head);font-size:16px;font-weight:500;letter-spacing:-.4px;text-decoration:none}
.brand-mark{display:block;width:24px;height:24px;flex:none;
  background:url(/favicon.svg) center/contain no-repeat}
#navslot{min-width:0}
/* Logo dan back link buat kerja sama: tunjuk hala nak balik. Bila back link
   ada (dalam seksyen/modul — kes biasa), logo digugurkan supaya tepi kiri
   bar ada SATU sasaran, bukan dua yang bertindih maksud. Logo kekal hanya
   di akar ruang kerja, tempat tiada back link untuk gantikannya. */
.appbar-l:has(.backlink) .app-logo{display:none}
.backlink{font-size:14px}
/* Tiga kawalan kanan, satu bentuk. Kakiprompt hidup dua kali dalam DOM —
   dalam menu akaun untuk telefon, butang sendiri untuk desktop — CSS yang
   pilih mana satu ditunjukkan, bukan JS. */
.appbar .theme-toggle,.appbar-kp,.acct>summary{box-sizing:border-box;
  height:44px;min-height:44px;border:1px solid var(--line-hi);border-radius:10px;
  background:transparent;color:var(--head);font-family:inherit;font-size:14px;
  font-weight:500;line-height:1;white-space:nowrap;
  transition:background-color .18s,border-color .18s,color .18s}
.appbar .theme-toggle{width:44px;min-width:44px;padding:0}
.appbar-kp{display:none;padding:0 16px}
.acct>summary{gap:8px;padding:0 10px 0 6px;max-width:none}
.appbar .theme-toggle:hover,.appbar-kp:hover,
.acct>summary:hover,.acct[open]>summary{background:var(--raise);border-color:var(--acc)}
.acct-avatar{display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;background:var(--raise);color:var(--head);font-size:12px;font-weight:600;flex:none}
.acct>summary:hover .acct-avatar,.acct[open]>summary .acct-avatar{background:var(--surface)}
.acct-name{display:none}
/* Chevron dilukis, bukan glif "⌄": glif itu tiada dalam Instrument Sans dan
   jatuh ke fon ganti, jadi tingginya berubah antara pelayar. */
.acct>summary::after{content:"";width:7px;height:7px;flex:none;opacity:.7;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg)}
.acct[open]>summary::after{transform:translateY(2px) rotate(225deg)}
/* Menu akaun: e-mel dahulu — sebelum ni ia hanya dalam atribut title, yang
   telefon tak pernah tunjuk, jadi tiada cara tahu akaun mana yang terbuka.
   Kemudian baris rata kiri, bukan butang penuh bersempadan di tengah. */
.acct-menu{min-width:224px;top:calc(100% + 8px);padding:6px;
  border:1px solid var(--line-hi);border-radius:12px;box-shadow:var(--shadow)}
.acct-email{display:block;padding:8px 12px 12px;margin-bottom:6px;
  border-bottom:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--mut);
  overflow:hidden;text-overflow:ellipsis}
.acct-menu .btn{width:100%;justify-content:flex-start;text-align:left;
  min-height:40px;padding:0 12px;border:0;background:transparent;font-size:14px}
.acct-menu .btn:hover{background:var(--raise);border-color:transparent}
.acct-menu .btn.danger{color:var(--err);border:0;background:transparent}
.acct-menu .btn.danger:hover{background:#ff4d3d1f;border-color:transparent}
.skip-link{position:fixed;z-index:50;left:16px;top:8px;padding:10px 16px;
  background:var(--acc-fill);color:var(--on-acc);border-radius:6px;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.home-head{margin-bottom:32px}
.home-head .sub{margin-top:14px}
.workspace-home{display:grid;gap:36px;align-items:start}
.collection-heading{font-size:17px;line-height:1.4;margin:0 0 18px}
.collections{min-width:0}
.library{grid-template-columns:1fr;gap:16px}
.lib-card{padding:24px;gap:18px;background:var(--surface);border-color:var(--line)}
.lib-card h2{font-size:23px;line-height:1.3;letter-spacing:-.6px}
.lib-desc{font-size:15px;line-height:1.7;-webkit-line-clamp:3;color:var(--mut)}
.lib-foot{padding-top:18px;border-color:var(--line)}
.ident{background:var(--raise);border:0;border-radius:8px;width:38px;height:38px}
.lib-card.is-owned{border-color:var(--line-hi)}
.lib-card.is-owned .ident{background:var(--raise);color:var(--acc)}
.lib-card:hover{border-color:var(--acc)}
.status{letter-spacing:0;border-radius:5px;padding:3px 8px;font-size:13px}
.status-owned,.status-public{background:transparent;border-color:var(--line-hi);color:var(--acc)}
.continue{min-width:0;background:var(--surface);border:1px solid var(--line-hi);border-radius:12px;overflow:hidden}
.continue>.execution{border:0;background:transparent;margin:0;padding:24px 24px 0}
.continue>.btn{display:flex;margin:20px 24px 24px;justify-content:space-between;gap:16px}
.execution{border:1px solid var(--line-hi);background:var(--surface);padding:24px;margin-bottom:28px}
.execution h2{font-size:23px;line-height:1.3;letter-spacing:-.6px}
.execution .eyebrow{margin-bottom:10px}
.execution-top{gap:18px;flex-wrap:wrap}
.execution-count{font-size:13px;color:var(--acc)}
.execution p{font-size:14px;line-height:1.75;margin-top:16px;color:var(--mut)}
.execution p b{color:var(--head);font-weight:500}
.execution-bar{height:3px;background:var(--line);margin:20px 0;border-radius:0}
.execution-bar span{background:var(--acc-fill);border-radius:0;transition:width .25s ease}
.execution-detail>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  gap:12px;font-size:13px;color:var(--text);padding:8px 0}
.execution-detail>summary::-webkit-details-marker{display:none}
.execution-detail>summary::after{content:"+";color:var(--acc)}
.execution-detail[open]>summary::after{content:"−"}
.execution-steps{gap:0;margin:12px 0 0}
.execution-step{position:relative;align-items:flex-start;padding:0 0 18px;gap:12px;font-size:13px;line-height:24px}
.execution-step:last-child{padding-bottom:0}
.execution-step b{width:24px;height:24px;background:var(--surface);position:relative;z-index:1}
.execution-step:not(:last-child)::after{content:"";position:absolute;left:11px;top:24px;bottom:0;width:1px;background:var(--line-hi)}
.execution-step.done::after{background:var(--acc)}
.execution-step.done b{background:var(--acc-fill);border-color:var(--acc-fill);color:var(--on-acc)}
.execution-step.next b{border-color:var(--acc);color:var(--acc)}
.execution-actions{margin-top:22px;gap:16px}
.execution-toggle{font-size:13px;text-underline-offset:4px;min-height:36px;text-align:left}
.modlist{gap:12px}
.mod{padding:22px 24px;gap:24px}
.mod-title{font-size:19px;line-height:1.4;letter-spacing:-.3px}
.mod-desc{font-size:15px;line-height:1.7;max-width:65ch}
.mod-eyebrow{font-size:13px;letter-spacing:0;text-transform:none;color:var(--acc)}
.seg{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;gap:24px;padding:0;margin:24px 0;max-width:none}
.seg-b{flex:none;min-width:0;border-radius:0;padding:12px 0;min-height:48px;border-bottom:2px solid transparent;font-size:14px}
.seg-b.on{background:none;box-shadow:none;color:var(--acc);border-bottom-color:var(--acc)}
.grid{gap:40px}.stack{gap:32px}
.panel{padding-top:20px;border-top:1px solid var(--line);min-width:0}
.panel p,.panel li{font-size:15px;line-height:1.85}
.panel .eyebrow{font-size:13px;color:var(--acc);margin-bottom:14px}
.tag{border-color:var(--line-hi);background:var(--surface);color:var(--text);font-size:13px;padding:4px 10px}
.reading-layout{display:grid;gap:28px;align-items:start}
.reading-layout>.execution{margin:0;min-width:0}
.doc{font-size:16px;line-height:1.9;min-width:0;max-width:70ch}
.doc h2{font-size:25px;line-height:1.4}.doc h3{font-size:20px;line-height:1.5}
.doc li+li{margin-top:8px}.doc a{color:var(--acc);text-underline-offset:4px}
.doc>*+h2,.doc>*+h3{margin-top:40px}
.code{background:var(--sunk);border-radius:8px}
.codebar{background:var(--surface);padding:12px 16px}
.doc pre{padding:20px}.doc pre code{font-size:13px;line-height:1.85}
.lockbox{padding:28px;border-color:var(--line-hi);background:var(--surface)}
.lockbox-b{font-size:15px;line-height:1.75;max-width:58ch}
.emptystate{padding:40px 24px;border-style:solid;text-align:left}
.emptystate .et{font-size:22px;line-height:1.35}.emptystate .eb{margin:14px 0 0;max-width:55ch;font-size:15px;line-height:1.75}
/* Gate berpusat: jenama, tajuk, sub — semua di tengah; medan borang
   sahaja yang kekal rata kiri, sebab label di atas kotak yang berpusat tak
   ada tepi untuk mata ikut. */
.gate{max-width:420px;margin:0 auto;padding:28px 0 0;text-align:center}
.gate>.app-logo{margin-bottom:36px}
.gate h1{font-size:36px;line-height:1.15;letter-spacing:-1px}
.gate-intro{font-size:15px;color:var(--mut);line-height:1.75;margin-top:12px}
.gate form{gap:8px;margin-top:30px;text-align:left}
.gate label{font-size:13px;line-height:1.5;color:var(--text)}
.gate>form>label{margin-top:12px}
/* Label kiri, "Forgot password?" kanan — satu baris, sebab pautan itu hanya
   masuk akal bila mata sudah berada di medan password. */
.gate-lrow{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-top:12px}
.gate-lrow .lnk{font-size:13px;color:var(--mut)}
.gate input{min-height:50px;background:var(--surface);font-size:16px;border-color:var(--line-hi)}
.gate form .btn{margin-top:14px;min-height:50px}
.gate-or{display:flex;align-items:center;gap:14px;margin:22px 0;
  font-size:13px;letter-spacing:2px;color:var(--mut)}
.gate-or::before,.gate-or::after{content:"";flex:1;height:1px;background:var(--line)}
.gate-alt{width:100%;min-height:50px}
.gate .swap{font-size:13px;line-height:1.85;margin-top:24px}
.gate .swap .lnk{min-height:36px;text-underline-offset:4px}
.note{padding:16px;font-size:13px;line-height:1.75;background:var(--surface)}
.boot-note{font-size:15px;color:var(--mut);padding-top:40px}

/* Notis: satu baris berjalan di bawah bar aplikasi, selebar kandungan yang
   sama seperti main supaya ia sebaris dengan halaman di bawahnya. Tempoh
   animasi datang dari showNotice() — lihat app.html. */
.notice{max-width:var(--container);margin:20px auto -12px;padding:0 24px}
.notice-in{overflow:hidden;padding:11px 0;border:1px solid var(--line);
  border-radius:8px;background:var(--surface)}
/* Muat dalam kotak: satu salinan, di tengah, diam. Berjalan hanya bila ia
   memang tidak muat — notis pendek yang bergerak lebih sukar dibaca, bukan
   lebih mudah. showNotice() yang membuat perbandingan itu. */
.notice-track{display:flex;width:100%;justify-content:center;gap:64px}
.notice-track span{flex:none;white-space:nowrap;font-size:13px;line-height:1.6;color:var(--mut)}
.notice-track span+span{display:none}
.notice.scroll .notice-track{width:max-content;justify-content:flex-start;
  animation:notice-roll var(--dur,20s) linear infinite}
.notice.scroll .notice-track span+span{display:block}
/* Berhenti bila tetikus di atasnya: ayat panjang perlu dibaca semula. */
.notice:hover .notice-track{animation-play-state:paused}
@keyframes notice-roll{to{transform:translateX(calc(-50% - 32px))}}
/* Tiada gerakan: satu salinan yang membalut, di tengah. */
@media(prefers-reduced-motion:reduce){
  .notice.scroll .notice-track{width:100%;justify-content:center;animation:none}
  .notice.scroll .notice-track span{white-space:normal;text-align:center}
  .notice.scroll .notice-track span+span{display:none}
}
@media(max-width:639px){
  .appbar-in{min-height:64px;padding-inline:20px;gap:8px}
  .appbar-l{gap:8px}.appbar .app-logo>span:last-child{display:none}
}
@media(min-width:640px){
  main{padding:40px 40px 80px}.appbar-in{padding-inline:40px}
  .notice{padding-inline:40px;margin-top:28px}
  .library,.modlist{grid-template-columns:repeat(2,minmax(0,1fr))}
  h1,.modhead h1{font-size:38px;line-height:1.15}
  /* Ruang kembali di desktop: nama penuh dan bingkai pada pencetus akaun,
     Kakiprompt sebagai butang sendiri (bukan tersorok dalam menu). */
  .acct>summary{padding:0 12px 0 8px;max-width:22ch}
  .acct-name{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .appbar-kp{display:inline-flex}
  .acct-kp{display:none}
}
@media(min-width:960px){
  main{padding-top:48px}.home-head{margin-bottom:40px}
  .workspace-home:has(.continue){grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:40px}
  .workspace-home:has(.continue) .library{grid-template-columns:1fr}
  .continue>.execution{padding:32px 32px 0}.continue>.btn{margin:24px 32px 32px}
  .reading-layout:has(>.execution){grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px}
  .reading-layout>.execution{grid-column:2;grid-row:1;position:sticky;top:100px;padding:24px}
  .reading-layout>.doc{grid-column:1;grid-row:1}
  .grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:64px}
  .gate{padding-top:48px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}


@media(min-width:960px){.continue{position:sticky;top:100px}}

.doc h4{font-size:17px;line-height:1.5;font-weight:500;color:var(--head);margin-bottom:12px}


/* ══ Ruang kerja: satu sistem ═════════════════════════════════════════
   Grid dua lajur pada 640px+ meninggalkan satu kad terapung di kiri dengan
   separuh skrin kosong di sebelahnya bila pelanggan hanya ada satu sistem.
   Di sini lajur kekal satu dan seluruh jalur dihadkan lebarnya, jadi tajuk,
   kad dan baris bantuan berkongsi ukuran yang sama — satu turus, bukan kad
   tersadai. Kekhususan :has(:only-child) mengatasi peraturan media 640px.
   Dua sistem atau lebih: tiada apa berubah. */
.collections:has(.library > :only-child){max-width:600px}
.library:has(> :only-child){grid-template-columns:minmax(0,1fr)}

/* Kaki kad ialah ajakan, bukan kiraan langkah. Warna aksen + anak panah yang
   sama seperti sebelum ni, cuma sekarang ia bercakap ke mana ia pergi. */
.lib-cta{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-width:0;color:var(--acc);font-size:14px;line-height:20px}
.lib-cta .chev{color:inherit;transition:transform .15s}
.lib-card:hover .lib-cta{color:var(--acc-hi)}
.lib-card:hover .lib-cta .chev{color:inherit;transform:translateX(3px)}
/* Kad ini pautan; papan kekunci perlu nampak di mana ia berada. */
.lib-card:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-color:var(--acc)}

.help-line{margin:20px 0 0;color:var(--mut);font-size:14px;line-height:22px}
.help-line a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.help-line a:hover{color:var(--acc-hi)}
.help-line a:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:3px}