/* ===== Lapisan aplikasi: log masuk, senarai proposal, pautan pelanggan =====
   Semua warna & fon guna token asal (--navy, --orange, --soft, --line, --serif, --sans). */
[hidden]{display:none!important}
body:not(.v-edit):not(.v-share) .app{display:none}
.view{display:none}
body.v-login #vLogin,body.v-dash #vDash,body.v-gone #vGone{display:block}
#shareBar{display:none}
body.v-share #shareBar{display:flex}
body.v-share .side{display:none}
body.v-share .app{display:block;min-height:0}
body.v-share .preview{padding-top:18px}

/* log masuk */
#vLogin,#vGone{min-height:100vh;padding:48px 16px}
.lcard{max-width:390px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:0 22px 22px;box-shadow:0 2px 14px rgba(20,35,60,.10)}
.lcard header{padding:18px 0 12px;border-bottom:2px solid var(--orange);display:flex;gap:12px;align-items:center}
.lcard header img{width:52px;height:52px;flex:none}
.lcard h1{font-family:var(--serif);font-size:20px;margin:0;color:var(--navy);line-height:1.15;text-wrap:balance}
.lcard header p{margin:4px 0 0;color:var(--muted);font-size:12px}
.lcard form{display:grid;gap:10px;margin-top:14px}
.lcard form button{width:100%;padding:9px 11px;font-size:13px;font-weight:600}
.lcard .demo{background:var(--soft);border-radius:6px;padding:8px 10px;margin-top:14px;font-size:11.5px;color:var(--muted);line-height:1.6}
.lcard .demo b{color:var(--ink);font-weight:600}
.lcard .demo code{font-family:var(--sans);background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:0 5px;color:var(--navy)}

/* bar atas (senarai) */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--panel);border-bottom:2px solid var(--orange);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brandrow{display:flex;align-items:center;gap:10px;min-width:0}
.brandrow img{width:40px;height:40px;flex:none}
.topbar h1{font-family:var(--serif);font-size:20px;margin:0;color:var(--navy);line-height:1.1;text-wrap:balance}
.topbar p{margin:2px 0 0;color:var(--muted);font-size:12px}
.userbox{display:flex;align-items:center;gap:10px}
.userbox .who{text-align:right;font-size:11.5px;color:var(--muted);line-height:1.3}
.userbox .who b{display:block;color:var(--ink);font-weight:600;font-size:12.5px}

