/*
 * Rizzi Store Unified Web Experience v2.0
 * Presentation only: no order, payment, supplier, balance, webhook, JB, FT, or AM business logic.
 */
:root{
  --rzux-bg:#06101d;
  --rzux-bg-soft:#091726;
  --rzux-card:rgba(11,25,42,.82);
  --rzux-card-strong:rgba(13,29,49,.96);
  --rzux-line:rgba(151,177,211,.16);
  --rzux-line-strong:rgba(151,177,211,.27);
  --rzux-text:#f5f8fd;
  --rzux-muted:#9db0c8;
  --rzux-blue:#3a82ff;
  --rzux-blue-2:#6ca5ff;
  --rzux-green:#16d28f;
  --rzux-amber:#ffbd45;
  --rzux-red:#ff6377;
  --rzux-purple:#9d7cff;
  --rzux-radius-sm:14px;
  --rzux-radius:20px;
  --rzux-radius-lg:28px;
  --rzux-shadow:0 18px 55px rgba(0,0,0,.24);
  --rzux-shadow-soft:0 12px 34px rgba(0,0,0,.16);
  --rzux-ease:cubic-bezier(.22,.8,.24,1);
}
html[data-theme="light"]{
  --rzux-bg:#f2f6fb;
  --rzux-bg-soft:#e9f0f8;
  --rzux-card:rgba(255,255,255,.88);
  --rzux-card-strong:#fff;
  --rzux-line:rgba(20,48,82,.12);
  --rzux-line-strong:rgba(20,48,82,.20);
  --rzux-text:#102035;
  --rzux-muted:#64758c;
  --rzux-shadow:0 18px 55px rgba(24,50,82,.12);
  --rzux-shadow-soft:0 12px 34px rgba(24,50,82,.09);
}
html{scroll-behavior:smooth;background:var(--rzux-bg)}
body.rz-unified-web{
  background:
    radial-gradient(circle at 12% -10%,rgba(58,130,255,.15),transparent 34rem),
    radial-gradient(circle at 105% 12%,rgba(22,210,143,.08),transparent 30rem),
    var(--rzux-bg);
  color:var(--text,var(--rzux-text));
  min-height:100vh;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body.rz-unified-web::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.34;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:44px 44px;mask-image:linear-gradient(to bottom,black,transparent 78%);
}
body.rz-unified-web *{box-sizing:border-box}
body.rz-unified-web ::selection{background:rgba(58,130,255,.34);color:#fff}
body.rz-unified-web :focus-visible{outline:2px solid var(--rzux-blue-2)!important;outline-offset:3px}
body.rz-unified-web :where(a,button,input,select,textarea,summary){-webkit-tap-highlight-color:transparent}
body.rz-unified-web :where(input,select,textarea){font:inherit}
body.rz-unified-web :where(input,select,textarea):not([type="checkbox"]):not([type="radio"]){
  border-radius:14px;transition:border-color 160ms ease,box-shadow 220ms ease,background-color 160ms ease,transform 160ms ease;
}
body.rz-unified-web :where(input,select,textarea):not([type="checkbox"]):not([type="radio"]):focus{
  border-color:rgba(58,130,255,.72)!important;box-shadow:0 0 0 4px rgba(58,130,255,.13)!important;
}
body.rz-unified-web textarea{resize:vertical;min-height:104px}
body.rz-unified-web :where(.btn,button,[role="button"]){font-weight:800;letter-spacing:-.01em}
body.rz-unified-web :where(.btn.primary,button.primary,.ft-button-primary){
  box-shadow:0 10px 25px rgba(58,130,255,.23);position:relative;overflow:hidden;
}
body.rz-unified-web :where(.btn.primary,button.primary,.ft-button-primary)::after{
  content:"";position:absolute;inset:-70% auto -70% -42%;width:34%;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);opacity:0;
}
@media(hover:hover) and (pointer:fine){
  body.rz-unified-web :where(.btn.primary,button.primary,.ft-button-primary):hover::after{animation:rzuxButtonShine 720ms var(--rzux-ease)}
}
@keyframes rzuxButtonShine{15%{opacity:1}100%{left:120%;opacity:0}}

/* Universal visual surfaces. Applied progressively by JS. */
.rzux-surface{
  border-color:var(--rzux-line)!important;
  box-shadow:var(--rzux-shadow-soft);
  backdrop-filter:saturate(1.05) blur(12px);
  -webkit-backdrop-filter:saturate(1.05) blur(12px);
}
.rzux-surface::before{pointer-events:none}
.rzux-reveal{opacity:0;transform:translate3d(0,16px,0) scale(.992)}
.rzux-reveal.rzux-visible{opacity:1;transform:none;transition:opacity 520ms var(--rzux-ease),transform 540ms var(--rzux-ease);transition-delay:var(--rzux-delay,0ms)}
html[data-rz-motion="low"] .rzux-reveal,html[data-rz-motion="off"] .rzux-reveal{opacity:1;transform:none;transition:none}
.rzux-clickable{transition:transform 220ms var(--rzux-ease),border-color 180ms ease,box-shadow 220ms ease,filter 180ms ease!important}
@media(hover:hover) and (pointer:fine){
  .rzux-clickable:hover{transform:translateY(-3px);border-color:rgba(108,165,255,.34)!important;box-shadow:0 18px 45px rgba(0,0,0,.22);filter:saturate(1.03)}
}
.rzux-clickable:active{transform:scale(.982)!important}
.rzux-page-leaving{opacity:.68;transform:translate3d(0,3px,0);transition:opacity 120ms ease,transform 120ms ease}

/* Global cards, tables and details */
body.rz-unified-web :where(.auth-card,.buy-card,.rz-payment-card,.rs-card,.jb-card,.ft-content-card,.admin-card,.stat-card,.table-wrap,.replacement-box,.track-warranty,.rz-order-details){
  border-color:var(--rzux-line)!important;
}
body.rz-unified-web :where(table){border-collapse:separate;border-spacing:0}
body.rz-unified-web :where(.table-wrap,.admin-table-wrap){overflow:auto;border-radius:20px;scrollbar-width:thin}
body.rz-unified-web :where(table) thead th{position:sticky;top:0;z-index:2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
body.rz-unified-web :where(table) tbody tr{transition:background-color 160ms ease,transform 180ms ease}
body.rz-unified-web :where(table) tbody tr:hover{background:rgba(58,130,255,.045)}
body.rz-unified-web details{overflow:hidden}
body.rz-unified-web details>summary{cursor:pointer;list-style:none;user-select:none}
body.rz-unified-web details>summary::-webkit-details-marker{display:none}
body.rz-unified-web details>summary::after{content:"⌄";float:right;transition:transform 220ms var(--rzux-ease);color:var(--muted,var(--rzux-muted))}
body.rz-unified-web details[open]>summary::after{transform:rotate(180deg)}
body.rz-unified-web :where(.alert,.notice){border:1px solid var(--rzux-line);box-shadow:var(--rzux-shadow-soft)}
body.rz-unified-web :where(.alert.success,.notice.ok){border-color:rgba(22,210,143,.28)!important}
body.rz-unified-web :where(.alert.error,.alert.danger,.notice.err){border-color:rgba(255,99,119,.28)!important}

/* Toast and form state */
.rzux-toast-stack{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(92px,calc(env(safe-area-inset-bottom) + 18px));z-index:99999;display:grid;gap:10px;pointer-events:none;max-width:min(390px,calc(100vw - 28px))}
.rzux-toast{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;border:1px solid var(--rzux-line-strong);border-radius:17px;background:var(--rzux-card-strong);box-shadow:0 20px 55px rgba(0,0,0,.30);color:var(--rzux-text);opacity:0;transform:translate3d(18px,0,0) scale(.97);animation:rzuxToastIn 320ms var(--rzux-ease) forwards;pointer-events:auto}
.rzux-toast.success{border-color:rgba(22,210,143,.36)}.rzux-toast.error{border-color:rgba(255,99,119,.38)}
.rzux-toast i{width:29px;height:29px;border-radius:10px;display:grid;place-items:center;background:rgba(58,130,255,.15);font-style:normal;font-weight:950;flex:none}
.rzux-toast.success i{background:rgba(22,210,143,.16);color:var(--rzux-green)}.rzux-toast.error i{background:rgba(255,99,119,.14);color:var(--rzux-red)}
.rzux-toast b{display:block;font-size:13px}.rzux-toast span{display:block;color:var(--rzux-muted);font-size:12px;line-height:1.45;margin-top:2px}
.rzux-toast.is-out{animation:rzuxToastOut 200ms ease forwards}
@keyframes rzuxToastIn{to{opacity:1;transform:none}}@keyframes rzuxToastOut{to{opacity:0;transform:translate3d(16px,0,0) scale(.97)}}
.rzux-submit-loading{position:relative;cursor:progress!important;opacity:.88!important}
.rzux-submit-loading::before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:rzuxSpin .72s linear infinite}
@keyframes rzuxSpin{to{transform:rotate(360deg)}}

