/* ==========================================================================
   Javamaya Engine — Panel Admin
   --------------------------------------------------------------------------
   Arah desain: panel ini dipakai orang yang terbiasa dengan spreadsheet,
   bukan dengan dashboard developer. Jadi kosakata visualnya diambil dari
   spreadsheet — bilah rumus yang selalu terlihat, gutter nomor baris,
   chip huruf kolom yang memetakan tiap field ke kolom aslinya di Sheets.
   Bukan hiasan: chip itu memberi tahu Anda persis kolom mana yang harus
   diedit kalau Anda memilih bekerja langsung di Google Sheets.

   Warna: tinta gelap kebiruan untuk kerangka, kertas hangat untuk kerja,
   kunyit sebagai satu-satunya aksen. Tidak memakai hijau spreadsheet
   supaya tidak tertukar dengan Google Sheets itu sendiri.
   ========================================================================== */

:root{
  --ink:#16181F; --ink-2:#1E212A; --ink-3:#2A2E3A; --ink-line:#333849;
  --paper:#F7F7F5; --card:#FFFFFF; --grid:#E6E5E0; --grid-2:#D3D2CB;
  --text:#22242C; --text-2:#5C6070; --text-3:#8B8F9C;
  --on-ink:#E9EAEE; --on-ink-2:#9497A4;
  --kunyit:#E8A33D; --kunyit-d:#CE8A25; --kunyit-a:rgba(232,163,61,.16);
  --nila:#2D4A8A; --daun:#3E7C59; --merah:#C4453D;
  --daun-bg:#E8F2EB; --merah-bg:#FBEBEA; --nila-bg:#EAEFF8;

  --disp:'Familjen Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  --side-w:236px; --bar-h:46px;
  --r:8px; --r-sm:5px;
  --sh:0 1px 2px rgba(20,22,30,.06),0 8px 24px -14px rgba(20,22,30,.22);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--body);font-size:14.5px;line-height:1.55;
  color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--disp);margin:0;letter-spacing:-.018em;font-weight:600;line-height:1.2}
a{color:var(--nila);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--kunyit);outline-offset:2px;border-radius:3px}
[hidden]{display:none!important}
svg{display:block}

/* ---------------------------------------------------------- gerbang */

.gate{min-height:100%;display:grid;place-items:center;padding:1.5rem;background:var(--ink);
  background-image:linear-gradient(var(--ink-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--ink-line) 1px,transparent 1px);
  background-size:44px 44px;background-position:-1px -1px}
.gate-panel{width:100%;max-width:26rem;background:var(--card);border-radius:14px;
  padding:2.4rem 2.2rem;box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
.gate-mark{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;font-weight:500;
  color:var(--text-3);margin-bottom:1.6rem}
.gate-mark span{color:var(--kunyit)}
.gate h1{font-size:1.42rem;margin-bottom:.5rem}
.gate-sub{color:var(--text-2);font-size:.9rem;margin:0 0 1.7rem}
.gate form{display:grid;gap:1.05rem}
.gate label{display:grid;gap:.35rem;font-size:.85rem;font-weight:500}
.gate small{color:var(--text-3);font-weight:400;font-size:.78rem;line-height:1.45}

/* ------------------------------------------------------------ kontrol */

input[type=text],input[type=email],input[type=password],input[type=search],
input[type=url],input[type=number],select,textarea{
  width:100%;padding:.58em .78em;background:var(--card);color:var(--text);
  border:1.5px solid var(--grid-2);border-radius:var(--r-sm);transition:.14s}
input:focus,select:focus,textarea:focus{border-color:var(--kunyit);outline:none;
  box-shadow:0 0 0 3px var(--kunyit-a)}
textarea{resize:vertical;min-height:5rem;line-height:1.55}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6070' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7em center;padding-right:2em}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  padding:.56em 1.1em;font-size:.88rem;font-weight:600;border:1.5px solid transparent;
  border-radius:var(--r-sm);cursor:pointer;background:none;transition:.14s;white-space:nowrap}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--kunyit);border-color:var(--kunyit);color:#1A1408}
