/* Account pages (loop 12): masuk.html and akun-saya.html. Tokens only (tokens.css). Spec: .zyro/design/login-dashboard-spec.md */

[hidden]{display:none!important}
.light{--focus:var(--ink)}
.btn-quiet-inv{background:transparent;color:var(--ink-inv);box-shadow:inset 0 0 0 2px var(--ink-inv-2)}
@media (hover:hover) and (pointer:fine){.btn-quiet-inv:hover{background:var(--night-2);box-shadow:inset 0 0 0 2px var(--ink-inv-2)}}
.btn-quiet-inv:active{box-shadow:inset 0 0 0 2px var(--ink-inv-2)}
.btn-quiet-inv:disabled,.btn-quiet-inv[aria-disabled="true"]{background:transparent;color:var(--ink-inv-2);box-shadow:inset 0 0 0 2px var(--ink-inv-2);transform:none;cursor:progress}
.btn[aria-busy="true"]:disabled,.btn[aria-busy="true"][aria-disabled="true"]{cursor:progress}

/* ---------- /masuk.html ---------- */
.login-main{background:var(--night);color:var(--ink-inv);padding-block:72px 24px}
.login-main:focus{outline:none}
/* UI-09: static stars + skyline edge, decorative only (aria-hidden); no motion */
.login-main{position:relative}
.login-main>.login-grid{position:relative;z-index:1}
.login-main>.sky-live{margin-top:24px;margin-bottom:clamp(28px,3.4vw,48px)}
.login-stars{position:absolute;left:0;top:0;width:100%;height:min(100%,300px);opacity:.6;pointer-events:none}
.login-edge{position:absolute;left:0;bottom:0;width:100%;height:clamp(28px,3.4vw,48px);display:block;fill:var(--night-2);transform:scaleY(-1);pointer-events:none}
.login-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"head panel" "list panel" "pay panel";grid-template-rows:auto auto 1fr;column-gap:56px;row-gap:32px;align-items:start}
.login-grid>*{min-width:0}
.login-head{grid-area:head}
.login-head h1{font-weight:800;font-size:clamp(1.875rem,1.2rem + 2.6vw,3.25rem);line-height:1.06;letter-spacing:-.035em}
.login-head .lead{margin-top:16px;max-width:32em;font-size:var(--fs-lead);color:var(--ink-inv-2)}
.login-list{grid-area:list}
.login-list h2,.pay-panel h2{font-weight:700;font-size:1.25rem;line-height:1.3;letter-spacing:-.01em}
.login-list ul{margin:14px 0 0;padding-left:22px;display:grid;gap:10px;max-width:34em}
.login-list li::marker{color:var(--orange)}
.pay-panel{grid-area:pay;background:var(--forest);color:var(--ink-inv);border-radius:var(--r-card);padding:24px;max-width:38em}
.pay-panel p{margin-top:10px;color:var(--ink-inv)}
.pay-panel a{display:inline-block;margin-top:6px;padding-block:10px;color:var(--ink-inv);font-weight:700;text-underline-offset:4px}
.signin-panel{grid-area:panel;background:var(--night-2);border-radius:var(--r-card);padding:32px;width:100%;max-width:28rem;justify-self:end}
.sp-vault{width:96px;margin-bottom:8px}
.sp-vault .vm{width:100%;height:auto}
.signin-panel h2{font-weight:800;font-size:1.5rem;line-height:1.2;letter-spacing:-.025em}
.sp-expired{margin-top:16px;background:var(--mint-tint);color:var(--ink);border-radius:14px;padding:12px 16px}
.sp-fail{margin-top:16px;background:var(--error-tint);color:var(--rust-text);border-radius:12px;padding:12px 16px;font-weight:600}
.sp-body{margin-top:20px;display:grid;gap:20px;min-height:220px;align-content:start}
.zy-dev .sp-body{min-height:26.5rem}
.sp-body.is-msg,.zy-dev .sp-body.is-msg{min-height:0}
.sp-loading{margin-top:20px;display:flex;align-items:center;gap:16px;min-height:220px;align-content:start}
.sp-loading:not([hidden])+.sp-body{display:none}
.sp-loading .vm{width:56px;height:auto;flex:none}
.sp-loading p{font-weight:600}
.sp-block{min-width:0}
.sp-block h3{font-weight:700;font-size:1rem;line-height:1.3;letter-spacing:-.01em}
.sp-block h3:focus{outline:none}
.sp-info p{margin-top:8px;color:var(--ink-inv-2);overflow-wrap:anywhere}
.sp-info p .tel{color:var(--ink-inv)}
.sp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.g-slot{min-height:56px;display:flex;align-items:center;padding-block:8px}
.g-status{margin-top:4px;color:var(--ink-inv-2);font-size:.9375rem}
.g-status:empty{display:none}
.sp-note{margin-top:12px;color:var(--ink-inv-2);font-size:.875rem;line-height:1.5}
.sp-note a{display:inline-block;padding-block:10px;color:var(--ink-inv);font-weight:600;text-underline-offset:3px}
.dev-block{background:var(--orange-tint);color:var(--ink);border-radius:14px;padding:16px 20px}
.dev-block h3{color:var(--ink)}
.dev-block p{margin-top:6px;color:var(--ink-2);font-size:.9375rem}
.dev-list{display:grid;gap:8px;margin-top:14px}
.dev-list .btn{width:100%;white-space:normal;text-align:center;line-height:1.25;padding-block:8px}
@media (max-width:899px){
  .login-main{padding-block:32px 0}
  .login-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "panel" "list" "pay";grid-template-rows:none;row-gap:28px}
  .signin-panel{max-width:none;justify-self:stretch;padding:24px 20px}
}
@media (max-width:599px){.sp-vault{display:none}}