/* Buyer transaction center */
.rz-history-page-modern .rz-history-page{padding-top:28px;padding-bottom:112px}
.rz-history-page-modern .rz-account-page{max-width:1080px}
.rz-history-page-modern .rz-history-hero{
  position:relative;overflow:hidden;border:1px solid var(--rzux-line);border-radius:var(--rzux-radius-lg);padding:clamp(20px,4vw,34px);
  background:linear-gradient(135deg,rgba(58,130,255,.20),rgba(11,25,42,.76) 56%,rgba(22,210,143,.08));box-shadow:var(--rzux-shadow);
}
.rz-history-page-modern .rz-history-hero::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;top:-105px;background:radial-gradient(circle,rgba(108,165,255,.28),transparent 67%);pointer-events:none}
.rz-history-page-modern .rz-history-hero h1{font-size:clamp(28px,5vw,48px);line-height:1.02;letter-spacing:-.045em;margin:9px 0 11px}
.rz-history-page-modern .rz-history-count{background:rgba(5,15,28,.52)!important;border-color:rgba(255,255,255,.12)!important;box-shadow:inset 0 1px rgba(255,255,255,.06)}
.rz-history-overview{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:16px 0}
.rz-history-metric{padding:14px;border:1px solid var(--rzux-line);border-radius:18px;background:var(--rzux-card);min-width:0}
.rz-history-metric small{display:block;color:var(--rzux-muted);font-weight:800;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rz-history-metric strong{display:block;font-size:23px;margin-top:5px;letter-spacing:-.03em}
.rz-history-toolbar{position:sticky;top:10px;z-index:15;display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:10px;padding:11px;margin:16px 0;border:1px solid var(--rzux-line);border-radius:20px;background:color-mix(in srgb,var(--rzux-card-strong) 90%,transparent);box-shadow:var(--rzux-shadow-soft);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.rz-history-search{display:flex;align-items:center;gap:9px;border:1px solid var(--rzux-line);border-radius:14px;padding:0 12px;background:rgba(0,0,0,.12)}
.rz-history-search svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;color:var(--rzux-muted);flex:none}.rz-history-search input{width:100%;min-width:0;border:0!important;background:transparent!important;box-shadow:none!important;padding:11px 0!important;color:inherit}
.rz-history-toolbar select{min-width:145px;padding:10px 36px 10px 12px}
.rz-history-toolbar .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.rz-history-page-modern .rz-order-history-card{position:relative;overflow:hidden;border:1px solid var(--rzux-line)!important;border-radius:22px!important;background:linear-gradient(145deg,var(--rzux-card-strong),var(--rzux-card));box-shadow:var(--rzux-shadow-soft)!important}
.rz-history-page-modern .rz-order-history-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rz-order-accent,var(--rzux-blue))}
.rz-order-history-card[data-tone="success"]{--rz-order-accent:var(--rzux-green)}.rz-order-history-card[data-tone="warning"]{--rz-order-accent:var(--rzux-amber)}.rz-order-history-card[data-tone="danger"]{--rz-order-accent:var(--rzux-red)}.rz-order-history-card[data-tone="neutral"]{--rz-order-accent:var(--rzux-purple)}
.rz-history-page-modern .rz-history-icon{border:1px solid var(--rzux-line);background:rgba(58,130,255,.12);box-shadow:inset 0 1px rgba(255,255,255,.06)}
.rz-history-page-modern .rz-history-title-row h2{letter-spacing:-.025em}
.rz-history-page-modern .rz-history-bottom{border-top:1px solid var(--rzux-line);padding-top:12px;margin-top:12px}
.rz-history-page-modern .rz-pagination{justify-content:center;margin-top:18px}

