@charset "utf-8";
/* ============================================================
   vb6.css - Widget kit bergaya Microsoft Visual Basic 6 / Win95
   Murni HTML + CSS, tanpa JavaScript.
   ============================================================ */

:root{
  color-scheme: light;
  /* Permukaan 3D klasik */
  --face:#d4d0c8;
  --face2:#c0c0c0;
  --hl:#ffffff;
  --lt:#efefef;
  --sh:#808080;
  --dk:#000000;
  /* Area kerja */
  --win:#ffffff;
  --txt:#000000;
  --gtxt:#808080;
  --sel:#000080;
  --seltxt:#ffffff;
  --desk:#008080;
  --mdi:#5f5f5f;
  /* Title bar */
  --tb1:#0a246a;
  --tb2:#a6caf0;
  --tb1i:#7f7f7f;
  --tb2i:#c0c0c0;
  /* Pewarnaan kode VB6 */
  --kw:#0000ff;
  --cm:#008000;
  --lit:#800000;
  /* Tipografi */
  --font:"MS Sans Serif","Microsoft Sans Serif",Tahoma,Verdana,Geneva,sans-serif;
  --mono:"Lucida Console","Courier New",Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{background:var(--desk)}
body{
  margin:0;
  padding:14px 14px 46px;
  background:var(--desk);
  background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.14));
  font-family:var(--font);
  font-size:12px;
  line-height:1.35;
  color:var(--txt);
}

/* ------------------------------------------------------------
   Bevel dasar
   ------------------------------------------------------------ */
.b-out{
  border:2px solid;
  border-color:var(--hl) var(--dk) var(--dk) var(--hl);
  box-shadow:inset 1px 1px 0 var(--lt), inset -1px -1px 0 var(--sh);
}
.b-in{
  border:2px solid;
  border-color:var(--sh) var(--hl) var(--hl) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--lt);
}
.b-out1{border:1px solid;border-color:var(--hl) var(--sh) var(--sh) var(--hl)}
.b-in1{border:1px solid;border-color:var(--sh) var(--hl) var(--hl) var(--sh)}

/* ------------------------------------------------------------
   Jendela utama (IDE)
   ------------------------------------------------------------ */
.app{
  max-width:1180px;
  margin:0 auto;
  background:var(--face);
  border:2px solid;
  border-color:var(--hl) var(--dk) var(--dk) var(--hl);
  box-shadow:inset 1px 1px 0 var(--lt), inset -1px -1px 0 var(--sh), 3px 3px 0 rgba(0,0,0,.35);
  padding:2px;
}

.titlebar{
  display:flex;align-items:center;gap:5px;
  height:20px;padding:0 2px 0 3px;
  background:linear-gradient(90deg,var(--tb1),var(--tb2));
  color:#fff;font-weight:bold;font-size:12px;
  user-select:none;
}
.titlebar .cap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-btns{margin-left:auto;display:flex;gap:2px}
.tb-btn{
  width:17px;height:15px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--face);color:#000;text-decoration:none;
  font:bold 9px/1 var(--font);
  border:1px solid;border-color:var(--hl) var(--dk) var(--dk) var(--hl);
  box-shadow:inset 1px 1px 0 var(--lt), inset -1px -1px 0 var(--sh);
}
.tb-btn:active{border-color:var(--sh) var(--hl) var(--hl) var(--sh);box-shadow:none}
.tb-btn i{font-style:normal;display:block;transform:translateY(-1px)}

/* ------------------------------------------------------------
   Menu bar (dropdown murni CSS :hover / :focus-within)
   ------------------------------------------------------------ */
