/* The client's Studio (owner, 2026-10-02: "Situs saya" became "Proyek saya", dark "seperti
   rancangan"): "Proyek saya" (/studio/, px-) is the projects down the left and a prompt box in the night; a project's
   workspace (/studio/chat/, wk-) is its chat on the left and what the client may see of the work on a dotted canvas.
   Black, white and greys only. Loaded after site.css, chrome.css, malam.css and studio.css; the editor and ARSWORD's
   admin keep their light pages. */

/* ---------- the night: its own tokens, so the shared buttons, fields and the chat turn over by themselves */
.ruang {
  --canvas: #050505; --panel: #0b0b0b; --raise: #111111; --sunken: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .16); --ctl: rgba(255, 255, 255, .4);
  --ink: #f5f5f5; --ink-2: rgba(245, 245, 245, .74); --ink-3: rgba(245, 245, 245, .54);
  --inverse: #ffffff; --inverse-hover: #e2e2e2; --on-inverse: #0a0a0a;
  --thumb: #1f1f1f; --px-bar: 64px;
  background: var(--canvas); color: var(--ink);
}
html:has(> body.ruang) { background: #050505; }
.ruang ::selection { background: #f5f5f5; color: #0a0a0a; }
.ruang :focus-visible { outline-color: #fff; }
.ruang .fd :where(input, textarea):focus, .ruang .in:focus { border-color: rgba(255, 255, 255, .7); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.ruang .fd :where(input, textarea):hover { border-color: rgba(255, 255, 255, .32); }
.ruang .toast { background: #f5f5f5; color: #0a0a0a; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); }
.ruang .cta.ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .4); }
.px-ib {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); text-decoration: none;
  transition: background-color .15s, color .15s;
}
.px-ib:hover { background: var(--sunken); color: var(--ink); }
.px-ib .ico { width: 20px; height: 20px; }

/* ---------- the frame: the list's column and the main pane, side by side from 1024px */
.px-app { min-height: 100vh; min-height: 100dvh; }
.px-main { position: relative; min-width: 0; }
@media (min-width: 1024px) {
  .px-app { display: grid; grid-template-columns: 280px minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; transition: grid-template-columns .45s var(--ease); }
  .px-app.is-folded { grid-template-columns: 0 minmax(0, 1fr); }
  .px-app.is-folded .px-side { visibility: hidden; transition: visibility 0s .45s; }
  .px-main { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
}
.px-app[data-view="masuk"] .px-side, .px-app[data-view="load"] .px-side { display: none; }
@media (min-width: 1024px) { .px-app[data-view="masuk"], .px-app[data-view="load"] { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the list's column (#0B0B0B, a hairline on its right): logo, "Proyek baru", search, projects, the account */
.px-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--panel); border-right: 1px solid var(--line); }
.px-side-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 12px 8px 14px; }
.px-side .logo { gap: 9px; }
.px-side .logo-mark { width: 26px; }
.px-side .logo-word { width: 86px; }
.px-new { margin: 8px 14px 0; min-height: 44px; font-size: var(--fs-md); }
.px-new .ico { width: 18px; height: 18px; }
.px-find { position: relative; margin: 12px 14px 4px; }
.px-find .ico { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.px-find input {
  width: 100%; height: 40px; padding: 0 12px 0 38px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-md); transition: border-color .15s;
}
.px-find input::placeholder { color: var(--ink-3); opacity: 1; }
.px-find input:hover { border-color: rgba(255, 255, 255, .28); }
.px-find input:focus { outline: none; border-color: rgba(255, 255, 255, .6); }
.px-find input::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }
.px-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 8px 18px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; }
.px-group { margin: 18px 10px 6px; font-size: 12px; font-weight: 500; letter-spacing: .01em; color: var(--ink-3); }
.px-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.px-row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 7px 10px;
  border-radius: 10px; color: var(--ink); text-decoration: none; transition: background-color .15s;
}
.px-row:hover { background: var(--sunken); }
.px-row:focus-visible { outline-offset: -2px; }
.px-row-t { display: grid; gap: 1px; min-width: 0; }
.px-row-t b, .px-row-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-row-t b { font-size: .875rem; font-weight: 500; letter-spacing: -.005em; }
.px-row-t small { font-size: 12px; color: var(--ink-3); }
.px-thumb { display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden; border-radius: 8px; background: #1a1a1a; box-shadow: inset 0 0 0 1px var(--line); }
.px-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.px-thumb.is-letter { font-size: .9375rem; font-weight: 600; color: var(--ink-2); }
.px-thumb.is-icon .ico { width: 18px; height: 18px; color: var(--ink-2); }
/* Claude (admins only, public/studio/revisi-tautan.js): its own logo in its own colour */
.px-claude {
  width: 18px; height: 18px; background: #d97757;
  -webkit-mask: url("/studio/claude-logo.svg") center / contain no-repeat; mask: url("/studio/claude-logo.svg") center / contain no-repeat;
}
.px-row .chat-n { margin: 0; background: #fff; color: #0a0a0a; }
.px-none { margin: 18px 10px; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-3); }
/* "Revisi situs" (public/studio/revisi-tautan.js): the custom-built sites this account may revise, under the list and
   under the box */
.px-revisi { flex: none; max-height: 40%; overflow-y: auto; padding: 0 8px 10px; border-top: 1px solid var(--line); scrollbar-width: thin; }
.px-revisi .px-group { margin-top: 14px; }
:is(.px-revisi, #px-revisi-sec) .px-row > .ico { width: 16px; height: 16px; color: var(--ink-3); }
/* a cashier row's "⋯" (akun.js, owner 2026-10-04): what may be done with that app (delete it, ask to stop it, or why
   not), opened under the row in a white ring; the row keeps its link, the button sits over its right edge, a finger's
   size */
.px-li-aksi { position: relative; }
.px-li-aksi > .px-row { padding-right: 46px; }
.px-aksi {
  position: absolute; top: 4px; right: 2px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--ink-3); cursor: pointer; transition: background-color .15s, color .15s;
}
.px-aksi:hover, .px-aksi[aria-expanded="true"] { background: var(--sunken); color: var(--ink); }
.px-aksi .ico { width: 18px; height: 18px; }
.px-ak { display: grid; gap: 10px; margin: 2px 4px 8px; padding: 12px; border: 1.5px solid #fff; border-radius: 12px; background: #111; }
.px-ak[hidden] { display: none; }
.px-ak p { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); outline: none; }
.px-ak p b { font-weight: 600; color: var(--ink); }
.px-ak-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.px-ak-acts .cta.sm { flex: 1 1 auto; min-height: 44px; }
.px-ak-acts .cta .ico { width: 16px; height: 16px; }
.px-ak .cta[disabled] { opacity: .6; cursor: default; }
.px-me { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 10px calc(12px + env(safe-area-inset-bottom)) 16px; border-top: 1px solid var(--line); }
.px-av {
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: #262626; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none;
}
.px-mail { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-menu {
  position: absolute; left: 10px; right: 10px; bottom: calc(100% - 2px); z-index: 5; display: grid; gap: 2px; padding: 6px;
  border: 1px solid var(--line-strong); border-radius: 14px; background: #141414; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .85);
}
.px-mi {
  display: flex; align-items: center; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 9px;
  background: none; color: var(--ink); font-size: var(--fs-md); text-align: left; text-decoration: none;
}
.px-mi:hover, .px-mi:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.px-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .6); }

/* a phone and a tablet: the column is a drawer over the page */
@media (max-width: 1023.98px) {
  .px-side {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(86vw, 320px);
    padding-top: env(safe-area-inset-top);
    transform: translateX(-104%); visibility: hidden; box-shadow: 30px 0 60px -24px rgba(0, 0, 0, .9);
    transition: transform .4s var(--ease), visibility 0s .4s;
  }
  .px-app.is-drawer .px-side { transform: none; visibility: visible; transition: transform .4s var(--ease); }
  html.px-locked { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .px-side, .px-app { transition: none !important; } }

/* ---------- the bar over the main pane: on a wide screen two quiet links at the right (and the way back to the column
   when it is folded); on a phone the drawer's button, the logo and the account */
.px-bar { position: absolute; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; gap: 10px; min-height: var(--px-bar); padding: 12px clamp(14px, 2vw, 28px); }
.px-bar-logo .logo-mark { width: 26px; }
.px-bar-logo .logo-word { width: 86px; }
.px-bar-links { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.px-bar-links > a:not(.cta) { color: var(--ink-2); font-size: var(--fs-md); font-weight: 500; text-decoration: none; transition: color .15s; }
.px-bar-links > a:not(.cta):hover { color: var(--ink); }
.px-bar-links .cta.sm { min-height: 38px; padding: 0 16px; border-color: rgba(255, 255, 255, .28); }
.px-bar-links .cta .ico { width: 15px; height: 15px; }
@media (min-width: 1024px) {
  .px-app:not(.is-folded):not([data-view="masuk"]):not([data-view="load"]) .px-bar-logo,
  .px-app:not(.is-folded) .px-open, .px-app[data-view="masuk"] .px-open, .px-app[data-view="load"] .px-open { display: none; }
  .px-bar-av { display: none; }
}
@media (max-width: 1023.98px) {
  .px-bar { position: sticky; top: 0; padding: max(10px, env(safe-area-inset-top)) 12px 10px; min-height: 60px; background: rgba(5, 5, 5, .74); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
  .px-bar-links { display: none; }
  .px-bar-logo { position: absolute; left: 50%; transform: translateX(-50%); }
  .px-bar-av { margin-left: auto; }
  .px-app[data-view="masuk"] .px-open, .px-app[data-view="load"] .px-open { display: none; }
  .px-app[data-view="masuk"] .px-bar-logo, .px-app[data-view="load"] .px-bar-logo { position: static; transform: none; }
  .px-app[data-view="masuk"] .px-bar, .px-app[data-view="load"] .px-bar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; position: absolute; inset: 0 0 auto 0; }
}
.px-wait { padding: calc(var(--px-bar) + 120px) 24px; text-align: center; font-size: var(--fs-md); color: var(--ink-3); }

/* ---------- the start: the switch, the question, the box, quick picks; the silver sky of the home behind them */
.px-start { display: grid; place-items: center; min-height: min(820px, 86vh); min-height: min(820px, 86svh); padding: calc(var(--px-bar) + clamp(32px, 8vh, 112px)) clamp(16px, 4vw, 48px) clamp(64px, 9vh, 112px); }
.px-start-in { position: relative; z-index: 2; display: grid; justify-items: center; width: min(100%, 760px); text-align: center; }
/* a little night kept behind the words, as on the home's hero, so the light passing under them never thins the type */
.px-start-in::before { content: ""; position: absolute; inset: -12% -14% 30%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(5, 5, 5, .7), rgba(5, 5, 5, .35) 60%, transparent); }
.px-mode { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: rgba(12, 12, 12, .7); }
.px-mode button {
  min-height: 36px; padding: 0 18px; border: 0; border-radius: var(--r-pill); background: transparent;
  color: var(--ink-2); font-size: var(--fs-md); font-weight: 500; transition: background-color .2s, color .2s;
}
.px-mode button:hover { color: var(--ink); }
.px-mode button[aria-pressed="true"] { background: #fff; color: #0a0a0a; }
.px-h1 { max-width: 12ch; margin-top: clamp(22px, 3vh, 32px); font-size: clamp(2.5rem, 1.1rem + 3.9vw, 4.75rem); font-weight: 600; line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.px-lede { max-width: 46ch; margin-top: 16px; font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.5; color: var(--ink-2); text-wrap: balance; }

.px-box {
  width: 100%; margin-top: clamp(28px, 4vh, 40px); text-align: left;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 24px; background: rgba(17, 17, 17, .9);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: border-color .2s, box-shadow .2s;
}
.px-box:focus-within { border-color: rgba(255, 255, 255, .26); }
.px-box textarea {
  display: block; width: 100%; min-height: 104px; max-height: 280px; padding: 20px 22px 8px; border: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.5; resize: none;
}
.px-box textarea:focus { outline: none; }
.px-box textarea::placeholder { color: var(--ink-3); opacity: 1; }
/* no package yet: the field is shut (read-only) until one is chosen */
.px-box.is-locked textarea { cursor: default; }
.px-clip.is-off { opacity: .4; cursor: default; }
.px-clip.is-off input { cursor: default; }
.px-own { padding: 20px 22px 6px; font-size: var(--fs-md); line-height: 1.55; color: var(--ink-2); }
.px-atts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 4px 22px 6px; }
.px-atts li { position: relative; width: 60px; height: 60px; overflow: hidden; border-radius: 10px; background: #1a1a1a; box-shadow: inset 0 0 0 1px var(--line); }
.px-atts img { width: 100%; height: 100%; object-fit: cover; }
.px-att-x { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .74); color: #fff; }
.px-att-x .ico { width: 13px; height: 13px; stroke-width: 2.25; }
.px-box-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px 14px; }
.px-pick { position: relative; flex: none; min-width: 0; }
/* the package picker (public/studio/pilih-paket.js): a pill, and the list that opens from it */
.pp-btn {
  display: inline-flex; align-items: center; gap: 8px; max-width: min(260px, 56vw); height: 38px; padding: 0 12px 0 15px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: #1a1a1a; color: var(--ink);
  font: inherit; font-size: var(--fs-md); font-weight: 500; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.pp-btn:hover { border-color: rgba(255, 255, 255, .32); }
.pp-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pp.is-open .pp-btn { border-color: rgba(255, 255, 255, .5); background: #222; }
.pp-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-btn .pp-chev { flex: none; width: 16px; height: 16px; color: var(--ink-2); transition: transform .2s var(--ease); }
.pp.is-open .pp-chev { transform: rotate(180deg); }
/* the shut field asked: a white halo pulses twice round the package picker */
@keyframes px-ask { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 30% { box-shadow: 0 0 0 4px rgba(255, 255, 255, .3); } }
.px-pick.is-ask .pp-btn { animation: px-ask 1s var(--ease) 2; }
@media (prefers-reduced-motion: reduce) { .px-pick.is-ask .pp-btn { animation: none; border-color: #fff; } }

/* the list: a dark card under (or over) the pill; on a phone a sheet from the bottom */
.pp-pop {
  position: fixed; z-index: 80; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: 18px; background: #141414; color: var(--ink);
  box-shadow: 0 32px 64px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(-4px) scale(.985); transform-origin: top left; transition: opacity .16s, transform .22s var(--ease);
}
.pp-pop.is-up { transform-origin: bottom left; transform: translateY(4px) scale(.985); }
.pp-pop.is-in { opacity: 1; transform: none; }
.pp-head { display: none; }
.pp-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.pp-list:focus { outline: none; }
.pp-group { padding: 10px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pp-list > [role="group"] + [role="group"] { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.pp-opt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 12px; min-height: 56px;
  padding: 9px 12px; border-radius: 12px; cursor: pointer; transition: background-color .12s;
}
/* the keyboard's place in the list shows only for the keyboard; a mouse has its hover, a finger nothing */
.pp-list:focus-visible .pp-opt.is-active, .pp-opt:hover { background: rgba(255, 255, 255, .07); }
@media (hover: none) { .pp-opt:hover { background: transparent; } }
.pp-t { display: grid; gap: 2px; min-width: 0; }
.pp-t b { font-size: var(--fs-md); font-weight: 500; letter-spacing: -.005em; color: var(--ink); }
.pp-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-3); }
.pp-p { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-ok { width: 18px; height: 18px; color: #fff; stroke-width: 2.25; visibility: hidden; }
.pp-opt[aria-selected="true"] .pp-ok { visibility: visible; }
.pp-opt[aria-selected="true"] .pp-t b { font-weight: 600; }
.pp-opt[aria-selected="true"] .pp-p { color: var(--ink); }
.pp-none { padding: 18px 14px; font-size: var(--fs-sm); color: var(--ink-3); }
.pp-scrim { position: fixed; inset: 0; z-index: 79; background: rgba(0, 0, 0, .6); }
html.pp-locked { overflow: hidden; }
.pp-pop.is-sheet {
  inset: auto 0 0 0; max-height: 82dvh; border-width: 1px 0 0; border-radius: 22px 22px 0 0;
  padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); opacity: 1; transition: transform .32s var(--ease);
}
.pp-pop.is-sheet.is-in { transform: none; }
.pp-pop.is-sheet .pp-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 12px 8px 20px; }
.pp-grip { position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .22); transform: translateX(-50%); }
.pp-head b { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
.pp-x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--ink); }
.pp-x .ico { width: 18px; height: 18px; }
.pp-pop.is-sheet .pp-list { padding: 4px 10px 14px; }
.pp-pop.is-sheet .pp-opt { min-height: 64px; }
.pp-pop.is-sheet .pp-t small { white-space: normal; }
@media (prefers-reduced-motion: reduce) { .pp-pop, .pp-pop.is-sheet, .pp-btn .pp-chev { transition: none; } }
.px-clip { position: relative; display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink-2); cursor: pointer; transition: border-color .15s, color .15s; }
.px-clip:hover { border-color: rgba(255, 255, 255, .32); color: var(--ink); }
.px-clip:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; }
.px-clip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.px-clip .ico { width: 18px; height: 18px; }
.px-scope { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.px-send {
  display: grid; place-items: center; flex: none; width: 42px; height: 42px; margin-left: auto; padding: 0;
  border: 0; border-radius: 50%; background: #fff; color: #0a0a0a; transition: background-color .15s, transform .12s;
}
.px-send:hover { background: #e2e2e2; }
.px-send:active { transform: scale(.94); }
.px-send:disabled { background: rgba(255, 255, 255, .2); cursor: default; }
.px-send .ico { width: 20px; height: 20px; stroke-width: 2.25; }
/* the next question, inside the box: the Student Portfolio's templates, or a name for the project */
.px-step { padding: 18px 22px 22px; border-top: 1px solid var(--line); }
.px-step-h { max-width: 62ch; font-size: var(--fs-md); line-height: 1.55; color: var(--ink); }
.px-picks { margin-top: 14px; }
.px-picks .pk { background: #0b0b0b; }
.px-picks .pk-pic { background: #1a1a1a; }
.px-step .mulai-grid { margin-top: 16px; }
.px-step-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 18px; }
.px-step-acts .more-link { font-size: var(--fs-md); text-decoration-color: rgba(255, 255, 255, .3); }
.px-msg { justify-content: center; margin-top: 14px; }
.px-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.px-chips button {
  min-height: 36px; padding: 0 15px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: rgba(5, 5, 5, .55); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; transition: border-color .15s, color .15s, background-color .15s;
}
.px-chips button:hover { border-color: rgba(255, 255, 255, .36); color: var(--ink); }
.px-chips button[aria-pressed="true"] { border-color: #fff; background: #fff; color: #0a0a0a; }
.px-chips:empty { display: none; }

/* ---------- under the start: the latest projects (phone) and the templates */
.px-sec { width: min(100% - 2 * clamp(16px, 4vw, 48px), 1160px); margin: 0 auto; padding-bottom: clamp(56px, 7vw, 104px); }
.px-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.px-head h2 { font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem); font-weight: 600; letter-spacing: -.02em; }
.px-more { padding: 6px 2px; border: 0; background: none; color: var(--ink-3); font-size: var(--fs-md); font-weight: 500; text-decoration: none; transition: color .15s; }
.px-more:hover { color: var(--ink); }
.px-recent .px-rows { border-top: 1px solid var(--line); gap: 0; }
.px-recent .px-row { grid-template-columns: 44px minmax(0, 1fr) auto auto; min-height: 66px; padding: 10px 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.px-recent .px-row:hover { background: transparent; }
.px-recent .px-thumb { width: 44px; height: 44px; border-radius: 10px; }
.px-recent .px-row-t b { font-size: var(--fs-md); }
.px-chev { width: 18px; height: 18px; color: var(--ink-3); }
@media (min-width: 1024px) { .px-recent { display: none; } }

.px-reel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.px-card {
  position: relative; display: block; width: 100%; padding: 14px 14px 16px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 20px; background: #0e0e0e; color: var(--ink); text-align: left;
  transition: border-color .2s;
}
.px-card:hover { border-color: var(--line-strong); }
.px-card-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: #1a1a1a; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .95); }
.px-card-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .7s var(--ease); }
.px-card:hover .px-card-pic img { transform: scale(1.03); }
.px-card-t { display: grid; gap: 2px; margin-top: 14px; padding: 0 2px; }
.px-card-t small { font-size: 12px; color: var(--ink-3); }
.px-card-t b { font-size: var(--fs-md); font-weight: 500; }
.px-card-go {
  position: absolute; top: calc(14px + (100% - 28px) * .3); left: 50%; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .24); color: #fff; font-size: var(--fs-md); font-weight: 500; white-space: nowrap;
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  opacity: 0; transform: translate(-50%, -50%) scale(.94); transition: opacity .25s var(--ease), transform .4s var(--ease); pointer-events: none;
}
.px-card-go .ico { width: 16px; height: 16px; }
.px-card:hover .px-card-go, .px-card:focus-visible .px-card-go { opacity: 1; transform: translate(-50%, -50%); }
@media (hover: none) { .px-card-go { display: none; } }

/* ---------- the account */
.px-akun { width: min(100% - 2 * clamp(16px, 4vw, 48px), 720px); margin: 0 auto; padding: calc(var(--px-bar) + clamp(24px, 6vh, 64px)) 0 96px; }
.px-back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; color: var(--ink-2); font-size: var(--fs-md); font-weight: 500; text-decoration: none; }
.px-back:hover { color: var(--ink); }
.px-back .ico { width: 18px; height: 18px; }
.px-h2 { margin-top: 14px; font-size: clamp(2rem, 1.4rem + 1.7vw, 2.75rem); font-weight: 600; line-height: 1.06; letter-spacing: -.035em; }
.px-akun .acct-rows { margin-top: 24px; }
@media (max-width: 1023.98px) { .px-akun { padding-top: clamp(20px, 4vh, 40px); } }

/* ---------- signed out: the sign-in on a glass card in the night */
.px-sign { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: calc(var(--px-bar) + 24px) clamp(16px, 4vw, 48px) 64px; }
.px-sign-in {
  position: relative; z-index: 2; width: min(100%, 560px); padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--line); border-radius: 28px; background: rgba(11, 11, 11, .82);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95);
}
.px-sign .phrase { font-size: clamp(1.9rem, 1.25rem + 2vw, 2.75rem); line-height: 1.06; letter-spacing: -.04em; }
.px-sign .lede { margin-top: 14px; font-size: var(--fs-md); line-height: 1.55; color: var(--ink-2); }
.px-sign .acc-form .cta { min-width: 180px; }
.px-sign .fine { margin-top: 24px; }