/* Buyer order detail */
.rz-track-page .form-wrap{padding:28px 14px 118px;align-items:flex-start}
.rz-track-page .track-box{width:min(1060px,100%);max-width:1060px!important;padding:clamp(17px,3vw,30px)!important;border-radius:30px!important;background:linear-gradient(155deg,rgba(12,27,46,.95),rgba(7,18,32,.92))!important;box-shadow:var(--rzux-shadow)!important}
html[data-theme="light"] .rz-track-page .track-box{background:linear-gradient(155deg,#fff,#f7faff)!important}
.rz-track-page .track-status-hero{position:relative;overflow:hidden;border-radius:28px!important;padding:clamp(18px,3.5vw,30px)!important;background:linear-gradient(135deg,rgba(58,130,255,.22),rgba(11,25,42,.78) 58%,rgba(22,210,143,.09))!important;box-shadow:var(--rzux-shadow)!important}
.rz-track-page .track-status-hero::after{content:"";position:absolute;right:-74px;top:-105px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(108,165,255,.24),transparent 68%);pointer-events:none}
.rz-track-page .track-status-title h2{font-size:clamp(27px,5vw,46px)!important;letter-spacing:-.045em;line-height:1.03}
.rz-track-page .status-pill{position:relative;isolation:isolate;box-shadow:inset 0 1px rgba(255,255,255,.08)}
.rz-track-page .status-pill.ok::before,.rz-track-page .status-pill.warn::before,.rz-track-page .status-pill.bad::before{content:"";width:7px;height:7px;border-radius:50%;margin-right:7px;background:currentColor;box-shadow:0 0 0 5px color-mix(in srgb,currentColor 13%,transparent)}
.rz-track-page .track-timeline{position:relative;gap:12px!important}
.rz-track-page .track-step{position:relative;overflow:hidden;min-height:132px!important;border-radius:19px!important;background:rgba(3,13,25,.34)!important}
.rz-track-page .track-step::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--rzux-blue);transition:transform 480ms var(--rzux-ease)}
.rz-track-page .track-step.done::after{transform:scaleX(1);background:var(--rzux-green)}.rz-track-page .track-step.current::after{transform:scaleX(.62);animation:rzuxStepProgress 1.7s ease-in-out infinite alternate}
@keyframes rzuxStepProgress{to{transform:scaleX(.92)}}
.rz-track-page .track-step.current .track-step-icon{animation:rzuxActiveStep 1.8s ease-in-out infinite;box-shadow:0 0 0 0 rgba(58,130,255,.25)}
@keyframes rzuxActiveStep{50%{transform:translateY(-2px);box-shadow:0 0 0 8px rgba(58,130,255,0)}}
.rz-track-page .track-quick-card{background:linear-gradient(145deg,var(--rzux-card),rgba(58,130,255,.05))!important;border-radius:19px!important}
.rz-track-page .rz-track-action-card{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0;padding:17px;border:1px solid var(--rzux-line-strong);border-radius:22px;background:linear-gradient(135deg,rgba(58,130,255,.14),var(--rzux-card));box-shadow:var(--rzux-shadow-soft)}
.rz-track-page .rz-track-action-card.is-success{border-color:rgba(22,210,143,.32);background:linear-gradient(135deg,rgba(22,210,143,.13),var(--rzux-card))}.rz-track-page .rz-track-action-card.is-danger{border-color:rgba(255,99,119,.32);background:linear-gradient(135deg,rgba(255,99,119,.11),var(--rzux-card))}
.rz-track-page .rz-track-action-card-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:16px;background:rgba(58,130,255,.16);font-size:21px;flex:none}.rz-track-page .is-success .rz-track-action-card-icon{background:rgba(22,210,143,.15)}.rz-track-page .is-danger .rz-track-action-card-icon{background:rgba(255,99,119,.14)}
.rz-track-page .rz-track-action-copy{flex:1;min-width:0}.rz-track-page .rz-track-action-copy b{display:block;font-size:16px}.rz-track-page .rz-track-action-copy span{display:block;color:var(--rzux-muted);font-size:13px;line-height:1.5;margin-top:3px}
.rz-track-page :where(.web-account-card,.product-data-card,.product-note-card,.track-warranty,.replacement-box,.rz-order-details){border-radius:22px!important;box-shadow:var(--rzux-shadow-soft)}
.rz-track-page .web-account-card,.rz-track-page .product-data-card{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(22,210,143,.10),var(--rzux-card))!important}
.rz-track-page .web-account-card::before,.rz-track-page .product-data-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--rzux-green),var(--rzux-blue));opacity:.85}
.rz-track-page .web-account-item{background:rgba(2,11,21,.34)!important;border-radius:18px!important}
.rz-track-page .web-account-value{padding:3px 0;font-size:13px}
.rz-track-page .web-account-actions button,.rz-track-page .copy-mini{min-height:34px;display:inline-flex;align-items:center;justify-content:center}
.rz-track-page .product-note-card{background:linear-gradient(145deg,rgba(58,130,255,.12),var(--rzux-card))!important}
.rz-track-page .product-note-pre.rzux-collapsed{max-height:145px;overflow:hidden;mask-image:linear-gradient(to bottom,black 62%,transparent)}
.rzux-note-toggle{margin-top:12px;border:1px solid var(--rzux-line);background:rgba(58,130,255,.09);color:inherit;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:850}
.rz-track-page .detail-row{background:rgba(4,15,28,.33)!important}.rz-track-page .actions{position:sticky;bottom:calc(82px + env(safe-area-inset-bottom));z-index:20;padding:10px;margin:18px -4px 0;border:1px solid var(--rzux-line);border-radius:18px;background:color-mix(in srgb,var(--rzux-card-strong) 91%,transparent);box-shadow:0 16px 50px rgba(0,0,0,.28);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.rz-track-page .actions .btn,.rz-track-page .actions form,.rz-track-page .actions form .btn{min-height:43px}

/* Success / failure animation overlay */
.rzux-result-overlay{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:20px;background:rgba(2,9,18,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:rzuxOverlayIn 220ms ease both}
.rzux-result-overlay.is-out{animation:rzuxOverlayOut 260ms ease forwards}
.rzux-result-dialog{width:min(420px,100%);text-align:center;border:1px solid var(--rzux-line-strong);border-radius:30px;padding:30px 24px 24px;background:linear-gradient(155deg,var(--rzux-card-strong),rgba(8,19,34,.98));box-shadow:0 30px 90px rgba(0,0,0,.42);transform:translateY(14px) scale(.96);animation:rzuxDialogIn 520ms var(--rzux-ease) forwards}
.rzux-result-ring{width:94px;height:94px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;position:relative;background:rgba(22,210,143,.10);color:var(--rzux-green)}
.rzux-result-overlay.error .rzux-result-ring{background:rgba(255,99,119,.10);color:var(--rzux-red)}
.rzux-result-ring::before{content:"";position:absolute;inset:0;border:4px solid color-mix(in srgb,currentColor 20%,transparent);border-top-color:currentColor;border-radius:50%;animation:rzuxResultSpin 780ms var(--rzux-ease) forwards}
.rzux-result-mark{font-size:42px;font-weight:950;opacity:0;transform:scale(.5);animation:rzuxMarkIn 360ms 520ms var(--rzux-ease) forwards}.rzux-result-dialog h2{margin:0;font-size:27px;letter-spacing:-.035em}.rzux-result-dialog p{color:var(--rzux-muted);line-height:1.55;margin:9px 0 18px}.rzux-result-dialog button{min-width:150px;border:0;border-radius:14px;padding:11px 16px;background:var(--rzux-blue);color:white}
@keyframes rzuxOverlayIn{from{opacity:0}to{opacity:1}}@keyframes rzuxOverlayOut{to{opacity:0;visibility:hidden}}@keyframes rzuxDialogIn{to{transform:none}}@keyframes rzuxResultSpin{to{transform:rotate(720deg);border-color:currentColor}}@keyframes rzuxMarkIn{to{opacity:1;transform:none}} 

/* Admin workspace */
.rz-admin-v4.rz-unified-web .topbar{background:color-mix(in srgb,var(--rzux-card-strong) 88%,transparent)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom-color:var(--rzux-line)!important}
.rz-admin-v4.rz-unified-web .sidebar{background:linear-gradient(180deg,rgba(7,18,32,.99),rgba(5,13,25,.99))!important;border-right-color:var(--rzux-line)!important}
.rz-admin-v4.rz-unified-web .admin-nav-link{border-radius:13px!important}.rz-admin-v4.rz-unified-web .admin-nav-link.active{box-shadow:inset 0 1px rgba(255,255,255,.08),0 10px 25px rgba(58,130,255,.17)}
.rz-admin-v4.rz-unified-web .content-area{max-width:1640px;width:100%;margin-inline:auto}
.rz-admin-v4.rz-unified-web :where(.stat-card,.admin-card,.table-wrap,.admin-metric-card,.attention-row){background:linear-gradient(145deg,var(--rzux-card-strong),var(--rzux-card))!important;border-color:var(--rzux-line)!important;border-radius:20px!important;box-shadow:var(--rzux-shadow-soft)}
.rz-admin-v4.rz-unified-web .alert{max-width:1640px;margin-left:auto;margin-right:auto}

/* Reseller workspace */
.rs-app.rz-unified-web .rs-sidebar{background:linear-gradient(180deg,rgba(7,18,32,.99),rgba(5,13,25,.99))!important;border-right-color:var(--rzux-line)!important}
.rs-app.rz-unified-web .rs-topbar{background:color-mix(in srgb,var(--rzux-card-strong) 89%,transparent)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom-color:var(--rzux-line)!important}
.rs-app.rz-unified-web .rs-content{max-width:1460px;width:100%;margin-inline:auto}
.rs-app.rz-unified-web :where(.rs-card,.rs-stat-card,.rs-order-card,.rs-summary-card,.rs-method-card,.rs-create-method-card){background:linear-gradient(145deg,var(--rzux-card-strong),var(--rzux-card))!important;border-color:var(--rzux-line)!important;border-radius:21px!important;box-shadow:var(--rzux-shadow-soft)}

/* JB and FT retain their identities while sharing depth/motion. */
.jb-app.rz-unified-web :where(.jb-card,.jb-listing-card,.jb-order-card,.jb-action-card,.worker-job-card,.nego-card){box-shadow:var(--rzux-shadow-soft);border-color:var(--rzux-line)!important}
.jb-app.rz-unified-web .jb-topbar,.ft-body.rz-unified-web .ft-topbar{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.ft-body.rz-unified-web :where(.ft-content-card,.ft-featured-card,.ft-tournament-card,.ft-admin-list-card,.ft-wallet-card){box-shadow:var(--rzux-shadow-soft);border-color:var(--rzux-line)!important}

/* Mobile */
@media(max-width:820px){
  .rz-history-overview{grid-template-columns:repeat(5,minmax(115px,1fr));overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}.rz-history-metric{scroll-snap-align:start}
  .rz-history-toolbar{position:relative;top:auto;grid-template-columns:1fr 1fr}.rz-history-search{grid-column:1/-1}.rz-history-toolbar .btn{width:100%}
  .rz-track-page .rz-track-action-card{align-items:flex-start;flex-wrap:wrap}.rz-track-page .rz-track-action-card .btn{width:100%}.rz-track-page .actions{bottom:calc(78px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr}.rz-track-page .actions form,.rz-track-page .actions .btn,.rz-track-page .actions form .btn{width:100%}
}
@media(max-width:560px){
  body.rz-unified-web::before{display:none}.rz-history-page-modern .rz-history-page{padding-top:14px}.rz-history-page-modern .rz-history-hero{border-radius:23px}.rz-history-page-modern .rz-history-hero h1{font-size:31px}.rz-history-page-modern .rz-history-count{min-width:104px}
  .rz-history-toolbar{grid-template-columns:1fr}.rz-history-search{grid-column:auto}.rz-history-toolbar select{width:100%}.rz-history-page-modern .rz-order-history-card{border-radius:19px!important}.rz-history-page-modern .rz-history-bottom{display:grid!important;grid-template-columns:1fr auto;gap:10px}.rz-history-page-modern .rz-history-bottom .btn{grid-column:1/-1;width:100%}
  .rz-track-page .form-wrap{padding:10px 9px 112px}.rz-track-page .track-box{padding:15px!important;border-radius:22px!important}.rz-track-page .track-status-hero{border-radius:22px!important}.rz-track-page .track-status-title h2{font-size:30px!important}.rz-track-page .track-status-total{width:100%}.rz-track-page .track-timeline{grid-template-columns:1fr!important}.rz-track-page .track-step{min-height:auto!important;padding:13px 13px 13px 58px!important}.rz-track-page .track-step-icon{position:absolute;left:12px;top:12px}.rz-track-page .web-account-row{gap:5px!important}.rz-track-page .actions{grid-template-columns:1fr;bottom:calc(75px + env(safe-area-inset-bottom))}
  .rzux-toast-stack{left:12px;right:12px;bottom:max(84px,calc(env(safe-area-inset-bottom) + 14px));max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .rzux-reveal,.rzux-result-overlay,.rzux-result-dialog,.rzux-result-ring::before,.rzux-result-mark,.rz-track-page .track-step.current .track-step-icon,.rz-track-page .track-step.current::after{animation:none!important;transition:none!important;transform:none!important;opacity:1!important}
}

/* Premium pagination — order history, balance history, favorites, and shared lists */
.rz-pager-shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:22px 0 8px;
  padding:10px;
  border:1px solid var(--rzux-line);
  border-radius:22px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--rzux-card-strong) 94%,transparent),color-mix(in srgb,var(--rzux-card) 88%,transparent));
  box-shadow:var(--rzux-shadow-soft),inset 0 1px rgba(255,255,255,.045);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.rz-pager-meta{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 13px;
  border:1px solid var(--rzux-line);
  border-radius:14px;
  background:rgba(58,130,255,.075);
  color:var(--rzux-muted);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.rz-pager-meta strong{
  min-width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(58,130,255,.18);
  color:var(--rzux-text);
  font-size:13px;
  box-shadow:inset 0 1px rgba(255,255,255,.07);
}
.rz-pagination{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px;
  min-width:0;
}
.rz-page-button{
  min-width:42px;
  height:42px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid var(--rzux-line);
  border-radius:13px;
  background:rgba(255,255,255,.025);
  color:var(--rzux-text);
  font-size:13px;
  font-weight:900;
  line-height:1;
  text-decoration:none!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035);
  transition:transform 180ms var(--rzux-ease),border-color 180ms ease,background 180ms ease,box-shadow 180ms ease,color 180ms ease;
}
a.rz-page-button:hover{
  transform:translateY(-2px);
  border-color:rgba(108,165,255,.48);
  background:rgba(58,130,255,.12);
  box-shadow:0 9px 24px rgba(3,12,24,.22),inset 0 1px rgba(255,255,255,.06);
}
a.rz-page-button:active{transform:translateY(0) scale(.96)}
.rz-page-button.active{
  border-color:rgba(108,165,255,.7);
  background:linear-gradient(135deg,#2f79ff,#5c9dff);
  color:#fff;
  box-shadow:0 10px 25px rgba(47,121,255,.28),inset 0 1px rgba(255,255,255,.22);
}
.rz-page-nav{min-width:116px;padding:0 14px}
.rz-page-nav > span[aria-hidden="true"]{font-size:17px;line-height:1;transition:transform 180ms var(--rzux-ease)}
a.rz-page-nav:first-child:hover > span[aria-hidden="true"]{transform:translateX(-2px)}
a.rz-page-nav:last-child:hover > span[aria-hidden="true"]{transform:translateX(2px)}
.rz-page-button.is-disabled{
  opacity:.34;
  cursor:not-allowed;
  background:rgba(255,255,255,.012);
  box-shadow:none;
}
.rz-page-ellipsis{
  min-width:24px;
  height:42px;
  display:grid;
  place-items:center;
  color:var(--rzux-muted);
  font-size:18px;
  font-weight:900;
  user-select:none;
}
html[data-theme="light"] .rz-pager-shell{background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(246,249,255,.94))}
html[data-theme="light"] .rz-page-button{background:rgba(20,49,88,.025)}
html[data-theme="light"] a.rz-page-button:hover{background:rgba(47,121,255,.08)}

/* Balance history uses the same premium transaction shell. */
.rz-balance-history-page .rz-history-page{padding-top:28px;padding-bottom:112px}
.rz-balance-history-page .rz-account-page{max-width:1080px}
.rz-balance-history-page .rz-pagination{margin-top:0!important}

@media (max-width:700px){
  .rz-pager-shell{
    padding:8px;
    border-radius:18px;
    gap:8px;
  }
  .rz-pager-meta{display:none}
  .rz-pagination{width:100%;justify-content:center;flex-wrap:nowrap;gap:5px}
  .rz-page-button{min-width:39px;height:39px;padding:0 10px;border-radius:12px;font-size:12px}
  .rz-page-nav{min-width:39px;flex:0 0 39px;padding:0}
  .rz-page-label{display:none}
  .rz-page-ellipsis{min-width:16px;height:39px}
}
@media (max-width:390px){
  .rz-page-button{min-width:36px;height:38px;padding:0 8px}
  .rz-page-nav{min-width:36px;flex-basis:36px}
}
@media (prefers-reduced-motion:reduce){
  .rz-page-button,.rz-page-nav > span[aria-hidden="true"]{transition:none!important}
}

/* ========================================================================== 
   Rizzi Motion System v2 — premium UI-only layer
   This section only changes presentation and motion. It does not alter forms,
   endpoints, order states, payment logic, supplier calls, balances, JB or FT.
   ========================================================================== */
:root{
  --rzux-accent:#397fff;
  --rzux-accent-2:#76a8ff;
  --rzux-accent-soft:rgba(57,127,255,.13);
  --rzux-surface-0:#050d18;
  --rzux-surface-1:#081423;
  --rzux-surface-2:#0c1a2c;
  --rzux-surface-3:#112238;
  --rzux-success:#22d397;
  --rzux-warning:#ffbd45;
  --rzux-danger:#ff657a;
  --rzux-info:#69a4ff;
  --rzux-motion-fast:150ms;
  --rzux-motion-base:220ms;
  --rzux-motion-page:300ms;
  --rzux-motion-slow:520ms;
  --rzux-spring:cubic-bezier(.2,.86,.24,1);
  --rzux-standard:cubic-bezier(.4,0,.2,1);
}
body[data-rz-area="reseller"]{--rzux-accent:#3a86ff;--rzux-accent-2:#72b3ff;--rzux-accent-soft:rgba(58,134,255,.13)}
body[data-rz-area="jb"]{--rzux-accent:#8b6dff;--rzux-accent-2:#b198ff;--rzux-accent-soft:rgba(139,109,255,.13)}
body[data-rz-area="ft"]{--rzux-accent:#ff8a3d;--rzux-accent-2:#ffc05d;--rzux-accent-soft:rgba(255,138,61,.14)}
body[data-rz-area="admin"]{--rzux-accent:#4a8dff;--rzux-accent-2:#78b0ff;--rzux-accent-soft:rgba(74,141,255,.13)}
html[data-theme="light"]{
  --rzux-surface-0:#edf3fa;
  --rzux-surface-1:#f7faff;
  --rzux-surface-2:#fff;
  --rzux-surface-3:#f3f7fc;
}
body.rz-unified-web{
  isolation:isolate;
  transition:opacity var(--rzux-motion-fast) ease,transform var(--rzux-motion-fast) ease,background-color var(--rzux-motion-base) ease;
}
body.rz-unified-web::after{
  content:"";
  position:fixed;
  z-index:-2;
  inset:-20vh -12vw auto;
  height:58vh;
  pointer-events:none;
  opacity:.72;
  background:
    radial-gradient(circle at 23% 18%,color-mix(in srgb,var(--rzux-accent) 20%,transparent),transparent 31%),
    radial-gradient(circle at 78% 0%,rgba(34,211,151,.08),transparent 26%);
  filter:blur(18px);
  transform:translateZ(0);
}
html[data-theme="light"] body.rz-unified-web::after{opacity:.38}
body.rz-unified-web.rzux-page-leaving{opacity:.64;transform:translate3d(0,4px,0) scale(.998)}

/* Typography and hierarchy */
body.rz-unified-web :where(h1,h2,h3,h4){text-wrap:balance;letter-spacing:-.025em}
body.rz-unified-web :where(p,.muted,small){text-wrap:pretty}
body.rz-unified-web :where(.eyebrow,.kicker,.section-kicker,.rz-eyebrow,.rs-eyebrow){
  letter-spacing:.115em!important;
  text-transform:uppercase;
  font-weight:900!important;
}
body.rz-unified-web :where(.page-title,.top-title h1,.rs-page-intro h2,.jb-page-title,.ft-page-title){letter-spacing:-.04em}

/* Surfaces stay solid and performant; blur is reserved for navigation and dialogs. */
.rzux-surface{
  position:relative;
  border-color:var(--rzux-line)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.145),inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
html[data-theme="light"] .rzux-surface{box-shadow:0 12px 34px rgba(28,57,91,.075),inset 0 1px rgba(255,255,255,.72)}
.rzux-surface::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(135deg,color-mix(in srgb,var(--rzux-accent) 8%,transparent),transparent 52%);
  transition:opacity var(--rzux-motion-base) ease;
}
@media(hover:hover) and (pointer:fine){.rzux-surface:hover::after{opacity:1}}

/* Controls */
.rzux-control{
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
  transition:transform var(--rzux-motion-fast) var(--rzux-spring),filter var(--rzux-motion-fast) ease,box-shadow var(--rzux-motion-base) ease,border-color var(--rzux-motion-fast) ease!important;
}
.rzux-control.rzux-pressed,.rzux-clickable.rzux-pressed{transform:scale(.972)!important}
body.rz-unified-web :where(.btn,button,[role="button"],input[type="submit"],input[type="button"]){
  min-height:42px;
  border-radius:14px;
}
body.rz-unified-web :where(.btn.primary,button.primary,.ft-button-primary,.rs-primary-btn,.jb-primary-btn){
  background-image:linear-gradient(135deg,var(--rzux-accent),color-mix(in srgb,var(--rzux-accent-2) 88%,white 12%))!important;
  border-color:color-mix(in srgb,var(--rzux-accent) 68%,white 12%)!important;
  color:#fff!important;
  box-shadow:0 12px 28px color-mix(in srgb,var(--rzux-accent) 24%,transparent)!important;
}
@media(hover:hover) and (pointer:fine){
  body.rz-unified-web :where(.btn,button,[role="button"]):not(:disabled):hover{filter:brightness(1.055)}
  body.rz-unified-web :where(.btn.primary,button.primary,.ft-button-primary,.rs-primary-btn,.jb-primary-btn):not(:disabled):hover{box-shadow:0 16px 34px color-mix(in srgb,var(--rzux-accent) 31%,transparent)!important}
}
.rzux-copy-done{box-shadow:0 0 0 4px rgba(34,211,151,.13)!important;border-color:rgba(34,211,151,.5)!important}
body.rz-unified-web :where(input,select,textarea):not([type="checkbox"]):not([type="radio"]){
  min-height:48px;
  background-color:color-mix(in srgb,var(--rzux-card-strong) 90%,transparent);
  border-color:var(--rzux-line)!important;
}
body.rz-unified-web :where(input,select,textarea):not([type="checkbox"]):not([type="radio"]):hover{border-color:var(--rzux-line-strong)!important}
body.rz-unified-web :where(input,select,textarea):not([type="checkbox"]):not([type="radio"]):focus{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--rzux-accent) 78%,white 10%)!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--rzux-accent) 14%,transparent),0 12px 28px rgba(0,0,0,.08)!important;
}
body.rz-unified-web :where(label){font-weight:750}

/* Header and navigation depth */
body.rz-unified-web :where(.topbar,.rz-store-header,.rs-topbar,.jb-topbar,.ft-topbar,.admin-shell .topbar){
  transition:background-color var(--rzux-motion-base) ease,box-shadow var(--rzux-motion-base) ease,border-color var(--rzux-motion-base) ease,transform var(--rzux-motion-base) var(--rzux-spring)!important;
}
body.rzux-scrolled :where(.topbar,.rz-store-header,.rs-topbar,.jb-topbar,.ft-topbar,.admin-shell .topbar){
  box-shadow:0 12px 34px rgba(0,0,0,.18)!important;
  border-color:var(--rzux-line-strong)!important;
}
body.rz-unified-web :where(.rz-store-desktop-nav,.rs-side-nav,.reseller-side-nav,.jb-sidebar nav,.ft-desktop-nav,.nav-menu){scrollbar-width:thin}
body.rz-unified-web :where(.rz-store-desktop-nav a,.rs-side-nav a,.reseller-side-nav a,.jb-sidebar nav a,.ft-desktop-nav a,.admin-nav-link){
  position:relative;
  transition:background-color var(--rzux-motion-fast) ease,color var(--rzux-motion-fast) ease,transform var(--rzux-motion-fast) var(--rzux-spring),box-shadow var(--rzux-motion-base) ease!important;
}
body.rz-unified-web :where(.rz-store-desktop-nav a.active,.rs-side-nav a.active,.reseller-side-nav a.active,.jb-sidebar nav a.active,.ft-desktop-nav a.active,.admin-nav-link.active){
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 9px 24px color-mix(in srgb,var(--rzux-accent) 15%,transparent)!important;
}
body.rz-unified-web :where(.buyer-bottom-nav,.reseller-bottom-nav,.rs-bottom-nav,.jb-bottom-nav,.ft-bottom-nav,.admin-bottom-nav){
  border-color:var(--rzux-line-strong)!important;
  background:color-mix(in srgb,var(--rzux-card-strong) 91%,transparent)!important;
  backdrop-filter:blur(22px) saturate(1.18)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.18)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.29),inset 0 1px rgba(255,255,255,.07)!important;
}
body.rz-unified-web :where(.buyer-bottom-nav a,.reseller-bottom-nav a,.rs-bottom-nav a,.rs-bottom-nav button,.jb-bottom-nav a,.ft-bottom-nav a,.admin-bottom-nav a,.admin-bottom-nav button){
  transition:transform var(--rzux-motion-fast) var(--rzux-spring),background-color var(--rzux-motion-fast) ease,color var(--rzux-motion-fast) ease!important;
}
body.rz-unified-web :where(.buyer-bottom-nav a.active,.reseller-bottom-nav a.active,.rs-bottom-nav a.active,.jb-bottom-nav a.active,.ft-bottom-nav a.active,.admin-bottom-nav a.active){
  background:var(--rzux-accent-soft)!important;
  color:color-mix(in srgb,var(--rzux-accent-2) 88%,white 12%)!important;
}
body.rz-unified-web :where(.buyer-bottom-nav a.active,.reseller-bottom-nav a.active,.rs-bottom-nav a.active,.jb-bottom-nav a.active,.ft-bottom-nav a.active,.admin-bottom-nav a.active) :where(span,svg){animation:rzuxNavLift 360ms var(--rzux-spring)}
@keyframes rzuxNavLift{0%{transform:translateY(3px) scale(.92)}60%{transform:translateY(-2px) scale(1.05)}100%{transform:none}}