/* senarai proposal */
.dwrap{max-width:1180px;margin:0 auto;padding:18px 16px 60px}
.dsum{grid-template-columns:repeat(4,1fr);margin-top:0}
.dsum div{background:var(--panel);border:1px solid var(--line);padding:8px 10px}
.dsum b{font-size:17px}
.dtools{display:flex;gap:8px;align-items:center;margin:14px 0 10px;flex-wrap:wrap}
.dtools input{flex:1 1 240px;width:auto;min-width:0}
.dtools select{width:auto;flex:none}
.dtools #btnNew{margin-left:auto;font-weight:600}
.tcard{background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow-x:auto}
table.qt{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.qt th{background:var(--navy);color:#fff;text-align:left;font-weight:600;padding:8px 10px;font-size:11.5px;white-space:nowrap}
.qt td{padding:9px 10px;border-bottom:1px solid #e3e7ec;vertical-align:middle}
.qt tr:nth-child(even) td{background:var(--soft)}
.qt tr:last-child td{border-bottom:0}
.qt .r{text-align:right}
.qt .nw{white-space:nowrap}
.qt .ref{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.qt .cust{all:unset;cursor:pointer;font-weight:600;color:var(--navy);text-wrap:balance}
.qt .cust:hover{text-decoration:underline}
.qt .cust:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
.qt .sys{color:var(--ink)}
.qt .sys small{display:block;color:var(--muted);font-size:11px}
.qt .amt{font-weight:600;color:var(--navy)}
.qt .acts{display:flex;gap:5px;justify-content:flex-end}
.qt .acts button{padding:5px 9px;font-size:12px}
button.danger{background:transparent;color:#a33;border-color:#e2b4b4}
button.danger.solid{background:#a33;color:#fff;border-color:#a33}
.empty{padding:36px 16px;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.6}
.empty b{display:block;font-family:var(--serif);font-size:17px;color:var(--navy);margin-bottom:4px}
.foot-note{font-size:11px;color:var(--muted);margin-top:10px;line-height:1.5}

/* bar aplikasi dalam builder */
/* header asal tak lagi melekat (terlalu tinggi, tutup borang di bawah); hanya bar kecil ini melekat */
.side header{position:static}
.crumb{position:sticky;top:0;z-index:3;background:var(--panel);display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.crumb button{padding:5px 10px;font-size:12px}
.crumb #abSave{font-weight:600;padding:5px 14px}
.crumb .tag{margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.side header{padding-top:12px}
.tag.ok{background:#e3f1e8;color:#1d6b3a}
#appBtns button{font-weight:600}
#appBtns button.danger{font-weight:400;margin-left:auto}

/* bar pautan pelanggan */
#shareBar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--panel);border-bottom:2px solid var(--orange);padding:10px 16px;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap}
#shareBar .sbl{display:flex;align-items:center;gap:10px;min-width:0}
#shareBar img{width:38px;height:38px;flex:none}
#shareBar .sbt{min-width:0}
#shareBar .sbt b{font-family:var(--serif);font-size:17px;color:var(--navy);display:block;line-height:1.15;text-wrap:balance}
#shareBar .sbt span{font-size:11.5px;color:var(--muted)}
#shareBar .sbr{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
#shareBar .sbr button{font-weight:600}
#shareBar .sbr button.ghost{font-weight:400}
#sbMsg{flex-basis:100%;margin-top:0}
#sbMsg:empty{display:none}

/* modal */
.modal{position:fixed;inset:0;background:rgba(20,25,35,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.mbox{background:var(--panel);border-radius:6px;max-width:460px;width:100%;padding:0 18px 16px;box-shadow:0 10px 40px rgba(10,15,25,.3);max-height:calc(100vh - 32px);overflow-y:auto}
.mbox h2{font-family:var(--serif);font-size:19px;color:var(--navy);margin:0;padding:14px 0 10px;border-bottom:2px solid var(--orange);text-wrap:balance}
.mbox p{font-size:12.5px;color:var(--ink);line-height:1.5;margin:12px 0 0}
.mbox .note{color:var(--muted)}
.mbox .mact{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-top:16px}
.linkrow{display:flex;gap:6px;margin-top:10px}
.linkrow input{font-size:12px;min-width:0;color:var(--navy);background:var(--soft)}
.linkrow button{flex:none}
.mbox .btns a{display:inline-flex;align-items:center;font-family:var(--sans);font-size:12.5px;border:1px solid var(--navy);border-radius:6px;padding:7px 11px;text-decoration:none;background:transparent;color:var(--navy)}
.mbox .btns a:focus-visible{outline:2px solid var(--orange);outline-offset:1px}

/* toast */
#toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--navy);color:#fff;font-size:12.5px;padding:9px 14px;border-radius:6px;z-index:60;box-shadow:0 4px 16px rgba(0,0,0,.2);max-width:calc(100% - 32px);text-align:center}
#toast.err{background:#a33}

@media (max-width:760px){
  .dsum{grid-template-columns:1fr 1fr}
  .dtools #btnNew{margin-left:0;flex:1 1 100%}
  .qt thead{display:none}
  .qt,.qt tbody,.qt tr,.qt td{display:block;width:100%}
  .qt tr{border-bottom:1px solid var(--line);padding:8px 0}
  .qt tr:last-child{border-bottom:0}
  .qt tr:nth-child(even){background:var(--soft)}
  .qt tr:nth-child(even) td{background:transparent}
  .qt td{border:0;padding:3px 12px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;text-align:right}
  .qt td::before{content:attr(data-l);flex:none;font-weight:400;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;text-align:left}
  .qt td.cx{display:block;text-align:left;padding-bottom:5px}
  .qt td.cx::before,.qt td.ax::before{display:none}
  .qt .acts{justify-content:flex-start;padding-top:6px}
  .userbox .who{display:none}
  .topbar{flex-wrap:nowrap}
  .brandrow{flex:1 1 auto}
  .topbar h1{font-size:17px}
  .topbar p{display:none}
}
@media print{#shareBar,.view,.modal,#toast{display:none!important}body.v-share .app{display:block}}

/* ===== Tambahan versi server: pautan berbentuk butang, halaman Pengguna =====
   Guna token & gaya butang asal sahaja. */
a.btn{display:inline-flex;align-items:center;font-family:var(--sans);font-size:12.5px;border:1px solid var(--navy);background:var(--navy);color:#fff;border-radius:6px;padding:7px 11px;text-decoration:none;cursor:pointer;line-height:normal}
a.btn.ghost{background:transparent;color:var(--navy)}
a.btn:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
.crumb a.btn{padding:5px 10px;font-size:12px}
.userbox form{margin:0}
.lcard.wide{max-width:560px}
.lcard .grid{margin-top:0}
.lcard .grid button{width:auto}
.lcard .fbtns{display:flex;gap:6px;justify-content:flex-end;grid-column:1/-1;margin-top:4px}
.lcard .fbtns button,.lcard .fbtns a.btn{width:auto;padding:7px 14px;font-size:12.5px;font-weight:600}
.lcard .fsec{margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
.lcard .fsec h2{font-family:var(--serif);font-size:16px;color:var(--navy);margin:0 0 4px}
.qt tr.off td{color:var(--muted)}
.ok-msg{background:#e3f1e8;color:#1d6b3a;border-radius:6px;padding:8px 10px;font-size:12.5px;margin-bottom:12px}
.err-msg{background:#f7e3e3;color:#a33;border-radius:6px;padding:8px 10px;font-size:12.5px;margin-bottom:12px}
.err-msg ul{margin:0;padding-left:18px}
.utag{display:inline-block;font-size:10.5px;font-weight:600;border-radius:4px;padding:1px 6px;background:var(--soft);color:var(--navy)}
.utag.admin{background:var(--accent-soft);color:#9a4a12}
.utag.off{background:#eee;color:#888}
body.v-users #vUsers{display:block}
.userbox button,.userbox a.btn{white-space:nowrap}