@media (max-width: 599.98px) {
  .px-start { min-height: 0; padding-top: clamp(28px, 6vh, 56px); padding-bottom: 48px; place-items: start center; }
  .px-start-in { justify-items: start; text-align: left; }
  .px-h1 { font-size: clamp(2.25rem, 1.4rem + 4vw, 2.75rem); }
  .px-lede { font-size: var(--fs-md); }
  .px-box textarea { min-height: 96px; padding: 16px 16px 6px; }
  .px-own, .px-atts { padding-left: 16px; padding-right: 16px; }
  .px-box-bar { flex-wrap: wrap; padding: 8px 10px 10px; }
  .px-scope { order: 5; flex-basis: 100%; padding: 2px 4px 0; white-space: normal; }
  .px-step { padding: 16px; }
  .px-step-acts .cta { width: 100%; }
  .px-chips { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 2 * clamp(16px, 4vw, 48px)); margin-inline: calc(-1 * clamp(16px, 4vw, 48px)); padding-inline: clamp(16px, 4vw, 48px); scrollbar-width: none; }
  .px-chips::-webkit-scrollbar { display: none; }
  .px-chips button { flex: none; }
  .px-reel { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * clamp(16px, 4vw, 48px)); padding-inline: clamp(16px, 4vw, 48px); scroll-padding-inline: clamp(16px, 4vw, 48px); }
  .px-reel::-webkit-scrollbar { display: none; }
  .px-reel > li { scroll-snap-align: start; }
  .px-sign-in { border-radius: 22px; }
}