/* Page entrance and cards */
.rzux-reveal{opacity:0;transform:translate3d(0,14px,0) scale(.994);will-change:opacity,transform}
.rzux-reveal.rzux-visible{
  opacity:1;
  transform:none;
  transition:opacity var(--rzux-motion-slow) var(--rzux-spring),transform calc(var(--rzux-motion-slow) + 40ms) var(--rzux-spring);
  transition-delay:var(--rzux-delay,0ms);
  will-change:auto;
}
.rzux-clickable{overflow:clip}
@media(hover:hover) and (pointer:fine){
  .rzux-clickable:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(0,0,0,.2)!important}
}
.rzux-status-pop{animation:rzuxStatusPop 640ms var(--rzux-spring)}
@keyframes rzuxStatusPop{0%{transform:scale(.92);filter:brightness(1.25)}45%{transform:scale(1.045)}100%{transform:none;filter:none}}

/* Semantic status chips */
body.rz-unified-web :where(.status-pill,.status-badge,.badge,.pill,.order-status,.rs-status,.jb-status,.ft-status){
  border-radius:999px;
  font-weight:850;
  letter-spacing:.01em;
  transition:background-color var(--rzux-motion-fast) ease,color var(--rzux-motion-fast) ease,border-color var(--rzux-motion-fast) ease,transform var(--rzux-motion-fast) var(--rzux-spring);
}
body.rz-unified-web :where(.status-pill.ok,.status-badge.success,.badge.success,.pill.success,.order-status.success,.rs-status.success,.jb-status.success,.ft-status.success){
  color:#78f4c8!important;border-color:rgba(34,211,151,.34)!important;background:rgba(34,211,151,.105)!important;
}
body.rz-unified-web :where(.status-pill.bad,.status-badge.failed,.badge.danger,.badge.error,.pill.error,.order-status.failed,.rs-status.failed,.jb-status.failed,.ft-status.failed){
  color:#ff9cab!important;border-color:rgba(255,101,122,.34)!important;background:rgba(255,101,122,.105)!important;
}
body.rz-unified-web :where(.status-pill.warn,.status-badge.pending,.badge.warning,.pill.warning,.order-status.pending,.rs-status.pending,.jb-status.pending,.ft-status.pending){
  color:#ffd47b!important;border-color:rgba(255,189,69,.35)!important;background:rgba(255,189,69,.105)!important;
}

