:root {
  --ink: #161a1f; --ink-2: #56606b; --paper: #f6f4ef; --paper-2: #ecebe5; --line: rgba(22, 26, 31, .13);
  --accent: #f2641e; --accent-ink: #fff; --pick: #0fa9b6; --shadow: 0 6px 24px rgba(15, 20, 28, .16);
  --r: 12px; --gut: 14px;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body.noui #ui { display: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #cfd9e2; color: var(--ink); -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }

/* layar muat */
#loading { position: fixed; inset: 0; display: grid; place-items: center; background: #e9edf1; z-index: 30; transition: opacity .6s; }
#loading.done { opacity: 0; pointer-events: none; }
.ld-box { width: min(320px, 76vw); }
.ld-title { font-weight: 800; font-size: 34px; letter-spacing: .01em; }
.ld-title b, .brand-t b { color: var(--accent); }
.ld-sub { margin: 4px 0 16px; font-size: 14px; color: var(--ink-2); min-height: 1.3em; }
.ld-bar { height: 4px; background: rgba(22, 26, 31, .12); border-radius: 2px; overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s; }

#ui { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#ui > * { pointer-events: auto; }

/* bar atas */
.bar { position: absolute; left: var(--gut); right: var(--gut); top: calc(var(--gut) + env(safe-area-inset-top, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.bar > * { pointer-events: auto; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 14px 10px; border: 0; border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow); text-align: left; }
.brand-t { font-weight: 800; font-size: 19px; line-height: 1; letter-spacing: .01em; }
.brand-s { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.bar { align-items: flex-start; }
.bar-r { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.bar-r > * { pointer-events: auto; }
.tools { display: flex; gap: 6px; padding: 5px; border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow); }
.views { display: flex; align-items: center; gap: 2px; padding: 4px 5px 4px 12px; border-radius: 999px; background: rgba(246, 244, 239, .93); box-shadow: var(--shadow); max-width: calc(100vw - 2 * var(--gut)); overflow-x: auto; scrollbar-width: none; }
.views::-webkit-scrollbar { display: none; }
.dragmode { height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: rgba(246, 244, 239, .93); box-shadow: var(--shadow); font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.dragmode span { color: var(--ink); font-weight: 800; }
.dragmode[aria-pressed="true"] { background: var(--ink); color: rgba(255, 255, 255, .7); }
.dragmode[aria-pressed="true"] span { color: #fff; }
.dragmode:focus-visible { outline: 2px solid var(--pick); outline-offset: 2px; }
body[data-mode="pov"] .dragmode, body[data-mode="fly"] .dragmode { display: none; }
.views-l { font-size: 11.5px; font-weight: 700; color: var(--ink-2); margin-right: 4px; white-space: nowrap; }
.views button { height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; font-size: 13px; font-weight: 600; white-space: nowrap; }
.views button:hover { background: var(--paper-2); }
.views button:focus-visible { outline: 2px solid var(--pick); outline-offset: 1px; }
.tg { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.tg:hover { background: var(--paper-2); }
.tg[aria-pressed="true"] { background: var(--ink); color: #fff; }
.tg:focus-visible, .hb:focus-visible, .go:focus-visible, .brand:focus-visible, input:focus-visible { outline: 2px solid var(--pick); outline-offset: 2px; }
.ic { width: 16px; height: 16px; display: inline-block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ic-sun { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v3M12 20v3M1 12h3M20 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.night .ic-sun { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 14.5A8.5 8.5 0 0 1 9.5 4 8.5 8.5 0 1 0 20 14.5z'/%3E%3C/svg%3E"); }
.ic-roof { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 14c3-6 7-9 10-9s7 3 10 9h-3c-2-4-5-6-7-6s-5 2-7 6z'/%3E%3Crect x='3' y='16' width='18' height='3' rx='1'/%3E%3C/svg%3E"); }
.ic-cut { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='12' rx='10' ry='6' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cellipse cx='12' cy='12' rx='4.5' ry='2.4'/%3E%3C/svg%3E"); }
.ic-link { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }

/* panel cari kursi */
.panel { position: absolute; left: var(--gut); top: calc(var(--gut) + 74px + env(safe-area-inset-top, 0px)); width: 286px; display: flex; flex-direction: column; gap: 10px; transition: opacity .25s, transform .25s; }
.panel > * { background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px; }
.p-title { font-weight: 800; font-size: 15px; margin-bottom: 10px; }
.p-row { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 8px; }
.p-row label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.p-row input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 15px; font-weight: 600; color: var(--ink); }
.p-row input::placeholder { color: #a9afb6; font-weight: 500; }
.p-err { margin-top: 8px; font-size: 12.5px; color: #b3261e; line-height: 1.35; }
.go { width: 100%; height: 40px; margin-top: 10px; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 14.5px; }
.go:hover { filter: brightness(1.06); }
.p-hint { margin-top: 9px; font-size: 11.5px; line-height: 1.4; color: var(--ink-2); }
.sel .sc-k { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pick); }
.sel .sc-t { font-size: 24px; font-weight: 800; line-height: 1.15; }
.sel .sc-s { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.sel .sc-h { font-size: 12.5px; margin-top: 8px; line-height: 1.4; }
.how { font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.how b { display: block; color: var(--ink); margin-bottom: 4px; }
.how ul { margin: 0 0 6px; padding: 0; list-style: none; display: grid; gap: 3px; }
.how kbd { display: inline-block; padding: 0 5px; border: 1px solid var(--line); border-radius: 5px; background: #fff; font: inherit; font-size: 11px; font-weight: 700; color: var(--ink); }
.sel { position: relative; }
.sc-x { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; font-size: 20px; line-height: 1; color: var(--ink-2); }
.sc-x:hover { background: var(--paper-2); }

/* HUD pandangan dari kursi */
.hud { position: absolute; left: 50%; bottom: calc(var(--gut) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 16px; width: max-content; max-width: calc(100vw - 2 * var(--gut)); padding: 10px 10px 10px 16px; border-radius: 14px; background: rgba(246, 244, 239, .94); box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.hud-t { font-weight: 800; font-size: 17px; line-height: 1.15; white-space: nowrap; }
.hud-s { font-size: 12px; color: var(--ink-2); margin-top: 1px; }
.hud-btns { display: flex; align-items: center; gap: 6px; flex: none; flex-wrap: wrap; }
.pad { display: inline-flex; align-items: center; gap: 3px; padding-right: 6px; margin-right: 2px; border-right: 1px solid var(--line); }
.pad-v { display: inline-flex; flex-direction: column; gap: 2px; }
.pad .hb.sq { width: 34px; font-size: 12px; }
.pad-v .hb.sq { height: 18px; font-size: 9px; border-radius: 6px; }
.hb { height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-weight: 650; font-size: 13.5px; white-space: nowrap; }
.hb:hover { background: var(--paper-2); }
.hb.sq { width: 38px; padding: 0; font-size: 18px; line-height: 1; }
.zoom { display: inline-flex; align-items: center; gap: 4px; }
.zoom b { min-width: 40px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.zoom .zv { min-width: 44px; height: 38px; padding: 0 6px; border: 0; border-radius: 9px; background: transparent; font-weight: 800; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.zoom .zv:hover { background: var(--paper-2); }
.zoom .zv:focus-visible { outline: 2px solid var(--pick); outline-offset: 2px; }

.note { position: absolute; left: var(--gut); bottom: calc(8px + env(safe-area-inset-bottom, 0px)); font-size: 11px; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); pointer-events: none !important; }
#tip { position: fixed; left: 0; top: 0; padding: 7px 10px 8px; border-radius: 9px; background: rgba(22, 26, 31, .93); color: #fff; font-size: 12px; line-height: 1.3; pointer-events: none !important; white-space: nowrap; z-index: 40; }
#tip b { display: block; font-size: 13.5px; }
#tip span { opacity: .78; }
#toast { position: fixed; left: 50%; top: 84px; transform: translateX(-50%); padding: 9px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; z-index: 40; pointer-events: none !important; }

/* di kursi: panel kiri disembunyikan supaya pandangan lega */
body[data-mode="pov"] .panel, body[data-mode="fly"] .panel { opacity: 0; transform: translateX(-12px); pointer-events: none; }
body.bare .bar, body.bare .panel, body.bare .note, body.bare .hud-main, body.bare .hud-btns > :not(#btnHide) { display: none; }
body.bare .hud { width: auto; }
body.bare .hud { padding: 6px; background: rgba(246, 244, 239, .55); left: auto; right: var(--gut); transform: none; }

/* HP */
@media (max-width: 720px) {
  :root { --gut: 10px; }
  .brand-s { display: none; }
  .brand { padding: 10px 12px; }
  .tg span { display: none; }
  .bar-r { gap: 6px; }
  .views { padding-left: 10px; }
  .views-l { display: none; }
  .views button { height: 32px; padding: 0 10px; }
  .tg { width: 38px; padding: 0; justify-content: center; }
  .panel { left: var(--gut); right: var(--gut); top: auto; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); width: auto; }
  .panel .how { display: none; }
  .panel > * { padding: 12px; }
  .p-title { margin-bottom: 8px; }
  .p-hint { display: none; }
  body[data-mode="section"] #findForm { display: none; }
  .hud { left: var(--gut); right: var(--gut); width: auto; transform: none; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
  .hb { padding: 0 10px; }
  .pad { border-right: 0; padding-right: 0; }
  .hud-t { white-space: normal; }
  .hud-btns { justify-content: space-between; row-gap: 6px; }
  .note { bottom: calc(6px + env(safe-area-inset-bottom, 0px)); font-size: 10px; }
  body[data-mode="pov"] .note { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }