/* MaxPoint A: Higgsfield reference 1064. Presentation only; no business rules. */
:root{
  --red:#e31b2b;--ink:#1b2731;--muted:#626f7b;--line:#dfe4e9;
  --nav:#18232c;--surface:#fff;--canvas:#f0f4f8;--sidebar-width:200px;
  color:var(--ink);background:var(--canvas);
}
body{line-height:1.45}
button,input,select,textarea{font-size:14px}
button{min-height:40px;border-radius:8px}
button:focus-visible,a:focus-visible{outline:3px solid #215ba4;outline-offset:3px}
input:focus,select:focus,textarea:focus{outline:2px solid #215ba4;outline-offset:2px}
.primary{background:var(--red);border-color:var(--red)}
.primary:hover{background:#be1525}
h1{font-size:32px;letter-spacing:-.9px;line-height:1.2}
h2{font-size:21px}
.app{grid-template-columns:var(--sidebar-width) minmax(0,1fr);grid-template-rows:64px 1fr}
.topbar{
  grid-column:1/-1;grid-row:1;position:sticky;top:0;z-index:20;
  height:64px;padding:0 24px 0 0;justify-content:flex-start;gap:24px;
  background:#fff;border-bottom:1px solid var(--line);
}
.header-brand{flex:0 0 var(--sidebar-width);padding-left:10px}
.brand.logo-brand.app-brand{width:144px;height:48px;aspect-ratio:3/1;margin:0;border-radius:0;background:transparent}
.branch-control{display:flex;gap:12px;align-items:center}
.branch-control .eyebrow{letter-spacing:0;text-transform:none;font-size:12px;color:var(--ink)}
.topbar select{width:200px;background:#fff;border:1px solid var(--line);font-weight:500}
.topbar .right{margin-left:auto;gap:16px}
.status{font-size:12px;color:#365b46}
.sidebar{top:64px;width:var(--sidebar-width);padding:12px 0 16px;background:var(--nav);min-height:0}
.nav-caption{font-size:9px;letter-spacing:1.1px;padding:12px 20px;color:#aab6c0}
.nav{flex:1;min-height:0;gap:3px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#60717d var(--nav)}
.nav button{border-radius:0;padding:11px 20px;min-height:44px;font-size:13px;line-height:1.3;color:#e4eaf0}
.nav button:hover{background:#2b3b47}
.nav button.active{background:var(--red);box-shadow:none}
.nav i{width:21px;height:23px;flex:0 0 21px}
.nav svg{width:21px;height:23px;display:block}
.sidebar-foot{flex-shrink:0;padding:16px 16px 0;border-top:1px solid #41505b;margin:12px 16px 0;font-size:12px}
.sidebar-foot .avatar{background:#30434f;margin-right:5px}
.sidebar-foot .plain{color:#e4eaf0;padding:8px 0;min-height:36px}
.sidebar-foot .plain:hover{background:transparent;color:white;text-decoration:underline}
.main{grid-row:2;grid-column:2;min-width:0;background:var(--canvas)}
.labbar{padding:7px 28px;background:#fff7ea;font-size:11px;color:#72541e}
.content{padding:28px;max-width:1680px}
.page-head{margin-bottom:24px;align-items:flex-start}
.page-head .eyebrow{letter-spacing:1.2px;font-size:9px;margin-bottom:6px}
.page-head .muted{font-size:14px}
.actions{gap:8px}
.metrics{gap:16px}
.metric,.panel{box-shadow:0 2px 7px #172b3a04;border-radius:10px}
.metric .label{font-size:12px;color:var(--muted)}
.metric .value{font-size:30px}
.metric.feature .label{color:white}
.panel{padding:22px}
.panel-head{margin-bottom:16px}
.filters input,.filters select{min-height:44px}
.table-wrap{border-radius:10px}
table{font-size:13px}
th{font-size:11px;color:#5a6672;background:#f8fafc}
td{padding:14px 16px}
td small{font-size:11px}
.tag{font-size:11px;font-weight:600}
.tag.grey{color:#546371;background:#eff3f6}
.sell-layout{grid-template-columns:minmax(0,1fr) minmax(300px,350px);gap:24px}
.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.product{display:grid;grid-template-columns:44px minmax(0,1fr);align-content:center;gap:4px 14px;min-height:142px;padding:20px;border-radius:9px;transition:border-color .12s,box-shadow .12s;position:relative}
.product:hover{transform:none;border-color:#dc7c85;background:white;box-shadow:0 3px 12px #18232c0c}
.product .symbol{grid-column:1;grid-row:1/span 4;width:42px;height:48px;border-radius:0;background:transparent;color:var(--ink);align-self:center}
.product .symbol svg{width:42px;height:48px}
.product strong,.product>small,.product .bottom{grid-column:2}
.product strong{font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.product>small{font-size:11px}
.product>small:empty{display:none}
.product .bottom{flex-wrap:wrap;gap:6px;margin-top:7px}
.product .bottom>b{font-size:23px;letter-spacing:-.5px}
.product .bottom .tag{padding:0;background:transparent;font-weight:400}
.cart{top:84px;padding:22px}
.cart{display:flex;flex-direction:column;max-height:calc(100dvh - 144px);overflow:hidden}
.cart>.panel-head,.cart>.cart-total,.cart>button,.cart>.actions,.cart>p{flex-shrink:0}
.cart-items{flex:1;min-height:80px;overflow:auto}
.sale-catalog{min-width:0}
.sale-catalog>.page-head{flex-wrap:wrap}
.sale-catalog>.page-head>.actions{margin-left:auto}
.sale-catalog>.filters input{flex:1}
.cart .panel-head h2{font-size:24px}
.cart-items{max-height:350px}
.cart-row{font-size:14px;padding:18px 0;gap:12px}
.cart-row small{font-size:11px}
.cart-row>div:last-child{text-align:right;white-space:nowrap}
.qty{gap:7px;flex-wrap:wrap}
.qty button{min-height:32px;min-width:32px}
.qty .plain{min-width:0;color:#ac2633}
.cart-total{font-size:29px;border-top:1px solid var(--line);letter-spacing:-.7px}
.cart .primary{font-size:18px;min-height:52px;border-radius:8px}
.cart>.actions button{font-size:11px;padding:8px;flex:1}
.note{font-size:13px;background:#edf2f6;color:#4d5e6a}
.empty{font-size:14px;color:var(--muted)}
dialog{border-radius:12px;max-height:calc(100dvh - 32px);box-shadow:0 20px 70px #12202f35}
dialog::backdrop{background:#1b293b69;backdrop-filter:none}
dialog #modal-form{display:flex;flex-direction:column;max-height:calc(100dvh - 32px)}
.dialog-head{padding:24px 28px 16px;flex-shrink:0}
.dialog-content{padding:24px 28px;min-height:0;overflow:auto}
.dialog-foot{padding:18px 28px 24px;background:white;flex-shrink:0}
.form-grid label{font-size:13px;font-weight:500;color:var(--ink)}
.form-grid{gap:18px}
.form-grid input,.form-grid select{min-height:44px}
.checkout-dialog{width:min(600px,calc(100vw - 32px))}
.checkout-dialog .dialog-head{border-bottom:0;padding-bottom:0}
.checkout-dialog .dialog-head h2{font-size:30px}
.checkout-dialog .dialog-content{display:flex;flex-direction:column;gap:18px;padding-top:20px;padding-bottom:10px}
.checkout-dialog .form-grid{grid-template-columns:1fr;order:0}
.checkout-dialog .dialog-content>.note{order:2;margin:0;background:transparent;padding:0;font-size:11px;font-weight:400}
.checkout-dialog .dialog-content>.checkout-summary{order:1;background:#f0f4f8;padding:18px;border-radius:8px;font-size:18px;font-weight:650;line-height:1.6;font-variant-numeric:tabular-nums}
.checkout-dialog .error{order:3;margin:0}
.checkout-summary>div{display:flex;justify-content:space-between;gap:16px;font-size:15px;font-weight:400}
.checkout-summary .change-row{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:20px;font-weight:650;color:var(--ink)}
.checkout-summary strong{white-space:nowrap;font-variant-numeric:tabular-nums}
.checkout-dialog .dialog-foot{border-top:0}
.checkout-dialog .dialog-foot button{flex:1;min-height:46px}
.login{background:var(--canvas)}
.login-art{background:white;color:var(--ink);border-right:1px solid var(--line);padding:8vh 10%}
.login-art .brand.logo-brand{max-width:180px;border-radius:0;margin:0 0 18px}
.login-art h1{font-size:44px;letter-spacing:-1.5px}
.login-art p{color:var(--muted)}
.login-form form{background:white;padding:36px;border:1px solid var(--line);border-radius:12px;width:420px;max-width:100%;box-shadow:0 10px 40px #1b273108}
.login-form .mobile-brand{max-width:160px;border-radius:0}
#toast{font-size:14px;background:var(--nav);line-height:1.5}
@media(min-width:1600px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1150px){
  :root{--sidebar-width:184px}
  .content{padding:22px}
  .topbar{gap:14px;padding-right:18px}
  .topbar .right>.muted{display:none}
  .topbar select{width:170px}
  .sell-layout{gap:16px;grid-template-columns:minmax(0,1fr) 300px}
  .product{padding:14px;grid-template-columns:32px minmax(0,1fr);gap:4px 10px}
  .product .symbol,.product .symbol svg{width:32px}
  .product strong{font-size:14px}
  .product .bottom>b{font-size:20px}
  .cart{padding:16px}
}
@media(max-width:900px){.sell-layout{grid-template-columns:1fr}.cart{position:static;max-height:none}.cart-items{max-height:none}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){
  .app{display:block}
  .topbar{position:static;min-height:64px;height:auto;flex-wrap:wrap;padding:8px 16px;gap:8px 16px}
  .header-brand{flex:0 0 144px;padding:0}
  .branch-control{flex:1;justify-content:flex-end}
  .branch-control .eyebrow{display:none}
  .topbar select{width:100%;max-width:220px}
  .topbar .right{width:100%;justify-content:flex-end;gap:12px}
  .sidebar{position:static;width:auto;padding:8px 12px;display:block}
  .nav-caption{display:none}
  .nav{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:4px}
  .nav button{border-radius:6px;padding:10px 14px;flex-shrink:0}
  .sidebar-foot{display:flex;margin:6px 0 0;padding:8px 4px 0;border-color:#41505b}
  .sidebar-foot br{display:none}
  .sidebar-foot .plain{padding:6px 10px}
  .content{padding:22px 16px}
  .labbar{padding:8px 16px}
  .page-head{flex-wrap:wrap;gap:12px}
  .page-head>.actions{width:100%}
  h1{font-size:28px}
  .product{min-height:132px}
  .login-form{padding:20px}
  .login-form form{padding:28px}
}
@media(max-width:460px){
  .header-brand{flex-basis:132px}
  .brand.logo-brand.app-brand{width:132px;height:44px}
  .product-grid{grid-template-columns:1fr}
  .product{grid-template-columns:42px minmax(0,1fr)}
  .product strong{font-size:16px}
  .metrics{grid-template-columns:1fr}
  .dialog-head,.dialog-content,.dialog-foot{padding-left:20px;padding-right:20px}
  .checkout-dialog .dialog-head h2{font-size:26px}
  .checkout-dialog .dialog-content>.checkout-summary{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.product{transition:none}}
@media print{.topbar,.sidebar{display:none!important}}

/* Shared loading and recoverable errors follow the selected A3 visual system. */
.loading-state{display:flex;align-items:center;gap:16px;min-height:128px}
.loading-state p{margin:5px 0 0;font-size:14px}
.loading-dot{flex:0 0 28px;width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--red);border-radius:50%}
.page-error .note{margin-bottom:18px}
.page-error .note p{margin:6px 0 0;overflow-wrap:anywhere}
.page-error .actions{justify-content:flex-start}
@media(max-width:460px){.loading-state{padding:20px;gap:12px}.page-error{padding:20px}}