/* ---------- /akun-saya.html: head band ---------- */
.acct-band{position:relative;background:var(--night);color:var(--ink-inv);padding-block:28px 0}
/* UI-09: static world layer (stars + pixel skyline edge), decorative, no motion, never behind the controls */
.acct-band>.wrap{position:relative;padding-bottom:16px}
.acct-band .stars{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.acct-band .edge{display:block;width:100%;height:clamp(28px,3.4vw,48px);fill:var(--paper-2);transform:scaleY(-1);margin-bottom:-1px}
.acct-band-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px}
.acct-who{flex:1 1 20em;min-width:0}
.acct-band h1{font-weight:800;font-size:clamp(1.75rem,1.3rem + 2vw,2.75rem);line-height:1.1;letter-spacing:-.03em}
.acct-id{margin-top:10px;color:var(--ink-inv-2);font-weight:500;font-size:.9375rem;overflow-wrap:anywhere}
.acct-id strong{color:var(--ink-inv);font-weight:700;display:inline-block;max-width:100%;vertical-align:bottom;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* one line max: an 80-char displayName must not push the page down (full name stays in the Profil tab) */
.acct-out{flex:none;max-width:100%}
.logout-err{margin-top:8px;background:var(--night-2);color:var(--ink-inv);border-radius:12px;padding:8px 12px;font-size:.9375rem}
@media (max-width:599px){.acct-band{padding-block:24px 0}}

.acct-main{background:var(--paper-2);color:var(--ink);padding-block:40px 64px;min-height:60vh}
.acct-main:focus{outline:none}
/* Signed in (hint set before paint): main reserves one screen so the footer starts below the fold and never shifts into view while /me and /orders load (loop 22 AC5). */
.zy-hint .acct-main{min-height:100vh;min-height:100svh}
/* Same reservation for the band: who line, Keluar and the tabs take their space before /me answers (invisible, not focusable). */
.zy-hint .acct-id[hidden]{display:block!important;visibility:hidden;min-height:3em}
.zy-hint .acct-out[hidden]{display:block!important;visibility:hidden}
.zy-hint .acct-tabs[hidden]{display:flex!important;visibility:hidden}
.acct-main :is(h2,h3,h4):focus{outline:none}
.acct-main :is(h2,h3,h4):focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.acct-main :is(h1,h2,h3,h4)[data-prog]:focus,.acct-main :is(h1,h2,h3,h4)[data-prog]:focus-visible,.acct-band h1[data-prog]:focus,.acct-band h1[data-prog]:focus-visible{outline:none}

/* whole-page state panel */
.acct-state{display:flex;flex-wrap:wrap;align-items:center;gap:24px 32px;background:var(--paper);border-radius:var(--r-card);padding:32px;max-width:52rem}
.acct-state .st-vault{width:96px;flex:none}
.acct-state .st-vault .vm{width:100%;height:auto}
.st-text{flex:1 1 20em;min-width:0}
.st-text h2{font-weight:800;font-size:1.5rem;line-height:1.2;letter-spacing:-.025em}
.st-text p{margin-top:10px;max-width:34.67em;color:var(--ink-2)}
.st-text .st-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;align-items:center}
.st-text .st-act .st-alt{flex:1 1 100%;margin-top:4px;color:var(--ink-2);font-size:.9375rem}