/* Store and catalog */
body[data-rz-area="store"] :where(.rz-home-v5-hero,.welcome,.slider,.rz-history-hero,.rz-page-hero,.rz-pay-hero,.tagihan-hero,.rz-account-hero){
  border-color:color-mix(in srgb,var(--rzux-accent) 24%,var(--rzux-line))!important;
  box-shadow:0 24px 60px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.055)!important;
}
body[data-rz-area="store"] :where(.cat-card,.rz-catalog-card,.product-card,.rz-home-product-card,.rz-product-card,.rz-favorite-card){
  background:linear-gradient(145deg,color-mix(in srgb,var(--rzux-card-strong) 97%,transparent),color-mix(in srgb,var(--rzux-card) 93%,transparent))!important;
  border-radius:20px!important;
}
body[data-rz-area="store"] :where(.cat-card,.rz-catalog-card,.product-card,.rz-home-product-card,.rz-product-card) :where(img,.icon,.cat-icon){transition:transform var(--rzux-motion-base) var(--rzux-spring),filter var(--rzux-motion-base) ease}
@media(hover:hover) and (pointer:fine){
  body[data-rz-area="store"] :where(.cat-card,.rz-catalog-card,.product-card,.rz-home-product-card,.rz-product-card):hover :where(img,.icon,.cat-icon){transform:scale(1.035);filter:saturate(1.08)}
}
body[data-rz-area="store"] :where(.price,.product-price,.rz-price,.rz-catalog-price){font-variant-numeric:tabular-nums;letter-spacing:-.025em}