/* ---------- a project's workspace (/studio/chat/): a bar, then the chat on the left and the canvas on the right; on a
   phone the two take turns under a switch */
.wk { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.wk-bar {
  flex: none; display: flex; align-items: center; gap: 10px; min-height: 56px;
  padding: max(8px, env(safe-area-inset-top)) 14px 8px 8px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.wk-title { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.wk-title h1 { min-width: 0; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-badge { display: inline-flex; align-items: center; flex: none; height: 24px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.wk-badge:empty { display: none; }
.wk-tabs { display: none; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); }
.wk-tabs button { min-height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; }
.wk-tabs button[aria-pressed="true"] { background: #fff; color: #0a0a0a; }
/* (a finger wide where they show, a phone or a tablet: the switch looks as it did, its buttons answer 6px above and
   below it too; on a phone "Detail" is the way to the payment card) */
.wk-tabs button { position: relative; }
.wk-tabs button::after { content: ""; position: absolute; inset: -6px 0; }
/* (a new message while "Detail" shows: a dot on "Chat" until the chat is opened; public/studio/chat-page.js) */
.wk-tabs button.is-baru::before { content: ""; position: absolute; top: 6px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wk-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.wk-acts .cta.sm { min-height: 36px; padding: 0 16px; font-size: var(--fs-sm); }
.wk-acts .cta .ico { width: 15px; height: 15px; }
.wk-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); }
.wk-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); background: var(--panel); }
.wk-canvas {
  position: relative; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 56px) 72px;
  background: radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1.6px) 0 0 / 24px 24px, #0e0e0e;
}
.wk-board { display: grid; gap: 20px; width: min(100%, 880px); margin: 0 auto; }
/* nothing to show beside the chat (a project this account cannot open): the chat alone, a measured column */
.wk-body:has(> .wk-canvas[hidden]) { grid-template-columns: minmax(0, 640px); justify-content: center; }
.wk-body:has(> .wk-canvas[hidden]) .wk-chat { border-right: 0; background: transparent; }
.wk-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: -10px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.wk-card { padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: 20px; background: #0b0b0b; }
.wk-card h2 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.012em; }
.wk-card > small { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--ink-3); }
.wk-card .cp-in { margin-top: 16px; }
.wk-card .cp-facts { border-top-color: var(--line-strong); }
.wk-card .more-link { justify-self: start; font-size: var(--fs-md); text-decoration-color: rgba(255, 255, 255, .3); }
.wk-card .pj-bar { background: rgba(255, 255, 255, .1); }
.wk-card .pj-bar i { background: #fff; }
.wk-feats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.wk-feats li { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--ink-2); }
.wk-feats .ico { width: 14px; height: 14px; color: var(--ink); stroke-width: 2.25; }
.wk-acts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 18px; }
.wk-del { min-height: 40px; }
.wk-del.is-sure { border-color: #fff; color: #fff; }
/* the student's site in a browser frame, like an artboard on the canvas */
.wk-frame { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 14px; background: #000; box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .95); }
.wk-frame-bar { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #151515; font-size: 12px; color: var(--ink-3); }
.wk-dots { display: flex; gap: 6px; }
/* Situs Anda (owner, 2026-10-07, Tahap D; chat-page.js kartuSitus): the live site in the browser frame, its two actions;
   ksa-, since st- is the handover card's */
.ksa-slot { width: min(100%, 880px); margin: 0 auto 20px; }
.ksa-frame .ksa-pv { background: #111; }
.ksa-tanpa { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--ink-2); font-size: var(--fs-md); }
.ksa-tanpa .ico { width: 28px; height: 28px; color: var(--ink-3); }
.ksa-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ksa-acts .ico { width: 15px; height: 15px; }
.ksa-ket { margin: 10px 0 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-3); }
.wk-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.wk-url { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wk-frame .sc-pv { border-bottom: 0; background: #111; }
.wk-wait { padding: 40px 0; text-align: center; font-size: var(--fs-md); color: var(--ink-3); }
.wk-help { margin-top: 16px; font-size: var(--fs-sm); color: var(--ink-3); }
.wk-help a { color: var(--ink-2); text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.wk-help a:hover { color: var(--ink); text-decoration-color: currentColor; }
.wk-card small a { color: var(--ink-2); text-underline-offset: 3px; }
/* a student's own site has no chat (owner, 2026-10-02): the canvas across the page */
.wk.is-solo .wk-body { grid-template-columns: minmax(0, 1fr); }

/* the chat in the workspace: no frame of its own, ARSWORD's side as plain words under a name, the
   client's own in a dark bubble, the composer a rounded box at the foot */
.wk .ch { flex: 1; min-height: 0; border: 0; border-radius: 0; background: transparent; }
.wk .ch-view { flex: 1; min-height: 0; }
.wk .ch-log { flex: 1; height: auto; min-height: 0; padding: 18px 20px 16px; background: transparent; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; }
.wk .ch-pin, .wk .ch-ai { background: transparent; }
.wk .ch-who { margin-left: 0; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--ink-3); }
.wk .ch-ai-tag { background: rgba(255, 255, 255, .14); color: var(--ink); }
.wk .is-them .ch-b:not(.ch-pic) { max-width: 100%; padding: 2px 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink); }
.wk .is-them .ch-meta { margin-left: 0; }
.wk .is-me .ch-b:not(.ch-pic) { background: #1f1f1f; color: var(--ink); }
.wk .ch-pic { border-radius: 14px; }
.wk .ch-b a { text-decoration-color: rgba(255, 255, 255, .4); }
.wk .ch-typing { background: #141414; }
.wk .ch-jump { background: #fff; color: #0a0a0a; }
.wk .ch-empty .ico { color: var(--ink-3); }
.wk .ch-form { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 4px; margin: 0 14px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--raise); transition: border-color .15s; }
.wk .ch-form:focus-within { border-color: rgba(255, 255, 255, .3); }
.wk .ch-in { min-height: 40px; padding: 9px 4px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.wk .ch-in:focus { box-shadow: none; }
.wk .ch-attach { width: 40px; height: 40px; }
.wk .ch-attach .ico { width: 19px; height: 19px; }
.wk .ch-send { width: 40px; height: 40px; background: #fff; color: #0a0a0a; }
.wk .ch-send:hover { background: #e2e2e2; }
.wk .ch-send[disabled] { background: rgba(255, 255, 255, .18); color: rgba(10, 10, 10, .7); }
.wk .ch-note { padding: 8px 16px calc(12px + env(safe-area-inset-bottom)); font-size: 12px; }
.wk .ch-note a { color: var(--ink-2); }
.wk .ch-form + .ch-note:empty { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
/* (the conversation style, studio.css .ch.is-pc, on the night: the composer card on Raise without a shadow, one's own
   words on #1F1F1F) */
.wk .ch.is-pc .ch-form { background: var(--raise); box-shadow: none; }
.wk .ch.is-pc .is-me .ch-b:not(.ch-pic) { background: #1f1f1f; }
.wk .ch.is-pc .ch-md code { background: rgba(255, 255, 255, .08); }
.wk .sc-empty { margin: 20px; border-color: var(--line); background: var(--raise); }
@media (max-width: 899.98px) {
  .wk-bar { flex-wrap: wrap; row-gap: 6px; padding-right: 10px; }
  .wk-title { flex-basis: calc(100% - 50px); }
  .wk-tabs { display: flex; order: 5; margin-left: 46px; }
  .wk-acts { order: 6; margin-left: auto; }
  .wk-body { grid-template-columns: minmax(0, 1fr); }
  .wk-chat { border-right: 0; }
  .wk:not([data-tab="detail"]) .wk-canvas, .wk[data-tab="detail"] .wk-chat { display: none; }
  .wk-canvas { padding: 20px 14px 48px; }
  .wk .ch-log { padding: 14px 16px; }
  .wk .ch-form { margin: 0 10px; }
}

/* ---------- a new website project (owner, 2026-10-03; public/studio/brief.js): the
   workspace without its canvas, one measured column like a chat. ARSWORD asks in plain words under a small name, the
   client's answers fold into dark bubbles with "Ubah", the open step's answer sits in a raised panel under its
   question. A thin progress line runs along the top. */
.wk.is-alur .wk-body { grid-template-columns: minmax(0, 680px); justify-content: center; }
.wk.is-alur .wk-chat { border-right: 0; background: transparent; }
.wk-chat.al { position: relative; }
.al-prog { display: flex; gap: 4px; flex: none; padding: 14px 20px 0; }
.al-prog:empty { display: none; }
.al-prog i { flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .12); transition: background-color .3s; }
.al-prog i.is-done { background: #fff; }
.al-prog i.is-now { background: rgba(255, 255, 255, .55); }
.al-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px); mask-image: linear-gradient(to bottom, transparent, #000 28px); }
.al-feed { display: flex; flex-direction: column; gap: 14px; min-height: 100%; padding: 28px 20px calc(28px + env(safe-area-inset-bottom)); }
.al-feed > :first-child { margin-top: auto; }
.al-q { display: grid; gap: 6px; max-width: 60ch; }
.al-who { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.al-line { font-size: var(--fs-md); line-height: 1.55; color: var(--ink-2); }
.al-q.is-now { margin-top: 10px; }
.al-qrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.al-h { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; color: var(--ink); }
.al-h:focus { outline: none; }
.al-maks { flex: none; font-size: var(--fs-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.al-sub { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-3); }
.al-a { display: grid; justify-items: end; gap: 4px; }
.al-bub { max-width: min(85%, 52ch); padding: 10px 16px; border-radius: 18px; background: #1f1f1f; font-size: var(--fs-md); line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.al-bub.is-long { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.al-dim { color: var(--ink-3); }
.al-ubah { min-height: 28px; padding: 0 4px; border: 0; background: none; color: var(--ink-3); font-size: 12px; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .2); text-underline-offset: 3px; }
.al-ubah:hover { color: var(--ink); text-decoration-color: currentColor; }
.al-sws { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: -2px; }
.al-sw { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }

/* the open step's panel */
.al-panel { padding: 16px; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--raise); }
.al-form { display: grid; gap: 14px; }
.al-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
.al-foot .al-note { flex: 1 1 220px; margin-right: auto; }
.al-note { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-3); }
.al-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px;
  border: 0; border-radius: var(--r-pill); background: #fff; color: #0a0a0a; font-size: var(--fs-md); font-weight: 600;
  transition: background-color .15s, opacity .15s;
}
.al-go:hover { background: #e2e2e2; }
.al-go .ico { width: 16px; height: 16px; }
.al-go[disabled] { opacity: .3; cursor: default; }
.al-go.is-wide { width: 100%; }
.al-err { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); line-height: 1.45; color: #fff; }
.al-err .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.al-opt { font-weight: 400; color: var(--ink-3); }
.al-fd { display: grid; gap: 6px; }
.al-fd label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.al-in, .al-ta {
  width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: #0b0b0b; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.45; transition: border-color .15s;
}
.al-ta { resize: none; min-height: 112px; }
.al-in::placeholder, .al-ta::placeholder { color: var(--ink-3); opacity: 1; }
.al-in:hover, .al-ta:hover { border-color: rgba(255, 255, 255, .3); }
.al-in:focus, .al-ta:focus { outline: none; border-color: rgba(255, 255, 255, .7); box-shadow: 0 0 0 3px rgba(255, 255, 255, .1); }
.al-in[aria-invalid="true"], .al-ta[aria-invalid="true"] { border-color: #fff; }

/* package rows and other single choices */
.al-list, .al-opts { display: grid; }
.al-row {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 14px; border: 0;
  border-radius: 14px; background: transparent; color: var(--ink); text-align: left; transition: background-color .15s, box-shadow .15s;
}
.al-row + .al-row { box-shadow: 0 -1px 0 var(--line); }
.al-row:hover { background: rgba(255, 255, 255, .04); }
.al-row[aria-checked="true"] { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px #fff; }
.al-row[aria-checked="true"] + .al-row { box-shadow: none; }
.al-row-t { display: grid; gap: 2px; flex: 1; min-width: 0; }
.al-row-t b { font-size: var(--fs-md); font-weight: 600; letter-spacing: -.005em; }
.al-row-t small { font-size: var(--fs-sm); color: var(--ink-3); }
.al-price { flex: none; font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.al-row[aria-checked="true"] .al-price { color: var(--ink); }
.al-radio { flex: none; width: 18px; height: 18px; border: 1.5px solid var(--ctl); border-radius: 50%; }
.al-row[aria-checked="true"] .al-radio { border-color: #fff; box-shadow: inset 0 0 0 4px var(--raise), inset 0 0 0 9px #fff; }

/* chips: pages, sections, "Pilihkan untuk saya" */
.al-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.al-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font-size: var(--fs-md); font-weight: 500;
  transition: background-color .15s, color .15s, border-color .15s, opacity .15s;
}
.al-chip:hover { border-color: rgba(255, 255, 255, .4); color: var(--ink); }
.al-chip .ico { width: 15px; height: 15px; stroke-width: 2.25; }
.al-chip[aria-pressed] .ico { display: none; }
.al-chip[aria-pressed="true"] { border-color: #fff; background: #fff; color: #0a0a0a; }
.al-chip[aria-pressed="true"] .ico { display: block; }
.al-chip[aria-disabled="true"] { cursor: default; }
.al-chip.is-full { opacity: .4; }
.al-chip.is-add { border-style: dashed; color: var(--ink-3); }
.al-chip.is-pick { justify-self: start; }
.al-addrow { display: flex; gap: 8px; }
.al-addrow .cta { flex: none; min-height: 46px; }

/* a number with minus and plus */
.al-step { display: flex; align-items: center; gap: 8px; }
.al-num { width: 110px; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.al-num::-webkit-inner-spin-button, .al-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.al-stp { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: 12px; background: transparent; color: var(--ink); }
.al-stp:hover { border-color: rgba(255, 255, 255, .4); }
.al-stp .ico { width: 18px; height: 18px; }
.al-step .al-note { margin-left: 6px; }

/* moods: small black-and-white page sketches */
.al-moods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.al-mood { display: grid; gap: 8px; padding: 8px 8px 10px; border: 1px solid var(--line); border-radius: 14px; background: #0b0b0b; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; text-align: left; transition: border-color .15s, box-shadow .15s, color .15s; }
.al-mood:hover { border-color: rgba(255, 255, 255, .3); color: var(--ink); }
.al-mood[aria-pressed="true"] { border-color: #fff; box-shadow: inset 0 0 0 1px #fff; color: var(--ink); }
.al-mood svg { display: block; width: 100%; height: auto; }
:is(.al-mood, .al-stage) svg .f { fill: rgba(255, 255, 255, .02); stroke: rgba(255, 255, 255, .22); }
:is(.al-mood, .al-stage) svg .h { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; stroke-linecap: round; }
:is(.al-mood, .al-stage) svg .s { fill: rgba(255, 255, 255, .78); }
:is(.al-mood, .al-stage) svg .m { fill: rgba(255, 255, 255, .16); }
:is(.al-mood, .al-stage) svg .g { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .3); }
.al-mood[aria-pressed="true"] svg .f { stroke: rgba(255, 255, 255, .5); }

/* colours and the logo */
.al-logo { display: flex; align-items: center; gap: 14px; }
.al-drop { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--ink-2); cursor: pointer; transition: border-color .15s; }
.al-drop:hover, .al-drop:focus-visible { border-color: rgba(255, 255, 255, .5); }
.al-drop .ico { flex: none; width: 22px; height: 22px; color: var(--ink-3); }
.al-drop span { display: grid; gap: 2px; }
.al-drop b { font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.al-drop small { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.45; }
.al-drop input, .al-pickf input, .al-add input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.al-logo-pic { display: grid; place-items: center; flex: none; width: 64px; height: 64px; padding: 6px; border-radius: 14px; background: repeating-conic-gradient(#1c1c1c 0 25%, #141414 0 50%) 0 0 / 12px 12px; box-shadow: inset 0 0 0 1px var(--line); }
.al-logo-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.al-logo-t { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--ink-3); }
.al-logo-t b { color: var(--ink); font-size: var(--fs-md); }
.al-logo-t > span { display: flex; gap: 14px; }
.al-pickf { position: relative; cursor: pointer; }
.al-bad { color: #fff; }
.al-cols { display: grid; gap: 8px; }
.al-colrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.al-col { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 6px; border: 1px solid var(--line); border-radius: var(--r-pill); }
.al-colpick { position: relative; display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); cursor: pointer; }
.al-colpick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.al-hex { width: 96px; min-height: 36px; padding: 6px 8px; border-color: transparent; background: transparent; font-variant-numeric: tabular-nums; text-transform: lowercase; }
.al-x { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); }
.al-x:hover { background: rgba(255, 255, 255, .08); color: var(--ink); }
.al-x .ico { width: 15px; height: 15px; }

/* photos and design examples */
.al-files { display: grid; gap: 8px; }
.al-files + .al-files { padding-top: 12px; border-top: 1px solid var(--line); }
.al-files-h { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.al-thumbs { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 0; padding: 0; }
.al-thumbs li { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #1a1a1a; box-shadow: inset 0 0 0 1px var(--line); }
.al-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.al-thumbs .al-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; background: rgba(0, 0, 0, .65); color: #fff; }
.al-thumbs li.is-up img { opacity: .4; }
.al-up { position: absolute; inset: auto 0 0; padding: 6px; font-size: 12px; font-weight: 600; text-align: center; color: #fff; font-variant-numeric: tabular-nums; }
.al-add { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--ink-3); cursor: pointer; }
.al-add:hover, .al-add:focus-within { border-color: rgba(255, 255, 255, .5); color: var(--ink); }
.al-add .ico { width: 22px; height: 22px; }

/* sites they like */
.al-refs { display: grid; gap: 14px; }
.al-ref { display: grid; gap: 10px; }
.al-ref + .al-ref { padding-top: 14px; border-top: 1px solid var(--line); }

/* the check before sending */
.al-sum { display: grid; margin: 0; }
.al-sum-r { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.al-sum-r:first-child { padding-top: 0; }
.al-sum dt { font-size: var(--fs-sm); color: var(--ink-3); }
.al-sum dd { margin: 0; font-size: var(--fs-md); line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.al-sum dd.is-long { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.al-ai { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #0b0b0b; }
.al-ai-h { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.al-ai-rows { display: grid; gap: 6px; margin: 0; }
.al-ai-rows div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
.al-ai-rows dt { font-size: var(--fs-sm); color: var(--ink-3); }
.al-ai-rows dd { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.al-ai-x { font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.al-check { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.al-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #fff; }
.al-check a { color: var(--ink); text-underline-offset: 3px; }
.al-save { display: flex; align-items: center; justify-content: center; gap: 8px; flex: none; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-3); }
.al-save[hidden] { display: none; }
.al-save.is-bad { color: var(--ink); }
.al-save .ico { width: 15px; height: 15px; }

/* after sending: the stage's panel under the chat */
.wk .ch-stage { flex: none; padding: 4px 20px 8px; }
.al-stage { display: grid; justify-items: center; gap: 12px; padding: 22px 18px; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(120% 90% at 50% 120%, rgba(255, 255, 255, .09), transparent 60%), #080808; text-align: center; }
.al-stage-h { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.al-tg { width: 100%; max-width: 560px; } /* the waiting graphic (tunggu.js) takes the width it is given */
.al-stage-t { font-size: var(--fs-md); font-weight: 500; color: var(--ink); }
.al-stage-s { margin-top: 2px; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-3); text-wrap: balance; }
.al-stage-m { font-size: 12px; letter-spacing: .02em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* A website project's way on (owner, 2026-10-07; chat-page.js lukisJalur): until the client chooses, two cards in the
   composer's place, WhatsApp and the website's chat; on WhatsApp a line with WhatsApp again and the way back here. The
   stage panel's night (the soft silver from below), left-aligned: a choice to read, not a waiting screen. */
.jl { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(120% 90% at 50% 120%, rgba(255, 255, 255, .07), transparent 60%), #080808; }
.jl-h { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.012em; color: var(--ink); outline: none; text-wrap: balance; }
.jl-s { max-width: 60ch; margin-top: -6px; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-3); }
/* (side by side only where each card gets 240px: the computer's chat column is narrower, so they stack there) */
.jl-pilih { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.jl-k {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px;
  border: 1px solid var(--line-strong); border-radius: 16px; background: var(--raise); color: var(--ink); font: inherit; text-align: left; text-decoration: none;
  cursor: pointer; transition: border-color .15s, background-color .15s;
}
.jl-k .ico { flex: none; width: 22px; height: 22px; margin-top: 1px; }
/* (WhatsApp's card is its title alone: owner, 2026-10-07; the website's chat keeps its line) */
.jl-kt { display: grid; gap: 4px; min-width: 0; }
.jl-k b { font-size: var(--fs-md); font-weight: 600; }
.jl-k small { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-3); }
.jl-k:hover { border-color: rgba(255, 255, 255, .4); background: #161616; }
.jl-k:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.jl-k:disabled { opacity: .5; cursor: progress; }
.jl-m { font-size: 12px; color: var(--ink-3); }
.jl-kode { font-weight: 600; letter-spacing: .04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.jl-acts { display: flex; flex-wrap: wrap; gap: 8px; }
@media (hover: none) { .jl-k:hover { border-color: var(--line-strong); background: var(--raise); } }
@media (max-width: 599.98px) {
  .jl { padding: 16px; }
  .jl-acts .cta { flex: 1 1 auto; }
}

@media (max-width: 899.98px) {
  .wk.is-alur .wk-bar { flex-wrap: nowrap; }
  .wk.is-alur .wk-title { flex: 1 1 0; }
  .wk.is-alur .wk-del:not(.is-sure) { width: 40px; padding: 0; }
  .wk.is-alur .wk-del:not(.is-sure) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .al-prog { padding: 10px 16px 0; }
  .al-feed { padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .al-panel { padding: 14px; }
  .al-moods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-sum-r { grid-template-columns: minmax(0, 1fr) auto; }
  .al-sum-r dt { grid-column: 1 / -1; }
  .al-ai-rows div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .al-foot .al-go { flex: 1 1 100%; }
  .wk .ch-stage { padding: 4px 12px 8px; }
}
@media (prefers-reduced-motion: reduce) { .al-prog i, .al-chip, .al-row { transition: none; } }

/* Proyek saya, in the design flow: what each picture in the box is (a segmented choice beside its thumbnail) */
.px-kinds { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; text-align: left; }
.px-kinds li { display: flex; align-items: center; gap: 12px; }
.px-kinds img { flex: none; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: #1a1a1a; }
.px-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); }
.px-seg button { min-height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; }
.px-seg button[aria-checked="true"] { background: #fff; color: #0a0a0a; }
.px-chips [data-banding] { border-style: dashed; }

/* small controls in the brief keep a 44px place to tap (their look stays small) */
.al-ubah, .al-thumbs .al-x { position: relative; }
.al-ubah::before, .al-thumbs .al-x::before { content: ""; position: absolute; inset: 50% auto auto 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.al-logo-t .linkish { min-height: 32px; }
/* the waiting panel gives way to the conversation on a short screen once there is something to answer */
@media (max-height: 760px), (max-width: 599.98px) {
  .wk .ch:has(.ch-form:not([hidden])) .al-tg, .wk .ch:has(.ch-form:not([hidden])) .al-stage-h, .wk .ch:has(.ch-form:not([hidden])) .al-stage-m { display: none; }
  .wk .ch:has(.ch-form:not([hidden])) .al-stage { padding: 12px 14px; gap: 4px; }
}

/* ---------- the designs and the deposit (public/studio/alur-panel.js): the three as 16:10 tiles of the page's top;
   Desain 1 sharp with "Lihat", the other two blurred and locked until the deposit (a 64 px picture blown up, never a
   sharp one blurred by the browser); the white pill with the exact amount; the sheet with the terms, then where to pay */
.ad { gap: 14px; padding: 22px 20px; }
.ad-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 4px; }
.ad-tile { display: grid; gap: 8px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ad-pic { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: #141414; box-shadow: 0 0 0 1px var(--line-strong); transition: box-shadow .2s; }
.ad-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ad-pic.is-buram img { filter: blur(10px) saturate(1.15); transform: scale(1.18); }
.ad-tile:hover .ad-pic, .ad-tile:focus-visible .ad-pic { box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); }
.ad-tile:focus-visible { outline: none; }
.ad-lock { position: absolute; inset: 0; display: grid; place-items: center; width: 38px; height: 38px; margin: auto; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: rgba(0, 0, 0, .42); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ad-lock .ico { width: 16px; height: 16px; }
.ad-open { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 8px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ad-open .ico { width: 13px; height: 13px; }
.ad-cap { display: grid; min-width: 0; }
.ad-cap b { font-size: 13px; font-weight: 600; color: var(--ink); }
.ad-cap span { overflow: hidden; font-size: 12px; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
.ad-pay-btn { min-width: 280px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ad-kode { max-width: 54ch; font-size: 12px; line-height: 1.5; color: var(--ink-3); text-wrap: balance; }
.ad-note { display: flex; align-items: flex-start; gap: 8px; max-width: 56ch; margin-top: 2px; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); text-align: left; }
.ad-note .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ink); }
.ad-batal { margin-top: -2px; }
.ad-chosen .cp-in { display: grid; gap: 12px; }
.ad-chosen .cta { justify-self: start; }
.ad-tile.is-wide .ad-pic { border-radius: 10px; }

.ad-sheet {
  width: min(520px, calc(100vw - 32px)); max-width: none; max-height: min(88vh, 860px); max-height: min(88dvh, 860px);
  margin: auto; padding: 0; border: 1px solid var(--line-strong); border-radius: 20px; background: #0b0b0b; color: var(--ink);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9);
}
.ad-sheet[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.ad-sheet::backdrop { background: rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ad-sh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px 10px 20px; }
.ad-sh-head h2 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
.ad-x { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.ad-x:hover { border-color: var(--ink); }
.ad-x .ico { width: 16px; height: 16px; }
.ad-sh-body { display: grid; align-content: start; gap: 14px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 18px; }
.ad-sh-body:focus { outline: none; }
.ad-big { font-size: clamp(1.875rem, 1.5rem + 1vw, 2.25rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ad-teks { max-height: 40vh; overflow-y: auto; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #111; font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-2); }
.ad-cek { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: var(--fs-md); font-weight: 500; cursor: pointer; }
.ad-cek input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: #fff; }
.ad-sh-foot { padding: 12px 20px 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.ad-sh-note { padding: 12px 20px 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.ad-sheet .qris-h span { font-size: var(--fs-sm); font-weight: 400; color: var(--ink-3); }
.ad-sheet .pay-up .cta { justify-self: stretch; }

@media (max-width: 599.98px) {
  .ad { padding: 18px 14px; }
  .ad-tiles { gap: 8px; }
  .ad-pic { border-radius: 9px; }
  .ad-open { left: 6px; bottom: 6px; height: 22px; padding: 0 8px 0 6px; }
  .ad-pay-btn { width: 100%; min-width: 0; }
  .ad-sheet { width: 100%; max-height: 92vh; max-height: 92dvh; margin: auto 0 0; border-width: 1px 0 0; border-radius: 20px 20px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .ad-pic { transition: none; } }

/* a cashier-app design in its chat (public/studio/chat.js, chat-page.js) */
.ch-dot { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.ch-card.is-kasir .more-link { justify-self: start; font-size: var(--fs-sm); }
.cp-kasir-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* (a finger wide: "Lihat rancangan", and on a subscription made from a design its way back to the design and its chat) */
.cp-kasir-acts .cta { min-height: 44px; }
.wk-board > * { min-width: 0; }

/* UI audit (2026-10-03): fields of 16px on a phone (an iPhone zooms into smaller ones), buttons a finger wide */
@media (max-width: 599.98px) {
  .px-find input { font-size: 16px; }
  .px-ib { width: 44px; height: 44px; }
  .wk-acts .cta.sm { min-height: 40px; padding: 0 12px; }
  .wk-bar .wk-badge { display: none; }
  .wk-title { flex-basis: calc(100% - 58px); }
  .wk-tabs { margin-left: 54px; }
}

/* ---------- the cashier app's features (public/studio/racik-pos.js; owner, 2026-10-03: "Racik sendiri" needed real
   buttons): the packages as quick starts, each feature a toggle with its price, the customer database as sizes, steppers
   for accounts and outlets, and the total with the way on stuck to the foot while the list scrolls. Used in the box of
   "Proyek saya" and in the designer's "Ubah fitur" sheet; --fk-pad is the padding of whatever holds it, so the foot can
   reach its edges (--fk-r: its round corners; --fk-mb: how far it reaches down, the padding by default). --fk-foot-h
   is what the stuck foot covers (racik-pos.js keeps it), so a control scrolled to by the keyboard stops above it. */
.fk { position: relative; display: grid; gap: 22px; min-width: 0; text-align: left; }
.fk :is(button, input) { scroll-margin: 90px 0 calc(var(--fk-foot-h, 160px) + 16px); }
.fk-foot :is(button, input) { scroll-margin: 0; }
.fk-sec { display: grid; gap: 10px; }
.fk-sec-h, .fk-lbl { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.fk-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.fk-pre {
  display: grid; align-content: center; gap: 2px; min-width: 0; min-height: 60px; padding: 10px 14px; border: 1px solid var(--line-strong);
  border-radius: 14px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.fk-pre:hover { border-color: rgba(255, 255, 255, .42); }
.fk-pre b { font-size: var(--fs-md); font-weight: 600; letter-spacing: -.005em; }
.fk-pre small { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fk-per { margin-left: 1px; }
.fk-pre[aria-pressed="true"] { border-color: #fff; background: #fff; color: #0a0a0a; }
.fk-pre[aria-pressed="true"] small { color: rgba(10, 10, 10, .62); }
.fk-status { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.fk-cats { display: grid; gap: 22px; padding-bottom: var(--fk-note-sp, 0px); } /* (room for a note while it shows) */
.fk-cat { display: grid; gap: 10px; min-width: 0; }
.fk-cat-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.fk-cat-h h3 { font-size: var(--fs-md); font-weight: 600; letter-spacing: -.01em; }
.fk-count { flex: none; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fk-ket { margin-top: -6px; font-size: 12.5px; color: var(--ink-3); }
.fk-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 8px; }

/* a feature: the box that shows it is in, its name and line, its price */
.fk-it {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 4px 12px;
  width: 100%; min-width: 0; min-height: 64px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 14px;
  background: rgba(255, 255, 255, .015); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
button.fk-it:hover { border-color: rgba(255, 255, 255, .4); }
button.fk-it[aria-pressed="true"] { border-color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px #fff; }
.fk-ck { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 1.5px solid var(--ctl); border-radius: 7px; color: #0a0a0a; }
.fk-ck .ico { width: 14px; height: 14px; stroke-width: 3; opacity: 0; }
.fk-it[aria-pressed="true"] .fk-ck { border-color: #fff; background: #fff; }
.fk-it[aria-pressed="true"] .fk-ck .ico { opacity: 1; }
/* always in (Aplikasi Kasir) or in by itself (the account manager): shown, not changed here */
.fk-it.is-lock { cursor: default; border-style: dashed; }
button.fk-it.is-lock[aria-pressed="true"] { box-shadow: none; border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .04); }
.fk-it.is-lock[aria-pressed="true"] .fk-ck { background: rgba(255, 255, 255, .78); border-color: transparent; }
.fk-it.is-lock .fk-ck .ico { stroke-width: 2.25; }
.fk-t { display: grid; gap: 3px; min-width: 0; }
.fk-t b { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; letter-spacing: -.005em; overflow-wrap: anywhere; }
.fk-desc { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.fk-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.fk-tag { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: 11.5px; font-weight: 500; color: var(--ink-2); }
.fk-tag .ico { width: 11px; height: 11px; }
.fk-p { padding-top: 1px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fk-it[aria-pressed="true"] .fk-p, .fk-it.is-on .fk-p { color: var(--ink); }
@keyframes fk-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 25% { box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); } }
.fk-it.is-flash { animation: fk-flash 1.1s var(--ease) 2; }

/* the customer database (sizes) and the extra accounts (a stepper): the row's whole width */
.fk-it.is-wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); gap: 12px; cursor: default; }
.fk-it.is-wide.is-on { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .04); }
.fk-wide-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.fk-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.fk-seg button {
  display: grid; align-content: center; gap: 1px; min-width: 0; min-height: 50px; padding: 6px 12px; border: 1px solid var(--line-strong);
  border-radius: 12px; background: transparent; color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.fk-seg button:hover { border-color: rgba(255, 255, 255, .42); color: var(--ink); }
.fk-seg b { font-size: var(--fs-sm); font-weight: 600; }
.fk-seg small { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fk-seg button[aria-pressed="true"] { border-color: #fff; background: #fff; color: #0a0a0a; }
.fk-seg button[aria-pressed="true"] small { color: rgba(10, 10, 10, .62); }
.fk-seg.is-bill { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.fk-unit { font-size: 12.5px; color: var(--ink-3); }
.fk-step { display: inline-flex; align-items: center; flex: none; border: 1px solid var(--line-strong); border-radius: var(--r-pill); }
.fk-step button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.fk-step button:hover { background: rgba(255, 255, 255, .08); }
.fk-step button[aria-disabled="true"] { color: var(--ink-3); opacity: .5; cursor: default; }
.fk-step button[aria-disabled="true"]:hover { background: transparent; }
.fk-step .ico { width: 18px; height: 18px; }
.fk-num {
  width: 48px; height: 46px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit;
  font-size: 16px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums;
}
.fk-num:focus { outline: none; }
.fk-step:has(.fk-num:focus) { border-color: rgba(255, 255, 255, .7); box-shadow: 0 0 0 3px rgba(255, 255, 255, .1); }

/* outlets and Bulanan / Tahunan, right under the packages */
.fk-opsi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.fk-fd { display: grid; align-content: start; gap: 8px; min-width: 0; }

/* the foot: the total and the way on; its shadow only while it is stuck over the list (.is-stuck) */
.fk-foot {
  position: sticky; bottom: 0; z-index: 3; display: grid; gap: 10px;
  margin: -6px calc(-1 * var(--fk-pad, 0px)) calc(-1 * var(--fk-mb, var(--fk-pad, 0px)));
  padding: 14px var(--fk-pad, 0px) max(var(--fk-pad, 14px), env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-strong); border-radius: 0 0 var(--fk-r, 0) var(--fk-r, 0);
  background: #0d0d0d; /* (solid: WebKit drops a blur nested in the box's own) */
  transition: box-shadow .2s;
}
.fk-foot.is-stuck { box-shadow: 0 -20px 28px -16px rgba(0, 0, 0, .9); }
/* where the foot's bottom is when it is not stuck (racik-pos.js tempel) */
.fk-end { position: absolute; left: 0; bottom: calc(-1 * var(--fk-mb, var(--fk-pad, 0px))); width: 1px; height: 1px; pointer-events: none; }
/* a note when something came along or went: floating just over the foot, so the foot keeps its height; taps go through */
.fk-note {
  position: absolute; left: var(--fk-pad, 0px); right: var(--fk-pad, 0px); bottom: calc(100% + 8px); z-index: 1; pointer-events: none;
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px;
  background: #1a1a1a; box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .6); font-size: var(--fs-sm); line-height: 1.45; color: var(--ink);
}
.fk-note[hidden] { display: none; }
.fk-note .ico { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.fk-note.is-bad { border-color: #fff; font-weight: 600; }
.fk-sum { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.fk-sum-t { display: grid; gap: 1px; min-width: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.fk-sum-t small { font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fk-sum-v { flex: none; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fk-go { width: 100%; min-height: 52px; white-space: normal; text-align: center; }
.fk-go[disabled] { opacity: .6; cursor: default; }
.fk-go .ico { flex: none; width: 18px; height: 18px; }

@media (max-width: 599.98px) {
  .fk { gap: 18px; }
  .fk-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fk-items { grid-template-columns: minmax(0, 1fr); }
  .fk-opsi { grid-template-columns: minmax(0, 1fr); }
  .fk-seg.is-tier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fk-it { padding: 12px; gap: 4px 10px; }
  /* (a phone keeps the foot low: the count of features and outlets only; the reckoning is in the readers' total) */
  .fk-foot { gap: 8px; padding-top: 10px; }
  .fk-sum-x { display: none; }
  .fk-go { min-height: 48px; }
  .fk-note { padding: 8px 10px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .fk-it.is-flash { animation: none; outline: 2px solid #fff; outline-offset: 2px; }
  .fk-it, .fk-pre, .fk-seg button, .fk-foot { transition: none; }
}

/* in the box of "Proyek saya": the step's padding, the box's round foot */
.px-racik { --fk-pad: 22px; --fk-r: 23px; }
.px-step-t { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.012em; outline: none; }
.px-racik .px-step-h { margin-top: 4px; font-size: var(--fs-sm); color: var(--ink-2); }
.px-racik-in { margin-top: 18px; }
.px-racik-in > .err { padding: 6px 0 2px; }
.px-box-bar { scroll-margin-top: calc(var(--px-bar) + 12px); }
@media (max-width: 599.98px) {
  .px-racik { --fk-pad: 16px; }
  /* the cashier's four quick starts wrap rather than scroll, so "Racik sendiri" is never past the edge */
  .px-chips.is-pos { flex-wrap: wrap; overflow: visible; width: auto; margin-inline: 0; padding-inline: 0; }
}
@media (pointer: coarse) { .px-chips button { min-height: 44px; } }

/* the start's sky (langit.js) in a layer of its own, as tall as the start is with its box closed (akun.js keeps
   --px-sky-h): a box that opens long (the features) neither stretches the light away from the question nor makes its
   canvas thousands of pixels tall */
.px-start { position: relative; isolation: isolate; overflow: clip; }
.px-sky.b-sky { position: absolute; inset: 0 0 auto; z-index: 0; height: var(--px-sky-h, min(100%, max(820px, 100vh))); max-height: 100%; pointer-events: none; }