/* master-detail */
.acct-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.acct-grid>*{min-width:0}
@media (min-width:900px){.acct-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.list-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.list-head h2{font-weight:800;font-size:1.5rem;line-height:1.2;letter-spacing:-.025em}
.list-meta{margin-top:8px;color:var(--ink-2);font-size:.875rem}
.orders{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.order-row{touch-action:manipulation;display:grid;gap:4px;align-content:center;min-height:8.9375rem;padding:16px 20px;background:var(--paper);border-radius:var(--r-tile);color:var(--ink);text-decoration:none;transition:transform var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.order-row:hover{transform:translateY(-2px)}}
.order-row:active{transform:translateY(1px);transition-duration:var(--t-press)}
.order-row:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:var(--r-tile)}
.order-row[aria-current="true"]{background:var(--mint-tint);box-shadow:inset 0 0 0 2px var(--forest)}
.or-title{font:700 1.0625rem/1.3 var(--font-head);letter-spacing:-.01em;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.or-meta{font-weight:500;font-size:.875rem;color:var(--ink-2);overflow-wrap:anywhere}
.or-last{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:4px}
.or-money{font-weight:600;font-size:.875rem}
.or-amt{margin-left:auto;font:800 1rem/1.2 var(--font-head);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* status tag */
.ostat{display:inline-flex;align-items:center;flex:none;max-width:100%;min-height:28px;padding:4px 10px;border-radius:var(--r-badge);font:700 .8125rem/1.25 var(--font-body);white-space:normal}
.ostat--wait{background:var(--orange-tint-2);color:var(--ink)}
.ostat--vault{background:var(--forest);color:var(--paper)}
.ostat--done{background:var(--mint);color:var(--ink)}
.ostat--problem{background:var(--rust-text);color:var(--paper)}
.ostat--ended{background:var(--sold);color:var(--ink)}

/* detail panel */
.detail{background:var(--paper);border-radius:var(--r-card);padding:32px;min-width:0}
.detail-back{margin-bottom:20px}
.detail .d-title{font-weight:800;font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem);line-height:1.2;letter-spacing:-.025em;overflow-wrap:anywhere;text-wrap:balance}
.d-meta{margin-top:8px;color:var(--ink-2);font-size:.9375rem;overflow-wrap:anywhere}
.d-meta span{display:block}
.detail-loading{min-height:12rem;display:flex;align-items:center;font-weight:600;color:var(--ink-2)}
.detail-msg .dm-title{font-weight:700;font-size:1.25rem;line-height:1.3}
.detail-msg p{margin-top:8px;color:var(--ink-2)}
.detail-msg .detail-msg-act{margin-top:16px}
.detail .sub{margin-top:32px;font-weight:700;font-size:1.125rem;line-height:1.3;letter-spacing:-.01em}

.money-now{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:start;margin-top:24px;padding:24px;border-radius:var(--r-card);background:var(--paper-2);color:var(--ink);transition:background-color var(--t-move) var(--ease-out),color var(--t-move) var(--ease-out)}
.money-now.no-vault{grid-template-columns:minmax(0,1fr)}
.money-now[data-ground="vault"]{background:var(--forest);color:var(--ink-inv)}
.money-now[data-ground="done"]{background:var(--mint-tint)}
.money-now[data-ground="problem"]{background:var(--orange-tint)}
.money-now .m-vault{width:96px}
.money-now .m-vault .vm{width:100%;height:auto}
.money-now .m-title{font-weight:800;font-size:1.375rem;line-height:1.25;letter-spacing:-.02em;overflow-wrap:break-word}
.money-now p{margin-top:10px}
.money-now p:first-of-type{margin-top:12px}
.money-now a{color:var(--teal);font-weight:700;text-underline-offset:3px}
.d-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;align-items:center}
.d-actions .act-note{flex:1 1 100%;color:var(--ink-2);font-size:.9375rem}
.d-actions .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.25;padding-block:8px}
.price{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;margin:12px 0 0}
.price dt{color:var(--ink-2);min-width:0;overflow-wrap:break-word}
.price dd{margin:0;overflow-wrap:anywhere;text-align:right;font:700 1rem/1.4 var(--font-head);font-variant-numeric:tabular-nums;min-width:0;max-width:16em}
.price dd.price-total{font-weight:800;font-size:1.125rem}
.price dt:has(+ dd.price-total){font-weight:700;color:var(--ink)}
.price-note{margin-top:8px;color:var(--ink-2);font-size:.9375rem}