/* Checkout and payment */
body.rz-product-page :where(.buy-card,.rz-checkout-form-card),body.rz-payment-page :where(.rz-payment-card,.rz-pay-panel,.pay-panel){
  border-radius:26px!important;
  box-shadow:0 22px 58px rgba(0,0,0,.21),inset 0 1px rgba(255,255,255,.05)!important;
}
body.rz-product-page :where(.checkout-actions,.actions),body.rz-payment-page :where(.payment-actions,.actions){gap:10px!important}
body.rz-payment-page :where(.qr-box,.qr-wrap,.qris-box){
  border-radius:22px!important;
  border:1px solid var(--rzux-line-strong)!important;
  background:#fff!important;
  box-shadow:0 18px 45px rgba(0,0,0,.16)!important;
}
body.rz-payment-page :where(.countdown,.timer,.payment-timer){font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* Transaction center and order detail */
.rz-history-page-modern .rz-history-toolbar{top:12px!important;border-color:var(--rzux-line-strong)!important}
.rz-history-page-modern .rz-order-history-card,.rz-balance-history-page .rz-balance-history-card{
  transition:transform var(--rzux-motion-base) var(--rzux-spring),box-shadow var(--rzux-motion-base) ease,border-color var(--rzux-motion-fast) ease!important;
}
.rz-track-page .track-status-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 92% 0%,color-mix(in srgb,var(--rzux-accent) 20%,transparent),transparent 38%),
    linear-gradient(145deg,var(--rzux-card-strong),var(--rzux-card))!important;
}
.rz-track-page .track-status-hero::after{content:"";position:absolute;inset:auto -10% -70% 35%;height:130%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rzux-accent) 10%,transparent),transparent 68%);pointer-events:none}
.rz-track-page .track-step{transition:transform var(--rzux-motion-base) var(--rzux-spring),border-color var(--rzux-motion-fast) ease,background-color var(--rzux-motion-fast) ease!important}
.rz-track-page .track-step.current{border-color:color-mix(in srgb,var(--rzux-accent) 48%,var(--rzux-line))!important;box-shadow:0 12px 30px color-mix(in srgb,var(--rzux-accent) 12%,transparent)!important}
.rz-track-page .track-step.current .track-step-icon{animation:rzuxStepPulse 2.2s ease-in-out infinite}
@keyframes rzuxStepPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--rzux-accent) 22%,transparent)}50%{box-shadow:0 0 0 9px transparent}}
.rz-track-page :where(.web-account-card,.product-data-card,.product-note-card,.track-warranty,.replacement-box){border-radius:20px!important}
.rz-track-page :where(.web-account-value,.product-data-value,.token-value){font-variant-numeric:tabular-nums}
.product-note-pre.rzux-collapsed,.supplier-note.rzux-collapsed,.note-content.rzux-collapsed,.instruction-content.rzux-collapsed{max-height:176px;overflow:hidden;position:relative}
.product-note-pre.rzux-collapsed::after,.supplier-note.rzux-collapsed::after,.note-content.rzux-collapsed::after,.instruction-content.rzux-collapsed::after{content:"";position:absolute;inset:auto 0 0;height:64px;background:linear-gradient(transparent,var(--rzux-card-strong));pointer-events:none}
.rzux-note-toggle{margin-top:9px;min-height:38px!important;padding:8px 12px;border:1px solid var(--rzux-line);border-radius:12px;background:var(--rzux-accent-soft);color:var(--rzux-text);font-size:12px;font-weight:850;cursor:pointer}