.btn-primary:hover:not(:disabled){background:var(--kunyit-d);border-color:var(--kunyit-d)}
.btn-ghost{background:var(--card);border-color:var(--grid-2);color:var(--text)}
.btn-ghost:hover:not(:disabled){border-color:var(--text-3)}
.btn-quiet{color:var(--text-2)}
.btn-quiet:hover{background:var(--grid);color:var(--text)}
.btn-danger{color:var(--merah);border-color:transparent}
.btn-danger:hover{background:var(--merah-bg)}
.btn-block{width:100%}
.btn-sm{padding:.4em .8em;font-size:.82rem}

.msg{margin:.4rem 0 0;font-size:.85rem;min-height:1.2em}
.msg.err{color:var(--merah)}
.msg.ok{color:var(--daun)}

/* ------------------------------------------------------------ kerangka */

.app{display:grid;grid-template-columns:var(--side-w) 1fr;height:100vh;overflow:hidden}

.side{background:var(--ink);color:var(--on-ink);display:flex;flex-direction:column;
  border-right:1px solid var(--ink-line);overflow:hidden}
.side-mark{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;font-weight:500;
  padding:1.15rem 1.25rem;color:var(--on-ink-2);border-bottom:1px solid var(--ink-line)}
.side-mark span{color:var(--kunyit)}
.side-nav{flex:1;overflow-y:auto;padding:.85rem .6rem 1.5rem;scrollbar-width:thin}
.side-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:#5D6274;margin:1.3rem 0 .4rem;padding-inline:.65rem}
.side-nav a{display:flex;align-items:center;gap:.65rem;padding:.5rem .65rem;border-radius:var(--r-sm);
  color:var(--on-ink-2);font-size:.875rem;font-weight:500;transition:.12s}