/* timeline */
.otl{list-style:none;margin:16px 0 0;padding:0}
.otl-step{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:16px;padding-bottom:24px}
.otl-step:last-child{padding-bottom:0}
.otl-step::before{content:"";position:absolute;left:18px;top:40px;bottom:0;width:4px;background:var(--sold)}
.otl-step:last-child::before{display:none}
.otl-step[data-state="done"]::before{background:var(--forest)}
.otl-tile{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;flex:none;background:var(--paper);box-shadow:inset 0 0 0 2px var(--line)}
.otl-tile--done{background:var(--forest);box-shadow:none}
.otl-tile--now{background:var(--orange);box-shadow:none}
/* marker arrives at the new current step (class set by akun.js only when the step changed on the same order) */
.otl-tile--now.is-arrive{animation:otl-arrive var(--t-move) var(--ease-out) both}
@keyframes otl-arrive{from{transform:translateY(-16px);opacity:.4}to{transform:none;opacity:1}}
.otl-tile--dispute{background:var(--rust-text);box-shadow:none}
.otl-tile--cancel{background:var(--sold);box-shadow:none}
.otl-glyph{width:24px;height:24px}
.otl-dot{width:12px;height:12px;background:var(--night)}
.otl-body{min-width:0;padding-top:2px}
.otl-label{font:700 1.0625rem/1.3 var(--font-head);letter-spacing:-.01em;overflow-wrap:break-word}
.otl-state{margin-top:4px;font-weight:600;font-size:.875rem;color:var(--ink-2)}
.otl-now{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;margin-right:4px;border-radius:var(--r-badge);background:var(--orange-tint-2);color:var(--ink);font-weight:700;font-size:.8125rem}
.otl-note{margin-top:6px;font-size:.9375rem;color:var(--ink);overflow-wrap:anywhere}
.otl-extra{margin-top:6px;font-weight:500;font-size:.875rem;color:var(--ink-2)}
.foot-note{margin-top:32px;color:var(--ink-2);font-size:.875rem;max-width:40em}

@media (max-width:599px){
  .detail{padding:24px 20px}
  .money-now{grid-template-columns:64px minmax(0,1fr);padding:20px;gap:16px}
  .money-now.no-vault{grid-template-columns:minmax(0,1fr)}
  .money-now .m-vault{width:64px}
  .acct-state{padding:24px 20px}
  .acct-state .st-vault{width:72px}
}
@media (max-width:899px){.acct-main{padding-block:28px 40px}}
@media (min-width:900px){.detail-back{display:none}}


/* heading fit by container: a heading never needs more than its box / longest word (em, measured x ~1.03), so it shrinks
   instead of splitting a word, at any width and any text size */
.login-head,.login-list,.pay-panel,.signin-panel,.st-text,.acct-who,.otl-body,.m-text,.detail-msg,.dev-block{container-type:inline-size}
.detail{container:detail / inline-size}
.login-head h1{font-size:min(clamp(1.875rem,1.2rem + 2.6vw,3.25rem),calc(100cqw / 5.9))}            /* pesananmu 5.73 */
.acct-who h1{font-size:min(clamp(1.75rem,1.3rem + 2vw,2.75rem),calc(100cqw / 3.9))}                  /* Akun */
.signin-panel h2{font-size:min(1.5rem,calc(100cqw / 3.4))}                                            /* masuk */
.login-list h2,.pay-panel h2{font-size:min(1.25rem,calc(100cqw / 5))}                                 /* berubah */
.st-text h2{font-size:min(1.5rem,calc(100cqw / 7.1))}                                                 /* pesananmu... 6.67 */
.m-text .m-title{font-size:min(1.375rem,calc(100cqw / 6.6))}                                                /* Pembayaran 6.27 */
.otl-label{font-size:min(1.0625rem,calc(100cqw / 6.6))}
.detail-msg .dm-title{font-size:min(1.25rem,calc(100cqw / 6.4))}
.dev-block h3{font-size:min(1rem,calc(100cqw / 7.1))}                                                 /* pengembang 6.81 */
@container detail (max-width:30em){
  .money-now,.money-now.no-vault{grid-template-columns:minmax(0,1fr)}
  .money-now .m-vault{width:56px}
  .price{grid-template-columns:minmax(0,1fr);gap:2px}
  .price dd{text-align:left;max-width:none;margin-bottom:10px}
}