/* Auth */
body.rzx-page-auth.rz-unified-web{
  background:
    radial-gradient(circle at 20% 8%,color-mix(in srgb,var(--rzux-accent) 22%,transparent),transparent 32rem),
    radial-gradient(circle at 90% 75%,rgba(34,211,151,.08),transparent 28rem),
    var(--rzux-bg)!important;
}
body.rzx-page-auth :where(.auth-modern-card,.auth-card,.auth-panel-wrap){
  border-radius:26px!important;
  box-shadow:0 28px 80px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.055)!important;
}
body.rzx-page-auth :where(.auth-feature-card){border-radius:18px!important}

/* Reseller */
.rs-app.rz-unified-web .rs-dashboard-hero,.rs-app.rz-unified-web .rs-balance-card{
  background:
    radial-gradient(circle at 92% -20%,rgba(114,179,255,.2),transparent 35%),
    linear-gradient(145deg,var(--rzux-card-strong),var(--rzux-card))!important;
}
.rs-app.rz-unified-web :where(.rs-stat-card,.rs-order-card,.rs-summary-card,.rs-method-card,.rs-create-method-card,.rs-service-card,.rs-form-card,.rs-process-card){border-radius:20px!important}
.rs-app.rz-unified-web :where(.rs-progress,.rs-process-progress,progress){overflow:hidden;border-radius:999px}
.rs-app.rz-unified-web progress::-webkit-progress-value{background:linear-gradient(90deg,var(--rzux-accent),var(--rzux-accent-2));transition:width var(--rzux-motion-slow) var(--rzux-spring)}

/* JB transaction-room identity */
.jb-app.rz-unified-web{
  background:
    radial-gradient(circle at 85% 0%,rgba(139,109,255,.12),transparent 35rem),
    var(--jb-bg,var(--rzux-bg))!important;
}
.jb-app.rz-unified-web :where(.jbo-hero,.worker-hero-card,.seller-overview-card){
  background:
    radial-gradient(circle at 94% 0%,rgba(177,152,255,.18),transparent 38%),
    linear-gradient(145deg,var(--rzux-card-strong),var(--rzux-card))!important;
  border-color:rgba(139,109,255,.24)!important;
}
.jb-app.rz-unified-web :where(.jb-action-card,.worker-action-card,.seller-action-card){border-left:3px solid var(--rzux-accent)!important}
.jb-app.rz-unified-web :where(.timeline-step,.jb-step,.worker-step,.jbo-step).current{animation:rzuxJBCurrent 2.4s ease-in-out infinite}
@keyframes rzuxJBCurrent{0%,100%{filter:none}50%{filter:drop-shadow(0 0 9px rgba(139,109,255,.28))}}

/* Fast Tournament identity */
.ft-body.rz-unified-web{
  background:
    radial-gradient(circle at 85% -5%,rgba(255,138,61,.11),transparent 34rem),
    var(--ft-bg,var(--rzux-bg))!important;
}
.ft-body.rz-unified-web :where(.ft-featured-card,.ft-wallet-card,.ft-action-card){
  border-color:rgba(255,138,61,.25)!important;
  background:
    radial-gradient(circle at 92% 0%,rgba(255,192,93,.16),transparent 37%),
    linear-gradient(145deg,var(--rzux-card-strong),var(--rzux-card))!important;
}
.ft-body.rz-unified-web :where(.ft-slot-progress,.ft-progress,progress){overflow:hidden;border-radius:999px}
.ft-body.rz-unified-web progress::-webkit-progress-value{background:linear-gradient(90deg,var(--rzux-accent),var(--rzux-accent-2));transition:width var(--rzux-motion-slow) var(--rzux-spring)}

/* Admin: denser and clearer, not decorative */
.rz-admin-v4.rz-unified-web .sidebar{box-shadow:14px 0 42px rgba(0,0,0,.13)}
.rz-admin-v4.rz-unified-web .content-area{padding-bottom:60px}
.rz-admin-v4.rz-unified-web :where(.stat-card,.admin-card,.table-wrap,.admin-metric-card,.attention-row,.admin-hero-card,.admin-chart-card){
  background:linear-gradient(145deg,color-mix(in srgb,var(--rzux-card-strong) 98%,transparent),color-mix(in srgb,var(--rzux-card) 94%,transparent))!important;
}
.rz-admin-v4.rz-unified-web :where(.table-wrap,.admin-table-wrap){border:1px solid var(--rzux-line)!important;box-shadow:0 14px 38px rgba(0,0,0,.13)!important}
.rz-admin-v4.rz-unified-web table thead th{background:color-mix(in srgb,var(--rzux-card-strong) 94%,transparent)!important}
.rz-admin-v4.rz-unified-web table tbody tr:hover{background:var(--rzux-accent-soft)!important}
.rz-admin-v4.rz-unified-web :where(.danger,.btn-danger,button[name*="delete" i],button[name*="hapus" i]){--rzux-accent:var(--rzux-danger)}

/* Details, modal and sheet motion */
body.rz-unified-web details>summary{padding-block:4px}
body.rz-unified-web details.rzux-details-opened>:not(summary){animation:rzuxDetailsIn var(--rzux-motion-base) var(--rzux-spring)}
@keyframes rzuxDetailsIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
body.rz-unified-web :where(dialog,.modal,.sheet,.bottom-sheet,.rs-create-sheet,.ft-sheet){border-color:var(--rzux-line-strong)!important;box-shadow:0 30px 90px rgba(0,0,0,.34)!important}
body.rz-unified-web dialog[open]{animation:rzuxDialogOpen 280ms var(--rzux-spring)}
body.rz-unified-web dialog::backdrop{background:rgba(2,7,14,.7);backdrop-filter:blur(5px)}
@keyframes rzuxDialogOpen{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}