.side-nav a:hover{background:var(--ink-2);color:var(--on-ink)}
.side-nav a.on{background:var(--ink-3);color:#fff}
.side-nav a.on i{color:var(--kunyit)}
.side-nav i{width:16px;height:16px;flex:none;color:#6E7385}
.pill{margin-left:auto;background:var(--kunyit);color:#1A1408;font-size:.68rem;font-weight:700;
  padding:.1em .45em;border-radius:99px;font-family:var(--mono)}

.side-foot{border-top:1px solid var(--ink-line);padding:.75rem}
.lic-chip{display:flex;flex-direction:column;gap:.1rem;padding:.55rem .65rem;margin-bottom:.5rem;
  background:var(--ink-2);border-radius:var(--r-sm);font-family:var(--mono);font-size:.7rem}
.lic-chip strong{color:var(--kunyit);letter-spacing:.06em;text-transform:uppercase;font-size:.66rem}
.lic-chip span{color:#5D6274;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lic-chip.bad strong{color:var(--merah)}
.side-user{display:flex;width:100%;align-items:center;justify-content:space-between;
  padding:.5rem .65rem;background:none;border:0;border-radius:var(--r-sm);
  color:var(--on-ink-2);font-size:.83rem;cursor:pointer}
.side-user:hover{background:var(--ink-2);color:var(--on-ink)}

.main{display:flex;flex-direction:column;overflow:hidden}

/* ------- bilah rumus: elemen tanda tangan panel ini ------- */

.bar{display:flex;align-items:center;gap:0;height:var(--bar-h);flex:none;
  background:var(--card);border-bottom:1px solid var(--grid)}
.bar-ref{font-family:var(--mono);font-size:.76rem;font-weight:500;color:var(--text-2);
  width:76px;flex:none;text-align:center;border-right:1px solid var(--grid);
  height:100%;display:grid;place-items:center;background:var(--paper)}
.bar-path{font-family:var(--mono);font-size:.8rem;color:var(--text);padding-inline:.95rem;
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-path b{color:var(--text-3);font-weight:400}
.bar-actions{display:flex;gap:.4rem;padding-inline:.7rem;flex:none}
.bar-view{font-size:.8rem;color:var(--text-2);display:flex;align-items:center;gap:.35rem;
  padding-inline:1rem;border-left:1px solid var(--grid);height:100%}
.bar-view:hover{color:var(--kunyit-d)}
.bar-view i{width:13px;height:13px}

.notice{flex:none;padding:.62rem 1.4rem;font-size:.85rem;background:var(--nila-bg);
  color:var(--nila);border-bottom:1px solid var(--grid);display:flex;
  align-items:center;justify-content:space-between;gap:1rem}
.notice.warn{background:#FDF3E2;color:#8A5A0B}
.notice.bad{background:var(--merah-bg);color:var(--merah)}

.work{flex:1;overflow-y:auto;padding:1.75rem}

/* ----------------------------------------------------------- halaman */

.page-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.page-head h1{font-size:1.5rem}
.page-head p{color:var(--text-2);font-size:.88rem;margin:.3rem 0 0;max-width:56ch}
.page-actions{display:flex;gap:.5rem}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.card{background:var(--card);border:1px solid var(--grid);border-radius:var(--r);padding:1.15rem}
.card h3{font-size:.94rem;margin-bottom:.35rem}
.card p{color:var(--text-2);font-size:.84rem;margin:0}

.stat{background:var(--card);border:1px solid var(--grid);border-radius:var(--r);padding:1.15rem 1.25rem}
.stat b{display:block;font-family:var(--disp);font-size:1.9rem;letter-spacing:-.03em;line-height:1}
.stat span{font-size:.8rem;color:var(--text-2);margin-top:.3rem;display:block}
.stat.acc b{color:var(--kunyit-d)}

/* ------- tabel dengan gutter ala spreadsheet ------- */

.sheet{background:var(--card);border:1px solid var(--grid);border-radius:var(--r);overflow:hidden}
.sheet table{width:100%;border-collapse:collapse;font-size:.875rem}
.sheet th{background:var(--paper);text-align:left;padding:.55rem .8rem;font-weight:600;
  font-size:.78rem;color:var(--text-2);border-bottom:1px solid var(--grid);white-space:nowrap;
  position:sticky;top:0;z-index:1}
.sheet th .colref{font-family:var(--mono);font-size:.62rem;color:var(--text-3);
  display:block;font-weight:400;letter-spacing:.06em}
.sheet td{padding:.62rem .8rem;border-bottom:1px solid var(--grid);vertical-align:middle}
.sheet tbody tr:last-child td{border-bottom:0}
.sheet tbody tr:hover{background:#FCFCFA}
.sheet .rownum{font-family:var(--mono);font-size:.72rem;color:var(--text-3);
  width:42px;text-align:center;background:var(--paper);border-right:1px solid var(--grid);
  user-select:none}
.sheet .t-main{font-weight:500;color:var(--text)}
.sheet .t-main small{display:block;font-family:var(--mono);font-size:.7rem;
  color:var(--text-3);font-weight:400;margin-top:.12rem}
.sheet .t-act{text-align:right;white-space:nowrap;width:1%}
.sheet .t-act button{padding:.28em .55em;font-size:.78rem;border-radius:4px;
  border:0;background:none;color:var(--text-2);cursor:pointer}
.sheet .t-act button:hover{background:var(--grid);color:var(--text)}
.sheet .t-act .del:hover{background:var(--merah-bg);color:var(--merah)}

.badge{display:inline-block;font-family:var(--mono);font-size:.68rem;padding:.14em .5em;
  border-radius:3px;letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.badge.pub{background:var(--daun-bg);color:var(--daun)}
.badge.draft{background:var(--grid);color:var(--text-2)}
.badge.lock{background:var(--merah-bg);color:var(--merah)}

.empty{text-align:center;padding:4rem 1.5rem;color:var(--text-2);
  background:var(--card);border:1px dashed var(--grid-2);border-radius:var(--r)}
.empty h3{margin-bottom:.4rem;color:var(--text)}
.empty p{margin:0 auto 1.3rem;max-width:42ch;font-size:.88rem}

/* ------- formulir pengaturan ------- */

.fields{display:grid;gap:1.1rem;max-width:44rem}
.fields.two{grid-template-columns:1fr 1fr}
.field{display:grid;gap:.32rem}
.field>label{font-size:.83rem;font-weight:600;display:flex;align-items:center;gap:.5rem}
.field .hint{color:var(--text-3);font-size:.78rem;line-height:1.45}
.field .colref{font-family:var(--mono);font-size:.66rem;background:var(--grid);
  color:var(--text-2);padding:.08em .38em;border-radius:3px;font-weight:400}
.toggle{display:flex;align-items:center;gap:.6rem;cursor:pointer;font-size:.86rem}
.toggle input{appearance:none;width:36px;height:20px;background:var(--grid-2);border-radius:99px;
  position:relative;cursor:pointer;transition:.16s;flex:none;border:0}
.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  background:#fff;border-radius:50%;transition:.16s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle input:checked{background:var(--kunyit)}
.toggle input:checked::after{transform:translateX(16px)}

.group{background:var(--card);border:1px solid var(--grid);border-radius:var(--r);
  padding:1.4rem;margin-bottom:1.1rem}
.group>h3{font-size:1rem;margin-bottom:.3rem}
.group>.hint{color:var(--text-2);font-size:.85rem;margin:0 0 1.2rem}

/* ------- pemilih tema ------- */

.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.theme{background:var(--card);border:2px solid var(--grid);border-radius:var(--r);
  overflow:hidden;cursor:pointer;transition:.14s;text-align:left;padding:0;position:relative}
.theme:hover{border-color:var(--grid-2);transform:translateY(-2px)}
.theme.on{border-color:var(--kunyit)}
.theme.locked{opacity:.6;cursor:not-allowed}
.theme-swatch{height:78px;display:flex}
.theme-swatch span{flex:1}
.theme-meta{padding:.8rem .9rem}
.theme-meta strong{font-family:var(--disp);font-size:.95rem;display:block}
.theme-meta small{color:var(--text-2);font-size:.78rem;line-height:1.4;display:block;margin-top:.2rem}
.theme-tag{position:absolute;top:.55rem;right:.55rem;font-family:var(--mono);font-size:.62rem;
  background:rgba(22,24,31,.86);color:#fff;padding:.16em .45em;border-radius:3px;
  text-transform:uppercase;letter-spacing:.05em}

/* ----------------------------------------------------------- builder */

.builder{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--paper);z-index:100}
.bd-top{display:flex;align-items:center;gap:1rem;padding:.5rem .8rem;background:var(--ink);
  color:var(--on-ink);flex:none;height:52px}
.bd-back{display:flex;align-items:center;gap:.4rem;background:none;border:0;color:var(--on-ink-2);
  font-size:.85rem;cursor:pointer;padding:.4em .6em;border-radius:var(--r-sm)}
.bd-back:hover{background:var(--ink-2);color:#fff}
.bd-title{font-family:var(--mono);font-size:.8rem;color:var(--on-ink-2);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-bp{display:flex;background:var(--ink-2);border-radius:var(--r-sm);padding:2px}
.bd-bp button{background:none;border:0;padding:.34em .62em;border-radius:4px;cursor:pointer;
  color:var(--on-ink-2);display:grid;place-items:center}
.bd-bp button.on{background:var(--ink-3);color:var(--kunyit)}
.bd-bp i{width:15px;height:15px}
.bd-tools{display:flex;align-items:center;gap:.35rem}
.bd-tools>button:not(.btn){background:none;border:0;color:var(--on-ink-2);cursor:pointer;
  padding:.42em;border-radius:var(--r-sm);display:grid;place-items:center}
.bd-tools>button:not(.btn):hover{background:var(--ink-2);color:#fff}
.bd-tools>button:disabled{opacity:.32;cursor:default}
.bd-tools i{width:16px;height:16px}

.bd-body{flex:1;display:grid;grid-template-columns:214px 1fr 288px;overflow:hidden}

/* palet */
.bd-palette{background:var(--card);border-right:1px solid var(--grid);overflow-y:auto;padding:.75rem}
.bd-search{margin-bottom:.75rem;font-size:.82rem;padding:.45em .65em}
.bd-group-name{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);margin:1rem 0 .45rem;padding-left:.15rem}
.bd-group-name:first-child{margin-top:0}
.bd-chips{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.bd-chip{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.65rem .3rem;
  background:var(--paper);border:1px solid var(--grid);border-radius:var(--r-sm);
  font-size:.7rem;text-align:center;cursor:grab;color:var(--text-2);transition:.12s;
  line-height:1.25;user-select:none}
.bd-chip:hover{border-color:var(--kunyit);color:var(--text);background:#fff}
.bd-chip:active{cursor:grabbing}
.bd-chip i{width:17px;height:17px;color:var(--text-3)}
.bd-chip:hover i{color:var(--kunyit-d)}

/* kanvas */
.bd-canvas-wrap{overflow:auto;padding:1.5rem;background:var(--paper);
  background-image:radial-gradient(var(--grid-2) .9px,transparent .9px);background-size:20px 20px}
.bd-canvas{margin-inline:auto;transition:max-width .22s ease;max-width:100%}
.bd-canvas[data-bp=t]{max-width:768px}
.bd-canvas[data-bp=m]{max-width:390px}
.bd-frame{background:#fff;border-radius:var(--r);box-shadow:var(--sh);min-height:70vh;
  overflow:hidden;position:relative}
.bd-empty{padding:5rem 2rem;text-align:center;color:var(--text-3)}
.bd-empty p{font-weight:600;color:var(--text-2);margin:0 0 .3rem}
.bd-empty small{font-size:.82rem}

/* pembungkus tiap blok di kanvas */
.bd-node{position:relative;outline:1.5px dashed transparent;outline-offset:-1.5px;transition:outline-color .1s}
.bd-node:hover{outline-color:var(--kunyit-a)}
.bd-node.sel{outline:2px solid var(--kunyit);outline-offset:-2px}
.bd-node.sel>.bd-tab{opacity:1;pointer-events:auto}
.bd-tab{position:absolute;top:0;left:0;transform:translateY(-100%);z-index:6;
  display:flex;align-items:center;gap:.15rem;background:var(--kunyit);border-radius:4px 4px 0 0;
  padding:.14rem .3rem;opacity:0;pointer-events:none;transition:opacity .12s}
.bd-tab span{font-family:var(--mono);font-size:.63rem;color:#1A1408;padding-inline:.3rem;
  font-weight:500;letter-spacing:.03em}
.bd-tab button{background:none;border:0;padding:.16rem;cursor:pointer;color:#1A1408;
  border-radius:3px;display:grid;place-items:center}
.bd-tab button:hover{background:rgba(0,0,0,.14)}
.bd-tab i{width:12px;height:12px}
.bd-drop{height:3px;background:var(--kunyit);margin:0;border-radius:2px;
  box-shadow:0 0 0 3px var(--kunyit-a)}
.bd-slot{min-height:52px;border:1.5px dashed var(--grid-2);border-radius:var(--r-sm);
  margin:.4rem;display:grid;place-items:center;color:var(--text-3);font-size:.76rem}
.bd-slot.over{border-color:var(--kunyit);background:var(--kunyit-a);color:var(--kunyit-d)}

/* inspektur */
.bd-inspect{background:var(--card);border-left:1px solid var(--grid);overflow-y:auto}
.bd-inspect-empty{padding:2.5rem 1.5rem;text-align:center;color:var(--text-3)}
.bd-inspect-empty p{font-weight:600;color:var(--text-2);margin:0 0 .3rem;font-size:.9rem}
.bd-inspect-empty small{font-size:.8rem;line-height:1.5}
.bd-ins-head{padding:.85rem 1rem;border-bottom:1px solid var(--grid);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  position:sticky;top:0;background:var(--card);z-index:2}
.bd-ins-head strong{font-family:var(--disp);font-size:.95rem}
.bd-ins-head code{font-family:var(--mono);font-size:.66rem;color:var(--text-3)}
.bd-tabs{display:flex;border-bottom:1px solid var(--grid);position:sticky;top:49px;
  background:var(--card);z-index:2}
.bd-tabs button{flex:1;padding:.6rem .3rem;background:none;border:0;border-bottom:2px solid transparent;
  font-size:.8rem;font-weight:500;color:var(--text-2);cursor:pointer}
.bd-tabs button.on{color:var(--text);border-bottom-color:var(--kunyit)}
.bd-pane{padding:1rem;display:grid;gap:.95rem}
.bd-pane label{display:grid;gap:.3rem;font-size:.8rem;font-weight:600}
.bd-pane input,.bd-pane select,.bd-pane textarea{font-size:.84rem;padding:.45em .6em}
.bd-pane .hint{font-weight:400;color:var(--text-3);font-size:.74rem;line-height:1.45}
.bd-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.4rem}
.bd-row2{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.bd-sub{font-family:var(--mono);font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);margin:.5rem 0 -.3rem}
.bd-rep{border:1px solid var(--grid);border-radius:var(--r-sm);padding:.7rem;display:grid;gap:.55rem;
  background:var(--paper)}
.bd-rep-head{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:.68rem;color:var(--text-3)}
.bd-rep-head button{background:none;border:0;cursor:pointer;color:var(--merah);
  font-size:.72rem;padding:.1em .3em;border-radius:3px}
.bd-rep-head button:hover{background:var(--merah-bg)}
.bd-add{width:100%;padding:.5em;border:1.5px dashed var(--grid-2);background:none;
  border-radius:var(--r-sm);color:var(--text-2);font-size:.8rem;cursor:pointer;font-weight:500}
.bd-add:hover{border-color:var(--kunyit);color:var(--kunyit-d)}
.bd-color{display:flex;gap:.35rem;align-items:center}
.bd-color input[type=color]{width:34px;height:32px;padding:2px;border-radius:4px;
  border:1.5px solid var(--grid-2);background:none;cursor:pointer;flex:none}

/* struktur */
.bd-outline{position:absolute;top:52px;right:288px;width:250px;max-height:60vh;overflow:auto;
  background:var(--card);border:1px solid var(--grid);border-radius:var(--r);
  box-shadow:var(--sh);padding:.6rem;z-index:20}
.bd-tree{list-style:none;margin:0;padding:0;font-size:.8rem}
.bd-tree li{padding:0}
.bd-tree button{display:flex;align-items:center;gap:.4rem;width:100%;text-align:left;
  padding:.3rem .45rem;background:none;border:0;border-radius:4px;cursor:pointer;
  color:var(--text-2);font-size:.8rem}
.bd-tree button:hover{background:var(--paper);color:var(--text)}
.bd-tree button.on{background:var(--kunyit-a);color:var(--text)}
.bd-tree ul{list-style:none;margin:0;padding-left:.85rem;border-left:1px solid var(--grid)}
.bd-tree i{width:13px;height:13px;color:var(--text-3);flex:none}

.ai-btn{gap:.35em;color:var(--text-2)}
.ai-btn:hover:not(:disabled){border-color:var(--kunyit);color:var(--kunyit-d)}
.ai-btn svg{flex:none}
.bd-ai-btn{color:var(--kunyit)!important}
.bd-ai-btn:hover{background:rgba(232,163,61,.16)!important}
.field>label{justify-content:space-between}

/* ------------------------------------------------------------ umum */

.toast-wrap{position:fixed;bottom:1.2rem;right:1.2rem;display:grid;gap:.5rem;z-index:400}
.toast{background:var(--ink);color:var(--on-ink);padding:.65rem 1rem;border-radius:var(--r-sm);
  font-size:.85rem;box-shadow:var(--sh);display:flex;align-items:center;gap:.6rem;
  animation:rise .2s ease;max-width:24rem}
.toast.ok{border-left:3px solid var(--daun)}
.toast.err{border-left:3px solid var(--merah)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

.modal{border:0;padding:0;border-radius:12px;box-shadow:0 24px 60px -18px rgba(0,0,0,.4);
  max-width:min(46rem,94vw);width:100%;background:var(--card)}
.modal::backdrop{background:rgba(22,24,31,.5)}
.modal-in>header{display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.3rem;border-bottom:1px solid var(--grid)}
.modal-in>header h2{font-size:1.05rem}
.modal-in>header button{background:none;border:0;cursor:pointer;color:var(--text-2);
  padding:.3rem;border-radius:4px}
.modal-in>header button:hover{background:var(--grid)}
.modal-in>div{padding:1.3rem;max-height:72vh;overflow-y:auto}

.skeleton{background:linear-gradient(90deg,var(--grid) 25%,#EFEEEA 50%,var(--grid) 75%);
  background-size:200% 100%;animation:shine 1.3s infinite;border-radius:var(--r-sm);height:1em}
@keyframes shine{to{background-position:-200% 0}}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ------------------------------------------------------- responsif */

@media(max-width:1180px){
  .bd-body{grid-template-columns:180px 1fr 260px}
  .bd-outline{right:260px}
}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:var(--side-w);z-index:60;
    transform:translateX(-100%);transition:transform .2s}
  .side.open{transform:none}
  .fields.two{grid-template-columns:1fr}
  .work{padding:1.1rem}
  .bd-body{grid-template-columns:1fr}
  .bd-palette,.bd-inspect{position:fixed;bottom:0;left:0;right:0;height:46vh;z-index:30;
    border:0;border-top:1px solid var(--grid);box-shadow:0 -8px 30px -12px rgba(0,0,0,.28);
    transform:translateY(100%);transition:transform .2s}
  .bd-palette.open,.bd-inspect.open{transform:none}
}