/* large text and narrow screens (160-300px): stacks and heading fit, same mechanism as shell.css section AC25.
   --hl = longest word in em (measured, tracking included) x ~1.03; --hpad = extra inline padding around the heading. */
@media (max-width:300px){
  html body .signin-panel{padding:16px 12px}
  html body .pay-panel{padding:16px 12px}
  html body .detail{padding:12px 8px}
  html body .money-now{padding:12px 8px;row-gap:12px}
  html body .money-now .m-vault{width:56px}
  html body .acct-state{padding:12px 8px}
  html body .acct-state .st-vault{width:56px}
  html body .order-row{padding:12px 8px}
  html body .otl-step{grid-template-columns:32px minmax(0,1fr);column-gap:12px}
  html body .otl-step::before{left:14px;top:32px}
  html body .otl-tile{width:32px;height:32px;border-radius:10px}
  html body .otl-glyph{width:20px;height:20px}
  html body .price{grid-template-columns:minmax(0,1fr)}
  html body .price dd{text-align:left}
  html body .d-actions .btn{padding-inline:12px}
  html body .dev-block{padding:12px 8px}
  html body .dev-list .btn{padding-inline:8px;font-size:.875rem}
  html body .dev-block p{font-size:.875rem}
}

/* below 200px the timeline label has no room beside its tile: tile above the text, rail hidden (order stays in the list and the state text) */
@media (max-width:199px){
  html body .otl-step{grid-template-columns:minmax(0,1fr);row-gap:8px}
  html body .otl-step::before{display:none}
}

/* AC22: tap without double-tap-zoom delay on account controls */
.acct-who .btn,.detail .btn,.d-actions .btn,.dev-list .btn,.signin-panel .btn,.pay-panel .btn,#btn-logout,#btn-refresh,#btn-back{touch-action:manipulation}

/* ---------- iter-04: section row, views, profile, seller view (spec 9 to 12) ---------- */
.acct-main h4{font-family:var(--font-head);margin:0;letter-spacing:-.025em;text-wrap:balance;overflow-wrap:break-word}
.acct-tabs{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:20px;padding-bottom:0}
.acct-tabs a{touch-action:manipulation;position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-pill);color:var(--ink-inv-2);text-decoration:none;font:600 1rem/1.25 var(--font-body);transition:color var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.acct-tabs a:hover{color:var(--ink-inv);text-decoration:underline;text-underline-offset:4px}}
.acct-tabs a:active{color:var(--ink-inv);transform:translateY(1px)}
.acct-tabs a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.acct-tabs a[aria-current="true"]{color:var(--ink-inv);box-shadow:inset 0 -3px 0 var(--orange);border-radius:6px 6px 0 0}
.acct-view[hidden]{display:none}
.view-intro{margin-top:8px;max-width:36em;color:var(--ink-2);font-size:.9375rem}
.view-h{font-weight:800;font-size:1.5rem;line-height:1.2;letter-spacing:-.025em}
.list-head{container-type:inline-size}
.list-head .view-h,.list-head h2{font-size:min(1.5rem,calc(100cqw / 4.6))}

