/* Shared layout */
body,input,select,textarea,button { font-family:"Nunito",system-ui,sans-serif; }
body { background-image:linear-gradient(#fff9ef80,#fff9ef80),url("design/assets/motif-riak.svg"); background-size:auto,520px auto; font-size:16px; }
h1,h2,h3,.product-info strong { font-family:"Fredoka","Nunito",sans-serif; font-weight:500; }
h1 { font-size:clamp(1.65rem,3vw,2.1rem); } h2 { font-size:clamp(1.2rem,2vw,1.5rem); }
a { color:var(--action); text-underline-offset:3px; } a:visited { color:var(--action); }
a.button:visited { color:white; } a.button.secondary:visited { color:var(--ink); }
.store { width:100%; max-width:1120px; margin:0 auto; padding:26px 32px 48px; }
.top,.section-title { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.top { margin-bottom:22px; } .logo { width:100px; height:62px; display:block; object-fit:contain; border-radius:18px; }
.intro { margin:24px 0; } .intro p { max-width:65ch; }
.panel { margin:20px 0; } .grid > .panel { margin:0; }
.grid { gap:22px; margin:22px 0; align-items:start; }
.section-title { margin:0 0 18px; } .section-title h1,.section-title h2 { margin:0; }
.eyebrow { font-size:.78rem; font-weight:800; color:var(--muted); }
.text-button { background:transparent; border:0; color:var(--action); font:inherit; font-weight:800; cursor:pointer; min-height:44px; }
.button { font-size:.9rem; } .button.secondary { border-color:var(--line); }
input,select,textarea { min-width:0; max-width:100%; } .field { min-width:0; font-size:.9rem; }
.field textarea { width:100%; min-height:110px; padding:12px; border:1px solid var(--line); border-radius:12px; font:inherit; color:var(--ink); background:white; resize:vertical; }
input[type=checkbox],input[type=radio] { width:18px; height:18px; accent-color:var(--action); vertical-align:middle; flex:none; }
input[type=color] { width:100%; height:48px; padding:5px; cursor:pointer; }
input[type=file] { padding:7px; font-size:.8rem; }
input[type=file]::file-selector-button { padding:9px; margin-right:9px; border:0; border-radius:8px; background:var(--aqua); color:var(--ink); font:inherit; cursor:pointer; }
fieldset { min-width:0; margin:0; padding:16px; border:1px solid var(--line); border-radius:14px; display:grid; gap:14px; }
legend { font-size:.9rem; font-weight:800; padding:0 6px; }
[hidden] { display:none!important; }
.form-error { color:#8a3029; }
.notice { margin:0 0 16px; } .notice p { margin:0; } .notice p + p { margin-top:8px; }
.notice + .demo-notice { margin-top:0; }
.notice.form-error { background:#fff0e9; border-inline-start-color:#b9634c; } .notice.form-error p { color:#8a3029; } .span-full { grid-column:1/-1; }
/* Main navigation: inline on desktop, compact dock on phones. */
.dock { display:flex; align-items:center; gap:6px; margin:0 0 28px; padding:6px; border:1px solid var(--line); border-radius:17px; background:#fffefaeF; }
.dock a { display:flex; align-items:center; justify-content:center; flex:1; gap:8px; min-width:0; min-height:44px; padding:8px; color:var(--muted); border-radius:11px; text-decoration:none; font-size:.85rem; font-weight:800; }
.dock a[aria-current] { background:var(--aqua); color:var(--action); }
.dock a:hover { background:var(--cream); } .dock .icon { width:20px; height:20px; flex:none; }
/* Catalog */
.search { display:flex; align-items:center; gap:12px; margin:20px 0 28px; padding:0 15px; border:1.5px solid var(--ink); border-radius:15px; background:var(--paper); box-shadow:3px 4px 0 var(--coral); }
.search input { width:100%; min-height:48px; padding:8px 0; border:0; background:transparent; color:var(--ink); font:inherit; }
.categories { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:30px; }
.category { display:flex; align-items:center; gap:10px; min-width:0; padding:12px; text-align:left; border:1.5px solid var(--ink); border-radius:16px; background:var(--paper); color:var(--ink); font:inherit; cursor:pointer; }
.category[aria-pressed=true] { background:var(--aqua); box-shadow:2px 3px 0 var(--action); }
.category strong { font-size:.9rem; } .category small { display:block; color:var(--muted); font-size:.75rem; }
.category-mark { width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center; }
.category-mark img { width:100%; height:100%; object-fit:contain; border-radius:inherit; }
.products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:26px 22px; padding:8px 8px 20px; }
.product { --tilt:-1.4deg; display:flex; flex-direction:column; position:relative; min-width:0; padding:10px; border:1.5px solid var(--ink); border-radius:24px 24px 30px 23px; background:var(--card-color); color:var(--ink); text-decoration:none; box-shadow:0 6px 0 var(--paper),0 8px 0 var(--ink); transform:rotate(var(--tilt)); transition:transform .18s; }
.product:nth-child(2n) { --tilt:1.3deg; } .product:nth-child(3n) { --tilt:-.7deg; }
.product:visited { color:var(--ink); } .product:hover { transform:rotate(0) translateY(-3px); }
.product-art { width:100%; aspect-ratio:1.65; min-height:0; display:grid; place-items:center; overflow:hidden; border:1.5px solid var(--ink); border-radius:21px 17px 22px 17px; background:#fffefaef; }
.product-art img { width:100%; height:100%; max-height:170px; padding:15px; object-fit:contain; }
.product-art > span { font-family:"Fredoka",sans-serif; font-weight:500; font-size:3rem; }
.product-info { display:grid; gap:5px; padding:3px 3px 11px; text-align:center; }
.product-info small { color:var(--muted); font-size:.78rem; } .product-info strong { font-size:1.3rem; line-height:1.25; }
.product-info > span { font-size:.82rem; }
.card-stitches { display:block; width:80px; height:10px; margin:7px auto 0; background:linear-gradient(var(--ink),var(--ink)) left center/23px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) right center/23px 1px no-repeat; }
/* Product details */
.product-screen .store { max-width:1000px; }
.back-link { display:inline-flex; align-items:center; gap:9px; margin-bottom:22px; font-size:.9rem; font-weight:800; text-decoration:none; }
.back-link > span { width:36px; height:36px; display:grid; place-items:center; border:1.5px solid var(--ink); border-radius:11px; background:var(--coral); }
.product-title { display:flex; align-items:center; gap:15px; margin-bottom:18px; }
.product-title h1 { margin:0; } .app-avatar { display:grid; place-items:center; width:68px; height:68px; border:1.5px solid var(--ink); border-radius:20px; background:var(--card-color); font:2rem "Fredoka",sans-serif; flex:none; }
.app-avatar img { width:100%; height:100%; padding:10px; object-fit:contain; }
.variant-group { margin:24px 0 30px; } .group-title { display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.group-title h2 { margin:0 0 4px; } .group-title p { margin:0; font-size:.85rem; }
.profile-head { display:grid; place-items:center; width:68px; height:68px; flex:none; border-radius:50%; background:var(--variant-color,var(--coral)); }
.profile-head img { width:70%; height:70%; } .group-title .profile-head { width:46px; height:46px; background:#f9d0dc; } .group-title .private { background:var(--mint); }
.variant-list { --variant-gap:14px; position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--variant-gap); padding-left:18px; }
.variant-list.has-thread::before { content:""; position:absolute; width:1.5px; left:5px; top:var(--thread-top); height:var(--thread-height); background:#8eabb5; }
.variant-card { position:relative; min-width:0; padding:15px 17px; border:1.5px solid var(--ink); border-radius:21px; background:#fffefaf7; box-shadow:0 3px 0 #2334510b; }
.variant-card::before { content:""; position:absolute; left:-14px; top:50%; width:19px; height:1.5px; background:var(--ink); transform:translateY(-50%); }
.variant-card::after { content:""; position:absolute; left:-5px; top:50%; width:8px; height:8px; border-radius:50%; background:var(--ink); transform:translateY(-50%); }
.variant-heading { display:grid; grid-template-columns:52px minmax(0,1fr) auto 40px; align-items:center; gap:13px; }
.variant-card > summary.variant-heading { min-height:52px; padding:0; margin:0; background:transparent; list-style:none; cursor:pointer; }
.variant-card > summary.variant-heading::-webkit-details-marker { display:none; }
.variant-heading .profile-head { width:52px; height:52px; }
.variant-copy { display:block; min-width:0; }
.variant-copy > strong { display:block; margin:0 0 4px; font-size:.96rem; font-weight:850; line-height:1.4; overflow-wrap:break-word; }
.variant-description { display:block; color:var(--muted); font-size:.82rem; font-weight:400; line-height:1.45; }
.variant-price { display:grid; align-content:center; gap:5px; text-align:right; }
.variant-price strong { font-size:.95rem; white-space:nowrap; font-weight:850; }
.plus,.variant-edit { width:40px; height:40px; display:grid; place-items:center; border:1.5px solid var(--ink); border-radius:12px; background:var(--variant-color); color:var(--ink); }
.plus svg,.variant-edit svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.plus svg { transition:transform 220ms cubic-bezier(.2,.7,.2,1); }
.variant-disclosure.is-expanded .plus svg,.variant-disclosure[open]:not(.is-enhanced) .plus svg { transform:rotate(45deg); }
.variant-disclosure.is-animating { overflow:hidden; }
.variant-purchase { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:14px; margin:14px 0 0; padding:14px 0 0; border-top:1px dashed var(--line); }
.quantity-control { display:flex; width:132px; border:1px solid var(--ink); border-radius:11px; overflow:hidden; }
.quantity-control button { width:40px; flex:none; border:0; background:var(--variant-color); color:var(--ink); font:1.4rem "Nunito",sans-serif; cursor:pointer; }
.quantity-control input { width:52px; padding:5px; border:0; border-radius:0; text-align:center; appearance:textfield; -moz-appearance:textfield; }
.quantity-control input::-webkit-inner-spin-button,.quantity-control input::-webkit-outer-spin-button { appearance:none; margin:0; }
.check-label { display:flex; align-items:center; gap:10px; font-size:.9rem; }
/* Login */
.login-screen { background-color:#fffdf8; background-image:radial-gradient(ellipse at 5% 67%,#ffedb7 0 18%,transparent 18.2%),radial-gradient(ellipse at 90% 48%,#d9f0e6 0 19%,transparent 19.2%),radial-gradient(ellipse at 85% 100%,#f9d0dc 0 18%,transparent 18.2%),url('design/assets/motif-staf.svg'); background-size:auto,auto,auto,450px; }
.login-screen .store { max-width:540px; min-height:100vh; padding:25px 24px 65px; }
.back-button { width:46px; height:46px; padding:0; background:#f9bc88!important; border:2px solid var(--ink)!important; border-radius:14px; box-shadow:2px 3px 0 var(--ink); }
.login-intro { position:relative; text-align:center; margin:52px 0 48px; }
.login-intro h1 { font-family:"Nunito",sans-serif; font-weight:900; font-size:clamp(1.45rem,5.2vw,1.9rem); }
.login-confetti { position:absolute; display:block; left:12%; top:-26px; width:9px; height:9px; background:#c8a9dd; transform:rotate(30deg); box-shadow:130px -5px 0 #ffdf81,270px 20px 0 #80c9da; }
.login-card { position:relative; isolation:isolate; padding:36px 30px 30px; border:2px solid var(--ink); border-radius:44px 38px 45px 35px; background:var(--paper); box-shadow:4px 7px 0 var(--paper),6px 9px 0 var(--ink); }
.login-card::before,.login-card::after { content:""; position:absolute; border:2px solid var(--ink); border-radius:45px; background:var(--paper); }
.login-card::before { inset:-13px 12px -12px; transform:rotate(-2deg); z-index:-1; } .login-card::after { inset:-25px 29px -23px; transform:rotate(2deg); z-index:-2; }
.login-card .field { font-size:1.05rem; gap:12px; } .login-card .field input { min-height:59px; padding:14px 16px; border:0; border-bottom:2px dashed var(--ink); border-radius:15px 15px 0 0; background:#f3f2ef; }
.coral-action { margin-top:16px; min-height:57px; background:#f7b985; border:2px solid var(--ink); box-shadow:3px 5px 0 var(--paper),5px 7px 0 var(--ink); color:var(--ink); font-weight:850; }
.google-login { display:block; width:100%; margin-top:32px; padding:12px; background:#f9d0dc; border:1.5px solid var(--ink); border-radius:14px; box-shadow:2px 4px 0 var(--ink); }
.google-login img { display:block; width:190px; max-width:100%; margin:auto; } .google-pending { opacity:.65; }
.setup-note,.login-footnote { margin:18px 0 0; text-align:center; font-size:.8rem; } .login-footnote { margin-top:27px; }
/* Owner and admin workspace */
.staff-menu-toggle { display:none; }

.staff-screen .store { max-width:1220px; }
.staff-intro { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:15px; padding:24px; border:1px solid var(--line); border-radius:23px; background:#fffefae8; }
.staff-intro h1 { margin-top:6px; } .staff-intro p { margin:0; }
.section-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:22px 0 26px; }
.staff-menu { --menu-color:#def3f3; display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 16px; border:1.5px solid var(--line); border-radius:13px; background:color-mix(in srgb,var(--menu-color) 55%,var(--paper)); text-decoration:none; color:var(--ink); font-weight:850; font-size:.85rem; box-shadow:0 3px 0 #2334510c; }
.menu-pesanan,.menu-admin { --menu-color:#d9f0e6; } .menu-topup,.menu-penarikan { --menu-color:#ffedb7; } .menu-stok,.menu-kategori { --menu-color:#e6d7f8; } .menu-katalog,.menu-pengaturan { --menu-color:#f7c9b9; }
.menu-dot { width:10px; height:10px; border-radius:50%; background:var(--menu-color); border:1px solid #23345144; }
.staff-menu[aria-current] { background:var(--menu-color); color:var(--ink); border-color:var(--ink); box-shadow:2px 3px 0 var(--ink); }
.staff-menu:hover { background:var(--menu-color); }
.staff-workspace > .panel { margin-top:0; } .staff-screen .panel h2 { font-size:1.3rem; margin-bottom:18px; }
.history-row { min-width:0; padding:16px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; font-size:.9rem; }
summary { min-height:44px; padding:10px; border-radius:9px; background:#f4f8f6; cursor:pointer; font-weight:800; }
details[open] > summary { margin-bottom:16px; }
.editor-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:18px; padding:18px 0; }
.editor-form > .field { font-size:.85rem; } .editor-form > .button { grid-column:1/-1; justify-self:start; min-width:160px; }
.editor-form > label:not(.field) { display:flex; align-items:center; gap:9px; min-height:44px; font-size:.85rem; }
.segmented { display:flex; flex-wrap:wrap; gap:9px; } .segmented label { position:relative; flex:1; min-width:90px; }
.segmented input { position:absolute; opacity:0; } .segmented span { display:block; padding:10px 18px; border:1px solid var(--ink); border-radius:12px; background:var(--paper); text-align:center; font-weight:800; cursor:pointer; }
.segmented input:checked + span { background:var(--mint); box-shadow:2px 3px 0 var(--ink); } .segmented input:focus-visible + span { outline:3px solid var(--focus); outline-offset:3px; }
.variant-editor { margin:12px 0; padding:14px; background:#f7f7f0; border:1px solid var(--line); border-radius:14px; }
.staff-screen .toolbar > input { min-height:44px; padding:10px; border:1px solid var(--line); border-radius:10px; font:inherit; }
.activity-row { padding:16px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.activity-row > div { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; } .activity-row small { color:var(--muted); } .activity-row p { margin:6px 0 0; font-size:.85rem; }
/* Wallet, invoice, and histories */
.cart-screen .store,.order-screen .store,.orders-screen .store,.account-screen .store { max-width:900px; }
.cart-item p { margin:0 0 7px; font-size:.9rem; line-height:1.5; }
.cart-item .text-button { min-height:36px; padding:4px 0; }
.wallet-forms h2 { margin-bottom:0; }

.balance-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .balance-grid h2 { font-size:1.1rem; } .balance-grid strong { font-size:1.3rem; }
.balance-grid .panel:nth-child(1) { background:#eaf6f1; } .balance-grid .panel:nth-child(2) { background:#fff4d4; } .balance-grid .panel:nth-child(3) { background:#f0e9fa; }
.wallet-forms { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; margin:26px 0; }
.order-link { display:block; color:var(--ink); text-decoration:none; } .order-link .badge { margin-left:10px; }
.access { padding:16px; border-radius:12px; background:var(--mint); white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; }
.pagination { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; } .pagination a,.pagination span { display:grid; place-items:center; min-width:40px; min-height:40px; padding:6px 12px; border:1px solid var(--line); border-radius:9px; text-decoration:none; background:var(--paper); } .pagination [aria-current] { background:var(--aqua); }
/* Status and actions share spacing in every transaction state. */
.transaction-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:14px; }
.transaction-actions > form { margin:0; }
.transaction-actions > .badge { flex:none; margin:0; }
.transaction-row > p { margin:7px 0 0; }
.transaction-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 14px; margin-bottom:10px; }
.order-link .transaction-heading .badge { margin:0; }
.order-summary .order-link:hover strong { text-decoration:underline; }
.order-proof-summary { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.order-proof-summary > p { margin:0; color:var(--muted); font-size:.83rem; }
.orders-screen .order-proof-summary h2 { margin:0 0 7px; font:800 .87rem "Nunito",sans-serif; }
.order-proof-summary ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.order-proof-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 14px; padding:8px 10px; background:#f4f8f8; border-radius:10px; overflow-wrap:anywhere; font-size:.85rem; }
.order-proof-row small { display:block; margin-top:2px; color:var(--muted); }
.order-proof-actions { display:flex; flex-wrap:wrap; align-items:center; gap:5px 10px; }
.order-proof-actions .badge { margin:0; font-size:.77rem; }
.order-proof-actions a { display:inline-flex; align-items:center; min-height:36px; font-weight:800; }
.history-row > form { margin-top:14px; }
.stock-availability { display:block; margin-top:4px; color:#326458; font-size:.76rem; line-height:1.4; font-weight:750; }
.stock-availability.is-empty { color:#8a5544; }
.catalog-stock { color:#326458; font-size:.74rem!important; font-weight:750; }
.product.is-sold-out { opacity:.62; cursor:not-allowed; filter:grayscale(.3); }
.product.is-sold-out:hover { transform:rotate(var(--tilt)); }
.variant-card.is-sold-out { background:#f2f1ec; box-shadow:none; cursor:not-allowed; }
.variant-card.is-sold-out .variant-copy > strong,.variant-card.is-sold-out .variant-price { color:#71808e; }
.variant-card.is-sold-out .profile-head,.variant-card.is-sold-out .plus { opacity:.5; }
.variant-card.is-sold-out button { cursor:not-allowed; }
.balance-explainer { margin:0 0 22px; border:1px solid var(--line); border-radius:13px; background:var(--paper); }
.balance-explainer > summary { margin:0!important; padding:12px 14px; font-size:.85rem; background:transparent; }
.balance-explanation { padding:4px 14px 12px; } .balance-explanation p { font-size:.85rem; margin:8px 0; }
.ledger-intro { font-size:.85rem; }
.ledger-entry { padding:17px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.ledger-heading { display:flex; justify-content:space-between; align-items:start; flex-wrap:wrap; gap:6px 14px; margin-bottom:5px; }
.ledger-heading > strong { font-size:.95rem; }
.ledger-amount { font-weight:850; white-space:nowrap; font-size:.95rem; }
.ledger-amount.is-debit { color:#8a493d; } .ledger-amount.is-credit { color:#326458; }
.ledger-entry > small { color:var(--muted); font-size:.75rem; }
.ledger-entry p { margin:6px 0; font-size:.85rem; } .ledger-entry > a { font-size:.8rem; font-weight:750; }
/* Responsive breakpoints */
@media (max-width:900px) { .section-nav { grid-template-columns:repeat(4,minmax(0,1fr)); } .products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 24px; } }
@media (max-width:640px) {
 .store { padding:18px 18px calc(100px + env(safe-area-inset-bottom)); }
 .top { margin-bottom:20px; } .top .button { font-size:.8rem; padding:8px 12px; } .logo { width:86px; height:54px; }
 .dock { position:fixed; z-index:20; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:2px; padding:5px; margin:0; border-color:#b8cdd3; border-radius:20px; background:#fffefaF5; box-shadow:0 6px 22px #23345120; backdrop-filter:blur(12px); }
 .dock a { display:flex; flex-direction:column; gap:4px; min-height:54px; padding:5px 1px; border-radius:14px; font-size:.7rem; line-height:1.2; } .dock .icon { width:21px; height:21px; }
 .categories { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .category { padding:10px; } .category strong { font-size:.85rem; }
 .section-title { gap:8px; } .section-title .eyebrow { font-size:.7rem; }
 .product-intro { margin:16px 0 20px; }
 .product-title { gap:12px; margin-bottom:10px; } .app-avatar { width:46px; height:46px; border-radius:14px; font-size:1.55rem; }
 .product-title h1 { font-size:1.45rem; line-height:1.2; } .product-title .eyebrow { font-size:.72rem; }
 .product-intro > p { font-size:.875rem; line-height:1.5; margin:0; max-width:48ch; }
 .back-link { font-size:.8rem; margin-bottom:16px; } .back-link > span { width:32px; height:32px; }
 .variant-heading { grid-template-columns:40px minmax(0,1fr) auto 36px; gap:9px; }
 .variant-heading .profile-head { width:40px; height:40px; }
 .variant-card { padding:13px 12px; border-radius:19px; }
 .variant-card > summary.variant-heading { min-height:48px; }
 .variant-copy > strong { font-size:.875rem; line-height:1.35; }
 .variant-description { font-size:.75rem; line-height:1.4; }
 .variant-price strong { font-size:.875rem; } .variant-price .badge { font-size:.64rem; }
 .plus,.variant-edit { width:36px; height:38px; border-radius:11px; }
 .plus svg,.variant-edit svg { width:20px; height:20px; }
 .group-title { gap:10px; } .group-title h2 { font-size:1.15rem; } .group-title p { font-size:.78rem; line-height:1.45; }
 .group-title .profile-head { width:36px; height:36px; }
 .variant-purchase { grid-template-columns:minmax(0,1fr); gap:12px; } .variant-purchase > .button { width:100%; }
 .editor-form { grid-template-columns:1fr; gap:16px; } .staff-intro { position:relative; display:block; padding:16px; } .staff-intro h1 { font-size:1.4rem; } .staff-intro p { font-size:.85rem; line-height:1.5; } .staff-intro > .badge { position:absolute; top:13px; right:13px; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem; } .staff-screen .panel { padding:17px; }
 .staff-menu-toggle.is-ready { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:54px; padding:10px 14px; margin:18px 0; border:1.5px solid var(--ink); border-radius:13px; background:var(--menu-color,var(--aqua)); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
 .staff-menu-toggle small { display:block; font-size:.7rem; font-weight:500; } .staff-menu-toggle strong { font-size:.9rem; }
 .staff-menu-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; transition:transform 180ms; } .staff-menu-toggle[aria-expanded=true] svg { transform:rotate(180deg); }
 .section-nav[data-collapsed=true] { display:none; }
 .section-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .staff-menu { justify-content:flex-start; font-size:.78rem; padding:10px 12px; }
 .staff-screen .toolbar { align-items:stretch; } .staff-screen .toolbar .button { flex-grow:1; }
 .balance-grid { gap:9px; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; } .balance-grid .panel { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:10px; padding:13px 10px; } .balance-grid h2 { margin:0; font-size:.76rem; line-height:1.35; font-family:"Nunito",sans-serif; font-weight:800; } .balance-grid strong { font-size:.86rem; white-space:nowrap; letter-spacing:-.025em; }
 .wallet-forms { grid-template-columns:1fr; gap:18px; }
 .login-screen .store { padding:20px 24px 65px; } .login-intro { margin:45px 0; } .login-card { padding:30px 24px; } .login-confetti { left:8%; box-shadow:110px -5px 0 #ffdf81,220px 20px 0 #80c9da; }
 .activity-row > div { display:grid; gap:4px; }
}
@media (max-width:520px) {
 .products { grid-template-columns:minmax(0,1fr); gap:26px; max-width:430px; margin:0 auto; padding:7px 8px 18px; }
 .product { display:grid; grid-template-columns:104px minmax(0,1fr); align-items:center; gap:15px; padding:12px; border-radius:22px; }
 .product-art { aspect-ratio:1; border-radius:15px; } .product-art img { max-height:104px; padding:12px; }
 .product-art > span { font-size:2.75rem; }
 .product-info { text-align:left; gap:5px; padding:6px 2px; } .product-info strong { font-size:1.3rem; } .product-info small { font-size:.72rem; }
 .product-info > span { font-size:.81rem; } .card-stitches { display:none; }
 .product::after { content:""; position:absolute; bottom:-28px; left:50%; width:5px; height:23px; border:1.5px solid var(--ink); border-radius:5px; background:var(--paper); z-index:2; transform:translateX(-50%) rotate(calc(-1 * var(--tilt))); box-shadow:0 -4px 0 -1px var(--ink),0 4px 0 -1px var(--ink); }
 .product.last-visible::after { display:none; }
 .categories { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:22px; }
 .category { flex-direction:column; align-items:flex-start; padding:10px; gap:7px; } .category-mark { width:30px; height:30px; }
 .category strong { font-size:.84rem; } .category small { font-size:.75rem; }
 .search { margin:12px 0 20px; } .section-title { margin-bottom:12px; } .section-title h1,.section-title h2 { font-size:1.2rem; }
}
@media (max-width:360px) {
 .store { padding-left:14px; padding-right:14px; }
 .product { grid-template-columns:86px minmax(0,1fr); gap:12px; padding:10px; } .product-art img { max-height:86px; }
 .product-info strong { font-size:1.15rem; } .product-info > span { font-size:.75rem; }
 .variant-heading { grid-template-columns:34px minmax(0,1fr) 34px; gap:8px; }
 .variant-heading .profile-head { width:34px; height:34px; grid-row:1/3; }
 .variant-copy { grid-column:2; } .variant-price { grid-column:2; grid-row:2; justify-self:start; text-align:left; }
 .variant-heading .plus,.variant-heading .variant-edit { grid-column:3; grid-row:1/3; }
 .variant-copy > strong { font-size:.84rem; } .variant-description { font-size:.74rem; }
 .dock a { font-size:.66rem; } .section-title .eyebrow { display:none; }
}
@media (prefers-reduced-motion:reduce) { .product,.plus svg { transition:none; } }
@media print { .dock,.top,.section-nav,button,form { display:none!important; } body { background:white; } .panel { box-shadow:none; break-inside:avoid; } .store { padding:0; } }
.demo-notice { margin:0 0 14px; padding:7px 10px; border:1px dashed #b8cdd3; border-radius:12px; background:#fffefaD9; font-size:.78rem; }

.history-date { display:block; font-size:.75rem; color:var(--muted); margin-top:5px; }

.managed-account { padding:18px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.managed-account > p { font-size:.85rem; margin:6px 0 12px; }
.account-actions { margin-top:10px; }
.account-actions > summary { list-style:none; }
.account-actions > summary::-webkit-details-marker { display:none; }
.account-actions > form.stack { margin-top:10px; }
.button.account-remove { background:#fbe5de; color:#812c25; border-color:#d9a79c; }
.menu-penghapusan { --menu-color:#fbe5de; }
.support-links,.support-heading { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.support-links { margin:12px 0; }
.support-links [aria-current] { background:var(--aqua); border-color:var(--action); }
.support-heading { justify-content:space-between; }
.support-heading h1,.support-heading h2 { margin:0; }
.support-item { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.support-message { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; }
.support-attachment { gap:6px; }
.variant-terms { display:block; color:var(--muted); font-size:.76rem; margin-top:4px; }
.whatsapp-launch {
    position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:21;
    display:grid; place-items:center; width:50px; height:50px; padding:0;
    color:#fff; background:#157b50; border:1px solid #12583d; border-radius:50%;
    box-shadow:0 5px 16px #142c4340; cursor:pointer;
}
.whatsapp-launch:hover { background:#125f41; }
.whatsapp-launch svg { width:28px; height:28px; }
.whatsapp-dialog { inset:auto 18px calc(80px + env(safe-area-inset-bottom)) auto; margin:0; width:min(355px,calc(100% - 36px)); }
.whatsapp-contact { display:flex; gap:10px; align-items:center; justify-content:space-between; padding:10px 12px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:#e6f5ed; text-decoration:none; overflow-wrap:anywhere; }
.whatsapp-contact small { display:block; }
.whatsapp-contact.is-disabled { background:#eee; color:#626772; }
@media(max-width:640px) {
    .whatsapp-launch { bottom:calc(84px + env(safe-area-inset-bottom)); }
    .whatsapp-dialog { bottom:calc(144px + env(safe-area-inset-bottom)); max-height:calc(100% - 160px - env(safe-area-inset-bottom)); }
}
@media print { .whatsapp-launch,.whatsapp-dialog { display:none!important; } }
.account-status-editor > summary { display:flex; flex-wrap:wrap; align-items:center; gap:9px; font-size:.85rem; }
.status-edit-hint { margin-left:auto; color:var(--action); font-size:.8rem; }
.account-status-editor .editor-form p { font-size:.85rem; margin:0; }
.readonly-notice { background:#fff0d5; } .readonly-notice p { font-size:.85rem; margin-top:6px; }
.readonly-form :disabled { cursor:not-allowed; opacity:.65; }

.category-create { margin-bottom:24px; } .category-create > summary.button { width:max-content; list-style:none; } .category-create > summary::-webkit-details-marker { display:none; } .category-list-title { font-size:1.1rem; margin-bottom:12px; }

.confirm-dialog {
    width:min(420px, calc(100% - 32px)); max-height:calc(100% - 32px); padding:24px;
    color:var(--ink); background:var(--paper); border:1.5px solid var(--ink);
    border-radius:22px; box-shadow:0 7px 0 var(--aqua);
}
.confirm-dialog::backdrop { background:#1d2d4780; }
.confirm-dialog h2,.confirm-dialog p { margin:0; }
.confirm-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.confirm-actions .button { width:auto; }

.stock-picker { position:relative; z-index:2; }
.staff-screen .stock-picker h2,.staff-screen .stock-history h2,.stock-account h3 { margin:0; }
.stock-picker p,.stock-history h2 + p,.stock-account h3 + p { margin:4px 0 0; }
.stock-picker-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.stock-apps { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,185px),1fr)); gap:14px; }
.stock-app {
    display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:76px; padding:13px 16px;
    border:1px solid var(--ink); border-radius:16px; color:var(--ink); text-decoration:none;
    background:var(--aqua); background:color-mix(in srgb,var(--stock-app-color,var(--aqua)) 65%,var(--paper));
    box-shadow:0 4px 0 var(--ink); overflow-wrap:anywhere;
}
.stock-app:visited { color:var(--ink); }
.stock-app:is(:hover,:focus-visible) { background:var(--aqua); }
.stock-app strong { font-family:"Fredoka","Nunito",sans-serif; font-size:1.2rem; font-weight:500; }
.stock-app svg { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.stock-history { display:grid; align-items:start; }
.stock-history { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.stock-history > .panel { margin:0; }
.stock-field-label { display:block; font-size:.85rem; font-weight:800; margin-bottom:5px; }
.stock-select { position:relative; }
.stock-select > summary {
    display:flex; gap:8px; align-items:center; justify-content:space-between; list-style:none;
    min-height:46px; padding:9px 12px; background:var(--aqua); border:1px solid var(--line);
    border-radius:12px; color:var(--ink); cursor:pointer; font-weight:800; overflow-wrap:anywhere;
}
.stock-select > summary::-webkit-details-marker,.stock-add > summary::-webkit-details-marker { display:none; }
.stock-select > summary::after {
    content:""; width:7px; height:7px; border:solid currentColor; border-width:0 2px 2px 0;
    transform:rotate(45deg); flex:none; margin:0 4px 4px 0;
}
.stock-select[open] > summary::after { transform:rotate(225deg); margin-bottom:0; }
.stock-options {
    position:absolute; inset-inline:0; top:calc(100% + 5px); z-index:2; padding:7px;
    background:var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow:0 7px 18px #23345122;
}
.stock-options input { width:100%; margin-bottom:5px; }
.stock-select-inline .stock-options { position:static; margin-top:6px; box-shadow:none; }
.stock-option-list { max-height:225px; overflow:auto; }
.stock-option-list > a {
    display:grid; gap:2px; padding:8px; border-radius:8px; min-height:44px; color:var(--ink);
    font-size:.85rem; text-decoration:none; overflow-wrap:anywhere;
}
.stock-option-list > a:is(:hover,:focus-visible,[aria-current]) { background:var(--aqua); }
.stock-option-list > p { padding:6px 8px; font-size:.85rem; }
.stock-option-list small,.stock-event small { color:var(--muted); }
.stock-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(124px,1fr)); gap:8px; margin:0; }
.stock-stat { display:grid; align-content:space-between; gap:4px; border-radius:12px; padding:9px 12px; background:#edf4fa; }
.stock-stat dt { font-size:.78rem; font-weight:800; }
.stock-stat dd { margin:0; font-size:1.35rem; font-weight:900; }
.stock-stat-available { background:#d9f0e7; }
.stock-stat-ending { background:#fff0c9; }
.stock-stat-inspection { background:#f8dfd5; }
.stock-add > form { margin-top:12px; }
.stock-add > summary { list-style:none; }
.stock-add > summary span { font-size:1.2em; line-height:1; }
.stock-account { border:1px solid var(--line); border-radius:14px; padding:14px; min-width:0; }
.stock-account-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.stock-account-link {
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
    padding:12px 14px; border:1px solid var(--line); border-radius:14px; color:var(--ink);
    text-decoration:none; overflow-wrap:anywhere;
}
.stock-account-link:visited { color:var(--ink); }
.stock-account-link:is(:hover,:focus-visible) { background:var(--aqua); }
.stock-account-link small { display:block; color:var(--muted); }
.stock-slot > .notice { flex-basis:100%; margin:0; }
#stok-pilihan,#stok-detail,#stok-akun,#stok-tambah,.stock-slot[id],.order-screen article[id] { scroll-margin-top:16px; }
.stock-access-dialog { width:min(520px,calc(100% - 32px)); }
.stock-access-dialog pre { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.stock-slot { display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap; padding:9px 0 0; border-top:1px dashed var(--line); }
.stock-event { display:grid; gap:3px; font-size:.85rem; min-width:0; overflow-wrap:anywhere; }
.stock-slot-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.stock-slot-actions .button { width:auto; }
.stock-pages { display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:.8rem; }
.stock-pages a { font-weight:800; }
@media(max-width:640px) {
    .stock-history { grid-template-columns:1fr; }
    .stock-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .confirm-dialog { padding:18px; }
}