:root{--ink:#202923;--muted:#858e86;--line:#e7eae4;--paper:#f6f7f3;--green:#3c6449}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:13px 'DM Sans',sans-serif}button,input,select{font:inherit;color:inherit}button{cursor:pointer}aside{width:225px;position:fixed;inset:0 auto 0 0;background:#fff;border-right:1px solid var(--line);padding:27px 18px;display:flex;flex-direction:column}.brand{text-decoration:none;color:var(--ink);display:flex;gap:9px;align-items:center;font:800 20px Manrope,sans-serif}.brand:first-letter{color:#436949}.brand small{display:block;color:#9aa29b;font:600 8px 'DM Sans',sans-serif;letter-spacing:1.1px}.eyebrow,section>small,small{letter-spacing:.5px}.side-bottom{margin-top:auto}.side-bottom small{letter-spacing:0}.eyebrow{font-size:9px;color:#939b94;font-weight:700;margin:38px 0 12px}nav{display:grid;gap:5px}nav button{border:0;background:transparent;text-align:left;padding:11px;border-radius:7px;color:#6e786f;font-weight:600}nav button.active,nav button:hover{background:#edf3ea;color:#365d43}aside footer{margin-top:auto;border-top:1px solid var(--line);padding-top:15px;font-size:11px;font-weight:600}aside footer small{font-size:9px;color:#929a93;font-weight:400}main{margin-left:225px;min-height:100vh}header{height:58px;background:#ffffffa8;border-bottom:1px solid var(--line);padding:0 36px;display:flex;align-items:center;color:#89928a;font-size:11px}header span{padding:0 9px;color:#c1c7c0}header b{color:#505c52}header time{margin-left:auto}.page{display:none;padding:36px;max-width:1160px;margin:auto}.page.active{display:block}.heading,.row{display:flex;justify-content:space-between;align-items:center}.heading{margin-bottom:21px}.heading h1{font:700 27px Manrope,sans-serif;letter-spacing:-.8px;margin:7px 0}.heading p,.row p,.panel p{color:#89928a;font-size:11px;margin:0}.heading small,.panel>small,.row small{font-size:9px;letter-spacing:.9px;color:#929a93;font-weight:700}.primary,.secondary{border:0;border-radius:7px;padding:11px 15px;font-weight:600;font-size:11px}.primary{background:#3c6449;color:white}.secondary{background:#f1f4ef;border:1px solid var(--line)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.stats article,.panel{border:1px solid var(--line);border-radius:10px;background:white;box-shadow:0 3px 15px #1b2b1b08}.stats article{padding:14px;min-height:108px}.stats small{display:block;color:#8b948c;font-size:9px;font-weight:700}.stats b{display:block;font:700 23px Manrope,sans-serif;margin:9px 0 2px}.stats p{margin:0;color:#8b948c;font-size:10px}.columns{display:grid;grid-template-columns:1.05fr .95fr;gap:13px;margin:14px 0}.panel{padding:18px;margin-bottom:13px}.panel h2{font:700 15px Manrope,sans-serif;margin:5px 0 4px}.row .text{border:0;background:none;color:#587558;font-size:10px;font-weight:600}.tabs{display:flex;gap:3px;background:#f3f5f1;padding:4px;border-radius:7px}.tabs button{border:0;background:transparent;padding:7px 11px;color:#7f8980;font-size:10px;border-radius:5px}.tabs button.sel{background:white;color:#3c6449;box-shadow:0 1px 3px #1f2c1e16}.columns .tabs{margin:15px 0 11px}.panel label,.modal label{display:block;margin:12px 0 6px;color:#89928a;font-size:9px;letter-spacing:.7px;font-weight:700}.panel select,.modal select,.modal input,.controls input{width:100%;padding:10px;border:1px solid #e3e7e0;background:#fff;border-radius:6px;outline:none;font-size:11px}.rate-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f0f1ed;padding:9px 0;font-size:11px}.rate-row b{font:700 12px Manrope,sans-serif}.rate-row small{color:#98a098}.empty{text-align:center;color:#89928a;font-size:11px;padding:26px 8px}.controls{gap:12px}.controls input{width:220px}.sizes{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0 16px}.size-chip{background:white;border:1px solid var(--line);padding:7px 10px;border-radius:5px;font-size:10px;color:#6f796f}.size-chip.selected{background:#edf3ea;border-color:#90aa8b;color:#345b41}.catalog-rate{display:grid;grid-template-columns:1.2fr 1fr .7fr auto;align-items:center;gap:10px;border-top:1px solid #f0f1ed;padding:12px 3px}.catalog-rate span:last-child{font-weight:700}.scroll{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{font-size:9px;letter-spacing:.5px;color:#909990;padding:10px;border-bottom:1px solid var(--line)}td{font-size:10px;padding:11px 10px;border-bottom:1px solid #f0f1ed}.green{background:#3c6449;color:white;min-height:130px}.green small,.green p{color:#d7e2d6}.green b{display:block;font:700 30px Manrope,sans-serif;margin:14px 0 3px}.period{display:inline-flex}.break{display:flex;justify-content:space-between;padding:6px 0;font-size:10px}.break b{font-weight:600}.shade{display:none;position:fixed;inset:0;background:#17231c77;z-index:5;align-items:center;justify-content:center;padding:15px}.shade.open{display:flex}.modal{background:white;border-radius:12px;padding:24px;width:min(400px,100%);position:relative}.modal h2{font:700 21px Manrope,sans-serif;margin:7px 0}.modal>p{font-size:11px;color:#8a938b;margin:0 0 16px}.modal>small{color:#879187;font-size:9px;font-weight:700}.close{position:absolute;right:13px;top:9px;border:0;background:none;font-size:22px;color:#849087}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}#toast{position:fixed;right:18px;bottom:18px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:11px 15px;opacity:0;transition:.2s;box-shadow:0 5px 20px #2222}#toast.show{opacity:1}footer{text-align:center;color:#9da59d;padding:15px;font-size:10px}
@media(max-width:950px){aside{width:190px}main{margin-left:190px}.page{padding:26px}.stats{grid-template-columns:1fr 1fr}}@media(max-width:680px){aside{position:fixed;inset:auto 0 0;width:100%;height:56px;padding:3px 8px;border:0;border-top:1px solid var(--line)}aside .brand,aside .eyebrow,aside footer{display:none}nav{display:flex;justify-content:space-around}nav button{font-size:10px;padding:8px}main{margin:0;padding-bottom:56px}header{height:47px;padding:0 14px}.page{padding:21px 13px}.heading h1{font-size:22px}.heading p{font-size:10px}.heading .primary{padding:9px;font-size:9px}.stats{gap:7px}.stats article{padding:11px;min-height:101px}.stats b{font-size:20px}.columns{grid-template-columns:1fr;gap:0}.panel{padding:14px}.controls{align-items:stretch;flex-direction:column}.controls input{width:100%}.catalog-rate{grid-template-columns:1fr auto}.catalog-rate span:last-child{text-align:right;grid-column:2;grid-row:1/3}}

/* Phone-first refinements */
@media(max-width:680px){
  body{font-size:14px;-webkit-text-size-adjust:100%}
  main{padding-bottom:72px}
  aside{height:66px;padding:5px 6px env(safe-area-inset-bottom);}
  nav{align-items:stretch;gap:2px}
  nav button{min-width:0;min-height:48px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:16px;padding:4px 2px}
  nav button span{font-size:9px;line-height:1.1}
  header{height:48px;padding:0 14px;font-size:10px;position:sticky;top:0;z-index:1;backdrop-filter:blur(10px)}
  .page{padding:22px 14px 26px}
  .heading{align-items:flex-start;gap:10px;margin-bottom:17px}
  .heading h1{font-size:23px;line-height:1.18;max-width:330px}
  .heading p{font-size:11px;line-height:1.45;max-width:320px}
  .heading .primary{min-height:42px;white-space:nowrap;padding:9px 11px;font-size:10px}
  .stats{gap:8px}
  .stats article{min-width:0;min-height:108px;padding:12px}
  .stats b{font-size:21px}
  .stats p{font-size:9px;line-height:1.35}
  .panel{padding:15px;border-radius:9px}
  .columns{gap:10px}
  .row{gap:8px}
  .row .text{white-space:nowrap}
  .tabs{width:100%}
  .tabs button{min-height:40px;flex:1;padding:8px 5px;font-size:11px}
  .panel select,.controls input,.modal select,.modal input{min-height:44px;font-size:16px}
  .size-chip{min-height:40px;padding:8px 11px;font-size:11px}
  .catalog-rate{grid-template-columns:minmax(0,1fr) auto;gap:5px 8px;padding:13px 2px}
  .catalog-rate b{font-size:12px;overflow-wrap:anywhere}
  .catalog-rate>small{grid-column:1;grid-row:2}
  .catalog-rate .rate-size,.catalog-rate>span:nth-child(2){font-size:10px}
  .catalog-rate>span:last-child{grid-column:2;grid-row:1/3;align-self:center;font-size:12px}
  .scroll{margin:0 -4px}
  table{min-width:540px}
  th{position:sticky;top:0;background:white}
  td,th{padding:12px 9px}
  .green{min-height:115px}
  .modal{max-height:calc(100dvh - 24px);overflow:auto;padding:22px 19px}
  .modal label{font-size:10px}
  .actions{position:sticky;bottom:-1px;background:white;padding-top:10px}
  .actions button{min-height:44px;flex:1}
  #toast{left:12px;right:12px;bottom:76px;text-align:center}
}
@media(max-width:380px){
  .page{padding-left:11px;padding-right:11px}
  .heading{flex-wrap:wrap}
  .heading h1{font-size:21px}
  .stats article{padding:10px}
  .stats b{font-size:19px}
  .panel{padding:13px}
  header time{font-size:9px}
}

/* METRO ASSOCIATES blue and orange theme */
:root{--ink:#142b45;--muted:#53677d;--line:#d9e3ef;--paper:#fff;--green:#0053ae}
body{background:#fff;color:#142b45}
aside,.panel,.stats article,.modal{background:#fff}
aside{border-color:#d9e3ef}
.brand,.brand:hover{color:#0053ae}
.brand:first-letter,.dot{color:#f5822d}
.brand small,.eyebrow,.heading small,.panel>small,.row small,.panel label,.modal label,.stats small{color:#52677e}
nav button{color:#314b66}
nav button.active,nav button:hover{background:#eaf2fb;color:#0053ae}
.primary{background:#0053ae;color:#fff}
.primary:hover{background:#003f87}
.secondary{background:#fff;border:1px solid #cbd9e9;color:#0053ae}
.text,.row .text{color:#0053ae}
.tabs{background:#eff4fa}
.tabs button{color:#455c73}
.tabs button.sel{background:#0053ae;color:#fff;box-shadow:0 1px 4px #0053ae30}
.size-chip{border-color:#cbd9e9;color:#294561}
.size-chip.selected{background:#0053ae;border-color:#0053ae;color:#fff}
.stats article,.panel{border-color:#d9e3ef;box-shadow:0 3px 14px #173b6010}
.stats p,.heading p,.row p,.panel p{color:#52677e}
.rate-row,.catalog-rate{border-color:#e6edf5}
.rate-row b,.rate-row strong,.catalog-rate span:last-child{color:#0053ae}
.rate-row small{color:#53677d}
.green{background:#0053ae;color:white;border-color:#0053ae}
.green small,.green p{color:#e6f0fc}
.size-chip:hover,.secondary:hover{border-color:#f5822d;color:#0053ae}
.primary:focus-visible,.secondary:focus-visible,.tabs button:focus-visible,.size-chip:focus-visible,nav button:focus-visible{outline:3px solid #f5822d;outline-offset:2px}
.live{background:#f5822d}
.type-tag{background:#fff0e5;color:#a84d00}
.action{color:#0053ae}
.action:hover{color:#c85e0a}
.modal select:focus,.modal input:focus,.panel select:focus,.controls input:focus{border-color:#0053ae;box-shadow:0 0 0 3px #0053ae20}
.empty{color:#52677e}

/* Make the requested orange a visible part of the interface */
.primary{background:#f5822d;color:#172b40}
.primary:hover{background:#e96e18;color:#172b40}
.brand .dot{color:#f5822d}
.stats article:first-child{border-top:3px solid #f5822d}
.stats article:nth-child(2){border-top:3px solid #0053ae}
.live{background:#f5822d;box-shadow:0 0 0 3px #fff0e5}
.period button[data-period="today"].sel{background:#0053ae;color:#fff}
.period button[data-period="month"].sel{background:#f5822d;color:#172b40}
.type-tag{background:#fff0e5;color:#a84d00}
.size-chip:hover,.secondary:hover{background:#fff0e5;border-color:#f5822d}
.pattern{display:block;margin-top:4px;color:#52677e;font-size:10px;font-weight:400;letter-spacing:0}

/* Balanced Metro Associates palette: white canvas with blue and orange sections */
body{background:#fff}
aside{background:#0053ae;color:#fff;border-right-color:#0053ae}
aside .brand,aside .brand:hover{color:#fff}
aside .brand .dot{color:#ffb16f}
aside .brand small,aside .eyebrow,aside footer,aside footer small{color:#e1edfb}
aside nav button{color:#edf5ff}
aside nav button.active,aside nav button:hover{background:#f5822d;color:#172b40}
aside footer{border-top-color:#ffffff40}
.wheel{background:#fff;color:#0053ae}
header{background:#0053ae;color:#fff;border-bottom:3px solid #f5822d}
header span{color:#c5dcf7}
header b,header time{color:#fff}
.heading h1{color:#064b95}
.heading .eyebrow,.heading>div>small{color:#0053ae}
.stats article:nth-child(odd){background:#fff1e6;border-color:#f7d1b2}
.stats article:nth-child(even){background:#eaf2fb;border-color:#c7dcf4}
.stats article:first-child{border-top:3px solid #f5822d}
.stats article:nth-child(2){border-top:3px solid #0053ae}
.stats article:nth-child(3){border-top:3px solid #f5822d}
.stats article:nth-child(4){border-top:3px solid #0053ae}
.stats small{color:#334e69}
.columns:not(.summary)>.panel:first-child{background:#eaf2fb;border-color:#c7dcf4}
.columns:not(.summary)>.panel:last-child{background:#fff1e6;border-color:#f7d1b2}
.panel{border-color:#d4e0ed}
.tabs{background:#dce9f7}
.tabs button.sel{background:#0053ae;color:#fff}
.tabs button:not(.sel):hover{background:#fff0e5;color:#a84d00}
.primary{background:#f5822d;color:#172b40}
.primary:hover{background:#e96e18;color:#172b40}
.secondary{background:#0053ae;color:#fff;border-color:#0053ae}
.secondary:hover{background:#003f87;color:#fff}
.row .text,.text{color:#0053ae}
.green{background:#0053ae;color:#fff;border-color:#0053ae}
.green small,.green p{color:#e5f0fc}
#sales .columns>.panel:not(.green){background:#fff1e6;border-color:#f7d1b2}
#sales .period button[data-period="month"].sel{background:#f5822d;color:#172b40}
#sales .period button[data-period="today"].sel{background:#0053ae;color:#fff}
#rates .catalog-rate:nth-child(odd){background:#fff5ed}
#rates .catalog-rate:nth-child(even){background:#eff5fc}
#rates .catalog-rate{padding-left:10px;padding-right:10px}
#prices tbody tr:nth-child(odd){background:#eff5fc}
#prices tbody tr:nth-child(even){background:#fff5ed}
#prices tbody tr:hover{background:#ffe4ce}
.size-chip.selected{background:#0053ae;color:#fff;border-color:#0053ae}
.live{background:#f5822d;box-shadow:0 0 0 3px #ffffff44}
.empty>span{background:#eaf2fb;color:#0053ae}
.action{color:#0053ae}
@media(max-width:680px){aside{background:#0053ae}nav button.active,nav button:hover{background:#f5822d;color:#172b40}header{background:#0053ae;color:#fff}.columns:not(.summary)>.panel:first-child{background:#eaf2fb}.columns:not(.summary)>.panel:last-child{background:#fff1e6}}
/* Keep the sales total card blue behind its white total text. */
#sales .columns>.panel.green{background:#0053ae;color:#fff;border-color:#0053ae}
#sales .columns>.panel.green strong{color:#fff}
#sales .columns>.panel.green small,#sales .columns>.panel.green p{color:#e5f0fc}

.auth-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#0053ae 0 32%,#fff 32% 69%,#f5822d 69% 100%)}
.auth-card{width:min(410px,100%);padding:30px;background:#fff;border:1px solid #d9e3ef;border-radius:14px;box-shadow:0 18px 55px #12385a30}
.auth-brand{display:flex;align-items:center;gap:10px;color:#0053ae;font:800 20px Manrope,sans-serif}
.auth-brand>span{display:block}.auth-brand small{display:block;margin-top:3px;color:#52677e;font:600 9px 'DM Sans',sans-serif;letter-spacing:1px}
.auth-card h1{margin:26px 0 5px;color:#064b95;font:700 24px Manrope,sans-serif}
.auth-card>p{color:#52677e;font-size:12px}
.auth-card label{display:block;margin:17px 0 7px;color:#334e69;font-size:10px;font-weight:700;letter-spacing:.7px}
.auth-card input{width:100%;min-height:44px;padding:11px 12px;border:1px solid #cbd9e9;border-radius:7px;font:inherit;font-size:14px;color:#142b45;background:#fff}
.auth-card input:focus{outline:3px solid #0053ae24;border-color:#0053ae}
.auth-card form .primary{width:100%;min-height:45px;margin-top:22px}
.auth-message{min-height:18px;margin:14px 0 0;font-size:11px;line-height:1.45}
.auth-message.error{color:#9a3d12}
.user-email{margin-left:auto;color:#e5f0fc;font-size:10px;max-width:230px;overflow:hidden;text-overflow:ellipsis}
header time{margin-left:14px}
.signout{margin-left:12px;padding:7px 10px;border:1px solid #ffffff70;border-radius:6px;background:#ffffff12;color:#fff;font-size:10px;font-weight:600}
.signout:hover{background:#f5822d;color:#172b40;border-color:#f5822d}
@media(max-width:680px){.auth-screen{padding:16px;background:linear-gradient(145deg,#0053ae 0 28%,#fff 28% 76%,#f5822d 76% 100%)}.auth-card{padding:24px 20px}.user-email{display:none}header time{margin-left:auto}.signout{margin-left:8px;padding:7px}}

/* The sign-in panel has an explicit display style, so honor its hidden state after login. */
#auth-screen[hidden]{display:none!important}
.auth-card form[hidden],.auth-card button[hidden]{display:none!important}
.auth-link{display:block;margin:12px auto 0;padding:5px;border:0;background:none;color:#0053ae;font-size:12px;text-decoration:underline;text-underline-offset:3px}
.auth-link:hover{color:#a84d00}