/* Profil */
.pf-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:24px;align-items:start}
.pf-grid>*{min-width:0}
@media (min-width:900px){.pf-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px}}
.pf-form{display:grid;gap:24px;background:var(--paper);border-radius:var(--r-card);padding:32px;max-width:40em}
.pf-field{display:grid;gap:8px;min-width:0}
.pf-label{font-weight:700;font-size:.9375rem}
.pf-input{width:100%;min-height:52px;padding:0 16px;border:2px solid var(--line);border-radius:var(--r-field);background:var(--paper);font:500 1rem var(--font-body);color:var(--ink);transition:border-color var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.pf-input:hover{border-color:var(--ink-2)}}
.pf-input:focus,.pf-input:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--teal);box-shadow:0 0 0 4px var(--focus-halo)}
.pf-input[aria-invalid="true"]{border-color:var(--rust-text);background:var(--error-tint)}
.pf-ro{font-weight:600;font-size:1rem;overflow-wrap:anywhere}
.pf-hint{font-size:.875rem;color:var(--ink-2)}
.acct-admin{margin-top:24px}
.pf-note{font-weight:500;font-size:.875rem;color:var(--ink-2)}
.pf-note:empty{display:none}
.pf-err{display:flex;align-items:flex-start;gap:8px;font-size:.875rem;font-weight:600;color:var(--rust-text);overflow-wrap:anywhere}
.pf-err[hidden]{display:none}
.pf-err svg{flex:none;width:12px;height:12px;margin-top:.3em}
.pf-actions{display:grid;gap:12px;justify-items:start}
.pf-actions .btn{touch-action:manipulation}
.pf-actions .btn[aria-disabled="true"]{cursor:progress;background:var(--sold);color:var(--ink-2);transform:none;box-shadow:none}
.pf-status{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.9375rem;overflow-wrap:anywhere}
.pf-status:empty{display:none}
.pf-tick{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--forest)}
.pf-tick svg{width:24px;height:24px}
.pf-who{background:var(--mint-tint);border-radius:var(--r-card);padding:24px;container-type:inline-size}
.pf-who h3{font-weight:700;font-size:1.125rem;line-height:1.3;letter-spacing:-.01em;font-size:min(1.125rem,calc(100cqw / 8.4))}
.pf-who dl{margin:16px 0 0;display:grid;gap:14px}
.pf-who dt{font-weight:700;font-size:.9375rem}
.pf-who dd{margin:2px 0 0;color:var(--ink-2);font-size:.9375rem}
.pf-link{display:inline-block;margin-top:12px;padding-block:10px;color:var(--teal);font-weight:700;text-underline-offset:3px;touch-action:manipulation}
.pf-link:active{transform:translateY(1px)}
@media (max-width:599px){.pf-form{padding:20px}}