.menubar{
  display:flex;flex-wrap:wrap;align-items:stretch;
  background:var(--face);
  padding:1px 0;
  position:relative;z-index:60;
}
.menu{position:relative}
.menu > .m-top{
  display:block;padding:2px 7px;color:#000;text-decoration:none;
  font-size:12px;white-space:nowrap;
}
.menu > .m-top u{text-decoration:underline}
.menu:hover > .m-top,
.menu:focus-within > .m-top{background:var(--sel);color:#fff}
.m-pop{
  display:none;position:absolute;top:100%;left:0;min-width:196px;
  background:var(--face);padding:2px;
  border:2px solid;border-color:var(--hl) var(--dk) var(--dk) var(--hl);
  box-shadow:inset 1px 1px 0 var(--lt), inset -1px -1px 0 var(--sh), 2px 2px 0 rgba(0,0,0,.3);
  z-index:70;
}
.menu:hover .m-pop,
.menu:focus-within .m-pop{display:block}
.m-pop a,.m-pop .m-off{
  display:flex;gap:16px;justify-content:space-between;align-items:center;
  padding:3px 16px 3px 20px;color:#000;text-decoration:none;white-space:nowrap;
}
.m-pop a:hover{background:var(--sel);color:#fff}
.m-pop kbd{font:inherit;color:var(--gtxt)}
.m-pop a:hover kbd{color:#fff}
.m-pop .m-off{color:var(--gtxt)}
.m-sep{height:2px;margin:3px 2px;border-top:1px solid var(--sh);border-bottom:1px solid var(--hl)}

/* ------------------------------------------------------------
   Toolbar
   ------------------------------------------------------------ */
.toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:1px;
  padding:2px 3px;background:var(--face);
  border-top:1px solid var(--hl);
  border-bottom:1px solid var(--sh);
  box-shadow:0 1px 0 var(--hl);
  margin-bottom:3px;
}
.tbtn{
  width:24px;height:23px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--face);border:1px solid transparent;
  color:#000;text-decoration:none;
}
.tbtn:hover{border-color:var(--hl) var(--sh) var(--sh) var(--hl)}
.tbtn:active{border-color:var(--sh) var(--hl) var(--hl) var(--sh)}
.tbtn.is-off{opacity:.45;pointer-events:none}
.tsep{width:2px;height:20px;margin:0 3px;border-left:1px solid var(--sh);border-right:1px solid var(--hl)}
.tpos{margin-left:auto;display:flex;gap:6px;align-items:center;font-size:11px;padding-right:2px}
.tpos .tp{
  background:var(--face);padding:1px 5px;min-width:84px;text-align:center;
  border:1px solid;border-color:var(--sh) var(--hl) var(--hl) var(--sh);
}

/* Ikon 16x16 (SVG data-uri) */
.ico{width:16px;height:16px;display:block;background:center/16px 16px no-repeat;image-rendering:pixelated}
.i-new{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M3.5 1.5h6l3 3v10h-9z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M9.5 1.5v3h3' fill='none' stroke='%23000'/%3E%3Cpath d='M5 7.5h6M5 9.5h6M5 11.5h4' stroke='%23808080'/%3E%3C/svg%3E")}
.i-open{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M1.5 3.5h5l2 2h6v8h-13z' fill='%23ffe08a' stroke='%23000'/%3E%3Cpath d='M3 8.5h12.5l-2.5 5h-12z' fill='%23ffd24d' stroke='%23000'/%3E%3C/svg%3E")}
.i-save{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='1.5' y='2.5' width='13' height='11' fill='%23000080' stroke='%23000'/%3E%3Crect x='5.5' y='2.5' width='5' height='4' fill='%23c0c0c0' stroke='%23000'/%3E%3Crect x='4.5' y='9.5' width='7' height='4' fill='%23fff' stroke='%23000'/%3E%3C/svg%3E")}
.i-run{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 2l9 6-9 6z' fill='%23008000' stroke='%23004000'/%3E%3C/svg%3E")}
.i-break{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='4' y='2' width='3' height='12' fill='%23000080'/%3E%3Crect x='9' y='2' width='3' height='12' fill='%23000080'/%3E%3C/svg%3E")}
.i-end{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='3' y='3' width='10' height='10' fill='%23000080'/%3E%3C/svg%3E")}
.i-proj{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='1.5' y='2.5' width='13' height='11' fill='%23fff' stroke='%23000'/%3E%3Crect x='2' y='3' width='12' height='3' fill='%23000080'/%3E%3Cpath d='M4 8.5h8M4 11.5h8' stroke='%23808080'/%3E%3C/svg%3E")}
.i-prop{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='1.5' y='2.5' width='13' height='11' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M8 3v10M2 6.5h12M2 10.5h12' stroke='%23808080'/%3E%3C/svg%3E")}
.i-box{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='1.5' y='5.5' width='13' height='8' fill='%23c0c0c0' stroke='%23000'/%3E%3Cpath d='M6 5.5V3.5h4v2' fill='none' stroke='%23000'/%3E%3Crect x='6.5' y='8.5' width='3' height='2' fill='%23fff' stroke='%23000'/%3E%3C/svg%3E")}
.i-find{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='7' cy='7' r='4.5' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M10 10l4 4' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E")}
.i-form{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='1.5' y='2.5' width='13' height='11' fill='%23d4d0c8' stroke='%23000'/%3E%3Crect x='2' y='3' width='12' height='3' fill='%23000080'/%3E%3Crect x='4.5' y='7.5' width='7' height='4' fill='%23fff' stroke='%23808080'/%3E%3C/svg%3E")}
.i-mod{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='2.5' y='2.5' width='11' height='11' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M4 5.5h8M4 8.5h8M4 11.5h5' stroke='%23000080'/%3E%3C/svg%3E")}
.i-fold{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Cpath d='M1.5 3.5h5l1 2h7v8h-13z' fill='%23ffe08a' stroke='%23000'/%3E%3C/svg%3E")}
.i-web{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='%23fff' stroke='%23000080'/%3E%3Cellipse cx='8' cy='8' rx='3' ry='6.5' fill='none' stroke='%23000080'/%3E%3Cpath d='M1.5 8h13M2.6 5h10.8M2.6 11h10.8' stroke='%23000080'/%3E%3C/svg%3E")}
.i-mail{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect x='1.5' y='3.5' width='13' height='9' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M1.5 3.5L8 9l6.5-5.5' fill='none' stroke='%23000'/%3E%3C/svg%3E")}
.i-help{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='%23ffff00' stroke='%23000'/%3E%3Ctext x='8' y='12' font-family='Tahoma,sans-serif' font-size='11' font-weight='bold' text-anchor='middle' fill='%23000'%3E?%3C/text%3E%3C/svg%3E")}
.i-user{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='8' cy='5' r='3' fill='%23f0c8a0' stroke='%23000'/%3E%3Cpath d='M2.5 15c0-3.3 2.5-5.5 5.5-5.5s5.5 2.2 5.5 5.5z' fill='%23000080' stroke='%23000'/%3E%3C/svg%3E")}

/* ------------------------------------------------------------
   Workspace: dock kiri | MDI | dock kanan
   ------------------------------------------------------------ */
.workspace{
  display:grid;
  grid-template-columns:190px minmax(0,1fr) 210px;
  gap:3px;
  align-items:start;
}
.dock{display:flex;flex-direction:column;gap:5px;min-width:0}

.panel{
  background:var(--face);padding:2px;
  border:2px solid;border-color:var(--hl) var(--dk) var(--dk) var(--hl);
  box-shadow:inset 1px 1px 0 var(--lt), inset -1px -1px 0 var(--sh);
}
.panel > .pcap{
  display:flex;align-items:center;gap:4px;height:18px;padding:0 2px 0 3px;
  background:linear-gradient(90deg,var(--tb1),var(--tb2));
  color:#fff;font-weight:bold;font-size:11px;
}
.panel.is-inactive > .pcap{background:linear-gradient(90deg,var(--tb1i),var(--tb2i));color:#eee}
.pcap .x{
  margin-left:auto;display:flex;align-items:center;justify-content:center;
  width:15px;height:13px;background:var(--face);color:#000;font:bold 9px/1 var(--font);
  border:1px solid;border-color:var(--hl) var(--dk) var(--dk) var(--hl);
}
.ptools{display:flex;gap:1px;padding:2px 1px;border-bottom:1px solid var(--sh);box-shadow:0 1px 0 var(--hl);margin-bottom:4px}
.pbody{
  background:var(--win);padding:4px;overflow:auto;
  border:2px solid;border-color:var(--sh) var(--hl) var(--hl) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--lt);
}

/* ------------------------------------------------------------
   TreeView (Project Explorer)
   ------------------------------------------------------------ */
.tree,.tree ul{list-style:none;margin:0;padding:0}
.tree ul{margin-left:6px;padding-left:9px;border-left:1px dotted var(--sh)}
.tree li{position:relative}
.tree .node{
  display:flex;align-items:center;gap:4px;padding:1px 3px 1px 1px;
  color:#000;text-decoration:none;font-size:11px;white-space:nowrap;
}
.tree .node:hover .lbl{text-decoration:underline}
.tree .node.is-open{background:var(--sel);color:#fff}
.tree .node.is-open .lbl{text-decoration:none}
.tree .exp{
  width:9px;height:9px;flex:none;background:var(--win);color:#000;
  border:1px solid var(--sh);font:bold 9px/7px var(--mono);text-align:center;
}
.tree .lbl{overflow:hidden;text-overflow:ellipsis}
.tree .grp{display:flex;align-items:center;gap:4px;font-size:11px;padding:1px 0}

/* ------------------------------------------------------------
   Properties window
   ------------------------------------------------------------ */
.pgrid{width:100%;border-collapse:collapse;font-size:11px;background:var(--win);table-layout:fixed}
.pgrid th{
  text-align:left;font-weight:normal;padding:2px 4px;width:42%;
  border-right:1px solid var(--face2);border-bottom:1px solid var(--face2);
}
.pgrid td{padding:2px 4px;border-bottom:1px solid var(--face2);overflow-wrap:anywhere}
.pgrid tr.is-sel th,.pgrid tr.is-sel td{background:var(--sel);color:#fff;border-color:#4a4a8a}
.pgrid a{color:var(--sel)}
.pgrid tr.is-sel a{color:#fff}
.pdesc{
  margin-top:4px;padding:5px;background:var(--face);font-size:11px;
  border:1px solid;border-color:var(--sh) var(--hl) var(--hl) var(--sh);
}
.pdesc b{display:block;margin-bottom:2px}

.ptabs{display:flex;gap:1px;margin:4px 0 0}
.ptab{
  padding:2px 8px;font-size:11px;background:var(--face);color:#000;text-decoration:none;
  border:1px solid;border-color:var(--hl) var(--sh) var(--sh) var(--hl);border-bottom:none;
}
.ptab.is-on{background:var(--win);font-weight:bold;position:relative;top:-1px;padding-bottom:3px}

/* ------------------------------------------------------------
   MDI + jendela form
   ------------------------------------------------------------ */
.mdi{
  min-width:0;background:var(--mdi);padding:9px;
  border:2px solid;border-color:var(--sh) var(--hl) var(--hl) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--lt);
}
.win{
  background:var(--face);padding:2px;margin-bottom:9px;
  border:2px solid;border-color:var(--hl) var(--dk) var(--dk) var(--hl);
  box-shadow:inset 1px 1px 0 var(--lt), inset -1px -1px 0 var(--sh), 2px 2px 0 rgba(0,0,0,.28);
}
.win:last-child{margin-bottom:0}
.win > .wcap{
  display:flex;align-items:center;gap:5px;height:19px;padding:0 2px 0 3px;
  background:linear-gradient(90deg,var(--tb1),var(--tb2));color:#fff;font-weight:bold;font-size:11px;
}
.win.is-inactive > .wcap{background:linear-gradient(90deg,var(--tb1i),var(--tb2i));color:#eee}
.wcap .wtxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wcap .wbtns{margin-left:auto;display:flex;gap:2px}

/* Kanvas form designer: titik-titik grid */
.form-canvas{
  background:var(--face);
  background-image:radial-gradient(var(--sh) .8px,transparent 1px);
  background-size:8px 8px;background-position:1px 1px;
  padding:15px;
  border:2px solid;border-color:var(--sh) var(--hl) var(--hl) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--lt);
}
.doc-canvas{
  background:var(--win);padding:16px 20px 20px;
  border:2px solid;border-color:var(--sh) var(--hl) var(--hl) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--lt);
}

/* ------------------------------------------------------------
   Kontrol
   ------------------------------------------------------------ */
.frame{
  border:2px groove var(--face);
  margin:0 0 13px;padding:12px 13px 14px;min-width:0;
}
.frame > legend{padding:0 4px;font-weight:bold;font-size:12px}
.frame:last-child{margin-bottom:0}

.lbl-c{display:block;font-size:11px;color:#000;margin-bottom:3px}

.txt{
  display:block;width:100%;background:var(--win);color:#000;
  padding:4px 5px;font:12px/1.4 var(--font);
  border:2px solid;border-color:var(--sh) var(--hl) var(--hl) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--lt);
  overflow-wrap:anywhere;
}
.txt.is-ro{background:var(--face)}
.txt a{color:var(--sel)}

.combo{
  display:flex;align-items:stretch;background:var(--win);
  border:2px solid;border-color:var(--sh) var(--hl) var(--hl) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--lt);
}
.combo .cval{flex:1;padding:2px 5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.combo .carr{
  width:17px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--face);font-size:7px;
  border:1px solid;border-color:var(--hl) var(--dk) var(--dk) var(--hl);
  box-shadow:inset 1px 1px 0 var(--lt), inset -1px -1px 0 var(--sh);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:96px;padding:5px 12px;
  background:var(--face);color:#000;text-decoration:none;
  font:12px var(--font);cursor:pointer;
  border:2px solid;border-color:var(--hl) var(--dk) var(--dk) var(--hl);
  box-shadow:inset 1px 1px 0 var(--lt), inset -1px -1px 0 var(--sh);
}
.btn:active{
  border-color:var(--dk) var(--hl) var(--hl) var(--dk);
  box-shadow:inset 1px 1px 0 var(--sh), inset -1px -1px 0 var(--lt);
  padding:6px 11px 4px 13px;
}
.btn.is-default{outline:1px solid var(--dk);outline-offset:1px}
.btn-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}

/* Kotak centang (CheckBox) — dipakai sendiri atau di dalam .chk */
.box{
  display:block;width:13px;height:13px;flex:none;background:var(--win);
  font:bold 10px/10px var(--mono);text-align:center;color:#000;
  border:2px solid;border-color:var(--sh) var(--hl) var(--hl) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--lt);
}
.chk{display:flex;align-items:flex-start;gap:7px;margin:0 0 6px;font-size:12px}
.chk:last-child{margin-bottom:0}
.chk .box{margin-top:2px}

/* ListView */
.lv{width:100%;border-collapse:collapse;background:var(--win);font-size:12px}
.lv thead th{
  text-align:left;font-weight:normal;padding:3px 7px;background:var(--face);
  border:1px solid;border-color:var(--hl) var(--sh) var(--sh) var(--hl);
  white-space:nowrap;
}
.lv tbody td{padding:6px 7px;border-bottom:1px solid #e6e4e0;vertical-align:top}
.lv tbody tr:hover td{background:#e8eef8}
.lv .lv-title a{color:var(--sel);font-weight:bold;text-decoration:none}
.lv .lv-title a:hover{text-decoration:underline}
.lv .lv-sub{display:block;margin-top:3px;color:#404040;font-weight:normal}
.lv .lv-nw{white-space:nowrap;color:#404040;font-size:11px}

/* Code window ala VB6 */
.code{
  background:var(--win);margin:0 0 13px;
  border:2px solid;border-color:var(--sh) var(--hl) var(--hl) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--lt);
}
.code:last-child{margin-bottom:0}
.code-bar{display:flex;gap:4px;padding:2px;background:var(--face);border-bottom:1px solid var(--sh)}
.code-bar .combo{flex:1;min-width:0}
.code pre{
  margin:0;padding:9px 10px 9px 27px;overflow-x:auto;
  font:13px/1.5 var(--mono);color:#000;
  background:linear-gradient(90deg,var(--face) 0 18px,var(--win) 18px);
  tab-size:4;
}
.code code{font:inherit}
.k{color:var(--kw)}
.c{color:var(--cm)}
.s{color:var(--lit)}

/* ------------------------------------------------------------
   Status bar
   ------------------------------------------------------------ */
.statusbar{display:flex;gap:2px;align-items:stretch;margin-top:4px;padding:1px;background:var(--face)}
.statusbar .sp{
  padding:2px 7px;font-size:11px;background:var(--face);
  border:1px solid;border-color:var(--sh) var(--hl) var(--hl) var(--sh);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.statusbar .sp.grow{flex:1;min-width:0}
.statusbar .grip{
  width:16px;flex:none;
  background:repeating-linear-gradient(135deg,var(--hl) 0 2px,var(--sh) 2px 3px,transparent 3px 6px);
}

/* ------------------------------------------------------------
   Taskbar
   ------------------------------------------------------------ */
.taskbar{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  display:flex;align-items:center;gap:4px;height:32px;padding:2px 3px;
  background:var(--face);border-top:2px solid var(--hl);
}
.startwrap{position:relative;flex:none}
.start{
  display:flex;align-items:center;gap:5px;
  padding:3px 9px 3px 5px;font-weight:bold;font-size:12px;color:#000;text-decoration:none;
  background:var(--face);
  border:2px solid;border-color:var(--hl) var(--dk) var(--dk) var(--hl);
  box-shadow:inset 1px 1px 0 var(--lt), inset -1px -1px 0 var(--sh);
}
.startwrap:hover .start,.startwrap:focus-within .start{
  border-color:var(--sh) var(--hl) var(--hl) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--lt);
}
.start .flag{
  width:17px;height:15px;flex:none;
  background:
    linear-gradient(140deg,#ff0000 0 55%,transparent 0) 0 0/8px 7px no-repeat,
    linear-gradient(140deg,#00a800 0 55%,transparent 0) 9px 0/8px 7px no-repeat,
    linear-gradient(140deg,#0000c8 0 55%,transparent 0) 0 8px/8px 7px no-repeat,
    linear-gradient(140deg,#ffc800 0 55%,transparent 0) 9px 8px/8px 7px no-repeat;
}
.startwrap:hover .startmenu,.startwrap:focus-within .startmenu{display:block}
.startmenu{
  display:none;position:absolute;left:0;bottom:100%;margin-bottom:3px;min-width:252px;
  background:var(--face);padding:2px;
  border:2px solid;border-color:var(--hl) var(--dk) var(--dk) var(--hl);
  box-shadow:inset 1px 1px 0 var(--lt), inset -1px -1px 0 var(--sh), 3px 3px 0 rgba(0,0,0,.35);
}
.sm-list{display:flex}
.sm-band{
  width:23px;flex:none;
  background:linear-gradient(180deg,#000080,#1084d0);
  color:#c8c8c8;font:bold 13px var(--font);
  writing-mode:vertical-rl;transform:rotate(180deg);
  text-align:right;padding:9px 3px;letter-spacing:1px;
}
.sm-items{flex:1;min-width:0}
.sm-items a{display:flex;align-items:center;gap:9px;padding:6px 20px 6px 7px;color:#000;text-decoration:none;font-size:12px}
.sm-items a:hover{background:var(--sel);color:#fff}
.tasks{display:flex;gap:3px;flex:1;min-width:0;overflow:hidden}
.task{
  display:flex;align-items:center;gap:5px;min-width:0;max-width:168px;flex:1;
  padding:3px 7px;font-size:11px;color:#000;text-decoration:none;background:var(--face);
  border:2px solid;border-color:var(--hl) var(--dk) var(--dk) var(--hl);
  box-shadow:inset 1px 1px 0 var(--lt), inset -1px -1px 0 var(--sh);
}
.task span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.task.is-on{
  font-weight:bold;
  border-color:var(--sh) var(--hl) var(--hl) var(--sh);
  box-shadow:inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--lt);
  background:var(--face) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='2' height='2' fill='%23d4d0c8'/%3E%3Crect width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E");
}
.tray{
  margin-left:auto;flex:none;display:flex;align-items:center;gap:7px;padding:3px 8px;font-size:11px;
  border:1px solid;border-color:var(--sh) var(--hl) var(--hl) var(--sh);
}

/* ------------------------------------------------------------
   Scrollbar Win95
   ------------------------------------------------------------ */
*{scrollbar-width:auto;scrollbar-color:var(--face) var(--win)}
::-webkit-scrollbar{width:16px;height:16px}
::-webkit-scrollbar-track{
  background:var(--win) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='2' height='2' fill='%23ffffff'/%3E%3Crect width='1' height='1' fill='%23d4d0c8'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23d4d0c8'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-thumb{
  background:var(--face);
  border:2px solid;border-color:var(--hl) var(--dk) var(--dk) var(--hl);
  box-shadow:inset 1px 1px 0 var(--lt), inset -1px -1px 0 var(--sh);
}
::-webkit-scrollbar-corner{background:var(--face)}
::-webkit-scrollbar-button:single-button{
  background:var(--face) center/9px no-repeat;
  border:2px solid;border-color:var(--hl) var(--dk) var(--dk) var(--hl);
  box-shadow:inset 1px 1px 0 var(--lt), inset -1px -1px 0 var(--sh);
  height:16px;width:16px;
}
::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 2L8 7H1z'/%3E%3C/svg%3E")}
::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 7L1 2h7z'/%3E%3C/svg%3E")}
::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M2 4.5L7 1v7z'/%3E%3C/svg%3E")}
::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M7 4.5L2 8V1z'/%3E%3C/svg%3E")}
::-webkit-scrollbar-button:single-button:active{border-color:var(--sh) var(--hl) var(--hl) var(--sh);box-shadow:none}

/* Fokus keyboard */
a:focus-visible,.btn:focus-visible,.m-top:focus-visible{outline:1px dotted #000;outline-offset:1px}

/* ------------------------------------------------------------
   Responsif
   ------------------------------------------------------------ */
@media (max-width:1040px){
  .workspace{grid-template-columns:178px minmax(0,1fr)}
  .dock-r{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
  .dock-r > .panel{flex:1 1 300px}
}
@media (max-width:780px){
  body{padding:6px 6px 40px}
  .workspace{grid-template-columns:minmax(0,1fr)}
  .dock-l,.dock-r{grid-column:auto;flex-direction:column}
  /* Konten lebih dulu; panel dock turun ke bawah supaya tidak menutupi isi */
  .mdi{order:1;padding:5px}
  .dock-l{order:2}
  .dock-r{order:3}
  .dock-r > .panel{flex:none}
  .form-canvas{padding:11px}
  .doc-canvas{padding:13px}
  .statusbar .sp.opt{display:none}
  /* Taskbar jadi navigasi utama di layar kecil */
  .tasks{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .tasks::-webkit-scrollbar{height:0}
  .task{flex:0 0 auto;max-width:none}
}
@media (max-width:460px){
  .tbtn.opt{display:none}
  .tpos{display:none}
  .tray{display:none}
  .menubar{font-size:11px}
  .menu > .m-top{padding:2px 5px}
}
@media print{
  body{background:#fff;padding:0}
  .taskbar,.toolbar,.menubar,.dock-l,.dock-r,.statusbar,.titlebar,.wcap{display:none}
  .app,.win,.mdi{border:0;box-shadow:none;background:#fff;padding:0}
  .form-canvas,.doc-canvas{background:#fff;border:0;box-shadow:none;padding:0}
}