/* Toast v2 */
.rzux-toast-stack{z-index:2147483000}
.rzux-toast{border-radius:18px;background:color-mix(in srgb,var(--rzux-card-strong) 96%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.rzux-toast.warning{border-color:rgba(255,189,69,.38)}.rzux-toast.warning i{background:rgba(255,189,69,.14);color:var(--rzux-warning)}
.rzux-toast.info{border-color:rgba(105,164,255,.38)}.rzux-toast.info i{background:rgba(105,164,255,.14);color:var(--rzux-info)}

/* Result animation v2 */
.rzux-result-overlay{background:rgba(2,8,16,.76)!important;backdrop-filter:blur(13px) saturate(.9)!important;-webkit-backdrop-filter:blur(13px) saturate(.9)!important}
.rzux-result-dialog{overflow:hidden;border-color:var(--rzux-line-strong)!important;background:linear-gradient(150deg,var(--rzux-card-strong),color-mix(in srgb,var(--rzux-card) 94%,transparent))!important;box-shadow:0 42px 120px rgba(0,0,0,.48)!important}
.rzux-result-dialog::before{content:"";position:absolute;inset:-50% -20% auto;height:75%;background:radial-gradient(circle,color-mix(in srgb,currentColor 13%,transparent),transparent 65%);pointer-events:none}
.rzux-result-kicker{margin:15px 0 6px!important;color:currentColor!important;font-size:10px!important;font-weight:950!important;letter-spacing:.15em!important}
.rzux-result-orbit{position:absolute;left:50%;top:65px;width:124px;height:124px;transform:translateX(-50%);pointer-events:none}
.rzux-result-orbit span{position:absolute;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:0;animation:rzuxOrbit 950ms var(--rzux-spring) forwards}
.rzux-result-orbit span:nth-child(1){left:5%;top:48%;animation-delay:330ms}.rzux-result-orbit span:nth-child(2){right:3%;top:30%;animation-delay:420ms}.rzux-result-orbit span:nth-child(3){left:47%;bottom:0;animation-delay:510ms}
@keyframes rzuxOrbit{0%{opacity:0;transform:scale(.2)}45%{opacity:.75;transform:scale(1.25)}100%{opacity:0;transform:translateY(-15px) scale(.5)}}
.rzux-result-dialog button{background:linear-gradient(135deg,var(--rzux-accent),var(--rzux-accent-2))!important;box-shadow:0 12px 28px color-mix(in srgb,var(--rzux-accent) 25%,transparent)}
.rzux-result-overlay.error .rzux-result-dialog button{background:linear-gradient(135deg,#e94f67,#ff7b8c)!important}

/* Tables and horizontal overflow */
.rzux-scrollable-table{position:relative}
.rzux-scrollable-table::after{content:"Geser untuk melihat tabel";position:sticky;left:12px;bottom:8px;display:inline-flex;padding:5px 9px;border-radius:999px;background:var(--rzux-card-strong);border:1px solid var(--rzux-line);font-size:10px;font-weight:800;color:var(--rzux-muted);pointer-events:none;opacity:.76}
.rzux-table td,.rzux-table th{transition:background-color var(--rzux-motion-fast) ease}

/* Scrollbar */
body.rz-unified-web *{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--rzux-accent) 42%,transparent) transparent}
body.rz-unified-web *::-webkit-scrollbar{width:8px;height:8px}
body.rz-unified-web *::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--rzux-accent) 38%,transparent);border:2px solid transparent;background-clip:padding-box}
body.rz-unified-web *::-webkit-scrollbar-track{background:transparent}

/* Motion levels */
html[data-rz-motion="medium"]{--rzux-motion-fast:110ms;--rzux-motion-base:170ms;--rzux-motion-page:210ms;--rzux-motion-slow:330ms}
html[data-rz-motion="medium"] :where(.rzux-result-orbit,body.rz-unified-web .btn.primary::after){display:none!important}
html[data-rz-motion="low"]{--rzux-motion-fast:80ms;--rzux-motion-base:110ms;--rzux-motion-page:130ms;--rzux-motion-slow:150ms}
html[data-rz-motion="low"] :where(.rzux-result-orbit,.rzux-surface::after){display:none!important}
html[data-rz-motion="low"] :where(.rzux-clickable,.rzux-control):hover{transform:none!important}
html[data-rz-motion="off"] *,html[data-rz-motion="off"] *::before,html[data-rz-motion="off"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html[data-rz-motion="off"] .rzux-reveal{opacity:1!important;transform:none!important}

/* Responsive */
@media(max-width:900px){
  body.rz-unified-web :where(.content-area,.rs-content,.jb-main .container,.ft-container){scroll-margin-top:78px}
  .rz-admin-v4.rz-unified-web .content-area{padding-bottom:96px}
}
@media(max-width:700px){
  body.rz-unified-web::after{height:42vh;opacity:.5}
  .rzux-surface{box-shadow:0 9px 25px rgba(0,0,0,.13),inset 0 1px rgba(255,255,255,.03)}
  body.rz-unified-web :where(.btn,button,[role="button"],input[type="submit"],input[type="button"]){min-height:44px}
  body.rz-unified-web :where(input,select,textarea):not([type="checkbox"]):not([type="radio"]){min-height:50px}
  .rz-history-page-modern .rz-history-toolbar{position:relative!important;top:auto!important}
  .rzux-result-dialog{width:min(92vw,430px)!important;border-radius:25px!important;padding:28px 20px 22px!important}
  .rzux-scrollable-table::after{display:none}
}
@media(max-width:430px){
  body.rz-unified-web :where(.rz-history-hero,.rz-page-hero,.rz-pay-hero,.tagihan-hero,.rz-account-hero,.rs-dashboard-hero,.jbo-hero,.worker-hero-card,.ft-featured-card,.admin-hero-card){border-radius:21px!important}
  body.rz-unified-web :where(.card,.glass-card,.glass-panel,.rz-order-history-card,.rz-balance-history-card,.rs-card,.jb-card,.jbo-card,.ft-content-card,.admin-card){border-radius:18px!important}
  .rzux-toast-stack{bottom:max(86px,calc(env(safe-area-inset-bottom) + 14px))}
}
@media(prefers-reduced-motion:reduce){
  .rzux-result-orbit,.rzux-surface::after{display:none!important}
  body.rz-unified-web{scroll-behavior:auto}
}

/* ======================================================================
   Rizzi Motion v2.1 — critical form safety
   Checkout/order forms must never be clipped or left hidden by reveal CSS.
   ====================================================================== */
body.rz-order-entry-page .form-wrap{
  min-height:100dvh!important;
  place-items:start center!important;
  align-items:start!important;
  justify-items:center!important;
  padding:clamp(22px,4vh,42px) 18px calc(42px + env(safe-area-inset-bottom))!important;
}
body.rz-order-entry-page .rz-critical-form-card,
body.rz-unified-web form[data-rz-critical-form],
body.rz-unified-web form.rz-critical-form-card{
  width:min(520px,100%)!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  contain:none!important;
  content-visibility:visible!important;
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
  isolation:isolate;
}
body.rz-unified-web form[data-rz-critical-form].rzux-reveal,
body.rz-unified-web form[data-rz-critical-form].rz-motion-item,
body.rz-unified-web form.rz-critical-form-card.rzux-reveal,
body.rz-unified-web form.rz-critical-form-card.rz-motion-item{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}
body.rz-unified-web form[data-rz-critical-form] .field,
body.rz-unified-web form.rz-critical-form-card .field,
body.rz-unified-web form[data-rz-critical-form] .rz-notice,
body.rz-unified-web form.rz-critical-form-card .rz-notice{
  display:grid!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  visibility:visible!important;
  opacity:1!important;
}
body.rz-unified-web form[data-rz-critical-form] .rz-notice,
body.rz-unified-web form.rz-critical-form-card .rz-notice{
  display:block!important;
  margin-top:12px!important;
}
body.rz-unified-web form[data-rz-critical-form] .field > :where(label,input:not([type="hidden"]),select,textarea,small),
body.rz-unified-web form.rz-critical-form-card .field > :where(label,input:not([type="hidden"]),select,textarea,small){
  visibility:visible!important;
  opacity:1!important;
  max-height:none!important;
}
body.rz-unified-web form[data-rz-critical-form] .field > :where(input:not([type="hidden"]),select,textarea),
body.rz-unified-web form.rz-critical-form-card .field > :where(input:not([type="hidden"]),select,textarea){
  display:block!important;
  width:100%!important;
  min-height:50px!important;
}
body.rz-unified-web form[data-rz-critical-form] input[type="hidden"],
body.rz-unified-web form.rz-critical-form-card input[type="hidden"]{
  display:none!important;
}
body.rz-unified-web form[data-rz-critical-form] > :where(button[type="submit"],input[type="submit"],.rz-critical-submit),
body.rz-unified-web form.rz-critical-form-card > :where(button[type="submit"],input[type="submit"],.rz-critical-submit){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:50px!important;
  visibility:visible!important;
  opacity:1!important;
}
body.rz-unified-web form[data-rz-critical-form][data-rz-form-integrity="ready"]{
  outline:0;
}
@media(max-width:620px){
  body.rz-order-entry-page .form-wrap{padding:14px 10px calc(28px + env(safe-area-inset-bottom))!important}
  body.rz-order-entry-page .rz-critical-form-card{padding:18px!important;border-radius:23px!important}
}