/* Jualan saya */
.j-grid{margin-top:32px}
.j-col{min-width:0}
.j-h{font-weight:800;font-size:1.25rem;line-height:1.25;letter-spacing:-.02em}
.j-body{margin-top:16px}
.j-body>*+*{margin-top:12px}
.j-lower{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;margin-top:48px}
.j-lower>*{min-width:0}
@media (min-width:900px){.j-lower{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;margin-top:64px}}
.j-state{display:grid;gap:8px;min-height:72px;align-content:center;padding:16px 20px;background:var(--paper);border-radius:var(--r-tile);color:var(--ink-2)}
.j-state strong{color:var(--ink);font-weight:700}
.j-state .btn{justify-self:start;margin-top:4px}
.my-ads,.payouts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ad-row,.po-row{display:grid;gap:4px;min-height:72px;padding:16px 20px;background:var(--paper);border-radius:var(--r-tile);min-width:0}
.ad-title{font:700 1.0625rem/1.3 var(--font-head);letter-spacing:-.01em;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ad-meta{font-weight:500;font-size:.875rem;color:var(--ink-2);overflow-wrap:anywhere}
.ad-last{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:4px}
.ad-price{margin-left:auto;font:800 1rem/1.2 var(--font-head);font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.ad-unknown{color:var(--ink-2);font-size:.875rem;font-weight:500}
.zbadge{flex:none;display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:var(--r-badge);font-size:.8125rem;font-weight:700;color:var(--ink);max-width:100%}
.zbadge--ready{background:var(--mint)}
.zbadge--inorder{background:var(--orange-tint-2)}
.zbadge--soldout{background:var(--sold)}
.j-note{margin-top:12px;color:var(--ink-2);font-size:.875rem;max-width:40em}
.j-note a,.j-empty-alt a{display:inline-block;padding-block:10px;color:var(--teal);font-weight:700;text-underline-offset:3px;touch-action:manipulation}
.j-note a:active,.j-empty-alt a:active{transform:translateY(1px)}
.po-amt{font:800 1.25rem/1.2 var(--font-head);font-variant-numeric:tabular-nums;letter-spacing:-.02em;overflow-wrap:anywhere}
.po-order{font-weight:600;font-size:.9375rem;overflow-wrap:anywhere}
.po-order a{display:inline-block;padding-block:10px;color:var(--teal);font-weight:700;text-underline-offset:3px;touch-action:manipulation}
.po-order a:active{transform:translateY(1px)}
.po-when{font-weight:500;font-size:.875rem;color:var(--ink-2);overflow-wrap:anywhere}
.j-empty{display:flex;flex-wrap:wrap;align-items:center;gap:24px 32px;background:var(--paper);border-radius:var(--r-card);padding:28px;max-width:52rem;margin-top:32px}
.j-empty-vault{width:88px;flex:none}
.j-empty-vault .vm{width:100%;height:auto}
.j-empty-text{flex:1 1 20em;min-width:0;container-type:inline-size}
.j-empty-text h3{font-weight:800;font-size:min(1.375rem,calc(100cqw / 6.8));line-height:1.2;letter-spacing:-.025em}
.j-empty-text p{margin-top:10px;max-width:34.67em;color:var(--ink-2)}
.j-empty-act{margin-top:20px}
.j-empty-alt{font-size:.9375rem}
@media (max-width:599px){.j-empty{padding:24px 20px}.j-empty-act .btn{width:100%}}

/* shared detail panel reparented into the seller view */
.j-grid .detail{align-self:start}

@media (max-width:300px){
  html body .pf-form{padding:12px 8px}
  html body .pf-who{padding:12px 8px}
  html body .ad-row,html body .po-row,html body .j-state{padding:12px 8px}
  html body .j-empty{padding:12px 8px}
  html body .acct-tabs a{padding-inline:10px}
}
.acct-view .btn{touch-action:manipulation}
.j-grid.no-detail{grid-template-columns:minmax(0,1fr)}
.or-amt-none{font:600 .875rem/1.3 var(--font-body,inherit);color:var(--ink-2);letter-spacing:0;text-align:right}

/* ---------- Loop 16: masuk with intent ---------- */
.login-code{margin-top:12px;font:600 1rem/1.4 var(--font-body);color:var(--ink-inv-2);overflow-wrap:anywhere}
.login-code strong{color:var(--ink-inv);font-weight:700}
.login-head--intent h1{font-size:min(clamp(1.75rem,1.1rem + 2.2vw,2.75rem),calc(100cqw / 10.4))}

/* ---------- Loop 16: Disimpan view, Nama penjual ---------- */
.btn-quiet{touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line);font:700 .9375rem/1.2 var(--font-body);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn-quiet:hover{background:var(--paper-2)}}
.btn-quiet:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn-quiet[aria-busy="true"]{cursor:progress}
.sv-main{min-width:0}
.saved-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.saved-list:empty{display:none}
.saved-row{background:var(--paper);color:var(--ink);border-radius:var(--r-tile);padding:16px 20px;display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px 16px;align-items:start;min-width:0}
.saved-row>*{min-width:0}
.sv-plate{width:64px;height:64px;border-radius:10px;background:var(--night);color:var(--gold);display:grid;place-items:center;font:800 1.125rem/1 var(--font-head);letter-spacing:-.02em;text-align:center}
.sv-plate--sold{background:var(--sold-plate);color:var(--sold-plate-ink)}
.sv-text{display:grid;gap:4px;align-content:start}
.sv-title{color:var(--ink);font:700 1.0625rem/1.3 var(--font-head);letter-spacing:-.01em;overflow-wrap:anywhere;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover) and (pointer:fine){.sv-title:hover{text-decoration:underline;text-underline-offset:3px}}
.sv-title:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.sv-seller{margin:0;font-size:.8125rem;color:var(--ink-2);overflow-wrap:anywhere}
.sv-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:2px}
.sv-price{font:800 1.125rem/1.2 var(--font-head);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sv-note{margin:2px 0 0;font-size:.875rem;color:var(--ink-2)}
.sv-acts{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px}
.saved-row .sv-err{grid-column:1 / -1;margin:0;font-size:.875rem;font-weight:600;color:var(--rust-text);overflow-wrap:anywhere}
@media (min-width:600px){
  .saved-row{grid-template-columns:72px minmax(0,1fr) auto}
  .sv-plate{width:72px;height:72px}
  .sv-acts{grid-column:auto;justify-content:flex-end;align-self:center}
}
.saved-undo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;background:var(--mint-tint);color:var(--ink);border-radius:var(--r-tile);padding:12px 20px}
.saved-undo p{margin:0;overflow-wrap:anywhere;min-width:0}
.saved-undo .sv-err{flex-basis:100%;margin:0;font-size:.875rem;font-weight:600;color:var(--rust-text)}
.sv-state{background:var(--paper);color:var(--ink);border-radius:var(--r-card);padding:28px;margin-top:16px;display:grid;gap:12px;justify-items:start}
.sv-state h3{font:700 1.25rem/1.3 var(--font-head);letter-spacing:-.01em;overflow-wrap:anywhere}
.sv-state p{margin:0;max-width:34em;color:var(--ink-2)}
.sv-state-act{display:flex;flex-wrap:wrap;gap:8px}
.sv-loading{margin-top:16px;display:grid;gap:12px}
.sv-loading p{margin:0;color:var(--ink-2);font-weight:600}
.sv-skel{display:grid;gap:12px}
.sv-skel span{display:block;height:96px;border-radius:var(--r-tile);background:var(--paper-2);animation:skel 1.2s steps(2,jump-none) infinite alternate}
.sv-aside p{margin:12px 0 0;color:var(--ink-2);font-size:.9375rem}
.sv-aside p:first-of-type{margin-top:12px}
.pf-main{display:grid;gap:24px;min-width:0}
.pf-main>.pf-form{max-width:40em}
.pf-count{justify-self:end;margin:0;font-size:.8125rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pf-input:disabled,.pf-input[readonly]{background:var(--paper-2);color:var(--ink-2);cursor:not-allowed;border-color:var(--sold)}
.sn-confirm{--focus:var(--ink);background:var(--mint-tint);border-radius:var(--r-tile);padding:16px 20px;display:grid;gap:8px}
.sn-confirm[hidden]{display:none}
.sn-confirm-h{margin:0;font-weight:700;font-size:1rem;overflow-wrap:anywhere}
.sn-confirm-h:focus{outline:none}
.sn-confirm-h:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sn-confirm-p{margin:0;color:var(--ink-2);font-size:.9375rem;overflow-wrap:anywhere}
.sn-confirm-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
@media (max-width:599px){.sv-state{padding:20px}}
@media (max-width:300px){
  html body .saved-row,html body .saved-undo,html body .sn-confirm{padding:12px 8px}
  html body .sv-state{padding:12px 8px}
  html body .saved-row{grid-template-columns:48px minmax(0,1fr);gap:8px 8px}
  html body .sv-plate{width:48px;height:48px;font-size:.9375rem}
}

/* Loading skeletons: same anatomy as the real row, text transparent, flat bars painted by ::after, stepped opacity pulse (no shimmer). */
.acct-state.is-skel .st-vault{display:none}
.st-text .st-act .orders--skel{flex:1 1 100%;margin:0;min-width:0}
/* Loading panel with order skeleton: drop the card chrome so the rows sit in the same column the loaded list will use (full width on phones, the 5fr pane at 900px+). */
.acct-state.is-skel:has(.orders--skel){display:block;padding:0;max-width:none;background:transparent;border-radius:0}
@media (min-width:900px){.acct-state.is-skel:has(.orders--skel) .st-text{max-width:calc((100% - 32px) * 5 / 12)}}
.order-row--skel,.ad-row--skel{pointer-events:none;background:var(--paper-2);animation:skel 1.2s steps(2,jump-none) infinite alternate}
.j-skel{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.order-row--skel :is(.or-title,.or-meta,.ostat,.or-amt),.ad-row--skel :is(.ad-title,.ad-meta,.ad-price){position:relative;color:transparent;-webkit-text-fill-color:transparent;background:transparent}
.order-row--skel :is(.or-title,.or-meta,.ostat,.or-amt)::after,.ad-row--skel :is(.ad-title,.ad-meta,.ad-price)::after{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:70%;background:var(--sold);border-radius:4px}
.order-row--skel .ostat::after{inset:0;width:100%;border-radius:var(--r-badge)}
.order-row--skel .or-meta::after,.ad-row--skel .ad-meta::after{width:50%}
.order-row--skel .or-amt::after,.ad-row--skel .ad-price::after{width:100%}