:root{--bg:#f7f7fb;--card:#fff;--text:#17151d;--muted:#6f6b78;--line:#e9e7ef;--accent:#7c3aed;--accent2:#ede9fe;--danger:#b42318;--warn:#b54708;--ok:#067647;--shadow:0 12px 32px rgba(24,18,43,.08)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.hidden{display:none!important}.muted{color:var(--muted);margin:.2rem 0}.tiny{font-size:.78rem;color:var(--muted)}button,input,select,textarea{font:inherit}.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top,#ede9fe 0,#f7f7fb 42%)}.auth-card{width:min(440px,100%);background:var(--card);padding:28px;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.brand-mark{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:800}.stack{display:grid;gap:14px;margin-top:18px}label{display:grid;gap:7px;font-size:.9rem;font-weight:650}input,select,textarea{width:100%;border:1px solid #d9d6e2;border-radius:12px;padding:12px 13px;background:#fff;color:var(--text);outline:none}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,58,237,.1)}textarea{min-height:92px;resize:vertical}.primary,.ghost,.link-btn,.icon-btn,.segmented button{border:0;cursor:pointer}.primary{background:var(--accent);color:white;padding:12px 16px;border-radius:12px;font-weight:750}.ghost{background:#fff;color:var(--text);border:1px solid var(--line);padding:10px 14px;border-radius:12px}.segmented{display:grid;grid-template-columns:1fr 1fr;background:#f1eff5;border-radius:12px;padding:4px;margin-top:20px}.segmented button{padding:10px;border-radius:9px;background:transparent}.segmented button.active{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.06)}.app-shell{min-height:100vh}.topbar{position:sticky;top:0;z-index:5;background:rgba(247,247,251,.92);backdrop-filter:blur(12px);display:flex;justify-content:space-between;align-items:center;padding:14px max(18px,calc((100vw - 1120px)/2));border-bottom:1px solid var(--line)}.topbar h2{margin:2px 0 0;font-size:1rem}.eyebrow{font-weight:850;color:var(--accent);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.content{max-width:1120px;margin:0 auto;padding:28px 18px 100px}.screen{display:none}.screen.active{display:block}.screen-head{display:flex;justify-content:space-between;align-items:end;gap:14px;margin-bottom:20px}.screen-head h1{margin:0;font-size:1.8rem}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.metric{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px}.metric .value{font-size:1.7rem;font-weight:850}.metric .label{font-size:.82rem;color:var(--muted)}.panel{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 4px 16px rgba(24,18,43,.03);overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}.panel-head h3{margin:0}.link-btn{background:none;color:var(--accent);font-weight:700}.list{display:grid}.list-row{display:grid;grid-template-columns:1.2fr 1fr auto;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}.list-row:last-child{border-bottom:0}.list-main{font-weight:760}.list-sub{font-size:.85rem;color:var(--muted);margin-top:4px}.badge{display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;font-size:.75rem;font-weight:800;background:#f1eff5}.badge.red{background:#fee4e2;color:var(--danger)}.badge.amber{background:#fef0c7;color:var(--warn)}.badge.green{background:#dcfae6;color:var(--ok)}.badge.purple{background:var(--accent2);color:var(--accent)}.row-actions{display:flex;gap:7px;justify-content:flex-end}.row-actions button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 9px;cursor:pointer}.search{min-width:220px}.filter-row{display:flex;gap:10px;margin-bottom:12px}.filter-row select{max-width:200px}.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:6;display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid var(--line);padding:7px max(8px,calc((100vw - 700px)/2)) max(7px,env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(0,0,0,.04)}.bottom-nav button{border:0;background:none;display:grid;gap:2px;place-items:center;color:var(--muted);font-size:1.15rem;padding:4px;cursor:pointer}.bottom-nav button span{font-size:.68rem}.bottom-nav button.active{color:var(--accent);font-weight:800}dialog{border:0;padding:0;border-radius:22px;width:min(720px,calc(100% - 24px));box-shadow:0 24px 80px rgba(0,0,0,.24)}dialog::backdrop{background:rgba(20,16,30,.52)}.modal-card{background:#fff}.modal-head{display:flex;justify-content:space-between;align-items:start;padding:20px 20px 12px;border-bottom:1px solid var(--line)}.modal-head h2{margin:0}.icon-btn{font-size:1.7rem;background:none}.modal-body{padding:18px 20px;display:grid;gap:14px;max-height:68vh;overflow:auto}.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--line)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid .full{grid-column:1/-1}.section-label{font-size:.75rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-top:4px}.checkbox-row{display:flex;gap:14px;flex-wrap:wrap}.checkbox-row label{display:flex;align-items:center;gap:7px;font-weight:550}.checkbox-row input{width:auto}.callout{padding:12px 14px;background:#fffaeb;border:1px solid #fedf89;border-radius:12px;color:#7a2e0e}.empty{padding:28px;text-align:center;color:var(--muted)}.toast{position:fixed;z-index:99;top:18px;left:50%;transform:translateX(-50%);background:#17151d;color:#fff;padding:11px 15px;border-radius:12px;box-shadow:var(--shadow)}@media(max-width:760px){.metric-grid{grid-template-columns:repeat(2,1fr)}.screen-head{align-items:start}.list-row{grid-template-columns:1fr auto}.list-row>div:nth-child(2){display:none}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.filter-row{flex-direction:column}.filter-row select{max-width:none}.topbar{padding-inline:14px}.content{padding-inline:12px}.auth-card{padding:22px}.screen-head h1{font-size:1.55rem}}


.order-page{display:grid;gap:16px}.order-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.order-section{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 4px 16px rgba(24,18,43,.03);padding:18px}.order-section-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}.order-section-head h3{margin:0}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.detail-box{background:#faf9fc;border:1px solid var(--line);border-radius:14px;padding:12px}.detail-label{font-size:.75rem;color:var(--muted);margin-bottom:4px}.detail-value{font-weight:750;word-break:break-word}.item-card,.payment-card,.fit-card,.measurement-card{border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:10px}.action-line{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.danger-btn{border:1px solid #fecdca;background:#fff;color:var(--danger);padding:9px 12px;border-radius:10px;cursor:pointer}.soft-btn{border:1px solid var(--line);background:#fff;padding:9px 12px;border-radius:10px;cursor:pointer}.money-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}.money-box{border:1px solid var(--line);border-radius:14px;padding:12px;background:#faf9fc}.money-box strong{display:block;font-size:1.2rem;margin-top:4px}.measurement-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}.measurement-mini div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding:4px 0}
@media(max-width:760px){.order-summary-grid,.detail-grid,.money-grid{grid-template-columns:1fr}.order-section{padding:14px}.measurement-mini{grid-template-columns:1fr}}



/* =========================================================
   ANIQ FitFlow V1.3 — Premium Atelier UI
   Quiet luxury / fashion atelier / practical mobile workflow
   ========================================================= */
:root{
  --bg:#f5f1ec;
  --bg-soft:#faf7f3;
  --card:#fffdfb;
  --text:#241d22;
  --muted:#756b70;
  --line:#e7ddd5;
  --line-strong:#d7c8bd;
  --accent:#4a2944;
  --accent-deep:#321b2e;
  --accent-soft:#f1e9ef;
  --gold:#a47c48;
  --gold-soft:#f5eee3;
  --danger:#9f3a3a;
  --danger-soft:#f9e9e7;
  --warn:#a26824;
  --warn-soft:#f9f0df;
  --ok:#39705a;
  --ok-soft:#e9f3ee;
  --shadow:0 18px 50px rgba(64,43,52,.075);
  --shadow-soft:0 8px 26px rgba(64,43,52,.05);
}
html{background:var(--bg)}
body{
  background:
    radial-gradient(circle at 8% -10%,rgba(164,124,72,.10),transparent 28rem),
    radial-gradient(circle at 95% 8%,rgba(74,41,68,.065),transparent 30rem),
    var(--bg);
  color:var(--text);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.002em;
}
h1,h2,h3,.brand-lockup h1{
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:-.025em;
  font-weight:500;
}
button{transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease}
button:active{transform:translateY(1px)}
.muted{color:var(--muted)}
.auth-shell{
  background:
    linear-gradient(125deg,rgba(74,41,68,.055),transparent 42%),
    radial-gradient(circle at 82% 18%,rgba(164,124,72,.15),transparent 24rem),
    #f4efe9;
}
.auth-card{
  width:min(470px,100%);
  border:1px solid rgba(164,124,72,.25);
  border-radius:28px;
  padding:34px;
  box-shadow:0 30px 80px rgba(62,37,52,.11);
  background:rgba(255,253,251,.96);
}
.brand-lockup{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.brand-lockup h1{font-size:2rem;margin:0;color:var(--accent-deep)}
.brand-overline,.micro-label,.page-kicker,.section-kicker{
  font-size:.67rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)
}
.auth-tagline{font-family:Georgia,"Times New Roman",serif;font-size:1.08rem;line-height:1.55;color:#62575c;margin:0 0 18px}
.brand-mark,.mini-monogram{
  background:linear-gradient(145deg,var(--accent-deep),var(--accent));
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),0 10px 28px rgba(74,41,68,.18)
}
.brand-mark{width:54px;height:54px;border-radius:18px;font-family:Georgia,serif;font-size:1.05rem;font-weight:600}
.mini-monogram{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;font-family:Georgia,serif;font-size:.78rem}
.topbar{
  background:rgba(245,241,236,.88);
  border-bottom:1px solid rgba(215,200,189,.72);
  backdrop-filter:blur(18px);
  padding-top:12px;padding-bottom:12px;
}
.topbar-brand{display:flex;align-items:center;gap:11px}
.topbar h2{font-family:"Segoe UI",sans-serif;font-size:.92rem;font-weight:650;letter-spacing:0;margin:2px 0 0}
.eyebrow{font-size:.67rem;letter-spacing:.16em;color:var(--gold)}
.quiet-logout{background:rgba(255,253,251,.65)}
.content{max-width:1180px;padding-top:34px}
.screen-head{align-items:center;margin-bottom:24px}
.screen-head h1{font-size:2.35rem;color:var(--accent-deep);line-height:1.05}
.page-kicker{display:block;margin-bottom:7px}
.primary{
  background:linear-gradient(135deg,var(--accent-deep),var(--accent));
  color:#fff;border-radius:14px;padding:11px 16px;font-weight:650;
  box-shadow:0 8px 22px rgba(74,41,68,.16)
}
.primary:hover{box-shadow:0 11px 26px rgba(74,41,68,.22);transform:translateY(-1px)}
.compact-primary{padding:9px 13px;border-radius:12px}
.ghost,.soft-btn{
  background:rgba(255,253,251,.82)!important;
  border:1px solid var(--line)!important;
  color:#4d4147!important;
  font-weight:600!important;
}
.link-btn{color:var(--accent);font-weight:650}
input,select,textarea{
  border:1px solid var(--line-strong);
  border-radius:13px;
  background:#fffefa;
  padding:12px 13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)
}
input:focus,select:focus,textarea:focus{
  border-color:#8a667f;
  box-shadow:0 0 0 4px rgba(74,41,68,.08)
}
label{font-size:.81rem;color:#564a50;font-weight:650}
.segmented{background:#eee6e9;border:1px solid #e3d7dc}
.segmented button.active{box-shadow:0 4px 14px rgba(74,41,68,.07)}
.metric-grid{gap:15px;margin-bottom:22px}
.metric{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#fffefa,#fbf7f2);
  border:1px solid var(--line);
  border-radius:22px;padding:18px;
  box-shadow:var(--shadow-soft)
}
.metric:after{
  content:"";position:absolute;width:90px;height:90px;border-radius:50%;
  right:-42px;top:-45px;background:rgba(164,124,72,.065)
}
.metric-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px}
.metric-icon{
  display:grid;place-items:center;width:28px;height:28px;border-radius:10px;
  background:var(--gold-soft);color:var(--gold);font-size:.82rem;font-weight:800
}
.metric-hint{font-size:.68rem;color:#9a8f93;text-align:right}
.metric .value{font-family:Georgia,"Times New Roman",serif;font-size:2rem;font-weight:500;color:var(--accent-deep);margin-top:10px}
.metric .label{font-size:.78rem;letter-spacing:.02em;color:#766a70;margin-top:3px}
.panel,.order-section{
  background:rgba(255,253,251,.94);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft)
}
.panel{border-radius:22px}
.panel-head{padding:18px 20px}
.panel-head h3{font-size:1.25rem;margin:3px 0 0;color:var(--accent-deep)}
.list-row{padding:16px 20px}
.list-row:hover{background:#fdf9f5}
.list-main{font-size:.95rem;font-weight:670;color:#32282e}
.list-sub{font-size:.78rem;color:#81767b}
.row-actions button{
  background:#fffdfb;border:1px solid var(--line);border-radius:11px;padding:8px 11px;color:#594951;font-weight:600
}
.row-actions button:hover{border-color:#bda99d;background:#faf4ef}
.filter-row{gap:10px}
.search{background:rgba(255,253,251,.95)}
.badge{
  border-radius:999px!important;padding:6px 10px!important;
  font-size:.68rem!important;font-weight:750!important;letter-spacing:.025em
}
.badge.purple{background:var(--accent-soft)!important;color:var(--accent)!important}
.badge.green{background:var(--ok-soft)!important;color:var(--ok)!important}
.badge.amber{background:var(--warn-soft)!important;color:var(--warn)!important}
.badge.red{background:var(--danger-soft)!important;color:var(--danger)!important}
.bottom-nav{
  background:rgba(255,253,251,.92);
  border-top:1px solid var(--line);
  backdrop-filter:blur(18px);
  box-shadow:0 -10px 30px rgba(64,43,52,.035)
}
.bottom-nav button{color:#887d82}
.bottom-nav button.active{color:var(--accent);font-weight:700}
.bottom-nav button span{font-size:.66rem;margin-top:3px}
dialog{border:0;background:transparent}
dialog::backdrop{background:rgba(38,28,34,.42);backdrop-filter:blur(4px)}
.modal-card{
  border:1px solid rgba(164,124,72,.23)!important;
  border-radius:25px!important;
  background:#fffdfb!important;
  box-shadow:0 30px 90px rgba(39,25,33,.22)!important
}
.modal-head{padding:21px 22px 16px!important}
.modal-head h2{font-size:1.55rem;color:var(--accent-deep)}
.modal-body{padding:6px 22px 22px!important}
.modal-actions{padding:15px 22px!important;background:#fbf7f3!important}
.icon-btn{background:#f5eee9!important;color:#6a5a62!important;border-radius:50%!important;width:34px;height:34px}
.section-label{font-size:.69rem!important;letter-spacing:.13em!important;color:var(--gold)!important;text-transform:uppercase!important;font-weight:800!important}
.callout{
  border:1px solid #ead9c5!important;
  background:#fbf4e9!important;
  color:#665445!important;
  border-radius:14px!important
}

/* Order page */
.order-page{gap:18px}
.order-hero{
  display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:20px;
  background:linear-gradient(135deg,#382033 0%,#4a2944 58%,#6a4b58 100%);
  color:#fff;border-radius:27px;padding:24px;
  box-shadow:0 24px 55px rgba(50,27,46,.16);
  overflow:hidden;position:relative
}
.order-hero:after{
  content:"";position:absolute;width:240px;height:240px;border:1px solid rgba(212,177,123,.19);
  border-radius:50%;right:-120px;top:-125px;box-shadow:0 0 0 24px rgba(212,177,123,.035),0 0 0 52px rgba(212,177,123,.025)
}
.order-hero-main,.order-hero-side{position:relative;z-index:1}
.order-hero .micro-label{color:#d8bd91}
.order-hero-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:5px}
.order-hero h2{font-size:2rem;margin:0;color:#fff}
.order-hero p{margin:5px 0 0;color:#ddcfd7}
.order-hero .badge{background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.15)}
.delivery-card{
  height:100%;min-height:126px;border-radius:20px;padding:16px;
  display:flex;flex-direction:column;justify-content:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14)
}
.delivery-card strong{font-family:Georgia,serif;font-size:1.25rem;font-weight:500;margin:7px 0 4px}
.delivery-card small{color:#e4d8de}
.delivery-card.danger{background:rgba(170,62,62,.28)}
.delivery-card.warning{background:rgba(170,112,36,.24)}
.delivery-card.attention{background:rgba(164,124,72,.21)}
.status-track{
  display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;margin-top:21px
}
.status-step{
  position:relative;display:grid;justify-items:center;gap:5px;
  color:#ae9aa5;font-size:.58rem;text-align:center
}
.status-step:before{
  content:"";position:absolute;top:11px;left:-50%;width:100%;height:1px;background:rgba(255,255,255,.13)
}
.status-step:first-child:before{display:none}
.status-dot{
  width:23px;height:23px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);background:#53364b;color:#cbbac3;font-size:.61rem;z-index:1
}
.status-step.done,.status-step.current{color:#fff}
.status-step.done .status-dot{background:#9a7749;border-color:#c6a36d;color:#fff}
.status-step.current .status-dot{background:#fff;color:var(--accent-deep);border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.10)}
.order-summary-grid{gap:14px}
.money-metric{min-height:125px}
.balance-due{border-color:#ead2c6;background:linear-gradient(160deg,#fffdfb,#fdf3ed)}
.balance-clear{border-color:#cfe2d9;background:linear-gradient(160deg,#fffdfb,#f2f8f5)}
.order-section{border-radius:23px;padding:20px}
.order-section-head{margin-bottom:16px}
.order-section-head>div:first-child{display:flex;align-items:center;gap:10px}
.order-section-head h3{font-size:1.28rem;color:var(--accent-deep)}
.section-kicker{
  width:30px;height:30px;display:grid;place-items:center;border-radius:10px;
  background:var(--gold-soft);letter-spacing:0;color:var(--gold);font-size:.63rem
}
.detail-grid{gap:10px}
.detail-box{
  background:#fbf8f4;border:1px solid #eee4dc;border-radius:15px;padding:13px
}
.detail-label{font-size:.65rem;letter-spacing:.09em;text-transform:uppercase;color:#9b8d91}
.detail-value{font-weight:650;color:#3c3036}
.item-card,.payment-card,.fit-card,.measurement-card{
  background:#fffefa;border:1px solid var(--line);border-radius:17px;padding:15px;
  box-shadow:0 5px 16px rgba(64,43,52,.025)
}
.item-card+.item-card{margin-top:14px}
.garment-title{display:block;font-family:Georgia,serif;font-size:1.25rem;font-weight:500;color:var(--accent-deep);margin:3px 0}
.premium-measurement-card{margin-top:10px;background:linear-gradient(150deg,#fffefa,#faf6f0)}
.measurement-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.measurement-card-head strong{display:block;font-family:Georgia,serif;font-size:1.06rem;font-weight:500;color:var(--accent-deep);margin-top:3px}
.version-chip{
  flex:none;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:6px 9px;
  font-size:.67rem;font-weight:800
}
.measurement-mini{margin-top:13px!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:0}
.measurement-mini div{
  padding:8px 0;border-bottom:1px dashed #e7ddd5;
  color:#5e5258
}
.measurement-mini strong{font-size:.85rem;font-weight:700;color:#2f252b}
.note-strip{
  display:grid;grid-template-columns:72px 1fr;gap:10px;margin-top:10px;padding:10px 12px;
  border-radius:12px;background:var(--gold-soft);font-size:.82rem;color:#655448
}
.note-strip span{font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--gold)}
.note-strip.fit{background:var(--accent-soft);color:#5b4656}
.note-strip.fit span{color:var(--accent)}
.measurement-empty{display:flex;gap:12px;align-items:center;padding:15px;border:1px dashed var(--line-strong);border-radius:15px;background:#fcf8f4}
.measurement-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:var(--gold-soft);color:var(--gold)}
.history-measure-row{
  display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid var(--line);
  color:#5e5258
}
.history-measure-row strong{font-size:.86rem;color:#2f252b}

/* Mobile refinements */
@media(max-width:760px){
  .content{padding:22px 14px 92px}
  .screen-head h1{font-size:2rem}
  .metric-grid{grid-template-columns:repeat(2,1fr)}
  .metric-hint{display:none}
  .metric{padding:15px;border-radius:18px}
  .order-hero{grid-template-columns:1fr;padding:19px;border-radius:22px}
  .order-hero h2{font-size:1.6rem}
  .delivery-card{min-height:auto}
  .status-track{overflow-x:auto;grid-template-columns:repeat(9,72px);padding-bottom:5px;justify-content:start}
  .order-summary-grid{grid-template-columns:repeat(3,1fr)}
  .order-summary-grid .metric{min-width:0;padding:13px 10px}
  .order-summary-grid .metric .value{font-size:1.25rem}
  .order-section{padding:15px;border-radius:19px}
  .order-section-head{align-items:flex-start}
  .order-section-head>div:first-child{gap:8px}
  .measurement-mini{grid-template-columns:1fr}
  .list-row{grid-template-columns:1fr;gap:8px}
  .row-actions{justify-content:flex-start}
}
@media(max-width:440px){
  .auth-card{padding:25px 20px;border-radius:23px}
  .screen-head{align-items:flex-start}
  .screen-head .primary{white-space:nowrap}
  .order-summary-grid{grid-template-columns:1fr}
  .money-metric{min-height:auto}
}


/* =========================================================
   V1.4 — Refinement pass
   ========================================================= */

/* Page layout */
.content{max-width:1240px}
.screen-head{margin-bottom:20px}
.screen-head>div{max-width:720px}
.order-detail-heading{display:grid;justify-items:start;gap:3px}
.order-detail-heading .page-kicker{margin-top:14px}
.order-detail-heading h1{font-size:2rem;margin:1px 0 0}
.order-detail-heading .muted{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:5px}
.back-link{padding:8px 11px!important;border-radius:10px!important;font-size:.8rem}
.order-number-chip{
  display:inline-flex;padding:5px 8px;border-radius:8px;background:var(--gold-soft);
  color:#7a5c35;font-size:.72rem;font-weight:750;letter-spacing:.035em
}
.order-hero{margin-top:2px}
.order-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.metric{min-height:118px}
.metric .value{font-size:1.8rem}
.metric .label{line-height:1.35}
.payment-summary-not_priced{background:linear-gradient(160deg,#fffefa,#f8f5f1)}
.payment-summary-unpaid,.payment-summary-overpaid{background:linear-gradient(160deg,#fffefa,#fdf0ed)}
.payment-summary-part_paid,.payment-summary-advance_unpriced{background:linear-gradient(160deg,#fffefa,#fbf4e7)}
.payment-summary-paid{background:linear-gradient(160deg,#fffefa,#f1f8f4)}
.delivery-card.cancelled{background:rgba(255,255,255,.08)}
.cancelled-strip{
  margin-top:20px;padding:11px 13px;border-radius:14px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:10px
}
.cancelled-strip>span{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);font-size:1rem
}
.cancelled-strip strong{display:block;color:#fff;font-size:.83rem}
.cancelled-strip small{display:block;color:#d8cbd2;margin-top:2px}

/* Payments page */
.payment-row{grid-template-columns:minmax(220px,1.2fr) minmax(230px,.8fr) minmax(150px,.5fr)}
.payment-numbers{display:flex;gap:24px}
.payment-numbers span{display:grid;gap:3px}
.payment-numbers small,.payment-state small{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:#9a8b90}
.payment-numbers strong{font-family:Georgia,serif;font-size:1.02rem;font-weight:500;color:#3d2d35}
.payment-state{display:grid;justify-items:end;gap:5px;text-align:right}
.badge.neutral{background:#eee9e5;color:#74686d}
.money-status{font-family:"Segoe UI",sans-serif!important}
.money-box small{display:block;color:var(--muted);font-size:.72rem;margin-top:5px}
.premium-empty{
  min-height:90px;display:flex!important;align-items:center;justify-content:center;gap:12px;
  color:#75686e!important
}
.premium-empty>span{
  width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  background:var(--ok-soft);color:var(--ok);font-weight:800
}
.premium-empty strong{display:block;color:#4a3e44;font-weight:650}
.premium-empty small{display:block;margin-top:2px;color:#8b7f84}

/* Popups — softer, editorial, less heavy */
dialog{width:min(780px,calc(100% - 26px));border-radius:27px}
.modal-card{
  overflow:hidden;
  background:linear-gradient(180deg,#fffdfb 0%,#fcf8f4 100%)!important
}
.modal-head{
  padding:24px 26px 18px!important;
  background:linear-gradient(180deg,#f8f1ea 0%,rgba(255,253,251,.94) 100%);
  border-bottom:1px solid #eadfd7!important
}
.modal-head h2{
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:1.45rem!important;font-weight:500!important;color:#412d38!important;letter-spacing:-.018em
}
.modal-head .muted{
  max-width:590px;font-size:.82rem;line-height:1.45;color:#887a80;margin-top:5px
}
.modal-body{padding:22px 26px 26px!important;gap:18px!important}
.modal-body .form-grid{gap:16px 14px}
.modal-body label{
  font-size:.70rem!important;
  font-weight:600!important;
  letter-spacing:.045em;
  color:#817278!important;
}
.modal-body input,.modal-body select,.modal-body textarea{
  margin-top:2px;
  color:#392f34!important;
  font-size:.94rem!important;
  font-weight:450!important;
  background:#fffdfa!important;
  border-color:#dfd2c9!important
}
.modal-body input::placeholder,.modal-body textarea::placeholder{color:#b0a4a8}
.modal-body strong{font-weight:600;color:#4b3942}
.modal-body .section-label{
  margin-top:8px;padding-top:4px;
  color:#9a7446!important;font-weight:700!important;font-size:.66rem!important
}
.modal-actions{
  position:sticky;bottom:0;
  padding:14px 26px 16px!important;
  background:rgba(250,246,241,.96)!important;
  border-top:1px solid #eadfd7!important;
  backdrop-filter:blur(12px)
}
.modal-actions .ghost{font-size:.82rem}
.modal-actions .primary,.modal-actions .cancel-order-btn{min-width:100px}
#modal[data-mode="history"] .modal-body{background:#f7f2ed}
#modal[data-mode="history"] .modal-actions{background:#f7f2ed}
.history-card{
  background:#fffdfb;border:1px solid #e6d9cf;border-radius:18px;
  padding:16px;margin-bottom:14px;box-shadow:0 5px 18px rgba(64,43,52,.035)
}
.history-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.history-card-head h4{
  font-family:Georgia,"Times New Roman",serif;font-size:1.22rem;font-weight:500;
  color:#412d38;margin:3px 0 2px
}
.history-values{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
.history-measure-row{font-size:.84rem}
.history-measure-row strong{font-weight:650!important}
.history-note{
  display:grid;grid-template-columns:70px 1fr;gap:10px;margin-top:11px;
  background:var(--gold-soft);border-radius:12px;padding:10px 11px
}
.history-note.fit{background:var(--accent-soft)}
.history-note span{
  font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;font-weight:750;color:var(--gold)
}
.history-note.fit span{color:var(--accent)}
.history-note p{margin:0;color:#62545a;font-size:.82rem}

/* Order controls */
.order-actions-section{border-style:dashed;background:rgba(255,253,251,.65)}
.section-help{color:#86787e;font-size:.82rem;line-height:1.55;max-width:760px;margin:-4px 0 14px}
.order-control-buttons{display:flex;gap:10px;flex-wrap:wrap}
.cancel-order-btn,.delete-order-btn{
  border-radius:12px;padding:9px 13px;cursor:pointer;font-weight:650;font-size:.82rem
}
.cancel-order-btn{border:1px solid #ddb9a6;background:#fff4ee;color:#8a4c32}
.delete-order-btn{border:1px solid #e2c4c4;background:#fffafa;color:#963d3d}
.cancel-order-btn:hover{background:#fbe9df}
.delete-order-btn:hover{background:#faeaea}
.cancel-explainer{
  display:flex;align-items:center;gap:12px;padding:13px;border-radius:15px;
  background:#fbf0ea;border:1px solid #ecd3c6
}
.cancel-explainer>span{
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:#f2d7ca;color:#8e4d34;font-size:1.05rem
}
.cancel-explainer strong{display:block;color:#674338!important}
.cancel-explainer p{margin:3px 0 0;color:#8b6f65;font-size:.78rem;line-height:1.4}

/* Reduce overly bold black text in content cards */
.item-card>div:not(.order-section-head),.payment-card>div:not(.order-section-head),.fit-card>div:not(.order-section-head){
  color:#665a60;font-size:.86rem;line-height:1.5
}
.item-card strong,.payment-card strong,.fit-card strong{color:#493740;font-weight:600}
.detail-value{font-weight:570}
.list-main{font-weight:630}

/* Payment callout is informative, not alarming */
.order-section .callout{font-size:.78rem;line-height:1.45}
.order-section .callout strong{font-weight:650}

/* Responsive */
@media(max-width:760px){
  .payment-row{grid-template-columns:1fr}
  .payment-numbers{justify-content:flex-start}
  .payment-state{justify-items:start;text-align:left}
  .history-values{grid-template-columns:1fr}
  .modal-head{padding:20px 18px 15px!important}
  .modal-body{padding:18px!important}
  .modal-actions{padding:12px 18px 14px!important}
  .order-control-buttons{display:grid;grid-template-columns:1fr}
}


/* =========================================================
   V1.5 — Multi-piece orders & complete pricing
   ========================================================= */
.mini-help{
  font-size:.77rem;line-height:1.5;color:#887b80;
  background:#f8f3ed;border:1px solid #eaded3;border-radius:12px;padding:10px 12px
}
.garment-entry-card{
  background:linear-gradient(150deg,#fffefa,#faf6f1);
  border:1px solid #e7dbd1!important;border-radius:18px!important;padding:16px!important;
  box-shadow:0 5px 18px rgba(64,43,52,.03)
}
.garment-entry-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.garment-entry-head strong{display:block;font-family:Georgia,serif;font-size:1.05rem;font-weight:500;margin-top:3px;color:#4a3440}
.soft-icon-btn{
  width:31px;height:31px;border:1px solid #e6d8cf;border-radius:10px;background:#fffaf6;
  color:#8a747d;font-size:1rem;cursor:pointer
}
.garment-price-grid{grid-template-columns:1.2fr .55fr .9fr .72fr}
.garment-price-grid .full{grid-column:1/-1}
.line-total-box{
  align-self:end;min-height:45px;border:1px solid #e5d9cf;border-radius:13px;
  background:var(--gold-soft);padding:8px 11px;display:grid;align-content:center
}
.line-total-box span{font-size:.61rem;text-transform:uppercase;letter-spacing:.08em;color:#9b7950}
.line-total-box strong{font-family:Georgia,serif;font-size:1rem;font-weight:500;color:#4a3540}
.charge-line{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(130px,.65fr) 38px;
  gap:10px;align-items:end;margin-bottom:10px;padding:12px;
  border:1px solid #e7dbd1;border-radius:15px;background:#fffdfa
}
.removeChargeBtn{
  width:36px;height:42px;border-radius:11px;border:1px solid #ead8d0;background:#fff7f4;
  color:#9b554c;font-size:1.05rem;cursor:pointer
}
.discount-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.draft-pricing{
  border:1px solid #dfd1c6;border-radius:16px;background:#fffdfa;padding:12px 14px
}
.draft-pricing>div{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:7px 0;color:#6c5d64;font-size:.84rem
}
.draft-pricing strong{font-family:Georgia,serif;font-weight:500;color:#47343e}
.draft-pricing .discount-preview{color:#8d5638}
.draft-pricing .discount-preview strong{color:#8d5638}
.draft-pricing .draft-grand{
  border-top:1px solid #dfd2c8;margin-top:4px;padding-top:11px;
  color:#37272f;font-weight:650
}
.draft-pricing .draft-grand strong{font-size:1.17rem;color:var(--accent-deep)}
.pricing-breakdown{
  max-width:560px;margin:0 0 15px auto;
  border:1px solid #e5d8ce;border-radius:16px;background:#fffdfa;padding:10px 14px
}
.price-row{display:flex;justify-content:space-between;gap:15px;padding:7px 0;color:#685a61;font-size:.84rem}
.price-row strong{font-weight:600;color:#46353e}
.price-row.subtotal-line{border-top:1px dashed #e3d6cc;margin-top:3px;padding-top:10px}
.price-row.discount-line{color:#8d5638}
.price-row.discount-line strong{color:#8d5638}
.price-row.grand-total-line{
  border-top:1px solid #d9c9bc;margin-top:4px;padding-top:11px;
  color:#392a32;font-weight:700
}
.price-row.grand-total-line strong{font-family:Georgia,serif;font-size:1.15rem;font-weight:500;color:var(--accent-deep)}

@media(max-width:760px){
  .garment-price-grid{grid-template-columns:1fr 1fr}
  .garment-price-grid .full{grid-column:1/-1}
  .line-total-box{min-height:48px}
  .charge-line{grid-template-columns:1fr 100px 36px}
  .discount-grid{grid-template-columns:1fr}
  .pricing-breakdown{max-width:none;margin-left:0}
}
@media(max-width:460px){
  .garment-price-grid{grid-template-columns:1fr}
  .charge-line{grid-template-columns:1fr}
  .removeChargeBtn{width:100%;height:36px}
}


/* =========================================================
   V1.6 — Automatic material / additional-charge calculator
   ========================================================= */
.charge-card{
  margin-bottom:12px;padding:14px;border:1px solid #e5d8ce;border-radius:16px;
  background:linear-gradient(150deg,#fffefa,#faf6f1)
}
.charge-card-head{
  display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:10px;align-items:end;margin-bottom:10px
}
.charge-calc-grid{
  display:grid;grid-template-columns:.6fr .8fr 1fr 1fr;gap:10px;align-items:end
}
.charge-formula{
  display:none;margin-top:9px;padding:8px 10px;border-radius:10px;
  background:#f3ece3;color:#765b3e;font-size:.78rem;font-weight:650
}
.charge-formula.visible{display:block}
.charge-help{
  margin-top:8px;color:#94878c;font-size:.69rem;line-height:1.4
}
.charge-breakdown-row>span{display:grid;gap:2px}
.charge-breakdown-row>span>b{font-weight:560;color:#5b4851}
.charge-breakdown-row small{
  display:block;color:#9a7d68;font-size:.69rem;font-weight:500
}
@media(max-width:760px){
  .charge-calc-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:440px){
  .charge-calc-grid{grid-template-columns:1fr}
}


/* =========================================================
   V1.7 — Studio Flow UI
   Easier forms, combination garments, subtle motion
   ========================================================= */
.field-optional{
  font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;
  color:#a39198;font-weight:600;margin-left:4px
}
.input-help{display:block;margin-top:5px;color:#9a8d92;font-size:.67rem;line-height:1.35}
.short-textarea{min-height:72px!important;height:72px!important}
.studio-form{display:grid;gap:14px}
.form-section-card{
  border:1px solid #e8dcd3;border-radius:18px;background:#fffdfa;
  padding:16px;box-shadow:0 5px 18px rgba(64,43,52,.025)
}
.form-section-title{
  display:flex;align-items:center;gap:10px;margin-bottom:14px
}
.form-section-title>span{
  width:28px;height:28px;border-radius:9px;background:var(--gold-soft);
  color:var(--gold);display:grid;place-items:center;font-size:.63rem;font-weight:800
}
.form-section-title strong{
  display:block!important;font-family:Georgia,"Times New Roman",serif!important;
  font-size:1.05rem!important;font-weight:500!important;color:#4b3440!important
}
.form-section-title small{display:block;color:#998b90;font-size:.68rem;margin-top:2px}
.customer-compact-grid{grid-template-columns:1.1fr 1fr 1fr}
.measurement-top-row{grid-template-columns:1.15fr 1fr .72fr .9fr}
.measurement-sections{display:grid;gap:14px}
.measurement-section-card{
  border:1px solid #e6d9cf;border-radius:19px;background:linear-gradient(155deg,#fffefa,#fbf6f1);
  padding:16px;box-shadow:0 5px 18px rgba(64,43,52,.03)
}
.measurement-section-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.measurement-section-head strong{display:block;font-family:Georgia,serif;font-size:1.02rem;font-weight:500;color:#493540}
.measurement-section-head small{display:block;color:#9b8c91;font-size:.67rem;margin-top:2px}
.template-pill{
  display:inline-grid;place-items:center;min-width:44px;height:28px;padding:0 9px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);font-size:.62rem;font-weight:800;letter-spacing:.06em
}
.measurement-entry-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px 12px}
.measure-input{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:5px}
.measure-input input,.measure-input select{padding:9px 10px!important}
.measurement-more{
  margin-top:12px;border-top:1px dashed #e4d6cc;padding-top:10px
}
.measurement-more summary,.garment-details summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:#685a61;font-size:.78rem;font-weight:650
}
.measurement-more summary::-webkit-details-marker,.garment-details summary::-webkit-details-marker{display:none}
.measurement-more summary:after,.garment-details summary:after{
  content:"⌄";color:#9a7a60;transition:transform .2s ease
}
.measurement-more[open] summary:after,.garment-details[open] summary:after{transform:rotate(180deg)}
.measurement-note-grid{margin-top:11px}
.combo-hint{
  display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;
  border-radius:13px;background:#eef5f0;border:1px solid #d4e5da
}
.combo-hint>span{
  width:27px;height:27px;border-radius:9px;display:grid;place-items:center;background:#dfeee5;color:#39705a;font-weight:800
}
.combo-hint strong{display:block;color:#486255;font-size:.78rem}
.combo-hint small{display:block;color:#76887d;font-size:.67rem;margin-top:2px}

/* Garment entry: essentials first, details tucked underneath */
.garment-basic-grid{display:grid;grid-template-columns:1.2fr .55fr .9fr .72fr;gap:10px;align-items:end}
.garment-details{margin-top:12px;border-top:1px dashed #e1d4ca;padding-top:10px}
.garment-details summary small{font-weight:500;color:#9c8e93}
.garment-detail-body{
  display:grid;gap:12px;margin-top:12px;padding:13px;border-radius:14px;background:#faf6f1;border:1px solid #eee3db
}
.animated-card{animation:softCardIn .28s cubic-bezier(.2,.8,.2,1) both}
.combined-measurement-wrap{
  margin-top:10px;border:1px solid #d9e4dc;background:#f7fbf8;border-radius:18px;padding:12px
}
.combined-measurement-head{
  display:flex;align-items:center;gap:9px;padding:2px 2px 10px
}
.combined-measurement-head>span{width:27px;height:27px;border-radius:9px;background:#e1efe6;color:#39705a;display:grid;place-items:center;font-weight:800}
.combined-measurement-head strong{display:block;color:#426052;font-size:.8rem}
.combined-measurement-head small{display:block;color:#7f9187;font-size:.67rem;margin-top:2px}
.combined-measurement-wrap .premium-measurement-card{box-shadow:none;margin-top:9px}

/* History combination */
.combination-history-card{border-color:#d9e4dc;background:linear-gradient(150deg,#fffdfa,#f7fbf8)}
.history-template-block+.history-template-block{border-top:1px solid #e1e8e3;margin-top:15px;padding-top:15px}
.history-template-title{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.history-template-title strong{font-weight:600!important;color:#53434b}
.history-order-row{padding:10px 0;border-bottom:1px solid #eadfd7;display:grid;gap:3px}
.history-order-row strong{font-weight:600;color:#4a3942}
.history-order-row span{font-size:.72rem;color:#8e8186}

/* Modal sizing: not full-screen, not cramped */
#modal[data-mode="customer"]{width:min(680px,calc(100% - 28px))}
#modal[data-mode="measurement"]{width:min(900px,calc(100% - 28px))}
#modal[data-mode="order"]{width:min(920px,calc(100% - 28px))}
#modal[data-mode="pricing"]{width:min(760px,calc(100% - 28px))}
#modal[data-mode="payment"]{width:min(650px,calc(100% - 28px))}
#modal[data-mode="history"]{width:min(850px,calc(100% - 28px))}
#modal .modal-card{max-height:84vh}
#modal .modal-body{max-height:calc(84vh - 150px);overflow:auto}
#modal[data-mode="customer"] .modal-body{max-height:65vh}
#modal[data-mode="order"] .modal-body{background:#f7f2ed!important}
#modal[data-mode="measurement"] .modal-body{background:#f7f2ed!important}
.order-studio-form .form-section-card{padding:15px}

/* Gentle animations */
@keyframes modalStudioIn{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes softCardIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes valuePop{
  0%{transform:scale(.96);opacity:.68}
  70%{transform:scale(1.035)}
  100%{transform:scale(1);opacity:1}
}
#modal[open] .modal-card{animation:modalStudioIn .24s cubic-bezier(.2,.75,.25,1)}
.screen.active .metric,.screen.active .panel,.screen.active .order-section{animation:softCardIn .30s ease both}
.value-pop{animation:valuePop .28s ease}
.form-section-card,.measurement-section-card,.garment-entry-card,.charge-card{
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease
}
.form-section-card:hover,.measurement-section-card:hover{border-color:#dccbbf;box-shadow:0 7px 22px rgba(64,43,52,.04)}
button:hover{transform:translateY(-1px)}
details[open] .garment-detail-body,details[open] .measurement-note-grid{animation:softCardIn .22s ease}

/* Existing charge layout remains functional, a little cleaner */
.charge-card{animation:softCardIn .26s ease both}

/* Desktop clarity */
@media(min-width:900px){
  #modal[data-mode="order"] .modal-body,#modal[data-mode="measurement"] .modal-body{padding:18px 22px 24px!important}
}

/* Responsive */
@media(max-width:820px){
  .customer-compact-grid,.measurement-top-row{grid-template-columns:1fr 1fr}
  .measurement-entry-grid{grid-template-columns:1fr 1fr}
  .garment-basic-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  #modal{width:calc(100% - 16px)!important}
  #modal .modal-card{max-height:88vh}
  #modal .modal-body{max-height:calc(88vh - 145px)}
  .customer-compact-grid,.measurement-top-row,.measurement-entry-grid,.garment-basic-grid{grid-template-columns:1fr}
  .form-section-card,.measurement-section-card{padding:13px}
  .measure-input{grid-template-columns:minmax(0,1fr) 68px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}


/* =========================================================
   V1.8 — Remember First Workbench
   ========================================================= */

/* Measurement entry: one global unit, vertical body order */
.measurement-toolbar{
  display:grid;grid-template-columns:1.15fr 1fr .8fr .8fr;gap:11px;align-items:start
}
.measurement-vertical-card{padding:15px}
.measurement-vertical-list{
  display:grid;grid-template-columns:1fr;gap:0;border:1px solid #eadfd7;border-radius:14px;overflow:hidden;background:#fffefa
}
.measurement-vertical-list label{
  display:grid;grid-template-columns:minmax(145px,1fr) minmax(120px,.8fr);
  gap:14px;align-items:center;padding:8px 12px;border-bottom:1px solid #eee5de;
  font-size:.75rem!important;letter-spacing:.015em!important
}
.measurement-vertical-list label:last-child{border-bottom:0}
.measurement-vertical-list input{
  margin:0!important;padding:8px 10px!important;text-align:right;background:#fff!important
}
.memory-loaded,.memory-empty{
  display:flex;align-items:center;gap:10px;margin-top:11px;padding:10px 12px;border-radius:13px
}
.memory-loaded{background:#eef5f0;border:1px solid #d5e6dc}
.memory-empty{background:#f8f3ed;border:1px solid #e9ddd2}
.memory-loaded>span,.memory-empty>span{
  width:29px;height:29px;border-radius:9px;display:grid;place-items:center;font-weight:800
}
.memory-loaded>span{background:#dfeee5;color:#39705a}
.memory-empty>span{background:#efe4d6;color:#9b7447}
.memory-loaded strong,.memory-empty strong{display:block;font-size:.78rem;color:#4c5f54}
.memory-loaded small,.memory-empty small{display:block;font-size:.67rem;color:#7f8c84;margin-top:2px}

/* Order two-column workbench */
#modal[data-mode="order"]{width:min(1180px,calc(100% - 26px))}
.order-workbench{
  display:grid;grid-template-columns:minmax(330px,.82fr) minmax(480px,1.25fr);
  gap:15px;align-items:start
}
.order-measure-pane{
  position:sticky;top:0;border:1px solid #dfd5cc;border-radius:20px;
  background:linear-gradient(160deg,#fbf7f2,#fffdfa);
  min-height:520px;max-height:calc(84vh - 176px);overflow:auto;padding:16px;
  box-shadow:0 9px 28px rgba(64,43,52,.05);
  animation:deskSlideIn .38s cubic-bezier(.2,.8,.2,1) both
}
.order-entry-pane{min-width:0}
.order-entry-pane .form-section-card{padding:14px}
.compact-order-basics .form-section-title{margin-bottom:10px}
.order-basics-grid{grid-template-columns:1.2fr 1fr .7fr .8fr}
.small-details{margin-top:10px;border-top:1px dashed #e4d8ce;padding-top:8px}
.small-details summary{
  cursor:pointer;display:flex;justify-content:space-between;color:#6f6067;font-size:.74rem;font-weight:650
}
.small-details summary span{color:#a2959a;font-size:.65rem;font-weight:500}
.small-details textarea{margin-top:9px}
.order-garment-stack{display:grid;gap:10px}
.garment-entry-card{cursor:default}
.garment-entry-card.active-garment{
  border-color:#bca394!important;
  box-shadow:0 0 0 3px rgba(164,124,72,.10),0 9px 24px rgba(64,43,52,.05)!important;
  animation:activeGarmentPulse .34s ease both
}
.garment-entry-head{cursor:pointer}
.pricing-divider{height:1px;background:#e8ddd4;margin:12px 0}

/* Left measurement desk */
.desk-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:13px}
.desk-head h3{font-size:1.35rem;margin:3px 0;color:#432f3a}
.desk-head small{display:block;color:#8e8186;font-size:.69rem}
.remembered-badge{
  border-radius:999px;background:#e6f2ea;color:#3d7059;padding:6px 8px;
  font-size:.62rem;font-weight:750;white-space:nowrap
}
.desk-template{margin-top:12px}
.desk-template+.desk-template{border-top:1px solid #e3d9d1;padding-top:13px}
.desk-template-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.desk-template-head strong{font-size:.76rem;color:#65565d;font-weight:650}
.desk-measure-list{
  border:1px solid #e7ddd5;border-radius:13px;overflow:hidden;background:#fffefa
}
.desk-measure-row{
  display:grid;grid-template-columns:1fr auto;gap:12px;padding:7px 10px;
  border-bottom:1px solid #eee6df;font-size:.73rem;color:#6a5c63
}
.desk-measure-row:last-child{border-bottom:0}
.desk-measure-row strong{font-weight:650;color:#3f3038}
.desk-fit-note{
  margin-top:8px;padding:8px 10px;background:var(--accent-soft);border-radius:11px;
  font-size:.72rem;color:#624f5c
}
.desk-fit-note span{
  display:block;font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent);font-weight:750;margin-bottom:2px
}
.desk-actions{margin-top:12px}
.desk-action-btn{
  width:100%;border:1px solid #d9c9bd;background:#fffaf5;color:#5f4a55;
  border-radius:12px;padding:9px 11px;font-weight:650;cursor:pointer
}
.desk-empty{
  min-height:260px;display:grid;place-items:center;align-content:center;text-align:center;gap:9px;color:#887a80
}
.desk-empty>span{
  width:43px;height:43px;border-radius:14px;background:var(--gold-soft);color:var(--gold);
  display:grid;place-items:center;font-size:1.15rem
}
.desk-empty strong{display:block;color:#56464e;font-weight:650}
.desk-empty small{display:block;max-width:245px;line-height:1.45;margin-top:3px}
.desk-refresh{animation:deskRefresh .34s ease both}

/* Inline measurement editor keeps order draft open */
.inline-measure-overlay{
  position:fixed;inset:0;z-index:10000;background:rgba(42,31,37,.42);
  backdrop-filter:blur(4px);display:grid;place-items:center;padding:18px;
  opacity:0;transition:opacity .18s ease
}
.inline-measure-overlay.show{opacity:1}
.inline-measure-card{
  width:min(690px,100%);max-height:88vh;display:grid;grid-template-rows:auto auto 1fr auto;
  border-radius:24px;background:#fbf7f2;border:1px solid #dfd2c8;
  box-shadow:0 34px 100px rgba(38,24,32,.27);
  transform:translateY(14px) scale(.985);transition:transform .22s cubic-bezier(.2,.8,.2,1)
}
.inline-measure-overlay.show .inline-measure-card{transform:translateY(0) scale(1)}
.inline-measure-head{
  display:flex;justify-content:space-between;gap:12px;padding:19px 20px 14px;
  background:linear-gradient(180deg,#f4ebe3,#fbf7f2);border-bottom:1px solid #e7dbd2
}
.inline-measure-head h3{font-size:1.45rem;margin:3px 0;color:#432f3a}
.inline-measure-head small{color:#8d7f84;font-size:.7rem}
.inline-unit-row{padding:10px 20px;border-bottom:1px solid #e9ded6}
.inline-unit-row label{max-width:210px}
.inline-measure-scroll{overflow:auto;padding:14px 20px;display:grid;gap:12px}
.inline-measure-actions{
  display:flex;justify-content:flex-end;gap:9px;padding:12px 20px 15px;
  border-top:1px solid #e7dbd2;background:#f8f2ec
}

/* Edit Pricing — garment rate editor */
#pricingItemEditor{display:grid;gap:9px}
.pricing-item-row{
  display:grid;grid-template-columns:minmax(130px,1fr) 100px 145px 125px;
  gap:10px;align-items:end;padding:11px;border:1px solid #e7dbd2;border-radius:14px;background:#fffdfa
}
.pricing-item-row>div:first-child strong{display:block;font-family:Georgia,serif;font-size:1rem;font-weight:500;color:#4b3640;margin-top:2px}
.pricing-line-total{
  min-height:43px;padding:8px 10px;border-radius:11px;background:var(--gold-soft);
  display:grid;align-content:center
}
.pricing-line-total span{font-size:.58rem;text-transform:uppercase;letter-spacing:.07em;color:#9a784e}
.pricing-line-total strong{font-family:Georgia,serif;font-weight:500;color:#4a3540}

/* More visible but tasteful motion */
@keyframes deskSlideIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
@keyframes deskRefresh{0%{opacity:.55;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}
@keyframes activeGarmentPulse{0%{transform:scale(.992)}65%{transform:scale(1.006)}100%{transform:scale(1)}}
@keyframes autofillFlash{0%{box-shadow:0 0 0 0 rgba(57,112,90,.28)}100%{box-shadow:0 0 0 9px rgba(57,112,90,0)}}
@keyframes valuePopStrong{0%{transform:scale(.88);opacity:.45}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.autofill-flash{animation:softCardIn .28s ease,autofillFlash .75s ease .08s}
.value-pop-strong{display:inline-block;animation:valuePopStrong .38s cubic-bezier(.2,.9,.2,1)}
#toast:not(.hidden){animation:toastIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

/* Responsive */
@media(max-width:980px){
  .order-workbench{grid-template-columns:1fr}
  .order-measure-pane{position:relative;max-height:none;min-height:auto}
  .desk-empty{min-height:150px}
  .order-basics-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .measurement-toolbar{grid-template-columns:1fr 1fr}
  .pricing-item-row{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .measurement-toolbar,.order-basics-grid,.pricing-item-row{grid-template-columns:1fr}
  .measurement-vertical-list label{grid-template-columns:1fr;gap:4px}
  .measurement-vertical-list input{text-align:left}
}


/* =========================================================
   V1.8.1 — Measurement Editor Layering Hotfix
   ========================================================= */

/* Clear empty-state action: no floating + symbol */
.desk-empty-action{
  min-height:310px;
  padding:26px 18px;
  gap:12px;
}
.desk-empty-mark{
  width:48px;
  height:48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#f3eadf,#fbf5ed);
  border:1px solid #e7d9cc;
  color:#9c754a;
  font-size:1.2rem;
  box-shadow:0 7px 18px rgba(64,43,52,.035);
}
.desk-empty-action>div:nth-child(2){
  display:grid;
  justify-items:center;
  gap:3px;
}
.desk-primary-add{
  margin-top:5px;
  border:0;
  border-radius:13px;
  padding:10px 17px;
  background:linear-gradient(135deg,var(--accent-deep),var(--accent));
  color:#fff;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 9px 22px rgba(74,41,68,.17);
  transition:transform .18s ease,box-shadow .18s ease;
}
.desk-primary-add:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 27px rgba(74,41,68,.22);
}
.desk-primary-add:active{transform:translateY(0)}

/* A second native dialog participates in the browser top layer.
   This fixes the measurement editor appearing behind the order dialog. */
.inline-measure-dialog{
  width:min(720px,calc(100% - 28px));
  max-width:none;
  padding:0;
  border:0;
  background:transparent;
  overflow:visible;
}
.inline-measure-dialog::backdrop{
  background:rgba(36,27,32,.46);
  backdrop-filter:blur(5px);
}
.inline-measure-dialog .inline-measure-card{
  width:100%;
  max-height:88vh;
  margin:0;
  opacity:0;
  transform:translateY(16px) scale(.982);
}
.inline-measure-dialog.show .inline-measure-card{
  opacity:1;
  transform:translateY(0) scale(1);
}
.inline-measure-dialog .inline-measure-card{
  transition:opacity .18s ease,transform .23s cubic-bezier(.2,.8,.2,1);
}

/* Old DIV-overlay styling is no longer used by V1.8.1. */
.inline-measure-overlay{display:none!important}

@media(max-width:560px){
  .inline-measure-dialog{width:calc(100% - 14px)}
  .desk-empty-action{min-height:210px}
}


/* =========================================================
   V1.8.2 — Blank New Order Logic
   ========================================================= */
.customer-order-memory{
  padding:5px 3px 12px;
  border-bottom:1px solid #e4d9d1;
}
.customer-order-memory h3{
  font-size:1.42rem;
  margin:3px 0 11px;
  color:#432f3a;
}
.customer-memory-line{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  padding:7px 0;
  border-top:1px solid #eee5de;
  font-size:.72rem;
  color:#796c72;
}
.customer-memory-line strong{
  color:#44343c;
  font-weight:650;
}
.choose-garment-empty{
  min-height:300px;
}
.choose-garment-empty .desk-empty-mark{
  background:linear-gradient(145deg,#f2e8dd,#fbf6ef);
}

/* The New Order form feels intentionally blank rather than unfinished. */
#modal[data-mode="order"] .iGarment:invalid,
#modal[data-mode="order"] .iGarment option[value=""]{
  color:#9b8f94;
}


/* =========================================================
   V1.8.3 — Location + Required Order Details
   ========================================================= */
.required-mark{
  margin-left:4px;
  font-size:.58rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#a85a4c;
  font-weight:750;
}
.customer-compact-grid{
  grid-template-columns:1fr 1fr 1fr 1fr;
}
.customer-memory-line strong{
  text-align:right;
}
@media(max-width:900px){
  .customer-compact-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .customer-compact-grid{grid-template-columns:1fr}
}


/* =========================================================
   V1.8.4 — Clean Customer Form + Date System
   ========================================================= */
.customer-only-form{max-width:100%}
.customer-details-grid{grid-template-columns:1.05fr 1fr 1fr;gap:12px}
.customer-date-strip,.order-date-strip{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:-2px 0 13px;padding:9px 11px;border-radius:12px;
  background:#f6efe6;border:1px solid #eadbcf
}
.customer-date-strip span,.order-date-strip span{
  font-size:.61rem;text-transform:uppercase;letter-spacing:.085em;
  color:#97734d;font-weight:750
}
.customer-date-strip strong,.order-date-strip strong{color:#4b3942;font-size:.78rem;font-weight:650}
.customer-form-note{
  margin-top:13px;padding:9px 11px;border-radius:11px;background:#f4f7f4;
  border:1px solid #dce8df;color:#68786e;font-size:.72rem;line-height:1.45
}
.customer-form-note strong{font-weight:700;color:#496253}
.popup-date-strip{margin:0 0 13px}
input[type="date"]{font-variant-numeric:tabular-nums}
@media(max-width:760px){.customer-details-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.customer-details-grid{grid-template-columns:1fr}}


/* =========================================================
   V1.8.5 — Cancel Fix + Complete Customer History
   ========================================================= */
.history-customer-profile{
  margin-bottom:18px;
  padding:16px;
  border:1px solid #dfd3ca;
  border-radius:18px;
  background:linear-gradient(150deg,#fffdfa,#f8f2ec);
  box-shadow:0 5px 18px rgba(64,43,52,.035)
}
.history-profile-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:13px
}
.history-profile-head h3{
  margin:3px 0 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.35rem;
  font-weight:500;
  color:#432f3a
}
.customer-since-chip{
  display:inline-flex;
  padding:6px 9px;
  border-radius:999px;
  background:var(--gold-soft);
  color:#84613b;
  font-size:.64rem;
  font-weight:750;
  white-space:nowrap
}
.history-profile-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px
}
.history-profile-grid>div{
  padding:10px 11px;
  border:1px solid #eadfd7;
  border-radius:12px;
  background:#fffefa
}
.history-profile-grid span{
  display:block;
  margin-bottom:3px;
  font-size:.59rem;
  text-transform:uppercase;
  letter-spacing:.075em;
  color:#9b8c91;
  font-weight:700
}
.history-profile-grid strong{
  display:block;
  color:#493941;
  font-size:.8rem;
  font-weight:620;
  word-break:break-word
}
.customer-history-layout{display:grid;gap:18px}

@media(max-width:560px){
  .history-profile-grid{grid-template-columns:1fr}
  .history-profile-head{display:grid}
}


/* =========================================================
   V1.9 — Mobile-first workflow + phone QA pass
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden}
.mobile-order-tabs,.mobile-flow-next{display:none}
button{-webkit-tap-highlight-color:transparent}

@media(max-width:760px){
  /* Phone shell */
  body{
    -webkit-text-size-adjust:100%;
    overscroll-behavior-y:none;
  }
  body.modal-open{overflow:hidden}
  body.modal-open .bottom-nav{
    opacity:0;
    pointer-events:none;
    transform:translateY(105%);
  }

  .topbar{
    min-height:58px;
    padding:8px 12px;
    gap:8px;
  }
  .topbar-brand{min-width:0}
  .topbar-brand>div:last-child{min-width:0}
  .topbar h2{
    max-width:58vw;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:.82rem!important;
  }
  .mini-monogram{width:34px!important;height:34px!important;border-radius:11px!important}
  .quiet-logout{
    min-height:40px;
    padding:8px 10px!important;
    font-size:.72rem!important;
  }

  .content{
    padding:18px 10px calc(92px + env(safe-area-inset-bottom));
  }
  .screen-head{
    display:grid!important;
    grid-template-columns:1fr;
    gap:11px!important;
    margin-bottom:14px!important;
  }
  .screen-head>button.primary{
    width:100%;
    min-height:46px;
  }
  .screen-head h1{font-size:1.45rem!important}
  .screen-head .muted{font-size:.78rem;line-height:1.4}
  .page-kicker{font-size:.58rem!important}

  .metric-grid{gap:8px!important}
  .metric{padding:12px!important;border-radius:14px!important}
  .metric .value{font-size:1.35rem!important}
  .panel{border-radius:15px!important}
  .panel-head{padding:13px!important}
  .panel-head{align-items:flex-start;gap:8px}
  .panel-head .link-btn{font-size:.7rem}

  .search{min-width:0!important;width:100%!important}
  .filter-row{gap:8px!important}

  /* Do not hide important information on a phone. Stack it. */
  .list-row{
    grid-template-columns:1fr!important;
    align-items:start!important;
    gap:9px!important;
    padding:13px!important;
  }
  .list-row>div:nth-child(2){display:block!important}
  .row-actions{
    width:100%;
    justify-content:flex-start!important;
    flex-wrap:wrap;
  }
  .row-actions button,.soft-btn,.danger-btn{
    min-height:42px;
    padding:9px 11px!important;
  }
  .payment-numbers{
    width:100%;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .payment-state{align-items:flex-start!important}

  /* Bottom navigation */
  .bottom-nav{
    min-height:66px;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom))!important;
    transition:transform .2s ease,opacity .2s ease;
  }
  .bottom-nav button{
    min-width:0;
    min-height:48px;
    font-size:1rem!important;
    padding:4px 2px!important;
  }
  .bottom-nav button span{
    font-size:.6rem!important;
    line-height:1.1;
  }

  /* All main popups become a proper phone workspace. */
  #modal{
    width:100vw!important;
    max-width:none!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    border-radius:0!important;
  }
  #modal .modal-card{
    width:100%;
    height:100dvh!important;
    max-height:100dvh!important;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    border-radius:0!important;
    overflow:hidden;
  }
  #modal .modal-head{
    padding:12px 14px 10px!important;
    min-height:64px;
    background:#fffdfb!important;
  }
  #modal .modal-head h2{
    font-size:1.18rem!important;
    line-height:1.2;
  }
  #modal .modal-head .muted{
    margin-top:3px!important;
    font-size:.68rem!important;
    line-height:1.3;
  }
  #modal .icon-btn{
    width:44px;
    height:44px;
    min-width:44px;
    display:grid;
    place-items:center;
    font-size:1.55rem!important;
    border-radius:12px;
  }
  #modal .modal-body{
    max-height:none!important;
    min-height:0;
    overflow:auto;
    overscroll-behavior:contain;
    padding:11px 10px 18px!important;
    background:#f7f2ed!important;
  }
  #modal .modal-actions{
    position:relative!important;
    z-index:12;
    display:grid!important;
    grid-template-columns:minmax(92px,.38fr) minmax(0,1fr);
    gap:8px!important;
    padding:9px 10px calc(9px + env(safe-area-inset-bottom))!important;
    background:#fffdfb!important;
    box-shadow:0 -8px 24px rgba(54,37,46,.09);
  }
  #modal .modal-actions button{
    width:100%;
    min-height:46px;
    margin:0!important;
  }

  /* Prevent Safari/iPhone focus zoom and improve touch entry. */
  #modal input,#modal select,#modal textarea{
    font-size:16px!important;
    min-height:45px;
  }
  #modal textarea{min-height:84px}
  #modal label{font-size:.72rem!important}
  .form-section-card{
    padding:12px!important;
    border-radius:16px!important;
  }
  .form-section-title{margin-bottom:10px!important}
  .form-section-title>span{width:28px!important;height:28px!important;min-width:28px!important}
  .form-section-title strong{font-size:.83rem!important}
  .form-section-title small{font-size:.63rem!important}

  /* Order: 3-step mobile workflow */
  #modal[data-mode="order"] .modal-body{padding-top:0!important}
  .order-workbench{
    display:block!important;
  }
  .mobile-order-tabs{
    position:sticky;
    top:0;
    z-index:10;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:5px;
    margin:0 -10px 10px;
    padding:8px 10px;
    background:rgba(247,242,237,.97);
    backdrop-filter:blur(10px);
    border-bottom:1px solid #e4d8cf;
  }
  .mobile-order-tabs button{
    min-width:0;
    min-height:43px;
    border:1px solid #e1d6cd;
    border-radius:12px;
    background:#fffdfa;
    color:#77686f;
    font-size:.68rem;
    font-weight:700;
    cursor:pointer;
  }
  .mobile-order-tabs button span{
    display:inline-grid;
    place-items:center;
    width:18px;height:18px;
    margin-right:3px;
    border-radius:999px;
    background:#f1e8e0;
    color:#8a6948;
    font-size:.58rem;
  }
  .mobile-order-tabs button.active{
    color:#fff;
    border-color:var(--accent);
    background:linear-gradient(135deg,var(--accent-deep),var(--accent));
    box-shadow:0 7px 16px rgba(74,41,68,.16);
  }
  .mobile-order-tabs button.active span{
    background:rgba(255,255,255,.18);
    color:#fff;
  }

  .order-measure-pane{
    position:relative!important;
    top:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:12px!important;
    border-radius:16px!important;
  }
  .order-entry-pane{display:grid;gap:10px!important}
  .order-entry-pane .form-section-card{margin:0!important}

  .order-workbench.mobile-tab-order .order-measure-pane,
  .order-workbench.mobile-tab-order .order-pricing-section{
    display:none!important;
  }
  .order-workbench.mobile-tab-measurements .order-entry-pane{
    display:none!important;
  }
  .order-workbench.mobile-tab-pricing .order-measure-pane,
  .order-workbench.mobile-tab-pricing .order-basics-section,
  .order-workbench.mobile-tab-pricing .order-garments-section{
    display:none!important;
  }
  .order-workbench.mobile-tab-pricing .order-pricing-section{
    display:block!important;
  }

  .mobile-flow-next{
    display:block;
    width:100%;
    min-height:45px;
    margin-top:10px;
    border:1px solid #cfbcae;
    border-radius:13px;
    background:#fffaf5;
    color:#563f4c;
    font-size:.75rem;
    font-weight:750;
    cursor:pointer;
  }

  .order-basics-grid,.garment-basic-grid{
    grid-template-columns:1fr!important;
  }
  .garment-entry-card{padding:11px!important}
  .garment-entry-head{min-height:40px}
  .line-total-box{min-height:48px}
  .garment-details summary{min-height:44px;align-items:center}
  .desk-measure-row{padding:9px 10px!important}
  .desk-primary-add,.desk-action-btn{min-height:45px!important}
  .choose-garment-empty,.desk-empty-action{min-height:205px!important}

  /* Inline measurement editor also becomes phone-first. */
  .inline-measure-dialog{
    width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:0!important;
  }
  .inline-measure-dialog .inline-measure-card{
    width:100%!important;
    height:100dvh!important;
    max-height:100dvh!important;
    border-radius:0!important;
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
  }
  .inline-measure-head{padding:12px 14px!important}
  .inline-measure-head h3{font-size:1.18rem!important}
  .inline-unit-row{padding:9px 12px!important}
  .inline-unit-row label{max-width:none!important}
  .inline-measure-scroll{padding:10px!important}
  .inline-measure-actions{
    padding:9px 10px calc(9px + env(safe-area-inset-bottom))!important;
  }
  .inline-measure-actions button{min-height:46px}

  /* Pricing controls */
  .pricing-item-row{grid-template-columns:1fr!important}
  .charge-grid{grid-template-columns:1fr!important}
  .draft-pricing{font-size:.76rem}
  .draft-grand strong{font-size:1.15rem!important}

  /* Customer history/details */
  .history-profile-grid{grid-template-columns:1fr!important}
  .history-profile-head{display:grid!important}
  .customer-since-chip{justify-self:start}
  .history-order-row{display:grid!important;gap:4px}

  /* Order detail page */
  .order-summary-grid,.detail-grid,.money-grid{grid-template-columns:1fr!important}
  .order-section{padding:12px!important;border-radius:15px!important}
  .order-section-head{
    align-items:flex-start!important;
    flex-direction:column;
  }
  .action-line{display:grid!important;grid-template-columns:1fr 1fr}
  .action-line button{min-height:43px}
}

@media(max-width:380px){
  .mobile-order-tabs button{
    font-size:.61rem;
    padding-inline:3px;
  }
  .mobile-order-tabs button span{display:none}
  .action-line{grid-template-columns:1fr!important}
  .topbar h2{max-width:52vw}
}

/* Desktop/tablet stays as the atelier workbench. */
@media(min-width:761px){
  .mobile-order-tabs,.mobile-flow-next{display:none!important}
}


/* =========================================================
   V1.9.1 — Workflow + Mobile/Desktop QA corrections
   ========================================================= */

/* Dialog messages must be inside the browser top layer. */
.dialog-toast{
  position:absolute;
  z-index:50;
  left:50%;
  top:72px;
  transform:translateX(-50%);
  width:min(520px,calc(100% - 24px));
  padding:11px 14px;
  border-radius:13px;
  background:#402339;
  color:#fff;
  font-size:.78rem;
  font-weight:650;
  text-align:center;
  box-shadow:0 12px 32px rgba(47,28,40,.25);
  animation:toastInDialog .22s ease both;
}
.dialog-toast.hidden{display:none!important}
@keyframes toastInDialog{
  from{opacity:0;transform:translate(-50%,-7px)}
  to{opacity:1;transform:translate(-50%,0)}
}
.input-error{
  border-color:#b4544f!important;
  box-shadow:0 0 0 3px rgba(180,84,79,.13)!important;
}

/* Clear and safe small delete control. */
.mini-delete-btn{
  width:36px;
  min-width:36px;
  min-height:36px!important;
  padding:6px!important;
  display:inline-grid;
  place-items:center;
  border:1px solid #ead0cf!important;
  border-radius:10px!important;
  background:#fff9f8!important;
  color:#9a4545!important;
  cursor:pointer;
}
.mini-delete-btn:hover{background:#fbeceb!important}
.customer-secondary{font-size:.76rem;color:#8d7f84}

/* Persistent customer/order identity while working. */
.work-context-bar{
  grid-column:1/-1;
  border:1px solid #dfd1c5;
  border-radius:17px;
  padding:11px 13px;
  background:linear-gradient(135deg,#fffaf4,#f5ece3);
  box-shadow:0 5px 18px rgba(64,43,52,.035);
}
.work-context-main{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}
.work-context-person{min-width:0}
.work-context-person>strong{
  display:block;
  margin-top:2px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.05rem;
  font-weight:500;
  color:#432f3a!important;
}
.work-context-person>small{
  display:block;
  margin-top:3px;
  color:#807278;
  font-size:.69rem;
  overflow:hidden;
  text-overflow:ellipsis;
}
.work-context-meta{
  display:flex;
  align-items:stretch;
  gap:7px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.work-context-meta>div{
  min-width:94px;
  padding:7px 9px;
  border:1px solid #e6d9cf;
  border-radius:11px;
  background:rgba(255,255,255,.68);
}
.work-context-meta span{
  display:block;
  font-size:.54rem;
  color:#9b8b91;
  letter-spacing:.07em;
  text-transform:uppercase;
  font-weight:750;
}
.work-context-meta strong{
  display:block;
  margin-top:2px;
  font-size:.72rem;
  color:#4b3942!important;
}
.work-context-empty{
  display:flex;
  align-items:center;
  gap:10px;
  color:#7e7076;
}
.work-context-empty>span{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#efe5da
}
.work-context-empty strong{display:block;color:#514047!important}
.work-context-empty small{display:block;font-size:.67rem;margin-top:2px}

/* Customer intake has four clear workflow fields. */
.customer-intake-grid{grid-template-columns:1fr 1fr 1fr 1fr}

/* Priority must never look clipped. */
#oPriority,#ePriority{min-width:128px}
#oPriority option,#ePriority option{white-space:nowrap}

/* History order action layout */
.history-order-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.history-order-row>div:first-child{display:grid;gap:3px}
.history-order-row span{font-size:.72rem;color:#887a80}
.history-order-actions{display:flex;gap:6px;align-items:center}

/* Order detail hierarchy: order heading quiet; customer + garment stronger. */
#orderDetailTitle{
  font-size:1.75rem!important;
  line-height:1.05!important;
}
.order-hero h2{
  font-size:2.25rem!important;
  line-height:1.05;
}
.order-hero p{
  font-size:1.03rem!important;
  font-weight:600;
  color:#eadde4!important;
}
.garment-title{
  display:block;
  margin-top:3px;
  font-size:1.08rem!important;
  color:#422f39!important;
}

/* =========================================================
   Real phone scrolling: content becomes its own scroll area.
   This fixes customer lists that could not reach lower names.
   ========================================================= */
@media(max-width:760px){
  html,body{height:100%;overflow:hidden!important}
  #appView:not(.hidden){
    height:100dvh;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr);
    overflow:hidden;
  }
  #appView .topbar{
    position:relative!important;
    top:auto!important;
    flex:none;
  }
  #appView .content{
    min-height:0;
    height:100%;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;
  }

  .customer-list-row .row-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px!important;
  }
  .customer-list-row .row-actions button{
    width:100%;
  }
  .customer-list-row .row-actions .mini-delete-btn{
    width:100%;
  }

  .work-context-bar{
    padding:10px;
    border-radius:14px;
  }
  .work-context-main{
    display:grid;
    gap:9px;
  }
  .work-context-meta{
    justify-content:stretch;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .work-context-meta>div{min-width:0}
  .work-context-person>strong{font-size:1rem}
  .work-context-person>small{
    white-space:normal;
    line-height:1.35;
  }

  .customer-intake-grid{grid-template-columns:1fr!important}
  #oPriority,#ePriority{min-width:0;width:100%}

  #orderDetailTitle{font-size:1.38rem!important}
  .order-hero h2{font-size:1.82rem!important}
  .order-hero p{font-size:.96rem!important}
  .garment-title{font-size:1.05rem!important}

  .history-order-row{
    display:grid!important;
    align-items:start;
  }
  .history-order-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 46px;
  }
  .history-order-actions button{min-height:42px}

  .dialog-toast{
    top:65px;
    font-size:.74rem;
    width:calc(100% - 18px);
  }
}

/* Ultra-narrow QA: still usable at the 284px width in the screenshot. */
@media(max-width:320px){
  .content{padding-inline:8px!important}
  .topbar{padding-inline:8px!important}
  .topbar h2{max-width:50vw!important;font-size:.75rem!important}
  .quiet-logout{padding-inline:8px!important}
  .customer-list-row .row-actions{grid-template-columns:1fr 1fr}
  .mobile-order-tabs{gap:3px;padding-inline:7px!important}
  .mobile-order-tabs button{font-size:.58rem!important;padding-inline:2px!important}
  .work-context-meta{grid-template-columns:1fr!important}
  #modal .modal-head{padding-inline:10px!important}
  #modal .modal-body{padding-inline:8px!important}
  #modal .modal-actions{padding-inline:8px!important}
}


/* =========================================================
   V1.9.2 — Customer/Payment/Order refinement
   ========================================================= */

/* ---------- Customers: cleaner atelier directory ---------- */
#customersScreen .screen-head h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:2.05rem;
  font-weight:500;
  letter-spacing:-.025em;
  color:#3f2938;
}
#customersScreen .screen-head .muted{
  color:#7c6d73;
  font-size:.84rem;
}
#customersScreen .panel{
  border-color:#e5d9d0;
  box-shadow:0 10px 30px rgba(61,41,51,.035);
}
#customerList{
  display:grid;
}
.customer-card-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:20px;
  padding:17px 18px;
  border-bottom:1px solid #e9dfd7;
  background:rgba(255,253,250,.74);
}
.customer-card-row:last-child{border-bottom:0}
.customer-card-row:hover{background:#fffdf9}
.customer-card-info{min-width:0}
.customer-card-name{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.02rem;
  line-height:1.15;
  font-weight:600;
  color:#49333f;
}
.customer-card-contact{
  margin-top:5px;
  color:#6f6268;
  font-size:.76rem;
  line-height:1.4;
  overflow-wrap:anywhere;
}
.customer-card-contact span{color:#b69c87;margin:0 2px}
.customer-card-meta{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:8px;
}
.customer-card-meta span{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 8px;
  border-radius:999px;
  background:#f4ede7;
  color:#8a777f;
  font-size:.62rem;
  font-weight:650;
}
.customer-card-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
}
.customer-card-actions button{
  min-height:40px;
  padding:8px 12px;
  border-radius:11px;
}
.measure-symbol-btn{
  min-width:50px;
  font-size:.91rem!important;
  letter-spacing:0;
}

/* ---------- New/Edit Order basics ---------- */
.refined-order-basics{
  display:grid;
  grid-template-columns:minmax(250px,1.65fr) minmax(170px,1fr) minmax(140px,.72fr);
  align-items:start;
  gap:12px;
}
.edit-order-basics{
  grid-template-columns:minmax(240px,1.55fr) minmax(165px,1fr) minmax(135px,.72fr) minmax(145px,.78fr);
}
.refined-order-basics>label{
  min-width:0;
  display:grid;
  align-content:start;
  gap:5px;
}
.refined-order-basics select,
.refined-order-basics input{
  width:100%;
  min-width:0;
}
.order-customer-inline{
  min-height:47px;
  padding:8px 10px;
  border:1px solid #e5d8ce;
  border-radius:11px;
  background:#fffaf6;
  display:grid;
  align-content:center;
}
.order-customer-inline strong{
  color:#4a3440!important;
  font-size:.78rem;
  line-height:1.2;
}
.order-customer-inline small{
  margin-top:3px;
  color:#7d6f75;
  font-size:.66rem;
  line-height:1.3;
  overflow-wrap:anywhere;
}
.order-customer-inline.empty-inline strong{color:#87777e!important}

.order-inline-validation{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:12px;
  padding:10px 11px;
  border:1px solid #e7bebb;
  border-radius:12px;
  background:#fff2f0;
  color:#743d3b;
}
.order-inline-validation>span{
  width:28px;height:28px;min-width:28px;
  display:grid;place-items:center;
  border-radius:9px;
  background:#b95750;
  color:#fff;
  font-weight:800;
}
.order-inline-validation strong{
  display:block;
  color:#703a39!important;
  font-size:.73rem;
}
.order-inline-validation small{
  display:block;
  margin-top:2px;
  color:#8d5551;
  font-size:.68rem;
}

/* ---------- Payment ---------- */
.payment-form-grid{
  align-items:start;
}
#pMethodDetailWrap{
  transition:opacity .15s ease;
}

/* Delete stays available only in safer contexts. */
#ordersScreen .mini-delete-btn{display:none!important}

/* ---------- Mobile ---------- */
@media(max-width:760px){
  #customersScreen .screen-head h1{font-size:1.55rem!important}
  #customersScreen .screen-head .muted{font-size:.76rem}
  .customer-card-row{
    grid-template-columns:1fr;
    gap:12px;
    padding:14px 13px;
  }
  .customer-card-name{font-size:1.04rem}
  .customer-card-contact{font-size:.73rem}
  .customer-card-actions{
    display:grid;
    grid-template-columns:1fr 58px 1fr 48px;
    width:100%;
    gap:6px;
  }
  .customer-card-actions button{
    width:100%;
    min-width:0;
    min-height:43px;
    padding:7px 5px;
    font-size:.72rem;
  }

  .refined-order-basics,
  .edit-order-basics{
    grid-template-columns:1fr!important;
  }
  .order-customer-inline{min-height:45px}
}

@media(max-width:340px){
  .customer-card-actions{
    grid-template-columns:1fr 54px;
  }
  .customer-card-actions button{min-height:42px}
}


/* =========================================================
   V1.9.3 — Visual hierarchy + Payment workflow + Measurement Check
   ========================================================= */

/* ---- Global reading hierarchy: elegant, not heavy ---- */
body{
  color:#493b43;
  letter-spacing:.002em;
}
.screen-head h1,
.modal-head h2,
.order-detail-heading h1{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500!important;
  color:#422c39!important;
}
.list-main{
  font-weight:600!important;
  color:#493840;
  font-size:.92rem;
}
.list-sub{
  font-size:.78rem!important;
  line-height:1.45;
  font-weight:400!important;
  color:#84777d!important;
}
.muted{
  font-weight:400!important;
  color:#80737a!important;
}
.badge{
  font-weight:650!important;
  letter-spacing:0;
}
.detail-label,
.micro-label,
.section-kicker,
.section-label{
  font-weight:700!important;
}
button{
  font-weight:600!important;
}
.input-help{
  font-weight:400!important;
  color:#918389!important;
}

/* ---- Payments: one customer/order = one clear ledger row ---- */
.payment-screen-head{
  align-items:start!important;
}
.payment-ledger-row{
  display:grid;
  grid-template-columns:minmax(230px,1.45fr) minmax(300px,1fr) minmax(200px,.8fr);
  gap:22px;
  align-items:center;
  padding:18px 20px;
  border-bottom:1px solid #e7ddd5;
  background:#fffdfa;
}
.payment-ledger-row:last-child{border-bottom:0}
.payment-customer-name{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.08rem;
  font-weight:600;
  color:#49313e;
}
.payment-order-line{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:5px;
  font-size:.72rem;
}
.payment-order-line strong{
  color:#6e5362!important;
  font-weight:600!important;
}
.payment-order-line span{
  color:#92858b;
  font-weight:400;
}
.payment-garment-line{
  margin-top:5px;
  color:#74666d;
  font-size:.78rem;
  font-weight:400;
}
.payment-ledger-amounts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.payment-ledger-amounts>div{
  min-width:0;
  padding-left:12px;
  border-left:1px solid #eadfd8;
}
.payment-ledger-amounts span{
  display:block;
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#9a8c91;
  font-weight:600;
}
.payment-ledger-amounts strong{
  display:block;
  margin-top:4px;
  font-size:.91rem;
  font-weight:500!important;
  color:#48373f!important;
}
.payment-ledger-action{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.payment-status-stack{
  display:grid;
  justify-items:end;
  gap:4px;
}
.payment-status-stack small{
  color:#95878c;
  font-size:.64rem;
  font-weight:400;
  text-align:right;
}
.payment-row-btn{
  min-height:40px;
  padding:8px 12px;
  border:1px solid #d8c8bd;
  border-radius:11px;
  background:#fff9f4;
  color:#513a48;
  cursor:pointer;
  white-space:nowrap;
}
.payment-row-btn:hover{background:#f5ebe3}

/* Locked payment context avoids accidentally paying another order. */
.payment-order-context{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:13px 14px;
  margin-bottom:2px;
  border:1px solid #dfd1c6;
  border-radius:15px;
  background:linear-gradient(135deg,#fffaf4,#f5eee7);
}
.payment-order-context>div:first-child strong{
  display:block;
  margin-top:2px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.05rem;
  font-weight:600!important;
}
.payment-order-context>div:first-child small{
  display:block;
  margin-top:3px;
  color:#7e7076;
  font-size:.7rem;
}
.payment-order-context-meta{
  display:grid;
  justify-items:end;
  gap:2px;
}
.payment-order-context-meta span{font-size:.63rem;color:#95878d}
.payment-order-context-meta strong{font-size:.78rem;font-weight:600!important}
.payment-order-context-meta em{
  font-size:.69rem;
  font-style:normal;
  font-weight:600;
  color:#9b553f;
}

/* ---- Customers: improve small supporting text without making it bold ---- */
.customer-card-contact{
  font-size:.79rem!important;
  font-weight:400!important;
  color:#74676d!important;
}
.customer-card-meta span{
  min-height:27px!important;
  padding:4px 9px!important;
  font-size:.7rem!important;
  font-weight:500!important;
  color:#7d6e75!important;
  background:#f3ece7!important;
}
.customer-card-name{
  font-weight:600!important;
  font-size:1.08rem!important;
}

/* ---- Order window: no clipping, no repeated customer blocks ---- */
.refined-order-basics{
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,.72fr)!important;
  width:100%;
}
.refined-order-basics.known-customer-basics{
  grid-template-columns:minmax(0,1fr) minmax(0,.72fr)!important;
}
.edit-order-basics{
  grid-template-columns:minmax(0,1fr) minmax(0,.72fr) minmax(0,.78fr)!important;
}
.order-entry-pane,
.order-entry-pane>*,
.garment-entry-card,
.garment-basic-grid,
.form-section-card{
  min-width:0;
  max-width:100%;
}
#modal[data-mode="order"] .modal-body{
  overflow-x:hidden!important;
}
#modal[data-mode="order"] .modal-head .muted{
  font-size:.75rem!important;
  color:#7f7177!important;
}
#modal[data-mode="order"] .modal-head h2{
  font-size:1.45rem!important;
}
.desk-head small{
  font-weight:400!important;
  color:#8a7c82!important;
}
.desk-measure-row span{
  font-weight:400!important;
}
.desk-measure-row strong{
  font-weight:600!important;
}

/* ---- Order detail: customer/phone already at top, avoid repetition ---- */
#orderDetailTitle{
  font-size:1.48rem!important;
  font-weight:500!important;
}
#orderDetailSubtitle{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  margin-top:7px!important;
  font-size:.84rem!important;
  color:#6f6168!important;
}
.order-hero h2{
  font-size:1.78rem!important;
  font-weight:500!important;
}
.order-hero p{
  font-size:1rem!important;
  font-weight:500!important;
}
.compact-customer-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 16px!important;
}
.compact-customer-info{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}
.compact-customer-info>div{
  display:grid;
  gap:3px;
}
.compact-customer-info strong{
  font-size:.82rem;
  font-weight:500!important;
  color:#4a3941!important;
}

/* ---- Measurement plausibility dialog ---- */
.measurement-check-dialog{
  width:min(650px,calc(100% - 24px));
  max-width:none;
  border:0;
  padding:0;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(35,24,30,.28);
}
.measurement-check-dialog::backdrop{
  background:rgba(31,23,27,.52);
  backdrop-filter:blur(4px);
}
.measurement-check-card{
  background:#fffdfa;
  padding:20px;
}
.measurement-check-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.measurement-check-head h3{
  margin:4px 0 5px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.35rem;
  font-weight:500;
  color:#49333e;
}
.measurement-check-head p{
  margin:0;
  color:#806f76;
  font-size:.76rem;
  line-height:1.45;
}
.measurement-check-icon{
  width:40px;height:40px;min-width:40px;
  display:grid;place-items:center;
  border-radius:12px;
  background:#fff0dd;
  color:#a25e23;
  font-weight:800;
}
.measurement-check-list{
  display:grid;
  gap:8px;
  margin:17px 0 13px;
}
.measurement-check-list>div{
  display:grid;
  grid-template-columns:26px 1fr;
  gap:9px;
  align-items:start;
  padding:10px;
  border:1px solid #eadbd0;
  border-radius:12px;
  background:#fffaf5;
}
.measurement-check-list>div>span{
  width:24px;height:24px;
  display:grid;place-items:center;
  border-radius:8px;
  background:#f4e5d5;
  color:#8d6038;
  font-size:.66rem;
  font-weight:700;
}
.measurement-check-list p{
  margin:1px 0 0;
  font-size:.76rem;
  line-height:1.45;
  color:#5e4c55;
}
.measurement-check-note{
  padding:10px 11px;
  border-radius:11px;
  background:#f3f6f2;
  color:#607066;
  font-size:.71rem;
  line-height:1.45;
}
.measurement-check-note strong{font-weight:650}
.measurement-check-actions{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:16px;
}

/* ---- Responsive ---- */
@media(max-width:900px){
  .payment-ledger-row{
    grid-template-columns:1fr 1fr;
  }
  .payment-ledger-action{
    grid-column:1/-1;
    justify-content:space-between;
    padding-top:3px;
  }
}

@media(max-width:760px){
  .payment-ledger-row{
    grid-template-columns:1fr!important;
    gap:13px;
    padding:14px 13px;
  }
  .payment-ledger-amounts{
    grid-template-columns:repeat(3,1fr);
  }
  .payment-ledger-amounts>div{padding-left:8px}
  .payment-ledger-action{
    grid-column:auto;
    display:grid;
    grid-template-columns:1fr auto;
  }
  .payment-status-stack{justify-items:start}
  .payment-status-stack small{text-align:left}
  .payment-row-btn{min-height:43px}
  .payment-order-context{
    display:grid;
  }
  .payment-order-context-meta{
    justify-items:start;
    padding-top:8px;
    border-top:1px solid #e4d7cd;
  }

  .customer-card-contact{font-size:.76rem!important}
  .customer-card-meta span{font-size:.67rem!important}

  .refined-order-basics,
  .refined-order-basics.known-customer-basics,
  .edit-order-basics{
    grid-template-columns:1fr!important;
  }
  #modal[data-mode="order"] .modal-head h2{font-size:1.18rem!important}
  #modal[data-mode="order"] .modal-head .muted{
    font-size:.68rem!important;
    line-height:1.35;
  }

  .compact-customer-strip{
    align-items:flex-start;
  }
  .compact-customer-info{
    gap:14px;
  }
  .compact-customer-strip .soft-btn{
    flex:none;
  }

  .measurement-check-dialog{
    width:calc(100% - 14px);
  }
  .measurement-check-card{padding:15px}
  .measurement-check-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .measurement-check-actions button{min-height:45px}
}

@media(max-width:360px){
  .payment-ledger-amounts{
    gap:6px;
  }
  .payment-ledger-amounts strong{font-size:.82rem!important}
  .compact-customer-strip{
    display:grid;
  }
  .measurement-check-actions{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V1.9.4 — Final Polish & Workflow Organization
   ========================================================= */

/* ---------------------------------------------------------
   NUMBER ENTRY — clean typing, no browser spinner arrows
   --------------------------------------------------------- */
input[type="number"]{
  appearance:textfield;
  -moz-appearance:textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* ---------------------------------------------------------
   TYPOGRAPHY SYSTEM
   --------------------------------------------------------- */
body{
  font-size:15px;
  line-height:1.45;
}
.screen-head h1{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500!important;
  letter-spacing:-.025em;
}
.form-section-title strong,
.order-section-head h3{
  font-weight:500!important;
}
label,
.list-sub,
.customer-card-contact,
.customer-card-meta span,
.payment-order-line,
.payment-garment-line,
.detail-label,
.input-help,
.section-help{
  font-weight:400!important;
}
label{
  color:#6d5d65!important;
}
input,select,textarea{
  color:#44353d!important;
}
input::placeholder,textarea::placeholder{
  color:#aa9ca1!important;
  opacity:1;
}

/* ---------------------------------------------------------
   NEW CUSTOMER — balanced 2 × 2 layout on desktop
   --------------------------------------------------------- */
.customer-intake-grid{
  grid-template-columns:1fr 1fr!important;
  gap:14px!important;
}
.customer-intake-grid>label{
  min-width:0;
}
.customer-intake-grid input,
.customer-intake-grid select{
  width:100%;
}

/* ---------------------------------------------------------
   ORDER BASICS — consistent field geometry
   --------------------------------------------------------- */
.refined-order-basics,
.refined-order-basics.known-customer-basics,
.edit-order-basics{
  display:grid!important;
  align-items:start!important;
  gap:14px!important;
}
.refined-order-basics{
  grid-template-columns:minmax(210px,1.35fr) minmax(180px,1fr) minmax(150px,.78fr)!important;
}
.refined-order-basics.known-customer-basics{
  grid-template-columns:minmax(190px,1fr) minmax(160px,.78fr)!important;
}
.edit-order-basics{
  grid-template-columns:minmax(190px,1fr) minmax(160px,.78fr) minmax(170px,.82fr)!important;
}
.refined-order-basics>label,
.edit-order-basics>label{
  display:grid!important;
  grid-template-rows:auto 48px auto;
  align-items:start;
  gap:5px;
  min-width:0;
  margin:0!important;
}
.refined-order-basics input,
.refined-order-basics select,
.edit-order-basics input,
.edit-order-basics select{
  width:100%!important;
  min-width:0!important;
  height:48px!important;
  min-height:48px!important;
  box-sizing:border-box;
}
.refined-order-basics .input-help,
.edit-order-basics .input-help{
  min-height:18px;
  margin-top:0!important;
  font-size:.67rem!important;
}
.compact-order-basics{
  overflow:hidden;
}

/* ---------------------------------------------------------
   MEASUREMENTS — identity once, units beside section heading
   --------------------------------------------------------- */
.measurement-customer-picker{
  display:grid;
  grid-template-columns:minmax(240px,420px);
}
.measurement-toolbar-clean{
  display:grid!important;
  grid-template-columns:minmax(240px,1.5fr) minmax(180px,.8fr)!important;
  align-items:start!important;
  gap:14px!important;
}
.measurement-toolbar-clean>label{
  min-width:0;
}
.measurement-toolbar-clean input,
.measurement-toolbar-clean select{
  width:100%;
}
.measurement-section-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}
.measurement-section-title-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.measurement-unit-chip{
  display:inline-flex;
  align-items:center;
  min-height:29px;
  padding:5px 9px;
  border:1px solid #ddd0c6;
  border-radius:999px;
  background:#fffaf5;
  color:#775f6b;
  font-size:.68rem;
  font-weight:600;
  white-space:nowrap;
}
.correction-toolbar{
  grid-template-columns:minmax(190px,1fr) minmax(130px,.55fr)!important;
}
.correction-unit-note{
  display:grid;
  align-content:center;
  min-height:69px;
  padding:9px 12px;
  border:1px solid #e0d4cb;
  border-radius:12px;
  background:#fffaf6;
}
.correction-unit-note span{
  font-size:.61rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#9a8a90;
}
.correction-unit-note strong{
  margin-top:3px;
  font-size:.82rem;
  font-weight:500!important;
}

/* ---------------------------------------------------------
   PAYMENTS — collection first, completed separate
   --------------------------------------------------------- */
#paymentList{
  display:grid;
  gap:18px;
  background:transparent!important;
}
.payment-section{
  overflow:hidden;
  border:1px solid #e3d8cf;
  border-radius:18px;
  background:#fffdfa;
  box-shadow:0 10px 30px rgba(59,40,50,.035);
}
.payment-section-head,
.payment-completed-section summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:17px 20px;
  border-bottom:1px solid #e8ded6;
  background:#fbf7f3;
}
.payment-section-head h2,
.payment-completed-section summary h2{
  margin:2px 0 1px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.23rem;
  font-weight:500;
  color:#49323f;
}
.payment-section-head p,
.payment-completed-section summary p{
  margin:0;
  color:#81737a;
  font-size:.72rem;
  font-weight:400;
}
.payment-count-chip{
  min-width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0 9px;
  border-radius:999px;
  background:#4e2944;
  color:#fff;
  font-size:.72rem;
  font-weight:600;
}
.payment-count-chip.paid-count{
  background:#e6f2eb;
  color:#2d6a51;
}
.payment-completed-section details>summary{
  cursor:pointer;
  list-style:none;
}
.payment-completed-section summary::-webkit-details-marker{display:none}
.payment-section-list{
  display:grid;
}
.payment-completed-row{
  background:#fbfcfa!important;
}
.payment-completed-row .payment-customer-name,
.payment-completed-row .payment-ledger-amounts strong{
  color:#655b60!important;
}
.payment-ledger-amounts span{
  font-size:.67rem!important;
}
.payment-ledger-amounts strong{
  font-size:1rem!important;
  line-height:1.2;
}
.payment-ledger-amounts .balance-pending strong{
  color:#176044!important;
  font-weight:650!important;
  font-size:1.08rem!important;
}
.payment-ledger-amounts .balance-pending span{
  color:#276a50!important;
}
.payment-ledger-amounts .balance-over strong{
  color:#9d4b42!important;
}
.compact-empty{
  padding:20px;
  color:#8c7f85;
  font-size:.78rem;
}

/* Order detail pending balance */
.money-grid-four{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.balance-money-box.has-balance{
  border-color:#bed7cb!important;
  background:#f3faf6!important;
}
.balance-money-box.has-balance strong{
  color:#175f43!important;
  font-size:1.18rem!important;
}
.balance-money-box.has-overpayment{
  border-color:#e4c8c3!important;
  background:#fff6f4!important;
}
.balance-money-box.has-overpayment strong{
  color:#9c4a42!important;
}

/* ---------------------------------------------------------
   ORDERS — grouped by tailoring stage
   --------------------------------------------------------- */
#orderList{
  display:grid;
  gap:18px;
  background:transparent!important;
}
.orders-category-head{
  padding:2px 2px 0;
}
.orders-category-head>span{
  font-size:.59rem;
  letter-spacing:.1em;
  font-weight:700;
  color:#a17649;
}
.orders-category-head h2{
  margin:3px 0 1px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.35rem;
  font-weight:500;
  color:#49323f;
}
.orders-category-head p{
  margin:0;
  color:#85777d;
  font-size:.72rem;
}
.order-status-group{
  overflow:hidden;
  border:1px solid #e4d9d1;
  border-radius:17px;
  background:#fffdfa;
}
.order-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 16px;
  border-bottom:1px solid #e9dfd8;
  background:#faf6f2;
}
.order-group-head>div{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}
.order-group-head h3{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1rem;
  font-weight:500;
  color:#4a3640;
}
.order-group-head span:not(.badge){
  color:#8d7e84;
  font-size:.67rem;
}
.order-group-list .list-row:last-child{
  border-bottom:0;
}
.order-group-list .list-row{
  background:#fffdfa;
}
.order-group-list .badge.red{
  box-shadow:0 0 0 2px rgba(171,65,59,.06);
}

/* ---------------------------------------------------------
   MODAL / CLIPPING QA
   --------------------------------------------------------- */
#modal .modal-card,
#modal .modal-body,
.order-workbench,
.order-entry-pane,
.order-measure-pane,
.form-section-card,
.garment-entry-card,
.measurement-section-card{
  box-sizing:border-box;
  max-width:100%;
  min-width:0;
}
#modal .modal-body{
  overflow-x:hidden!important;
}
.order-workbench{
  width:100%;
}
.order-entry-pane{
  overflow:hidden;
}
.garment-basic-grid{
  grid-template-columns:minmax(160px,1.2fr) minmax(90px,.55fr) minmax(155px,.9fr) minmax(115px,.65fr)!important;
}

/* ---------------------------------------------------------
   RESPONSIVE QA
   --------------------------------------------------------- */
@media(max-width:920px){
  .money-grid-four{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .customer-intake-grid{
    grid-template-columns:1fr 1fr!important;
  }
}
@media(max-width:760px){
  .customer-intake-grid{
    grid-template-columns:1fr!important;
  }
  .refined-order-basics,
  .refined-order-basics.known-customer-basics,
  .edit-order-basics{
    grid-template-columns:1fr!important;
  }
  .refined-order-basics>label,
  .edit-order-basics>label{
    grid-template-rows:auto 48px auto;
  }
  .measurement-toolbar-clean{
    grid-template-columns:1fr!important;
  }
  .measurement-customer-picker{
    grid-template-columns:1fr;
  }
  .measurement-section-head{
    align-items:flex-start!important;
  }
  .measurement-unit-chip{
    margin-top:1px;
  }
  .payment-section-head,
  .payment-completed-section summary{
    padding:14px;
  }
  .payment-section-head h2,
  .payment-completed-section summary h2{
    font-size:1.08rem;
  }
  .payment-ledger-amounts strong{
    font-size:.95rem!important;
  }
  .payment-ledger-amounts .balance-pending strong{
    font-size:1.03rem!important;
  }
  .money-grid-four{
    grid-template-columns:1fr 1fr!important;
  }
  .order-group-head{
    padding:11px 12px;
  }
  .garment-basic-grid{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:380px){
  .measurement-section-head{
    display:grid!important;
  }
  .measurement-unit-chip{
    justify-self:start;
  }
  .money-grid-four{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   V1.9.4.1 — Garment Card + Alignment + Measurement Inputs
   ========================================================= */

/* Customer phone: tap to call */
.phone-call-link{
  color:inherit;
  text-decoration:none;
  border-bottom:1px dotted #b99f91;
}
.phone-call-link:hover{
  color:#4e2944;
  border-bottom-color:#4e2944;
}
.phone-call-link:focus-visible{
  outline:2px solid rgba(78,41,68,.25);
  outline-offset:2px;
  border-radius:3px;
}

/* ---------------------------------------------------------
   ORDER BASICS — label, control, helper are now real rows
   --------------------------------------------------------- */
.field-label-line{
  display:flex;
  align-items:center;
  min-height:18px;
  gap:6px;
  color:#6d5d65;
  font-size:.72rem;
  line-height:1.2;
  font-weight:400;
}
.field-label-line em{
  font-style:normal;
  font-size:.56rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#ae5345;
  font-weight:700;
}
.refined-order-basics>label,
.edit-order-basics>label{
  grid-template-rows:18px 48px 18px!important;
}
.refined-order-basics .input-help,
.edit-order-basics .input-help{
  line-height:18px!important;
  min-height:18px!important;
}

/* For known-customer new orders, Delivery + Priority get equal columns. */
.refined-order-basics.known-customer-basics{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
}
.edit-order-basics{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

/* ---------------------------------------------------------
   GARMENT ENTRY — no clipped line total
   --------------------------------------------------------- */
.garment-basic-grid{
  grid-template-columns:minmax(170px,1.25fr) minmax(105px,.55fr) minmax(155px,.85fr)!important;
  align-items:end!important;
  gap:10px!important;
}
.line-total-strip{
  grid-column:1/-1!important;
  width:100%;
  min-width:0!important;
  min-height:46px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px;
  padding:10px 13px!important;
  box-sizing:border-box;
}
.line-total-strip span{
  margin:0!important;
}
.line-total-strip strong{
  white-space:nowrap;
  font-size:1.05rem!important;
}

/* ---------------------------------------------------------
   ORDER DETAIL — garment is now a real information card
   --------------------------------------------------------- */
.garment-detail-card{
  padding:0!important;
  overflow:hidden;
  background:#fffdf9!important;
  border-color:#e1d5cc!important;
}
.garment-detail-summary{
  display:grid;
  grid-template-columns:minmax(140px,.85fr) minmax(350px,2fr) auto;
  align-items:center;
  gap:16px;
  padding:15px 16px;
  background:linear-gradient(135deg,#fffaf4,#f8f0e9);
  border-bottom:1px solid #e6dbd2;
}
.garment-detail-name strong{
  display:block;
  margin-top:3px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.25rem;
  line-height:1.1;
  font-weight:500!important;
  color:#452f3b!important;
}
.garment-detail-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid #e4d8cf;
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.72);
}
.garment-detail-stats>div{
  min-width:0;
  padding:8px 10px;
  border-right:1px solid #e6dcd4;
}
.garment-detail-stats>div:last-child{border-right:0}
.garment-detail-stats span{
  display:block;
  font-size:.56rem;
  text-transform:uppercase;
  letter-spacing:.065em;
  color:#97878d;
  font-weight:600;
  white-space:nowrap;
}
.garment-detail-stats strong{
  display:block;
  margin-top:3px;
  font-size:.78rem;
  line-height:1.2;
  font-weight:500!important;
  color:#4a3941!important;
  overflow-wrap:anywhere;
}
.garment-edit-btn{
  white-space:nowrap;
  min-height:40px;
}
.garment-detail-notes{
  padding:13px 16px 4px;
  display:grid;
  gap:9px;
}
.garment-detail-notes>div:not(.empty-detail-note){
  padding:9px 10px;
  border-radius:10px;
  background:#faf6f2;
}
.garment-detail-notes span{
  display:block;
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#9b895f;
  font-weight:650;
}
.garment-detail-notes p{
  margin:3px 0 0;
  color:#5e5057;
  font-size:.78rem;
  line-height:1.45;
  font-weight:400;
}
.empty-detail-note{
  color:#91848a;
  font-size:.76rem;
  font-weight:400;
}
.garment-linked-label{
  margin:7px 16px 0!important;
}
.garment-detail-card>.combined-measurement-wrap,
.garment-detail-card>.measurement-card,
.garment-detail-card>.measurement-empty{
  margin:8px 16px 16px!important;
}

/* ---------------------------------------------------------
   TOP measurement additions
   --------------------------------------------------------- */
.measurement-unit-chip{
  font-weight:500!important;
}

/* ---------------------------------------------------------
   Responsive QA
   --------------------------------------------------------- */
@media(max-width:900px){
  .garment-detail-summary{
    grid-template-columns:1fr auto;
  }
  .garment-detail-stats{
    grid-column:1/-1;
    grid-row:2;
  }
}
@media(max-width:760px){
  .refined-order-basics.known-customer-basics,
  .edit-order-basics{
    grid-template-columns:1fr!important;
  }

  .garment-basic-grid{
    grid-template-columns:1fr 1fr!important;
  }
  .garment-basic-grid>label:first-child{
    grid-column:1/-1;
  }
  .garment-basic-grid>label:nth-child(4){
    grid-column:auto;
  }
  .line-total-strip{
    grid-column:1/-1!important;
  }

  .garment-detail-summary{
    display:grid;
    grid-template-columns:1fr!important;
    gap:11px;
    padding:13px;
  }
  .garment-detail-name{
    padding-bottom:1px;
  }
  .garment-detail-name strong{
    font-size:1.18rem!important;
  }
  .garment-detail-stats{
    grid-column:auto;
    grid-row:auto;
    grid-template-columns:1fr 1fr;
  }
  .garment-detail-stats>div:nth-child(2){
    border-right:0;
  }
  .garment-detail-stats>div:nth-child(-n+2){
    border-bottom:1px solid #e6dcd4;
  }
  .garment-detail-stats span{
    font-size:.58rem;
  }
  .garment-detail-stats strong{
    font-size:.8rem!important;
  }
  .garment-edit-btn{
    width:100%;
  }
  .garment-detail-notes{
    padding:11px 13px 3px;
  }
  .garment-linked-label{
    margin-inline:13px!important;
  }
  .garment-detail-card>.combined-measurement-wrap,
  .garment-detail-card>.measurement-card,
  .garment-detail-card>.measurement-empty{
    margin:8px 13px 13px!important;
  }
}
@media(max-width:340px){
  .garment-basic-grid{
    grid-template-columns:1fr!important;
  }
  .garment-basic-grid>label:first-child{
    grid-column:auto;
  }
  .garment-detail-stats{
    grid-template-columns:1fr!important;
  }
  .garment-detail-stats>div{
    border-right:0!important;
    border-bottom:1px solid #e6dcd4!important;
  }
  .garment-detail-stats>div:last-child{
    border-bottom:0!important;
  }
}


/* =========================================================
   V1.9.4.2 — Garment Summary Layout Polish
   ========================================================= */

.garment-detail-vertical{
  overflow:hidden;
  background:#fffdf9!important;
  border-color:#e2d6cd!important;
}

/* A quiet, readable garment block rather than a compressed table row. */
.garment-summary-block{
  padding:16px;
  background:linear-gradient(145deg,#fffaf5,#f8f1eb);
  border-bottom:1px solid #e6dbd2;
}

.garment-summary-title{
  padding-bottom:12px;
  border-bottom:1px solid #e3d7ce;
}

.garment-summary-label{
  display:block;
  margin-bottom:3px;
  color:#9b744b;
  font-size:.63rem;
  line-height:1.2;
  letter-spacing:.07em;
  text-transform:none;
  font-weight:500;
}

.garment-summary-title strong{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  color:#452f3b!important;
  font-size:1.35rem;
  line-height:1.15;
  font-weight:500!important;
}

.garment-summary-lines{
  display:grid;
  margin-top:4px;
}

.garment-summary-line{
  display:grid;
  grid-template-columns:minmax(130px,.8fr) minmax(0,1.2fr);
  align-items:center;
  gap:20px;
  min-height:44px;
  padding:9px 2px;
  border-bottom:1px solid #e8ded6;
}

.garment-summary-line:last-child{
  border-bottom:0;
}

.garment-summary-line span{
  color:#81747a;
  font-size:.76rem;
  font-weight:400!important;
}

.garment-summary-line strong{
  color:#4a3941!important;
  font-size:.84rem;
  line-height:1.25;
  font-weight:500!important;
  text-align:right;
}

.garment-summary-total span{
  color:#6f5a64;
}

.garment-summary-total strong{
  color:#4e2944!important;
  font-size:1rem;
  font-weight:600!important;
}

.garment-edit-wide{
  width:100%;
  min-height:42px;
  margin-top:12px;
}

/* Design / stitching information stays between garment summary and measurements. */
.garment-detail-vertical .garment-detail-notes{
  padding:14px 16px 4px;
}

/* Clear visual break before measurement content. */
.measurement-divider-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin:12px 16px 8px;
  padding-top:13px;
  border-top:1px solid #e5dad2;
}

.measurement-divider-head>span{
  color:#8d6640;
  font-size:.68rem;
  letter-spacing:.065em;
  font-weight:600;
}

.measurement-divider-head>small{
  color:#95878d;
  font-size:.67rem;
  line-height:1.3;
  font-weight:400;
  text-align:right;
}

.garment-detail-vertical>.combined-measurement-wrap,
.garment-detail-vertical>.measurement-card,
.garment-detail-vertical>.measurement-empty{
  margin:8px 16px 16px!important;
}

/* Override the earlier horizontal garment-summary layout. */
.garment-detail-vertical .garment-detail-summary,
.garment-detail-vertical .garment-detail-stats,
.garment-detail-vertical .garment-detail-name{
  display:none!important;
}

@media(max-width:760px){
  .garment-summary-block{
    padding:14px 13px;
  }

  .garment-summary-title strong{
    font-size:1.22rem;
  }

  .garment-summary-line{
    grid-template-columns:minmax(105px,.85fr) minmax(0,1.15fr);
    gap:12px;
    min-height:42px;
    padding:8px 1px;
  }

  .garment-summary-line span{
    font-size:.73rem;
  }

  .garment-summary-line strong{
    font-size:.8rem!important;
  }

  .garment-summary-total strong{
    font-size:.95rem!important;
  }

  .garment-detail-vertical .garment-detail-notes{
    padding:12px 13px 3px;
  }

  .measurement-divider-head{
    display:grid;
    gap:3px;
    margin:11px 13px 7px;
  }

  .measurement-divider-head>small{
    text-align:left;
    font-size:.64rem;
  }

  .garment-detail-vertical>.combined-measurement-wrap,
  .garment-detail-vertical>.measurement-card,
  .garment-detail-vertical>.measurement-empty{
    margin:7px 13px 13px!important;
  }
}

@media(max-width:320px){
  .garment-summary-line{
    grid-template-columns:1fr;
    gap:3px;
  }

  .garment-summary-line strong{
    text-align:left;
  }
}


/* =========================================================
   V1.9.4.3 — Darzee-inspired clarity + Mist/Blush palette
   Reference palette:
   #F7CBCA  blush pink
   #D8CECE  warm blush grey
   #F1F7F7  pale mist
   #D5E5E5  cool mist
   #B9D1D2  soft aqua
   #5D6B6B  deep slate
   ========================================================= */

:root{
  --bg:#F1F7F7!important;
  --bg-soft:#F6F9F8!important;
  --card:#FCFEFD!important;
  --text:#3F4D4E!important;
  --muted:#748283!important;
  --line:#D5E5E5!important;
  --line-strong:#B9D1D2!important;

  --accent:#5D6B6B!important;
  --accent-deep:#465455!important;
  --accent-soft:#D5E5E5!important;

  --gold:#8C7777!important;
  --gold-soft:#EEE5E5!important;

  --danger:#9B5D61!important;
  --danger-soft:#F9E3E2!important;
  --warn:#8C6D68!important;
  --warn-soft:#F6E8E6!important;
  --ok:#486C63!important;
  --ok-soft:#E2EFEB!important;

  --rose:#F7CBCA;
  --blush-grey:#D8CECE;
  --mist:#F1F7F7;
  --cool-mist:#D5E5E5;
  --soft-aqua:#B9D1D2;
  --slate:#5D6B6B;

  --shadow:0 18px 50px rgba(93,107,107,.10)!important;
  --shadow-soft:0 8px 26px rgba(93,107,107,.075)!important;
}

/* Whole app atmosphere */
html,body{
  background:var(--bg)!important;
}
body{
  background:
    radial-gradient(circle at 5% -8%,rgba(247,203,202,.34),transparent 29rem),
    radial-gradient(circle at 98% 4%,rgba(185,209,210,.30),transparent 31rem),
    linear-gradient(180deg,#F1F7F7 0%,#F6F9F8 48%,#F7EEEE 100%)!important;
  color:var(--text)!important;
}

/* Header / navigation */
.topbar{
  background:rgba(241,247,247,.93)!important;
  border-bottom-color:rgba(185,209,210,.82)!important;
}
.mini-monogram,
.brand-mark{
  background:linear-gradient(145deg,#5D6B6B,#465455)!important;
  color:#fff!important;
}
.eyebrow,
.page-kicker,
.micro-label,
.section-kicker,
.section-label{
  color:#7F6667!important;
}
.bottom-nav{
  background:rgba(252,254,253,.96)!important;
  border-top-color:#D5E5E5!important;
}
.bottom-nav button.active{
  color:#465455!important;
}

/* Primary actions */
.primary{
  background:linear-gradient(135deg,#5D6B6B,#465455)!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(93,107,107,.18)!important;
}
.primary:hover{
  background:#465455!important;
}
.ghost,.soft-btn,.row-actions button{
  background:#FCFEFD!important;
  border-color:#C9DADB!important;
  color:#4C5B5C!important;
}
.ghost:hover,.soft-btn:hover,.row-actions button:hover{
  background:#EDF5F4!important;
  border-color:#B9D1D2!important;
}

/* Cards / panels */
.panel,
.order-section,
.form-section-card,
.metric,
.item-card,
.measurement-card,
.payment-card,
.fit-card,
.customer-card-row,
.payment-section,
.order-status-group{
  background:rgba(252,254,253,.94)!important;
  border-color:#D5E5E5!important;
  box-shadow:var(--shadow-soft)!important;
}
.detail-box,
.money-box,
.line-total-box,
.customer-date-strip,
.order-date-strip,
.order-customer-inline,
.work-context-bar{
  background:#F6FAF9!important;
  border-color:#D5E5E5!important;
}

/* Inputs */
input,select,textarea{
  background:#FCFEFD!important;
  border-color:#C9DADB!important;
  color:#3F4D4E!important;
}
input:focus,select:focus,textarea:focus{
  border-color:#8EA9AA!important;
  box-shadow:0 0 0 3px rgba(185,209,210,.30)!important;
}

/* Status / semantic colors stay readable but inside palette */
.badge{
  background:#EDF3F2!important;
  color:#5D6B6B!important;
}
.badge.green{
  background:#E2EFEB!important;
  color:#486C63!important;
}
.badge.amber{
  background:#F5E9E5!important;
  color:#80635E!important;
}
.badge.red{
  background:#F9E3E2!important;
  color:#93575C!important;
}
.badge.purple{
  background:#E7EFEF!important;
  color:#5D6B6B!important;
}
.cancel-order-btn,
.danger-btn,
.delete-order-btn{
  border-color:#E6BDBC!important;
}
.callout{
  background:#FAEAE8!important;
  border-color:#F1C9C7!important;
  color:#725657!important;
}

/* ---------------------------------------------------------
   ORDER WORKSPACE — garments first, like a clear business table
   --------------------------------------------------------- */
.order-garment-workspace{
  overflow:hidden;
}

.order-garment-table{
  overflow:hidden;
  border:1px solid #C8DADB;
  border-radius:15px;
  background:#FCFEFD;
}

.order-garment-table-head,
.order-garment-table-row{
  display:grid;
  grid-template-columns:minmax(160px,1.35fr) minmax(75px,.55fr) minmax(115px,.8fr) minmax(115px,.8fr) minmax(105px,.72fr) minmax(80px,.55fr);
  align-items:center;
}

.order-garment-table-head{
  min-height:46px;
  background:#5D6B6B;
  color:#fff;
  border-bottom:1px solid #5D6B6B;
}

.order-garment-table-head>span{
  padding:10px 12px;
  font-size:.66rem;
  line-height:1.2;
  font-weight:600;
  letter-spacing:.02em;
  border-right:1px solid rgba(255,255,255,.14);
}
.order-garment-table-head>span:last-child{border-right:0}

.order-garment-table-row{
  min-height:58px;
  border-bottom:1px solid #D5E5E5;
  background:#FCFEFD;
}
.order-garment-table-row:last-child{border-bottom:0}
.order-garment-table-row:nth-child(even){
  background:#F4F8F7;
}

.garment-cell{
  min-width:0;
  padding:11px 12px;
  border-right:1px solid #E0EAEA;
  color:#596667;
  font-size:.76rem;
}
.garment-cell:last-child{border-right:0}

.garment-cell strong{
  color:#3E4C4D!important;
  font-size:.82rem;
  line-height:1.25;
  font-weight:500!important;
}
.garment-name-cell strong{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1rem!important;
  color:#465455!important;
}
.garment-total-cell strong{
  color:#486C63!important;
  font-weight:600!important;
}
.garment-action-cell{
  text-align:center;
}
.garment-action-cell .soft-btn{
  padding:7px 10px!important;
  min-height:36px;
}
.mobile-cell-label{display:none}

/* Subsections below the garment table */
.workspace-subsection-head{
  margin:20px 0 10px;
  padding-top:17px;
  border-top:1px solid #D5E5E5;
}
.workspace-subsection-head>div{
  display:flex;
  align-items:center;
  gap:10px;
}
.subsection-number{
  width:29px;
  height:29px;
  min-width:29px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#F7CBCA;
  color:#705C5D;
  font-size:.66rem;
  font-weight:700;
}
.workspace-subsection-head h4{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.04rem;
  font-weight:500;
  color:#465455;
}
.workspace-subsection-head p{
  margin:2px 0 0;
  color:#7A8888;
  font-size:.69rem;
  font-weight:400;
}

/* Garment instruction/reference cards */
.garment-details-stack{
  display:grid;
  gap:10px;
}
.garment-notes-card{
  border:1px solid #D5E5E5;
  border-radius:14px;
  overflow:hidden;
  background:#F9FCFB;
}
.garment-notes-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 13px;
  background:#EDF5F4;
  border-bottom:1px solid #D5E5E5;
}
.garment-notes-head>div:first-child{
  display:flex;
  align-items:center;
  gap:9px;
}
.garment-index-chip{
  width:27px;
  height:27px;
  min-width:27px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#F7CBCA;
  color:#735C5D;
  font-size:.65rem;
  font-weight:700;
}
.garment-notes-head h4,
.order-measurement-group-head h4{
  margin:1px 0 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:.96rem;
  line-height:1.1;
  font-weight:500;
  color:#465455;
}
.garment-notes-total{
  color:#486C63;
  font-size:.82rem;
  font-weight:600;
}
.garment-notes-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
.garment-notes-grid>div{
  min-height:72px;
  padding:11px 13px;
}
.garment-notes-grid>div+div{
  border-left:1px solid #D5E5E5;
}
.garment-notes-grid span{
  display:block;
  color:#82696A;
  font-size:.6rem;
  letter-spacing:.045em;
  font-weight:600;
}
.garment-notes-grid p{
  margin:4px 0 0;
  color:#637071;
  font-size:.75rem;
  line-height:1.4;
  font-weight:400;
}

/* Measurements now come after ALL garment data */
.measurement-subsection-head{
  margin-top:22px;
}
.order-measurements-stack{
  display:grid;
  gap:12px;
}
.order-measurement-group{
  border:1px solid #C8DADB;
  border-radius:15px;
  overflow:hidden;
  background:#FCFEFD;
}
.order-measurement-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 13px;
  background:linear-gradient(90deg,#D5E5E5,#EEF5F4);
  border-bottom:1px solid #C8DADB;
}
.order-measurement-group-head>div:first-child{
  display:flex;
  align-items:center;
  gap:9px;
}
.order-measurement-group>.combined-measurement-wrap,
.order-measurement-group>.measurement-card,
.order-measurement-group>.measurement-empty{
  margin:12px!important;
}

/* Price / balance accents */
.balance-money-box.has-balance,
.payment-ledger-amounts .balance-pending{
  background:#EAF3EF!important;
}
.balance-money-box.has-balance strong,
.payment-ledger-amounts .balance-pending strong{
  color:#486C63!important;
}

/* Customer and payment pages use subtle alternating rows like business software */
.customer-card-row:nth-child(even),
.payment-ledger-row:nth-child(even){
  background:#F5F9F8!important;
}

/* ---------------------------------------------------------
   Mobile: preserve "all garments first" but turn each row into
   a compact business card; measurements still come later.
   --------------------------------------------------------- */
@media(max-width:760px){
  .order-garment-table{
    border:0;
    background:transparent;
    display:grid;
    gap:9px;
  }
  .order-garment-table-head{
    display:none;
  }
  .order-garment-table-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    min-height:0;
    border:1px solid #C8DADB!important;
    border-radius:13px;
    overflow:hidden;
    background:#FCFEFD!important;
  }
  .garment-cell{
    min-height:58px;
    display:grid;
    align-content:center;
    gap:3px;
    padding:9px 11px;
    border-right:1px solid #D5E5E5;
    border-bottom:1px solid #D5E5E5;
  }
  .garment-cell:nth-child(even){border-right:0}
  .garment-cell:nth-last-child(-n+2){border-bottom:0}
  .mobile-cell-label{
    display:block;
    color:#8B797A;
    font-size:.57rem;
    letter-spacing:.05em;
    font-weight:500;
  }
  .garment-cell strong{
    font-size:.79rem!important;
  }
  .garment-name-cell strong{
    font-size:1rem!important;
  }
  .garment-action-cell{
    text-align:left;
  }
  .garment-action-cell .soft-btn{
    width:100%;
    min-height:38px;
  }

  .garment-notes-grid{
    grid-template-columns:1fr;
  }
  .garment-notes-grid>div+div{
    border-left:0;
    border-top:1px solid #D5E5E5;
  }

  .order-measurement-group-head{
    align-items:flex-start;
  }
  .order-measurement-group-head .soft-btn{
    min-height:38px;
    padding:7px 9px!important;
  }
}

@media(max-width:340px){
  .order-garment-table-row{
    grid-template-columns:1fr;
  }
  .garment-cell{
    border-right:0!important;
    border-bottom:1px solid #D5E5E5!important;
  }
  .garment-cell:last-child{
    border-bottom:0!important;
  }
}


/* =========================================================
   V1.9.5 — CLOUD TEAL ATELIER
   ========================================================= */
:root{
  --bg:#F7F7F3!important;
  --bg-soft:#FAFAF7!important;
  --card:#FFFFFF!important;
  --text:#263634!important;
  --muted:#6F7C79!important;
  --line:#DCE5E1!important;
  --line-strong:#C7D4CF!important;

  --accent:#294F4C!important;
  --accent-deep:#213F3D!important;
  --accent-soft:#E4ECE9!important;

  --gold:#A57D78!important;
  --gold-soft:#F1E6E4!important;
  --rose:#D6A39F!important;
  --rose-soft:#E8DAD7!important;

  --danger:#A55151!important;
  --danger-soft:#F8E7E5!important;
  --warn:#AD7441!important;
  --warn-soft:#F7ECDF!important;
  --ok:#326B55!important;
  --ok-soft:#E3EFE9!important;

  --shadow:0 18px 48px rgba(41,79,76,.085)!important;
  --shadow-soft:0 8px 24px rgba(41,79,76,.06)!important;
}

html,body{background:#F7F7F3!important}
body{
  background:
    radial-gradient(circle at 4% -10%,rgba(214,163,159,.17),transparent 28rem),
    radial-gradient(circle at 96% 0%,rgba(120,145,142,.13),transparent 32rem),
    linear-gradient(180deg,#F7F7F3 0%,#FAFAF7 52%,#F7F4F2 100%)!important;
  color:#263634!important;
}

/* Navigation */
.topbar{
  background:rgba(247,247,243,.95)!important;
  border-bottom-color:#DCE5E1!important;
  box-shadow:0 2px 18px rgba(41,79,76,.035)!important;
}
.mini-monogram,.brand-mark{
  background:linear-gradient(145deg,#294F4C,#213F3D)!important;
  color:#fff!important;
}
.bottom-nav{
  background:rgba(255,255,255,.97)!important;
  border-top-color:#DCE5E1!important;
}
.bottom-nav button{color:#73817E!important}
.bottom-nav button.active{color:#294F4C!important}

/* Editorial accents */
.eyebrow,.page-kicker,.micro-label,.section-kicker,.section-label{
  color:#9D716D!important;
}

/* Primary and secondary buttons */
.primary{
  background:linear-gradient(135deg,#294F4C,#213F3D)!important;
  border-color:#294F4C!important;
  color:#fff!important;
  box-shadow:0 9px 22px rgba(41,79,76,.18)!important;
}
.primary:hover{background:#213F3D!important}
.ghost,.soft-btn,.row-actions button,.payment-row-btn{
  background:#FFFFFF!important;
  border-color:#C7D4CF!important;
  color:#294F4C!important;
}
.ghost:hover,.soft-btn:hover,.row-actions button:hover,.payment-row-btn:hover{
  background:#EFF4F1!important;
  border-color:#9FB5AD!important;
}

/* Surfaces */
.panel,.order-section,.form-section-card,.metric,.item-card,
.measurement-card,.payment-section,.order-status-group,.customer-card-row,
.order-measurement-group,.garment-notes-card,.measurement-section-card{
  background:rgba(255,255,255,.96)!important;
  border-color:#DCE5E1!important;
  box-shadow:var(--shadow-soft)!important;
}
.detail-box,.money-box,.line-total-box,.customer-date-strip,.order-date-strip,
.order-customer-inline,.work-context-bar{
  background:#FBFCFA!important;
  border-color:#DCE5E1!important;
}

/* Inputs */
input,select,textarea{
  background:#FFFFFF!important;
  border-color:#C7D4CF!important;
  color:#263634!important;
}
input:focus,select:focus,textarea:focus{
  border-color:#78918E!important;
  box-shadow:0 0 0 3px rgba(120,145,142,.18)!important;
}
input::placeholder,textarea::placeholder{color:#9DA8A5!important}

/* Text */
.screen-head h1,.modal-head h2,.order-section-head h3,
.workspace-subsection-head h4,.garment-notes-head h4,
.order-measurement-group-head h4,.customer-card-name{
  color:#263634!important;
}
.list-sub,.muted,.input-help,.customer-card-contact,
.customer-card-meta span,.payment-garment-line,.detail-label{
  color:#6F7C79!important;
}

/* Semantics */
.badge{background:#EDF2F0!important;color:#526966!important}
.badge.green{background:#E3EFE9!important;color:#326B55!important}
.badge.amber{background:#F7ECDF!important;color:#9A652F!important}
.badge.red{background:#F8E7E5!important;color:#A55151!important}
.badge.purple{background:#E9EEEE!important;color:#526966!important}
.required-mark,.field-label-line em{color:#A55151!important}

.balance-money-box.has-balance,
.payment-ledger-amounts .balance-pending{
  background:#E9F2ED!important;
  border-color:#CFE1D8!important;
}
.balance-money-box.has-balance strong,
.payment-ledger-amounts .balance-pending strong{
  color:#326B55!important;
}
.balance-money-box.has-overpayment strong,
.payment-ledger-amounts .balance-over strong{
  color:#A55151!important;
}

/* Fashion accent */
.subsection-number,.garment-index-chip,.template-pill{
  background:#E8DAD7!important;
  color:#7D5E5A!important;
}

/* Order workspace */
.order-garment-table{
  border-color:#C7D4CF!important;
  background:#FFFFFF!important;
}
.order-garment-table-head{
  background:#294F4C!important;
  border-bottom-color:#294F4C!important;
  color:#fff!important;
}
.order-garment-table-row{
  background:#FFFFFF!important;
  border-bottom-color:#DCE5E1!important;
}
.order-garment-table-row:nth-child(even){background:#F5F8F6!important}
.garment-cell{
  border-right-color:#E4EBE8!important;
  color:#52615E!important;
}
.garment-cell strong{color:#263634!important}
.garment-name-cell strong{color:#294F4C!important}
.garment-total-cell strong{color:#326B55!important}

.garment-notes-head{
  background:#F1F5F3!important;
  border-bottom-color:#DCE5E1!important;
}
.order-measurement-group-head{
  background:linear-gradient(90deg,#E4ECE9,#F5F8F6)!important;
  border-bottom-color:#C7D4CF!important;
}

/* Shared measurement reuse */
.shared-measure-banner{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:10px 0;
  padding:11px 12px;
  border:1px solid #CFE0DA;
  border-radius:13px;
  background:#EDF5F1;
}
.shared-measure-icon{
  width:30px;height:30px;min-width:30px;
  display:grid;place-items:center;
  border-radius:9px;
  background:#D7E8E1;
  color:#326B55;
  font-weight:700;
}
.shared-measure-banner strong{
  display:block;
  color:#294F4C!important;
  font-size:.76rem;
  font-weight:600!important;
}
.shared-measure-banner small{
  display:block;
  margin-top:3px;
  color:#61726E!important;
  font-size:.68rem;
  line-height:1.4;
  font-weight:400!important;
}
.desk-shared-preview{
  display:grid;
  gap:7px;
  margin:10px 0;
}
.desk-shared-preview>div{
  padding:9px 10px;
  border:1px solid #D7E5DF;
  border-radius:11px;
  background:#F3F8F5;
}
.desk-shared-preview span{
  display:block;
  color:#6F7C79;
  font-size:.6rem;
}
.desk-shared-preview strong{
  display:block;
  margin-top:2px;
  color:#294F4C!important;
  font-size:.76rem;
  font-weight:600!important;
}
.desk-shared-preview small{
  display:block;
  margin-top:2px;
  color:#7C8986;
  font-size:.62rem;
}
.desk-empty-action.has-shared-seed .desk-empty-mark{
  background:#E4ECE9!important;
  color:#294F4C!important;
}

/* Payments */
.payment-section-head,.payment-completed-section summary{
  background:#F5F8F6!important;
  border-bottom-color:#DCE5E1!important;
}
.payment-count-chip{background:#294F4C!important}
.payment-count-chip.paid-count{
  background:#E3EFE9!important;
  color:#326B55!important;
}

/* Dialogs */
#modal .modal-card,.inline-measure-card{
  background:#FFFFFF!important;
}
#modal .modal-head,.inline-measure-head{
  background:#FBFCFA!important;
  border-bottom-color:#DCE5E1!important;
}
#modal .modal-actions,.inline-measure-actions{
  background:#FFFFFF!important;
  border-top-color:#DCE5E1!important;
}

/* Mobile */
@media(max-width:760px){
  .order-garment-table-row{
    background:#FFFFFF!important;
    border-color:#C7D4CF!important;
  }
  .garment-cell{border-color:#DCE5E1!important}
}


/* =========================================================
   V1.9.6 — CLOUD TEAL COMPLETION + ORDER IDENTITY CLEANUP
   ========================================================= */

/* Order detail subtitle now deliberately contains only ANIQ order number. */
#orderDetailSubtitle{
  margin-top:7px!important;
}
.order-number-chip{
  background:#E8DAD7!important;
  color:#6F5653!important;
  border:1px solid #E1CBC8!important;
  font-weight:600!important;
}

/* Remove the old dark-plum hero completely. */
.order-hero{
  background:
    radial-gradient(circle at 96% 5%,rgba(214,163,159,.20),transparent 16rem),
    linear-gradient(135deg,#EDF4F1 0%,#F8F7F3 62%,#F5ECEA 100%)!important;
  color:#263634!important;
  border:1px solid #D2DFDA!important;
  box-shadow:0 18px 46px rgba(41,79,76,.09)!important;
}
.order-hero:after{
  border-color:rgba(214,163,159,.28)!important;
  box-shadow:
    0 0 0 24px rgba(214,163,159,.055),
    0 0 0 52px rgba(120,145,142,.035)!important;
}
.order-hero .micro-label{
  color:#9D716D!important;
}
.order-hero-title-row{
  align-items:flex-start!important;
}
.order-hero-identity{
  min-width:0;
  flex:1;
}
.order-hero-customer-line{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.order-hero h2{
  color:#263634!important;
  font-size:1.72rem!important;
  font-weight:500!important;
}
.hero-contact,
.hero-location{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 9px;
  border:1px solid #D6E1DD;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  color:#526663!important;
  font-size:.7rem;
  line-height:1.2;
  font-weight:400;
}
.hero-contact .phone-call-link{
  color:#294F4C!important;
  border-bottom-color:#A9BBB5!important;
}
.hero-location{
  color:#657572!important;
}
.hero-edit-customer{
  min-height:31px;
  padding:5px 10px;
  border:1px solid #B8CBC4;
  border-radius:999px;
  background:#FFFFFF;
  color:#294F4C;
  font-size:.68rem;
  font-weight:600!important;
  cursor:pointer;
}
.hero-edit-customer:hover{
  background:#EAF1EE;
}
.order-hero-garments,
.order-hero p{
  margin:8px 0 0!important;
  color:#60716D!important;
  font-size:.92rem!important;
  font-weight:500!important;
}
.order-hero .badge{
  background:#FFFFFF!important;
  border:1px solid #C9D7D2!important;
  color:#294F4C!important;
}
.order-hero .badge.green{
  background:#E3EFE9!important;
  color:#326B55!important;
}
.order-hero .badge.amber{
  background:#F7ECDF!important;
  color:#9A652F!important;
}
.order-hero .badge.red{
  background:#F8E7E5!important;
  color:#A55151!important;
}

/* Delivery box now belongs to Cloud Teal, not the old dark hero. */
.delivery-card{
  background:rgba(255,255,255,.78)!important;
  border:1px solid #D5E1DC!important;
  color:#263634!important;
  box-shadow:0 7px 20px rgba(41,79,76,.045);
}
.delivery-card strong{
  color:#294F4C!important;
}
.delivery-card small{
  color:#6F7C79!important;
}
.delivery-card.warning,
.delivery-card.attention{
  background:#F8F0E6!important;
  border-color:#E8D4BC!important;
}
.delivery-card.danger{
  background:#FAEAEA!important;
  border-color:#EBCBC8!important;
}
.delivery-card.neutral{
  background:#FFFFFF!important;
}

/* Timeline changed from white-on-plum to calm teal. */
.status-step{
  color:#7C8B87!important;
}
.status-step:before{
  background:#C7D4CF!important;
}
.status-dot{
  background:#FFFFFF!important;
  border-color:#B9C9C3!important;
  color:#71817C!important;
}
.status-step.done,
.status-step.current{
  color:#294F4C!important;
}
.status-step.done .status-dot{
  background:#78918E!important;
  border-color:#78918E!important;
  color:#FFFFFF!important;
}
.status-step.current .status-dot{
  background:#294F4C!important;
  border-color:#294F4C!important;
  color:#FFFFFF!important;
  box-shadow:0 0 0 4px rgba(41,79,76,.10)!important;
}

/* Customer info now lives in the hero; old strip is intentionally gone. */
.compact-customer-strip{
  display:none!important;
}

/* Measurement heading no longer needs an action area. */
.order-measurement-group-head{
  justify-content:flex-start!important;
}

/* Complete a few old hard-coded plum remnants. */
.desk-head h3,
.inline-measure-head h3,
.history-profile-head h3,
.work-context-person>strong,
.customer-date-strip strong,
.order-date-strip strong,
.garment-summary-title strong{
  color:#263634!important;
}
.modal-body strong{
  color:#30423E;
}
.metric-icon{
  background:#F1E6E4!important;
  color:#8E6864!important;
}

/* Recently-created orders are now the visual reading priority within each stage. */
.order-group-list .list-row{
  transition:background .15s ease;
}
.order-group-list .list-row:hover{
  background:#F4F8F6!important;
}

@media(max-width:760px){
  .order-hero{
    padding:16px!important;
    border-radius:19px!important;
  }
  .order-hero-customer-line{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }
  .order-hero h2{
    font-size:1.38rem!important;
  }
  .hero-contact,
  .hero-location,
  .hero-edit-customer{
    justify-self:start;
  }
  .hero-contact,
  .hero-location{
    border-radius:10px;
  }
  .order-hero-title-row{
    display:grid!important;
    gap:9px!important;
  }
  .order-hero-title-row>.badge{
    justify-self:start;
  }
}


/* =========================================================
   V1.9.7 — ORDER WORKSPACE VISUAL CLEANUP
   ========================================================= */

/* ---------- Order at a Glance ---------- */
.order-hero,
.order-hero-main,
.order-hero-side,
.order-hero-identity{
  min-width:0!important;
  max-width:100%;
  box-sizing:border-box;
}

.order-hero-title-row{
  width:100%;
  min-width:0;
}

.order-hero-customer-line{
  min-width:0;
}

/* Phone and area now read as meaningful customer details,
   rather than tiny accessory chips. */
.hero-contact,
.hero-location{
  min-height:34px!important;
  padding:6px 10px!important;
  font-size:.83rem!important;
  line-height:1.2!important;
  font-weight:450!important;
  color:#435A56!important;
}
.hero-contact .phone-call-link{
  font-size:inherit!important;
  font-weight:500!important;
}
.hero-location{
  color:#566B67!important;
}

.hero-edit-customer-top{
  flex:none;
  min-height:38px!important;
  padding:8px 13px!important;
  border-radius:11px!important;
  font-size:.74rem!important;
  align-self:flex-start;
}

/* No separate hero status pill — timeline is the status indicator. */
.order-hero-title-row>.badge{
  display:none!important;
}

/* Long garment lists must wrap instead of widening the card. */
.order-hero-garments{
  max-width:100%;
  white-space:normal!important;
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Timeline stays inside the hero. */
.status-track{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

/* ---------- Order & Delivery ---------- */
.delivery-detail-box{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.delivery-detail-box>div:first-child{
  min-width:0;
}
.delivery-edit-btn{
  flex:none;
  min-height:34px;
  padding:7px 10px;
  border:1px solid #B8CBC4;
  border-radius:10px;
  background:#FFFFFF;
  color:#294F4C;
  font-size:.69rem;
  font-weight:600!important;
  cursor:pointer;
}
.delivery-edit-btn:hover{
  background:#EDF4F1;
}
.delivery-only-editor{
  max-width:520px;
  margin-inline:auto;
}

/* ---------- Garment table ---------- */
/* No row-level edit buttons. Edit Order in section 02 is the single action. */
.order-garment-table-head,
.order-garment-table-row{
  grid-template-columns:
    minmax(165px,1.4fr)
    minmax(80px,.55fr)
    minmax(120px,.82fr)
    minmax(120px,.82fr)
    minmax(105px,.7fr)!important;
}
.garment-action-cell{
  display:none!important;
}

/* ---------- Garment details ---------- */
.compact-workspace-subsection-head{
  margin-top:18px!important;
  margin-bottom:8px!important;
}
.compact-workspace-subsection-head h4{
  font-size:.98rem!important;
}
.compact-workspace-subsection-head p{
  font-size:.67rem!important;
}

.garment-details-stack{
  gap:8px!important;
}

.compact-garment-notes-card{
  border-radius:12px!important;
  box-shadow:none!important;
  overflow:hidden;
}

.compact-garment-notes-head{
  min-height:48px;
  padding:9px 12px!important;
  background:#F4F7F5!important;
}
.compact-garment-notes-head h4{
  font-size:.9rem!important;
  line-height:1.15!important;
  font-weight:500!important;
}
.compact-garment-notes-head .micro-label{
  font-size:.55rem!important;
  letter-spacing:.055em!important;
}
.compact-garment-notes-head .garment-index-chip{
  width:25px!important;
  height:25px!important;
  min-width:25px!important;
}

.compact-garment-notes-body{
  display:grid;
  background:#FFFFFF;
}

.compact-note-line{
  display:grid;
  grid-template-columns:minmax(95px,.34fr) minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:10px 12px;
  border-top:1px solid #E3EAE7;
}
.compact-note-line:first-child{
  border-top:0;
}
.compact-note-line span{
  color:#8E706D;
  font-size:.62rem;
  font-weight:550;
}
.compact-note-line p{
  margin:0;
  color:#53625F;
  font-size:.74rem;
  line-height:1.4;
  font-weight:400;
}
.compact-note-empty{
  padding:10px 12px;
  color:#82908D;
  font-size:.7rem;
  font-weight:400;
  background:#FCFDFC;
}

/* Old repeated price element no longer used. */
.garment-notes-total{
  display:none!important;
}

/* ---------- Mobile clipping ---------- */
@media(max-width:760px){
  .order-page,
  .order-page>*,
  .order-hero,
  .order-hero-main,
  .order-hero-side,
  .order-section{
    width:100%;
    max-width:100%;
    min-width:0!important;
    box-sizing:border-box;
  }

  .order-hero{
    grid-template-columns:minmax(0,1fr)!important;
    overflow:hidden!important;
  }

  .order-hero-title-row{
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:start!important;
  }

  .order-hero-customer-line{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
  }

  .order-hero h2{
    width:100%;
    max-width:100%;
    margin-bottom:1px!important;
  }

  .hero-contact,
  .hero-location{
    max-width:100%;
    min-width:0;
    overflow-wrap:anywhere;
  }

  .hero-edit-customer-top{
    grid-column:2;
    grid-row:1;
    white-space:nowrap;
  }

  .order-hero-garments{
    padding-right:0!important;
    font-size:.79rem!important;
    line-height:1.4!important;
  }

  .status-track{
    display:grid!important;
    grid-template-columns:repeat(9,64px)!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    padding:4px 2px 7px!important;
    scrollbar-width:thin;
  }

  .delivery-card{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  .detail-grid{
    min-width:0!important;
  }

  .delivery-detail-box{
    align-items:flex-start;
  }

  /* Garment summary becomes two-column cards, with no unused Action cell. */
  .order-garment-table-row{
    grid-template-columns:1fr 1fr!important;
  }
  .garment-cell:nth-child(odd){
    border-right:1px solid #DCE5E1!important;
  }
  .garment-cell:nth-child(even){
    border-right:0!important;
  }
  .garment-cell:nth-last-child(-n+1){
    grid-column:1/-1;
    border-right:0!important;
    border-bottom:0!important;
  }

  .compact-note-line{
    grid-template-columns:1fr;
    gap:3px;
  }
}

@media(max-width:340px){
  .order-hero-title-row{
    grid-template-columns:1fr!important;
  }

  .hero-edit-customer-top{
    grid-column:1;
    grid-row:auto;
    justify-self:start;
  }

  .hero-contact,
  .hero-location{
    font-size:.76rem!important;
  }

  .order-garment-table-row{
    grid-template-columns:1fr!important;
  }
  .garment-cell{
    grid-column:auto!important;
    border-right:0!important;
    border-bottom:1px solid #DCE5E1!important;
  }
  .garment-cell:last-child{
    border-bottom:0!important;
  }
}


/* =========================================================
   V1.9.8 — INDIVIDUAL GARMENT STATUS
   ========================================================= */
.garment-status-cell{overflow:visible!important}

.garment-status-select{
  width:100%;
  min-width:122px;
  height:39px;
  min-height:39px;
  padding:6px 31px 6px 10px;
  border:1px solid #C7D4CF!important;
  border-radius:10px;
  background:#F7FAF8!important;
  color:#294F4C!important;
  font-size:.73rem;
  line-height:1.2;
  font-weight:600!important;
  cursor:pointer;
  box-shadow:none!important;
}
.garment-status-select:hover{
  background:#EFF5F2!important;
  border-color:#9FB5AD!important;
}
.garment-status-select:focus{
  border-color:#78918E!important;
  box-shadow:0 0 0 3px rgba(120,145,142,.16)!important;
}

/* No bulk order-status control in Edit Order. */
.edit-order-basics{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
}

/* Give the status dropdown enough space. */
.order-garment-table-head,
.order-garment-table-row{
  grid-template-columns:
    minmax(165px,1.35fr)
    minmax(75px,.48fr)
    minmax(115px,.78fr)
    minmax(115px,.78fr)
    minmax(145px,.95fr)!important;
}

@media(max-width:760px){
  .garment-status-cell{
    grid-column:1/-1!important;
    border-right:0!important;
  }
  .garment-status-select{
    width:100%;
    min-width:0;
    height:43px;
    font-size:.77rem;
  }
  .edit-order-basics{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:340px){
  .garment-status-cell{grid-column:auto!important}
}


/* =========================================================
   V1.9.9 — Garment Instruction Readability + Balance Green
   ========================================================= */

/* Stitching instruction should read as a proper garment detail,
   not tiny secondary metadata. */
.garment-instruction-line{
  display:flex!important;
  align-items:baseline!important;
  gap:10px!important;
  padding:11px 13px!important;
  min-width:0;
}

.garment-instruction-line>span{
  flex:none;
  color:#5A2D52!important;
  font-size:.88rem!important;
  line-height:1.35!important;
  font-weight:600!important;
  letter-spacing:0!important;
  text-transform:none!important;
  white-space:nowrap;
}

.garment-instruction-line>p{
  min-width:0;
  margin:0!important;
  color:#5A2D52!important;
  font-size:.90rem!important;
  line-height:1.4!important;
  font-weight:500!important;
  overflow-wrap:anywhere;
}

/* Clearer green for outstanding money.
   Previous deep green could look almost black on some displays. */
.balance-money-box.has-balance strong,
.payment-ledger-amounts .balance-pending strong,
.garment-total-cell strong{
  color:#2F9B5C!important;
}

.balance-money-box.has-balance .detail-label,
.payment-ledger-amounts .balance-pending span{
  color:#398A59!important;
}

/* Amount due / balance supporting text */
.balance-money-box.has-balance small,
.payment-status-stack small{
  color:#4B9766!important;
}

/* Part-paid / pending status gets a clearer green-family emphasis
   without looking like fully Paid. */
.money-box .badge.amber,
.payment-status-stack .badge.amber{
  color:#3F8557!important;
  background:#E8F4EC!important;
  border-color:#CDE5D5!important;
}

@media(max-width:760px){
  .garment-instruction-line{
    display:flex!important;
    align-items:flex-start!important;
    gap:8px!important;
  }

  .garment-instruction-line>span,
  .garment-instruction-line>p{
    font-size:.84rem!important;
  }
}

@media(max-width:320px){
  .garment-instruction-line{
    flex-wrap:wrap!important;
  }
}


/* =========================================================
   V1.9.10 — Inline Garment Instructions + Owner Filters
   ========================================================= */

/* Garment + Stitching instruction on ONE horizontal line */
.garment-inline-detail-card{
  overflow:hidden;
  border-radius:12px!important;
  box-shadow:none!important;
}

.garment-inline-detail-row{
  display:grid;
  grid-template-columns:28px minmax(145px,.55fr) minmax(0,1.45fr);
  align-items:center;
  gap:10px;
  min-height:62px;
  padding:10px 12px;
  background:#F4F7F5;
}

.garment-inline-name{
  min-width:0;
}
.garment-inline-name .micro-label{
  display:block;
  margin-bottom:2px;
  font-size:.54rem!important;
}
.garment-inline-name h4{
  margin:0;
  color:#263634!important;
  font-family:Georgia,"Times New Roman",serif;
  font-size:.96rem!important;
  line-height:1.15;
  font-weight:500!important;
}

.garment-inline-stitching{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
  padding-left:12px;
  border-left:1px solid #DCE5E1;
}
.garment-inline-stitching>span{
  flex:none;
  color:#5A2D52!important;
  font-size:.91rem!important;
  line-height:1.35;
  font-weight:600!important;
  white-space:nowrap;
}
.garment-inline-stitching>p{
  min-width:0;
  margin:0;
  color:#5A2D52!important;
  font-size:.91rem!important;
  line-height:1.4;
  font-weight:500!important;
  overflow-wrap:anywhere;
}
.garment-inline-stitching.is-empty>p{
  color:#85757F!important;
  font-size:.76rem!important;
  font-weight:400!important;
}

.garment-inline-reference{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:9px 12px 10px 50px;
  border-top:1px solid #DCE5E1;
  background:#FFFFFF;
}
.garment-inline-reference span{
  flex:none;
  color:#7C686F;
  font-size:.7rem;
  font-weight:600;
}
.garment-inline-reference p{
  margin:0;
  color:#5F6D69;
  font-size:.76rem;
  line-height:1.4;
}

/* Clear visible green for money still to collect */
.balance-money-box.has-balance strong,
.payment-ledger-amounts .balance-pending strong{
  color:#35A85F!important;
}
.balance-money-box.has-balance .detail-label,
.payment-ledger-amounts .balance-pending span{
  color:#2F9656!important;
}
.balance-money-box.has-balance small,
.payment-status-stack small{
  color:#438F60!important;
}

/* Special owner filters */
.payment-work-category{
  border-left:4px solid #67A67F;
  padding-left:10px!important;
}
.collection-work-category{
  border-left:4px solid #E0A24F;
  padding-left:10px!important;
}

@media(max-width:760px){
  .garment-inline-detail-row{
    grid-template-columns:26px minmax(110px,.7fr) minmax(0,1.3fr);
    gap:8px;
    padding:9px 10px;
  }
  .garment-inline-name h4{
    font-size:.88rem!important;
  }
  .garment-inline-stitching{
    gap:6px;
    padding-left:8px;
  }
  .garment-inline-stitching>span,
  .garment-inline-stitching>p{
    font-size:.82rem!important;
  }
  .garment-inline-reference{
    padding-left:44px;
  }
}

@media(max-width:420px){
  /* Still one row conceptually; instruction may wrap within its own column. */
  .garment-inline-detail-row{
    grid-template-columns:24px minmax(90px,.7fr) minmax(0,1.3fr);
  }
  .garment-inline-stitching>span{
    font-size:.78rem!important;
  }
  .garment-inline-stitching>p{
    font-size:.78rem!important;
  }
}

@media(max-width:320px){
  .garment-inline-detail-row{
    grid-template-columns:22px minmax(78px,.65fr) minmax(0,1.35fr);
    gap:6px;
    padding:8px;
  }
  .garment-inline-stitching{
    padding-left:6px;
  }
}


/* =========================================================
   V2.0 — INSIGHTS
   ========================================================= */

/* Six compact bottom navigation actions */
.bottom-nav{
  grid-template-columns:repeat(6,1fr)!important;
}
.bottom-nav button{
  min-width:0;
}

/* Period selector */
.insights-period-tabs{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:-6px 0 10px;
}
.insights-period-tabs button{
  min-height:38px;
  padding:7px 12px;
  border:1px solid #C7D4CF;
  border-radius:999px;
  background:#FFFFFF;
  color:#5E6F6B;
  font-size:.72rem;
  font-weight:550;
  cursor:pointer;
}
.insights-period-tabs button.active{
  background:#294F4C;
  border-color:#294F4C;
  color:#FFFFFF;
}
.insights-period-label{
  display:flex;
  align-items:baseline;
  gap:9px;
  flex-wrap:wrap;
  margin-bottom:14px;
  color:#6F7C79;
  font-size:.72rem;
}
.insights-period-label strong{
  color:#294F4C!important;
  font-size:.82rem;
  font-weight:600!important;
}

/* KPI cards */
.insights-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
  margin-bottom:11px;
}
.insights-kpi-card{
  min-width:0;
  padding:16px;
  border:1px solid #DCE5E1;
  border-radius:17px;
  background:#FFFFFF;
  box-shadow:0 8px 24px rgba(41,79,76,.055);
}
.insights-kpi-card>span{
  display:block;
  color:#71807C;
  font-size:.67rem;
  font-weight:500;
}
.insights-kpi-card>strong{
  display:block;
  margin-top:6px;
  color:#263634!important;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.62rem;
  line-height:1.05;
  font-weight:500!important;
}
.insights-kpi-card>small{
  display:block;
  margin-top:8px;
  color:#778682;
  font-size:.64rem;
  line-height:1.35;
  font-weight:400;
}
.insights-kpi-card.balance-kpi{
  background:#EDF7F1;
  border-color:#CFE4D8;
}
.insights-kpi-card.balance-kpi>strong{
  color:#35A85F!important;
}

.insights-secondary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:17px;
}
.insights-secondary-grid>div{
  min-width:0;
  padding:10px 12px;
  border:1px solid #E1E8E5;
  border-radius:12px;
  background:#FAFCFB;
}
.insights-secondary-grid span{
  display:block;
  color:#7D8986;
  font-size:.61rem;
}
.insights-secondary-grid strong{
  display:block;
  margin-top:3px;
  color:#294F4C!important;
  font-size:.9rem;
  font-weight:600!important;
}
.insights-secondary-grid small{
  display:block;
  margin-top:2px;
  color:#899591;
  font-size:.58rem;
}

/* Core panels */
.insight-panel{
  min-width:0;
  margin-bottom:14px;
  border:1px solid #DCE5E1;
  border-radius:18px;
  background:#FFFFFF;
  box-shadow:0 8px 25px rgba(41,79,76,.05);
  overflow:hidden;
}
.insight-panel-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:15px 16px 12px;
  border-bottom:1px solid #E4EBE8;
  background:#FBFCFA;
}
.insight-panel-head h2{
  margin:2px 0 2px;
  color:#263634;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.1rem;
  line-height:1.2;
  font-weight:500;
}
.insight-panel-head p{
  margin:0;
  color:#7D8986;
  font-size:.67rem;
  line-height:1.35;
}
.insights-two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.insights-two-col>.insight-panel{
  margin-bottom:0;
}
.insights-two-col{
  margin-bottom:14px;
}

/* Trend chart */
.insight-chart-legend{
  display:flex;
  gap:16px;
  padding:12px 16px 0;
  color:#6F7C79;
  font-size:.64rem;
}
.insight-chart-legend span:before{
  content:"";
  display:inline-block;
  width:9px;height:9px;
  margin-right:5px;
  border-radius:3px;
  vertical-align:-1px;
}
.legend-orders:before{background:#294F4C}
.legend-paid:before{background:#D6A39F}
.insight-chart-scroll{
  overflow-x:auto;
  padding:13px 14px 15px;
}
.insight-chart-bars{
  min-width:540px;
  height:220px;
  display:flex;
  align-items:stretch;
  gap:8px;
}
.insight-chart-col{
  flex:1;
  min-width:44px;
  display:grid;
  grid-template-rows:1fr auto;
  gap:7px;
}
.insight-chart-values{
  min-height:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:3px;
  border-bottom:1px solid #DCE5E1;
}
.chart-bar{
  display:block;
  width:min(16px,42%);
  min-height:3px;
  border-radius:5px 5px 1px 1px;
}
.orders-bar{background:#294F4C}
.paid-bar{background:#D6A39F}
.insight-chart-label{
  display:block;
  color:#788581;
  font-size:.56rem;
  line-height:1.15;
  text-align:center;
}

/* Attention */
.attention-insight-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:13px;
}
.attention-insight-grid button{
  min-width:0;
  min-height:98px;
  padding:11px;
  border:1px solid #DCE5E1;
  border-radius:13px;
  background:#FFFFFF;
  text-align:left;
  cursor:pointer;
}
.attention-insight-grid button:hover{
  background:#F4F8F6;
  border-color:#B9CCC5;
}
.attention-insight-grid span{
  display:block;
  color:#6C7B77;
  font-size:.65rem;
}
.attention-insight-grid strong{
  display:block;
  margin-top:5px;
  color:#294F4C!important;
  font-size:1.18rem;
  line-height:1;
  font-weight:600!important;
}
.attention-insight-grid small{
  display:block;
  margin-top:6px;
  color:#8A9692;
  font-size:.58rem;
  line-height:1.3;
}

/* Best customer cards */
.insight-rank-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:13px;
}
.insight-rank-card{
  min-width:0;
  padding:11px;
  border:1px solid #E0E8E5;
  border-radius:12px;
  background:#FAFCFB;
}
.insight-rank-card>span{
  display:block;
  margin-bottom:6px;
  color:#8D706C;
  font-size:.61rem;
  font-weight:600;
}
.insight-customer-link{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  text-align:left;
  cursor:pointer;
}
.insight-customer-link strong,
.insight-rank-person strong{
  display:block;
  color:#294F4C!important;
  font-size:.82rem;
  line-height:1.2;
  font-weight:600!important;
}
.insight-customer-link small,
.insight-rank-person small{
  display:block;
  margin-top:3px;
  color:#71807C;
  font-size:.65rem;
  font-weight:400;
}
.insight-customer-link:hover strong{
  text-decoration:underline;
}

/* Horizontal info bars */
.insight-bar-list{
  display:grid;
  gap:10px;
  padding:13px 15px 15px;
}
.insight-bar-row{
  display:grid;
  gap:5px;
}
.insight-bar-label{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:9px;
}
.insight-bar-label strong{
  color:#4F605C!important;
  font-size:.72rem;
  font-weight:500!important;
}
.insight-bar-label span{
  color:#294F4C;
  font-size:.68rem;
  font-weight:600;
}
.insight-bar-track{
  height:8px;
  border-radius:999px;
  background:#EDF2F0;
  overflow:hidden;
}
.insight-bar-track span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#78918E,#294F4C);
}
.insight-inline-summary{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 15px 13px;
  border-top:1px solid #E4EBE8;
  font-size:.68rem;
}
.insight-inline-summary span{color:#7B8884}
.insight-inline-summary strong{color:#294F4C!important;font-weight:600!important}

/* Aging / outstanding */
.insight-aging-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:13px;
}
.insight-aging-list>div{
  padding:10px;
  border:1px solid #E1E8E5;
  border-radius:11px;
  background:#FAFCFB;
}
.insight-aging-list span{
  display:block;
  color:#76837F;
  font-size:.61rem;
}
.insight-aging-list strong{
  display:block;
  margin-top:3px;
  color:#35A85F!important;
  font-size:.88rem;
  font-weight:600!important;
}
.insight-aging-list small{
  color:#8A9692;
  font-size:.57rem;
}
.insight-top-balances{
  padding:0 13px 13px;
}
.insight-top-balances>span{
  display:block;
  padding:4px 0 6px;
  color:#8D706C;
  font-size:.61rem;
  font-weight:600;
}
.insight-top-balances button{
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:9px;
  padding:9px 0;
  border:0;
  border-top:1px solid #E6ECE9;
  background:none;
  text-align:left;
  cursor:pointer;
}
.insight-top-balances button strong{
  color:#50615D!important;
  font-size:.7rem;
  font-weight:500!important;
}
.insight-top-balances button span{
  color:#35A85F;
  font-size:.7rem;
  font-weight:600;
}

/* Month comparison */
.month-compare-table{
  padding:13px;
}
.month-compare-table>div{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:8px;
  align-items:center;
  min-height:40px;
  border-bottom:1px solid #E4EBE8;
}
.month-compare-table>div:last-child{border-bottom:0}
.month-compare-table span{
  color:#73817E;
  font-size:.66rem;
}
.month-compare-table strong{
  color:#50615D!important;
  font-size:.72rem;
  font-weight:550!important;
}
.month-compare-head strong{
  color:#294F4C!important;
  font-size:.68rem;
}

/* Fit */
.fit-insight-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  padding:13px;
}
.fit-insight-grid>div{
  padding:11px;
  border:1px solid #E2E9E6;
  border-radius:12px;
  background:#FAFCFB;
}
.fit-insight-grid span{
  display:block;
  color:#778581;
  font-size:.61rem;
}
.fit-insight-grid strong{
  display:block;
  margin-top:4px;
  color:#294F4C!important;
  font-size:.93rem;
  font-weight:600!important;
}
.fit-insight-grid small{
  display:block;
  margin-top:3px;
  color:#899591;
  font-size:.56rem;
  line-height:1.3;
}
.insight-empty{
  padding:18px;
  color:#8A9692;
  font-size:.7rem;
}

/* Mobile */
@media(max-width:760px){
  .bottom-nav{
    padding-left:4px!important;
    padding-right:4px!important;
  }
  .bottom-nav button{
    font-size:1rem!important;
    padding-inline:1px!important;
  }
  .bottom-nav button span{
    font-size:.58rem!important;
  }

  .insights-kpi-grid{
    grid-template-columns:1fr 1fr;
  }
  .insights-kpi-card>strong{
    font-size:1.28rem;
  }
  .insights-secondary-grid{
    grid-template-columns:1fr 1fr;
  }
  .insights-two-col{
    grid-template-columns:1fr;
  }
  .attention-insight-grid{
    grid-template-columns:1fr 1fr;
  }
  .fit-insight-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:360px){
  .bottom-nav button span{
    font-size:.54rem!important;
  }
  .insights-period-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .insights-period-tabs button{
    padding-inline:6px;
  }
  .insights-kpi-grid{
    grid-template-columns:1fr;
  }
  .attention-insight-grid{
    grid-template-columns:1fr;
  }
  .insight-rank-cards{
    grid-template-columns:1fr;
  }
  .insight-aging-list{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V2.0.1 — INSIGHTS MOBILE RESPONSIVE CORRECTION
   ========================================================= */

/* Desktop chart remains the visual overview. */
.insight-desktop-chart{
  display:block;
}
.insight-mobile-trend{
  display:none;
}

/* Slightly improve desktop chart scaling as well. */
.insight-chart-bars{
  min-width:0!important;
}
.insight-chart-col{
  min-width:54px!important;
}

/* Mobile gets a purpose-built list chart instead of a clipped desktop graph. */
@media(max-width:760px){
  .insight-desktop-chart{
    display:none!important;
  }

  .insight-mobile-trend{
    display:grid!important;
    gap:0;
    padding:4px 12px 12px;
  }

  .insight-chart-legend{
    padding:10px 12px 7px!important;
  }

  .mobile-trend-row{
    display:grid;
    grid-template-columns:minmax(62px,.62fr) minmax(0,1.38fr);
    gap:9px;
    padding:10px 0;
    border-bottom:1px solid #E4EBE8;
  }

  .mobile-trend-row:last-child{
    border-bottom:0;
  }

  .mobile-trend-period{
    min-width:0;
    display:grid;
    align-content:start;
    gap:2px;
  }

  .mobile-trend-period strong{
    color:#294F4C!important;
    font-size:.71rem;
    line-height:1.2;
    font-weight:600!important;
  }

  .mobile-trend-period small{
    color:#87938F;
    font-size:.54rem;
    line-height:1.2;
    font-weight:400;
  }

  .mobile-trend-series{
    display:grid;
    gap:7px;
    min-width:0;
  }

  .mobile-trend-series-row{
    display:grid;
    grid-template-columns:48px minmax(0,1fr) minmax(66px,auto);
    align-items:center;
    gap:6px;
    min-width:0;
  }

  .mobile-trend-series-row>span{
    color:#75827E;
    font-size:.56rem;
    line-height:1;
  }

  .mobile-trend-series-row>strong{
    color:#4D5E59!important;
    font-size:.61rem;
    line-height:1;
    font-weight:600!important;
    text-align:right;
    white-space:nowrap;
  }

  .mobile-trend-track{
    height:7px;
    min-width:0;
    overflow:hidden;
    border-radius:999px;
    background:#EEF3F1;
  }

  .mobile-trend-track i{
    display:block;
    height:100%;
    border-radius:inherit;
  }

  .mobile-order-fill{
    background:#294F4C;
  }

  .mobile-paid-fill{
    background:#D6A39F;
  }

  /* Avoid oversized blank chart card on narrow screens. */
  .insight-trend-chart{
    min-height:0!important;
  }

  /* KPI grids need breathing room at phone width. */
  .insights-kpi-grid{
    gap:8px!important;
  }

  .insights-kpi-card{
    padding:13px!important;
  }

  .insights-kpi-card>strong{
    overflow-wrap:anywhere;
  }

  .insight-panel-head{
    padding:13px 13px 10px!important;
  }

  .insight-panel-head h2{
    font-size:1.01rem!important;
  }
}

@media(max-width:360px){
  .mobile-trend-row{
    grid-template-columns:54px minmax(0,1fr);
    gap:7px;
  }

  .mobile-trend-series-row{
    grid-template-columns:43px minmax(0,1fr) minmax(58px,auto);
    gap:4px;
  }

  .mobile-trend-series-row>strong{
    font-size:.57rem!important;
  }

  /* Six bottom tabs remain usable at narrow widths. */
  .bottom-nav{
    gap:0!important;
  }
}

@media(max-width:300px){
  .mobile-trend-row{
    grid-template-columns:1fr;
  }

  .mobile-trend-period{
    grid-template-columns:auto 1fr;
    align-items:baseline;
    gap:6px;
  }

  .mobile-trend-series-row{
    grid-template-columns:42px minmax(0,1fr) 56px;
  }
}


/* =========================================================
   V2.0.2 — MOBILE STABILITY + HISTORY WORKFLOW
   ========================================================= */

/* Measurement editor actions must always remain reachable. */
.inline-measure-card{
  grid-template-rows:auto minmax(0,1fr) auto!important;
}
.inline-measure-scroll{
  min-height:0!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
}
.inline-measure-actions{
  position:relative;
  z-index:30;
  background:#FFFFFF!important;
  box-shadow:0 -8px 22px rgba(41,79,76,.08);
}

/* Visible saving feedback. */
#modalSaveBtn:disabled{
  opacity:.68;
  cursor:wait;
}

/* Numeric fields: no visible steppers; JS also stops wheel changes. */
input[type="number"]{
  appearance:textfield!important;
  -moz-appearance:textfield!important;
  touch-action:pan-y;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none!important;
  margin:0!important;
}

/* Cleaner Garments section title. */
.garment-section-heading-copy{
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  min-width:0;
}
.garment-section-heading-copy>div{min-width:0}
.garment-section-heading-copy h3{margin:0!important}
.garment-section-heading-copy .section-help{
  margin:3px 0 0!important;
  color:#778581!important;
  font-size:.68rem!important;
  line-height:1.35;
}

/* Measurement version picker. */
.measurement-version-picker{
  flex:none;
  display:grid!important;
  gap:3px!important;
  min-width:92px;
  color:#7D8985!important;
  font-size:.56rem!important;
  font-weight:500!important;
}
.measurement-version-picker>span{text-align:right}
.measurement-version-picker select{
  width:auto!important;
  min-width:88px;
  height:34px!important;
  min-height:34px!important;
  padding:4px 28px 4px 9px!important;
  border:1px solid #C9D7D2!important;
  border-radius:999px!important;
  background:#EEF4F1!important;
  color:#294F4C!important;
  font-size:.67rem!important;
  font-weight:650!important;
}
.measurement-history-view-note{
  margin:8px 0 2px;
  padding:7px 9px;
  border:1px solid #E8D6D2;
  border-radius:9px;
  background:#FAF1EF;
  color:#805F5C;
  font-size:.62rem;
  line-height:1.35;
}
.combined-measurement-head{
  grid-template-columns:auto minmax(0,1fr) auto!important;
}

/* Payments customer-name link. */
.payment-customer-history-link{
  display:block;
  width:max-content;
  max-width:100%;
  margin:0;
  padding:0;
  border:0;
  border-bottom:1px dotted #A8BBB4;
  background:none;
  color:#294F4C!important;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1rem;
  line-height:1.2;
  font-weight:600!important;
  text-align:left;
  cursor:pointer;
}
.payment-customer-history-link:hover{
  border-bottom-color:#294F4C;
}

/* Payment history inside customer history. */
.history-section-title-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.history-section-title-row>span{
  color:#6F7C79;
  font-size:.67rem;
}
.customer-payment-history-list{
  display:grid;
  overflow:hidden;
  border:1px solid #DCE5E1;
  border-radius:14px;
  background:#FFFFFF;
}
.customer-payment-history-row{
  display:grid;
  grid-template-columns:1.05fr .8fr .9fr .95fr 1.2fr;
  align-items:start;
  border-bottom:1px solid #E2E9E6;
}
.customer-payment-history-row:last-child{border-bottom:0}
.customer-payment-history-row>div{
  min-width:0;
  padding:10px 11px;
  border-right:1px solid #E5ECE9;
}
.customer-payment-history-row>div:last-child{border-right:0}
.customer-payment-history-row span{
  display:block;
  color:#87938F;
  font-size:.56rem;
  text-transform:uppercase;
  letter-spacing:.045em;
}
.customer-payment-history-row strong{
  display:block;
  margin-top:3px;
  color:#40534F!important;
  font-size:.72rem;
  line-height:1.3;
  font-weight:550!important;
  overflow-wrap:anywhere;
}
.customer-payment-history-row small{
  display:block;
  margin-top:2px;
  color:#7D8A86;
  font-size:.58rem;
  line-height:1.3;
}
.customer-payment-number strong{
  color:#2F9B5C!important;
  font-size:.86rem!important;
  font-weight:650!important;
}

/* Mobile-specific density corrections. */
@media(max-width:760px){
  .inline-measure-dialog .inline-measure-card{
    grid-template-rows:auto minmax(0,1fr) auto!important;
  }
  .inline-measure-scroll{
    padding-bottom:18px!important;
  }
  .inline-measure-actions{
    display:grid!important;
    grid-template-columns:minmax(86px,.42fr) minmax(0,1fr);
    gap:8px!important;
    padding:9px 10px calc(9px + env(safe-area-inset-bottom))!important;
  }
  .inline-measure-actions button{
    width:100%;
    min-height:46px!important;
  }

  /* Total / Paid / Balance: compact row, not three tall cards. */
  .order-summary-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .order-summary-grid .metric{
    min-width:0;
    min-height:92px;
    padding:9px 8px!important;
    border-radius:12px!important;
  }
  .order-summary-grid .metric-top{min-height:24px}
  .order-summary-grid .metric-icon{
    width:26px!important;
    height:26px!important;
    min-width:26px!important;
    font-size:.67rem!important;
  }
  .order-summary-grid .metric-hint{display:none!important}
  .order-summary-grid .value{
    margin-top:6px!important;
    font-size:1rem!important;
    line-height:1.05!important;
    overflow-wrap:anywhere;
  }
  .order-summary-grid .label{
    margin-top:5px!important;
    font-size:.56rem!important;
    line-height:1.25!important;
  }
  .order-summary-grid .badge{
    padding:4px 6px!important;
    font-size:.55rem!important;
    white-space:normal;
  }

  .garment-section-heading{
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:8px!important;
  }
  .garment-section-heading>div:first-child{
    display:flex!important;
  }
  .garment-section-heading .soft-btn{
    flex:none;
    min-height:38px;
    padding:7px 9px!important;
  }

  .measurement-card-head{
    align-items:flex-start!important;
    gap:8px!important;
  }
  .measurement-version-picker{
    min-width:78px;
  }
  .measurement-version-picker>span{display:none}
  .measurement-version-picker select{
    min-width:76px;
    height:34px!important;
    font-size:.64rem!important;
  }
  .combined-measurement-head{
    grid-template-columns:auto minmax(0,1fr)!important;
  }
  .combined-measurement-head .measurement-version-picker{
    grid-column:1/-1;
    justify-self:end;
  }

  .customer-payment-history-row{
    grid-template-columns:1fr 1fr;
  }
  .customer-payment-history-row>div{
    border-right:0;
    border-bottom:1px solid #E5ECE9;
  }
  .customer-payment-history-row>div:nth-child(odd){
    border-right:1px solid #E5ECE9;
  }
  .customer-payment-history-row>div:last-child{
    grid-column:1/-1;
    border-right:0;
    border-bottom:0;
  }
}

@media(max-width:340px){
  .order-summary-grid{gap:4px!important}
  .order-summary-grid .metric{padding:8px 5px!important}
  .order-summary-grid .value{font-size:.88rem!important}

  .garment-section-heading{
    display:grid!important;
    grid-template-columns:1fr auto;
  }
  .garment-section-heading-copy{gap:7px!important}

  .customer-payment-history-row{grid-template-columns:1fr}
  .customer-payment-history-row>div,
  .customer-payment-history-row>div:nth-child(odd){
    border-right:0!important;
  }
  .customer-payment-history-row>div:last-child{grid-column:auto}
}


/* =========================================================
   V2.0.3 — MODAL ACTION RELIABILITY + PAYMENT SUMMARY
   ========================================================= */

/* Shared modal action button has explicit enabled appearance. */
#modalSaveBtn:not(:disabled){
  opacity:1!important;
  cursor:pointer!important;
}
#modalSaveBtn:disabled{
  opacity:.62!important;
  cursor:wait!important;
}

/* Order-level payment story in Customer History */
.history-order-payment-summary-list{
  display:grid;
  gap:10px;
  margin-bottom:14px;
}

.history-order-payment-summary{
  overflow:hidden;
  border:1px solid #D6E2DE;
  border-radius:14px;
  background:#FBFDFC;
}

.history-order-payment-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:11px 12px;
  border-bottom:1px solid #E0E8E5;
  background:#F3F7F5;
}

.history-order-payment-head>div{
  min-width:0;
}

.history-order-payment-head>div>strong{
  display:block;
  margin-top:3px;
  color:#294F4C!important;
  font-size:.8rem;
  line-height:1.3;
  font-weight:600!important;
}

.history-order-payment-head>div>small{
  display:block;
  margin-top:3px;
  color:#788682;
  font-size:.61rem;
  line-height:1.3;
}

.history-payment-count{
  flex:none;
  padding:5px 8px;
  border-radius:999px;
  background:#E8F1ED;
  color:#45675F;
  font-size:.61rem;
  font-weight:600;
}

.history-order-payment-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-bottom:1px solid #E5ECE9;
}

.history-order-payment-metrics>div{
  min-width:0;
  padding:10px 12px;
  border-right:1px solid #E5ECE9;
}

.history-order-payment-metrics>div:last-child{
  border-right:0;
}

.history-order-payment-metrics span{
  display:block;
  color:#83908C;
  font-size:.57rem;
  text-transform:uppercase;
  letter-spacing:.045em;
}

.history-order-payment-metrics strong{
  display:block;
  margin-top:4px;
  color:#40534F!important;
  font-size:.82rem;
  font-weight:600!important;
}

.history-order-payment-metrics>div:nth-child(2) strong{
  color:#2F9B5C!important;
}

.history-order-payment-metrics .pending strong{
  color:#35A85F!important;
}

.history-order-payment-metrics .over strong{
  color:#A55151!important;
}

.history-payment-parts{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  padding:9px 12px 10px;
  background:#FFFFFF;
}

.history-payment-parts span{
  padding:5px 7px;
  border:1px solid #DDE7E3;
  border-radius:8px;
  background:#F8FAF9;
  color:#697874;
  font-size:.61rem;
}

.history-payment-parts strong{
  color:#294F4C!important;
  font-weight:600!important;
}

.history-payment-parts.empty-parts{
  color:#899591;
  font-size:.64rem;
}

.history-payment-detail-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin:6px 0 7px;
}

.history-payment-detail-title>span{
  color:#8D706C;
  font-size:.65rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.history-payment-detail-title>small{
  color:#84918D;
  font-size:.61rem;
}

@media(max-width:760px){
  .history-order-payment-head{
    gap:8px;
  }

  .history-order-payment-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .history-order-payment-metrics>div{
    padding:9px 7px;
  }

  .history-order-payment-metrics strong{
    font-size:.72rem!important;
    overflow-wrap:anywhere;
  }

  .history-payment-count{
    font-size:.56rem;
    padding:4px 6px;
  }
}

@media(max-width:340px){
  .history-order-payment-head{
    display:grid;
    grid-template-columns:1fr auto;
  }

  .history-order-payment-metrics span{
    font-size:.5rem;
  }

  .history-order-payment-metrics strong{
    font-size:.66rem!important;
  }
}

/* =========================================================
   V2.0.4 — CLOUD IVORY / DUSTY SKY ATELIER
   ========================================================= */
:root{
  --bg:#F4F1EC!important;
  --bg-soft:#F8F5F1!important;
  --card:#FFFFFF!important;
  --text:#3F3731!important;
  --muted:#76685E!important;
  --line:#DDD3C8!important;
  --line-strong:#CFC3B5!important;

  --accent:#738091!important;
  --accent-deep:#5E6978!important;
  --accent-soft:#E8EBEF!important;

  --gold:#B66D57!important;
  --gold-soft:#F4E7E2!important;
  --rose:#B66D57!important;
  --rose-soft:#F2E4DF!important;

  --danger:#A85145!important;
  --danger-soft:#F7E5E1!important;
  --warn:#A96E45!important;
  --warn-soft:#F4E8DC!important;
  --ok:#4F8D68!important;
  --ok-soft:#E7F1EA!important;

  --shadow:0 14px 36px rgba(63,55,49,.07)!important;
  --shadow-soft:0 6px 18px rgba(63,55,49,.05)!important;
}

html,body{background:#F4F1EC!important}
body{
  background:
    radial-gradient(circle at 4% -10%,rgba(182,109,87,.10),transparent 27rem),
    radial-gradient(circle at 96% 0%,rgba(115,128,145,.12),transparent 31rem),
    linear-gradient(180deg,#F4F1EC 0%,#F8F5F1 56%,#F4F1EC 100%)!important;
  color:#3F3731!important;
}

/* Header / navigation */
.topbar{
  background:rgba(244,241,236,.96)!important;
  border-bottom-color:#DDD3C8!important;
  box-shadow:0 2px 16px rgba(63,55,49,.035)!important;
}
.mini-monogram,.brand-mark{
  background:linear-gradient(145deg,#738091,#5E6978)!important;
  color:#fff!important;
}
.bottom-nav{
  background:rgba(250,248,245,.98)!important;
  border-top-color:#D8CDC1!important;
}
.bottom-nav button{color:#7B746E!important}
.bottom-nav button.active{color:#3F3731!important}

/* Text hierarchy */
.screen-head h1,.modal-head h2,.order-section-head h3,
.workspace-subsection-head h4,.garment-notes-head h4,
.order-measurement-group-head h4,.customer-card-name,.insight-panel-head h2{
  color:#3F3731!important;
}
.eyebrow,.page-kicker,.micro-label,.section-kicker,.section-label{
  color:#B66D57!important;
}
.list-sub,.muted,.input-help,.customer-card-contact,
.customer-card-meta span,.payment-garment-line,.detail-label{
  color:#76685E!important;
}

/* Buttons */
.primary{
  background:linear-gradient(135deg,#738091,#5E6978)!important;
  border-color:#738091!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(115,128,145,.19)!important;
}
.primary:hover{background:#5E6978!important}
.ghost,.soft-btn,.row-actions button,.payment-row-btn,
.delivery-edit-btn,.hero-edit-customer{
  background:#FFFDFC!important;
  border-color:#CFC3B5!important;
  color:#3F3731!important;
}
.ghost:hover,.soft-btn:hover,.row-actions button:hover,.payment-row-btn:hover,
.delivery-edit-btn:hover,.hero-edit-customer:hover{
  background:#F2ECE6!important;
  border-color:#BFAF9F!important;
}

/* Cards / surfaces */
.panel,.order-section,.form-section-card,.metric,.item-card,
.measurement-card,.payment-section,.order-status-group,.customer-card-row,
.order-measurement-group,.garment-notes-card,.measurement-section-card,
.insight-panel,.insights-kpi-card{
  background:rgba(255,255,255,.96)!important;
  border-color:#DDD3C8!important;
  box-shadow:var(--shadow-soft)!important;
}
.detail-box,.money-box,.line-total-box,.customer-date-strip,.order-date-strip,
.order-customer-inline,.work-context-bar{
  background:#FBF9F6!important;
  border-color:#DDD3C8!important;
}

/* Inputs */
input,select,textarea{
  background:#FFFDFC!important;
  border-color:#CFC3B5!important;
  color:#3F3731!important;
}
input:focus,select:focus,textarea:focus{
  border-color:#738091!important;
  box-shadow:0 0 0 3px rgba(115,128,145,.16)!important;
}
input::placeholder,textarea::placeholder{color:#AAA099!important}

/* Chips / status */
.badge{background:#ECE8E4!important;color:#6F665F!important}
.badge.green{background:#E7F1EA!important;color:#4F8D68!important}
.badge.amber{background:#F4E8DC!important;color:#9A6643!important}
.badge.red{background:#F7E5E1!important;color:#A85145!important}
.badge.purple{background:#E8EBEF!important;color:#596575!important}
.subsection-number,.garment-index-chip,.template-pill,.metric-icon{
  background:#F2E4DF!important;
  color:#9A5C4B!important;
}

/* Order hero */
.order-hero{
  background:
    radial-gradient(circle at 96% 4%,rgba(182,109,87,.13),transparent 16rem),
    linear-gradient(135deg,#EEF0F3 0%,#F8F5F1 64%,#F0E7E2 100%)!important;
  color:#3F3731!important;
  border-color:#D4CBC2!important;
  box-shadow:0 15px 38px rgba(63,55,49,.075)!important;
}
.order-hero h2{color:#3F3731!important}
.order-hero-garments,.order-hero p{color:#706963!important}
.hero-contact,.hero-location{
  background:rgba(255,255,255,.80)!important;
  border-color:#D9CFC5!important;
  color:#665F59!important;
}
.hero-contact .phone-call-link{color:#5E6978!important}
.delivery-card{
  background:rgba(255,253,250,.85)!important;
  border-color:#D9CFC5!important;
  color:#3F3731!important;
}
.delivery-card strong{color:#5E6978!important}

/* Timeline */
.status-step{color:#817972!important}
.status-step:before{background:#D2C8BF!important}
.status-dot{
  background:#FFFDFC!important;
  border-color:#C7BBB0!important;
  color:#7C736C!important;
}
.status-step.done .status-dot{
  background:#738091!important;
  border-color:#738091!important;
  color:#fff!important;
}
.status-step.current .status-dot{
  background:#3F3731!important;
  border-color:#3F3731!important;
  color:#fff!important;
  box-shadow:0 0 0 4px rgba(63,55,49,.10)!important;
}

/* Garments */
.order-garment-table{border-color:#CFC3B5!important;background:#fff!important}
.order-garment-table-head{
  background:#738091!important;
  border-bottom-color:#738091!important;
  color:#fff!important;
}
.order-garment-table-row{background:#fff!important;border-bottom-color:#E2D9D0!important}
.order-garment-table-row:nth-child(even){background:#FAF7F3!important}
.garment-cell{border-right-color:#E6DED6!important;color:#6C645E!important}
.garment-cell strong,.garment-name-cell strong{color:#3F3731!important}
.garment-status-select{
  background:#F1F3F5!important;
  border-color:#CCD1D7!important;
  color:#52606F!important;
}
.garment-inline-stitching>span,.garment-inline-stitching>p,
.garment-instruction-line>span,.garment-instruction-line>p{
  color:#6B4B43!important;
}

/* Measurements */
.shared-measure-banner{
  background:#EDF0F3!important;
  border-color:#D6DCE2!important;
}
.shared-measure-icon{
  background:#DDE2E7!important;
  color:#5E6978!important;
}
.shared-measure-banner strong{color:#4E5A68!important}
.desk-shared-preview>div{
  background:#F1F3F5!important;
  border-color:#D9DEE3!important;
}
.desk-shared-preview strong{color:#596575!important}

/* Money */
.balance-money-box.has-balance,
.payment-ledger-amounts .balance-pending{
  background:#EDF6F0!important;
  border-color:#D1E6D8!important;
}
.balance-money-box.has-balance strong,
.payment-ledger-amounts .balance-pending strong,
.insights-kpi-card.balance-kpi>strong{
  color:#4F9F6A!important;
}

/* Insights */
.insights-period-tabs button{
  background:#FFFDFC!important;
  border-color:#CFC3B5!important;
  color:#706963!important;
}
.insights-period-tabs button.active{
  background:#738091!important;
  border-color:#738091!important;
  color:#fff!important;
}
.insights-period-label strong,.insights-secondary-grid strong,
.attention-insight-grid strong,.insight-customer-link strong,
.insight-rank-person strong,.insight-inline-summary strong,
.fit-insight-grid strong{
  color:#5E6978!important;
}
.insight-bar-track{background:#EEE9E4!important}
.insight-bar-track span{background:linear-gradient(90deg,#A5AEB9,#738091)!important}
.orders-bar,.mobile-order-fill{background:#738091!important}
.paid-bar,.mobile-paid-fill{background:#B66D57!important}
.legend-orders:before{background:#738091!important}
.legend-paid:before{background:#B66D57!important}

/* History */
.history-order-payment-summary{
  border-color:#DDD3C8!important;
  background:#FCFAF7!important;
}
.history-order-payment-head{
  border-bottom-color:#E4DCD4!important;
  background:#F4EFEA!important;
}
.history-order-payment-head>div>strong{color:#5E6978!important}
.history-payment-count{
  background:#E8EBEF!important;
  color:#596575!important;
}

/* =========================================================
   MOBILE-ONLY DENSITY TUNING
   Desktop spacing/layout intentionally untouched.
   ========================================================= */
@media(max-width:760px){
  .screen{padding-top:10px!important}
  .screen-head{margin-bottom:10px!important}

  .panel,.order-section,.insight-panel{margin-bottom:9px!important}
  .order-section{padding-top:11px!important;padding-bottom:11px!important}

  .dashboard-grid,.metrics-grid,.today-grid{gap:7px!important}
  .metric{padding:11px!important}

  .priority-card,.attention-card,.dashboard-section{margin-top:9px!important}

  .list-row,.customer-card-row{
    padding-top:10px!important;
    padding-bottom:10px!important;
  }

  .order-hero{margin-bottom:9px!important}
  .detail-grid{gap:6px!important}

  .workspace-subsection-head{
    margin-top:12px!important;
    margin-bottom:6px!important;
  }
  .garment-details-stack{gap:6px!important}
  .order-measurement-group{margin-bottom:8px!important}

  .measurement-card{margin-bottom:7px!important}
  .measurement-mini>div{
    padding-top:7px!important;
    padding-bottom:7px!important;
  }

  .insights-kpi-grid{margin-bottom:7px!important}
  .insights-secondary-grid{margin-bottom:10px!important}
  .insights-two-col{gap:9px!important;margin-bottom:9px!important}
  .insight-panel-head{
    padding-top:10px!important;
    padding-bottom:8px!important;
  }

  #modal .modal-body{
    padding-top:9px!important;
    padding-bottom:9px!important;
  }
  .form-section-card{margin-bottom:9px!important}

  /* keep comfortable touch targets */
  button,.soft-btn,.primary,.ghost{min-height:40px}
}

@media(max-width:340px){
  .metric{padding:9px!important}
  .screen-head{margin-bottom:8px!important}
  .order-section,.panel,.insight-panel{margin-bottom:7px!important}
}

/* =========================================================
   V2.0.5 — REAL-PHONE GARMENT SUMMARY FIX
   MOBILE ONLY. Desktop garment table is untouched.
   ========================================================= */
@media(max-width:760px){
  .order-garment-table{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
  }

  .order-garment-table-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .garment-cell{
    min-width:0!important;
    width:auto!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    overflow:hidden;
  }

  .order-garment-table-row > .garment-cell:nth-child(1){
    grid-column:1!important;
    grid-row:1!important;
    border-right:1px solid #DDD3C8!important;
    border-bottom:1px solid #DDD3C8!important;
  }

  .order-garment-table-row > .garment-cell:nth-child(2){
    grid-column:2!important;
    grid-row:1!important;
    border-right:0!important;
    border-bottom:1px solid #DDD3C8!important;
  }

  .order-garment-table-row > .garment-cell:nth-child(3){
    grid-column:1!important;
    grid-row:2!important;
    border-right:1px solid #DDD3C8!important;
    border-bottom:1px solid #DDD3C8!important;
  }

  .order-garment-table-row > .garment-cell:nth-child(4){
    grid-column:2!important;
    grid-row:2!important;
    border-right:0!important;
    border-bottom:1px solid #DDD3C8!important;
  }

  .order-garment-table-row > .garment-cell:nth-child(5),
  .garment-status-cell{
    grid-column:1 / -1!important;
    grid-row:3!important;
    width:100%!important;
    min-width:0!important;
    border-right:0!important;
    border-bottom:0!important;
    overflow:visible!important;
  }

  .garment-status-select{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  .garment-total-cell strong,
  .garment-cell strong{
    max-width:100%;
    overflow-wrap:anywhere;
  }
}

@media(max-width:340px){
  .order-garment-table-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  }

  .order-garment-table-row > .garment-cell:nth-child(1){grid-column:1!important;grid-row:1!important;}
  .order-garment-table-row > .garment-cell:nth-child(2){grid-column:2!important;grid-row:1!important;}
  .order-garment-table-row > .garment-cell:nth-child(3){grid-column:1!important;grid-row:2!important;}
  .order-garment-table-row > .garment-cell:nth-child(4){grid-column:2!important;grid-row:2!important;}
  .order-garment-table-row > .garment-cell:nth-child(5),
  .garment-status-cell{grid-column:1 / -1!important;grid-row:3!important;}

  .garment-cell{padding:8px 9px!important;}
  .garment-name-cell strong{font-size:.92rem!important;}
  .garment-cell strong{font-size:.73rem!important;}
}


/* =========================================================
   V2.0.6 — REAL-PHONE MEASUREMENT SAVE RELIABILITY
   Mobile only; desktop layout and interaction unchanged.
   ========================================================= */
@media(max-width:760px){
  /* Use Chrome/Safari's actual visual viewport while the soft keyboard
     opens/closes. This keeps the action bar in the real tappable area. */
  #modal{
    height:var(--ff-mobile-viewport,100dvh)!important;
    max-height:var(--ff-mobile-viewport,100dvh)!important;
  }
  #modal .modal-card{
    height:var(--ff-mobile-viewport,100dvh)!important;
    max-height:var(--ff-mobile-viewport,100dvh)!important;
  }
  .inline-measure-dialog{
    height:var(--ff-mobile-viewport,100dvh)!important;
    max-height:var(--ff-mobile-viewport,100dvh)!important;
  }
  .inline-measure-dialog .inline-measure-card{
    height:var(--ff-mobile-viewport,100dvh)!important;
    max-height:var(--ff-mobile-viewport,100dvh)!important;
  }

  #modal .modal-actions,
  .inline-measure-actions{
    isolation:isolate;
    z-index:80!important;
  }

  #modalSaveBtn,
  #modalCancelBtn,
  #saveInlineMeasurement,
  .inline-measure-actions button,
  .measurement-check-actions button{
    position:relative;
    z-index:90;
    pointer-events:auto!important;
    touch-action:manipulation!important;
    -webkit-tap-highlight-color:rgba(115,128,145,.14);
  }

  /* The warning popup itself must fit above mobile browser chrome. */
  .measurement-check-dialog{
    max-height:calc(var(--ff-mobile-viewport,100dvh) - 12px)!important;
    overflow:auto!important;
  }
  .measurement-check-card{
    max-height:calc(var(--ff-mobile-viewport,100dvh) - 12px)!important;
    overflow:auto!important;
  }
}


/* =========================================================
   V2.0.8 — DISTINCT GARMENT WORKFLOW STATUS COLORS
   Professional muted colours that work with Cloud Ivory /
   Dusty Sky Atelier.
   ========================================================= */

/*
  NEW         = Slate
  MEASURED    = Dusty Blue
  CUTTING     = Ochre / Tan
  STITCHING   = Muted Plum
  CHECKING    = Steel Teal
  FITTING     = Warm Clay
  ALTERATION  = Muted Red
  READY       = Sage
  DELIVERED   = Deep Green
*/

/* Default transition makes a status change visually obvious. */
.garment-status-select{
  transition:
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease!important;
}

/* NEW */
.garment-status-select[data-status="New"],
.workflow-status-badge.status-new{
  background:#EEF0F2!important;
  border-color:#C9CDD2!important;
  color:#626B73!important;
}

/* MEASURED */
.garment-status-select[data-status="Measured"],
.workflow-status-badge.status-measured{
  background:#E9EEF2!important;
  border-color:#BFCBD3!important;
  color:#586F7C!important;
}

/* CUTTING */
.garment-status-select[data-status="Cutting"],
.workflow-status-badge.status-cutting{
  background:#F3ECE1!important;
  border-color:#DBC6A7!important;
  color:#8A6840!important;
}

/* STITCHING */
.garment-status-select[data-status="Stitching"],
.workflow-status-badge.status-stitching{
  background:#F0E8EF!important;
  border-color:#D4BED1!important;
  color:#795D77!important;
}

/* CHECKING */
.garment-status-select[data-status="Checking"],
.workflow-status-badge.status-checking{
  background:#E7EFF0!important;
  border-color:#B9CED1!important;
  color:#55757B!important;
}

/* FITTING */
.garment-status-select[data-status="Fitting"],
.workflow-status-badge.status-fitting{
  background:#F3E8E3!important;
  border-color:#DDBFB2!important;
  color:#956652!important;
}

/* ALTERATION */
.garment-status-select[data-status="Alteration"],
.workflow-status-badge.status-alteration{
  background:#F5E5E2!important;
  border-color:#DEB5AE!important;
  color:#A2574D!important;
}

/* READY */
.garment-status-select[data-status="Ready"],
.workflow-status-badge.status-ready{
  background:#E8F0E6!important;
  border-color:#BFD2BA!important;
  color:#66815F!important;
}

/* DELIVERED */
.garment-status-select[data-status="Delivered"],
.workflow-status-badge.status-delivered{
  background:#E2EFE7!important;
  border-color:#AFCEBA!important;
  color:#3F7556!important;
}

/* Cancelled remains an exception outside the normal 9-step flow. */
.workflow-status-badge.status-cancelled{
  background:#F7E5E1!important;
  border-color:#E0B8AF!important;
  color:#A85145!important;
}

/* Give each selected status a matching focus ring instead of reverting
   to the generic Dusty Sky input focus. */
.garment-status-select[data-status="New"]:focus{
  border-color:#AEB5BC!important;
  box-shadow:0 0 0 3px rgba(98,107,115,.12)!important;
}
.garment-status-select[data-status="Measured"]:focus{
  border-color:#8FA6B3!important;
  box-shadow:0 0 0 3px rgba(88,111,124,.12)!important;
}
.garment-status-select[data-status="Cutting"]:focus{
  border-color:#BE9B6B!important;
  box-shadow:0 0 0 3px rgba(138,104,64,.12)!important;
}
.garment-status-select[data-status="Stitching"]:focus{
  border-color:#A98AA5!important;
  box-shadow:0 0 0 3px rgba(121,93,119,.12)!important;
}
.garment-status-select[data-status="Checking"]:focus{
  border-color:#87A9AE!important;
  box-shadow:0 0 0 3px rgba(85,117,123,.12)!important;
}
.garment-status-select[data-status="Fitting"]:focus{
  border-color:#C58F78!important;
  box-shadow:0 0 0 3px rgba(149,102,82,.12)!important;
}
.garment-status-select[data-status="Alteration"]:focus{
  border-color:#C77E73!important;
  box-shadow:0 0 0 3px rgba(162,87,77,.12)!important;
}
.garment-status-select[data-status="Ready"]:focus{
  border-color:#91AF89!important;
  box-shadow:0 0 0 3px rgba(102,129,95,.12)!important;
}
.garment-status-select[data-status="Delivered"]:focus{
  border-color:#74A487!important;
  box-shadow:0 0 0 3px rgba(63,117,86,.12)!important;
}

/* Options can show colours in desktop browsers that support option styling.
   Mobile native pickers may use OS styling, but the selected field always
   shows the correct colour after selection. */
.garment-status-select option[value="New"]{background:#EEF0F2;color:#626B73}
.garment-status-select option[value="Measured"]{background:#E9EEF2;color:#586F7C}
.garment-status-select option[value="Cutting"]{background:#F3ECE1;color:#8A6840}
.garment-status-select option[value="Stitching"]{background:#F0E8EF;color:#795D77}
.garment-status-select option[value="Checking"]{background:#E7EFF0;color:#55757B}
.garment-status-select option[value="Fitting"]{background:#F3E8E3;color:#956652}
.garment-status-select option[value="Alteration"]{background:#F5E5E2;color:#A2574D}
.garment-status-select option[value="Ready"]{background:#E8F0E6;color:#66815F}
.garment-status-select option[value="Delivered"]{background:#E2EFE7;color:#3F7556}

/* Keep badges compact and readable in Orders / Dashboard / History. */
.workflow-status-badge{
  border:1px solid transparent;
  font-weight:650!important;
}


/* =========================================================
   V2.0.9 — ORDERS WORKFLOW STATUS FILTER
   Keeps existing Orders-page design; adds only one select.
   ========================================================= */
#orderWorkflowFilter{
  max-width:200px;
}

@media(max-width:760px){
  #orderWorkflowFilter{
    max-width:none!important;
    width:100%!important;
  }
}


/* =========================================================
   V2.1.0 — GARMENT REFERENCE PHOTOS
   New components only. Existing FitFlow design is preserved.
   ========================================================= */

.garment-photo-groups{
  display:grid;
  gap:10px;
}

.order-photo-group{
  overflow:hidden;
  border:1px solid #DDD3C8;
  border-radius:15px;
  background:#FFFDFC;
}

.order-photo-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 12px;
  border-bottom:1px solid #E5DDD5;
  background:#FBF8F4;
}

.order-photo-group-head>div:first-child{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.order-photo-group-head h4{
  margin:2px 0 0;
  color:#3F3731;
  font-size:.94rem;
  font-weight:600;
}

.order-photo-group-head small{
  display:block;
  margin-top:2px;
  color:#817872;
  font-size:.61rem;
}

.garment-photo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:9px;
  padding:11px;
}

.garment-photo-card{
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid #DDD3C8;
  border-radius:12px;
  background:#FFFFFF;
}

.garment-photo-view{
  display:block;
  width:100%;
  height:118px;
  min-height:118px!important;
  padding:0!important;
  overflow:hidden;
  border:0!important;
  border-radius:0!important;
  background:#F2ECE6!important;
  box-shadow:none!important;
  cursor:pointer;
}

.garment-photo-view img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.garment-photo-placeholder{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  color:#8F8680;
  font-size:.62rem;
  letter-spacing:.08em;
}

.garment-photo-meta{
  min-height:51px;
  padding:8px 9px 9px;
}

.garment-photo-meta strong{
  display:block;
  color:#3F3731!important;
  font-size:.68rem;
  font-weight:600!important;
}

.garment-photo-meta small{
  display:-webkit-box;
  margin-top:3px;
  overflow:hidden;
  color:#7B736D;
  font-size:.59rem;
  line-height:1.35;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.garment-photo-delete{
  position:absolute;
  top:6px;
  right:6px;
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  min-height:29px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.86)!important;
  border-radius:999px!important;
  background:rgba(63,55,49,.78)!important;
  color:#FFFFFF!important;
  box-shadow:0 3px 10px rgba(0,0,0,.12)!important;
  font-size:1rem;
  line-height:1;
}

.garment-photo-empty,
.photo-setup-note{
  padding:12px;
  color:#847B75;
  font-size:.67rem;
}

.photo-setup-needed{
  border-style:dashed;
}

.photo-setup-note{
  background:#FAF3EF;
  color:#8B6257;
}

.garment-photo-upload-form{
  display:grid;
  gap:13px;
}

.photo-source-label{
  color:#76685E;
  font-size:.67rem;
  font-weight:600;
}

.photo-source-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.photo-source-btn{
  position:relative;
  display:grid!important;
  justify-items:start;
  gap:3px!important;
  min-height:102px;
  padding:13px!important;
  overflow:hidden;
  border:1px solid #CFC3B5;
  border-radius:13px;
  background:#FFFDFC;
  cursor:pointer;
}

.photo-source-btn:hover{
  background:#F8F4EF;
}

.photo-source-btn input{
  position:absolute;
  width:1px!important;
  height:1px!important;
  opacity:0;
  pointer-events:none;
}

.photo-source-icon{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  margin-bottom:3px;
  border-radius:9px;
  background:#E8EBEF;
  color:#5E6978;
  font-size:.82rem;
}

.photo-source-btn strong{
  color:#3F3731!important;
  font-size:.76rem;
  font-weight:600!important;
}

.photo-source-btn small{
  color:#807771;
  font-size:.59rem;
  line-height:1.3;
}

.garment-photo-preview{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:82px;
  padding:9px;
  border:1px dashed #CFC3B5;
  border-radius:12px;
  background:#FAF7F3;
  color:#817872;
  font-size:.65rem;
}

.garment-photo-preview img{
  width:68px;
  height:68px;
  flex:none;
  object-fit:cover;
  border-radius:9px;
}

.garment-photo-preview>div{
  min-width:0;
}

.garment-photo-preview strong{
  display:block;
  max-width:100%;
  overflow:hidden;
  color:#3F3731!important;
  font-size:.67rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.garment-photo-preview small{
  display:block;
  margin-top:3px;
  color:#817872;
  font-size:.58rem;
}

.photo-privacy-note{
  padding:8px 10px;
  border-radius:9px;
  background:#E8EBEF;
  color:#5F6B78;
  font-size:.6rem;
  line-height:1.35;
}

.garment-photo-viewer{
  display:grid;
  gap:11px;
}

.garment-photo-viewer>img{
  width:100%;
  max-height:68vh;
  object-fit:contain;
  border-radius:12px;
  background:#F2ECE6;
}

.garment-photo-large-placeholder{
  display:grid;
  place-items:center;
  min-height:240px;
  border-radius:12px;
  background:#F2ECE6;
  color:#817872;
}

.garment-photo-viewer-note{
  padding:10px 11px;
  border:1px solid #DDD3C8;
  border-radius:10px;
  background:#FFFDFC;
}

.garment-photo-viewer-note span{
  color:#B66D57;
  font-size:.58rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.garment-photo-viewer-note p{
  margin:4px 0 0;
  color:#3F3731;
  font-size:.71rem;
  line-height:1.45;
}

.field-optional{
  color:#918781;
  font-size:.58rem;
  font-weight:400;
}

@media(max-width:760px){
  .order-photo-group-head{
    align-items:flex-start;
    padding:9px 10px;
  }

  .order-photo-group-head .soft-btn{
    min-height:38px!important;
    padding:7px 9px!important;
    white-space:nowrap;
  }

  .garment-photo-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    padding:9px;
  }

  .garment-photo-view{
    height:106px;
    min-height:106px!important;
  }

  .garment-photo-meta{
    min-height:49px;
    padding:7px 8px 8px;
  }

  .photo-source-grid{
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  .photo-source-btn{
    min-height:94px;
    padding:11px!important;
  }

  .garment-photo-viewer>img{
    max-height:62vh;
  }
}

@media(max-width:340px){
  .garment-photo-grid{
    gap:6px;
    padding:8px;
  }

  .garment-photo-view{
    height:94px;
    min-height:94px!important;
  }

  .photo-source-btn{
    padding:9px!important;
  }

  .photo-source-btn small{
    font-size:.55rem;
  }
}


/* =========================================================
   V2.1.1 — PHOTO VIEWER ZOOM / PAN ONLY
   ========================================================= */
.photo-zoom-toolbar{display:flex;align-items:center;justify-content:center;gap:8px;padding:2px 0 8px}
.photo-zoom-btn,.photo-zoom-reset{height:38px;min-height:38px!important;border:1px solid #CFC3B5!important;border-radius:10px!important;background:#FFFDFC!important;color:#3F3731!important;box-shadow:none!important;font-weight:600!important}
.photo-zoom-btn{width:42px;padding:0!important;font-size:1.15rem!important}
.photo-zoom-reset{min-width:72px;padding:0 10px!important;font-size:.68rem!important}
.photo-zoom-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:min(62vh,620px);min-height:260px;overflow:hidden;border:1px solid #DDD3C8;border-radius:12px;background:#EDE7E1;touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:contain;cursor:zoom-in}
.photo-zoom-stage.is-zoomed{cursor:grab}.photo-zoom-stage.is-zoomed:active{cursor:grabbing}
.photo-zoom-stage img{display:block;width:100%;height:100%;max-width:none!important;max-height:none!important;object-fit:contain;transform-origin:center center;will-change:transform;pointer-events:none;-webkit-user-drag:none}
.photo-zoom-help{display:flex;justify-content:center;padding:7px 4px 0;color:#817872;font-size:.59rem;line-height:1.3}.photo-mobile-help{display:none}.photo-desktop-help{display:inline}
.garment-photo-zoom-viewer .garment-photo-viewer-note{margin-top:2px}
@media(max-width:760px){.photo-zoom-stage{height:56vh;min-height:230px}.photo-mobile-help{display:inline}.photo-desktop-help{display:none}.photo-zoom-toolbar{padding-bottom:7px}.photo-zoom-btn,.photo-zoom-reset{height:40px;min-height:40px!important}.garment-photo-zoom-viewer{padding-bottom:4px}}
@media(max-width:340px){.photo-zoom-stage{height:52vh;min-height:210px}}


/* =========================================================
   V2.1.2 — FIT MEMORY DELETE + LIGHTER PHOTO LOADING
   ========================================================= */

.fit-memory-row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:max-content;
}

.fit-memory-delete-btn{
  min-height:34px;
  padding:6px 10px;
  border:1px solid #DEB5AE;
  border-radius:9px;
  background:#FFFDFC;
  color:#A2574D;
  font-size:.67rem;
  font-weight:600;
  cursor:pointer;
}

.fit-memory-delete-btn:hover{
  background:#F7E5E1;
  border-color:#C98C82;
}

.fit-memory-note-text{
  min-width:0;
  color:#514943;
  line-height:1.45;
  overflow-wrap:anywhere;
}

@media(max-width:760px){
  .fit-memory-list-row{
    gap:8px!important;
  }

  .fit-memory-row-actions{
    width:100%;
    justify-content:space-between;
    min-width:0;
    flex-wrap:wrap;
  }

  .fit-memory-delete-btn{
    min-height:40px!important;
    padding:8px 11px;
  }
}


/* =========================================================
   V2.2.0 — INVOICE / RECEIPT + WHATSAPP
   New components only.
   ========================================================= */

.invoice-modal-content{
  display:grid;
  gap:10px;
}

.invoice-action-bar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.invoice-action-primary{
  min-width:132px;
}

.invoice-whatsapp-btn{
  min-width:96px;
}

.invoice-whatsapp-btn:disabled{
  opacity:.48;
  cursor:not-allowed!important;
}

.invoice-share-note{
  padding:8px 10px;
  border:1px solid #D9DEE3;
  border-radius:10px;
  background:#F1F3F5;
  color:#5F6B78;
  font-size:.61rem;
  line-height:1.4;
}

.invoice-share-warning{
  border-color:#E3C9C2;
  background:#FAF0ED;
  color:#8B6257;
}

.invoice-preview-sheet{
  overflow:hidden;
  border:1px solid #D8CEC4;
  border-radius:14px;
  background:#FFFFFF;
}

.invoice-preview-brand{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  border-bottom:2px solid #738091;
  background:#FCFAF7;
}

.invoice-preview-brand>div:first-child{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.invoice-brand-mark{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  flex:none;
  border-radius:10px;
  background:#738091;
  color:#FFFFFF;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.1rem;
  font-weight:700;
}

.invoice-preview-brand h3{
  margin:2px 0 0;
  color:#3F3731!important;
  font-size:1rem;
  font-weight:600;
}

.invoice-document-title{
  text-align:right;
}

.invoice-document-title span{
  display:block;
  color:#B66D57;
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.invoice-document-title strong{
  display:block;
  margin-top:4px;
  color:#3F3731!important;
  font-size:.74rem;
  font-weight:650!important;
}

.invoice-parties{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:12px 14px;
}

.invoice-parties>div{
  min-width:0;
  padding:10px;
  border:1px solid #E0D7CE;
  border-radius:10px;
  background:#FBF9F6;
}

.invoice-mini-label{
  display:block;
  color:#B66D57;
  font-size:.54rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.invoice-parties strong{
  display:block;
  margin-top:4px;
  color:#3F3731!important;
  font-size:.74rem;
  font-weight:600!important;
}

.invoice-parties small{
  display:block;
  margin-top:3px;
  color:#76685E;
  font-size:.59rem;
  line-height:1.3;
}

.invoice-table-wrap{
  overflow-x:auto;
  padding:0 14px 12px;
}

.invoice-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  overflow:hidden;
  border:1px solid #DDD3C8;
  border-radius:10px;
  font-size:.63rem;
}

.invoice-table th{
  padding:8px;
  background:#738091;
  color:#FFFFFF;
  text-align:left;
  font-weight:600;
}

.invoice-table td{
  padding:8px;
  border-bottom:1px solid #E6DED6;
  color:#514943;
  vertical-align:top;
}

.invoice-table tbody tr:last-child td{
  border-bottom:0;
}

.invoice-table td strong{
  display:block;
  color:#3F3731!important;
  font-size:.65rem;
  font-weight:600!important;
}

.invoice-table td small{
  display:block;
  margin-top:3px;
  color:#76685E;
  font-size:.56rem;
  line-height:1.3;
}

.invoice-table .num{
  text-align:right;
  white-space:nowrap;
}

.invoice-extra-row{
  background:#FCFAF7;
}

.invoice-summary-area{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,.75fr);
  gap:10px;
  padding:0 14px 12px;
}

.invoice-summary-note{
  padding:10px;
  border:1px solid #E0D7CE;
  border-radius:10px;
  background:#FBF9F6;
}

.invoice-summary-note strong{
  display:block;
  margin-top:4px;
  color:#3F3731!important;
  font-size:.72rem;
}

.invoice-summary-note small{
  display:block;
  margin-top:5px;
  color:#76685E;
  font-size:.57rem;
  line-height:1.4;
}

.invoice-totals{
  overflow:hidden;
  border:1px solid #DDD3C8;
  border-radius:10px;
  background:#FFFFFF;
}

.invoice-totals>div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:7px 9px;
  border-bottom:1px solid #E6DED6;
  color:#625A54;
  font-size:.61rem;
}

.invoice-totals>div:last-child{
  border-bottom:0;
}

.invoice-totals strong{
  color:#3F3731!important;
  font-weight:600!important;
  white-space:nowrap;
}

.invoice-grand-total{
  background:#F1F3F5;
  font-size:.68rem!important;
  font-weight:650;
}

.invoice-received{
  color:#4F8D68!important;
}

.invoice-balance-row strong{
  color:#A2574D!important;
}

.invoice-payment-history{
  padding:0 14px 14px;
}

.invoice-preview-section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
}

.invoice-preview-section-head strong{
  color:#5E6978!important;
  font-size:.62rem;
  font-weight:600!important;
}

.invoice-payment-list{
  overflow:hidden;
  border:1px solid #DDD3C8;
  border-radius:10px;
}

.invoice-payment-row{
  display:grid;
  grid-template-columns:1fr .8fr .9fr .9fr;
  border-bottom:1px solid #E6DED6;
}

.invoice-payment-row:last-child{
  border-bottom:0;
}

.invoice-payment-row>div{
  min-width:0;
  padding:8px 9px;
  border-right:1px solid #E6DED6;
}

.invoice-payment-row>div:last-child{
  border-right:0;
}

.invoice-payment-row span{
  display:block;
  color:#8A8079;
  font-size:.52rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.invoice-payment-row strong{
  display:block;
  margin-top:3px;
  color:#3F3731!important;
  font-size:.62rem;
  font-weight:600!important;
  overflow-wrap:anywhere;
}

.invoice-empty-payment{
  padding:10px;
  border:1px solid #DDD3C8;
  border-radius:10px;
  color:#817872;
  font-size:.62rem;
}

.invoice-preview-footer{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:9px 14px;
  border-top:1px solid #E6DED6;
  background:#FBF9F6;
  color:#817872;
  font-size:.52rem;
}

@media(max-width:760px){
  .invoice-action-bar{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .invoice-action-bar button{
    width:100%;
    min-width:0;
  }

  .invoice-preview-brand{
    padding:11px;
  }

  .invoice-brand-mark{
    width:32px;
    height:32px;
  }

  .invoice-preview-brand h3{
    font-size:.86rem;
  }

  .invoice-parties{
    grid-template-columns:1fr;
    gap:7px;
    padding:9px 10px;
  }

  .invoice-table-wrap{
    padding:0 10px 9px;
  }

  .invoice-summary-area{
    grid-template-columns:1fr;
    padding:0 10px 9px;
  }

  .invoice-payment-history{
    padding:0 10px 10px;
  }

  .invoice-payment-row{
    grid-template-columns:1fr 1fr;
  }

  .invoice-payment-row>div{
    border-bottom:1px solid #E6DED6;
  }

  .invoice-payment-row>div:nth-child(2n){
    border-right:0;
  }

  .invoice-payment-row>div:nth-last-child(-n+2){
    border-bottom:0;
  }

  .invoice-preview-footer{
    padding:8px 10px;
  }
}

@media(max-width:340px){
  .invoice-action-bar{
    grid-template-columns:1fr;
  }

  .invoice-preview-brand{
    display:grid;
    grid-template-columns:1fr;
  }

  .invoice-document-title{
    text-align:left;
  }
}


/* =========================================================
   V2.2.1 — REAL PDF + NATIVE SHARE
   Invoice action bar only.
   ========================================================= */

.invoice-action-bar-v221{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
}

.invoice-action-bar-v221 button{
  width:100%;
  min-width:0;
}

.invoice-share-note strong{
  color:#3F3731;
  font-weight:650;
}

@media(max-width:760px){
  .invoice-action-bar-v221{
    grid-template-columns:1fr 1fr;
  }

  .invoice-action-bar-v221 .invoice-action-primary{
    grid-column:1 / -1;
  }
}

@media(max-width:390px){
  .invoice-action-bar-v221{
    grid-template-columns:1fr;
  }

  .invoice-action-bar-v221 .invoice-action-primary{
    grid-column:auto;
  }
}


/* =========================================================
   V2.2.2 — INVOICE READABILITY CORRECTION
   Larger text, tighter padding, no extra card height.
   ========================================================= */

.invoice-summary-area{
  align-items:start;
}

.invoice-summary-note{
  align-self:start;
  min-height:0;
}

/* Increase preview text without increasing the overall visual bulk. */
.invoice-document-title span{
  font-size:.68rem;
}

.invoice-document-title strong{
  font-size:.84rem;
}

.invoice-mini-label{
  font-size:.64rem;
}

.invoice-parties>div{
  padding:8px 9px;
}

.invoice-parties strong{
  font-size:.84rem;
}

.invoice-parties small{
  font-size:.69rem;
  line-height:1.25;
}

.invoice-table{
  font-size:.74rem;
}

.invoice-table th{
  padding:6px 7px;
}

.invoice-table td{
  padding:6px 7px;
}

.invoice-table td strong{
  font-size:.77rem;
}

.invoice-table td small{
  font-size:.67rem;
  line-height:1.25;
}

.invoice-summary-note{
  padding:8px 9px;
}

.invoice-summary-note strong{
  font-size:.83rem;
}

.invoice-summary-note small{
  font-size:.68rem;
  line-height:1.3;
}

.invoice-totals>div{
  padding:6px 8px;
  font-size:.73rem;
}

.invoice-grand-total{
  font-size:.79rem!important;
}

.invoice-preview-section-head strong{
  font-size:.72rem;
}

.invoice-payment-row>div{
  padding:6px 8px;
}

.invoice-payment-row span{
  font-size:.63rem;
}

.invoice-payment-row strong{
  font-size:.75rem;
}

.invoice-empty-payment{
  padding:8px 9px;
  font-size:.73rem;
}

.invoice-preview-footer{
  padding:7px 10px;
  font-size:.62rem;
}

@media(max-width:760px){
  /* Mobile text is deliberately larger; spacing is tightened instead. */
  .invoice-preview-brand{
    padding:9px 10px;
  }

  .invoice-preview-brand h3{
    font-size:1rem;
  }

  .invoice-document-title span{
    font-size:.72rem;
  }

  .invoice-document-title strong{
    font-size:.9rem;
  }

  .invoice-mini-label{
    font-size:.69rem;
  }

  .invoice-parties{
    gap:5px;
    padding:7px 8px;
  }

  .invoice-parties>div{
    padding:7px 8px;
  }

  .invoice-parties strong{
    font-size:.9rem;
  }

  .invoice-parties small{
    font-size:.75rem;
  }

  .invoice-table-wrap{
    padding:0 8px 7px;
  }

  .invoice-table{
    font-size:.8rem;
  }

  .invoice-table th,
  .invoice-table td{
    padding:6px;
  }

  .invoice-table td strong{
    font-size:.82rem;
  }

  .invoice-table td small{
    font-size:.72rem;
  }

  .invoice-summary-area{
    gap:6px;
    padding:0 8px 7px;
  }

  .invoice-summary-note{
    padding:7px 8px;
  }

  .invoice-summary-note strong{
    font-size:.9rem;
  }

  .invoice-summary-note small{
    font-size:.74rem;
  }

  .invoice-totals>div{
    padding:6px 7px;
    font-size:.78rem;
  }

  .invoice-grand-total{
    font-size:.86rem!important;
  }

  .invoice-payment-history{
    padding:0 8px 8px;
  }

  .invoice-preview-section-head strong{
    font-size:.76rem;
  }

  .invoice-payment-row>div{
    padding:6px 7px;
  }

  .invoice-payment-row span{
    font-size:.67rem;
  }

  .invoice-payment-row strong{
    font-size:.8rem;
  }

  .invoice-preview-footer{
    padding:6px 8px;
    font-size:.66rem;
  }
}


/* =========================================================
   V2.2.3 — FINAL MOBILE INVOICE / UPI / TERMS
   ========================================================= */

.invoice-mobile-items{
  display:none;
}

.invoice-upi-section{
  display:grid;
  grid-template-columns:minmax(0,1fr) 170px;
  gap:14px;
  align-items:center;
  margin:0 14px 14px;
  padding:12px;
  border:1px solid #DDD3C8;
  border-radius:12px;
  background:#FBF9F6;
}

.invoice-upi-section img{
  display:block;
  width:160px;
  height:160px;
  justify-self:end;
  background:#fff;
  border:6px solid #fff;
}

.invoice-upi-copy strong{
  display:block;
  margin-top:6px;
  color:#3F3731!important;
  font-size:.88rem;
}

.invoice-upi-copy small{
  display:block;
  margin-top:5px;
  color:#625A54;
  font-size:.7rem;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.invoice-terms-section{
  margin:0 14px 14px;
  padding:11px 12px;
  border:1px solid #DDD3C8;
  border-radius:12px;
  background:#F2F4F1;
}

.invoice-terms-section ul{
  margin:7px 0 0;
  padding-left:18px;
  color:#514943;
  font-size:.72rem;
  line-height:1.45;
}

.invoice-terms-section li+li{
  margin-top:4px;
}

@media(max-width:760px){
  .invoice-desktop-items{
    display:none;
  }

  .invoice-mobile-items{
    display:grid;
    gap:7px;
    padding:0 8px 8px;
  }

  .invoice-mobile-item-card{
    overflow:hidden;
    border:1px solid #DDD3C8;
    border-radius:10px;
    background:#fff;
  }

  .invoice-mobile-item-head{
    display:grid;
    grid-template-columns:26px minmax(0,1fr) auto;
    gap:7px;
    align-items:start;
    padding:8px;
  }

  .invoice-item-number{
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:7px;
    background:#F2E7E2;
    color:#A65F4C;
    font-size:.72rem;
    font-weight:700;
  }

  .invoice-mobile-item-head>div{
    min-width:0;
  }

  .invoice-mobile-item-head strong{
    display:block;
    color:#3F3731!important;
    font-size:.88rem;
    font-weight:650!important;
  }

  .invoice-mobile-item-head small{
    display:block;
    margin-top:3px;
    color:#76685E;
    font-size:.73rem;
    line-height:1.3;
    overflow-wrap:anywhere;
  }

  .invoice-mobile-amount{
    white-space:nowrap;
    text-align:right;
    font-size:.82rem!important;
  }

  .invoice-mobile-item-meta{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid #E6DED6;
    background:#FBF9F6;
  }

  .invoice-mobile-item-meta span{
    min-width:0;
    padding:6px 7px;
    border-right:1px solid #E6DED6;
  }

  .invoice-mobile-item-meta span:last-child{
    border-right:0;
  }

  .invoice-mobile-item-meta small{
    display:block;
    color:#8A8079;
    font-size:.61rem;
    text-transform:uppercase;
  }

  .invoice-mobile-item-meta strong{
    display:block;
    margin-top:2px;
    color:#3F3731!important;
    font-size:.76rem;
    font-weight:600!important;
    overflow-wrap:anywhere;
  }

  .invoice-upi-section{
    grid-template-columns:1fr;
    gap:8px;
    margin:0 8px 8px;
    padding:9px;
  }

  .invoice-upi-section img{
    width:min(210px,72vw);
    height:auto;
    aspect-ratio:1;
    justify-self:center;
  }

  .invoice-upi-copy{
    text-align:center;
  }

  .invoice-upi-copy strong{
    font-size:.95rem;
  }

  .invoice-upi-copy small{
    font-size:.74rem;
  }

  .invoice-terms-section{
    margin:0 8px 8px;
    padding:9px 10px;
  }

  .invoice-terms-section ul{
    font-size:.76rem;
    line-height:1.42;
  }
}


/* =========================================================
   V2.2.5 — FLEXIBLE UPI AMOUNT + COMPACT PAYMENT LAYOUT
   ========================================================= */

.invoice-upi-section{
  margin-top:0;
}

@media(max-width:760px){
  .invoice-upi-section{
    margin-top:0;
  }
}


/* =========================================================
   V2.2.8 — ONE-PAGE SHARE PDF + CLEAN QR COPY
   ========================================================= */

.invoice-upi-copy{
  align-self:center;
}

.invoice-upi-copy small{
  display:none!important;
}

@media(max-width:760px){
  .invoice-upi-copy small{
    display:none!important;
  }
}


/* =========================================================
   V2.2.11 — PREMIUM BOUTIQUE INVOICE REFINEMENT
   ========================================================= */

.invoice-preview-sheet{
  border-radius:16px;
}

.invoice-preview-brand{
  border-radius:16px 16px 0 0;
}

.invoice-parties>div,
.invoice-mobile-item-card,
.invoice-summary-note,
.invoice-totals,
.invoice-payment-list,
.invoice-terms-section{
  border-radius:12px;
}

.invoice-upi-section{
  border-radius:14px;
}

.invoice-upi-section img{
  border-radius:8px;
  padding:8px;
  background:#fff;
  box-sizing:border-box;
}

.invoice-totals>div{
  min-height:31px;
  align-items:center;
}

.invoice-grand-total{
  background:#F4F1EC;
}

.invoice-summary-note{
  background:#FAF8F5;
}

.invoice-terms-section{
  background:#F4F1EC;
}

@media(max-width:760px){
  .invoice-preview-sheet{
    border-radius:14px;
  }

  .invoice-upi-section img{
    width:min(230px,78vw);
    padding:10px;
  }

  .invoice-mobile-item-card{
    border-radius:11px;
  }

  .invoice-summary-note,
  .invoice-totals,
  .invoice-terms-section{
    border-radius:11px;
  }
}


/* =========================================================
   V2.2.12 — A4 HTML/CSS MASTER INVOICE
   ========================================================= */
.invoice-share-note strong{
  color:#B66D57;
}


/* =========================================================
   V2.2.13 — A4 INVOICE DESIGN REVIEW
   ========================================================= */
.invoice-a4-review-actions{
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)!important;
}
.invoice-a4-review-actions .invoice-action-primary{
  grid-column:auto!important;
}
@media(max-width:390px){
  .invoice-a4-review-actions{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   V2.2.14 — READABILITY + SEPARATED PAYMENT CARDS
   ========================================================= */

/* Customer History → Payment entries: one payment = one card. */
.customer-payment-history-list{
  display:grid!important;
  gap:10px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}

.customer-payment-history-row.customer-payment-entry-card{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  overflow:hidden;
  border:1px solid #D8E1DE!important;
  border-radius:13px!important;
  background:#FFFFFF;
  box-shadow:0 2px 8px rgba(63,55,49,.025);
}

.customer-payment-history-row.customer-payment-entry-card>div{
  min-width:0;
  padding:10px 12px!important;
  border-right:0!important;
  border-bottom:1px solid #E5ECE9!important;
}

.customer-payment-history-row.customer-payment-entry-card>div:nth-child(odd){
  border-right:1px solid #E5ECE9!important;
}

.customer-payment-history-row.customer-payment-entry-card>div:nth-last-child(-n+2){
  border-bottom:0!important;
}

.customer-payment-history-row.customer-payment-entry-card span{
  font-size:.62rem;
}

.customer-payment-history-row.customer-payment-entry-card strong{
  font-size:.8rem;
}

.customer-payment-history-row.customer-payment-entry-card .customer-payment-number strong{
  font-size:1rem!important;
}

.customer-payment-history-row.customer-payment-entry-card small{
  margin-top:4px;
  font-size:.64rem;
  line-height:1.35;
}

/* Invoice modal Payment History: separate rounded payment cards. */
.invoice-payment-card-list{
  display:grid;
  gap:8px;
}

.invoice-payment-card{
  overflow:hidden;
  border:1px solid #DDD3C8;
  border-radius:11px;
  background:#fff;
}

.invoice-payment-card-top,
.invoice-payment-card-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
}

.invoice-payment-card-top{
  background:#FAF8F5;
  border-bottom:1px solid #E6DED6;
}

.invoice-payment-card-top>div,
.invoice-payment-card-meta>div{
  min-width:0;
  padding:8px 9px;
}

.invoice-payment-card-top>div:first-child,
.invoice-payment-card-meta>div:first-child{
  border-right:1px solid #E6DED6;
}

.invoice-payment-card span{
  display:block;
  color:#8A8079;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.invoice-payment-card strong{
  display:block;
  margin-top:3px;
  color:#3F3731!important;
  font-size:.82rem;
  font-weight:600!important;
  overflow-wrap:anywhere;
}

.invoice-payment-card-top>div:first-child strong{
  color:#4F8D68!important;
  font-size:.92rem;
}

@media(max-width:760px){
  .customer-payment-history-row.customer-payment-entry-card{
    grid-template-columns:1fr 1fr!important;
  }

  .customer-payment-history-row.customer-payment-entry-card>div{
    padding:11px 12px!important;
  }

  .customer-payment-history-row.customer-payment-entry-card span{
    font-size:.66rem;
  }

  .customer-payment-history-row.customer-payment-entry-card strong{
    font-size:.88rem;
  }

  .customer-payment-history-row.customer-payment-entry-card .customer-payment-number strong{
    font-size:1.05rem!important;
  }

  .invoice-payment-card span{
    font-size:.7rem;
  }

  .invoice-payment-card strong{
    font-size:.86rem;
  }
}

@media(max-width:340px){
  .customer-payment-history-row.customer-payment-entry-card{
    grid-template-columns:1fr 1fr!important;
  }
}


/* =========================================================
   V2.2.15 — MOBILE PAYMENT 2×2 LOCK + SINGLE-PAGE PRINT
   ========================================================= */

@media(max-width:760px){
  .customer-payment-history-row.customer-payment-entry-card{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    height:auto!important;
    min-height:0!important;
    align-items:stretch!important;
  }

  .customer-payment-history-row.customer-payment-entry-card .payment-entry-primary{
    grid-column:1!important;
    grid-row:1!important;
  }

  .customer-payment-history-row.customer-payment-entry-card .payment-entry-date{
    grid-column:2!important;
    grid-row:1!important;
  }

  .customer-payment-history-row.customer-payment-entry-card .payment-entry-mode{
    grid-column:1!important;
    grid-row:2!important;
  }

  .customer-payment-history-row.customer-payment-entry-card .payment-entry-stage{
    grid-column:2!important;
    grid-row:2!important;
  }

  .customer-payment-history-row.customer-payment-entry-card>div{
    min-height:0!important;
    height:auto!important;
    padding:10px 12px!important;
    align-self:stretch!important;
  }

  .customer-payment-history-row.customer-payment-entry-card .payment-entry-stage,
  .customer-payment-history-row.customer-payment-entry-card .payment-entry-mode{
    border-bottom:0!important;
  }

  .customer-payment-history-row.customer-payment-entry-card .payment-entry-mode{
    border-right:1px solid #E5ECE9!important;
  }

  .customer-payment-history-row.customer-payment-entry-card .payment-entry-stage{
    border-right:0!important;
  }

  .customer-payment-history-row.customer-payment-entry-card .payment-entry-primary small{
    display:block;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
  }
}


/* =========================================================
   V2.3.0 — CUSTOM "OTHER" GARMENT
   ========================================================= */

.custom-garment-entry{
  margin-top:2px;
  padding:13px;
  border:1px solid #D8CEC4;
  border-radius:13px;
  background:linear-gradient(180deg,#FAF8F5,#F4F1EC);
}

.custom-garment-entry-head{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-bottom:11px;
}

.custom-garment-entry-head>div{
  min-width:0;
}

.custom-garment-entry-head strong{
  display:block;
  color:#3F3731;
  font-size:.86rem;
  font-weight:650;
}

.custom-garment-entry-head small{
  display:block;
  margin-top:3px;
  color:#76685E;
  font-size:.7rem;
  line-height:1.35;
}

.custom-garment-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 8px;
  border-radius:999px;
  background:#B66D57;
  color:#fff;
  font-size:.58rem;
  font-weight:750;
  letter-spacing:.08em;
}

.custom-garment-grid{
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
}

.custom-garment-hint{
  margin-top:9px;
}

.custom-garment-hint>span{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  margin-right:7px;
  border-radius:50%;
  background:#E4ECE7;
  color:#4F8D68;
  font-weight:700;
  vertical-align:top;
}

.custom-garment-hint>div{
  display:inline-block;
  width:calc(100% - 34px);
  vertical-align:top;
}

.custom-garment-hint strong{
  display:block;
  color:#3F3731;
  font-size:.72rem;
}

.custom-garment-hint small{
  display:block;
  margin-top:2px;
  color:#76685E;
  font-size:.66rem;
  line-height:1.35;
}

.custom-garment-setup-warning{
  padding:9px 10px;
  border-radius:9px;
  background:#F7E9E5;
  color:#8E4F42;
  font-size:.7rem;
  line-height:1.35;
}

.desk-no-measurements{
  border:1px dashed #CFC3B5;
  border-radius:12px;
  background:#FAF8F5;
}

@media(max-width:760px){
  .custom-garment-grid{
    grid-template-columns:1fr;
  }

  .custom-garment-entry{
    padding:11px;
  }

  .custom-garment-entry-head strong{
    font-size:.9rem;
  }

  .custom-garment-entry-head small,
  .custom-garment-hint small{
    font-size:.72rem;
  }
}


/* =========================================================
   V2.3.1 — NEW CUSTOMER SPEED / SAVE FEEDBACK
   ========================================================= */
#modalSaveBtn:disabled{
  cursor:wait;
  opacity:.72;
}


/* =========================================================
   V2.3.3 — DUPLICATE CUSTOMER PHONE PROTECTION
   ========================================================= */
.duplicate-customer-hint{
  display:block;
  margin-top:6px;
  padding:7px 9px;
  border-radius:8px;
  background:#F7E9E5;
  color:#8E4F42;
  font-size:.68rem;
  line-height:1.35;
}

.duplicate-customer-hint strong{
  font-weight:650;
}

input.field-warning{
  border-color:#B66D57!important;
  box-shadow:0 0 0 2px rgba(182,109,87,.08)!important;
}

@media(max-width:760px){
  .duplicate-customer-hint{
    padding:8px 9px;
    font-size:.72rem;
  }
}


/* =========================================================
   V2.3.4 — "OTHER" IS A TRIGGER, NEVER A GARMENT
   ========================================================= */

.order-custom-garment-setup{
  margin:10px 0 2px;
  padding:11px 12px;
  border:1px solid #D8CEC4;
  border-radius:11px;
  background:#FAF8F5;
}

.order-custom-garment-note{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-bottom:9px;
}

.order-custom-garment-note>div{
  min-width:0;
}

.order-custom-garment-note strong{
  display:block;
  color:#3F3731;
  font-size:.78rem;
  font-weight:650;
}

.order-custom-garment-note small{
  display:block;
  margin-top:2px;
  color:#76685E;
  font-size:.66rem;
  line-height:1.35;
}

.order-custom-garment-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:10px;
}

.custom-garment-desk-prompt{
  border:1px dashed #CFC3B5;
  border-radius:12px;
  background:#FAF8F5;
}

.measurement-custom-garment{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:10px;
  padding:10px;
  border:1px solid #D8CEC4;
  border-radius:11px;
  background:#FAF8F5;
}

.custom-garment-measurement-prompt{
  border:1px dashed #CFC3B5;
}

@media(max-width:760px){
  .order-custom-garment-grid,
  .measurement-custom-garment{
    grid-template-columns:1fr;
  }

  .order-custom-garment-setup{
    padding:10px;
  }

  .order-custom-garment-note strong{
    font-size:.82rem;
  }

  .order-custom-garment-note small{
    font-size:.7rem;
  }
}


/* =========================================================
   V2.3.5 — EDIT DUPLICATE PHONE + MOBILE CUSTOMER FIT
   ========================================================= */

/* Same warning style for Edit Customer. */
#ecDuplicateCustomerHint{
  display:block;
}




/* =========================================================
   V2.3.6 — CUSTOMERS SCREEN REPAIR + LIVE TOTALS
   ========================================================= */

.customer-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-bottom:11px;
}

.customer-summary-card{
  min-width:0;
  padding:11px 12px;
  border:1px solid #E5D9D0;
  border-radius:13px;
  background:#FFFDFB;
  box-shadow:0 4px 14px rgba(61,41,51,.025);
}

.customer-summary-card span{
  display:block;
  color:#8A7770;
  font-size:.66rem;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.055em;
}

.customer-summary-card strong{
  display:block;
  margin-top:5px;
  color:#3F3731;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.22rem;
  line-height:1;
  font-weight:600;
}

.customer-directory-panel{
  border-radius:16px!important;
  overflow:hidden!important;
}

.customer-directory-panel #customerSearch{
  width:100%;
  max-width:none;
  box-sizing:border-box;
  border-left:0;
  border-right:0;
  border-top:0;
  border-radius:0;
}

.customer-directory-panel #customerList{
  width:100%;
  min-width:0;
}

@media(max-width:760px){
  /*
    The parent content has mobile side padding already.
    Expand only into that padding — never use viewport positioning.
  */
  #customersScreen{
    width:calc(100% + 12px)!important;
    max-width:none!important;
    margin-left:-6px!important;
    margin-right:-6px!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  #customersScreen .screen-head{
    width:100%!important;
    padding:0 4px!important;
    box-sizing:border-box!important;
  }

  #customersScreen .screen-head>div{
    min-width:0!important;
  }

  #customersScreen .screen-head h1,
  #customersScreen .screen-head .muted{
    max-width:100%!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  #customersScreen .screen-head>button.primary{
    width:100%!important;
    border-radius:13px!important;
  }

  #customersScreen .customer-summary-grid{
    width:100%!important;
    padding:0 4px!important;
    box-sizing:border-box!important;
    gap:6px!important;
    margin-bottom:8px!important;
  }

  #customersScreen .customer-summary-card{
    padding:9px 8px!important;
    border-radius:12px!important;
  }

  #customersScreen .customer-summary-card span{
    font-size:.56rem!important;
    letter-spacing:.035em!important;
    white-space:normal!important;
  }

  #customersScreen .customer-summary-card strong{
    margin-top:4px!important;
    font-size:1.05rem!important;
  }

  #customersScreen .customer-directory-panel{
    width:calc(100% - 8px)!important;
    max-width:none!important;
    margin:0 4px!important;
    border-radius:15px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  #customersScreen #customerSearch{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    box-sizing:border-box!important;
    padding-left:13px!important;
    padding-right:13px!important;
  }

  #customersScreen #customerList,
  #customersScreen .customer-card-row{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  #customersScreen .customer-card-row{
    border-radius:0!important;
  }

  #customersScreen .customer-card-row:last-child{
    border-bottom-left-radius:15px!important;
    border-bottom-right-radius:15px!important;
  }

  #customersScreen .customer-card-info,
  #customersScreen .customer-card-actions{
    min-width:0!important;
    max-width:100%!important;
  }

  #customersScreen .customer-card-actions{
    grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr) 48px!important;
  }
}

@media(max-width:360px){
  #customersScreen{
    width:calc(100% + 8px)!important;
    margin-left:-4px!important;
    margin-right:-4px!important;
  }

  #customersScreen .customer-directory-panel{
    width:calc(100% - 6px)!important;
    margin-left:3px!important;
    margin-right:3px!important;
  }

  #customersScreen .customer-summary-grid{
    padding-left:3px!important;
    padding-right:3px!important;
  }

  #customersScreen .customer-card-actions{
    grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr) 44px!important;
    gap:5px!important;
  }
}

/* V2.3.7 phone actions */
button.phone-call-link.phone-action-link{appearance:none;-webkit-appearance:none;border:0;padding:0;margin:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;text-align:left;border-bottom:1px dotted currentColor;cursor:pointer}.phone-action-dialog{width:min(430px,calc(100% - 24px));max-width:430px;padding:0;border:0;border-radius:20px;background:transparent;overflow:visible}.phone-action-dialog::backdrop{background:rgba(24,22,20,.56);backdrop-filter:blur(2px)}.phone-action-sheet{overflow:hidden;border:1px solid #D9CFC5;border-radius:20px;background:#FFFDFB;box-shadow:0 24px 70px rgba(34,29,25,.24)}.phone-action-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 16px 13px;border-bottom:1px solid #E7DED6;background:#F7F3EE}.phone-action-head>div{min-width:0}.phone-action-head strong{display:block;margin-top:3px;color:#3F3731;font-size:1rem;font-weight:650;overflow-wrap:anywhere}.phone-action-close{flex:0 0 38px;width:38px;height:38px;border:0;border-radius:50%;background:#EFE7E0;color:#6C5F57;font-size:1.45rem}.phone-action-buttons{display:grid}.phone-action-option{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:11px;width:100%;min-height:64px;padding:12px 15px;border:0;border-bottom:1px solid #EEE6DF;background:#FFFDFB;text-align:left}.phone-action-option:active{background:#F7F3EE}.phone-action-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:#EEF1F4;color:#5E6E80;font-size:.82rem;font-weight:750}.phone-action-option strong{display:block;color:#3F3731;font-size:.88rem;font-weight:650}.phone-action-option small{display:block;margin-top:2px;color:#80746C;font-size:.68rem}.phone-action-cancel{width:calc(100% - 24px);margin:12px;padding:11px 14px;border:1px solid #D8CEC4;border-radius:12px;background:#F7F3EE;color:#3F3731;font-weight:650}@media(max-width:760px){.phone-action-dialog{width:calc(100% - 18px);max-width:none;margin:auto 9px 10px}.phone-action-option{min-height:68px;padding:12px 14px}.phone-action-option strong{font-size:.94rem}.phone-action-option small{font-size:.72rem}}


/* =========================================================
   V2.3.8 — SETTINGS V1 FOUNDATION
   ========================================================= */
.topbar-actions{display:flex;align-items:center;gap:8px}
.settings-trigger{display:inline-flex;align-items:center;gap:6px;background:#FFFDFB!important}
.settings-trigger span{font-size:.76rem;font-weight:650}
.settings-screen{max-width:900px;margin:0 auto}
.settings-screen-head{align-items:center}
.settings-back-btn{white-space:nowrap}
.settings-migration-note{display:flex;gap:8px;flex-direction:column;padding:12px 14px;margin-bottom:12px;border:1px solid #E3B9A8;border-radius:14px;background:#FBF1EC;color:#70483D}
.settings-migration-note strong{font-size:.84rem}.settings-migration-note span{font-size:.72rem;line-height:1.4}
.settings-account-strip{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 15px;margin-bottom:15px;border:1px solid #DDD3C9;border-radius:15px;background:#FFFDFB}
.settings-account-strip>div{min-width:0}.settings-account-strip span{display:block;color:#887B72;font-size:.66rem}.settings-account-strip strong{display:block;margin-top:3px;color:#3F3731;font-size:.88rem;overflow-wrap:anywhere}
.settings-role-pill{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto;padding:6px 9px;border-radius:999px;background:#EEF1F3;color:#5E6E80!important;font-size:.66rem!important;font-weight:700;white-space:nowrap}
.settings-group{margin:0 0 15px}.settings-group-label{display:block;margin:0 0 6px 4px;color:#8B7D74;font-size:.62rem;font-weight:750;letter-spacing:.11em}
.settings-card-stack{overflow:hidden;border:1px solid #DED4CB;border-radius:16px;background:#FFFDFB}
.settings-card{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto 18px;align-items:center;gap:10px;padding:12px 13px;border:0;border-bottom:1px solid #EEE6DE;background:#FFFDFB;text-align:left;cursor:pointer;color:#3F3731}
.settings-card:last-child{border-bottom:0}.settings-card:hover{background:#FAF7F3}.settings-card-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:#EEF1F3;color:#637183;font-size:1rem}
.settings-card-copy{min-width:0}.settings-card-copy strong{display:block;font-size:.82rem;font-weight:680}.settings-card-copy small{display:block;margin-top:2px;color:#85786F;font-size:.67rem;line-height:1.35}
.settings-card-meta{max-width:170px;color:#76685E;font-size:.64rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.settings-card-arrow{color:#A6978C;font-size:1.25rem}
.settings-form{display:grid;gap:13px}.settings-readonly-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid #E7DED6;border-radius:12px;background:#FAF8F5}.settings-readonly-row span{color:#84766D;font-size:.72rem}.settings-readonly-row strong{font-size:.78rem;color:#3F3731;text-align:right;overflow-wrap:anywhere}
.settings-help{display:block;color:#85786F;font-size:.68rem;line-height:1.4}.settings-subhead{display:block;color:#76685E;font-size:.66rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.settings-info-box{display:grid;gap:4px;padding:11px 12px;border:1px solid #DED4CB;border-radius:12px;background:#F8F5F1}.settings-info-box strong{font-size:.76rem;color:#3F3731}.settings-info-box span{font-size:.68rem;line-height:1.42;color:#7D7067}
.settings-team-list,.settings-garment-list{display:grid;border:1px solid #E4DAD2;border-radius:13px;overflow:hidden}.settings-team-row,.settings-garment-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;border-bottom:1px solid #EEE6DF;background:#FFFDFB}.settings-team-row:last-child,.settings-garment-row:last-child{border-bottom:0}.settings-team-row>div,.settings-garment-row>div{min-width:0}.settings-team-row strong,.settings-garment-row strong{display:block;font-size:.76rem;color:#3F3731}.settings-team-row small,.settings-garment-row small{display:block;margin-top:2px;font-size:.64rem;color:#85786F;overflow-wrap:anywhere}.team-role-select{width:auto;max-width:180px;padding:8px 9px;font-size:.7rem}.settings-mini-btn{padding:7px 9px!important;font-size:.66rem}
.settings-builtins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.settings-builtins span{display:flex;justify-content:space-between;gap:8px;padding:9px 10px;border:1px solid #E7DED6;border-radius:11px;background:#FAF8F5}.settings-builtins strong{font-size:.7rem}.settings-builtins small{font-size:.62rem;color:#7A6E66}.settings-add-garment{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:9px}.settings-empty-small{padding:15px;text-align:center;color:#887A71;font-size:.7rem}
.settings-invoice-preview{padding:14px;border-radius:14px;background:#3F3731;color:#FFFDFB;text-align:center}.settings-invoice-preview span{display:block;font-size:.6rem;letter-spacing:.12em;color:#D7CCC3}.settings-invoice-preview strong{display:block;margin-top:5px;font-family:Georgia,'Times New Roman',serif;font-size:1.18rem;font-weight:600;letter-spacing:.025em}.subscription-status-card{padding:15px;border:1px solid #D9CFC6;border-radius:14px;background:#FFFDFB}.subscription-status-card span{display:block;color:#887A71;font-size:.61rem;letter-spacing:.1em}.subscription-status-card strong{display:block;margin-top:5px;font-size:1.05rem;color:#3F3731}.subscription-status-card small{display:block;margin-top:4px;color:#776B63;font-size:.7rem;line-height:1.4}
.settings-switch-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 12px;border:1px solid #E4DAD2;border-radius:12px;background:#FAF8F5}.settings-switch-row>span{display:block}.settings-switch-row strong{display:block;font-size:.76rem}.settings-switch-row small{display:block;margin-top:2px;font-size:.65rem;color:#85786F}.settings-switch-row input{width:20px;height:20px;flex:0 0 20px}
.fitflow-compact .panel,.fitflow-compact .settings-card-stack{border-radius:13px}.fitflow-compact .list-row{padding-top:10px;padding-bottom:10px}.fitflow-compact .settings-card{padding-top:9px;padding-bottom:9px}
@media(max-width:760px){
  .topbar-actions{gap:5px}.settings-trigger,.quiet-logout{padding:8px 9px!important}.settings-trigger span{display:none}
  .settings-screen{width:100%;max-width:none}.settings-screen-head{align-items:flex-start}.settings-screen-head .settings-back-btn{width:auto!important}
  .settings-card{grid-template-columns:38px minmax(0,1fr) 16px;padding:11px 10px}.settings-card-meta{display:none}.settings-card-copy strong{font-size:.8rem}.settings-card-copy small{font-size:.66rem}
  .settings-builtins{grid-template-columns:1fr}.settings-add-garment{grid-template-columns:1fr}.settings-team-row{align-items:flex-start;flex-direction:column}.team-role-select{width:100%;max-width:none}
}


/* V2.3.9 focused correction pass */
.settings-invoice-preview.light{
  background:#F7F3EE!important;
  color:#3F3731!important;
  border:1px solid #D9CFC6;
  padding:11px 12px!important;
}
.settings-invoice-preview.light span{color:#8A7770!important}
.settings-invoice-preview.light strong{color:#4F5D68!important;font-size:1.12rem!important}
.settings-info-box.compact{padding:10px 11px!important;min-height:0!important}
.settings-info-box.compact span{margin-top:3px!important;line-height:1.35!important}
.settings-preferences-form{gap:10px!important}
.settings-preferences-form label{margin:0!important}
.settings-preferences-form select{min-height:48px!important;height:auto!important;padding-top:10px!important;padding-bottom:10px!important}
.settings-preferences-form .settings-help{margin-top:4px!important;font-size:.66rem!important;line-height:1.35!important}
/* Old compact-display mode is retired. */
.fitflow-compact .panel,.fitflow-compact .settings-card-stack,.fitflow-compact .list-row,.fitflow-compact .settings-card{all:revert-layer}


/* =========================================================
   V2.3.11 — CONTACT PICKER + RELIABLE COPY
   ========================================================= */

.customer-contact-picker-row{
  display:grid;
  gap:5px;
}

.contact-picker-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 13px;
  border:1px solid #CFC3B5;
  border-radius:12px;
  background:#F8F5F1;
  color:#3F3731;
  text-align:left;
}

.contact-picker-btn>span:first-child{
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#EEF1F4;
  font-size:1.05rem;
}

.contact-picker-btn>span:last-child{
  min-width:0;
}

.contact-picker-btn strong{
  display:block;
  font-size:.78rem;
  font-weight:650;
}

.contact-picker-btn small,
.contact-picker-help{
  display:block;
  color:#80746C;
  font-size:.66rem;
  line-height:1.35;
}

.contact-picker-btn small{
  margin-top:2px;
}

.contact-picker-help{
  padding-left:2px;
}

.contact-picker-btn:active{
  background:#F1ECE6;
}

.contact-picker-btn.contact-picker-limited{
  border-style:dashed;
}

.manual-copy-dialog{
  width:min(430px,calc(100% - 24px));
  max-width:430px;
  padding:0;
  border:0;
  border-radius:20px;
  background:transparent;
}

.manual-copy-dialog::backdrop{
  background:rgba(24,22,20,.56);
  backdrop-filter:blur(2px);
}

.manual-copy-sheet{
  padding:15px;
  border:1px solid #D9CFC5;
  border-radius:20px;
  background:#FFFDFB;
  box-shadow:0 24px 70px rgba(34,29,25,.24);
}

.manual-copy-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

.manual-copy-head strong{
  display:block;
  margin-top:2px;
  color:#3F3731;
  font-size:1rem;
}

.manual-copy-close{
  flex:0 0 38px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#EFE7E0;
  color:#6C5F57;
  font-size:1.45rem;
}

.manual-copy-sheet p{
  margin:0 0 10px;
  color:#76685E;
  font-size:.75rem;
  line-height:1.45;
}

#manualCopyValue{
  width:100%;
  box-sizing:border-box;
  padding:12px;
  border:1px solid #CFC3B5;
  border-radius:11px;
  background:#FFF;
  color:#3F3731;
  font-size:1rem;
}

.manual-copy-select,
.manual-copy-cancel{
  width:100%;
  margin-top:9px;
  padding:11px 13px;
  border-radius:11px;
  font-weight:650;
}

.manual-copy-select{
  border:0;
  background:#738091;
  color:#FFF;
}

.manual-copy-cancel{
  border:1px solid #CFC3B5;
  background:#F8F5F1;
  color:#3F3731;
}

@media(max-width:760px){
  .contact-picker-btn{
    padding:10px 11px;
  }

  .contact-picker-btn strong{
    font-size:.82rem;
  }

  .contact-picker-btn small,
  .contact-picker-help{
    font-size:.7rem;
  }

  .manual-copy-dialog{
    width:calc(100% - 18px);
    max-width:none;
    margin:auto 9px 10px;
  }
}


/* =========================================================
   V2.3.13 — GARMENT READY CONFIRMATION + WHATSAPP DRAFT
   ========================================================= */

.garment-ready-dialog{
  width:min(430px,calc(100% - 24px));
  max-width:430px;
  padding:0;
  border:0;
  border-radius:20px;
  background:transparent;
}

.garment-ready-dialog::backdrop{
  background:rgba(31,27,24,.5);
  backdrop-filter:blur(2px);
}

.garment-ready-card{
  padding:18px;
  border:1px solid #DDD2C8;
  border-radius:20px;
  background:#FFFDFB;
  box-shadow:0 24px 70px rgba(34,29,25,.22);
}

.garment-ready-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin-bottom:10px;
  border-radius:12px;
  background:#E9F1EC;
  color:#557260;
  font-size:1.1rem;
  font-weight:800;
}

.garment-ready-copy h3{
  margin:4px 0 7px;
  color:#3F3731;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.18rem;
  font-weight:600;
}

.garment-ready-copy p{
  margin:0;
  color:#76685E;
  font-size:.8rem;
  line-height:1.48;
}

.garment-ready-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:16px;
}

.garment-ready-actions button{
  min-height:44px;
  padding:10px 11px;
  border-radius:11px;
  font-size:.75rem;
  font-weight:650;
}

.garment-ready-no{
  border:1px solid #D8CEC4;
  background:#F8F5F1;
  color:#5E534C;
}

.garment-ready-yes{
  border:0;
  background:#738091;
  color:#FFF;
}

@media(max-width:760px){
  .garment-ready-dialog{
    width:calc(100% - 18px);
    max-width:none;
    margin:auto 9px 12px;
  }

  .garment-ready-card{
    padding:16px;
  }

  .garment-ready-copy h3{
    font-size:1.12rem;
  }

  .garment-ready-copy p{
    font-size:.82rem;
  }

  .garment-ready-actions{
    grid-template-columns:1fr;
  }

  .garment-ready-actions button{
    min-height:46px;
    font-size:.8rem;
  }

  .garment-ready-yes{
    order:-1;
  }
}


/* =========================================================
   V2.3.14 — FULL ORDER READY PROMPT
   ========================================================= */

.fully-ready-order-dialog{
  width:min(450px,calc(100% - 24px));
  max-width:450px;
  padding:0;
  border:0;
  border-radius:20px;
  background:transparent;
}

.fully-ready-order-dialog::backdrop{
  background:rgba(31,27,24,.5);
  backdrop-filter:blur(2px);
}

.fully-ready-order-card{
  padding:18px;
  border:1px solid #D8CEC4;
  border-radius:20px;
  background:#FFFDFB;
  box-shadow:0 24px 70px rgba(34,29,25,.22);
}

.fully-ready-order-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  margin-bottom:11px;
  border-radius:13px;
  background:#E7F0EA;
  color:#557260;
  font-size:1.15rem;
  font-weight:800;
}

.fully-ready-order-copy h3{
  margin:4px 0 7px;
  color:#3F3731;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.2rem;
  font-weight:600;
}

.fully-ready-order-copy p{
  margin:0;
  color:#76685E;
  font-size:.8rem;
  line-height:1.48;
}

.fully-ready-order-actions{
  display:grid;
  grid-template-columns:.8fr 1.4fr;
  gap:8px;
  margin-top:17px;
}

.fully-ready-order-actions button{
  min-height:45px;
  padding:10px 12px;
  border-radius:11px;
  font-size:.75rem;
  font-weight:650;
}

.fully-ready-order-later{
  border:1px solid #D8CEC4;
  background:#F8F5F1;
  color:#5E534C;
}

.fully-ready-order-invoice{
  border:0;
  background:#738091;
  color:#FFF;
}

@media(max-width:760px){
  .fully-ready-order-dialog{
    width:calc(100% - 18px);
    max-width:none;
    margin:auto 9px 12px;
  }

  .fully-ready-order-card{
    padding:16px;
  }

  .fully-ready-order-copy h3{
    font-size:1.14rem;
  }

  .fully-ready-order-copy p{
    font-size:.82rem;
  }

  .fully-ready-order-actions{
    grid-template-columns:1fr;
  }

  .fully-ready-order-actions button{
    min-height:47px;
    font-size:.8rem;
  }

  .fully-ready-order-invoice{
    order:-1;
  }
}


/* =========================================================
   V2.3.15 — READY MESSAGE PERMISSIONS
   ========================================================= */

.ready-message-state{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  margin-top:7px;
  font-size:.62rem;
  line-height:1.3;
}

.ready-message-dot{
  flex:0 0 17px;
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:.58rem;
  font-weight:800;
}

.ready-message-state.pending{
  color:#8C634F;
}

.ready-message-state.pending .ready-message-dot{
  background:#F4E8E1;
  color:#A45F47;
}

.ready-message-state.prepared{
  color:#557260;
}

.ready-message-state.prepared .ready-message-dot{
  background:#E7F0EA;
  color:#557260;
}

.ready-message-btn{
  width:100%;
  margin-top:2px;
  padding:6px 8px;
  border:1px solid #CFC3B5;
  border-radius:8px;
  background:#F8F5F1;
  color:#4F4540;
  font-size:.62rem;
  font-weight:650;
}

.ready-message-btn:active{
  background:#EEE8E2;
}

.ready-message-state.staff{
  max-width:190px;
}

@media(max-width:760px){
  .ready-message-state{
    font-size:.69rem;
  }

  .ready-message-btn{
    min-height:36px;
    padding:7px 9px;
    font-size:.7rem;
  }

  .ready-message-state.staff{
    max-width:none;
  }
}


/* =========================================================
   V2.3.17 — INVOICE QR CONTEXT / PREPARE RECEIPT CORRECTION
   ========================================================= */

.invoice-qr-context{
  display:flex;
  align-items:center;
  gap:9px;
  margin:10px 0 12px;
  padding:10px 11px;
  border:1px solid #DDD3C9;
  border-radius:12px;
  background:#FAF8F5;
  color:#5E534C;
}

.invoice-qr-context-icon{
  flex:0 0 28px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#EEE7E0;
  color:#76685E;
  font-size:.72rem;
  font-weight:800;
}

.invoice-qr-context.paid,
.invoice-qr-context.overpaid{
  border-color:#D6E1D9;
  background:#F3F7F4;
}

.invoice-qr-context.paid .invoice-qr-context-icon{
  background:#E2EEE6;
  color:#557260;
}

.invoice-qr-context-copy{
  min-width:0;
  flex:1;
}

.invoice-qr-context-copy strong{
  display:block;
  color:#3F3731;
  font-size:.74rem;
  font-weight:650;
}

.invoice-qr-context-copy small{
  display:block;
  margin-top:2px;
  color:#76685E;
  font-size:.65rem;
  line-height:1.38;
}

.invoice-qr-pricing-btn{
  flex:0 0 auto;
  min-height:34px;
  padding:7px 10px;
  font-size:.66rem;
}

.invoice-qr-ready-strip{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:9px;
  padding:8px 10px;
  border:1px solid #D6E1D9;
  border-radius:10px;
  background:#F3F7F4;
  color:#557260;
  font-size:.68rem;
}

.invoice-qr-ready-strip span{
  font-weight:800;
}

.invoice-qr-ready-strip strong{
  font-weight:650;
}

/* A4 print document classes are embedded inside invoicePrintDocument. */


/* =========================================================
   V2.3.18 — SETTINGS LANGUAGE + COMPACT DENSITY
   Settings only. No global FitFlow layout changes.
   ========================================================= */

.settings-screen .screen-head{
  margin-bottom:11px;
}

.settings-screen-head h1{
  line-height:1.05;
}

.settings-screen-head .muted{
  margin-top:4px;
  line-height:1.35;
}

.settings-account-strip{
  gap:9px;
  padding:10px 12px;
  margin-bottom:9px;
  border-radius:13px;
}

.settings-account-strip strong{
  margin-top:2px;
  font-size:.84rem;
}

.settings-role-pill{
  padding:5px 8px;
  font-size:.63rem!important;
}

.settings-group{
  margin:0 0 9px;
}

.settings-group-label{
  margin:0 0 4px 3px;
  font-size:.59rem;
  letter-spacing:.1em;
}

.settings-card-stack{
  border-radius:13px;
}

.settings-card{
  grid-template-columns:35px minmax(0,1fr) auto 15px;
  gap:8px;
  padding:9px 11px;
}

.settings-card-icon{
  width:32px;
  height:32px;
  border-radius:9px;
  font-size:.91rem;
}

.settings-card-copy strong{
  font-size:.78rem;
}

.settings-card-copy small{
  margin-top:1px;
  font-size:.64rem;
  line-height:1.28;
}

.settings-card-meta{
  max-width:145px;
  font-size:.61rem;
}

.settings-card-arrow{
  font-size:1.1rem;
}

.settings-migration-note{
  padding:9px 11px;
  margin-bottom:8px;
  border-radius:12px;
}

@media(max-width:760px){
  .settings-screen .screen-head{
    margin-bottom:8px;
  }

  .settings-screen-head{
    gap:8px;
  }

  .settings-screen-head .muted{
    max-width:265px;
    font-size:.74rem;
  }

  .settings-back-btn{
    padding:7px 9px;
    min-height:34px;
  }

  .settings-account-strip{
    padding:9px 10px;
    margin-bottom:8px;
  }

  .settings-account-strip strong{
    font-size:.8rem;
  }

  .settings-group{
    margin-bottom:8px;
  }

  .settings-group-label{
    margin-bottom:3px;
    font-size:.57rem;
  }

  .settings-card{
    grid-template-columns:32px minmax(0,1fr) 14px;
    gap:8px;
    padding:8px 9px;
  }

  .settings-card-icon{
    width:30px;
    height:30px;
    font-size:.86rem;
  }

  .settings-card-copy strong{
    font-size:.77rem;
  }

  .settings-card-copy small{
    font-size:.63rem;
    line-height:1.25;
  }

  .settings-card-meta{
    display:none;
  }

  .settings-card-arrow{
    font-size:1rem;
  }
}


/* =========================================================
   V2.3.19 — BOUTIQUE PROFILE
   ========================================================= */

.boutique-profile-form{
  gap:11px;
}

.boutique-profile-logo-section{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:13px;
  align-items:center;
  padding:11px;
  border:1px solid #DED4CB;
  border-radius:14px;
  background:#FAF8F5;
}

.boutique-profile-logo-preview{
  width:92px;
  height:92px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid #D9CEC4;
  border-radius:17px;
  background:#FFFDFB;
  color:#637183;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.55rem;
  font-weight:700;
}

.boutique-profile-logo-preview img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

.boutique-profile-logo-copy{
  min-width:0;
}

.boutique-profile-logo-copy>strong{
  display:block;
  margin-top:3px;
  color:#3F3731;
  font-size:.78rem;
}

.boutique-profile-logo-copy>small{
  display:block;
  margin-top:3px;
  color:#80736B;
  font-size:.65rem;
  line-height:1.35;
}

.boutique-profile-logo-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:9px;
}

.boutique-logo-upload-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.boutique-logo-upload-btn input{
  display:none;
}

.boutique-profile-fields{
  gap:10px;
}

.boutique-profile-document-note{
  margin-top:0;
}

.invoice-brand-mark{
  overflow:hidden;
}

.invoice-brand-mark.has-logo{
  background:#FFFDFB;
  border:1px solid #D8CEC4;
}

.invoice-brand-mark img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

.invoice-brand-descriptor,
.invoice-brand-contact{
  display:block;
  color:#85786F;
  font-size:.61rem;
  line-height:1.25;
}

.invoice-brand-descriptor{
  margin-top:2px;
}

.invoice-brand-contact{
  margin-top:2px;
  max-width:330px;
}

@media(max-width:760px){
  .boutique-profile-logo-section{
    grid-template-columns:76px minmax(0,1fr);
    gap:10px;
    padding:9px;
  }

  .boutique-profile-logo-preview{
    width:76px;
    height:76px;
    border-radius:14px;
    font-size:1.3rem;
  }

  .boutique-profile-logo-copy>strong{
    font-size:.76rem;
  }

  .boutique-profile-logo-copy>small{
    font-size:.68rem;
  }

  .boutique-profile-logo-actions{
    gap:5px;
    margin-top:7px;
  }

  .boutique-profile-logo-actions .soft-btn,
  .boutique-profile-logo-actions .ghost{
    min-height:36px;
    padding:7px 9px;
    font-size:.69rem;
  }

  .boutique-profile-fields{
    gap:9px;
  }

  .invoice-brand-descriptor,
  .invoice-brand-contact{
    font-size:.58rem;
  }
}


/* =========================================================
   V2.3.20 — TEAM & ACCESS + STRICT PHONE ENTRY
   ========================================================= */

.access-hidden{
  display:none!important;
}

.team-access-settings{
  display:grid;
  gap:11px;
}

.team-access-principle{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:9px;
  align-items:start;
  padding:10px 11px;
  border:1px solid #D9D1C8;
  border-radius:13px;
  background:#F8F5F1;
}

.team-access-lock{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#EEF1F3;
  color:#637183;
  font-weight:800;
}

.team-access-principle strong{
  display:block;
  color:#3F3731;
  font-size:.77rem;
}

.team-access-principle p{
  margin:3px 0 0;
  color:#7D7067;
  font-size:.67rem;
  line-height:1.38;
}

.team-access-member-list{
  margin-top:5px;
}

.team-add-card{
  padding:10px 11px;
  border:1px solid #DED4CB;
  border-radius:13px;
  background:#FFFDFB;
}

.team-add-fields{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(180px,.85fr);
  gap:8px;
  margin-top:6px;
}

.team-add-fields label{
  display:grid;
  gap:5px;
  min-width:0;
  color:#6E625C;
  font-size:.68rem;
  font-weight:650;
}

.team-add-fields input,
.team-add-fields select{
  width:100%;
  min-width:0;
  min-height:38px;
  padding:7px 9px;
  border:1px solid #DCCFC5;
  border-radius:11px;
  background:#FFFDFB;
  color:#3F4D4E;
  font:inherit;
  font-size:.72rem;
}

.team-add-action-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
}

.team-add-action-row small{
  max-width:620px;
  color:#85786F;
  font-size:.63rem;
  line-height:1.38;
}

.team-add-btn{
  flex:0 0 auto;
  white-space:nowrap;
}

.team-pin-result{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 11px;
  border:1px solid #BFD6C9;
  border-radius:13px;
  background:#F1F8F4;
}

.team-pin-result>div:first-child{min-width:0}

.team-pin-result strong{
  display:block;
  margin-top:3px;
  color:#334A40;
  font-size:.78rem;
}

.team-pin-result small{
  display:block;
  margin-top:3px;
  max-width:620px;
  color:#65756E;
  font-size:.64rem;
  line-height:1.38;
}

.team-pin-code-row{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}

.team-pin-code-row code{
  min-width:88px;
  padding:8px 10px;
  border:1px dashed #9EBEAE;
  border-radius:10px;
  background:#FFF;
  color:#2F5446;
  font-size:1rem;
  font-weight:750;
  letter-spacing:.12em;
  text-align:center;
}

.team-access-member-row.is-disabled{
  opacity:.62;
}

.team-access-member-row{
  align-items:center;
}

.team-access-member-copy{
  min-width:0;
}

.team-access-member-copy strong,
.team-access-member-copy small,
.team-access-member-copy em{
  display:block;
}

.team-access-member-copy strong{
  color:#3F3731;
  font-size:.76rem;
}

.team-access-member-copy small{
  margin-top:2px;
  color:#85786F;
  font-size:.64rem;
  overflow-wrap:anywhere;
}

.team-access-member-copy em{
  margin-top:3px;
  color:#637183;
  font-size:.61rem;
  font-style:normal;
}

.team-role-select{
  width:min(205px,44vw);
  min-height:38px;
  padding:7px 9px;
  font-size:.7rem;
}

.team-access-matrix-section{
  min-width:0;
}

.team-access-matrix-wrap{
  margin-top:5px;
  overflow-x:auto;
  border:1px solid #DED4CB;
  border-radius:12px;
  background:#FFFDFB;
}

.team-access-matrix{
  width:100%;
  min-width:590px;
  border-collapse:collapse;
}

.team-access-matrix th,
.team-access-matrix td{
  padding:7px 8px;
  border-bottom:1px solid #EEE6DE;
  text-align:center;
  font-size:.64rem;
}

.team-access-matrix th:first-child,
.team-access-matrix td:first-child{
  text-align:left;
}

.team-access-matrix th{
  background:#F4F1EC;
  color:#76685E;
  font-weight:700;
}

.team-access-matrix td:first-child{
  color:#4F4540;
  font-weight:600;
}

.team-access-matrix tbody tr:last-child td{
  border-bottom:0;
}

.team-permission-yes{
  display:inline-grid;
  place-items:center;
  width:20px;
  height:20px;
  margin:auto;
  border-radius:50%;
  background:#E7F0EA;
  color:#557260;
  font-weight:800;
}

.team-permission-no{
  color:#AA9D94;
  font-weight:800;
}

/* Dynamic modals and lists rebuild often. Role restrictions use
   .access-hidden rather than changing the base component layout. */

@media(max-width:760px){
  .team-access-settings{
    gap:9px;
  }

  .team-access-principle{
    grid-template-columns:34px minmax(0,1fr);
    padding:9px;
  }

  .team-access-lock{
    width:31px;
    height:31px;
  }

  .team-access-principle strong{
    font-size:.75rem;
  }

  .team-access-principle p{
    font-size:.66rem;
  }

  .team-access-member-row{
    align-items:flex-start;
    gap:8px;
  }

  .team-add-card{
    padding:9px;
  }

  .team-add-fields{
    grid-template-columns:1fr;
    gap:7px;
  }

  .team-add-action-row,
  .team-pin-result{
    align-items:stretch;
    flex-direction:column;
  }

  .team-add-btn{
    width:100%;
  }

  .team-pin-code-row{
    justify-content:space-between;
  }

  .team-role-select{
    width:142px;
    font-size:.65rem;
  }

  .team-access-matrix th,
  .team-access-matrix td{
    padding:6px 7px;
    font-size:.62rem;
  }
}


/* =========================================================
   V2.3.22 — GARMENT LIBRARY
   ========================================================= */

.garment-library-settings{
  gap:12px;
}

.garment-library-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}

.garment-library-summary>div{
  min-width:0;
  padding:9px 10px;
  border:1px solid #DED4CB;
  border-radius:12px;
  background:#FAF8F5;
}

.garment-library-summary span,
.garment-library-summary strong{
  display:block;
}

.garment-library-summary span{
  color:#85786F;
  font-size:.61rem;
}

.garment-library-summary strong{
  margin-top:3px;
  color:#3F3731;
  font-size:.76rem;
}

.garment-library-rule{
  margin:0;
}

.garment-library-section{
  display:grid;
  gap:6px;
}

.garment-library-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:10px;
}

.garment-library-section-head>div{
  min-width:0;
}

.garment-library-section-head small{
  display:block;
  margin-top:2px;
  color:#877A71;
  font-size:.63rem;
  line-height:1.3;
}

.garment-library-section-count{
  flex:0 0 auto;
  min-width:27px;
  height:25px;
  display:grid;
  place-items:center;
  padding:0 7px;
  border-radius:999px;
  background:#EEF0F1;
  color:#637183;
  font-size:.65rem;
  font-weight:700;
}

.garment-library-list{
  display:grid;
  gap:6px;
}

.garment-library-row{
  min-height:52px;
  padding:8px 9px;
  border:1px solid #E0D7CF;
  border-radius:11px;
  background:#FFFDFB;
}

.garment-library-row.is-disabled{
  background:#F6F3EF;
  opacity:.76;
}

.garment-library-row-main{
  min-width:0;
}

.garment-library-row-title{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}

.garment-library-row-title strong{
  min-width:0;
}

.garment-library-built-in-tag,
.garment-library-custom-tag{
  display:inline-flex;
  align-items:center;
  min-height:18px;
  padding:2px 6px;
  border-radius:999px;
  font-size:.52rem;
  font-weight:750;
  letter-spacing:.05em;
}

.garment-library-built-in-tag{
  background:#EEF1F3;
  color:#637183;
}

.garment-library-custom-tag{
  background:#F5E9E5;
  color:#A45F4B;
}

.garment-library-row-actions{
  display:flex;
  align-items:center;
  gap:5px;
}

.garment-library-row-actions button:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.garment-library-empty{
  display:grid;
  gap:3px;
  padding:10px;
  border:1px dashed #D9CEC4;
  border-radius:11px;
  background:#FBF9F6;
}

.garment-library-empty strong{
  color:#4A403A;
  font-size:.72rem;
}

.garment-library-empty span{
  color:#867970;
  font-size:.63rem;
  line-height:1.35;
}

.garment-library-other-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border:1px dashed #D8CEC4;
  border-radius:11px;
  background:#FAF8F5;
}

.garment-library-other-note>div{
  min-width:0;
}

.garment-library-other-note strong,
.garment-library-other-note small{
  display:block;
}

.garment-library-other-note strong{
  color:#3F3731;
  font-size:.74rem;
}

.garment-library-other-note small{
  margin-top:2px;
  color:#85786F;
  font-size:.62rem;
  line-height:1.3;
}

.garment-library-other-note>span{
  flex:0 0 auto;
  color:#637183;
  font-size:.59rem;
  font-weight:700;
}

.garment-library-add-card{
  display:grid;
  gap:8px;
  padding:10px;
  border:1px solid #D9D0C8;
  border-radius:13px;
  background:#F8F5F1;
}

.garment-library-add-head{
  display:flex;
  align-items:center;
  gap:8px;
}

.garment-library-add-head>span{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:9px;
  background:#E9ECEF;
  color:#637183;
  font-size:1rem;
}

.garment-library-add-head strong,
.garment-library-add-head small{
  display:block;
}

.garment-library-add-head strong{
  color:#3F3731;
  font-size:.74rem;
}

.garment-library-add-head small{
  margin-top:2px;
  color:#85786F;
  font-size:.62rem;
  line-height:1.3;
}

.garment-library-add-grid{
  margin:0;
}

.garment-library-edit-form{
  gap:10px;
}

@media(max-width:760px){
  .garment-library-settings{
    gap:10px;
  }

  .garment-library-summary{
    gap:5px;
  }

  .garment-library-summary>div{
    padding:8px 7px;
  }

  .garment-library-summary span{
    font-size:.56rem;
  }

  .garment-library-summary strong{
    font-size:.68rem;
  }

  .garment-library-row{
    align-items:flex-start;
    gap:7px;
  }

  .garment-library-row-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .garment-library-row-actions .settings-mini-btn{
    min-width:64px;
  }

  .garment-library-other-note{
    align-items:flex-start;
  }
}


/* =========================================================
   V2.3.23 — STAFF CONTACT + FINANCIAL PRIVACY
   ========================================================= */

body[data-fitflow-role="manager"] .staff-production-table .order-garment-table-head,
body[data-fitflow-role="manager"] .staff-production-table .order-garment-table-row,
body[data-fitflow-role="tailor"] .staff-production-table .order-garment-table-head,
body[data-fitflow-role="tailor"] .staff-production-table .order-garment-table-row,
body[data-fitflow-role="staff"] .staff-production-table .order-garment-table-head,
body[data-fitflow-role="staff"] .staff-production-table .order-garment-table-row{
  grid-template-columns:minmax(0,1.4fr) 80px minmax(150px,.9fr);
}

body[data-fitflow-role="manager"] .bottom-nav,
body[data-fitflow-role="tailor"] .bottom-nav,
body[data-fitflow-role="staff"] .bottom-nav{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

@media(max-width:760px){
  body[data-fitflow-role="manager"] .staff-production-table .order-garment-table-head,
  body[data-fitflow-role="tailor"] .staff-production-table .order-garment-table-head,
  body[data-fitflow-role="staff"] .staff-production-table .order-garment-table-head{
    display:none;
  }

  body[data-fitflow-role="manager"] .staff-production-table .order-garment-table-row,
  body[data-fitflow-role="tailor"] .staff-production-table .order-garment-table-row,
  body[data-fitflow-role="staff"] .staff-production-table .order-garment-table-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(100px,.65fr);
  }

  body[data-fitflow-role="manager"] .staff-production-table .garment-status-cell,
  body[data-fitflow-role="tailor"] .staff-production-table .garment-status-cell,
  body[data-fitflow-role="staff"] .staff-production-table .garment-status-cell{
    grid-column:1/-1;
  }

  body[data-fitflow-role="manager"] .customer-card-contact:empty,
  body[data-fitflow-role="tailor"] .customer-card-contact:empty,
  body[data-fitflow-role="staff"] .customer-card-contact:empty{
    display:none;
  }
}


/* =========================================================
   V2.3.25 — ROLE IDENTITY + MY ACCOUNT COMPACTNESS
   ========================================================= */

.workspace-role-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-top:4px;
  padding:3px 7px;
  border:1px solid #CFC3B5;
  border-radius:999px;
  background:#FFFDFC;
  color:#5E6978;
  font-size:.54rem;
  font-weight:750;
  letter-spacing:.075em;
  line-height:1.2;
  white-space:nowrap;
}

.workspace-role-badge[data-role="manager"]{
  background:#EEF0F3;
  border-color:#C7CFD8;
  color:#566576;
}

.workspace-role-badge[data-role="tailor"]{
  background:#F2ECE6;
  border-color:#D8C7B8;
  color:#765F50;
}

.workspace-role-badge[data-role="staff"]{
  background:#F4E8E3;
  border-color:#DEC7BE;
  color:#855C50;
}

/*
  My Account previously stretched its grid rows to fill the entire
  phone dialog body. Keep every row content-height and aligned at top.
*/
.my-account-form{
  align-self:start!important;
  align-content:start!important;
  grid-auto-rows:max-content!important;
  height:auto!important;
  min-height:0!important;
  gap:10px!important;
}

.my-account-readonly{
  min-height:0!important;
  padding:10px 11px!important;
  border-radius:11px!important;
}

.my-account-readonly span{
  font-size:.67rem!important;
}

.my-account-readonly strong{
  font-size:.74rem!important;
}

.my-account-field{
  display:grid!important;
  grid-template-rows:auto auto!important;
  align-content:start!important;
  gap:5px!important;
  min-height:0!important;
  margin:0!important;
}

.my-account-field input{
  min-height:44px!important;
  height:44px!important;
  padding:9px 11px!important;
}

.my-account-label-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.my-account-label-line em{
  color:#8B7D74;
  font-size:.58rem;
  font-style:normal;
  font-weight:650;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.my-account-password-help{
  margin:0!important;
  line-height:1.3!important;
}

@media(max-width:760px){
  .topbar-brand{
    align-items:flex-start;
  }

  .topbar-brand>div:last-child{
    min-width:0;
  }

  .topbar h2{
    max-width:52vw;
    overflow:hidden;
    font-size:.88rem!important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .workspace-role-badge{
    margin-top:3px;
    padding:3px 6px;
    font-size:.49rem;
    letter-spacing:.065em;
  }

  .my-account-form{
    gap:8px!important;
  }

  .my-account-readonly{
    padding:9px 10px!important;
  }

  .my-account-field input{
    min-height:43px!important;
    height:43px!important;
  }

  #modal .my-account-field{
    font-size:.69rem!important;
  }

  .my-account-password-help{
    font-size:.63rem!important;
  }
}


/* =========================================================
   V2.3.26 — MEASUREMENT TEMPLATES
   ========================================================= */

.measurement-template-library,
.measurement-template-editor{
  gap:10px!important;
}

.measurement-template-setup-note{
  margin:0!important;
}

.measurement-template-garment-list{
  display:grid;
  overflow:hidden;
  border:1px solid #DED4CB;
  border-radius:14px;
  background:#FFFDFC;
}

.measurement-template-garment-row{
  width:100%;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 18px;
  align-items:center;
  gap:9px;
  min-height:54px;
  padding:9px 10px;
  border:0;
  border-bottom:1px solid #EEE6DE;
  background:#FFFDFC;
  color:#3F3731;
  text-align:left;
  cursor:pointer;
}

.measurement-template-garment-row:last-child{
  border-bottom:0;
}

.measurement-template-garment-row:hover{
  background:#F8F5F1;
}

.measurement-template-garment-icon{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#E8EBEF;
  color:#596575;
  font-size:.9rem;
  font-weight:700;
}

.measurement-template-garment-copy{
  min-width:0;
}

.measurement-template-garment-copy strong,
.measurement-template-garment-copy small{
  display:block;
}

.measurement-template-garment-copy strong{
  font-size:.77rem;
  color:#3F3731;
}

.measurement-template-garment-copy small{
  margin-top:2px;
  color:#85786F;
  font-size:.63rem;
  line-height:1.3;
}

.measurement-template-back{
  justify-self:start;
  min-height:36px;
  padding:7px 10px!important;
  font-size:.68rem!important;
}

.measurement-template-editor-section{
  display:grid;
  gap:7px;
}

.measurement-template-editor-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 9px;
  border:1px solid #DED4CB;
  border-radius:11px;
  background:#F8F5F1;
}

.measurement-template-editor-head>div{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:7px;
  min-width:0;
}

.measurement-template-editor-head strong{
  color:#3F3731;
  font-size:.74rem;
}

.measurement-template-editor-head small{
  grid-column:2;
  color:#85786F;
  font-size:.6rem;
}

.measurement-template-editor-head>span{
  flex:0 0 auto;
  color:#657180;
  font-size:.61rem;
  font-weight:700;
}

.measurement-template-field-list{
  display:grid;
  gap:5px;
}

.measurement-template-field-row{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) 62px;
  align-items:center;
  gap:7px;
  padding:7px;
  border:1px solid #E3DAD2;
  border-radius:11px;
  background:#FFFDFC;
}

.measurement-template-order-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px;
}

.measurement-template-move{
  width:26px;
  height:30px;
  min-height:30px!important;
  padding:0!important;
  border:1px solid #D9CFC6;
  border-radius:8px;
  background:#F8F5F1;
  color:#596575;
  font-weight:800;
  cursor:pointer;
}

.measurement-template-move:disabled{
  opacity:.30;
  cursor:not-allowed;
}

.measurement-template-field-main{
  min-width:0;
}

.measurement-template-field-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  margin-bottom:4px;
}

.measurement-template-field-meta small{
  max-width:180px;
  overflow:hidden;
  color:#8B817A;
  font-size:.54rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.measurement-template-core-tag,
.measurement-template-custom-tag,
.measurement-template-shared-tag{
  display:inline-flex;
  align-items:center;
  min-height:17px;
  padding:2px 5px;
  border-radius:999px;
  font-size:.48rem;
  font-weight:750;
  letter-spacing:.05em;
}

.measurement-template-core-tag{
  background:#ECEFF2;
  color:#5E6978;
}

.measurement-template-custom-tag{
  background:#F3E4DF;
  color:#985D4C;
}

.measurement-template-shared-tag{
  background:#E7F0EA;
  color:#52715F;
}

.measurement-template-label-input{
  min-height:38px!important;
  height:38px!important;
  padding:7px 9px!important;
  font-size:.72rem!important;
}

.measurement-template-active-control{
  display:grid!important;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:5px!important;
  min-width:0;
  margin:0!important;
  font-size:.61rem!important;
}

.measurement-template-active-control input{
  width:18px!important;
  height:18px!important;
  min-height:18px!important;
  margin:0!important;
}

.measurement-template-active-control span{
  color:#6F665F;
  font-size:.6rem;
}

.measurement-template-add-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px;
  padding:8px;
  border:1px dashed #D8CEC4;
  border-radius:11px;
  background:#FAF8F5;
}

.measurement-template-add-row input{
  min-height:40px!important;
  height:40px!important;
  padding:8px 9px!important;
  font-size:.7rem!important;
}

.measurement-template-add-row button{
  min-height:40px!important;
  padding:8px 10px!important;
  font-size:.65rem!important;
}

.measurement-correction-disabled{
  margin-left:5px;
  color:#9A6643;
  font-size:.58rem;
  font-weight:600;
}

@media(max-width:760px){
  .measurement-template-garment-row{
    min-height:51px;
    padding:8px 9px;
  }

  .measurement-template-field-row{
    grid-template-columns:51px minmax(0,1fr) 54px;
    gap:5px;
    padding:6px;
  }

  .measurement-template-order-actions{
    gap:2px;
  }

  .measurement-template-move{
    width:24px;
    height:34px;
    min-height:34px!important;
  }

  .measurement-template-field-meta small{
    display:none;
  }

  .measurement-template-label-input{
    min-height:40px!important;
    height:40px!important;
    font-size:16px!important;
  }

  .measurement-template-active-control{
    justify-items:start;
  }

  .measurement-template-active-control input{
    width:19px!important;
    height:19px!important;
  }

  .measurement-template-add-row{
    grid-template-columns:1fr;
  }

  .measurement-template-add-row input{
    font-size:16px!important;
  }

  .measurement-template-add-row button{
    width:100%;
  }
}


/* =========================================================
   V2.3.27 — OPERATIONAL ROLE PRIVACY
   Manager / Front Desk, Tailor / Cutting and Staff share the
   same contact + finance privacy presentation.
   ========================================================= */


/* =========================================================
   V2.3.30 — OWNER READY ALERTS
   ========================================================= */

.owner-alerts-trigger{
  position:relative;
  display:inline-flex!important;
  align-items:center;
  gap:6px;
}

.owner-alerts-bell{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border:1px solid #D6CBC1;
  border-radius:7px;
  background:#F8F5F1;
  color:#5E6978;
  font-size:.78rem;
  font-weight:800;
}

.owner-alerts-trigger.has-alerts{
  border-color:#CFAF9E!important;
  background:#FFF8F3!important;
}

.owner-alerts-trigger.has-alerts .owner-alerts-bell{
  background:#F2E4DF;
  border-color:#D8BEB5;
  color:#9A5C4B;
}

.owner-alerts-count{
  min-width:20px;
  height:20px;
  display:inline-grid;
  place-items:center;
  padding:0 5px;
  border-radius:999px;
  background:#B66D57;
  color:#fff;
  font-size:.58rem;
  font-weight:800;
}

.owner-alerts-center{
  display:grid;
  gap:12px;
}

.owner-alerts-section{
  display:grid;
  gap:7px;
}

.owner-alerts-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.owner-alerts-section-head strong{
  color:#3F3731;
  font-size:.76rem;
}

.owner-alerts-section-head span{
  min-width:24px;
  height:22px;
  display:grid;
  place-items:center;
  padding:0 6px;
  border-radius:999px;
  background:#F2E4DF;
  color:#985D4C;
  font-size:.6rem;
  font-weight:800;
}

.owner-alerts-list{
  display:grid;
  gap:7px;
}

.owner-alert-card{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:9px;
  padding:10px;
  border:1px solid #DED4CB;
  border-radius:13px;
  background:#FFFDFC;
}

.owner-alert-card.is-full-order{
  border-color:#CDBAAF;
  background:#FFF9F5;
}

.owner-alert-card.is-handled{
  opacity:.72;
}

.owner-alert-card-icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#E8EBEF;
  color:#5E6978;
  font-weight:800;
}

.owner-alert-card.is-full-order .owner-alert-card-icon{
  background:#E7F0EA;
  color:#557260;
}

.owner-alert-card-copy{
  min-width:0;
}

.owner-alert-card-title-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}

.owner-alert-card-title-row strong{
  color:#3F3731;
  font-size:.75rem;
}

.owner-alert-ready-pill{
  display:inline-flex;
  align-items:center;
  min-height:17px;
  padding:2px 5px;
  border-radius:999px;
  background:#E7F0EA;
  color:#557260;
  font-size:.48rem;
  font-weight:800;
  letter-spacing:.05em;
}

.owner-alert-card-subject{
  margin-top:5px;
  color:#443A34;
  font-size:.88rem;
  line-height:1.35;
  font-weight:750;
}

.owner-alert-card p{
  margin:4px 0 0;
  color:#6B625C;
  font-size:.76rem;
  line-height:1.45;
}

.owner-alert-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
  margin-top:6px;
  color:#8A7F77;
  font-size:.58rem;
}

.owner-alert-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}

.owner-alert-card-actions button{
  min-height:34px;
  padding:6px 9px!important;
  font-size:.62rem!important;
}

.owner-alert-handled-note{
  display:block;
  margin-top:6px;
  color:#7E746D;
  font-size:.58rem;
}

.owner-alerts-empty{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:9px;
  align-items:center;
  padding:12px;
  border:1px dashed #D8CEC4;
  border-radius:13px;
  background:#FAF8F5;
}

.owner-alerts-empty>span{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#E7F0EA;
  color:#557260;
  font-weight:800;
}

.owner-alerts-empty strong,
.owner-alerts-empty small{
  display:block;
}

.owner-alerts-empty strong{
  color:#3F3731;
  font-size:.74rem;
}

.owner-alerts-empty small{
  margin-top:2px;
  color:#80756E;
  font-size:.63rem;
}

.owner-alerts-history{
  padding-top:3px;
}

.owner-alerts-history summary{
  cursor:pointer;
  color:#6F665F;
  font-size:.67rem;
  font-weight:650;
}

.owner-alerts-history .owner-alerts-list{
  margin-top:7px;
}

.owner-ready-alert-dialog{
  border:0;
  padding:0;
  width:min(520px,calc(100% - 24px));
  border-radius:20px;
  background:transparent;
  box-shadow:0 24px 80px rgba(63,55,49,.22);
}

.owner-ready-alert-dialog::backdrop{
  background:rgba(42,36,33,.52);
}

.owner-ready-alert-card{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:11px;
  padding:16px;
  border:1px solid #D8CCC1;
  border-radius:20px;
  background:#FFFDFC;
}

.owner-ready-alert-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#E7F0EA;
  color:#557260;
  font-size:1.05rem;
  font-weight:850;
}

.owner-ready-alert-copy{
  min-width:0;
}

.owner-ready-alert-copy h3{
  margin:3px 0 0;
  color:#3F3731;
  font-size:1.18rem;
  line-height:1.25;
}

.owner-ready-alert-subject{
  margin-top:8px;
  color:#3F3731;
  font-size:1.03rem;
  line-height:1.38;
  font-weight:780;
}

.owner-ready-alert-copy p{
  margin:5px 0 0;
  color:#645B55;
  font-size:.88rem;
  line-height:1.5;
}

.owner-ready-alert-meta{
  margin-top:8px;
  color:#7D7169;
  font-size:.7rem;
  line-height:1.4;
}

.owner-ready-alert-actions{
  grid-column:1/-1;
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:7px;
  padding-top:4px;
}

.owner-ready-alert-actions button{
  min-height:38px;
  padding:8px 11px;
  border:1px solid #D6CBC1;
  border-radius:10px;
  background:#FFFDFC;
  color:#4A403A;
  font-size:.67rem;
  font-weight:650;
  cursor:pointer;
}

.owner-ready-alert-actions .owner-ready-alert-invoice{
  background:#738091;
  border-color:#738091;
  color:#fff;
}

@media(max-width:760px){
  .owner-alerts-label{
    display:none;
  }

  .owner-alerts-trigger{
    min-width:42px!important;
    padding:7px 8px!important;
  }

  .owner-alerts-count{
    position:absolute;
    top:-5px;
    right:-5px;
    min-width:18px;
    height:18px;
    font-size:.54rem;
  }

  .owner-alert-card{
    grid-template-columns:31px minmax(0,1fr);
    padding:9px;
  }

  .owner-alert-card-icon{
    width:29px;
    height:29px;
  }

  .owner-alert-card-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .owner-alert-card-actions button{
    width:100%;
    min-height:38px!important;
  }

  .owner-ready-alert-dialog{
    width:calc(100% - 18px);
  }

  .owner-ready-alert-card{
    grid-template-columns:38px minmax(0,1fr);
    gap:9px;
    padding:13px;
  }

  .owner-ready-alert-icon{
    width:36px;
    height:36px;
  }

  .owner-ready-alert-copy h3{
    font-size:1.22rem;
  }

  .owner-ready-alert-subject{
    font-size:1.08rem;
  }

  .owner-ready-alert-copy p{
    font-size:.92rem;
  }

  .owner-ready-alert-meta{
    font-size:.72rem;
  }

  .owner-ready-alert-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .owner-ready-alert-actions button{
    width:100%;
    min-height:42px;
  }
}


/* =========================================================
   V2.3.31 — MOBILE HEADER + SERVER READY ALERT RELIABILITY
   ========================================================= */

/* Owner Alerts empty state should be content-height, not fill the dialog. */
.owner-alerts-center{
  align-self:start!important;
  align-content:start!important;
  grid-auto-rows:max-content!important;
  min-height:0!important;
  height:auto!important;
}

.owner-alerts-empty{
  min-height:82px!important;
  height:auto!important;
}

/*
  Mobile header:
  keep the full boutique name readable, then put actions on their own row.
  This prevents Alerts / Settings / Logout from clipping the boutique name
  or disappearing outside the viewport.
*/
@media(max-width:760px){
  .topbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
    gap:9px!important;
    padding:11px 12px 9px!important;
  }

  .topbar-brand{
    width:100%!important;
    min-width:0!important;
    align-items:flex-start!important;
  }

  .topbar-brand>div:last-child{
    min-width:0!important;
    width:100%!important;
  }

  .topbar h2{
    width:100%!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:normal!important;
    line-height:1.16!important;
    font-size:.92rem!important;
    overflow-wrap:anywhere;
  }

  .topbar-actions{
    width:100%!important;
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:6px!important;
    flex-wrap:nowrap!important;
  }

  .topbar-actions>button{
    min-width:0!important;
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  .quiet-logout{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:42px!important;
    padding:8px 11px!important;
  }

  .settings-trigger{
    min-height:42px!important;
  }

  .owner-alerts-trigger{
    min-height:42px!important;
  }
}


/* =========================================================
   V2.3.32 — HEADER BRANDING + PAYMENTS SEARCH
   ========================================================= */

.workspace-brand-mark{
  overflow:hidden;
  flex:0 0 auto;
}
.workspace-brand-mark.has-logo{
  padding:0!important;
  background:#FFFDFC!important;
  border:1px solid #D8CCC1;
}
.workspace-brand-mark.has-logo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  padding:3px;
  border-radius:inherit;
}

.payment-search-wrap{
  margin:0 0 12px;
}
.payment-search{
  width:100%;
  max-width:none!important;
  min-height:46px;
  padding:10px 13px;
  border-radius:13px;
  background:#FFFDFC;
}
.payment-customer-line{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:5px 9px;
}
.payment-customer-phone{
  color:#746B65;
  font-size:.72rem;
  font-weight:600;
  white-space:nowrap;
}

@media(max-width:760px){
  .topbar{
    gap:7px!important;
    padding:10px 12px 8px!important;
  }
  .topbar-brand{
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr)!important;
    gap:10px!important;
    width:100%!important;
  }
  .workspace-brand-mark{
    width:48px!important;
    height:48px!important;
    border-radius:13px!important;
    align-self:start;
  }
  .topbar-brand .eyebrow{
    font-size:.68rem!important;
    letter-spacing:.08em!important;
  }
  .topbar h2{
    margin-top:2px!important;
    font-size:.88rem!important;
    line-height:1.18!important;
  }
  .topbar-actions{
    justify-content:flex-end!important;
    gap:5px!important;
    padding-left:58px;
  }
  .topbar-actions>button{
    min-height:38px!important;
    height:38px!important;
    padding:6px 9px!important;
    border-radius:11px!important;
  }
  .owner-alerts-trigger,
  .settings-trigger{
    min-width:38px!important;
  }
  .settings-trigger span{
    display:none!important;
  }
  .quiet-logout{
    min-width:64px!important;
    padding-inline:11px!important;
  }
  .payment-search-wrap{
    margin-bottom:10px;
  }
  .payment-search{
    min-height:44px;
    font-size:16px;
  }
  .payment-customer-line{
    display:grid;
    gap:2px;
  }
  .payment-customer-phone{
    font-size:.67rem;
  }
}


/* =========================================================
   V2.3.33 — COMPACT MOBILE HEADER + PAYMENT SEARCH RESULT FIX
   ========================================================= */

.payment-search-empty-global{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:96px;
  padding:18px;
  border:1px dashed #D8CEC4;
  border-radius:16px;
  background:#FAF8F5;
}

.payment-search-empty-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#E7F0EA;
  color:#4F7A62;
  font-size:1rem;
  font-weight:800;
}

.payment-search-empty-global strong,
.payment-search-empty-global small{
  display:block;
}

.payment-search-empty-global strong{
  color:#3F3731;
  font-size:.82rem;
}

.payment-search-empty-global small{
  margin-top:3px;
  color:#81766F;
  font-size:.68rem;
  line-height:1.4;
}

.payment-search-completed{
  overflow:hidden;
}

@media(max-width:760px){

  /*
    Compact phone header:
    logo + identity remain one compact block.
    Actions begin immediately under the boutique name instead of
    floating at the far right with a large empty band.
  */
  .topbar{
    display:block!important;
    padding:9px 12px 8px!important;
  }

  .topbar-brand{
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr)!important;
    align-items:start!important;
    gap:9px!important;
    width:100%!important;
  }

  .workspace-brand-mark{
    width:46px!important;
    height:46px!important;
    border-radius:12px!important;
  }

  .topbar-brand .eyebrow{
    margin-top:1px!important;
    font-size:.64rem!important;
    line-height:1.15!important;
  }

  .topbar h2{
    margin:2px 0 0!important;
    max-width:none!important;
    font-size:.84rem!important;
    line-height:1.16!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  .workspace-role-badge{
    margin-top:3px!important;
  }

  .topbar-actions{
    width:auto!important;
    margin:5px 0 0 55px!important;
    padding:0!important;
    display:flex!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:5px!important;
  }

  .topbar-actions>button{
    height:34px!important;
    min-height:34px!important;
    padding:5px 8px!important;
    border-radius:10px!important;
  }

  .owner-alerts-trigger,
  .settings-trigger{
    width:36px!important;
    min-width:36px!important;
    padding:5px!important;
  }

  .owner-alerts-bell{
    width:20px!important;
    height:20px!important;
  }

  .settings-trigger{
    font-size:.82rem!important;
  }

  .quiet-logout{
    min-width:auto!important;
    padding-inline:10px!important;
    font-size:.68rem!important;
  }

  .payment-search-empty-global{
    grid-template-columns:38px minmax(0,1fr);
    gap:9px;
    min-height:84px;
    padding:14px;
  }

  .payment-search-empty-icon{
    width:36px;
    height:36px;
  }
}


/* =========================================================
   V2.3.34 — MOBILE HEADER BASED ON USER SKETCH
   Large logo left · brand/name center · Logout top-right
   Alerts + Settings below · no wasted blank area
   ========================================================= */

@media(max-width:760px){

  .topbar{
    display:grid!important;
    grid-template-columns:86px minmax(0,1fr) 92px!important;
    grid-template-rows:auto auto!important;
    column-gap:10px!important;
    row-gap:8px!important;
    align-items:stretch!important;
    padding:10px 12px!important;
    min-height:0!important;
  }

  /* Brand block occupies logo + title area */
  .topbar-brand{
    grid-column:1 / 3!important;
    grid-row:1 / 3!important;
    display:grid!important;
    grid-template-columns:86px minmax(0,1fr)!important;
    grid-template-rows:auto 42px!important;
    column-gap:10px!important;
    row-gap:7px!important;
    width:100%!important;
    min-width:0!important;
    align-items:stretch!important;
  }

  /* Large boutique logo spans both visual rows */
  .workspace-brand-mark{
    grid-column:1!important;
    grid-row:1 / 3!important;
    width:86px!important;
    height:86px!important;
    align-self:stretch!important;
    justify-self:stretch!important;
    border-radius:16px!important;
    box-shadow:0 5px 14px rgba(63,55,49,.09)!important;
  }

  .workspace-brand-mark.has-logo img{
    padding:4px!important;
  }

  /* Brand/name occupy the upper middle */
  .topbar-brand>div:last-child{
    grid-column:2!important;
    grid-row:1!important;
    min-width:0!important;
    width:100%!important;
    align-self:center!important;
    padding-top:1px!important;
  }

  .topbar-brand .eyebrow{
    margin:0!important;
    font-size:.66rem!important;
    line-height:1.15!important;
    letter-spacing:.09em!important;
  }

  .topbar h2{
    margin:3px 0 0!important;
    max-width:none!important;
    font-size:.86rem!important;
    line-height:1.16!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
  }

  .workspace-role-badge{
    margin-top:4px!important;
    font-size:.47rem!important;
    padding:3px 6px!important;
  }

  /* Actions become a real second row, directly under the boutique name */
  .topbar-actions{
    grid-column:2 / 4!important;
    grid-row:2!important;
    margin:0!important;
    padding:0!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 92px!important;
    gap:7px!important;
    align-items:stretch!important;
    justify-content:stretch!important;
  }

  .topbar-actions>button{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:7px 9px!important;
    border-radius:12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    background:#FFFDFC!important;
    border:1px solid #D8CCC1!important;
    color:#403934!important;
    box-shadow:none!important;
    white-space:nowrap!important;
  }

  /* Alert box */
  .owner-alerts-trigger{
    grid-column:1!important;
    position:relative!important;
  }

  .owner-alerts-label{
    display:inline!important;
    font-size:.66rem!important;
    font-weight:700!important;
  }

  .owner-alerts-bell{
    width:22px!important;
    height:22px!important;
    border:0!important;
    background:#F1ECE7!important;
    font-size:.72rem!important;
  }

  .owner-alerts-count{
    top:-5px!important;
    right:-4px!important;
  }

  /* Settings box, centered in the lower row */
  .settings-trigger{
    grid-column:2!important;
  }

  .settings-trigger span{
    display:inline!important;
    font-size:.66rem!important;
    font-weight:700!important;
  }

  /* Logout stays top-right, as in the sketch */
  .quiet-logout{
    grid-column:3!important;
    grid-row:1!important;
    align-self:center!important;
    height:42px!important;
    min-height:42px!important;
    padding:7px 10px!important;
    border-radius:12px!important;
    font-size:.68rem!important;
    font-weight:700!important;
    background:#FFFDFC!important;
    border:1px solid #D8CCC1!important;
  }

  /*
    Because Logout is still inside .topbar-actions in the DOM, visually place it
    in the upper-right using absolute positioning relative to .topbar.
    This keeps the existing JS and desktop header untouched.
  */
  .topbar{
    position:sticky!important;
  }

  .topbar-actions .quiet-logout{
    position:absolute!important;
    top:15px!important;
    right:12px!important;
    width:92px!important;
  }

  /* Reserve space beside brand text so Logout never overlaps the boutique name */
  .topbar-brand>div:last-child{
    padding-right:96px!important;
  }

  /* Alerts and Settings use the full lower-row width beneath the title. */
  .topbar-actions{
    padding-right:99px!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  }

  .topbar-actions .owner-alerts-trigger{
    grid-column:1!important;
  }

  .topbar-actions .settings-trigger{
    grid-column:2!important;
  }

  /* Do not allow hidden button spacing to leave gaps */
  .topbar-actions>.hidden{
    display:none!important;
  }
}

/* Extra-small phones: keep the same composition without squeezing text */
@media(max-width:390px){
  .topbar{
    grid-template-columns:78px minmax(0,1fr) 86px!important;
    column-gap:8px!important;
    padding-inline:10px!important;
  }

  .topbar-brand{
    grid-template-columns:78px minmax(0,1fr)!important;
    column-gap:8px!important;
  }

  .workspace-brand-mark{
    width:78px!important;
    height:78px!important;
  }

  .topbar-brand>div:last-child{
    padding-right:89px!important;
  }

  .topbar-actions{
    padding-right:92px!important;
    gap:5px!important;
  }

  .topbar-actions .quiet-logout{
    right:10px!important;
    width:86px!important;
  }

  .topbar-actions>button{
    padding-inline:7px!important;
  }

  .owner-alerts-label,
  .settings-trigger span{
    font-size:.61rem!important;
  }
}


/* =========================================================
   V2.3.35 — BALANCED MOBILE HEADER
   Final compact composition:
   medium logo left, full brand/name right,
   3 equal action buttons directly underneath.
   ========================================================= */

@media(max-width:760px){

  /*
    Two-column / two-row header:
      [ LOGO ] [ ANIQ FITFLOW + BOUTIQUE NAME ]
      [ LOGO ] [ ALERTS | SETTINGS | LOGOUT   ]

    The logo spans both rows.
    The name gets the entire right-side width, so words are not squeezed.
  */
  .topbar{
    display:grid!important;
    grid-template-columns:64px minmax(0,1fr)!important;
    grid-template-rows:auto 36px!important;
    column-gap:10px!important;
    row-gap:6px!important;
    align-items:stretch!important;
    padding:9px 12px!important;
    min-height:0!important;
  }

  /*
    Let the children of .topbar-brand participate directly in the
    parent grid. This avoids nesting another wide grid and wasting space.
  */
  .topbar-brand{
    display:contents!important;
  }

  .workspace-brand-mark{
    grid-column:1!important;
    grid-row:1 / 3!important;
    width:64px!important;
    height:64px!important;
    min-width:64px!important;
    min-height:64px!important;
    align-self:center!important;
    justify-self:start!important;
    border-radius:14px!important;
    box-shadow:0 3px 10px rgba(63,55,49,.08)!important;
  }

  .workspace-brand-mark.has-logo img{
    padding:3px!important;
  }

  .topbar-brand>div:last-child{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    padding:0!important;
    align-self:center!important;
  }

  .topbar-brand .eyebrow{
    margin:0!important;
    font-size:.61rem!important;
    line-height:1.15!important;
    letter-spacing:.085em!important;
  }

  .topbar h2{
    margin:2px 0 0!important;
    width:100%!important;
    max-width:none!important;
    font-size:.80rem!important;
    line-height:1.18!important;
    font-weight:750!important;

    /* Keep words whole. Wrap only between words. */
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  .workspace-role-badge{
    margin-top:3px!important;
    padding:2px 5px!important;
    font-size:.44rem!important;
  }

  /*
    One clean 3-button row.
    No absolute positioning.
    No empty band.
  */
  .topbar-actions{
    grid-column:2!important;
    grid-row:2!important;
    width:100%!important;
    height:36px!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    position:static!important;
  }

  .topbar-actions>button{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    left:auto!important;

    width:100%!important;
    min-width:0!important;
    height:36px!important;
    min-height:36px!important;
    margin:0!important;
    padding:5px 6px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;

    border:1px solid #D8CCC1!important;
    border-radius:10px!important;
    background:#FFFDFC!important;
    color:#403934!important;
    box-shadow:none!important;

    font-size:.60rem!important;
    font-weight:700!important;
    white-space:nowrap!important;
  }

  .owner-alerts-trigger{
    grid-column:auto!important;
  }

  .owner-alerts-label{
    display:inline!important;
    font-size:.59rem!important;
    font-weight:700!important;
  }

  .owner-alerts-bell{
    width:19px!important;
    height:19px!important;
    border:0!important;
    border-radius:6px!important;
    background:#F1ECE7!important;
    font-size:.65rem!important;
  }

  .owner-alerts-count{
    top:-5px!important;
    right:-4px!important;
    min-width:17px!important;
    height:17px!important;
    font-size:.50rem!important;
  }

  .settings-trigger{
    grid-column:auto!important;
  }

  .settings-trigger span{
    display:inline!important;
    font-size:.59rem!important;
    font-weight:700!important;
  }

  .quiet-logout,
  .topbar-actions .quiet-logout{
    grid-column:auto!important;
    grid-row:auto!important;
    position:relative!important;
    top:auto!important;
    right:auto!important;
    width:100%!important;
    min-width:0!important;
    height:36px!important;
    min-height:36px!important;
    padding:5px 6px!important;
    font-size:.59rem!important;
  }

  .topbar-actions>.hidden{
    display:none!important;
  }
}

/* Narrow phones still keep the same balanced structure. */
@media(max-width:390px){
  .topbar{
    grid-template-columns:58px minmax(0,1fr)!important;
    column-gap:8px!important;
    padding-inline:10px!important;
  }

  .workspace-brand-mark{
    width:58px!important;
    height:58px!important;
    min-width:58px!important;
    min-height:58px!important;
    border-radius:13px!important;
  }

  .topbar h2{
    font-size:.75rem!important;
  }

  .topbar-actions{
    gap:4px!important;
  }

  .topbar-actions>button{
    padding-inline:4px!important;
  }

  .owner-alerts-label,
  .settings-trigger span,
  .quiet-logout,
  .topbar-actions .quiet-logout{
    font-size:.55rem!important;
  }
}


/* =========================================================
   V2.3.37 — ORDER WORKFLOW SETTINGS
   ========================================================= */

.order-workflow-settings{
  gap:10px!important;
}

.order-workflow-controls-card,
.order-workflow-protected-card{
  display:grid;
  gap:9px;
  padding:11px;
  border:1px solid #DED4CB;
  border-radius:14px;
  background:#FFFDFC;
}

.order-workflow-toggle-row{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:9px!important;
  padding:9px;
  border:1px solid #E5DDD6;
  border-radius:11px;
  background:#FAF8F5;
}

.order-workflow-toggle-row input{
  width:20px!important;
  height:20px!important;
  min-height:20px!important;
  margin:2px 0 0!important;
}

.order-workflow-toggle-row strong,
.order-workflow-toggle-row small{
  display:block;
}

.order-workflow-toggle-row strong{
  color:#3F3731;
  font-size:.72rem;
}

.order-workflow-toggle-row small{
  margin-top:3px;
  color:#80756E;
  font-size:.62rem;
  line-height:1.35;
}

.order-workflow-protected-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.order-workflow-protected-head strong{
  display:block;
  margin-top:2px;
  color:#3F3731;
  font-size:.75rem;
}

.order-workflow-lock-pill{
  padding:3px 7px;
  border-radius:999px;
  background:#ECEFF2;
  color:#657180;
  font-size:.52rem;
  font-weight:800;
  letter-spacing:.06em;
}

.order-workflow-protected-card>p{
  margin:0;
  color:#7C716A;
  font-size:.63rem;
  line-height:1.4;
}

.order-workflow-stage-list{
  display:grid;
  gap:4px;
}

.order-workflow-stage-row{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-height:43px;
  padding:6px 8px;
  border:1px solid #E6DED7;
  border-radius:10px;
  background:#FAF8F5;
}

.order-workflow-stage-number{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#E9ECEF;
  color:#5F6B79;
  font-size:.56rem;
  font-weight:800;
}

.order-workflow-stage-row strong,
.order-workflow-stage-row small{
  display:block;
}

.order-workflow-stage-row strong{
  color:#403934;
  font-size:.68rem;
}

.order-workflow-stage-row small{
  margin-top:1px;
  color:#8A7F77;
  font-size:.57rem;
}

.order-workflow-stage-tag{
  padding:2px 5px;
  border-radius:999px;
  background:#E7F0EA;
  color:#557260;
  font-size:.48rem;
  font-weight:800;
}

.order-workflow-cancel-note{
  display:grid;
  gap:2px;
  padding:8px 9px;
  border-left:3px solid #B66D57;
  border-radius:8px;
  background:#FAF1EE;
}

.order-workflow-cancel-note strong{
  color:#704C42;
  font-size:.67rem;
}

.order-workflow-cancel-note span{
  color:#846E66;
  font-size:.59rem;
  line-height:1.35;
}

@media(max-width:760px){
  .order-workflow-controls-card,
  .order-workflow-protected-card{
    padding:9px;
  }

  .order-workflow-stage-row{
    grid-template-columns:26px minmax(0,1fr) auto;
    min-height:41px;
  }
}


/* =========================================================
   V2.3.39 — ORDER WORKFLOW BEHAVIOR FIX
   ========================================================= */
.order-workflow-effective-state{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid #CDD6DF;
  border-radius:11px;
  background:#F3F5F7;
}
.order-workflow-effective-state span{
  color:#718092;
  font-size:.52rem;
  font-weight:800;
  letter-spacing:.07em;
}
.order-workflow-effective-state strong{
  color:#465465;
  font-size:.66rem;
  text-align:right;
}
@media(max-width:760px){
  .order-workflow-effective-state{
    display:grid;
    gap:3px;
  }
  .order-workflow-effective-state strong{
    text-align:left;
  }
}


/* =========================================================
   V2.3.40 — INVOICE & RECEIPT SETTINGS
   ========================================================= */

.invoice-settings-v2340{gap:10px!important}

.invoice-settings-card{
  display:grid;
  gap:10px;
  padding:11px;
  border:1px solid #DED4CB;
  border-radius:14px;
  background:#FFFDFC;
}

.invoice-settings-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.invoice-settings-card-head strong{
  display:block;
  margin-top:2px;
  color:#3F3731;
  font-size:.74rem;
}

.invoice-title-rule-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}

.invoice-title-rule-grid>div{
  padding:8px 9px;
  border:1px solid #E5DDD6;
  border-radius:10px;
  background:#FAF8F5;
}

.invoice-title-rule-grid strong,
.invoice-title-rule-grid small{display:block}

.invoice-title-rule-grid strong{
  color:#403934;
  font-size:.66rem;
}

.invoice-title-rule-grid small{
  margin-top:2px;
  color:#80756E;
  font-size:.56rem;
  line-height:1.3;
}

.invoice-setting-toggle{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:9px!important;
  padding:8px 9px;
  border:1px solid #E5DDD6;
  border-radius:10px;
  background:#FAF8F5;
}

.invoice-setting-toggle input{
  width:19px!important;
  height:19px!important;
  min-height:19px!important;
  margin:2px 0 0!important;
}

.invoice-setting-toggle strong,
.invoice-setting-toggle small{display:block}

.invoice-setting-toggle strong{
  color:#403934;
  font-size:.67rem;
}

.invoice-setting-toggle small{
  margin-top:2px;
  color:#80756E;
  font-size:.57rem;
  line-height:1.3;
}

.invoice-settings-terms{
  min-height:175px!important;
  resize:vertical;
  line-height:1.45!important;
}

.invoice-reset-terms-btn{
  min-height:30px!important;
  padding:5px 8px!important;
  white-space:nowrap;
  font-size:.57rem!important;
}

@media(max-width:520px){
  .invoice-title-rule-grid{grid-template-columns:1fr}
  .invoice-settings-card{padding:9px}
  .invoice-settings-card-head{align-items:center}
}

/* V2.3.41 — Invoice title rule refinement */
.invoice-title-rule-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.invoice-title-rule-grid>div:last-child:nth-child(odd){
  grid-column:1 / -1;
}
@media(max-width:520px){
  .invoice-title-rule-grid{
    grid-template-columns:1fr;
  }
  .invoice-title-rule-grid>div:last-child:nth-child(odd){
    grid-column:auto;
  }
}


/* =========================================================
   V2.3.42 — PAYMENT / INVOICE INTEGRITY
   ========================================================= */

.payment-integrity-warning{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:8px;
  align-items:start;
  margin:8px 0;
  padding:9px 10px;
  border:1px solid #D9A596;
  border-radius:11px;
  background:#FFF3EF;
}

.payment-integrity-warning>span{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#B66D57;
  color:white;
  font-weight:800;
}

.payment-integrity-warning strong,
.payment-integrity-warning small{
  display:block;
}

.payment-integrity-warning strong{
  color:#6C443A;
  font-size:.69rem;
}

.payment-integrity-warning small{
  margin-top:3px;
  color:#785F57;
  font-size:.58rem;
  line-height:1.35;
}

.payment-stage-hint{
  display:block;
  margin-top:3px;
  color:#6D7A87;
  font-size:.57rem;
  line-height:1.3;
}

.payment-rule-note{
  display:grid;
  gap:2px;
  margin-top:8px;
  padding:8px 9px;
  border-left:3px solid #738091;
  border-radius:8px;
  background:#F3F5F7;
}

.payment-rule-note strong{
  color:#4F5B69;
  font-size:.66rem;
}

.payment-rule-note span{
  color:#6C7580;
  font-size:.58rem;
  line-height:1.35;
}


/* =========================================================
   V2.3.43 — ADVANCE RECEIPT / INVOICE NUMBERING CLARITY
   ========================================================= */

.invoice-edge-case-note{
  display:grid;
  gap:3px;
  padding:9px 10px;
  border-left:3px solid #738091;
  border-radius:9px;
  background:#F3F5F7;
}

.invoice-edge-case-note strong{
  color:#4E5966;
  font-size:.65rem;
}

.invoice-edge-case-note span{
  color:#68727D;
  font-size:.58rem;
  line-height:1.4;
}

.advance-receipt-reference-note{
  display:grid;
  gap:3px;
  margin:0 0 10px;
  padding:9px 10px;
  border:1px solid #D8DDE3;
  border-radius:10px;
  background:#F5F7F9;
}

.advance-receipt-reference-note strong{
  color:#4D5967;
  font-size:.67rem;
}

.advance-receipt-reference-note span{
  color:#68737E;
  font-size:.58rem;
  line-height:1.35;
}

.invoice-title-rule-grid>div:last-child:nth-child(odd){
  grid-column:auto;
}


/* =========================================================
   V2.3.45 — GENTS COMPONENT ARCHITECTURE
   Existing global visual language intentionally unchanged.
   ========================================================= */

.business-type-library-banner{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:10px;
  border:1px solid #D8DDE3;
  border-radius:12px;
  background:#F5F7F9;
}

.business-type-library-banner>span{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#E9EDF1;
  color:#5D6976;
  font-weight:800;
  font-size:.72rem;
}

.business-type-library-banner strong,
.business-type-library-banner small{
  display:block;
}

.business-type-library-banner strong{
  color:#3F3731;
  font-size:.70rem;
}

.business-type-library-banner small{
  margin-top:2px;
  color:#74808B;
  font-size:.58rem;
  line-height:1.35;
}

.garment-profile-group{
  display:grid;
  gap:5px;
}

.garment-profile-group + .garment-profile-group{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #E5DDD6;
}

.garment-profile-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:2px 2px 4px;
}

.garment-profile-group-head strong{
  color:#5E6976;
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.garment-profile-group-head span{
  color:#968A82;
  font-size:.52rem;
}

.garment-profile-tag{
  display:inline-flex;
  align-items:center;
  padding:2px 5px;
  border-radius:999px;
  font-size:.46rem;
  font-weight:800;
  letter-spacing:.05em;
}

.garment-profile-tag.ladies{
  background:#F5EAE7;
  color:#966052;
}

.garment-profile-tag.gents{
  background:#E9EEF3;
  color:#5D6D7D;
}

.measurement-component-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:-2px -2px 8px;
  padding:7px 9px;
  border-radius:9px;
  background:#EEF1F4;
}

.measurement-component-label span{
  color:#4D5966;
  font-weight:760;
  font-size:.68rem;
}

.measurement-component-label small{
  color:#7B858E;
  font-size:.52rem;
}

.gents-component-card{
  border-color:#D6DDE3;
}

.desk-component-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:5px;
  margin:8px 0;
}

.desk-component-summary>span{
  display:grid;
  gap:2px;
  padding:7px 8px;
  border:1px solid #E0E4E8;
  border-radius:9px;
  background:#FAFBFC;
}

.desk-component-summary strong{
  color:#4E5965;
  font-size:.60rem;
}

.desk-component-summary small{
  color:#88919A;
  font-size:.49rem;
}

.component-combo-hint small{
  line-height:1.35;
}


/* V2.3.46 — compact Ladies / Gents workspace control. */
.workspace-meta-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:4px}.workspace-profile-control{display:inline-flex;align-items:center;min-height:24px}.workspace-profile-badge,.workspace-profile-select-wrap{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:3px 8px;border:1px solid rgba(118,104,94,.22);border-radius:999px;background:rgba(244,241,236,.82);color:#3f3731;font-size:11px;font-weight:700;line-height:1;letter-spacing:.02em}.workspace-profile-select-wrap{position:relative;padding-right:6px}.workspace-profile-select{appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;color:inherit;font:inherit;padding:0 16px 0 0;min-width:58px;cursor:pointer}.workspace-profile-chevron{position:absolute;right:7px;top:50%;transform:translateY(-55%);pointer-events:none;font-size:12px;opacity:.66}.workspace-profile-dot{width:7px;height:7px;border-radius:50%;background:#738091;flex:0 0 auto}.workspace-profile-dot.gents{background:#76685e}.workspace-profile-badge.gents{background:rgba(207,195,181,.32)}.workspace-profile-badge.ladies{background:rgba(115,128,145,.08)}
@media (max-width:640px){.workspace-meta-row{gap:4px;margin-top:2px}.workspace-profile-badge,.workspace-profile-select-wrap{min-height:22px;padding-top:2px;padding-bottom:2px;font-size:10px}.workspace-profile-select{min-width:54px}}

/* =========================================================
   V2.3.46 — DESKTOP WORKSPACE IDENTITY / SELECTOR STABILITY
   Desktop only. Mobile header remains on the previously approved layout.
   ========================================================= */
@media (min-width:761px){
  #appView .topbar{
    padding-top:13px!important;
    padding-bottom:13px!important;
  }

  #appView .topbar-brand{
    gap:13px!important;
  }

  #appView .workspace-brand-mark{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    border-radius:14px!important;
  }

  #appView .workspace-brand-mark.has-logo img{
    padding:3px!important;
  }

  #appView .topbar-brand .eyebrow{
    font-size:.72rem!important;
    letter-spacing:.14em!important;
  }

  #appView .topbar h2{
    margin-top:3px!important;
    font-size:1.02rem!important;
    line-height:1.18!important;
    font-weight:680!important;
  }

  #appView .topbar-actions{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
  }

  #appView .topbar-actions .workspace-profile-control{
    display:inline-flex!important;
    align-items:center!important;
    min-height:40px!important;
    flex:0 0 auto!important;
    margin-right:1px!important;
  }

  #appView .topbar-actions .workspace-profile-badge,
  #appView .topbar-actions .workspace-profile-select-wrap{
    min-height:40px!important;
    height:40px!important;
    padding:0 12px!important;
    border-radius:12px!important;
    border:1px solid #D8CCC1!important;
    background:#FFFDFC!important;
    color:#403934!important;
    font-size:.76rem!important;
    font-weight:720!important;
    gap:7px!important;
    line-height:1!important;
    box-shadow:none!important;
  }

  #appView .topbar-actions .workspace-profile-select-wrap{
    padding-right:10px!important;
  }

  #appView .topbar-actions .workspace-profile-select{
    width:auto!important;
    min-width:72px!important;
    max-width:none!important;
    height:38px!important;
    padding:0 18px 0 0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    cursor:pointer!important;
  }

  #appView .topbar-actions .workspace-profile-chevron{
    right:9px!important;
  }

  #appView .topbar-actions .workspace-profile-dot{
    width:8px!important;
    height:8px!important;
  }
}

/* V2.3.46 — searchable customer selector in New Order */
.order-customer-field{position:relative;min-width:0}
.order-customer-picker{position:relative;min-width:0}
.order-customer-search-input{width:100%;padding-right:36px!important}
.order-customer-results{
  position:absolute;z-index:80;left:0;right:0;top:calc(100% - 17px);
  max-height:290px;overflow:auto;background:#fffefa;border:1px solid #d8cbc2;
  border-radius:13px;box-shadow:0 16px 34px rgba(55,39,47,.16);padding:5px
}
.order-customer-result{
  width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:10px 11px;border:0;border-radius:9px;background:transparent;text-align:left;
  color:#4b3942;cursor:pointer
}
.order-customer-result strong{font-size:.78rem;font-weight:700}
.order-customer-result small{font-size:.67rem;color:#8b7c82;font-weight:500}
.order-customer-result:hover,.order-customer-result.active{background:#f5eee8}
.order-customer-no-match{padding:13px 11px;color:#8d7f84;font-size:.72rem}
.order-customer-help{display:block;margin-top:5px}
@media(max-width:760px){
  .order-customer-results{max-height:240px}
  .order-customer-result{min-height:48px;padding:11px}
}


/* =========================================================
   V2.3.46 — MOBILE PREMIUM HEADER + CHOICE SHEETS + TOASTS
   Dedicated phone-only polish requested during live QA.
   Desktop layout and working screen layouts remain unchanged.
   ========================================================= */

/* Premium feedback cards — shared across desktop/mobile, compact on desktop. */
#toast.toast,
.dialog-toast{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:10px;
  width:min(420px,calc(100vw - 28px));
  padding:11px 13px!important;
  border:1px solid rgba(107,93,84,.16)!important;
  border-radius:16px!important;
  background:rgba(255,253,250,.98)!important;
  color:#3F3731!important;
  box-shadow:0 16px 38px rgba(49,39,43,.18)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
#toast.toast{top:16px!important;z-index:250!important}
.fitflow-toast-icon{
  width:36px;height:36px;display:grid;place-items:center;
  border-radius:11px;background:#EEF1F4;color:#5D6976;
  font-size:.86rem;font-weight:900;
}
.fitflow-toast-copy{display:grid;gap:2px;min-width:0}
.fitflow-toast-copy strong{font-size:.72rem;line-height:1.2;color:#3F3731}
.fitflow-toast-copy small{font-size:.65rem;line-height:1.35;color:#756B65;overflow-wrap:anywhere}
#toast[data-tone="success"] .fitflow-toast-icon,.dialog-toast[data-tone="success"] .fitflow-toast-icon{background:#E7F0EA;color:#4F765E}
#toast[data-tone="warning"] .fitflow-toast-icon,.dialog-toast[data-tone="warning"] .fitflow-toast-icon{background:#FFF3D8;color:#9A6A18}
#toast[data-tone="error"] .fitflow-toast-icon,.dialog-toast[data-tone="error"] .fitflow-toast-icon{background:#FAE8E4;color:#A45343}
#toast[data-tone="info"] .fitflow-toast-icon,.dialog-toast[data-tone="info"] .fitflow-toast-icon{background:#E9EEF3;color:#5C6E82}

/* Branded choice sheet replaces Android's dark native picker for key mobile actions. */
.fitflow-choice-sheet{
  width:min(520px,calc(100% - 20px));
  max-width:520px;
  margin:auto auto 10px;
  padding:0;
  border:0;
  border-radius:24px;
  background:transparent;
  color:#3F3731;
  overflow:visible;
}
.fitflow-choice-sheet::backdrop{background:rgba(31,27,29,.46);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.fitflow-choice-card{
  overflow:hidden;
  border:1px solid rgba(121,105,95,.20);
  border-radius:24px;
  background:#FFFDF9;
  box-shadow:0 24px 55px rgba(35,28,31,.26);
}
.fitflow-choice-handle{width:42px;height:4px;margin:9px auto 0;border-radius:999px;background:#D8CEC6}
.fitflow-choice-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:13px 16px 12px;border-bottom:1px solid #E9E1DA}
.fitflow-choice-head>div{min-width:0}
.fitflow-choice-head h3{margin:3px 0 0;font-family:Georgia,serif;font-size:1.05rem;font-weight:500;line-height:1.2;color:#403833}
.fitflow-choice-head p{margin:4px 0 0;color:#81766E;font-size:.64rem;line-height:1.4}
.fitflow-choice-close{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;padding:0!important;border:0!important;border-radius:11px!important;background:#F3ECE7!important;color:#7A625A!important;font-size:1.05rem!important;box-shadow:none!important}
.fitflow-choice-options{display:grid;gap:6px;max-height:min(62dvh,520px);overflow:auto;padding:10px 11px 12px;overscroll-behavior:contain}
.fitflow-choice-option{
  width:100%;min-height:52px!important;display:grid!important;grid-template-columns:34px minmax(0,1fr) 30px;align-items:center;gap:10px;
  padding:8px 10px!important;border:1px solid #E7DED7!important;border-radius:14px!important;background:#FBF8F4!important;color:#433A35!important;
  text-align:left!important;box-shadow:none!important
}
.fitflow-choice-option.selected{border-color:#B8C3CF!important;background:#F1F4F7!important}
.fitflow-choice-index{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#F1E8E2;color:#A16452;font-size:.54rem;font-weight:850;letter-spacing:.04em}
.fitflow-choice-option.selected .fitflow-choice-index{background:#E3EAF0;color:#5D7084}
.fitflow-choice-label{font-size:.83rem;font-weight:720;line-height:1.2}
.fitflow-choice-check{width:26px;height:26px;display:grid;place-items:center;border-radius:9px;background:transparent;color:#60758A;font-size:.82rem;font-weight:900}
.fitflow-choice-option.selected .fitflow-choice-check{background:#E3EAF0}

.workspace-profile-mobile-button,.garment-status-mobile-trigger{display:none}

@media(max-width:760px){
  /* Header follows the user's sketch direction: identity row + one clean action row. */
  #appView .topbar{
    display:block!important;
    padding:10px 12px 9px!important;
    min-height:0!important;
    background:rgba(250,248,244,.98)!important;
  }
  #appView .topbar-brand{
    display:grid!important;
    grid-template-columns:60px minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
  }
  #appView .workspace-brand-mark{
    grid-column:1!important;grid-row:1!important;
    width:60px!important;height:60px!important;min-width:60px!important;min-height:60px!important;
    border-radius:15px!important;
    box-shadow:0 3px 11px rgba(63,55,49,.09)!important;
  }
  #appView .topbar-brand>div:last-child{
    grid-column:2!important;grid-row:1!important;
    min-width:0!important;padding:0!important;
  }
  #appView .topbar-brand .eyebrow{
    margin:0!important;font-size:.66rem!important;line-height:1.15!important;letter-spacing:.105em!important;font-weight:820!important;
  }
  #appView .topbar h2{
    margin:3px 0 0!important;max-width:none!important;
    font-size:.91rem!important;line-height:1.16!important;font-weight:760!important;
    white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important;
  }
  #appView .workspace-meta-row{margin-top:3px!important}
  #appView .workspace-role-badge{margin-top:0!important}

  #appView .topbar-actions{
    width:100%!important;height:auto!important;margin:8px 0 0!important;padding:0!important;
    display:flex!important;align-items:stretch!important;justify-content:stretch!important;gap:6px!important;
  }
  #appView .topbar-actions>.workspace-profile-control,
  #appView .topbar-actions>button{
    flex:1 1 0!important;min-width:0!important;width:auto!important;
  }
  #appView .topbar-actions>button,
  #appView .workspace-profile-mobile-button,
  #appView .workspace-profile-badge{
    min-height:42px!important;height:42px!important;margin:0!important;
    border:1px solid #D9CEC5!important;border-radius:12px!important;
    background:#FFFDFC!important;color:#403934!important;box-shadow:none!important;
  }
  #appView .topbar-actions>button,
  #appView .workspace-profile-mobile-button{
    padding:6px 7px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;
    font-size:.61rem!important;font-weight:740!important;white-space:nowrap!important;
  }
  #appView .header-action-icon,
  #appView .owner-alerts-bell{
    width:22px!important;height:22px!important;min-width:22px!important;
    display:grid!important;place-items:center!important;border:0!important;border-radius:7px!important;
    background:#F1ECE7!important;color:#665B55!important;font-size:.66rem!important;font-weight:800!important;
  }
  #appView .owner-alerts-label,#appView .settings-trigger>span:last-child,#appView .quiet-logout>span:last-child{
    display:inline!important;font-size:.60rem!important;font-weight:740!important;
  }
  #appView .owner-alerts-count{top:-5px!important;right:-4px!important}

  /* Mobile workspace uses the branded sheet; desktop retains the native compact selector. */
  #appView .workspace-profile-control{display:flex!important;align-items:stretch!important;min-height:42px!important}
  #appView .workspace-profile-desktop-control{display:none!important}
  #appView .workspace-profile-mobile-button{width:100%!important;position:relative!important}
  #appView .workspace-profile-mobile-button .workspace-profile-dot{width:8px!important;height:8px!important;flex:0 0 auto!important}
  #appView .workspace-profile-mobile-chevron{font-size:.72rem;opacity:.58;margin-left:1px}
  #appView .workspace-profile-mobile-button.ladies{background:#FFFDFC!important}
  #appView .workspace-profile-mobile-button.gents{background:#FAF8F5!important}
  #appView .workspace-profile-badge{
    width:100%!important;padding:0 8px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
    font-size:.61rem!important;font-weight:740!important;
  }

  /* Replace native status picker on phone with branded action sheet trigger. */
  .garment-status-cell .garment-status-select{display:none!important}
  .garment-status-mobile-trigger{
    width:100%!important;min-height:46px!important;padding:9px 12px!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;
    border:1px solid #CBD6E0!important;border-radius:13px!important;background:#EEF3F7!important;color:#5A7082!important;
    font-size:.80rem!important;font-weight:720!important;box-shadow:none!important;text-align:left!important;
  }
  .garment-status-mobile-chevron{font-size:.85rem;opacity:.62}

  #toast.toast{
    top:12px!important;width:calc(100vw - 24px)!important;max-width:430px!important;
    grid-template-columns:40px minmax(0,1fr)!important;padding:12px 13px!important;border-radius:17px!important;
  }
  .fitflow-toast-icon{width:38px;height:38px;border-radius:12px}
  .fitflow-toast-copy strong{font-size:.76rem}
  .fitflow-toast-copy small{font-size:.68rem}
  .dialog-toast{width:calc(100% - 20px)!important;max-width:none!important}

  .fitflow-choice-sheet{width:calc(100% - 20px);margin:auto auto 8px;border-radius:23px}
  .fitflow-choice-card{border-radius:23px}
  .fitflow-choice-head{padding:13px 14px 11px}
  .fitflow-choice-head h3{font-size:1.08rem}
  .fitflow-choice-options{padding:9px 10px 11px;max-height:62dvh}
  .fitflow-choice-option{min-height:54px!important}
}

@media(max-width:390px){
  #appView .topbar{padding-inline:10px!important}
  #appView .topbar-brand{grid-template-columns:56px minmax(0,1fr)!important;gap:9px!important}
  #appView .workspace-brand-mark{width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important}
  #appView .topbar h2{font-size:.84rem!important}
  #appView .topbar-actions{gap:4px!important}
  #appView .topbar-actions>button,#appView .workspace-profile-mobile-button,#appView .workspace-profile-badge{padding-inline:4px!important}
  #appView .owner-alerts-label,#appView .settings-trigger>span:last-child,#appView .quiet-logout>span:last-child,#appView .workspace-profile-mobile-button,#appView .workspace-profile-badge{font-size:.55rem!important}
  #appView .header-action-icon,#appView .owner-alerts-bell{width:20px!important;height:20px!important;min-width:20px!important}
}

@media(min-width:761px){
  .workspace-profile-mobile-button{display:none!important}
  .workspace-profile-desktop-control{display:inline-flex!important}
  .garment-status-mobile-trigger{display:none!important}
}

/* =========================================================
   V2.3.46 — DESKTOP + MOBILE CONTROL REFINEMENT PASS
   Live-QA corrections: aligned intake fields, equal header controls,
   improved settings readability, custom workspace/boutique selectors.
   ========================================================= */

/* New customer: keep all field captions and input boxes on the same baseline. */
.customer-intake-grid>label{
  display:grid!important;
  grid-template-rows:auto 48px auto!important;
  align-content:start!important;
  gap:5px!important;
  min-width:0!important;
  margin:0!important;
}
.customer-field-label{
  min-height:18px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  color:#675A54;
  font-size:.70rem;
  line-height:1.2;
  font-weight:560;
}
.customer-field-label em{
  flex:0 0 auto;
  margin:0!important;
  font-style:normal!important;
  font-size:.54rem!important;
  letter-spacing:.055em!important;
  text-transform:uppercase;
}
.customer-intake-grid>label>input,
.customer-intake-grid>label>select{
  height:48px!important;
  min-height:48px!important;
  margin:0!important;
  align-self:start!important;
}
.customer-intake-grid>label>.input-help,
.customer-intake-grid>label>.duplicate-customer-hint{
  margin:0!important;
  padding-top:2px;
}

/* Universal FitFlow workspace button. No native browser <select> remains. */
.workspace-profile-control{display:inline-flex;align-items:center;min-width:0}
.workspace-profile-button{
  border:1px solid #D8CCC1;
  background:#FFFDFC;
  color:#403934;
  box-shadow:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-weight:720;
  white-space:nowrap;
}
.workspace-profile-button-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.workspace-profile-button .workspace-profile-chevron{position:static!important;transform:none!important;margin-left:auto;opacity:.58;pointer-events:none}
.workspace-profile-button.ladies{background:#FFFDFC}
.workspace-profile-button.gents{background:#FBF8F4}

/* Desktop: four operational controls share identical geometry. */
@media(min-width:761px){
  #appView .topbar-actions{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
  }
  #appView .topbar-actions>.workspace-profile-control,
  #appView .topbar-actions>button{
    flex:0 0 108px!important;
    width:108px!important;
    min-width:108px!important;
    max-width:108px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
  }
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions>button{
    width:108px!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 10px!important;
    border:1px solid #D8CCC1!important;
    border-radius:12px!important;
    background:#FFFDFC!important;
    color:#403934!important;
    box-shadow:none!important;
    font-size:.73rem!important;
    line-height:1!important;
  }
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
  }
  #appView .workspace-profile-button .workspace-profile-chevron{margin-left:3px!important}
  #appView .owner-alerts-trigger,
  #appView .settings-trigger,
  #appView .quiet-logout{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
  }
  #appView .header-action-icon,
  #appView .owner-alerts-bell{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:8px!important;
    background:#F1ECE7!important;
    color:#665B55!important;
    border:0!important;
    font-size:.70rem!important;
  }
  #appView .quiet-logout>span{font-size:.73rem!important;font-weight:700!important}
  #appView .topbar h2{font-size:1.04rem!important;color:#352F2B!important;font-weight:690!important}
  #appView .topbar-brand .eyebrow{color:#A55E4B!important}
}

/* Desktop custom workspace menu. */
.fitflow-select-popover{
  position:fixed;
  z-index:1200;
  display:grid;
  gap:5px;
  padding:6px;
  border:1px solid #D8CEC5;
  border-radius:14px;
  background:#FFFDFB;
  box-shadow:0 16px 34px rgba(49,39,43,.18);
}
.fitflow-select-option{
  width:100%;
  min-height:40px;
  display:grid;
  grid-template-columns:10px minmax(0,1fr) 24px;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:#463D38;
  text-align:left;
  font-size:.74rem;
  font-weight:650;
  cursor:pointer;
}
.fitflow-select-option:hover{background:#F7F2EE}
.fitflow-select-option.selected{background:#EEF2F5;border-color:#D4DDE4;color:#4F6477}
.fitflow-select-option-dot{width:7px;height:7px;border-radius:50%;background:#A8A09A}
.fitflow-select-option.selected .fitflow-select-option-dot{background:#657B8F}
.fitflow-select-option-check{display:grid;place-items:center;color:#5F7487;font-weight:850}

/* Boutique type uses a FitFlow-controlled choice button, never native picker. */
.fitflow-field-choice-button{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid #D8CEC5;
  border-radius:12px;
  background:#FFFDFC;
  color:#443B36;
  box-shadow:none;
  cursor:pointer;
  text-align:left;
}
.fitflow-field-choice-copy{display:flex;align-items:center;gap:9px;min-width:0}
.fitflow-field-choice-copy strong{font-size:.78rem;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fitflow-field-choice-dot{width:8px;height:8px;border-radius:50%;background:#728294;flex:0 0 auto}
.fitflow-field-choice-chevron{font-size:.78rem;color:#8A7D74;flex:0 0 auto}

/* Settings: modest readability lift without changing approved layout. */
.settings-screen{color:#443A35}
.settings-screen-head .muted{color:#746A64!important;font-size:.78rem!important}
.settings-group-label{font-size:.67rem!important;color:#74675F!important;font-weight:760!important}
.settings-card-copy strong{font-size:.84rem!important;color:#403833!important;font-weight:650!important}
.settings-card-copy small{font-size:.70rem!important;color:#756A63!important;line-height:1.38!important}
.settings-card-meta{font-size:.68rem!important;color:#665B54!important}
.settings-account-strip span{font-size:.69rem!important;color:#776B64!important}
.settings-account-strip strong{font-size:.88rem!important;color:#352F2B!important}
.settings-role-pill{font-size:.67rem!important}
.settings-help{font-size:.70rem!important;color:#746A63!important;line-height:1.4!important}
.settings-subhead{font-size:.69rem!important;color:#6C615B!important}
.settings-info-box span{font-size:.70rem!important;color:#71665F!important}
.settings-info-box strong{font-size:.78rem!important}
.settings-card{min-height:52px}

@media(max-width:760px){
  /* Four equal controls under the identity row: profile, Alerts, Settings, Logout. */
  #appView .topbar-actions{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
  }
  #appView .topbar-actions>.workspace-profile-control,
  #appView .topbar-actions>button{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:42px!important;
    min-height:42px!important;
    flex:none!important;
  }
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions>button{
    width:100%!important;
    height:42px!important;
    min-height:42px!important;
    padding:5px 5px!important;
    border-radius:11px!important;
    border:1px solid #D9CEC5!important;
    background:#FFFDFC!important;
    color:#403934!important;
    box-shadow:none!important;
    font-size:.57rem!important;
    font-weight:720!important;
  }
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
  }
  #appView .workspace-profile-button .workspace-profile-chevron{margin-left:1px!important}
  #appView .owner-alerts-label,
  #appView .settings-trigger>span:last-child,
  #appView .quiet-logout>span:last-child{font-size:.57rem!important}
  #appView .header-action-icon,
  #appView .owner-alerts-bell{
    width:20px!important;height:20px!important;min-width:20px!important;border-radius:7px!important
  }
  /* Logout intentionally has no icon. */
  #appView .quiet-logout{gap:0!important}

  .customer-intake-grid>label{grid-template-rows:auto 48px auto!important}
  .customer-field-label{font-size:.72rem}

  /* Choice sheet remains the only profile picker on phone. */
  .fitflow-choice-sheet{width:calc(100% - 22px)!important;margin:auto auto 10px!important}
  .fitflow-choice-card{background:#FFFDFB!important}
  .fitflow-choice-option{background:#FBF8F4!important;color:#433A35!important}
  .fitflow-choice-option.selected{background:#EEF3F7!important;border-color:#C9D5DF!important}
}

@media(max-width:390px){
  #appView .topbar-actions{gap:4px!important}
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions>button{padding-inline:3px!important;font-size:.53rem!important}
  #appView .owner-alerts-label,#appView .settings-trigger>span:last-child,#appView .quiet-logout>span:last-child{font-size:.53rem!important}
}

/* =========================================================
   V2.3.46 — Final garment structure & UI refinement
   ========================================================= */

/* Saved measurement identity: TOP / BOTTOM must be unmistakable. */
.template-pill,
.measurement-template-badge,
.history-template-tags b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:4px 9px;
  border:1px solid #C9D4DC;
  border-radius:999px;
  background:#EAF0F4;
  color:#344E60!important;
  font-size:.68rem!important;
  line-height:1;
  font-weight:800!important;
  letter-spacing:.055em;
}
.history-measurement-meta,
.measurement-profile-meta{
  display:flex!important;
  align-items:center;
  flex-wrap:wrap;
  gap:7px!important;
  margin-top:5px;
}
.history-template-tags{display:inline-flex;align-items:center;gap:5px}

/* New Order: Priority must never be clipped at desktop widths. */
.refined-order-basics{
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.9fr)!important;
}
.order-priority-field{min-width:0!important;overflow:visible!important}
.order-priority-field select{padding-right:34px!important;text-overflow:ellipsis}
.compact-order-basics{overflow:visible!important}
@media (min-width:921px) and (max-width:1100px){
  .order-workbench{
    grid-template-columns:minmax(280px,.72fr) minmax(0,1.35fr)!important;
  }
  .refined-order-basics{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr) minmax(0,.8fr)!important;
    gap:10px!important;
  }
}

/* Reusable multi-piece garment component editor. */
.boutique-component-editor{
  display:grid;
  gap:8px;
  margin-top:2px;
  padding:10px;
  border:1px solid #D7E0E5;
  border-radius:12px;
  background:#F6F9FA;
}
.boutique-component-editor.hidden{display:none!important}
.boutique-component-editor-head{display:grid;gap:2px}
.boutique-component-editor-head strong{font-size:.72rem;color:#3E4C55}
.boutique-component-editor-head small{font-size:.62rem;line-height:1.35;color:#74818A}
.boutique-component-row{
  display:grid;
  grid-template-columns:30px minmax(0,1.25fr) minmax(125px,.75fr);
  gap:8px;
  align-items:end;
}
.boutique-component-number{
  width:28px;height:40px;border-radius:9px;background:#E5EDF2;color:#476274;
  display:grid;place-items:center;font-size:.7rem;font-weight:800;
}
.boutique-component-row label{margin:0!important;min-width:0}
.boutique-component-row input,.boutique-component-row select{width:100%;min-width:0}
.garment-delete-btn{color:#A44D45!important;border-color:#E7C8C4!important;background:#FFF9F8!important}

@media(max-width:760px){
  .boutique-component-row{grid-template-columns:30px minmax(0,1fr)}
  .boutique-component-row label:last-child{grid-column:2}
  .garment-library-row-actions{flex-direction:row!important;flex-wrap:wrap!important}
}

/* =========================================================
   V2.3.46 — MOBILE-ONLY BALANCE & SETTINGS POLISH
   Requested after desktop logic QA. No desktop rules here.
   ========================================================= */
@media(max-width:760px){
  /* --- Compact two-row identity header, close to the earlier approved mobile composition. --- */
  #appView .topbar{
    display:grid!important;
    grid-template-columns:62px minmax(0,1fr)!important;
    grid-template-rows:auto 40px!important;
    column-gap:10px!important;
    row-gap:7px!important;
    align-items:stretch!important;
    padding:9px 11px!important;
    min-height:0!important;
    background:rgba(250,248,244,.985)!important;
  }
  #appView .topbar-brand{display:contents!important}
  #appView .workspace-brand-mark{
    grid-column:1!important;
    grid-row:1 / 3!important;
    width:62px!important;height:62px!important;
    min-width:62px!important;min-height:62px!important;
    align-self:center!important;justify-self:start!important;
    border-radius:15px!important;
    box-shadow:0 4px 12px rgba(63,55,49,.08)!important;
  }
  #appView .topbar-brand>div:last-child{
    grid-column:2!important;grid-row:1!important;
    min-width:0!important;width:100%!important;
    padding:0!important;align-self:center!important;
  }
  #appView .topbar-brand .eyebrow{
    margin:0!important;font-size:.64rem!important;line-height:1.1!important;
    letter-spacing:.11em!important;font-weight:820!important;
  }
  #appView .topbar h2{
    margin:3px 0 0!important;max-width:none!important;
    font-size:.87rem!important;line-height:1.16!important;font-weight:760!important;
    white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important;
  }
  #appView .workspace-meta-row{display:none!important}
  #appView .topbar-actions{
    grid-column:2!important;grid-row:2!important;
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;width:100%!important;height:40px!important;
    margin:0!important;padding:0!important;position:static!important;
    align-items:stretch!important;
  }
  #appView .topbar-actions>.workspace-profile-control,
  #appView .topbar-actions>button{
    width:100%!important;min-width:0!important;max-width:none!important;
    height:40px!important;min-height:40px!important;margin:0!important;
  }
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions>button{
    width:100%!important;height:40px!important;min-height:40px!important;
    padding:4px 4px!important;border:1px solid #D9CEC5!important;
    border-radius:11px!important;background:#FFFDFC!important;color:#403934!important;
    box-shadow:0 1px 2px rgba(54,43,38,.025)!important;
    font-size:.56rem!important;font-weight:720!important;
  }
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge{
    display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;
  }
  #appView .owner-alerts-label,
  #appView .settings-trigger>span:last-child,
  #appView .quiet-logout>span:last-child{font-size:.55rem!important;font-weight:720!important}
  #appView .header-action-icon,
  #appView .owner-alerts-bell{
    width:20px!important;height:20px!important;min-width:20px!important;
    border-radius:7px!important;background:#F1ECE7!important;
  }
  #appView .quiet-logout{gap:0!important}

  /* --- Branded mobile selector: never use Android's black native settings picker. --- */
  #modal .settings-form select,
  #modal .team-access-settings select,
  #modal .settings-team-list select,
  #modal .measurement-template-editor select,
  #modal .invoice-settings-v2340 select{
    cursor:pointer!important;
  }
  .fitflow-choice-sheet{width:calc(100% - 18px)!important;margin:auto 9px 8px!important}
  .fitflow-choice-card{border-radius:22px!important;background:#FFFDFB!important}
  .fitflow-choice-head{padding:13px 14px 11px!important}
  .fitflow-choice-head h3{font-size:1.02rem!important}
  .fitflow-choice-head p{font-size:.69rem!important;line-height:1.38!important}
  .fitflow-choice-options{gap:7px!important;padding:9px 10px 11px!important}
  .fitflow-choice-option{
    min-height:54px!important;padding:9px 10px!important;
    grid-template-columns:32px minmax(0,1fr) 28px!important;
    border-radius:14px!important;background:#FBF8F4!important;
  }
  .fitflow-choice-label{font-size:.83rem!important;font-weight:700!important;line-height:1.28!important;white-space:normal!important}

  /* --- Settings: one consistent value typography and tighter vertical rhythm. --- */
  #modal .settings-form,
  #modal .team-access-settings{gap:12px!important}
  #modal .settings-form label,
  #modal .team-access-settings label{gap:6px!important;color:#6E625C!important;font-size:.73rem!important;font-weight:650!important}
  #modal .settings-form input:not([type="checkbox"]):not([type="radio"]),
  #modal .settings-form textarea,
  #modal .settings-form select,
  #modal .team-access-settings select,
  #modal .team-access-settings input:not([type="checkbox"]):not([type="radio"]),
  #modal .fitflow-field-choice-button{
    min-height:48px!important;
    padding:10px 13px!important;
    border-radius:14px!important;
    border-color:#DCCFC5!important;
    background:#FFFDFB!important;
    color:#334A40!important;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
    font-size:.93rem!important;
    font-weight:650!important;
    line-height:1.25!important;
    letter-spacing:0!important;
  }
  #modal .settings-form textarea{min-height:88px!important}
  #modal .settings-help,
  #modal .settings-info-box span{font-size:.65rem!important;line-height:1.38!important;color:#786D66!important}
  #modal .settings-subhead{font-size:.66rem!important;letter-spacing:.07em!important}
  #modal .order-workflow-controls-card,
  #modal .order-workflow-protected-card{padding:11px!important;border-radius:15px!important}
  #modal .team-access-member-row{border-radius:14px!important}

  /* --- Customer directory: compact information card + softer rounded actions. --- */
  #customersScreen .customer-directory-panel{
    border-radius:18px!important;overflow:hidden!important;background:#F8F5F1!important;
  }
  #customersScreen #customerList{
    display:grid!important;gap:8px!important;padding:8px!important;background:#F8F5F1!important;
  }
  #customersScreen .customer-card-row,
  #customersScreen .customer-card-row:nth-child(even){
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;margin:0!important;padding:13px!important;
    border:1px solid #E4D9D0!important;border-radius:16px!important;
    background:#FFFDF9!important;box-shadow:0 4px 12px rgba(57,43,39,.025)!important;
  }
  #customersScreen .customer-card-name{font-size:1.08rem!important;line-height:1.15!important;color:#493A35!important}
  #customersScreen .customer-card-contact{margin-top:5px!important;font-size:.72rem!important;line-height:1.32!important}
  #customersScreen .customer-card-meta{margin-top:8px!important;gap:6px!important}
  #customersScreen .customer-card-meta span{
    min-height:26px!important;padding:4px 9px!important;border-radius:999px!important;
    background:#F3EBE5!important;color:#786B66!important;font-size:.64rem!important;
  }
  #customersScreen .customer-card-actions{
    display:grid!important;grid-template-columns:1.12fr .72fr 1.05fr 44px!important;
    gap:6px!important;width:100%!important;margin-top:1px!important;
  }
  #customersScreen .customer-card-actions button{
    width:100%!important;min-width:0!important;min-height:42px!important;
    padding:7px 5px!important;border:1px solid #DCCFC5!important;border-radius:13px!important;
    background:#FFFDFC!important;color:#443B36!important;box-shadow:0 2px 5px rgba(61,45,40,.025)!important;
    font-size:.68rem!important;font-weight:680!important;
  }
  #customersScreen .customer-card-actions .measure-symbol-btn{
    background:#EEF3F6!important;border-color:#D4DFE5!important;color:#536B7B!important;font-size:.77rem!important;
  }
  #customersScreen .customer-card-actions button:nth-child(3){background:#F5F1EC!important}
  #customersScreen .customer-card-actions .mini-delete-btn{
    background:#FFF6F4!important;border-color:#E9CBC5!important;color:#A45B50!important;
  }

  /* --- Payment list: balanced identity, three compact figures and one action row. --- */
  #paymentsScreen .payment-section-list{display:grid!important;gap:8px!important;padding:8px!important}
  #paymentsScreen .payment-ledger-row,
  #paymentsScreen .payment-ledger-row:nth-child(even){
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;
    margin:0!important;padding:13px!important;border:1px solid #E4D8D0!important;
    border-radius:16px!important;background:#FFFDF9!important;box-shadow:0 4px 12px rgba(57,43,39,.025)!important;
  }
  #paymentsScreen .payment-order-identity{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;column-gap:8px!important;align-items:start!important}
  #paymentsScreen .payment-customer-line{grid-column:1 / -1!important}
  #paymentsScreen .payment-order-line{grid-column:1!important;margin-top:5px!important}
  #paymentsScreen .payment-garment-line{grid-column:2!important;grid-row:2!important;margin-top:5px!important;text-align:right!important}
  #paymentsScreen .payment-ledger-amounts{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;
  }
  #paymentsScreen .payment-ledger-amounts>div{
    min-width:0!important;padding:8px 7px!important;border:1px solid #E7DDD5!important;border-radius:11px!important;background:#FBF8F4!important;
  }
  #paymentsScreen .payment-ledger-amounts .balance-pending{background:#EEF7F1!important;border-color:#D7E8DC!important}
  #paymentsScreen .payment-ledger-amounts span{font-size:.54rem!important}
  #paymentsScreen .payment-ledger-amounts strong{font-size:.82rem!important;margin-top:3px!important}
  #paymentsScreen .payment-ledger-action{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;padding-top:0!important;
  }
  #paymentsScreen .payment-status-stack{justify-items:start!important}
  #paymentsScreen .payment-row-btn{min-height:40px!important;border-radius:12px!important;padding:7px 11px!important}

  /* --- Orders: less vertical stacking, Open belongs on the right. --- */
  #ordersScreen .order-status-group{border-radius:17px!important;margin-bottom:12px!important}
  #ordersScreen .order-group-head{padding:11px 12px!important}
  #ordersScreen .order-group-head>div{display:flex!important;align-items:center!important;gap:7px!important;flex-wrap:wrap!important}
  #ordersScreen .order-group-head h3{font-size:.94rem!important}
  #ordersScreen .order-group-list{display:grid!important;gap:0!important}
  #ordersScreen .order-group-list .list-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"main action" "status action"!important;
    column-gap:10px!important;row-gap:7px!important;
    align-items:center!important;padding:13px 12px!important;
    background:#FFFDF9!important;
  }
  #ordersScreen .order-group-list .list-row>div:first-child{grid-area:main!important;min-width:0!important}
  #ordersScreen .order-group-list .list-row>div:nth-child(2){grid-area:status!important;display:flex!important;gap:6px!important;flex-wrap:wrap!important}
  #ordersScreen .order-group-list .row-actions{
    grid-area:action!important;align-self:center!important;justify-self:end!important;display:flex!important;margin:0!important;
  }
  #ordersScreen .order-group-list .row-actions button{
    min-width:70px!important;min-height:40px!important;padding:7px 11px!important;
    border:1px solid #DCCFC5!important;border-radius:12px!important;background:#FFFDFC!important;
  }
  #ordersScreen .order-group-list .list-main{font-size:.78rem!important;line-height:1.32!important}
  #ordersScreen .order-group-list .list-sub{font-size:.67rem!important;line-height:1.3!important;margin-top:4px!important}

  /* --- Pricing & Payments: three actions always stay on one mobile row. --- */
  #orderDetailScreen .pricing-payments-section .order-section-head{gap:11px!important;margin-bottom:13px!important}
  #orderDetailScreen .pricing-payments-section .pricing-action-line{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;width:100%!important;margin-top:0!important;
  }
  #orderDetailScreen .pricing-payments-section .pricing-action-line button{
    width:100%!important;min-width:0!important;min-height:43px!important;
    padding:7px 5px!important;border-radius:12px!important;
    font-size:.62rem!important;line-height:1.15!important;white-space:normal!important;
  }
}

@media(max-width:390px){
  #appView .topbar{grid-template-columns:58px minmax(0,1fr)!important;column-gap:8px!important;padding-inline:9px!important}
  #appView .workspace-brand-mark{width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important}
  #appView .topbar h2{font-size:.80rem!important}
  #appView .topbar-actions{gap:4px!important}
  #appView .workspace-profile-button,#appView .workspace-profile-badge,#appView .topbar-actions>button{font-size:.51rem!important;padding-inline:2px!important}
  #appView .owner-alerts-label,#appView .settings-trigger>span:last-child,#appView .quiet-logout>span:last-child{font-size:.50rem!important}
  #customersScreen .customer-card-actions{grid-template-columns:1.1fr .68fr 1fr 42px!important;gap:5px!important}
  #orderDetailScreen .pricing-payments-section .pricing-action-line{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #orderDetailScreen .pricing-payments-section .pricing-action-line button{font-size:.57rem!important;padding-inline:3px!important}
}

/* =========================================================
   V2.3.46 — MOBILE HEADER + GARMENT ACTION ALIGNMENT FIX
   Requested after mobile dropdown stability patch.
   No logic changes. Styling only.
   ========================================================= */
@media(max-width:760px){
  /* --- Main mobile header: bigger logo + bigger boutique name + four controls aligned in one row. --- */
  #appView .topbar{
    grid-template-columns:72px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:12px!important;
    row-gap:10px!important;
    padding:11px 12px 12px!important;
    align-items:start!important;
  }
  #appView .workspace-brand-mark{
    grid-column:1!important;
    grid-row:1 / 3!important;
    width:72px!important;
    height:72px!important;
    min-width:72px!important;
    min-height:72px!important;
    border-radius:17px!important;
  }
  #appView .topbar-brand>div:last-child{
    grid-column:2!important;
    grid-row:1!important;
    align-self:end!important;
  }
  #appView .topbar-brand .eyebrow{
    font-size:.70rem!important;
    letter-spacing:.11em!important;
    margin:0 0 1px!important;
  }
  #appView .topbar h2{
    margin:2px 0 0!important;
    font-size:.98rem!important;
    line-height:1.14!important;
    font-weight:790!important;
    color:#3E3632!important;
  }
  #appView .topbar-actions{
    grid-column:2!important;
    grid-row:2!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
    height:auto!important;
    align-items:stretch!important;
  }
  #appView .topbar-actions > *{
    min-width:0!important;
    width:100%!important;
  }
  #appView .workspace-profile-control{
    display:block!important;
    min-height:0!important;
  }
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions>button{
    min-height:44px!important;
    height:44px!important;
    padding:6px 6px!important;
    border-radius:13px!important;
    font-size:.60rem!important;
    font-weight:730!important;
    box-shadow:0 2px 6px rgba(61,45,40,.03)!important;
  }
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge{
    justify-content:center!important;
    gap:5px!important;
  }
  #appView .owner-alerts-label,
  #appView .settings-trigger>span:last-child,
  #appView .quiet-logout>span:last-child,
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge{
    font-size:.60rem!important;
  }
  #appView .header-action-icon,
  #appView .owner-alerts-bell{
    width:21px!important;
    height:21px!important;
    min-width:21px!important;
    border-radius:8px!important;
  }

  /* --- Garment library reusable rows: balanced action block everywhere. --- */
  #modal .garment-library-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 138px!important;
    gap:10px!important;
    align-items:start!important;
  }
  #modal .garment-library-row-main{
    min-width:0!important;
    align-self:start!important;
  }
  #modal .garment-library-row-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-auto-rows:42px!important;
    gap:8px!important;
    align-self:start!important;
    justify-self:end!important;
    width:138px!important;
  }
  #modal .garment-library-row-actions .settings-mini-btn,
  #modal .garment-library-row-actions button{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    height:42px!important;
    margin:0!important;
    padding:7px 8px!important;
    border-radius:13px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }
  #modal .garment-library-row-actions button:nth-child(1){grid-column:1!important;grid-row:1!important}
  #modal .garment-library-row-actions button:nth-child(2){grid-column:2!important;grid-row:1!important}
  #modal .garment-library-row-actions button:nth-child(3){grid-column:1 / -1!important;grid-row:2!important}
  #modal .garment-library-row-actions button:only-child{grid-column:1 / -1!important}
}

@media(max-width:390px){
  #appView .topbar{
    grid-template-columns:68px minmax(0,1fr)!important;
    column-gap:10px!important;
    padding-inline:10px!important;
  }
  #appView .workspace-brand-mark{
    width:68px!important;
    height:68px!important;
    min-width:68px!important;
    min-height:68px!important;
  }
  #appView .topbar h2{font-size:.92rem!important}
  #appView .topbar-actions{gap:6px!important}
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions>button{
    min-height:42px!important;
    height:42px!important;
    font-size:.57rem!important;
  }
  #modal .garment-library-row{
    grid-template-columns:minmax(0,1fr) 126px!important;
  }
  #modal .garment-library-row-actions{
    width:126px!important;
    gap:7px!important;
  }
}

/* =========================================================
   V2.3.46 — MOBILE BRAND HEADER BALANCE FIX
   Requested to match the hand-drawn horizontal composition more closely.
   Styling only. No logic changes.
   ========================================================= */
@media(max-width:760px){
  /* Build a cleaner left-logo / right-content horizontal lockup. */
  #appView .topbar{
    display:flex!important;
    align-items:flex-start!important;
    gap:14px!important;
    padding:14px 14px 12px!important;
    min-height:0!important;
  }
  #appView .topbar-brand{
    display:flex!important;
    align-items:flex-start!important;
    gap:14px!important;
    width:100%!important;
    min-width:0!important;
  }
  #appView .workspace-brand-mark{
    flex:0 0 90px!important;
    width:90px!important;
    height:90px!important;
    min-width:90px!important;
    min-height:90px!important;
    border-radius:18px!important;
    align-self:flex-start!important;
  }
  #appView .topbar-brand > div:last-child{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:8px!important;
    min-width:0!important;
    width:100%!important;
    padding-top:2px!important;
  }
  #appView .topbar-brand .eyebrow{
    margin:0!important;
    font-size:.72rem!important;
    line-height:1.05!important;
    letter-spacing:.12em!important;
    font-weight:820!important;
  }
  #appView .topbar h2{
    margin:0!important;
    font-size:1rem!important;
    line-height:1.12!important;
    font-weight:790!important;
    color:#3D3631!important;
    white-space:normal!important;
  }

  /* Keep the profile control + buttons in one balanced row under the name. */
  #appView .topbar-actions{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    gap:8px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  #appView .topbar-actions > *{
    flex:1 1 0!important;
    min-width:0!important;
    width:auto!important;
  }
  #appView .workspace-profile-control{
    flex:1.05 1.05 0!important;
    display:block!important;
  }
  #appView .topbar-actions > button{
    flex:1 1 0!important;
  }
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions > button{
    width:100%!important;
    min-height:46px!important;
    height:46px!important;
    padding:7px 8px!important;
    border-radius:14px!important;
    justify-content:center!important;
    gap:6px!important;
    font-size:.61rem!important;
    font-weight:740!important;
    box-shadow:0 2px 8px rgba(63,55,49,.04)!important;
  }
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge{
    display:flex!important;
    align-items:center!important;
  }
  #appView .workspace-profile-button .workspace-profile-chevron{margin-left:2px!important}
  #appView .owner-alerts-label,
  #appView .settings-trigger > span:last-child,
  #appView .quiet-logout > span:last-child,
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge{
    font-size:.61rem!important;
    line-height:1.1!important;
  }
  #appView .header-action-icon,
  #appView .owner-alerts-bell{
    width:20px!important;
    height:20px!important;
    min-width:20px!important;
    border-radius:8px!important;
  }
}

@media(max-width:390px){
  #appView .topbar{
    gap:11px!important;
    padding:12px 10px 10px!important;
  }
  #appView .topbar-brand{
    gap:11px!important;
  }
  #appView .workspace-brand-mark{
    flex-basis:78px!important;
    width:78px!important;
    height:78px!important;
    min-width:78px!important;
    min-height:78px!important;
  }
  #appView .topbar-brand .eyebrow{font-size:.67rem!important}
  #appView .topbar h2{font-size:.93rem!important}
  #appView .topbar-actions{gap:6px!important}
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions > button{
    min-height:44px!important;
    height:44px!important;
    padding:6px 6px!important;
    font-size:.57rem!important;
  }
  #appView .owner-alerts-label,
  #appView .settings-trigger > span:last-child,
  #appView .quiet-logout > span:last-child,
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge{
    font-size:.57rem!important;
  }
}

/* =========================================================
   V2.3.46 — MOBILE HEADER DESIGNER FIX
   Corrects horizontal overflow from the previous flex experiment.
   Logo left; brand text right; 4 controls in one exact-width row.
   Mobile only. No business-logic changes.
   ========================================================= */
@media(max-width:760px){
  html,body,#appView,.app-shell{
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  #appView .topbar{
    display:grid!important;
    grid-template-columns:82px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:10px!important;
    row-gap:7px!important;
    align-items:center!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:10px 12px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  #appView .topbar-brand{
    display:contents!important;
  }

  #appView .workspace-brand-mark{
    grid-column:1!important;
    grid-row:1 / 3!important;
    width:82px!important;
    height:82px!important;
    min-width:82px!important;
    min-height:82px!important;
    max-width:82px!important;
    max-height:82px!important;
    align-self:center!important;
    justify-self:start!important;
    border-radius:17px!important;
    box-shadow:0 4px 12px rgba(63,55,49,.07)!important;
  }

  #appView .topbar-brand>div:last-child{
    grid-column:2!important;
    grid-row:1!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
    align-self:end!important;
  }

  #appView .topbar-brand .eyebrow{
    margin:0!important;
    font-size:.69rem!important;
    line-height:1.05!important;
    letter-spacing:.115em!important;
    font-weight:820!important;
    white-space:nowrap!important;
  }

  #appView .topbar h2{
    margin:3px 0 0!important;
    width:100%!important;
    max-width:100%!important;
    font-size:.94rem!important;
    line-height:1.12!important;
    font-weight:790!important;
    color:#3D3631!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  #appView .workspace-meta-row{
    display:none!important;
  }

  #appView .topbar-actions{
    grid-column:2!important;
    grid-row:2!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
    align-items:stretch!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:40px!important;
    margin:0!important;
    padding:0!important;
    position:static!important;
    overflow:visible!important;
  }

  #appView .topbar-actions>.workspace-profile-control,
  #appView .topbar-actions>button{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:40px!important;
    min-height:40px!important;
    margin:0!important;
  }

  #appView .workspace-profile-control{
    display:block!important;
  }

  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions>button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:40px!important;
    min-height:40px!important;
    padding:4px 3px!important;
    border-radius:12px!important;
    border:1px solid #D9CEC5!important;
    background:#FFFDFC!important;
    color:#403934!important;
    box-shadow:0 1px 3px rgba(54,43,38,.025)!important;
    font-size:clamp(9px,2.55vw,11px)!important;
    line-height:1!important;
    font-weight:730!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }

  #appView .workspace-profile-button-label,
  #appView .owner-alerts-label,
  #appView .settings-trigger>span:last-child,
  #appView .quiet-logout>span:last-child{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:inherit!important;
    line-height:1!important;
  }

  #appView .header-action-icon,
  #appView .owner-alerts-bell{
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    flex:0 0 18px!important;
    border-radius:7px!important;
    font-size:.66rem!important;
  }

  #appView .workspace-profile-dot{
    width:7px!important;
    height:7px!important;
    min-width:7px!important;
    flex:0 0 7px!important;
  }

  #appView .workspace-profile-button .workspace-profile-chevron{
    position:static!important;
    transform:none!important;
    margin-left:0!important;
    flex:0 0 auto!important;
    font-size:.65rem!important;
  }
}

@media(max-width:390px){
  #appView .topbar{
    grid-template-columns:74px minmax(0,1fr)!important;
    column-gap:8px!important;
    row-gap:6px!important;
    padding:9px 9px!important;
  }

  #appView .workspace-brand-mark{
    width:74px!important;
    height:74px!important;
    min-width:74px!important;
    min-height:74px!important;
    max-width:74px!important;
    max-height:74px!important;
    border-radius:15px!important;
  }

  #appView .topbar-brand .eyebrow{
    font-size:.63rem!important;
  }

  #appView .topbar h2{
    font-size:.84rem!important;
    line-height:1.12!important;
  }

  #appView .topbar-actions{
    gap:4px!important;
    height:38px!important;
  }

  #appView .topbar-actions>.workspace-profile-control,
  #appView .topbar-actions>button,
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge{
    height:38px!important;
    min-height:38px!important;
  }

  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions>button{
    padding-inline:2px!important;
    gap:2px!important;
    border-radius:11px!important;
    font-size:clamp(8.5px,2.45vw,10px)!important;
  }

  #appView .header-action-icon,
  #appView .owner-alerts-bell{
    width:16px!important;
    height:16px!important;
    min-width:16px!important;
    flex-basis:16px!important;
  }
}

/* =========================================================
   V2.3.46 — MOBILE HEADER CONTROLS SAME-ROW FIX
   Place Ladies/Gents, Alerts, Settings, Logout in one row
   beside/below the brand text with enough header height.
   Styling only. No logic changes.
   ========================================================= */
@media (max-width: 760px) {
  #appView .topbar,
  #appView .topbar-brand,
  #appView .topbar-brand > div:last-child {
    overflow: visible !important;
  }

  #appView .topbar {
    padding: 14px 14px 14px !important;
  }

  #appView .topbar-brand {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    align-items: start !important;
    width: 100% !important;
  }

  #appView .workspace-brand-mark {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    min-height: 92px !important;
    align-self: start !important;
  }

  #appView .topbar-brand > div:last-child {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    row-gap: 10px !important;
    align-content: start !important;
    min-width: 0 !important;
    width: 100% !important;
    padding-top: 2px !important;
  }

  #appView .topbar h2 {
    font-size: 1rem !important;
    line-height: 1.12 !important;
    margin: 0 !important;
  }

  #appView .topbar-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
  }

  #appView .topbar-actions > *,
  #appView .workspace-profile-control {
    width: 100% !important;
    min-width: 0 !important;
  }

  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions > button {
    width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 6px 6px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: 0.56rem !important;
    line-height: 1.05 !important;
    font-weight: 760 !important;
    white-space: nowrap !important;
  }

  #appView .owner-alerts-label,
  #appView .settings-trigger > span:last-child,
  #appView .quiet-logout > span:last-child,
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge {
    font-size: 0.56rem !important;
    line-height: 1.05 !important;
  }

  #appView .header-action-icon,
  #appView .owner-alerts-bell {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
  }
}

@media (max-width: 390px) {
  #appView .topbar-brand {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    column-gap: 10px !important;
  }

  #appView .workspace-brand-mark {
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    min-height: 84px !important;
  }

  #appView .topbar h2 {
    font-size: 0.95rem !important;
  }

  #appView .topbar-actions {
    gap: 5px !important;
  }

  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions > button {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 0.53rem !important;
    padding: 5px 5px !important;
  }

  #appView .owner-alerts-label,
  #appView .settings-trigger > span:last-child,
  #appView .quiet-logout > span:last-child,
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge {
    font-size: 0.53rem !important;
  }
}

/* =========================================================
   V2.3.46 — MOBILE HEADER FINAL BALANCED FIX
   Approved direction:
   Row 1: logo + brand text
   Row 2: full-width control row in the right column
   No overflow, no overlap, no hidden buttons.
   Styling only. No logic changes.
   ========================================================= */
@media (max-width: 760px) {
  #appView {
    overflow-x: hidden !important;
  }

  #appView .topbar {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    align-items: start !important;
    padding: 14px 14px 12px !important;
    overflow: visible !important;
  }

  #appView .topbar-brand {
    display: contents !important;
  }

  #appView .workspace-brand-mark {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 94px !important;
    height: 94px !important;
    min-width: 94px !important;
    min-height: 94px !important;
    border-radius: 20px !important;
    align-self: start !important;
    justify-self: start !important;
    box-shadow: 0 2px 10px rgba(63,55,49,.05) !important;
  }

  #appView .topbar-brand > div:last-child {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: visible !important;
    padding-top: 2px !important;
  }

  #appView .topbar-brand .eyebrow {
    margin: 0 !important;
    font-size: .78rem !important;
    line-height: 1.05 !important;
    letter-spacing: .11em !important;
    font-weight: 820 !important;
  }

  #appView .topbar h2 {
    margin: 0 !important;
    font-size: 1.04rem !important;
    line-height: 1.08 !important;
    font-weight: 790 !important;
    color: #3c3531 !important;
    white-space: normal !important;
    word-break: normal !important;
    max-width: 100% !important;
  }

  /* Move old meta row out of the way on mobile; profile control lives in actions row. */
  #appView .workspace-meta-row {
    display: none !important;
  }

  #appView .topbar-actions {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  #appView .topbar-actions > *,
  #appView .workspace-profile-control {
    min-width: 0 !important;
    width: 100% !important;
  }

  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions > button {
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 6px 8px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: .62rem !important;
    line-height: 1.08 !important;
    font-weight: 760 !important;
    box-shadow: 0 2px 8px rgba(63,55,49,.04) !important;
  }

  #appView .owner-alerts-label,
  #appView .settings-trigger > span:last-child,
  #appView .quiet-logout > span:last-child,
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge {
    font-size: .62rem !important;
    line-height: 1.08 !important;
  }

  #appView .workspace-profile-dot,
  #appView .header-action-icon,
  #appView .owner-alerts-bell {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    border-radius: 7px !important;
  }

  #appView .workspace-profile-chevron,
  #appView .topbar-actions button .owner-alerts-count {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 430px) {
  #appView .topbar {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    row-gap: 7px !important;
    padding: 12px 12px 10px !important;
  }

  #appView .workspace-brand-mark {
    width: 86px !important;
    height: 86px !important;
    min-width: 86px !important;
    min-height: 86px !important;
    border-radius: 18px !important;
  }

  #appView .topbar-brand .eyebrow {
    font-size: .74rem !important;
  }

  #appView .topbar h2 {
    font-size: 1rem !important;
  }

  #appView .topbar-actions {
    gap: 6px !important;
  }

  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions > button {
    min-height: 42px !important;
    height: 42px !important;
    padding: 5px 6px !important;
    font-size: .59rem !important;
  }

  #appView .owner-alerts-label,
  #appView .settings-trigger > span:last-child,
  #appView .quiet-logout > span:last-child,
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge {
    font-size: .59rem !important;
  }
}

@media (max-width: 370px) {
  #appView .topbar {
    grid-template-columns: 80px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    padding: 10px 10px 9px !important;
  }

  #appView .workspace-brand-mark {
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    min-height: 78px !important;
  }

  #appView .topbar-brand .eyebrow {
    font-size: .68rem !important;
  }

  #appView .topbar h2 {
    font-size: .93rem !important;
  }

  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions > button {
    min-height: 38px !important;
    height: 38px !important;
    padding: 4px 5px !important;
    font-size: .53rem !important;
    gap: 4px !important;
  }

  #appView .owner-alerts-label,
  #appView .settings-trigger > span:last-child,
  #appView .quiet-logout > span:last-child,
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge {
    font-size: .53rem !important;
  }

  #appView .workspace-profile-dot,
  #appView .header-action-icon,
  #appView .owner-alerts-bell {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
  }
}

/* =========================================================
   V2.3.46 — MOBILE HEADER TRUE FINAL FIX
   Row 1: logo left + brand text right
   Row 2: Ladies/Gents + Alerts + Settings + Logout across FULL header width
   Styling only. No business logic changes.
   ========================================================= */
@media (max-width: 760px) {
  #appView,
  #appView .topbar {
    overflow-x: hidden !important;
  }

  #appView .topbar {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    grid-template-rows: auto 44px !important;
    column-gap: 12px !important;
    row-gap: 10px !important;
    align-items: center !important;
    padding: 13px 14px 12px !important;
    min-height: 0 !important;
  }

  #appView .topbar-brand {
    display: contents !important;
  }

  #appView .workspace-brand-mark {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    min-height: 84px !important;
    align-self: center !important;
    justify-self: start !important;
    border-radius: 18px !important;
    box-shadow: 0 3px 10px rgba(63,55,49,.055) !important;
  }

  #appView .topbar-brand > div:last-child {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #appView .topbar-brand .eyebrow {
    margin: 0 0 5px !important;
    font-size: .74rem !important;
    line-height: 1 !important;
    letter-spacing: .11em !important;
    font-weight: 820 !important;
  }

  #appView .topbar h2 {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: 1.02rem !important;
    line-height: 1.13 !important;
    font-weight: 790 !important;
    color: #3C3531 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  #appView .workspace-meta-row {
    display: none !important;
  }

  /* Critical fix: actions span BOTH columns, not only the narrow brand column. */
  #appView .topbar-actions {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: 1.08fr 1fr 1fr .92fr !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    position: static !important;
  }

  #appView .topbar-actions > *,
  #appView .workspace-profile-control {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions > button {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 6px 7px !important;
    border-radius: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: .64rem !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    box-shadow: 0 2px 7px rgba(63,55,49,.035) !important;
  }

  #appView .owner-alerts-label,
  #appView .settings-trigger > span:last-child,
  #appView .quiet-logout > span:last-child,
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge {
    font-size: .64rem !important;
    line-height: 1 !important;
  }

  #appView .workspace-profile-dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
  }

  #appView .header-action-icon,
  #appView .owner-alerts-bell {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border-radius: 7px !important;
  }

  #appView .workspace-profile-chevron {
    position: static !important;
    transform: none !important;
    margin-left: 1px !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 390px) {
  #appView .topbar {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    grid-template-rows: auto 42px !important;
    column-gap: 10px !important;
    row-gap: 9px !important;
    padding: 11px 10px 10px !important;
  }

  #appView .workspace-brand-mark {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    border-radius: 16px !important;
  }

  #appView .topbar-brand .eyebrow {
    font-size: .69rem !important;
    margin-bottom: 4px !important;
  }

  #appView .topbar h2 {
    font-size: .94rem !important;
    line-height: 1.12 !important;
  }

  #appView .topbar-actions {
    height: 42px !important;
    gap: 5px !important;
    grid-template-columns: 1.06fr 1fr 1fr .9fr !important;
  }

  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions > button {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 5px 5px !important;
    border-radius: 12px !important;
    gap: 4px !important;
    font-size: .59rem !important;
  }

  #appView .owner-alerts-label,
  #appView .settings-trigger > span:last-child,
  #appView .quiet-logout > span:last-child,
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge {
    font-size: .59rem !important;
  }

  #appView .header-action-icon,
  #appView .owner-alerts-bell {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
  }
}

/* =========================================================
   V2.3.46 — MOBILE HEADER 3-ROW FINAL
   Approved mobile structure:
   Row 1: Logo + brand identity
   Row 2: Full-width Ladies/Gents selector
   Row 3: Alerts | Settings | Logout
   Mobile styling only. No business logic changes.
   ========================================================= */
@media (max-width: 760px) {
  #appView {
    overflow-x: hidden !important;
  }

  #appView .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 12px 14px 13px !important;
    overflow: visible !important;
    align-items: stretch !important;
  }

  /* Row 1 — clean brand lockup */
  #appView .topbar-brand {
    display: grid !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #appView .workspace-brand-mark {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    border-radius: 18px !important;
    align-self: center !important;
    justify-self: start !important;
    box-shadow: 0 3px 12px rgba(63,55,49,.06) !important;
  }

  #appView .topbar-brand > div:last-child {
    min-width: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  #appView .topbar-brand .eyebrow {
    margin: 0 !important;
    font-size: .76rem !important;
    line-height: 1 !important;
    letter-spacing: .11em !important;
    font-weight: 820 !important;
  }

  #appView .topbar h2 {
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    font-size: 1.02rem !important;
    line-height: 1.12 !important;
    font-weight: 790 !important;
    color: #3D3631 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* The old meta row must not reserve space on mobile. */
  #appView .workspace-meta-row {
    display: none !important;
  }

  /* Rows 2 + 3 live inside the existing action container.
     First child = profile control; remaining three = action buttons. */
  #appView .topbar-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: 46px 44px !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    position: static !important;
    overflow: visible !important;
  }

  /* Row 2 — profile selector alone, full width */
  #appView .topbar-actions > .workspace-profile-control {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    margin: 0 !important;
  }

  #appView .workspace-profile-button,
  #appView .workspace-profile-badge {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 8px 14px !important;
    border: 1px solid #D8CCC1 !important;
    border-radius: 14px !important;
    background: #FFFDFC !important;
    color: #403934 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    font-size: .76rem !important;
    line-height: 1 !important;
    font-weight: 760 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    box-shadow: 0 2px 7px rgba(63,55,49,.03) !important;
  }

  #appView .workspace-profile-button-label,
  #appView .workspace-profile-label {
    flex: 0 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #appView .workspace-profile-chevron {
    position: static !important;
    transform: none !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }

  #appView .workspace-profile-dot {
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    min-height: 9px !important;
    flex: 0 0 auto !important;
  }

  /* Row 3 — three equal action buttons */
  #appView .topbar-actions > button {
    grid-row: 2 !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    border: 1px solid #D8CCC1 !important;
    border-radius: 13px !important;
    background: #FFFDFC !important;
    color: #403934 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 7px rgba(63,55,49,.03) !important;
    font-size: .69rem !important;
    line-height: 1 !important;
    font-weight: 740 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  #appView .owner-alerts-trigger { grid-column: 1 !important; }
  #appView .settings-trigger { grid-column: 2 !important; }
  #appView .quiet-logout { grid-column: 3 !important; }

  #appView .owner-alerts-label,
  #appView .settings-trigger > span:last-child,
  #appView .quiet-logout > span:last-child {
    display: inline !important;
    font-size: .69rem !important;
    font-weight: 740 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #appView .header-action-icon,
  #appView .owner-alerts-bell {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
    border-radius: 7px !important;
    flex: 0 0 auto !important;
  }

  #appView .owner-alerts-count {
    top: -5px !important;
    right: -4px !important;
  }
}

@media (max-width: 390px) {
  #appView .topbar {
    padding: 11px 10px 11px !important;
    gap: 9px !important;
  }

  #appView .topbar-brand {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #appView .workspace-brand-mark {
    width: 74px !important;
    height: 74px !important;
    min-width: 74px !important;
    min-height: 74px !important;
    border-radius: 16px !important;
  }

  #appView .topbar-brand .eyebrow {
    font-size: .69rem !important;
  }

  #appView .topbar h2 {
    font-size: .94rem !important;
    line-height: 1.10 !important;
  }

  #appView .topbar-actions {
    grid-template-rows: 44px 42px !important;
    gap: 6px !important;
  }

  #appView .topbar-actions > .workspace-profile-control,
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  #appView .workspace-profile-button,
  #appView .workspace-profile-badge {
    font-size: .71rem !important;
    padding-inline: 12px !important;
  }

  #appView .topbar-actions > button {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 6px 6px !important;
    font-size: .64rem !important;
    gap: 5px !important;
  }

  #appView .owner-alerts-label,
  #appView .settings-trigger > span:last-child,
  #appView .quiet-logout > span:last-child {
    font-size: .64rem !important;
  }

  #appView .header-action-icon,
  #appView .owner-alerts-bell {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    min-height: 19px !important;
  }
}

/* =========================================================
   V2.3.46 — MOBILE HEADER CLEAN 2-ROW FINAL OVERRIDE
   One normal-flow brand row + one full-width controls row.
   This intentionally overrides every earlier experimental mobile header rule.
   Styling only. No business logic changes.
   ========================================================= */
@media (max-width: 760px) {
  html, body, #appView {
    overflow-x: hidden !important;
  }

  #appView .topbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px 12px 11px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* Row 1: logo + brand text only */
  #appView .topbar-brand {
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    position: static !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #appView .workspace-brand-mark {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 84px !important;
    height: 84px !important;
    min-width: 84px !important;
    min-height: 84px !important;
    max-width: 84px !important;
    max-height: 84px !important;
    margin: 0 !important;
    align-self: center !important;
    justify-self: start !important;
    border-radius: 18px !important;
    transform: none !important;
    box-shadow: 0 2px 10px rgba(63,55,49,.05) !important;
  }

  #appView .topbar-brand > div:last-child {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  #appView .topbar-brand .eyebrow {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: .72rem !important;
    line-height: 1 !important;
    letter-spacing: .11em !important;
    font-weight: 820 !important;
    white-space: nowrap !important;
  }

  #appView .topbar h2 {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    font-size: 1rem !important;
    line-height: 1.12 !important;
    font-weight: 790 !important;
    color: #3C3531 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    transform: none !important;
  }

  #appView .workspace-meta-row {
    display: none !important;
    position: static !important;
  }

  /* Row 2: all four controls use the FULL PHONE WIDTH */
  #appView .topbar-actions {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1.15fr 1fr 1.05fr .9fr !important;
    grid-template-rows: 42px !important;
    gap: 6px !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #appView .topbar-actions > *,
  #appView .workspace-profile-control {
    position: static !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #appView .topbar-actions > .workspace-profile-control { grid-column: 1 !important; }
  #appView .owner-alerts-trigger { grid-column: 2 !important; }
  #appView .settings-trigger { grid-column: 3 !important; }
  #appView .quiet-logout { grid-column: 4 !important; }

  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions > button {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 5px 6px !important;
    border: 1px solid #D8CCC1 !important;
    border-radius: 12px !important;
    background: #FFFDFC !important;
    color: #403934 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    box-shadow: 0 2px 7px rgba(63,55,49,.035) !important;
    font-size: .66rem !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  #appView .workspace-profile-button,
  #appView .workspace-profile-badge {
    justify-content: center !important;
  }

  #appView .workspace-profile-button-label,
  #appView .workspace-profile-label,
  #appView .owner-alerts-label,
  #appView .settings-trigger > span:last-child,
  #appView .quiet-logout > span:last-child {
    display: inline !important;
    min-width: 0 !important;
    font-size: .66rem !important;
    line-height: 1 !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #appView .workspace-profile-dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    flex: 0 0 auto !important;
  }

  #appView .workspace-profile-chevron {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  #appView .header-action-icon,
  #appView .owner-alerts-bell {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    flex: 0 0 auto !important;
    border-radius: 7px !important;
  }

  #appView .owner-alerts-count {
    top: -5px !important;
    right: -4px !important;
  }
}

@media (max-width: 390px) {
  #appView .topbar {
    gap: 9px !important;
    padding: 11px 10px 10px !important;
  }

  #appView .topbar-brand {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #appView .workspace-brand-mark {
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    min-height: 78px !important;
    max-width: 78px !important;
    max-height: 78px !important;
    border-radius: 16px !important;
  }

  #appView .topbar-brand .eyebrow {
    font-size: .68rem !important;
  }

  #appView .topbar h2 {
    font-size: .94rem !important;
    line-height: 1.10 !important;
  }

  #appView .topbar-actions {
    grid-template-columns: 1.15fr 1fr 1.05fr .9fr !important;
    grid-template-rows: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    gap: 5px !important;
  }

  #appView .topbar-actions > *,
  #appView .workspace-profile-control,
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions > button {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions > button,
  #appView .workspace-profile-button-label,
  #appView .workspace-profile-label,
  #appView .owner-alerts-label,
  #appView .settings-trigger > span:last-child,
  #appView .quiet-logout > span:last-child {
    font-size: .60rem !important;
  }

  #appView .header-action-icon,
  #appView .owner-alerts-bell {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
  }
}

/* =========================================================
   V2.3.46 — MOBILE HEADER LOCKED CONTROL ROW
   FINAL DIRECTION:
   - Keep current logo + brand lockup unchanged.
   - Keep profile selector first in the controls row.
   - Force Profile | Alerts | Settings | Logout into ONE non-wrapping row.
   - Flex is used deliberately to neutralize all earlier grid-row/grid-column rules.
   Styling only. No application logic changes.
   ========================================================= */
@media (max-width:760px){
  /* Keep the approved current brand placement stable. */
  #appView .topbar{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:12px 12px 11px!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  #appView .topbar-brand{
    display:grid!important;
    grid-template-columns:84px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:center!important;
    width:100%!important;
    min-width:0!important;
    position:static!important;
  }

  #appView .workspace-brand-mark{
    position:static!important;
    grid-column:1!important;
    grid-row:1!important;
    width:84px!important;
    height:84px!important;
    min-width:84px!important;
    min-height:84px!important;
    max-width:84px!important;
    max-height:84px!important;
    margin:0!important;
    border-radius:18px!important;
    transform:none!important;
  }

  #appView .topbar-brand>div:last-child{
    position:static!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:5px!important;
    min-width:0!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
  }

  #appView .topbar-brand .eyebrow{
    margin:0!important;
    font-size:.72rem!important;
    line-height:1!important;
    letter-spacing:.11em!important;
    font-weight:820!important;
  }

  #appView .topbar h2{
    margin:0!important;
    max-width:none!important;
    font-size:1rem!important;
    line-height:1.12!important;
    font-weight:790!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  #appView .workspace-meta-row{display:none!important}

  /* Critical final fix: FLEX neutralizes every older grid placement rule. */
  #appView .topbar-actions{
    position:static!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    transform:none!important;
    box-sizing:border-box!important;
  }

  #appView .topbar-actions>#workspaceProfileControl,
  #appView .topbar-actions>#ownerAlertsBtn,
  #appView .topbar-actions>#settingsBtn,
  #appView .topbar-actions>#logoutBtn{
    position:static!important;
    grid-column:auto!important;
    grid-row:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    float:none!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    margin:0!important;
    transform:none!important;
    box-sizing:border-box!important;
  }

  /* Slightly more room for the profile + Settings labels. */
  #appView .topbar-actions>#workspaceProfileControl{order:1!important;flex:1.18 1 0!important}
  #appView .topbar-actions>#ownerAlertsBtn{order:2!important;flex:.96 1 0!important}
  #appView .topbar-actions>#settingsBtn{order:3!important;flex:1.05 1 0!important}
  #appView .topbar-actions>#logoutBtn{order:4!important;flex:.86 1 0!important}

  #appView #workspaceProfileControl .workspace-profile-button,
  #appView #workspaceProfileControl .workspace-profile-badge,
  #appView #ownerAlertsBtn,
  #appView #settingsBtn,
  #appView #logoutBtn{
    position:static!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    margin:0!important;
    padding:5px 6px!important;
    gap:5px!important;
    border:1px solid #D8CCC1!important;
    border-radius:12px!important;
    background:#FFFDFC!important;
    color:#403934!important;
    box-shadow:0 2px 7px rgba(63,55,49,.035)!important;
    font-size:.66rem!important;
    line-height:1!important;
    font-weight:750!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    transform:none!important;
    box-sizing:border-box!important;
  }

  #appView .workspace-profile-button-label,
  #appView .workspace-profile-label,
  #appView .owner-alerts-label,
  #appView .settings-trigger>span:last-child,
  #appView .quiet-logout>span:last-child{
    display:inline!important;
    min-width:0!important;
    max-width:100%!important;
    font-size:.66rem!important;
    line-height:1!important;
    font-weight:750!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  #appView .workspace-profile-dot{
    width:8px!important;
    height:8px!important;
    min-width:8px!important;
    min-height:8px!important;
    flex:0 0 auto!important;
  }

  #appView .workspace-profile-chevron{
    position:static!important;
    margin-left:1px!important;
    transform:none!important;
    flex:0 0 auto!important;
  }

  #appView .header-action-icon,
  #appView .owner-alerts-bell{
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    min-height:18px!important;
    flex:0 0 auto!important;
    border-radius:7px!important;
  }
}

@media (max-width:390px){
  #appView .topbar{padding:11px 10px 10px!important;gap:9px!important}
  #appView .topbar-brand{grid-template-columns:78px minmax(0,1fr)!important;gap:10px!important}
  #appView .workspace-brand-mark{
    width:78px!important;height:78px!important;
    min-width:78px!important;min-height:78px!important;
    max-width:78px!important;max-height:78px!important;
    border-radius:16px!important;
  }
  #appView .topbar-brand .eyebrow{font-size:.68rem!important}
  #appView .topbar h2{font-size:.94rem!important;line-height:1.10!important}
  #appView .topbar-actions{height:40px!important;min-height:40px!important;max-height:40px!important;gap:5px!important}
  #appView .topbar-actions>#workspaceProfileControl,
  #appView .topbar-actions>#ownerAlertsBtn,
  #appView .topbar-actions>#settingsBtn,
  #appView .topbar-actions>#logoutBtn,
  #appView #workspaceProfileControl .workspace-profile-button,
  #appView #workspaceProfileControl .workspace-profile-badge,
  #appView #ownerAlertsBtn,
  #appView #settingsBtn,
  #appView #logoutBtn{
    height:40px!important;min-height:40px!important;max-height:40px!important;
    padding:4px 5px!important;gap:4px!important;font-size:.60rem!important;
  }
  #appView .workspace-profile-button-label,
  #appView .workspace-profile-label,
  #appView .owner-alerts-label,
  #appView .settings-trigger>span:last-child,
  #appView .quiet-logout>span:last-child{font-size:.60rem!important}
  #appView .header-action-icon,#appView .owner-alerts-bell{
    width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important;
  }
}

@media (max-width:340px){
  #appView .topbar-actions{gap:4px!important}
  #appView .topbar-actions>#workspaceProfileControl{flex:1.2 1 0!important}
  #appView .topbar-actions>#ownerAlertsBtn{flex:.92 1 0!important}
  #appView .topbar-actions>#settingsBtn{flex:1.04 1 0!important}
  #appView .topbar-actions>#logoutBtn{flex:.84 1 0!important}
  #appView #workspaceProfileControl .workspace-profile-button,
  #appView #workspaceProfileControl .workspace-profile-badge,
  #appView #ownerAlertsBtn,
  #appView #settingsBtn,
  #appView #logoutBtn{padding-inline:4px!important;font-size:.55rem!important}
  #appView .workspace-profile-button-label,
  #appView .workspace-profile-label,
  #appView .owner-alerts-label,
  #appView .settings-trigger>span:last-child,
  #appView .quiet-logout>span:last-child{font-size:.55rem!important}
}

/* =========================================================
   V2.3.46 — MOBILE HEADER MICRO-POLISH (LOCKED)
   Approved visual polish only:
   - Preserve current logo and brand positions.
   - Reduce brand-to-controls gap by ~5px.
   - Reduce control height by 3px.
   - Make Ladies/Gents slightly narrower.
   No structural or logic changes.
   ========================================================= */
@media (max-width:760px){
  #appView .topbar{
    gap:5px!important;
  }

  #appView .topbar-actions{
    height:39px!important;
    min-height:39px!important;
    max-height:39px!important;
  }

  #appView .topbar-actions>#workspaceProfileControl,
  #appView .topbar-actions>#ownerAlertsBtn,
  #appView .topbar-actions>#settingsBtn,
  #appView .topbar-actions>#logoutBtn,
  #appView #workspaceProfileControl .workspace-profile-button,
  #appView #workspaceProfileControl .workspace-profile-badge,
  #appView #ownerAlertsBtn,
  #appView #settingsBtn,
  #appView #logoutBtn{
    height:39px!important;
    min-height:39px!important;
    max-height:39px!important;
  }

  /* Balanced width distribution: profile slightly narrower than before. */
  #appView .topbar-actions>#workspaceProfileControl{flex:1.05 1 0!important}
  #appView .topbar-actions>#ownerAlertsBtn{flex:.98 1 0!important}
  #appView .topbar-actions>#settingsBtn{flex:1.04 1 0!important}
  #appView .topbar-actions>#logoutBtn{flex:.93 1 0!important}
}

@media (max-width:390px){
  #appView .topbar{
    gap:5px!important;
  }
  #appView .topbar-actions{
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
  }
  #appView .topbar-actions>#workspaceProfileControl,
  #appView .topbar-actions>#ownerAlertsBtn,
  #appView .topbar-actions>#settingsBtn,
  #appView .topbar-actions>#logoutBtn,
  #appView #workspaceProfileControl .workspace-profile-button,
  #appView #workspaceProfileControl .workspace-profile-badge,
  #appView #ownerAlertsBtn,
  #appView #settingsBtn,
  #appView #logoutBtn{
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
  }
}

/* =========================================================
   V2.3.46 — MOBILE BRAND TEXT TOP ALIGNMENT
   Micro fix only: remove extra space above ANIQ FITFLOW by
   top-aligning the brand copy with the locked logo.
   No other mobile header geometry changes.
   ========================================================= */
@media (max-width:760px){
  #appView .topbar-brand{
    align-items:start!important;
  }

  #appView .topbar-brand>div:last-child{
    justify-content:flex-start!important;
    align-self:start!important;
    padding-top:5px!important;
  }
}

@media (max-width:390px){
  #appView .topbar-brand>div:last-child{
    padding-top:4px!important;
  }
}

/* =========================================================
   V2.3.46 — MOBILE BRAND TEXT VERTICAL CENTER
   Approved micro-adjustment only:
   vertically center ANIQ FITFLOW + boutique name beside the locked logo.
   No other header geometry changes.
   ========================================================= */
@media (max-width:760px){
  #appView .topbar-brand>div:last-child{
    align-self:center!important;
    justify-content:center!important;
    padding-top:0!important;
  }
}

@media (max-width:390px){
  #appView .topbar-brand>div:last-child{
    align-self:center!important;
    justify-content:center!important;
    padding-top:0!important;
  }
}

/* =========================================================
   V2.3.46 — MOBILE CUSTOMER / ORDER / PAYMENT CARD POLISH
   Header and Priority Queue intentionally untouched.
   Mobile only. No business-logic styling changes.
   ========================================================= */
@media (max-width:760px){
  /* Shared customer-name language across the three workspaces. */
  #customersScreen .customer-card-name,
  #ordersScreen .mobile-order-customer,
  #paymentsScreen .payment-customer-name{
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:1.18rem!important;
    line-height:1.08!important;
    font-weight:650!important;
    color:#174F49!important;
    letter-spacing:-.01em!important;
  }

  /* ---------------- CUSTOMERS ---------------- */
  #customersScreen .customer-card-row.mobile-customer-polish{
    display:block!important;
    margin:8px 8px 0!important;
    padding:14px 14px 13px!important;
    border:1px solid #E6DAD1!important;
    border-radius:18px!important;
    background:#FFFDF9!important;
    box-shadow:0 3px 10px rgba(70,53,44,.025)!important;
  }
  #customersScreen .mobile-customer-polish .customer-card-info{
    display:block!important;
    min-width:0!important;
  }
  #customersScreen .mobile-customer-polish .customer-identity-line{
    display:flex!important;
    align-items:baseline!important;
    flex-wrap:wrap!important;
    column-gap:11px!important;
    row-gap:3px!important;
    min-width:0!important;
  }
  #customersScreen .mobile-customer-polish .customer-card-contact{
    margin:0!important;
    font-size:.72rem!important;
    line-height:1.25!important;
    color:#71645F!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
  }
  #customersScreen .mobile-customer-polish .customer-card-contact a{
    color:#71645F!important;
    font-weight:650!important;
  }
  #customersScreen .mobile-customer-polish .customer-card-meta{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
    margin-top:10px!important;
  }
  #customersScreen .mobile-customer-polish .customer-card-meta span{
    padding:6px 9px!important;
    border:1px solid #EFE4DB!important;
    border-radius:999px!important;
    background:#F7F1EB!important;
    color:#756A65!important;
    font-size:.66rem!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  #customersScreen .mobile-customer-polish .customer-card-actions{
    display:grid!important;
    grid-template-columns:1.12fr 1fr 1fr 46px!important;
    gap:6px!important;
    margin-top:11px!important;
    width:100%!important;
  }
  #customersScreen .mobile-customer-polish .customer-card-actions button{
    min-width:0!important;
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
    padding:5px 7px!important;
    border-radius:14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    font-size:.67rem!important;
    line-height:1!important;
    font-weight:750!important;
    box-shadow:none!important;
  }
  #customersScreen .mobile-customer-polish .customer-history-btn{
    background:#FBF5EF!important;
    border:1px solid #E2D1C4!important;
    color:#5D453A!important;
  }
  #customersScreen .mobile-customer-polish .measure-symbol-btn{
    background:#EEF5F8!important;
    border:1px solid #CEDDE5!important;
    color:#496A7A!important;
  }
  #customersScreen .mobile-customer-polish .customer-order-btn{
    background:#F0F6F3!important;
    border:1px solid #CEDFD6!important;
    color:#275B51!important;
  }
  #customersScreen .mobile-customer-polish .mini-delete-btn{
    width:46px!important;
    background:#FFF5F3!important;
    border:1px solid #EFCFC9!important;
    color:#B34F46!important;
    font-size:.78rem!important;
  }

  /* ---------------- PAYMENTS ---------------- */
  #paymentsScreen .payment-section-list{
    gap:9px!important;
    padding:9px!important;
  }
  #paymentsScreen .payment-ledger-row.mobile-payment-polish{
    display:block!important;
    padding:14px!important;
    border:1px solid #E5D9D0!important;
    border-radius:18px!important;
    background:#FFFDF9!important;
    box-shadow:0 3px 10px rgba(70,53,44,.025)!important;
  }
  #paymentsScreen .mobile-payment-polish .payment-order-identity{
    display:block!important;
    min-width:0!important;
  }
  #paymentsScreen .mobile-payment-polish .payment-customer-line{
    display:flex!important;
    align-items:baseline!important;
    flex-wrap:wrap!important;
    gap:5px 10px!important;
  }
  #paymentsScreen .mobile-payment-polish .payment-customer-name{
    padding:0!important;
    margin:0!important;
  }
  #paymentsScreen .mobile-payment-polish .payment-customer-phone{
    font-size:.70rem!important;
    line-height:1.2!important;
    color:#71645F!important;
  }
  #paymentsScreen .mobile-payment-polish .payment-order-garment-inline{
    display:flex!important;
    align-items:baseline!important;
    flex-wrap:wrap!important;
    gap:5px 8px!important;
    margin-top:8px!important;
    color:#67565C!important;
    font-size:.76rem!important;
    line-height:1.25!important;
  }
  #paymentsScreen .mobile-payment-polish .payment-order-garment-inline strong{
    color:#705566!important;
    font-size:.78rem!important;
    font-weight:700!important;
  }
  #paymentsScreen .mobile-payment-polish .payment-order-garment-inline span:last-child{
    color:#675D58!important;
    font-size:.79rem!important;
    font-weight:560!important;
  }
  #paymentsScreen .mobile-payment-polish .payment-ledger-amounts{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    margin-top:11px!important;
  }
  #paymentsScreen .mobile-payment-polish .payment-ledger-amounts>div{
    padding:8px 8px!important;
    border:1px solid #E6DBD3!important;
    border-radius:13px!important;
    background:#FBF8F4!important;
  }
  #paymentsScreen .mobile-payment-polish .payment-ledger-amounts .balance-pending{
    background:#EFF8F3!important;
    border-color:#D4E7DB!important;
  }
  #paymentsScreen .mobile-payment-polish .payment-ledger-amounts span{
    font-size:.56rem!important;
    letter-spacing:.04em!important;
  }
  #paymentsScreen .mobile-payment-polish .payment-ledger-amounts strong{
    display:block!important;
    margin-top:3px!important;
    font-size:.84rem!important;
    line-height:1.05!important;
  }
  #paymentsScreen .mobile-payment-polish .payment-ledger-action{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:end!important;
    gap:8px!important;
    margin-top:10px!important;
  }
  #paymentsScreen .mobile-payment-polish .payment-status-stack{
    justify-items:start!important;
    gap:4px!important;
  }
  #paymentsScreen .mobile-payment-polish .payment-status-stack small{
    font-size:.64rem!important;
    line-height:1.2!important;
    color:#2E8A5B!important;
  }
  #paymentsScreen .mobile-payment-polish .payment-row-btn{
    min-width:104px!important;
    height:42px!important;
    min-height:42px!important;
    padding:7px 12px!important;
    border:1px solid #CCD9E1!important;
    border-radius:13px!important;
    background:rgba(111,137,157,.12)!important;
    color:#456477!important;
    font-weight:760!important;
    box-shadow:none!important;
  }

  /* ---------------- ORDERS ---------------- */
  #ordersScreen .order-status-group{
    margin-bottom:12px!important;
    padding:0 7px 8px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  #ordersScreen .order-group-head{
    padding:0 0 7px!important;
    border:0!important;
    background:transparent!important;
  }
  #ordersScreen .order-group-head>div{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:7px!important;
    flex-wrap:wrap!important;
  }
  /* The badge is the single, narrow workflow label at the top. */
  #ordersScreen .order-group-head h3{
    display:none!important;
  }
  #ordersScreen .order-group-head .workflow-status-badge{
    min-height:30px!important;
    padding:6px 11px!important;
    border-radius:999px!important;
    font-size:.68rem!important;
    line-height:1!important;
  }
  #ordersScreen .order-group-head span:not(.badge){
    font-size:.66rem!important;
    color:#81756F!important;
  }
  #ordersScreen .order-group-list{
    display:grid!important;
    gap:8px!important;
  }
  #ordersScreen .order-group-list .list-row.mobile-order-polish{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    column-gap:10px!important;
    align-items:center!important;
    padding:13px 13px!important;
    border:1px solid #E5D9D0!important;
    border-radius:16px!important;
    background:#FFFDF9!important;
    box-shadow:0 3px 10px rgba(70,53,44,.02)!important;
  }
  #ordersScreen .mobile-order-main{
    min-width:0!important;
    text-align:left!important;
  }
  #ordersScreen .mobile-order-title{
    display:flex!important;
    align-items:baseline!important;
    flex-wrap:wrap!important;
    gap:4px 9px!important;
    text-align:left!important;
  }
  #ordersScreen .mobile-order-number{
    font-size:.70rem!important;
    line-height:1.15!important;
    font-weight:700!important;
    color:#6D5B61!important;
  }
  #ordersScreen .mobile-order-garment{
    margin-top:4px!important;
    font-size:.78rem!important;
    line-height:1.25!important;
    color:#5E514D!important;
    font-weight:560!important;
    text-align:left!important;
  }
  #ordersScreen .mobile-order-polish .list-sub{
    margin-top:6px!important;
    font-size:.69rem!important;
    line-height:1.25!important;
    color:#786D67!important;
    text-align:left!important;
  }
  #ordersScreen .mobile-order-risk{
    margin-top:7px!important;
    text-align:left!important;
  }
  #ordersScreen .mobile-order-risk .badge{
    font-size:.64rem!important;
    padding:5px 8px!important;
  }
  #ordersScreen .mobile-order-polish .row-actions{
    align-self:center!important;
    justify-self:end!important;
    margin:0!important;
  }
  #ordersScreen .mobile-order-polish .row-actions button{
    min-width:72px!important;
    height:40px!important;
    min-height:40px!important;
    padding:6px 12px!important;
    border:1px solid #DCCFC5!important;
    border-radius:12px!important;
    background:#FFFDFC!important;
    font-size:.75rem!important;
    font-weight:700!important;
  }
}

@media (max-width:390px){
  #customersScreen .mobile-customer-polish .customer-card-actions{
    grid-template-columns:1.12fr .98fr .96fr 43px!important;
    gap:5px!important;
  }
  #customersScreen .mobile-customer-polish .customer-card-actions button{
    height:42px!important;
    min-height:42px!important;
    padding-inline:5px!important;
    font-size:.63rem!important;
  }
  #customersScreen .mobile-customer-polish .mini-delete-btn{width:43px!important}
  #paymentsScreen .mobile-payment-polish .payment-row-btn{min-width:96px!important}
}

/* =========================================================
   V2.3.46 — MOBILE WORKSPACE BALANCE FINAL
   Approved mobile polish for Priority Queue, Customers,
   Fit Memory and Orders. Header intentionally untouched.
   ========================================================= */
@media (max-width:760px){
  /* Shared name language: same serif / dark-green treatment everywhere. */
  #dashboardScreen .mobile-priority-customer,
  #fitMemoryScreen .fit-memory-customer{
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:1.18rem!important;
    line-height:1.08!important;
    font-weight:650!important;
    color:#174F49!important;
    letter-spacing:-.01em!important;
  }

  /* ---------- PRIORITY QUEUE: preserve structure, polish the name only ---------- */
  #dashboardScreen #attentionList .mobile-priority-order{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:10px!important;
    padding:13px 14px!important;
  }
  #dashboardScreen .mobile-priority-title{
    display:flex!important;
    align-items:baseline!important;
    flex-wrap:wrap!important;
    gap:2px 4px!important;
    line-height:1.25!important;
  }
  #dashboardScreen .mobile-priority-orderline{
    font-size:.78rem!important;
    line-height:1.25!important;
    color:#493C3F!important;
    font-weight:650!important;
  }
  #dashboardScreen .mobile-priority-order .list-sub{
    margin-top:5px!important;
    font-size:.72rem!important;
    line-height:1.3!important;
  }

  /* ---------- CUSTOMERS: remove the old asymmetrical expansion math ---------- */
  #customersScreen{
    width:100%!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  #customersScreen .screen-head,
  #customersScreen .customer-summary-grid,
  #customersScreen .customer-directory-panel{
    width:100%!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
  #customersScreen .screen-head,
  #customersScreen .customer-summary-grid{
    padding-left:0!important;
    padding-right:0!important;
  }
  #customersScreen .customer-directory-panel{
    border-radius:18px!important;
  }
  #customersScreen #customerList{
    width:100%!important;
    padding:8px!important;
    gap:9px!important;
    box-sizing:border-box!important;
  }
  #customersScreen .customer-card-row.mobile-customer-polish{
    width:100%!important;
    margin:0!important;
    padding:14px!important;
    border-radius:18px!important;
    box-sizing:border-box!important;
  }
  #customersScreen .mobile-customer-polish .customer-card-contact{
    font-size:.74rem!important;
  }
  #customersScreen .mobile-customer-polish .customer-card-meta span{
    font-size:.68rem!important;
  }

  /* ---------- FIT MEMORY: full-width, balanced cards, readable type ---------- */
  #fitMemoryScreen{
    width:100%!important;
    max-width:none!important;
    margin:0 auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  #fitMemoryScreen .screen-head,
  #fitMemoryScreen .panel{
    width:100%!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
  #fitMemoryScreen #fitNoteList{
    display:grid!important;
    gap:9px!important;
    padding:8px!important;
    background:#F8F5F1!important;
  }
  #fitMemoryScreen .fit-memory-list-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
    width:100%!important;
    margin:0!important;
    padding:14px!important;
    border:1px solid #E5D9D0!important;
    border-radius:18px!important;
    background:#FFFDF9!important;
    box-shadow:0 3px 10px rgba(70,53,44,.025)!important;
    box-sizing:border-box!important;
  }
  #fitMemoryScreen .fit-memory-identity,
  #fitMemoryScreen .fit-memory-note-text,
  #fitMemoryScreen .fit-memory-row-actions{
    display:block!important;
    min-width:0!important;
  }
  #fitMemoryScreen .fit-memory-title{
    display:flex!important;
    align-items:baseline!important;
    flex-wrap:wrap!important;
    gap:4px 8px!important;
  }
  #fitMemoryScreen .fit-memory-separator{
    color:#80736C!important;
  }
  #fitMemoryScreen .fit-memory-garment{
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:.98rem!important;
    line-height:1.15!important;
    color:#493C3F!important;
    font-weight:560!important;
  }
  #fitMemoryScreen .fit-memory-identity .list-sub{
    margin-top:6px!important;
    font-size:.72rem!important;
    line-height:1.3!important;
  }
  #fitMemoryScreen .fit-memory-note-text{
    font-size:.86rem!important;
    line-height:1.35!important;
    color:#403936!important;
  }
  #fitMemoryScreen .fit-memory-row-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    width:100%!important;
    margin-top:2px!important;
  }
  #fitMemoryScreen .fit-memory-row-actions .badge{
    font-size:.68rem!important;
    padding:7px 10px!important;
  }
  #fitMemoryScreen .fit-memory-delete-btn{
    min-width:76px!important;
    height:40px!important;
    min-height:40px!important;
    border-radius:13px!important;
  }

  /* ---------- ORDERS: expand consistently on both Ladies and Gents ---------- */
  #ordersScreen{
    width:100%!important;
    max-width:none!important;
    margin:0 auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  #ordersScreen .screen-head,
  #ordersScreen .filter-row,
  #ordersScreen>.panel{
    width:100%!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
  #ordersScreen .filter-row{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    margin-bottom:10px!important;
  }
  #ordersScreen .filter-row select{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:48px!important;
    min-height:48px!important;
    border-radius:15px!important;
    padding:9px 12px!important;
    font-size:.78rem!important;
    color:#443B36!important;
    background:#FFFDFB!important;
  }
  #ordersScreen #orderSearch{
    grid-column:1 / -1!important;
    width:100%!important;
    min-width:0!important;
    height:48px!important;
    min-height:48px!important;
    border-radius:15px!important;
    padding:10px 13px!important;
    font-size:.76rem!important;
  }
  #ordersScreen>.panel{
    border-radius:18px!important;
    overflow:hidden!important;
  }
  #ordersScreen #orderList{
    width:100%!important;
    box-sizing:border-box!important;
    padding:8px!important;
  }
  #ordersScreen .orders-category-head{
    padding-left:5px!important;
    padding-right:5px!important;
  }
  #ordersScreen .order-status-group{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  #ordersScreen .order-group-list .list-row.mobile-order-polish{
    width:100%!important;
    box-sizing:border-box!important;
    padding:14px!important;
    border-radius:17px!important;
  }
  #ordersScreen .mobile-order-customer{
    font-size:1.18rem!important;
  }
  #ordersScreen .mobile-order-number{
    font-size:.73rem!important;
  }
  #ordersScreen .mobile-order-garment{
    font-size:.81rem!important;
    line-height:1.3!important;
  }
  #ordersScreen .mobile-order-polish .list-sub{
    font-size:.72rem!important;
    line-height:1.3!important;
  }
  #ordersScreen .order-group-head span:not(.badge){
    font-size:.70rem!important;
  }
}

@media (max-width:380px){
  #ordersScreen .filter-row{
    gap:6px!important;
  }
  #ordersScreen .filter-row select{
    font-size:.72rem!important;
    padding-inline:9px!important;
  }
  #customersScreen #customerList,
  #fitMemoryScreen #fitNoteList,
  #ordersScreen #orderList{
    padding:6px!important;
  }
}

/* =========================================================
   V2.3.46 — MOBILE CUSTOMERS + FIT MEMORY EXPANSION / ORDER OPEN FIX
   User-approved correction after Mobile Workspace Balance Final.
   Header untouched. Orders width untouched. Mobile only.
   ========================================================= */
@media (max-width:760px){
  /* CUSTOMERS — expand evenly into the parent mobile side padding. */
  #customersScreen{
    width:calc(100% + 12px)!important;
    max-width:none!important;
    margin-left:-6px!important;
    margin-right:-6px!important;
    box-sizing:border-box!important;
  }
  #customersScreen .screen-head,
  #customersScreen .customer-summary-grid,
  #customersScreen .customer-directory-panel{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
  #customersScreen #customerList{
    width:100%!important;
    padding:4px!important;
    box-sizing:border-box!important;
  }
  #customersScreen .customer-card-row.mobile-customer-polish{
    width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  /* FIT MEMORY — same centered expansion math as Customers. */
  #fitMemoryScreen{
    width:calc(100% + 12px)!important;
    max-width:none!important;
    margin-left:-6px!important;
    margin-right:-6px!important;
    box-sizing:border-box!important;
  }
  #fitMemoryScreen .screen-head,
  #fitMemoryScreen .panel{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
  #fitMemoryScreen #fitNoteList{
    width:100%!important;
    padding:4px!important;
    box-sizing:border-box!important;
  }
  #fitMemoryScreen .fit-memory-list-row{
    width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  /* ORDERS — width/layout stays as already approved.
     Only make the Open control visible at the far right and give it a subtle tint. */
  #ordersScreen .order-group-list .list-row.mobile-order-polish .row-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    align-self:center!important;
    justify-self:end!important;
    margin:0!important;
    min-width:0!important;
  }
  #ordersScreen .order-group-list .list-row.mobile-order-polish .row-actions button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:72px!important;
    height:40px!important;
    min-height:40px!important;
    padding:6px 13px!important;
    border:1px solid #CCD8E0!important;
    border-radius:12px!important;
    background:#F1F5F7!important;
    color:#4D6878!important;
    font-size:.75rem!important;
    font-weight:750!important;
    box-shadow:0 2px 7px rgba(79,103,119,.05)!important;
  }
  #ordersScreen .order-group-list .list-row.mobile-order-polish .row-actions button:active{
    background:#E7EFF3!important;
  }
}

@media (max-width:380px){
  #customersScreen,
  #fitMemoryScreen{
    width:calc(100% + 8px)!important;
    margin-left:-4px!important;
    margin-right:-4px!important;
  }
  #customersScreen #customerList,
  #fitMemoryScreen #fitNoteList{
    padding:3px!important;
  }
  #ordersScreen .order-group-list .list-row.mobile-order-polish .row-actions button{
    min-width:66px!important;
    padding-inline:10px!important;
  }
}

/* =========================================================
   V2.3.46 — TABLET VIEW PATCH
   Tablet only: 761px–1100px.
   Mobile <=760px and desktop >=1101px remain untouched.
   ========================================================= */
@media (min-width:761px) and (max-width:1100px){
  html,body,#appView{max-width:100%;overflow-x:hidden!important}

  /* ---------- TABLET HEADER ----------
     Keep brand readable, then give the four operational controls
     a full-width second row so 768px portrait tablets never squeeze. */
  #appView .topbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    gap:11px!important;
    align-items:stretch!important;
    padding:13px 20px 12px!important;
    background:rgba(250,248,244,.985)!important;
  }
  #appView .topbar-brand{
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    min-width:0!important;
    width:100%!important;
  }
  #appView .workspace-brand-mark{
    flex:0 0 72px!important;
    width:72px!important;
    height:72px!important;
    min-width:72px!important;
    min-height:72px!important;
    border-radius:17px!important;
  }
  #appView .topbar-brand>div:last-child{min-width:0!important}
  #appView .topbar-brand .eyebrow{
    font-size:.76rem!important;
    letter-spacing:.105em!important;
    line-height:1.05!important;
  }
  #appView .topbar h2{
    max-width:none!important;
    margin:4px 0 0!important;
    font-size:1.08rem!important;
    line-height:1.14!important;
    white-space:normal!important;
    overflow:visible!important;
  }
  #appView .topbar-actions{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  #appView .topbar-actions>.workspace-profile-control,
  #appView .topbar-actions>button{
    flex:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:46px!important;
    min-height:46px!important;
  }
  #appView .workspace-profile-button,
  #appView .workspace-profile-badge,
  #appView .topbar-actions>button{
    width:100%!important;
    height:46px!important;
    min-height:46px!important;
    max-width:none!important;
    padding:0 12px!important;
    border-radius:13px!important;
    font-size:.78rem!important;
    white-space:nowrap!important;
  }
  #appView .header-action-icon,
  #appView .owner-alerts-bell{
    width:25px!important;
    height:25px!important;
    min-width:25px!important;
    border-radius:8px!important;
  }

  /* ---------- GLOBAL TABLET CANVAS ---------- */
  #appView .content{
    width:100%!important;
    max-width:1040px!important;
    margin:0 auto!important;
    padding:22px 22px 94px!important;
    box-sizing:border-box!important;
  }
  #appView .screen,
  #appView .screen.active{
    width:100%!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }
  #appView .screen-head{
    width:100%!important;
    gap:16px!important;
    margin-bottom:16px!important;
  }
  #appView .screen-head h1{font-size:1.72rem!important}
  #appView .screen-head .primary{
    min-height:44px!important;
    padding:10px 18px!important;
    border-radius:13px!important;
  }
  #appView .panel{width:100%!important;max-width:none!important;border-radius:18px!important}

  /* ---------- HOME ---------- */
  #dashboardScreen .metric-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
  }
  #dashboardScreen .metric{min-width:0!important;padding:14px!important}
  #dashboardScreen .panel .list-row{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:12px!important;
    padding:14px 16px!important;
  }
  #dashboardScreen .panel .list-row>div:nth-child(2){display:flex!important}
  #dashboardScreen .panel .row-actions{display:none!important}

  /* ---------- CUSTOMERS ---------- */
  #customersScreen{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }
  #customersScreen .customer-summary-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
    padding:0!important;
  }
  #customersScreen .customer-directory-panel{width:100%!important;margin:0!important}
  #customersScreen #customerSearch{
    width:100%!important;
    max-width:none!important;
    min-height:50px!important;
    padding:12px 16px!important;
  }
  #customersScreen #customerList{width:100%!important;padding:8px!important}
  #customersScreen .customer-card-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    width:100%!important;
    max-width:none!important;
    margin:0 0 8px!important;
    padding:16px!important;
    border:1px solid #E3D8D0!important;
    border-radius:16px!important;
    box-sizing:border-box!important;
  }
  #customersScreen .customer-card-info{min-width:0!important}
  #customersScreen .customer-card-name{
    font-family:Georgia,"Times New Roman",serif!important;
    color:#24564F!important;
    font-size:1.22rem!important;
    line-height:1.12!important;
  }
  #customersScreen .customer-card-contact{font-size:.78rem!important;margin-top:5px!important}
  #customersScreen .customer-card-meta{margin-top:9px!important;gap:7px!important}
  #customersScreen .customer-card-actions{
    display:grid!important;
    grid-template-columns:1.15fr .9fr 1fr .62fr!important;
    gap:9px!important;
    width:100%!important;
    min-width:0!important;
    justify-content:stretch!important;
  }
  #customersScreen .customer-card-actions button{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    border-radius:13px!important;
    padding:8px 10px!important;
  }

  /* ---------- ORDERS ---------- */
  #ordersScreen{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
  #ordersScreen .filter-row{
    display:grid!important;
    grid-template-columns:minmax(0,.82fr) minmax(0,.82fr) minmax(220px,1.36fr)!important;
    gap:10px!important;
    width:100%!important;
    margin-bottom:12px!important;
  }
  #ordersScreen .filter-row select,
  #ordersScreen #orderSearch{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:48px!important;
    min-height:48px!important;
    border-radius:14px!important;
  }
  #ordersScreen>.panel{width:100%!important;max-width:none!important}
  #ordersScreen #orderList{width:100%!important;padding:10px!important}
  #ordersScreen .order-status-group{width:100%!important;margin:0 0 12px!important}
  #ordersScreen .order-group-list .list-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"main action" "status action"!important;
    gap:7px 14px!important;
    align-items:center!important;
    width:100%!important;
    padding:15px 16px!important;
    box-sizing:border-box!important;
  }
  #ordersScreen .order-group-list .list-row>div:first-child{grid-area:main!important;min-width:0!important}
  #ordersScreen .order-group-list .list-row>div:nth-child(2){grid-area:status!important;display:flex!important;gap:6px!important;flex-wrap:wrap!important}
  #ordersScreen .order-group-list .row-actions{
    grid-area:action!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
  }
  #ordersScreen .order-group-list .row-actions button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:82px!important;
    min-height:42px!important;
    padding:8px 14px!important;
    border:1px solid #CBD7DF!important;
    border-radius:12px!important;
    background:#F1F5F7!important;
    color:#4D6878!important;
    font-weight:750!important;
  }
  #ordersScreen .order-group-list .list-main{
    font-size:.88rem!important;
    line-height:1.3!important;
  }
  #ordersScreen .order-group-list .list-sub{font-size:.74rem!important;line-height:1.35!important}

  /* ---------- PAYMENTS ---------- */
  #paymentsScreen{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
  #paymentsScreen .payment-search-wrap,
  #paymentsScreen .payment-search,
  #paymentsScreen>.panel{width:100%!important;max-width:none!important}
  #paymentsScreen .payment-search{min-height:48px!important}
  #paymentsScreen .payment-ledger-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"identity action" "amounts action"!important;
    gap:12px 18px!important;
    align-items:center!important;
    width:100%!important;
    padding:16px 18px!important;
    box-sizing:border-box!important;
  }
  #paymentsScreen .payment-order-identity{grid-area:identity!important;min-width:0!important}
  #paymentsScreen .payment-ledger-amounts{
    grid-area:amounts!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    min-width:0!important;
  }
  #paymentsScreen .payment-ledger-action{
    grid-area:action!important;
    flex-direction:column!important;
    align-items:flex-end!important;
    justify-content:center!important;
    gap:8px!important;
    min-width:132px!important;
  }
  #paymentsScreen .payment-row-btn{
    min-width:118px!important;
    min-height:42px!important;
    border-radius:12px!important;
    background:#F1F5F7!important;
    color:#4D6878!important;
  }

  /* ---------- FIT MEMORY ---------- */
  #fitMemoryScreen{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
  #fitMemoryScreen>.panel{width:100%!important;max-width:none!important;margin:0!important}
  #fitMemoryScreen #fitNoteList{width:100%!important;padding:8px!important}
  #fitMemoryScreen .fit-memory-list-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"identity actions" "note note"!important;
    gap:10px 16px!important;
    width:100%!important;
    margin:0 0 8px!important;
    padding:16px!important;
    border:1px solid #E3D8D0!important;
    border-radius:16px!important;
    box-sizing:border-box!important;
  }
  #fitMemoryScreen .fit-memory-identity{grid-area:identity!important;min-width:0!important}
  #fitMemoryScreen .fit-memory-note-text{grid-area:note!important;font-size:.84rem!important;line-height:1.4!important}
  #fitMemoryScreen .fit-memory-row-actions{
    grid-area:actions!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:9px!important;
    min-width:max-content!important;
  }
  #fitMemoryScreen .fit-memory-customer{
    font-family:Georgia,"Times New Roman",serif!important;
    color:#24564F!important;
    font-size:1.18rem!important;
  }

  /* ---------- SETTINGS / MODALS ---------- */
  #settingsScreen{width:100%!important;max-width:960px!important;margin:0 auto!important}
  #modal{
    width:min(920px,calc(100% - 40px))!important;
    max-width:calc(100% - 40px)!important;
    margin:auto!important;
  }
  #modal .modal-card{max-height:88vh!important}
  #modal .modal-body{max-height:calc(88vh - 150px)!important;padding:18px 22px 22px!important}
  #modal .modal-actions{padding:13px 22px 15px!important}

  /* ---------- TABLET CHOICE SHEET ----------
     Orders/Settings selects use the FitFlow chooser instead of OS black/white picker. */
  .fitflow-choice-sheet{
    width:min(540px,calc(100% - 48px))!important;
    max-width:540px!important;
    margin:auto!important;
    border-radius:22px!important;
  }
  .fitflow-choice-card{border-radius:22px!important}
  .fitflow-choice-options{max-height:min(58vh,500px)!important}
  .fitflow-choice-option{min-height:54px!important}

  /* ---------- BOTTOM NAV ---------- */
  #appView .bottom-nav{
    width:100%!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    padding:8px max(22px,calc((100vw - 900px)/2)) max(8px,env(safe-area-inset-bottom))!important;
  }
  #appView .bottom-nav button{min-height:48px!important;font-size:1.12rem!important}
  #appView .bottom-nav button span{font-size:.70rem!important}
}

/* Portrait/smaller tablets get 2x2 dashboard metrics and a two-row Orders filter. */
@media (min-width:761px) and (max-width:899px){
  #dashboardScreen .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #ordersScreen .filter-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #ordersScreen #orderSearch{grid-column:1 / -1!important}
  #paymentsScreen .payment-ledger-row{
    grid-template-columns:minmax(0,1fr) 126px!important;
    gap:10px 14px!important;
    padding:15px!important;
  }
  #appView .content{padding-left:18px!important;padding-right:18px!important}
}

/* =========================================================
   V2.3.46 — TABLET SELECTED-SCREEN EXPANSION FIX
   Scope: tablet only. Expands ONLY the seven approved workspaces:
   Home, Customers, Orders, Payments, Fit Memory, Insights, Settings.
   Header, bottom nav, mobile layout, desktop layout and logic stay unchanged.

   The second media clause intentionally catches Android tablets running
   Chrome with a desktop-style CSS viewport (>1100px) while still reporting
   touch/coarse-pointer input.
   ========================================================= */
@media (min-width:761px) and (max-width:1100px),
       (min-width:1101px) and (max-width:1400px) and (hover:none) and (pointer:coarse) {

  /* Use the tablet canvas instead of the narrow desktop-style inner column. */
  #appView .content{
    width:100%!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:clamp(28px,4vw,56px)!important;
    padding-right:clamp(28px,4vw,56px)!important;
    box-sizing:border-box!important;
  }

  /* Expand only the screens approved in the tablet screenshots. */
  #dashboardScreen,
  #customersScreen,
  #ordersScreen,
  #paymentsScreen,
  #fitMemoryScreen,
  #insightsScreen,
  #settingsScreen{
    width:100%!important;
    max-width:1180px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  /* HOME */
  #dashboardScreen .screen-head,
  #dashboardScreen .metric-grid,
  #dashboardScreen>.panel{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* CUSTOMERS */
  #customersScreen .screen-head,
  #customersScreen .customer-summary-grid,
  #customersScreen .customer-directory-panel,
  #customersScreen #customerList{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* ORDERS — expansion only; keep current card/Open design. */
  #ordersScreen .screen-head,
  #ordersScreen .filter-row,
  #ordersScreen>.panel,
  #ordersScreen #orderList{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* PAYMENTS */
  #paymentsScreen .screen-head,
  #paymentsScreen .payment-search-wrap,
  #paymentsScreen .payment-search,
  #paymentsScreen>.panel,
  #paymentsScreen #paymentList{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* FIT MEMORY */
  #fitMemoryScreen .screen-head,
  #fitMemoryScreen>.panel,
  #fitMemoryScreen #fitNoteList{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* INSIGHTS */
  #insightsScreen .screen-head,
  #insightsScreen .insights-period-tabs,
  #insightsScreen .insights-period-label,
  #insightsScreen #insightsContent,
  #insightsScreen .insights-kpi-grid,
  #insightsScreen .insights-secondary-grid,
  #insightsScreen .insights-two-col,
  #insightsScreen .insight-panel{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* SETTINGS */
  #settingsScreen{
    max-width:1180px!important;
  }
  #settingsScreen .screen-head,
  #settingsScreen #settingsContent,
  #settingsScreen .settings-account-strip,
  #settingsScreen .settings-section,
  #settingsScreen .settings-section-list{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}

/* =========================================================
   V2.3.46 — TRUE TABLET EXPANSION + PREMIUM GARMENT DROPDOWN
   - Tablet detection is driven by JS class so Android Chrome desktop-site
     mode cannot bypass the tablet layout.
   - Expands only approved tablet screens.
   - Header / bottom navigation / mobile layout untouched.
   - Garment dropdown uses FitFlow chooser/popover instead of native menu.
   ========================================================= */

/* Premium garment popover for desktop/laptop order/customer forms. */
.fitflow-select-popover.garment-choice-popover{
  padding:8px!important;
  gap:6px!important;
  border:1px solid #D9CEC5!important;
  border-radius:16px!important;
  background:#FFFDFB!important;
  box-shadow:0 20px 44px rgba(49,39,43,.20)!important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.fitflow-select-popover.garment-choice-popover .fitflow-select-option{
  min-height:44px!important;
  grid-template-columns:9px minmax(0,1fr) 24px!important;
  padding:9px 11px!important;
  border-radius:11px!important;
  font-size:.78rem!important;
  line-height:1.25!important;
}
.fitflow-select-popover.garment-choice-popover .fitflow-select-option:hover{
  background:#F6F1EC!important;
  border-color:#E8DED6!important;
}
.fitflow-select-popover.garment-choice-popover .fitflow-select-option.selected{
  background:#EEF3F6!important;
  border-color:#CBD7DF!important;
  color:#4D6878!important;
}

/* TRUE TABLET CANVAS — works even when Android Chrome uses Desktop site. */
html.fitflow-tablet-layout #appView .content{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding-left:clamp(30px,4.2vw,56px)!important;
  padding-right:clamp(30px,4.2vw,56px)!important;
  box-sizing:border-box!important;
}

html.fitflow-tablet-layout #dashboardScreen,
html.fitflow-tablet-layout #customersScreen,
html.fitflow-tablet-layout #ordersScreen,
html.fitflow-tablet-layout #paymentsScreen,
html.fitflow-tablet-layout #fitMemoryScreen,
html.fitflow-tablet-layout #insightsScreen,
html.fitflow-tablet-layout #settingsScreen{
  width:100%!important;
  max-width:1180px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* HOME */
html.fitflow-tablet-layout #dashboardScreen .screen-head,
html.fitflow-tablet-layout #dashboardScreen .metric-grid,
html.fitflow-tablet-layout #dashboardScreen>.panel{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* CUSTOMERS */
html.fitflow-tablet-layout #customersScreen .screen-head,
html.fitflow-tablet-layout #customersScreen .customer-summary-grid,
html.fitflow-tablet-layout #customersScreen .customer-directory-panel,
html.fitflow-tablet-layout #customersScreen #customerList{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* ORDERS */
html.fitflow-tablet-layout #ordersScreen .screen-head,
html.fitflow-tablet-layout #ordersScreen .filter-row,
html.fitflow-tablet-layout #ordersScreen>.panel,
html.fitflow-tablet-layout #ordersScreen #orderList{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
html.fitflow-tablet-layout #ordersScreen .filter-row{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
html.fitflow-tablet-layout #ordersScreen #orderSearch{
  grid-column:1 / -1!important;
}

/* PAYMENTS */
html.fitflow-tablet-layout #paymentsScreen .screen-head,
html.fitflow-tablet-layout #paymentsScreen .payment-search-wrap,
html.fitflow-tablet-layout #paymentsScreen .payment-search,
html.fitflow-tablet-layout #paymentsScreen>.panel,
html.fitflow-tablet-layout #paymentsScreen #paymentList{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* FIT MEMORY */
html.fitflow-tablet-layout #fitMemoryScreen .screen-head,
html.fitflow-tablet-layout #fitMemoryScreen>.panel,
html.fitflow-tablet-layout #fitMemoryScreen #fitNoteList{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* INSIGHTS */
html.fitflow-tablet-layout #insightsScreen .screen-head,
html.fitflow-tablet-layout #insightsScreen .insights-period-tabs,
html.fitflow-tablet-layout #insightsScreen .insights-period-label,
html.fitflow-tablet-layout #insightsScreen #insightsContent,
html.fitflow-tablet-layout #insightsScreen .insights-kpi-grid,
html.fitflow-tablet-layout #insightsScreen .insights-secondary-grid,
html.fitflow-tablet-layout #insightsScreen .insights-two-col,
html.fitflow-tablet-layout #insightsScreen .insight-panel{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* SETTINGS */
html.fitflow-tablet-layout #settingsScreen,
html.fitflow-tablet-layout #settingsScreen .screen-head,
html.fitflow-tablet-layout #settingsScreen #settingsContent,
html.fitflow-tablet-layout #settingsScreen .settings-account-strip,
html.fitflow-tablet-layout #settingsScreen .settings-section,
html.fitflow-tablet-layout #settingsScreen .settings-section-list{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Preserve screens not approved for this tablet expansion. */
html.fitflow-tablet-layout #measurementsScreen,
html.fitflow-tablet-layout #orderDetailScreen{
  max-width:1120px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Tablet garment chooser uses the same premium FitFlow sheet. */
html.fitflow-tablet-layout .fitflow-choice-sheet{
  width:min(620px,calc(100% - 64px))!important;
  max-width:620px!important;
  margin:auto!important;
}
html.fitflow-tablet-layout .fitflow-choice-option{
  min-height:56px!important;
  font-size:.86rem!important;
}

/* =========================================================
   V2.3.46 — TABLET 7-SCREEN TRUE-FIT CORRECTION
   Scope: Home, Customers, Orders, Payments, Fit Memory,
   Insights and Settings only. Header/navigation/mobile untouched.
   ========================================================= */
html.fitflow-tablet-layout{
  --fitflow-tablet-max:1180px;
}

html.fitflow-tablet-layout #dashboardScreen,
html.fitflow-tablet-layout #customersScreen,
html.fitflow-tablet-layout #ordersScreen,
html.fitflow-tablet-layout #paymentsScreen,
html.fitflow-tablet-layout #fitMemoryScreen,
html.fitflow-tablet-layout #insightsScreen,
html.fitflow-tablet-layout #settingsScreen{
  position:relative!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:calc(100vw - 52px)!important;
  max-width:var(--fitflow-tablet-max)!important;
  margin:0!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box!important;
}

html.fitflow-tablet-layout #dashboardScreen .screen-head,
html.fitflow-tablet-layout #dashboardScreen .metric-grid,
html.fitflow-tablet-layout #dashboardScreen>.panel,
html.fitflow-tablet-layout #dashboardScreen #attentionList,
html.fitflow-tablet-layout #customersScreen .screen-head,
html.fitflow-tablet-layout #customersScreen .customer-summary-grid,
html.fitflow-tablet-layout #customersScreen .customer-directory-panel,
html.fitflow-tablet-layout #customersScreen #customerList,
html.fitflow-tablet-layout #ordersScreen .screen-head,
html.fitflow-tablet-layout #ordersScreen .filter-row,
html.fitflow-tablet-layout #ordersScreen>.panel,
html.fitflow-tablet-layout #ordersScreen #orderList,
html.fitflow-tablet-layout #ordersScreen .order-status-group,
html.fitflow-tablet-layout #ordersScreen .order-group-list,
html.fitflow-tablet-layout #paymentsScreen .screen-head,
html.fitflow-tablet-layout #paymentsScreen .payment-search-wrap,
html.fitflow-tablet-layout #paymentsScreen .payment-search,
html.fitflow-tablet-layout #paymentsScreen>.panel,
html.fitflow-tablet-layout #paymentsScreen #paymentList,
html.fitflow-tablet-layout #paymentsScreen .payment-section,
html.fitflow-tablet-layout #paymentsScreen .payment-section-list,
html.fitflow-tablet-layout #fitMemoryScreen .screen-head,
html.fitflow-tablet-layout #fitMemoryScreen>.panel,
html.fitflow-tablet-layout #fitMemoryScreen #fitNoteList,
html.fitflow-tablet-layout #insightsScreen .screen-head,
html.fitflow-tablet-layout #insightsScreen .insights-period-tabs,
html.fitflow-tablet-layout #insightsScreen .insights-period-label,
html.fitflow-tablet-layout #insightsScreen #insightsContent,
html.fitflow-tablet-layout #insightsScreen #insightsContent>*,
html.fitflow-tablet-layout #insightsScreen .insights-kpi-grid,
html.fitflow-tablet-layout #insightsScreen .insights-secondary-grid,
html.fitflow-tablet-layout #insightsScreen .insights-two-col,
html.fitflow-tablet-layout #insightsScreen .insight-panel,
html.fitflow-tablet-layout #settingsScreen .screen-head,
html.fitflow-tablet-layout #settingsScreen #settingsContent,
html.fitflow-tablet-layout #settingsScreen #settingsContent>*,
html.fitflow-tablet-layout #settingsScreen .settings-account-strip,
html.fitflow-tablet-layout #settingsScreen .settings-group,
html.fitflow-tablet-layout #settingsScreen .settings-card-stack,
html.fitflow-tablet-layout #settingsScreen .settings-section,
html.fitflow-tablet-layout #settingsScreen .settings-section-list{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}

html.fitflow-tablet-layout #customersScreen .customer-card-row,
html.fitflow-tablet-layout #ordersScreen .order-group-list .list-row,
html.fitflow-tablet-layout #paymentsScreen .payment-ledger-row,
html.fitflow-tablet-layout #fitMemoryScreen .fit-memory-list-row{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
}

html.fitflow-tablet-layout #ordersScreen .filter-row{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
html.fitflow-tablet-layout #ordersScreen #orderSearch{
  grid-column:1 / -1!important;
}

@media (min-width:1200px){
  html.fitflow-tablet-layout #dashboardScreen,
  html.fitflow-tablet-layout #customersScreen,
  html.fitflow-tablet-layout #ordersScreen,
  html.fitflow-tablet-layout #paymentsScreen,
  html.fitflow-tablet-layout #fitMemoryScreen,
  html.fitflow-tablet-layout #insightsScreen,
  html.fitflow-tablet-layout #settingsScreen{
    width:calc(100vw - 68px)!important;
  }
}

/* =========================================================
   V2.3.46 — TABLET ORDERS COMPACT CARD + OPEN TOP-RIGHT
   Scope: tablet Orders > In progress only.
   - Keep Orders workspace width unchanged.
   - Move Open to the top-right of each order card.
   - Remove excess internal vertical space.
   - Header, filters, workflow logic, mobile and desktop untouched.
   ========================================================= */
html.fitflow-tablet-layout #ordersScreen .order-group-list .list-row{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-height:0!important;
  padding:11px 104px 10px 14px!important;
  margin:0!important;
  border-radius:15px!important;
  box-sizing:border-box!important;
  background:#FFFDF9!important;
}

html.fitflow-tablet-layout #ordersScreen .order-group-list .list-row>div:first-child{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}

html.fitflow-tablet-layout #ordersScreen .order-group-list .list-row>div:nth-child(2){
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:5px!important;
  margin:6px 0 0!important;
  padding:0!important;
}

html.fitflow-tablet-layout #ordersScreen .order-group-list .row-actions{
  position:absolute!important;
  top:10px!important;
  right:12px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;
  margin:0!important;
  padding:0!important;
}

html.fitflow-tablet-layout #ordersScreen .order-group-list .row-actions button{
  min-width:74px!important;
  width:auto!important;
  height:36px!important;
  min-height:36px!important;
  padding:6px 13px!important;
  border:1px solid #C9D8DF!important;
  border-radius:11px!important;
  background:#EEF4F6!important;
  color:#486676!important;
  font-size:.72rem!important;
  line-height:1!important;
  font-weight:760!important;
  box-shadow:0 2px 6px rgba(69,98,113,.045)!important;
}

html.fitflow-tablet-layout #ordersScreen .order-group-list .row-actions button:active{
  background:#E4EEF2!important;
}

html.fitflow-tablet-layout #ordersScreen .order-group-list .list-main{
  margin:0!important;
  padding:0!important;
  line-height:1.24!important;
}

html.fitflow-tablet-layout #ordersScreen .order-group-list .list-sub{
  margin-top:4px!important;
  line-height:1.25!important;
}

html.fitflow-tablet-layout #ordersScreen .order-group-list{
  gap:7px!important;
}

html.fitflow-tablet-layout #ordersScreen .order-status-group{
  margin-bottom:10px!important;
}

/* =========================================================
   V2.3.46 — MOBILE ORDERS OPEN + GARMENT PICKER FINAL
   Scope: phones only (<=760px).
   Tablet and desktop rules are intentionally untouched.
   ========================================================= */

/* Hidden by default so tablet / desktop keep their exact current UI. */
.fitflow-mobile-garment-trigger{display:none}

@media (max-width:760px){
  /* Orders > In progress: compact card with Open anchored top-right. */
  #ordersScreen .order-group-list .list-row.mobile-order-polish{
    position:relative!important;
    display:block!important;
    min-height:0!important;
    padding:10px 90px 9px 11px!important;
    border-radius:15px!important;
    box-sizing:border-box!important;
  }
  #ordersScreen .mobile-order-polish .row-actions{
    position:absolute!important;
    top:9px!important;
    right:10px!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:flex-end!important;
    margin:0!important;
    padding:0!important;
  }
  #ordersScreen .mobile-order-polish .row-actions button{
    min-width:68px!important;
    width:auto!important;
    height:34px!important;
    min-height:34px!important;
    padding:5px 11px!important;
    border:1px solid #C9D8DF!important;
    border-radius:11px!important;
    background:#EEF4F6!important;
    color:#486676!important;
    font-size:.70rem!important;
    line-height:1!important;
    font-weight:760!important;
    box-shadow:0 2px 6px rgba(69,98,113,.04)!important;
  }
  #ordersScreen .mobile-order-polish .row-actions button:active{
    background:#E4EEF2!important;
  }
  #ordersScreen .mobile-order-garment{
    margin-top:3px!important;
  }
  #ordersScreen .mobile-order-polish .list-sub{
    margin-top:4px!important;
  }
  #ordersScreen .mobile-order-risk{
    margin-top:5px!important;
  }
  #ordersScreen .order-group-list{
    gap:7px!important;
  }

  /* Mobile garment selection: never expose Android's native black/white list. */
  select.fitflow-mobile-garment-native{
    display:none!important;
  }
  .fitflow-mobile-garment-trigger{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    padding:10px 13px!important;
    border:1px solid #D8CDC4!important;
    border-radius:12px!important;
    background:#FFFDF9!important;
    color:#403936!important;
    font:inherit!important;
    font-size:.82rem!important;
    line-height:1.2!important;
    text-align:left!important;
    box-shadow:0 2px 7px rgba(67,52,44,.025)!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  .fitflow-mobile-garment-trigger.is-placeholder{
    color:#7C716B!important;
  }
  .fitflow-mobile-garment-trigger-text{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .fitflow-mobile-garment-trigger-chevron{
    flex:0 0 auto!important;
    font-size:1rem!important;
    line-height:1!important;
    color:#6C7C82!important;
    transform:translateY(-1px)!important;
  }
  .fitflow-mobile-garment-trigger:focus-visible{
    outline:2px solid rgba(101,128,141,.24)!important;
    outline-offset:2px!important;
  }
}

/* =========================================================
   V2.3.46 — MOBILE NEW ORDER OVERLAP + ORDERS WIDTH MICRO FIX
   Scope: phones only. Tablet/desktop deliberately excluded.
   1) New Order basics: Customer full row; Delivery + Priority below.
      Helper copy gets natural height so it cannot collide with Order notes.
   2) Orders workspace: small symmetric width lift only.
   ========================================================= */
@media (max-width:760px){
  /* Exclude detected tablets even if a browser reports a phone-like viewport. */
  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .refined-order-basics,
  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .refined-order-basics.known-customer-basics{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px 9px!important;
    align-items:start!important;
    width:100%!important;
    min-width:0!important;
  }

  /* A new customer search needs the full line; date + priority remain compact. */
  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .refined-order-basics .order-customer-field{
    grid-column:1 / -1!important;
    min-width:0!important;
  }

  /* Undo the older fixed 18px helper row that caused wrapped text to overlap. */
  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .refined-order-basics>label{
    display:grid!important;
    grid-template-rows:auto 48px auto!important;
    align-content:start!important;
    gap:5px!important;
    min-width:0!important;
    min-height:0!important;
    overflow:visible!important;
  }
  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .refined-order-basics .input-help,
  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .order-customer-help{
    display:block!important;
    min-height:0!important;
    height:auto!important;
    margin-top:4px!important;
    line-height:1.35!important;
    white-space:normal!important;
    overflow:visible!important;
    overflow-wrap:anywhere!important;
  }
  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .order-customer-picker{
    min-width:0!important;
    overflow:visible!important;
  }
  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .compact-order-basics .small-details{
    position:relative!important;
    clear:both!important;
    margin-top:9px!important;
    padding-top:9px!important;
  }

  /* Give the Orders workspace only a small extra amount of the phone canvas. */
  html:not(.fitflow-tablet-layout) #ordersScreen{
    width:calc(100% + 12px)!important;
    max-width:none!important;
    margin-left:-6px!important;
    margin-right:-6px!important;
    box-sizing:border-box!important;
  }
  html:not(.fitflow-tablet-layout) #ordersScreen .screen-head,
  html:not(.fitflow-tablet-layout) #ordersScreen .filter-row,
  html:not(.fitflow-tablet-layout) #ordersScreen>.panel,
  html:not(.fitflow-tablet-layout) #ordersScreen #orderList{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }
}

@media (max-width:380px){
  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .refined-order-basics,
  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .refined-order-basics.known-customer-basics{
    gap:9px 7px!important;
  }
  html:not(.fitflow-tablet-layout) #ordersScreen{
    width:calc(100% + 8px)!important;
    margin-left:-4px!important;
    margin-right:-4px!important;
  }
}

/* =========================================================
   V2.3.46 — MOBILE CUSTOMERS WIDTH + ORDER BASICS TRUE FLOW FIX
   Scope: phones only. Tablet and desktop are intentionally unchanged.
   - Customers: a small symmetric width lift to match the other mobile pages.
   - New Order > Order basics: let the customer picker/helper determine its
     real height so Delivery/Priority can never collide with helper copy.
   ========================================================= */
@media (max-width:760px){
  /* Do not let a tablet running a phone-like viewport inherit this patch. */
  html:not(.fitflow-tablet-layout) #customersScreen{
    width:calc(100% + 24px)!important;
    max-width:none!important;
    margin-left:-12px!important;
    margin-right:-12px!important;
    box-sizing:border-box!important;
  }
  html:not(.fitflow-tablet-layout) #customersScreen .screen-head,
  html:not(.fitflow-tablet-layout) #customersScreen .customer-summary-grid,
  html:not(.fitflow-tablet-layout) #customersScreen .customer-directory-panel{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }

  /* New Order basics — true content-height customer row. */
  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .refined-order-basics{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:10px!important;
    row-gap:14px!important;
    align-items:start!important;
  }

  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .refined-order-basics .order-customer-field{
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
    gap:7px!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
    margin:0!important;
  }

  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .refined-order-basics .order-customer-picker{
    display:grid!important;
    grid-template-rows:48px auto!important;
    gap:7px!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
    margin:0!important;
  }

  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .refined-order-basics .order-customer-search-input{
    height:48px!important;
    min-height:48px!important;
    margin:0!important;
  }

  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .refined-order-basics .order-customer-help{
    position:static!important;
    display:block!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    line-height:1.3!important;
    white-space:normal!important;
    overflow:visible!important;
    overflow-wrap:break-word!important;
  }

  /* Delivery and Priority stay as a clean two-column row. */
  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .refined-order-basics>label:not(.order-customer-field){
    display:grid!important;
    grid-template-rows:20px 48px auto!important;
    gap:6px!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
    margin:0!important;
  }

  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .refined-order-basics .field-label-line{
    min-height:20px!important;
    align-items:center!important;
    gap:6px!important;
    line-height:1.15!important;
  }

  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .refined-order-basics .input-help:not(.order-customer-help){
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    line-height:1.28!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .compact-order-basics .small-details{
    margin-top:4px!important;
    padding-top:11px!important;
    clear:both!important;
  }
}

@media (max-width:380px){
  html:not(.fitflow-tablet-layout) #customersScreen{
    width:calc(100% + 18px)!important;
    margin-left:-9px!important;
    margin-right:-9px!important;
  }
  html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .refined-order-basics{
    column-gap:8px!important;
    row-gap:13px!important;
  }
}

/* =========================================================
   V2.3.46 — MOBILE CUSTOMERS + FIT MEMORY PAYMENT-WIDTH MATCH
   Scope: phones only. Tablet/desktop intentionally unchanged.
   Goal: Customers and Fit Memory use the same usable mobile canvas
   as Payments (10px viewport gutter on each side).
   ========================================================= */
@media (max-width:760px){
  html:not(.fitflow-tablet-layout) #customersScreen,
  html:not(.fitflow-tablet-layout) #fitMemoryScreen{
    width:calc(100vw - 20px)!important;
    max-width:none!important;
    margin-left:calc(50% - 50vw + 10px)!important;
    margin-right:calc(50% - 50vw + 10px)!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  /* Customers: every visible block follows the widened screen edge. */
  html:not(.fitflow-tablet-layout) #customersScreen .screen-head,
  html:not(.fitflow-tablet-layout) #customersScreen .customer-summary-grid,
  html:not(.fitflow-tablet-layout) #customersScreen .customer-directory-panel,
  html:not(.fitflow-tablet-layout) #customersScreen #customerList{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
  html:not(.fitflow-tablet-layout) #customersScreen .screen-head,
  html:not(.fitflow-tablet-layout) #customersScreen .customer-summary-grid{
    padding-left:0!important;
    padding-right:0!important;
  }
  html:not(.fitflow-tablet-layout) #customersScreen .customer-directory-panel{
    margin:0!important;
  }

  /* Fit Memory: heading, CTA, outer panel and note list share one width. */
  html:not(.fitflow-tablet-layout) #fitMemoryScreen .screen-head,
  html:not(.fitflow-tablet-layout) #fitMemoryScreen>.panel,
  html:not(.fitflow-tablet-layout) #fitMemoryScreen #fitNoteList{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
  html:not(.fitflow-tablet-layout) #fitMemoryScreen #fitNoteList{
    padding-left:4px!important;
    padding-right:4px!important;
  }
  html:not(.fitflow-tablet-layout) #fitMemoryScreen .fit-memory-list-row{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
}

/* Keep very small phones safely inside the viewport while retaining the same look. */
@media (max-width:360px){
  html:not(.fitflow-tablet-layout) #customersScreen,
  html:not(.fitflow-tablet-layout) #fitMemoryScreen{
    width:calc(100vw - 16px)!important;
    margin-left:calc(50% - 50vw + 8px)!important;
    margin-right:calc(50% - 50vw + 8px)!important;
  }
}

/* =========================================================
   V2.3.46 — MOBILE PHONE/TABLET CLASSIFICATION + WIDTH REPAIR
   Scope: phones only. Repairs the accidental tablet-width collapse seen on
   Customers and Fit Memory. Payments remains the width reference.
   IMPORTANT: no 100vw/translate centering is used on phones.
   ========================================================= */
@media (max-width:760px){
  /* Defensive reset: even if a browser briefly carries the tablet class while
     resizing/orienting, tablet true-fit transforms must never control a phone. */
  html.fitflow-tablet-layout #appView .content{
    width:auto!important;
    max-width:none!important;
    margin:0 auto!important;
    padding-left:14px!important;
    padding-right:14px!important;
    box-sizing:border-box!important;
  }

  html.fitflow-tablet-layout #dashboardScreen,
  html.fitflow-tablet-layout #customersScreen,
  html.fitflow-tablet-layout #ordersScreen,
  html.fitflow-tablet-layout #paymentsScreen,
  html.fitflow-tablet-layout #fitMemoryScreen,
  html.fitflow-tablet-layout #insightsScreen,
  html.fitflow-tablet-layout #settingsScreen{
    position:static!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  /* Customers + Fit Memory now use the exact same root width model as Payments:
     100% of the mobile content canvas, no viewport math and no negative centering. */
  html:not(.fitflow-tablet-layout) #customersScreen,
  html:not(.fitflow-tablet-layout) #fitMemoryScreen,
  html.fitflow-tablet-layout #customersScreen,
  html.fitflow-tablet-layout #fitMemoryScreen{
    position:static!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  #customersScreen .screen-head,
  #customersScreen .customer-summary-grid,
  #customersScreen .customer-directory-panel,
  #customersScreen #customerList,
  #fitMemoryScreen .screen-head,
  #fitMemoryScreen>.panel,
  #fitMemoryScreen #fitNoteList{
    position:static!important;
    left:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  #customersScreen .customer-card-row.mobile-customer-polish,
  #fitMemoryScreen .fit-memory-list-row{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
}

/* =========================================================
   V2.3.46 — Measurement History delete + universal
   Measurement Version chooser refinement
   ========================================================= */
.history-card-head-actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.history-measurement-delete-btn{
  min-height:32px!important;
  padding:6px 10px!important;
  border:1px solid #E5B8B2!important;
  border-radius:10px!important;
  background:#FFF8F6!important;
  color:#A44E46!important;
  box-shadow:none!important;
  font-size:.68rem!important;
  font-weight:720!important;
  line-height:1!important;
}
.history-measurement-delete-btn:hover{
  background:#FCEDE9!important;
  border-color:#DFA69E!important;
}

.measurement-version-picker{
  display:grid!important;
  gap:4px!important;
}
.measurement-version-choice-btn{
  width:auto!important;
  min-width:96px!important;
  min-height:36px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:9px!important;
  padding:6px 10px!important;
  border:1px solid #C9D7D2!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#F4F8F6,#EAF2EF)!important;
  color:#294F4C!important;
  box-shadow:0 2px 7px rgba(53,76,73,.06)!important;
  cursor:pointer!important;
  white-space:nowrap!important;
}
.measurement-version-choice-btn strong{
  font-size:.68rem!important;
  font-weight:720!important;
  line-height:1!important;
}
.measurement-version-choice-btn>span{
  color:#607872!important;
  font-size:.78rem!important;
  line-height:1!important;
}
.measurement-version-choice-btn:hover{
  border-color:#AFC5BD!important;
  background:#E8F1ED!important;
}
.measurement-version-choice-btn:focus-visible{
  outline:3px solid rgba(104,132,122,.16)!important;
  outline-offset:2px!important;
}
.fitflow-select-popover.measurement-version-popover{
  border-color:#CFDAD5!important;
  background:#FFFDFB!important;
}
.fitflow-select-popover.measurement-version-popover .fitflow-select-option{
  min-height:42px!important;
  border-radius:11px!important;
}

@media(max-width:760px){
  .history-card-head-actions{gap:6px!important}
  .history-measurement-delete-btn{
    min-height:30px!important;
    padding:6px 9px!important;
    font-size:.64rem!important;
  }
  .measurement-version-picker{min-width:88px!important}
  .measurement-version-choice-btn{
    min-width:84px!important;
    min-height:34px!important;
    padding:5px 9px!important;
  }
  .measurement-version-choice-btn strong{font-size:.64rem!important}
}

/* =========================================================
   V2.3.46 — MOBILE FIT MEMORY WIDTH FINAL
   Scope: phones only. Fit Memory only.
   Tablet / desktop / header / nav / all other screens unchanged.
   Expands safely into the normal mobile content gutter without viewport
   transforms or device-width calculations.
   ========================================================= */
@media (max-width:760px){
  html:not(.fitflow-tablet-layout) #fitMemoryScreen{
    position:static!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    width:calc(100% + 24px)!important;
    max-width:none!important;
    margin-left:-12px!important;
    margin-right:-12px!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  html:not(.fitflow-tablet-layout) #fitMemoryScreen .screen-head,
  html:not(.fitflow-tablet-layout) #fitMemoryScreen>.panel,
  html:not(.fitflow-tablet-layout) #fitMemoryScreen #fitNoteList{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  html:not(.fitflow-tablet-layout) #fitMemoryScreen #fitNoteList{
    padding-left:5px!important;
    padding-right:5px!important;
  }

  html:not(.fitflow-tablet-layout) #fitMemoryScreen .fit-memory-list-row{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
}

@media (max-width:360px){
  html:not(.fitflow-tablet-layout) #fitMemoryScreen{
    width:calc(100% + 18px)!important;
    margin-left:-9px!important;
    margin-right:-9px!important;
  }
}

/* =========================================================
   V2.3.46 — MOBILE CUSTOMERS EXACT PAYMENT-WIDTH MATCH
   Scope: phones only, Customers workspace only.
   Header/nav/tablet/desktop/Payments/other screens unchanged.
   Removes the remaining extra Customers-only gutter without
   viewport transforms or tablet-detection dependencies.
   ========================================================= */
@media (max-width:760px){
  html:not(.fitflow-tablet-layout) #customersScreen,
  html.fitflow-tablet-layout #customersScreen{
    position:static!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    width:calc(100% + 20px)!important;
    max-width:none!important;
    margin-left:-10px!important;
    margin-right:-10px!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  html:not(.fitflow-tablet-layout) #customersScreen .screen-head,
  html:not(.fitflow-tablet-layout) #customersScreen .customer-summary-grid,
  html:not(.fitflow-tablet-layout) #customersScreen .customer-directory-panel,
  html:not(.fitflow-tablet-layout) #customersScreen #customerList,
  html.fitflow-tablet-layout #customersScreen .screen-head,
  html.fitflow-tablet-layout #customersScreen .customer-summary-grid,
  html.fitflow-tablet-layout #customersScreen .customer-directory-panel,
  html.fitflow-tablet-layout #customersScreen #customerList{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
}

@media (max-width:360px){
  html:not(.fitflow-tablet-layout) #customersScreen,
  html.fitflow-tablet-layout #customersScreen{
    width:calc(100% + 16px)!important;
    margin-left:-8px!important;
    margin-right:-8px!important;
  }
}

/* =========================================================
   V2.3.46 — MOBILE FIT MEMORY HOME/INSIGHTS WIDTH MATCH
   Scope: PHONE Fit Memory only.
   Matches the normal mobile canvas used by Home / Insights:
   12px viewport gutter on each side.
   No translate / left positioning / tablet / desktop changes.
   ========================================================= */
@media (max-width:760px){
  html:not(.fitflow-tablet-layout) #fitMemoryScreen{
    position:static!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    width:calc(100vw - 24px)!important;
    max-width:none!important;
    margin-left:calc((100% - (100vw - 24px)) / 2)!important;
    margin-right:calc((100% - (100vw - 24px)) / 2)!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  html:not(.fitflow-tablet-layout) #fitMemoryScreen .screen-head,
  html:not(.fitflow-tablet-layout) #fitMemoryScreen>.panel,
  html:not(.fitflow-tablet-layout) #fitMemoryScreen #fitNoteList{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  html:not(.fitflow-tablet-layout) #fitMemoryScreen #fitNoteList{
    padding-left:4px!important;
    padding-right:4px!important;
  }

  html:not(.fitflow-tablet-layout) #fitMemoryScreen .fit-memory-list-row{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
}

/* =========================================================
   V2.3.46 — CANONICAL PHONE FIT MEMORY LAYOUT RESET
   Scope: phones only. Fit Memory only.
   Purpose: remove accumulated viewport/translate/tablet-class width overrides
   and return Fit Memory to the same normal .content flow as Home/Insights.
   ========================================================= */
@media (max-width:760px){
  html:not(.fitflow-tablet-layout) #fitMemoryScreen,
  html.fitflow-tablet-layout #fitMemoryScreen{
    position:static!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }

  html:not(.fitflow-tablet-layout) #fitMemoryScreen .screen-head,
  html.fitflow-tablet-layout #fitMemoryScreen .screen-head,
  html:not(.fitflow-tablet-layout) #fitMemoryScreen > .panel,
  html.fitflow-tablet-layout #fitMemoryScreen > .panel,
  html:not(.fitflow-tablet-layout) #fitMemoryScreen #fitNoteList,
  html.fitflow-tablet-layout #fitMemoryScreen #fitNoteList{
    position:static!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  html:not(.fitflow-tablet-layout) #fitMemoryScreen #fitNoteList,
  html.fitflow-tablet-layout #fitMemoryScreen #fitNoteList{
    padding-left:0!important;
    padding-right:0!important;
  }

  html:not(.fitflow-tablet-layout) #fitMemoryScreen .fit-memory-list-row,
  html.fitflow-tablet-layout #fitMemoryScreen .fit-memory-list-row{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
}

/* =========================================================
   V2.3.46 — AUTHORITATIVE TABLET 7-SCREEN RESTORE
   Restores the exact wide tablet canvas that was previously approved.
   Scope ONLY: Home, Customers, Orders, Payments, Fit Memory, Insights, Settings.
   Header/nav/mobile/desktop business UI are not targeted.
   ========================================================= */
html.fitflow-tablet-layout #dashboardScreen,
html.fitflow-tablet-layout #customersScreen,
html.fitflow-tablet-layout #ordersScreen,
html.fitflow-tablet-layout #paymentsScreen,
html.fitflow-tablet-layout #fitMemoryScreen,
html.fitflow-tablet-layout #insightsScreen,
html.fitflow-tablet-layout #settingsScreen{
  position:relative!important;
  inset:auto!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:calc(100vw - 52px)!important;
  min-width:0!important;
  max-width:1180px!important;
  margin:0!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box!important;
}

html.fitflow-tablet-layout #dashboardScreen .screen-head,
html.fitflow-tablet-layout #dashboardScreen .metric-grid,
html.fitflow-tablet-layout #dashboardScreen>.panel,
html.fitflow-tablet-layout #dashboardScreen #attentionList,
html.fitflow-tablet-layout #customersScreen .screen-head,
html.fitflow-tablet-layout #customersScreen .customer-summary-grid,
html.fitflow-tablet-layout #customersScreen .customer-directory-panel,
html.fitflow-tablet-layout #customersScreen #customerList,
html.fitflow-tablet-layout #ordersScreen .screen-head,
html.fitflow-tablet-layout #ordersScreen .filter-row,
html.fitflow-tablet-layout #ordersScreen>.panel,
html.fitflow-tablet-layout #ordersScreen #orderList,
html.fitflow-tablet-layout #ordersScreen .order-status-group,
html.fitflow-tablet-layout #ordersScreen .order-group-list,
html.fitflow-tablet-layout #paymentsScreen .screen-head,
html.fitflow-tablet-layout #paymentsScreen .payment-search-wrap,
html.fitflow-tablet-layout #paymentsScreen .payment-search,
html.fitflow-tablet-layout #paymentsScreen>.panel,
html.fitflow-tablet-layout #paymentsScreen #paymentList,
html.fitflow-tablet-layout #paymentsScreen .payment-section,
html.fitflow-tablet-layout #paymentsScreen .payment-section-list,
html.fitflow-tablet-layout #fitMemoryScreen .screen-head,
html.fitflow-tablet-layout #fitMemoryScreen>.panel,
html.fitflow-tablet-layout #fitMemoryScreen #fitNoteList,
html.fitflow-tablet-layout #insightsScreen .screen-head,
html.fitflow-tablet-layout #insightsScreen .insights-period-tabs,
html.fitflow-tablet-layout #insightsScreen .insights-period-label,
html.fitflow-tablet-layout #insightsScreen #insightsContent,
html.fitflow-tablet-layout #insightsScreen #insightsContent>*,
html.fitflow-tablet-layout #insightsScreen .insights-kpi-grid,
html.fitflow-tablet-layout #insightsScreen .insights-secondary-grid,
html.fitflow-tablet-layout #insightsScreen .insights-two-col,
html.fitflow-tablet-layout #insightsScreen .insight-panel,
html.fitflow-tablet-layout #settingsScreen .screen-head,
html.fitflow-tablet-layout #settingsScreen #settingsContent,
html.fitflow-tablet-layout #settingsScreen #settingsContent>*,
html.fitflow-tablet-layout #settingsScreen .settings-account-strip,
html.fitflow-tablet-layout #settingsScreen .settings-group,
html.fitflow-tablet-layout #settingsScreen .settings-card-stack,
html.fitflow-tablet-layout #settingsScreen .settings-section,
html.fitflow-tablet-layout #settingsScreen .settings-section-list{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}

html.fitflow-tablet-layout #customersScreen .customer-card-row,
html.fitflow-tablet-layout #ordersScreen .order-group-list .list-row,
html.fitflow-tablet-layout #paymentsScreen .payment-ledger-row,
html.fitflow-tablet-layout #fitMemoryScreen .fit-memory-list-row{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
}

html.fitflow-tablet-layout #ordersScreen .filter-row{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
html.fitflow-tablet-layout #ordersScreen #orderSearch{grid-column:1/-1!important;}

/* Touch-tablet fallback for Android/iPad browser modes where UA/viewport reporting changes.
   Phone landscape is excluded by min-height:600px. Ordinary desktops do not match coarse/no-hover. */
@media (min-width:600px) and (min-height:600px) and (any-pointer:coarse),
       (min-width:600px) and (min-height:600px) and (hover:none){
  #dashboardScreen,
  #customersScreen,
  #ordersScreen,
  #paymentsScreen,
  #fitMemoryScreen,
  #insightsScreen,
  #settingsScreen{
    position:relative!important;
    inset:auto!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:calc(100vw - 52px)!important;
    min-width:0!important;
    max-width:1180px!important;
    margin:0!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  #dashboardScreen .screen-head,
  #dashboardScreen .metric-grid,
  #dashboardScreen>.panel,
  #dashboardScreen #attentionList,
  #customersScreen .screen-head,
  #customersScreen .customer-summary-grid,
  #customersScreen .customer-directory-panel,
  #customersScreen #customerList,
  #ordersScreen .screen-head,
  #ordersScreen .filter-row,
  #ordersScreen>.panel,
  #ordersScreen #orderList,
  #ordersScreen .order-status-group,
  #ordersScreen .order-group-list,
  #paymentsScreen .screen-head,
  #paymentsScreen .payment-search-wrap,
  #paymentsScreen .payment-search,
  #paymentsScreen>.panel,
  #paymentsScreen #paymentList,
  #paymentsScreen .payment-section,
  #paymentsScreen .payment-section-list,
  #fitMemoryScreen .screen-head,
  #fitMemoryScreen>.panel,
  #fitMemoryScreen #fitNoteList,
  #insightsScreen .screen-head,
  #insightsScreen .insights-period-tabs,
  #insightsScreen .insights-period-label,
  #insightsScreen #insightsContent,
  #insightsScreen #insightsContent>*,
  #insightsScreen .insights-kpi-grid,
  #insightsScreen .insights-secondary-grid,
  #insightsScreen .insights-two-col,
  #insightsScreen .insight-panel,
  #settingsScreen .screen-head,
  #settingsScreen #settingsContent,
  #settingsScreen #settingsContent>*,
  #settingsScreen .settings-account-strip,
  #settingsScreen .settings-group,
  #settingsScreen .settings-card-stack,
  #settingsScreen .settings-section,
  #settingsScreen .settings-section-list{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  #customersScreen .customer-card-row,
  #ordersScreen .order-group-list .list-row,
  #paymentsScreen .payment-ledger-row,
  #fitMemoryScreen .fit-memory-list-row{
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }

  #ordersScreen .filter-row{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  #ordersScreen #orderSearch{grid-column:1/-1!important;}
}

/* =========================================================
   V2.3.46 — AUTHORITATIVE MOBILE 7-SCREEN CANVAS
   Phone only (<600px). One shared page geometry for:
   Home, Customers, Orders, Payments, Fit Memory, Insights, Settings.
   Matches the original phone content/header gutter system: 12px each side.
   No viewport width, negative margins, left/translate, or per-screen expansion.
   Tablet (>=600px) and desktop are intentionally outside this rule.
   ========================================================= */
@media (max-width:599px){
  /* Canonical phone canvas. Header is not targeted. */
  html body #appView .content{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:12px!important;
    padding-right:12px!important;
    box-sizing:border-box!important;
  }

  /* Every primary workspace occupies exactly the same canvas. */
  html body #appView .content #dashboardScreen,
  html body #appView .content #customersScreen,
  html body #appView .content #ordersScreen,
  html body #appView .content #paymentsScreen,
  html body #appView .content #fitMemoryScreen,
  html body #appView .content #insightsScreen,
  html body #appView .content #settingsScreen{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  /* Common top-level sections inherit the same exact width. */
  html body #appView .content #dashboardScreen .screen-head,
  html body #appView .content #dashboardScreen .metric-grid,
  html body #appView .content #dashboardScreen > .panel,
  html body #appView .content #dashboardScreen #attentionList,
  html body #appView .content #customersScreen .screen-head,
  html body #appView .content #customersScreen .customer-summary-grid,
  html body #appView .content #customersScreen .customer-directory-panel,
  html body #appView .content #customersScreen #customerList,
  html body #appView .content #ordersScreen .screen-head,
  html body #appView .content #ordersScreen .filter-row,
  html body #appView .content #ordersScreen > .panel,
  html body #appView .content #ordersScreen #orderList,
  html body #appView .content #paymentsScreen .screen-head,
  html body #appView .content #paymentsScreen .payment-search-wrap,
  html body #appView .content #paymentsScreen .payment-search,
  html body #appView .content #paymentsScreen > .panel,
  html body #appView .content #paymentsScreen #paymentList,
  html body #appView .content #fitMemoryScreen .screen-head,
  html body #appView .content #fitMemoryScreen > .panel,
  html body #appView .content #fitMemoryScreen #fitNoteList,
  html body #appView .content #insightsScreen .screen-head,
  html body #appView .content #insightsScreen .insights-period-tabs,
  html body #appView .content #insightsScreen .insights-period-label,
  html body #appView .content #insightsScreen #insightsContent,
  html body #appView .content #settingsScreen .screen-head,
  html body #appView .content #settingsScreen #settingsContent{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  /* Fit Memory gets no special geometry; only its internal card padding remains. */
  html body #appView .content #fitMemoryScreen #fitNoteList{
    padding-left:8px!important;
    padding-right:8px!important;
  }
  html body #appView .content #fitMemoryScreen .fit-memory-list-row{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
}

/* =========================================================
   V2.3.46 — FIT MEMORY NOTE FORM VISUAL ALIGNMENT
   Scope: New/Edit Fit Memory modal only.
   Goal: match Boutique Profile typography, field rhythm and FitFlow palette.
   Does not modify workspace widths, tablet canvas, desktop screens or header.
   ========================================================= */
#modal[data-mode="fit-memory"] .modal-head h2{
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:500!important;
  color:#3F302F!important;
  letter-spacing:-.018em!important;
}
#modal[data-mode="fit-memory"] .modal-head .muted{
  color:#756862!important;
  font-weight:450!important;
  letter-spacing:0!important;
}
#modal[data-mode="fit-memory"] .fit-memory-note-form{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:13px!important;
  width:100%!important;
  min-width:0!important;
}
#modal[data-mode="fit-memory"] .fit-memory-note-form label{
  display:grid!important;
  gap:7px!important;
  min-width:0!important;
  color:#6E625C!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:.73rem!important;
  font-weight:700!important;
  line-height:1.3!important;
  letter-spacing:.012em!important;
}
#modal[data-mode="fit-memory"] .fit-memory-note-form .full{
  grid-column:1/-1!important;
}
#modal[data-mode="fit-memory"] .fit-memory-note-form select,
#modal[data-mode="fit-memory"] .fit-memory-note-form textarea,
#modal[data-mode="fit-memory"] .fit-memory-note-form .fitflow-mobile-garment-trigger,
#modal[data-mode="fit-memory"] .fit-memory-note-form .fit-memory-choice-trigger{
  width:100%!important;
  min-width:0!important;
  min-height:48px!important;
  margin:0!important;
  padding:10px 13px!important;
  border:1px solid #DCCFC5!important;
  border-radius:14px!important;
  background:#FFFDFB!important;
  color:#334A40!important;
  box-shadow:0 2px 7px rgba(67,52,44,.025)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:.93rem!important;
  font-weight:650!important;
  line-height:1.25!important;
  letter-spacing:0!important;
}
#modal[data-mode="fit-memory"] .fit-memory-note-form textarea{
  min-height:104px!important;
  resize:vertical!important;
  font-weight:500!important;
  line-height:1.42!important;
}
#modal[data-mode="fit-memory"] .fit-memory-note-form textarea::placeholder{
  color:#A99D96!important;
  font-weight:450!important;
}

/* Customer + Issue type: never expose browser-native picker. */
#modal[data-mode="fit-memory"] select.fit-memory-choice-native{
  display:none!important;
}
#modal[data-mode="fit-memory"] .fit-memory-choice-trigger{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  cursor:pointer!important;
  text-align:left!important;
  -webkit-tap-highlight-color:transparent!important;
}
#modal[data-mode="fit-memory"] .fit-memory-choice-trigger .fitflow-field-choice-copy{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
}
#modal[data-mode="fit-memory"] .fit-memory-choice-trigger-text{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#334A40!important;
  font-size:.93rem!important;
  font-weight:650!important;
}
#modal[data-mode="fit-memory"] .fit-memory-choice-dot{
  width:9px!important;
  height:9px!important;
  min-width:9px!important;
  border-radius:50%!important;
  background:#728294!important;
  box-shadow:0 0 0 4px #EEF2F4!important;
}
#modal[data-mode="fit-memory"] .fit-memory-choice-issue .fit-memory-choice-dot{
  background:#B86F58!important;
  box-shadow:0 0 0 4px #F8ECE7!important;
}
#modal[data-mode="fit-memory"] .fit-memory-choice-trigger .fitflow-field-choice-chevron{
  color:#75828A!important;
  font-size:.95rem!important;
  line-height:1!important;
}
#modal[data-mode="fit-memory"] .fit-memory-choice-trigger:focus-visible{
  outline:2px solid rgba(102,128,141,.24)!important;
  outline-offset:2px!important;
}

/* Desktop popover for the two Fit Memory custom fields. */
.fitflow-select-popover.fit-memory-choice-popover{
  padding:8px!important;
  gap:6px!important;
  border:1px solid #D9CEC5!important;
  border-radius:16px!important;
  background:#FFFDFB!important;
  box-shadow:0 20px 44px rgba(49,39,43,.20)!important;
}
.fitflow-select-popover.fit-memory-choice-popover .fitflow-select-option{
  min-height:44px!important;
  padding:9px 11px!important;
  border-radius:11px!important;
  color:#4A403A!important;
  font-size:.78rem!important;
  font-weight:650!important;
}
.fitflow-select-popover.fit-memory-choice-popover .fitflow-select-option:hover{
  background:#F6F1EC!important;
  border-color:#E8DED6!important;
}
.fitflow-select-popover.fit-memory-choice-popover .fitflow-select-option.selected{
  background:#EEF3F1!important;
  border-color:#CCDCD6!important;
  color:#3F6558!important;
}
.fitflow-select-popover.fit-memory-choice-popover .fitflow-select-option.selected .fitflow-select-option-dot{
  background:#5F7D70!important;
}

@media(max-width:599px){
  /* Match the compact Boutique Profile form rhythm on phones. */
  #modal[data-mode="fit-memory"] .modal-body{
    padding:12px 11px 18px!important;
  }
  #modal[data-mode="fit-memory"] .fit-memory-note-form{
    gap:12px!important;
  }
  #modal[data-mode="fit-memory"] .fit-memory-note-form label{
    gap:6px!important;
    font-size:.73rem!important;
  }
  #modal[data-mode="fit-memory"] .fit-memory-note-form select,
  #modal[data-mode="fit-memory"] .fit-memory-note-form textarea,
  #modal[data-mode="fit-memory"] .fit-memory-note-form .fitflow-mobile-garment-trigger,
  #modal[data-mode="fit-memory"] .fit-memory-note-form .fit-memory-choice-trigger{
    min-height:48px!important;
    padding:10px 13px!important;
    border-radius:14px!important;
    font-size:.93rem!important;
  }
  #modal[data-mode="fit-memory"] .fit-memory-note-form textarea{
    min-height:96px!important;
  }
}

/* ========================================================================== */
/* ANIQ TailorDesk — product wordmark typography only                         */
/* Branding presentation override. No functional or responsive geometry logic. */
/* ========================================================================== */
.product-brand-name{
  text-transform:none!important;
  display:inline-flex;
  align-items:baseline;
  gap:.34em;
  white-space:nowrap;
  letter-spacing:0!important;
}
.product-brand-name .product-brand-aniq{
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-weight:800!important;
  font-style:normal!important;
  letter-spacing:.15em!important;
  text-transform:none!important;
}
.product-brand-name .product-brand-tailordesk{
  font-family:Georgia,"Times New Roman",serif!important;
  font-weight:400!important;
  font-style:normal!important;
  letter-spacing:-.018em!important;
  text-transform:none!important;
}
.auth-product-brand{
  margin:0!important;
  color:var(--accent-deep)!important;
  line-height:1.08!important;
}
.auth-product-brand .product-brand-aniq{
  font-size:.86rem!important;
  color:#7F6667!important;
}
.auth-product-brand .product-brand-tailordesk{
  font-size:2rem!important;
  color:var(--accent-deep)!important;
}
.topbar-brand .header-product-brand{
  color:#7F6667!important;
  font-weight:400!important;
  line-height:1.15!important;
}
.topbar-brand .header-product-brand .product-brand-aniq{
  font-size:.67rem!important;
  color:inherit!important;
}
.topbar-brand .header-product-brand .product-brand-tailordesk{
  font-size:.84rem!important;
  color:inherit!important;
}


/* ========================================================================== */
/* ANIQ TailorDesk — approved tri-colour wordmark                             */
/* Visible branding only. Internal fitflow identifiers remain unchanged.       */
/* ========================================================================== */
.product-brand-name .product-brand-aniq{
  color:#7A3040!important; /* premium maroon */
}
.product-brand-name .product-brand-tailordesk{
  display:inline-flex;
  align-items:baseline;
  gap:0;
  color:inherit!important;
}
.product-brand-name .product-brand-tailor{
  color:#3F6558!important; /* muted tailoring green */
}
.product-brand-name .product-brand-desk{
  color:#A65357!important; /* refined muted red */
}
.auth-product-brand .product-brand-aniq,
.topbar-brand .header-product-brand .product-brand-aniq{
  color:#7A3040!important;
}
.auth-product-brand .product-brand-tailor,
.topbar-brand .header-product-brand .product-brand-tailor{
  color:#3F6558!important;
}
.auth-product-brand .product-brand-desk,
.topbar-brand .header-product-brand .product-brand-desk{
  color:#A65357!important;
}


/* V2.3.47 Step 3B — Team member roles are read-only badges until Owner chooses Edit. */
.team-member-role-control{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex:0 0 auto;
  min-width:0;
}
.team-member-role-control .team-member-role-badge{
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.team-member-role-control .team-edit-role-btn{
  flex:0 0 auto;
  min-height:32px;
}
.team-member-role-control .team-existing-role-select{
  width:min(205px,44vw);
  max-width:205px;
}
@media(max-width:760px){
  .team-member-role-control{
    width:100%;
    justify-content:flex-start;
  }
  .team-member-role-control .team-existing-role-select{
    width:100%;
    max-width:none;
  }
}


/* V2.3.47 Step 3C — explicit Owner-only remove action beside Edit. */
.team-member-role-control .team-delete-member-btn{
  flex:0 0 auto;
  min-height:32px;
  color:#9B5D61!important;
  border-color:#DCC1C3!important;
  background:#FFF9F8!important;
}
.team-member-role-control .team-delete-member-btn:hover{
  background:#FBEDEC!important;
  border-color:#CFAAAD!important;
}
@media(max-width:760px){
  .team-member-role-control .team-delete-member-btn,
  .team-member-role-control .team-edit-role-btn{
    min-width:64px;
  }
}

/* =========================================================
   ANIQ TailorDesk V2.3.47 Step 3 — Staff Login
   Auth-only refinement. Approved app Desktop/Tablet/Mobile layouts unchanged.
   ========================================================= */
.auth-mode-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.auth-mode-tabs button{min-width:0;padding-inline:7px;font-size:.78rem}
.auth-staff-help{display:block;color:var(--muted);font-size:.74rem;line-height:1.45;margin-top:-3px}
.auth-login-note{display:block;margin:14px 2px 0;line-height:1.45}
#staffLoginPin{letter-spacing:.22em;font-weight:750}
#staffLoginBtn:disabled{opacity:.65;cursor:wait}
@media(max-width:440px){
  .auth-mode-tabs button{font-size:.72rem;padding-inline:4px}
}

/* =========================================================
   ANIQ TailorDesk V2.3.47 Step 4 — Trusted Admin Password Login
   Auth + Team & Access only. Approved workspace layouts unchanged.
   ========================================================= */
.auth-mode-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
.auth-secondary-link{
  border:0;
  background:transparent;
  color:var(--accent);
  padding:3px 6px;
  font-weight:700;
  cursor:pointer;
  text-align:center;
}
.auth-secondary-link:hover{text-decoration:underline}
.auth-form-intro{
  display:grid;
  gap:4px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#FAF9FC;
}
.auth-form-intro strong{font-size:.84rem}
.auth-form-intro small{color:var(--muted);font-size:.74rem;line-height:1.45}
.trusted-admin-setup-intro{margin-top:18px}
#passwordLoginBtn:disabled,#ownerSignupBtn:disabled,#trustedAdminPasswordBtn:disabled{opacity:.65;cursor:wait}
.trusted-admin-link-result{align-items:flex-start;flex-wrap:wrap}
.trusted-admin-email-row code{
  letter-spacing:0;
  font-size:.72rem;
  min-width:0;
  max-width:300px;
  overflow-wrap:anywhere;
}
.trusted-admin-activation-wrap{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
}
.trusted-admin-activation-wrap textarea{
  min-height:58px;
  max-height:86px;
  resize:none;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:.64rem;
  line-height:1.35;
  color:#42564E;
  background:#FFF;
}
@media(max-width:760px){
  .trusted-admin-activation-wrap{grid-template-columns:1fr}
  .trusted-admin-activation-wrap .settings-mini-btn{justify-self:start}
}


/* =========================================================
   V2.3.47 STEP 9I — Voice clarity + compact delivery date
   + TailorDesk custom date / voice garment pickers
   ========================================================= */

/* Voice-note garment select now uses existing TailorDesk garment chooser. */
#modal #voiceGarment.fitflow-mobile-garment-native{display:none!important}

/* Compact delivery-date editor trigger. */
.delivery-only-editor .form-section-card{height:auto!important;min-height:0!important}
.tailordesk-date-trigger{
  width:100%;min-height:58px;padding:10px 13px;border:1px solid #D8CDC4;border-radius:14px;
  background:#FFFDF9;color:#403936;display:flex;align-items:center;justify-content:space-between;gap:12px;
  text-align:left;box-shadow:0 3px 10px rgba(67,52,44,.035);cursor:pointer
}
.tailordesk-date-trigger:hover{background:#FBF7F2;border-color:#CDBEB3}
.tailordesk-date-trigger:focus-visible{outline:2px solid rgba(104,128,139,.25);outline-offset:2px}
.tailordesk-date-trigger.field-warning{border-color:#C98B78!important;box-shadow:0 0 0 3px rgba(177,101,80,.10)!important}
.tailordesk-date-trigger-copy{display:grid;gap:2px;min-width:0}
.tailordesk-date-trigger-copy small{font-size:.61rem;letter-spacing:.08em;text-transform:uppercase;color:#9B7669;font-weight:800}
.tailordesk-date-trigger-copy strong{font-size:.92rem;color:#413A35;font-weight:720}
.tailordesk-date-trigger-chevron{font-size:1.05rem;color:#697A81;opacity:.76}

/* Branded calendar dialog replaces Android/browser native date UI. */
.tailordesk-date-picker{
  width:min(430px,calc(100% - 24px));max-width:430px;margin:auto;padding:0;border:0;border-radius:24px;
  background:transparent;color:#403936;box-shadow:none;overflow:visible
}
.tailordesk-date-picker::backdrop{background:rgba(31,27,29,.46);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.tailordesk-date-card{overflow:hidden;border:1px solid rgba(121,105,95,.20);border-radius:24px;background:#FFFDF9;box-shadow:0 26px 60px rgba(35,28,31,.27)}
.tailordesk-date-head{display:flex;justify-content:space-between;gap:14px;padding:18px 18px 13px;border-bottom:1px solid #E9E1DA}
.tailordesk-date-head h3{margin:3px 0 0;font-family:Georgia,"Times New Roman",serif;font-size:1.28rem;font-weight:500;color:#403833}
.tailordesk-date-head p{margin:4px 0 0;font-size:.68rem;line-height:1.35;color:#81766E}
.tailordesk-date-close{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;padding:0!important;border:0!important;border-radius:11px!important;background:#F3ECE7!important;color:#7A625A!important;font-size:1.05rem!important;box-shadow:none!important}
.tailordesk-date-nav{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:8px;padding:13px 16px 8px}
.tailordesk-date-nav strong{text-align:center;font-family:Georgia,"Times New Roman",serif;font-size:1.02rem;font-weight:500;color:#403833}
.tailordesk-date-nav-btn{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;border:1px solid #E3D9D1!important;border-radius:12px!important;background:#F7F1EC!important;color:#5F5550!important;font-size:1.45rem!important;line-height:1!important;box-shadow:none!important}
.tailordesk-date-weekdays,.tailordesk-date-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;padding-inline:16px}
.tailordesk-date-weekdays{padding-top:5px;padding-bottom:5px;color:#998B82;font-size:.58rem;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:.04em}
.tailordesk-date-grid{padding-bottom:14px}
.tailordesk-date-blank{min-height:40px}
.tailordesk-date-day{min-width:0!important;width:100%!important;aspect-ratio:1/1;min-height:40px!important;padding:0!important;border:1px solid transparent!important;border-radius:12px!important;background:transparent!important;color:#403833!important;font-size:.80rem!important;font-weight:690!important;box-shadow:none!important}
.tailordesk-date-day:hover{background:#F6F0EB!important;border-color:#E9DED5!important}
.tailordesk-date-day.today{border-color:#C6D3D8!important;color:#4D6E79!important}
.tailordesk-date-day.selected{background:#6F7E8F!important;border-color:#6F7E8F!important;color:#FFF!important;box-shadow:0 5px 12px rgba(92,112,128,.18)!important}
.tailordesk-date-day:disabled{opacity:.28!important;cursor:not-allowed!important;background:transparent!important}
.tailordesk-date-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px 16px;border-top:1px solid #E9E1DA;background:#FBF7F3}
.tailordesk-date-actions>div{display:flex;gap:8px}
.tailordesk-date-actions button{min-height:40px!important;padding:8px 13px!important;border-radius:12px!important}

@media(max-width:760px){
  /* Delivery-date editor should be content-height, not full-screen. */
  #modal.delivery-date-compact{
    width:calc(100% - 20px)!important;max-width:560px!important;height:auto!important;max-height:calc(var(--ff-mobile-viewport,100dvh) - 18px)!important;margin:auto!important
  }
  #modal.delivery-date-compact .modal-card{
    height:auto!important;min-height:0!important;max-height:calc(var(--ff-mobile-viewport,100dvh) - 18px)!important;display:flex!important;flex-direction:column!important
  }
  #modal.delivery-date-compact .modal-head{padding:16px 16px 12px!important}
  #modal.delivery-date-compact .modal-body{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;padding:12px 14px!important;flex:0 1 auto!important}
  #modal.delivery-date-compact .delivery-only-editor{width:100%!important;max-width:none!important;margin:0!important}
  #modal.delivery-date-compact .delivery-only-editor .form-section-card{margin:0!important;padding:14px!important;min-height:0!important}
  #modal.delivery-date-compact .modal-actions{position:static!important;padding:12px 14px 14px!important;flex:0 0 auto!important}
  #modal.delivery-date-compact #modalCancelBtn,#modal.delivery-date-compact #modalSaveBtn{min-height:46px!important}

  .tailordesk-date-picker{width:calc(100% - 20px);margin:auto auto 8px;border-radius:23px}
  .tailordesk-date-card{border-radius:23px}
  .tailordesk-date-head{padding:15px 15px 11px}
  .tailordesk-date-nav{padding:11px 13px 7px}
  .tailordesk-date-weekdays,.tailordesk-date-grid{padding-inline:12px;gap:4px}
  .tailordesk-date-day{min-height:42px!important;border-radius:11px!important;font-size:.84rem!important}
  .tailordesk-date-actions{padding:11px 13px 13px}
  .tailordesk-date-actions>div{gap:6px}
}

/* =========================================================
   ANIQ TailorDesk Step 11 — Customer Order Status Link / QR
   ========================================================= */
.customer-status-share-trigger{white-space:nowrap}
.customer-status-share{display:grid;gap:16px}
.customer-status-safe-note{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid #d8e2d9;background:#f0f6f1;border-radius:16px;color:#4e6654}
.customer-status-safe-icon{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:#dcebdd;color:#51705a;font-weight:850;flex:0 0 auto}
.customer-status-safe-note strong,.customer-status-safe-note small{display:block}.customer-status-safe-note small{margin-top:3px;color:#6b796e;line-height:1.45}
.customer-status-share-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(210px,.65fr);gap:14px}
.customer-status-link-card,.customer-status-qr-card{border:1px solid var(--line);background:#fffdfb;border-radius:18px;padding:16px}
.customer-status-link-field{display:block;margin-top:8px}.customer-status-link-field input{font-size:.82rem;background:#faf7f3;color:#5e565a}
.customer-status-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}.customer-status-actions .primary,.customer-status-actions .soft-btn{min-height:40px}
.customer-status-local-note{display:grid;gap:2px;margin-top:12px;padding:10px 11px;border-radius:13px;background:#fbf3e7;border:1px solid #ead9c4;color:#745c4a;font-size:.77rem}.customer-status-local-note span{line-height:1.4}
.customer-status-qr-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}.customer-status-qr-card .micro-label{align-self:flex-start}.customer-status-qr-card img{width:min(220px,100%);aspect-ratio:1;object-fit:contain;background:#fff;border:1px solid #eee5df;border-radius:14px;padding:8px}.customer-status-qr-card small{color:var(--muted);line-height:1.4}.customer-status-qr-error{height:180px;width:180px;display:grid;place-items:center;border:1px dashed var(--line-strong);border-radius:14px;color:var(--muted)}
.customer-status-security-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:2px;font-size:.78rem;color:var(--muted)}.customer-status-security-row .link-btn{flex:0 0 auto}
@media(max-width:760px){
  .customer-status-share-grid{grid-template-columns:1fr}.customer-status-qr-card img{width:210px}.customer-status-security-row{align-items:flex-start;flex-direction:column}.customer-status-share-trigger{padding:9px 11px;font-size:.78rem}
}

/* =========================================================
   ANIQ TailorDesk Step 11C — Customer Status modal viewport fix
   Desktop / tablet only. Keeps the action footer outside the
   scrollable content so the final security row is never covered.
   ========================================================= */
@media (min-width:761px){
  #modal:has(.customer-status-share) .modal-card{
    display:flex!important;
    flex-direction:column!important;
    max-height:88vh!important;
    overflow:hidden!important;
  }
  #modal:has(.customer-status-share) .modal-head{
    flex:0 0 auto!important;
  }
  #modal:has(.customer-status-share) .modal-body{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    padding-bottom:24px!important;
  }
  #modal:has(.customer-status-share) .modal-actions{
    position:static!important;
    flex:0 0 auto!important;
    z-index:2!important;
    box-shadow:0 -8px 20px rgba(54,37,46,.07)!important;
  }
}

/* =========================================================
   ANIQ TailorDesk Step 12 — 5-minute boutique onboarding
   New-account only. Existing application layouts are untouched.
   ========================================================= */
.onboarding-card{
  width:min(760px,calc(100vw - 32px));
  padding:30px;
  border-radius:28px;
}
.onboarding-brand-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px;
}
.onboarding-brand-lockup{margin:0}
.onboarding-brand-lockup .brand-mark{flex:0 0 auto}
.onboarding-brand-lockup p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:.78rem;
}
.onboarding-step-count{
  display:grid;
  justify-items:end;
  gap:2px;
  padding-top:5px;
  white-space:nowrap;
}
.onboarding-step-count strong{
  color:var(--accent-deep);
  font-size:.78rem;
}
.onboarding-step-count span{
  color:var(--muted);
  font-size:.71rem;
}
.onboarding-progress{
  height:5px;
  border-radius:999px;
  background:#eee4de;
  overflow:hidden;
  margin-bottom:28px;
}
.onboarding-progress span{
  display:block;
  width:25%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--gold),var(--accent));
  transition:width .24s ease;
}
.onboarding-form{display:grid;gap:22px}
.onboarding-step{min-height:306px}
.onboarding-step h2{
  margin:5px 0 7px;
  color:var(--accent-deep);
  font-size:1.9rem;
}
.onboarding-step>.muted{margin-bottom:22px;line-height:1.55}
.onboarding-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;
}
.onboarding-fields .full{grid-column:1/-1}
.onboarding-fields label small{
  color:var(--muted);
  font-weight:500;
  line-height:1.4;
}
.onboarding-choice-block{display:grid;gap:9px;margin-top:18px}
.onboarding-choice-block+.onboarding-choice-block{margin-top:22px}
.onboarding-choice-label{
  color:#564a50;
  font-size:.81rem;
  font-weight:700;
}
.onboarding-choice-grid{
  display:grid;
  gap:10px;
}
.onboarding-choice-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.onboarding-choice-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.onboarding-choice{
  min-height:82px;
  display:grid;
  align-content:center;
  gap:4px;
  text-align:left;
  padding:13px 14px;
  border:1px solid var(--line-strong);
  border-radius:15px;
  background:#fffefa;
  color:var(--text);
  cursor:pointer;
  box-shadow:0 3px 10px rgba(64,43,52,.03);
}
.onboarding-choice strong{font-size:.88rem;color:#3d3037}
.onboarding-choice small{font-size:.72rem;line-height:1.35;color:var(--muted)}
.onboarding-choice:hover{border-color:#b99f8e;background:#fffaf5}
.onboarding-choice.active{
  border-color:#8f6c82;
  background:linear-gradient(145deg,#f7f0f4,#fffaf5);
  box-shadow:0 0 0 3px rgba(74,41,68,.07),0 8px 18px rgba(64,43,52,.06);
}
.onboarding-choice.active:after{
  content:'Selected';
  justify-self:start;
  margin-top:4px;
  color:var(--accent);
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.onboarding-review{
  display:grid;
  border:1px solid var(--line);
  border-radius:17px;
  overflow:hidden;
  background:#fffefa;
}
.onboarding-review-row{
  display:grid;
  grid-template-columns:minmax(130px,.7fr) minmax(0,1.3fr);
  gap:16px;
  align-items:center;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
}
.onboarding-review-row:last-child{border-bottom:0}
.onboarding-review-row span{font-size:.73rem;color:var(--muted)}
.onboarding-review-row strong{
  font-size:.82rem;
  color:#3a2e34;
  font-weight:700;
  text-align:right;
  overflow-wrap:anywhere;
}
.onboarding-ready-note{
  display:grid;
  gap:4px;
  margin-top:14px;
  padding:12px 14px;
  border:1px solid #ead9c5;
  border-radius:14px;
  background:#fbf4e9;
}
.onboarding-ready-note strong{font-size:.78rem;color:#5c4638}
.onboarding-ready-note span{font-size:.73rem;line-height:1.45;color:#766253}
.onboarding-actions{
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:17px;
  border-top:1px solid var(--line);
}
.onboarding-actions-spacer{flex:1}
.onboarding-actions .primary,.onboarding-actions .ghost{min-width:112px}

@media(max-width:760px){
  .onboarding-card{
    width:min(100%,calc(100vw - 20px));
    padding:22px 18px;
    border-radius:23px;
  }
  .onboarding-brand-row{gap:12px;margin-bottom:13px}
  .onboarding-brand-lockup{gap:10px}
  .onboarding-brand-lockup .brand-mark{width:46px;height:46px;border-radius:15px}
  .onboarding-brand-lockup .auth-product-brand{font-size:1.3rem}
  .onboarding-step-count{padding-top:2px}
  .onboarding-step-count span{display:none}
  .onboarding-progress{margin-bottom:22px}
  .onboarding-step{min-height:0}
  .onboarding-step h2{font-size:1.55rem}
  .onboarding-fields{grid-template-columns:1fr}
  .onboarding-fields .full{grid-column:auto}
  .onboarding-choice-grid.three,.onboarding-choice-grid.two{grid-template-columns:1fr}
  .onboarding-choice{min-height:68px}
  .onboarding-review-row{grid-template-columns:1fr;gap:3px}
  .onboarding-review-row strong{text-align:left}
  .onboarding-actions{position:sticky;bottom:0;background:rgba(255,253,251,.98);padding-bottom:max(2px,env(safe-area-inset-bottom))}
  .onboarding-actions .primary,.onboarding-actions .ghost{min-width:0}
}


/* =========================================================
   Step 12B — deterministic fast installed-app startup
   ========================================================= */
.startup-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    linear-gradient(125deg,rgba(74,41,68,.055),transparent 42%),
    radial-gradient(circle at 82% 18%,rgba(164,124,72,.15),transparent 24rem),
    #f4efe9;
}
.startup-card{
  width:min(430px,100%);
  text-align:center;
  background:rgba(255,253,251,.97);
  border:1px solid rgba(164,124,72,.25);
  border-radius:28px;
  padding:34px;
  box-shadow:0 30px 80px rgba(62,37,52,.11);
}
.startup-brand{justify-content:center;margin-bottom:20px}
.startup-card h2{
  margin:14px 0 6px;
  color:var(--accent-deep);
  font-size:1.55rem;
}
.startup-card p{margin:0 auto;max-width:330px;line-height:1.55}
.startup-spinner{
  width:34px;height:34px;margin:6px auto 14px;
  border-radius:50%;
  border:3px solid #eadfd7;
  border-top-color:var(--accent);
  animation:fitflowStartupSpin .75s linear infinite;
}
.startup-card.is-error .startup-spinner{display:none}
.startup-card.is-error #startupRetryBtn{margin:18px auto 0}
@keyframes fitflowStartupSpin{to{transform:rotate(360deg)}}

/* =========================================================
   ANIQ TailorDesk V2.3.47 Step 12D — Account recovery
   + Primary Owner login email change
   Auth / My Account only. Approved workspace layouts unchanged.
   ========================================================= */
#sendPasswordResetBtn:disabled,#passwordRecoverySaveBtn:disabled{opacity:.65;cursor:wait}
.my-account-email-change{
  display:grid;
  gap:8px;
  padding-top:12px;
  margin-top:4px;
  border-top:1px solid var(--line);
}
.my-account-email-change .settings-help{margin:0;line-height:1.45}
#passwordRecoveryView .auth-form-intro{margin-top:18px}

/* =========================================================
   ANIQ TailorDesk V2.3.47 Step 12D-A — My Account viewport fix
   Keeps the modal header/footer visible while the account form
   scrolls fully above the action footer. No auth logic changes.
   ========================================================= */
#modal:has(.my-account-form) .modal-card{
  display:flex!important;
  flex-direction:column!important;
  max-height:88vh!important;
  overflow:hidden!important;
}
#modal:has(.my-account-form) .modal-head{
  flex:0 0 auto!important;
}
#modal:has(.my-account-form) .modal-body{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  padding-bottom:30px!important;
}
#modal:has(.my-account-form) .modal-actions{
  position:static!important;
  flex:0 0 auto!important;
  z-index:2!important;
  box-shadow:0 -8px 20px rgba(54,37,46,.07)!important;
}
@media(max-width:760px){
  #modal:has(.my-account-form) .modal-card{
    max-height:calc(var(--ff-mobile-viewport,100dvh) - 16px)!important;
  }
  #modal:has(.my-account-form) .modal-body{
    padding-bottom:24px!important;
  }
}

/* ========================================================================== */
/* V2.3.47 Step 14 — Share TailorDesk V1                                    */
/* Owner-only growth utility. No referral tracking, rewards or customer data. */
/* ========================================================================== */
.tailordesk-share-settings{gap:14px!important}
.tailordesk-share-intro{
  display:grid;grid-template-columns:46px minmax(0,1fr);gap:12px;align-items:center;
  padding:13px 14px;border:1px solid #e7ddd5;border-radius:15px;background:#fffdfa
}
.tailordesk-share-mark{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(145deg,#321b2e,#4a2944);color:#fff;
  font-family:Georgia,"Times New Roman",serif;font-weight:600;box-shadow:0 7px 18px rgba(74,41,68,.14)
}
.tailordesk-share-intro strong{display:block;margin-top:2px;font-size:.92rem!important;color:#342a2f!important}
.tailordesk-share-intro small{display:block;margin-top:4px;font-size:.70rem;line-height:1.42;color:#756a70}
.tailordesk-share-ready{border-color:#cfe4da!important;background:#f1f8f4!important}
.tailordesk-share-wait{border-color:#ead9c5!important;background:#fbf4e9!important}
.tailordesk-share-message textarea{min-height:92px!important;resize:none!important;line-height:1.45!important}
.tailordesk-share-link input{font-size:.78rem!important}
.tailordesk-share-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tailordesk-share-actions.is-local{grid-template-columns:minmax(0,220px)}
.tailordesk-share-actions button{min-height:42px;padding:9px 10px!important;font-size:.75rem!important}
.tailordesk-share-note{display:block;line-height:1.4}
@media(max-width:760px){
  .tailordesk-share-intro{grid-template-columns:40px minmax(0,1fr);padding:11px 12px}
  .tailordesk-share-mark{width:40px;height:40px;border-radius:12px}
  .tailordesk-share-actions{grid-template-columns:1fr 1fr}
  .tailordesk-share-actions.is-local{grid-template-columns:1fr}
  .tailordesk-share-actions button{min-height:44px}
}

/* =========================================================
   ANIQ TailorDesk Step 15 — Smart Repeat Fit Memory
   Isolated Fit Memory reminder UI. No global layout changes.
   ========================================================= */
.fit-memory-remember-control{
  border:1px solid #E2D7CE;
  border-radius:14px;
  background:#FBF7F3;
  padding:11px 12px;
}
.fit-memory-remember-control>label{
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  margin:0!important;
  cursor:pointer;
}
.fit-memory-remember-control input[type="checkbox"]{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  margin:2px 0 0!important;
  padding:0!important;
  accent-color:#5F7D70;
  box-shadow:none!important;
}
.fit-memory-remember-control span{
  display:grid;
  gap:3px;
  min-width:0;
}
.fit-memory-remember-control strong{
  color:#3E3531;
  font-size:.82rem;
  font-weight:750;
}
.fit-memory-remember-control small{
  color:#7B706A;
  font-size:.72rem;
  line-height:1.38;
  font-weight:500;
}
.voice-fit-memory-remember{margin:2px 0 4px}
.voice-remember-badge{white-space:nowrap}

.repeat-fit-host{
  margin-top:12px;
}
.repeat-fit-host:empty{display:none}
.repeat-fit-summary{
  border:1px solid #D9D0C8;
  border-radius:16px;
  background:#FFFDFB;
  overflow:hidden;
  box-shadow:0 7px 20px rgba(62,47,42,.045);
}
.repeat-fit-summary-head{
  padding:11px 13px;
  border-bottom:1px solid #E9E0D9;
  background:#F8F4F0;
}
.repeat-fit-summary-head strong{
  display:block;
  color:#3F302F;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1rem;
  font-weight:500;
}
.repeat-fit-summary-head small{
  display:block;
  margin-top:2px;
  color:#786D67;
  font-size:.7rem;
  line-height:1.35;
}
.repeat-fit-garment{
  padding:11px 13px 12px;
  border-bottom:1px solid #EEE5DE;
}
.repeat-fit-garment:last-child{border-bottom:0}
.repeat-fit-garment-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.repeat-fit-garment-title span{
  color:#A47C48;
  font-size:.62rem;
  font-weight:850;
  letter-spacing:.12em;
}
.repeat-fit-garment-title strong{
  color:#443837;
  font-size:.78rem;
  font-weight:750;
}
.repeat-fit-row{
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto;
  gap:9px;
  align-items:start;
  padding:9px 10px;
  margin-top:7px;
  border:1px solid #E8DFD8;
  border-radius:12px;
  background:#FCFAF8;
}
.repeat-fit-row:first-of-type{margin-top:0}
.repeat-fit-row.alteration{background:#FFF8EF;border-color:#ECD7B7}
.repeat-fit-row.preference{background:#F2F8F5;border-color:#D2E3DA}
.repeat-fit-row.general{background:#F7F7F8;border-color:#E2E0E4}
.repeat-fit-row.voice{background:#F7F4F8;border-color:#E0D8E3}
.repeat-fit-icon{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#EEE7E2;
  color:#625650;
  font-size:.72rem;
  font-weight:850;
}
.repeat-fit-row.alteration .repeat-fit-icon{background:#F5E4CB;color:#8A5D1E}
.repeat-fit-row.preference .repeat-fit-icon{background:#DDEDE5;color:#39705A}
.repeat-fit-row.voice .repeat-fit-icon{background:#E9E1EC;color:#6A4A68}
.repeat-fit-row>div{min-width:0}
.repeat-fit-row strong{
  display:block;
  color:#473B38;
  font-size:.78rem;
  line-height:1.3;
}
.repeat-fit-row p{
  margin:3px 0 2px;
  color:#4E4541;
  font-size:.8rem;
  line-height:1.38;
  overflow-wrap:anywhere;
}
.repeat-fit-row small{
  display:block;
  color:#857A74;
  font-size:.66rem;
  line-height:1.25;
}
.repeat-fit-play{
  align-self:center;
  padding:7px 9px!important;
  min-height:34px!important;
  white-space:nowrap;
  font-size:.72rem!important;
}

@media(max-width:760px){
  .repeat-fit-summary-head{padding:10px 11px}
  .repeat-fit-garment{padding:10px 11px 11px}
  .repeat-fit-row{
    grid-template-columns:24px minmax(0,1fr);
    padding:8px 9px;
  }
  .repeat-fit-row .repeat-fit-play{
    grid-column:2;
    justify-self:start;
    margin-top:2px;
  }
  .repeat-fit-row p{font-size:.78rem}
  .fit-memory-remember-control{padding:10px 11px}
}


/* =========================================================
   ANIQ TailorDesk Step 15A — Fit Memory modal viewport fix
   Scope: Fit Memory modal only on desktop/tablet.
   Keeps header + actions inside the viewport and gives the
   middle form its own scroll area so the final reminder field
   can never sit underneath the Save/Cancel footer.
   ========================================================= */
@media (min-width:761px){
  #modal[data-mode="fit-memory"] .modal-card{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    max-height:min(88vh,calc(100dvh - 28px))!important;
    overflow:hidden!important;
  }
  #modal[data-mode="fit-memory"] .modal-head{
    min-height:0!important;
  }
  #modal[data-mode="fit-memory"] .modal-body{
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    padding-bottom:24px!important;
  }
  #modal[data-mode="fit-memory"] .modal-actions{
    position:static!important;
    z-index:2!important;
    flex:0 0 auto!important;
    background:#FFFDFB!important;
    box-shadow:0 -7px 18px rgba(54,37,46,.055)!important;
  }
}

/* =========================================================
   Step 15B — Design voice + compact measurement/reference row
   ========================================================= */
.design-instruction-field{display:grid;gap:7px}
.design-instruction-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.design-instruction-head>span{color:#564a50;font-size:.81rem;font-weight:620;line-height:1.3}
.inline-order-voice-btn{
  border:1px solid #d8cbc1;background:#fffefa;color:#5a474f;border-radius:10px;
  min-height:34px;padding:6px 10px;font:inherit;font-size:.72rem;font-weight:620;
  cursor:pointer;white-space:nowrap;box-shadow:0 2px 7px rgba(64,43,52,.035)
}
.inline-order-voice-btn:hover{background:#fbf6f1;border-color:#c8b7ab}
.inline-order-voice-btn.recording{background:#f9e9e7;border-color:#dfb8b2;color:#923f43}
.inline-order-voice-btn.has-voice{background:#edf5f0;border-color:#c9ded1;color:#35634f}
.inline-order-voice-panel{
  display:grid;gap:7px;padding:9px 10px;border:1px solid #e1d6cd;border-radius:11px;
  background:#fffdfa
}
.inline-order-voice-status{display:flex;align-items:center;justify-content:space-between;gap:10px}
.inline-order-voice-status strong{font-size:.72rem;font-weight:620;color:#4d4147}
.inline-order-voice-status span{font-size:.66rem;color:#887b80}
.inline-order-voice-preview{width:100%;height:34px}
.inline-order-voice-panel-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.inline-order-voice-panel-foot small{font-size:.64rem;line-height:1.3;color:#8d8186;text-align:right}
.inline-order-voice-remove{
  border:0;background:transparent;color:#9f3a3a;padding:3px 0;font:inherit;font-size:.68rem;font-weight:600;cursor:pointer;white-space:nowrap
}
.design-measurement-row{
  display:grid;grid-template-columns:minmax(180px,230px) minmax(180px,230px);
  gap:12px;align-items:start;justify-content:start
}
.design-measurement-row label{font-size:.78rem;font-weight:560;color:#5b4e54}
.design-measurement-row select,.design-measurement-row input{
  width:100%;height:42px;min-height:42px;padding:9px 11px!important;
  border-radius:11px!important;font-size:.82rem!important;font-weight:440!important;line-height:1.2!important
}
.design-measurement-row .iMeasurement,#egMeasurement{font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;letter-spacing:0!important}
.design-measurement-row .input-help{max-width:230px;font-size:.64rem}
@media(max-width:760px){
  .design-measurement-row{grid-template-columns:1fr;gap:10px}
  .design-measurement-row select,.design-measurement-row input{max-width:none}
  .inline-order-voice-panel-foot{align-items:flex-start;flex-direction:column}
  .inline-order-voice-panel-foot small{text-align:left}
}


/* =========================================================
   ANIQ TailorDesk Step 15D — Settings cleanup + Help & FAQ
   App Preferences removed. Measurement unit lives inside
   Measurement Templates. FAQ is app-only and step-by-step.
   ========================================================= */
.measurement-unit-settings-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:11px 12px;
  border:1px solid #DED4CB;
  border-radius:13px;
  background:#FFFDFB;
}
.measurement-unit-settings-copy{display:grid;gap:3px;min-width:0}
.measurement-unit-settings-copy strong{font-size:.79rem!important;color:#403833!important;font-weight:650!important}
.measurement-unit-settings-copy span{font-size:.67rem;color:#7A6E67;line-height:1.38}
.measurement-unit-settings-toggle{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  padding:3px;
  border:1px solid #DDD2C9;
  border-radius:10px;
  background:#F3EEE9;
}
.measurement-unit-settings-toggle button{
  border:0;
  border-radius:7px;
  background:transparent;
  color:#71655E;
  padding:7px 10px;
  min-width:86px;
  font-size:.69rem;
  font-weight:620;
  cursor:pointer;
}
.measurement-unit-settings-toggle button.active{
  background:#FFFDFB;
  color:#4A2944;
  box-shadow:0 2px 7px rgba(64,43,52,.08);
}

#modal[data-mode="help-faq"]{
  width:min(880px,calc(100% - 24px));
}
#modal[data-mode="help-faq"] .modal-card{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  max-height:min(92vh,calc(100dvh - 24px))!important;
  overflow:hidden!important;
}
#modal[data-mode="help-faq"] .modal-body{
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  padding:16px 18px 22px!important;
  background:#F8F5F1!important;
}
#modal[data-mode="help-faq"] .modal-actions{
  position:static!important;
  background:#FFFDFB!important;
  box-shadow:0 -7px 18px rgba(54,37,46,.055)!important;
}
.help-faq-shell{display:grid;gap:12px}
.help-faq-context{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border:1px solid #D8DDD5;border-radius:12px;background:#F0F3EC;
}
.help-faq-context span{font-size:.57rem;color:#778077;font-weight:760;letter-spacing:.09em;text-transform:uppercase}
.help-faq-context strong{font-size:.72rem!important;color:#2F3C34!important;font-weight:720!important;text-align:right;overflow-wrap:anywhere}

.help-faq-intro{
  display:grid;
  gap:4px;
  padding:12px 13px;
  border:1px solid #DCD2CA;
  border-radius:13px;
  background:#FFFDFB;
}
.help-faq-intro strong{font-size:.82rem!important;font-weight:650!important;color:#403833!important}
.help-faq-intro span{font-size:.7rem;color:#746A64;line-height:1.45;overflow-wrap:anywhere}
.help-faq-intro small{font-size:.63rem;color:#8A7468;line-height:1.42;padding-top:2px;overflow-wrap:anywhere}
.help-faq-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.help-faq-tools input{
  min-width:0;
  min-height:41px!important;
  height:41px!important;
  padding:9px 12px!important;
  font-size:.76rem!important;
  border-radius:11px!important;
  background:#FFFDFB!important;
}
.help-faq-tools span{font-size:.66rem;color:#7E716A;white-space:nowrap}
.help-faq-categories{display:flex;gap:6px;overflow-x:auto;padding:1px 0 4px;scrollbar-width:thin}
.help-faq-categories button{
  flex:0 0 auto;
  border:1px solid #DED4CB;
  background:#FFFDFB;
  color:#6D625B;
  border-radius:999px;
  padding:6px 10px;
  font-size:.65rem;
  font-weight:620;
  cursor:pointer;
}
.help-faq-categories button.active{background:#4A2944;border-color:#4A2944;color:#fff}
.help-faq-list{display:grid;gap:7px}
.help-faq-item{
  border:1px solid #E1D8D0;
  border-radius:12px;
  background:#FFFDFB;
  overflow:hidden;
}
.help-faq-item summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 12px;
  cursor:pointer;
  user-select:none;
}
.help-faq-item summary::-webkit-details-marker{display:none}
.help-faq-question{display:grid;gap:2px;min-width:0}
.help-faq-question small{font-size:.57rem;color:#A47C48;text-transform:uppercase;letter-spacing:.09em;font-weight:780}
.help-faq-question strong{font-size:.75rem!important;line-height:1.32;color:#403833!important;font-weight:650!important;overflow-wrap:anywhere}
.help-faq-chevron{font-size:1rem;color:#9A8C82;transition:transform .15s ease}
.help-faq-item[open] .help-faq-chevron{transform:rotate(180deg)}
.help-faq-answer{display:grid;gap:10px;padding:0 12px 12px;border-top:1px solid #EEE6DF;background:#FCFAF8}
.help-faq-steps{display:grid;gap:8px;margin:11px 0 0;padding:0;list-style:none}
.help-faq-steps li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:start}
.help-faq-step-number{
  width:22px;height:22px;display:grid;place-items:center;border-radius:50%;
  background:#EEE7E2;color:#645750;font-size:.61rem;font-weight:760
}
.help-faq-steps li>div{display:grid;gap:2px;padding-top:1px}
.help-faq-steps li strong{font-size:.71rem!important;line-height:1.35;color:#463C37!important;font-weight:650!important;overflow-wrap:anywhere}
.help-faq-steps li div>span{font-size:.68rem;color:#776B64;line-height:1.42;overflow-wrap:anywhere}
.help-faq-result{
  display:grid;gap:3px;padding:9px 10px;border:1px solid #D8E3DC;border-radius:10px;background:#F2F8F5
}
.help-faq-result strong{font-size:.65rem!important;color:#39705A!important;font-weight:750!important;text-transform:uppercase;letter-spacing:.05em}
.help-faq-result span{font-size:.69rem;color:#5D675F;line-height:1.42;overflow-wrap:anywhere}
.help-faq-empty{display:grid;gap:4px;text-align:center;padding:20px 12px;color:#756A63}
.help-faq-empty strong{font-size:.8rem!important}
.help-faq-empty span{font-size:.69rem;line-height:1.4}

@media(max-width:760px){
  .measurement-unit-settings-card{grid-template-columns:1fr;gap:9px}
  .measurement-unit-settings-toggle{width:100%}
  .measurement-unit-settings-toggle button{min-width:0}
  #modal[data-mode="help-faq"]{width:calc(100% - 12px)!important}
  #modal[data-mode="help-faq"] .modal-card{max-height:calc(var(--ff-mobile-viewport,100dvh) - 12px)!important}
  #modal[data-mode="help-faq"] .modal-body{padding:12px 10px 18px!important}
  .help-faq-context{align-items:flex-start;flex-direction:column;gap:3px;padding:8px 10px}
  .help-faq-context strong{text-align:left}
  .help-faq-tools{grid-template-columns:1fr}
  .help-faq-tools span{padding-left:2px}
  .help-faq-item summary{padding:10px}
  .help-faq-answer{padding:0 10px 10px}
  .help-faq-question strong{font-size:.73rem!important}
}

/* =========================================================
   ANIQ TailorDesk V2.3.47 — Step 16B6
   Plan & Subscription mini-site + plan entitlement visuals
   Palette: dark charcoal / white / soft grey / muted olive
   ========================================================= */
#modal[data-mode="subscription"]{
  width:min(1080px,calc(100% - 28px))!important;
  max-width:1080px!important;
  border-radius:24px!important;
  overflow:hidden!important;
}
#modal[data-mode="subscription"] .modal-card{
  background:#F3F4F0!important;
  max-height:min(88dvh,900px)!important;
}
#modal[data-mode="subscription"] .modal-head{
  background:#FFFFFF!important;
  border-bottom:1px solid #D9DDD4!important;
  padding:20px 26px 15px!important;
}
#modal[data-mode="subscription"] .modal-head h2{color:#252A27!important;letter-spacing:-.02em!important}
#modal[data-mode="subscription"] .modal-head p{color:#737A74!important}
#modal[data-mode="subscription"] .modal-body{
  max-height:calc(88dvh - 150px)!important;
  padding:0!important;
  background:#F3F4F0!important;
  overflow:auto!important;
}
#modal[data-mode="subscription"] .modal-actions{
  background:#FFFFFF!important;
  border-top:1px solid #D9DDD4!important;
  padding:12px 22px!important;
}
#modal[data-mode="subscription"] #modalSaveBtn{
  min-width:102px!important;
  background:#39403B!important;
  border-color:#39403B!important;
  color:#fff!important;
}

.subscription-site-v16b6{
  --sub-charcoal:#262C28;
  --sub-charcoal-soft:#39403B;
  --sub-white:#FFFFFF;
  --sub-grey:#EFF1EC;
  --sub-grey-2:#D9DDD4;
  --sub-muted:#747B74;
  --sub-olive:#78866B;
  --sub-olive-dark:#5E6D53;
  --sub-olive-soft:#E9EEE4;
  display:grid;
  gap:18px;
  padding:22px;
  color:var(--sub-charcoal);
  background:
    radial-gradient(circle at 88% 5%,rgba(120,134,107,.13),transparent 25%),
    linear-gradient(180deg,#F7F8F5 0%,#F1F3EE 100%);
}
.subscription-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
  gap:22px;
  min-height:245px;
  overflow:hidden;
  padding:28px;
  border:1px solid #343B36;
  border-radius:22px;
  background:linear-gradient(128deg,#252B27 0%,#313934 70%,#465044 100%);
  box-shadow:0 18px 40px rgba(38,44,40,.14);
  animation:subscriptionPageReveal .42s ease both;
}
.subscription-hero::before{
  content:"";
  position:absolute;
  width:250px;height:250px;
  right:-90px;top:-95px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
}
.subscription-hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;max-width:650px}
.subscription-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  color:#C8D2C1;
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.14em;
}
.subscription-kicker::before{content:"";width:24px;height:1px;background:#9CAA90}
.subscription-hero h2{margin:0!important;color:#fff!important;font-size:clamp(1.55rem,2.5vw,2.45rem)!important;line-height:1.08!important;letter-spacing:-.045em!important;max-width:620px}
.subscription-hero-copy>p{margin:12px 0 18px!important;color:#D6DBD5!important;font-size:.82rem!important;line-height:1.6!important;max-width:600px}
.subscription-status-inline{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(10px);
}
.subscription-status-inline>div{display:grid;gap:1px}
.subscription-status-inline small{color:#AEB7AF;font-size:.55rem;font-weight:750;letter-spacing:.1em}
.subscription-status-inline strong{color:#fff!important;font-size:.78rem!important;font-weight:700!important}
.subscription-status-dot{width:9px;height:9px;border-radius:50%;background:#A6B79A;box-shadow:0 0 0 5px rgba(166,183,154,.12)}
.subscription-hero-graphic{position:relative;min-height:185px;align-self:center}
.subscription-orbit{position:absolute;border:1px solid rgba(222,231,217,.22);border-radius:50%;animation:subscriptionOrbit 10s linear infinite}
.subscription-orbit.orbit-one{width:178px;height:178px;right:22px;top:2px}
.subscription-orbit.orbit-two{width:116px;height:116px;right:54px;top:34px;animation-direction:reverse;animation-duration:7s}
.subscription-graphic-card{
  position:absolute;
  width:110px;
  padding:12px 13px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);
  color:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  backdrop-filter:blur(8px);
  animation:subscriptionFloat 4.8s ease-in-out infinite;
}
.subscription-graphic-card b{display:block;font-size:1.08rem;line-height:1;color:#D8E1D2}
.subscription-graphic-card span{display:block;margin-top:6px;font-size:.67rem;color:#F5F7F4}
.subscription-graphic-card.graphic-one{left:2px;top:85px;animation-delay:-1.1s}
.subscription-graphic-card.graphic-two{right:4px;top:12px;background:rgba(124,142,108,.28);animation-delay:-2.4s}
.subscription-graphic-card.graphic-three{right:20px;bottom:2px;animation-delay:-.2s}

.subscription-status-panel{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:15px 17px;
  border:1px solid var(--sub-grey-2);
  border-radius:16px;
  background:#FFFFFF;
  box-shadow:0 6px 20px rgba(38,44,40,.045);
}
.subscription-status-panel>div{display:grid;gap:3px}
.subscription-status-panel span{font-size:.58rem;font-weight:800;letter-spacing:.1em;color:#848B84}
.subscription-status-panel strong{font-size:.95rem!important;color:#2D332F!important}
.subscription-status-panel p{margin:0!important;color:#747B74!important;font-size:.69rem!important;line-height:1.45!important}
.subscription-test-badge{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  background:var(--sub-olive-soft);
  color:var(--sub-olive-dark)!important;
  border:1px solid #CDD8C5;
  white-space:nowrap;
}
.subscription-usage-strip{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1px;overflow:hidden;border:1px solid var(--sub-grey-2);border-radius:16px;background:var(--sub-grey-2)}
.subscription-usage-strip>div{display:grid;gap:3px;padding:13px 15px;background:#fff}
.subscription-usage-strip small{font-size:.55rem;color:#868D86;font-weight:800;letter-spacing:.08em}
.subscription-usage-strip strong{font-size:.78rem!important;color:#333A35!important}
.subscription-usage-strip span{font-size:.63rem;color:#7C837C}
.subscription-section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:4px 2px 0}
.subscription-section-heading>div{display:grid;gap:2px}
.subscription-section-heading span{font-size:.58rem;font-weight:800;letter-spacing:.11em;color:#798575}
.subscription-section-heading h3{margin:0!important;font-size:1.13rem!important;color:#2A302C!important}
.subscription-section-heading p{max-width:500px;margin:0!important;color:#737A74!important;font-size:.68rem!important;line-height:1.45!important;text-align:right}

.subscription-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;align-items:stretch}
.subscription-plan-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:18px 17px 16px;
  border:1px solid #D6DAD3;
  border-radius:19px;
  background:#FFFFFF;
  box-shadow:0 9px 24px rgba(38,44,40,.055);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  animation:subscriptionCardReveal .42s ease both;
}
.subscription-plan-card:nth-child(2){animation-delay:.06s}
.subscription-plan-card:nth-child(3){animation-delay:.12s}
.subscription-plan-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(38,44,40,.1)}
.subscription-plan-card.tone-smart{border-color:#B9C5B0}
.subscription-plan-card.tone-studio{border-color:#BFC4C0}
.subscription-plan-card.is-current{box-shadow:0 0 0 2px rgba(120,134,107,.2),0 13px 30px rgba(38,44,40,.08)}
.subscription-plan-ribbon{position:absolute;inset:0 0 auto 0;height:4px;background:#A7ADA7}
.subscription-plan-card.tone-smart .subscription-plan-ribbon{background:#7B896E}
.subscription-plan-card.tone-studio .subscription-plan-ribbon{background:#2C332E}
.subscription-plan-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.subscription-plan-title-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.subscription-plan-title-line h3{margin:0!important;font-size:1.02rem!important;color:#292F2B!important}
.subscription-plan-card-head p{margin:5px 0 0!important;color:#7B817B!important;font-size:.64rem!important;line-height:1.35!important}
.subscription-plan-symbol{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#F0F2EE;color:#6E756F;font-size:.67rem;font-weight:850;letter-spacing:.04em}
.tone-smart .subscription-plan-symbol{background:#E7EDE2;color:#5F6F55}
.tone-studio .subscription-plan-symbol{background:#303732;color:#fff}
.subscription-popular-pill,.subscription-current-pill{font-size:.48rem!important;line-height:1!important;font-weight:850!important;letter-spacing:.08em!important;padding:5px 6px;border-radius:999px}
.subscription-popular-pill{background:#E7EEE2;color:#5F6D56!important;border:1px solid #CBD7C3}
.subscription-current-pill{background:#303732;color:#fff!important}
.subscription-price-block{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;margin-top:17px}
.subscription-price-block>strong{font-size:1.6rem!important;letter-spacing:-.04em;color:#282E2A!important}
.subscription-price-block>span{font-size:.66rem;color:#727972}
.subscription-price-block>small{flex-basis:100%;font-size:.58rem;color:#929892;margin-top:2px}
.subscription-card-divider{height:1px;background:#E7EAE5;margin:14px 0 12px}
.subscription-feature-list{display:grid;gap:8px;margin:0 0 16px;padding:0;list-style:none;flex:1}
.subscription-feature-list li{display:grid;grid-template-columns:17px minmax(0,1fr);gap:7px;align-items:start;color:#4B534D;font-size:.64rem;line-height:1.35}
.subscription-feature-list li.is-locked{color:#999F99}
.subscription-feature-icon{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#EAF0E6;color:#607155;font-size:.56rem;font-weight:900;margin-top:1px}
.subscription-feature-list li.is-locked .subscription-feature-icon{background:#F0F1EE;color:#90968F}
.subscription-plan-action{
  width:100%;min-height:37px;
  border:1px solid #CCD1CA;
  border-radius:11px;
  background:#F7F8F5;
  color:#3F4741;
  font-size:.65rem;
  font-weight:760;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.subscription-plan-action:hover:not(:disabled){background:#EEF1EB;border-color:#AEB8A8;transform:translateY(-1px)}
.tone-smart .subscription-plan-action:not(:disabled){background:#78866B;border-color:#78866B;color:#fff}
.tone-studio .subscription-plan-action:not(:disabled){background:#303732;border-color:#303732;color:#fff}
.subscription-plan-action.current{background:#EDF1E9!important;border-color:#C9D4C2!important;color:#63715A!important}

.subscription-entitlement-note{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:start;padding:15px 16px;border:1px solid #CCD6C5;border-radius:16px;background:#ECF1E8}
.subscription-entitlement-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#78866B;color:#fff;font-size:1.05rem}
.subscription-entitlement-note>div:last-child{display:grid;gap:3px}
.subscription-entitlement-note strong{font-size:.76rem!important;color:#3E493B!important}
.subscription-entitlement-note p{margin:0!important;color:#657061!important;font-size:.67rem!important;line-height:1.5!important}
.subscription-lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.subscription-mini-card{display:grid;gap:4px;padding:14px 15px;border:1px solid #D8DCD5;border-radius:15px;background:#fff}
.subscription-mini-card>span{font-size:.54rem;color:#7E877D;font-weight:820;letter-spacing:.09em}
.subscription-mini-card>strong{font-size:.76rem!important;color:#343B36!important}
.subscription-mini-card>p{margin:0!important;color:#747B74!important;font-size:.65rem!important;line-height:1.5!important}
.subscription-payment-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 15px;border:1px solid #414844;border-radius:15px;background:#2E3531;color:#fff}
.subscription-payment-bar>span{display:grid;gap:2px}
.subscription-payment-bar strong{font-size:.73rem!important;color:#fff!important}
.subscription-payment-bar small{font-size:.6rem;color:#C9CFCA}
.subscription-payment-button{min-height:36px;padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.08);color:#D6DBD7;font-size:.62rem;font-weight:700}

.bottom-nav button.subscription-feature-locked{opacity:.58!important;position:relative!important;filter:saturate(.45)}
.bottom-nav button.subscription-feature-locked::after{content:"LOCK";position:absolute;top:1px;right:3px;padding:2px 4px;border-radius:999px;background:#7B896E;color:#fff;font-size:.38rem;font-weight:850;letter-spacing:.05em;line-height:1}

@keyframes subscriptionPageReveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes subscriptionCardReveal{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes subscriptionFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes subscriptionOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

@media(max-width:760px){
  #modal[data-mode="subscription"]{width:calc(100% - 10px)!important;border-radius:18px!important}
  #modal[data-mode="subscription"] .modal-card{max-height:calc(var(--ff-mobile-viewport,100dvh) - 10px)!important}
  #modal[data-mode="subscription"] .modal-head{padding:16px 16px 12px!important}
  #modal[data-mode="subscription"] .modal-body{max-height:calc(var(--ff-mobile-viewport,100dvh) - 125px)!important}
  .subscription-site-v16b6{padding:12px;gap:14px}
  .subscription-hero{grid-template-columns:1fr;min-height:0;padding:21px 18px 18px}
  .subscription-hero-copy>p{font-size:.75rem!important}
  .subscription-hero-graphic{min-height:128px;margin-top:2px}
  .subscription-orbit.orbit-one{width:128px;height:128px;right:10px;top:0}
  .subscription-orbit.orbit-two{width:82px;height:82px;right:33px;top:23px}
  .subscription-graphic-card{width:92px;padding:9px 10px}
  .subscription-graphic-card.graphic-one{left:0;top:55px}
  .subscription-graphic-card.graphic-two{right:0;top:2px}
  .subscription-graphic-card.graphic-three{right:8px;bottom:0}
  .subscription-status-panel{align-items:flex-start;flex-direction:column;gap:9px}
  .subscription-test-badge{white-space:normal}
  .subscription-usage-strip{grid-template-columns:1fr}
  .subscription-section-heading{display:grid;gap:5px}
  .subscription-section-heading p{text-align:left}
  .subscription-plan-grid{grid-template-columns:1fr}
  .subscription-plan-card:hover{transform:none}
  .subscription-lower-grid{grid-template-columns:1fr}
  .subscription-payment-bar{align-items:flex-start;flex-direction:column}
  .subscription-payment-button{width:100%}
}

@media(prefers-reduced-motion:reduce){
  .subscription-site-v16b6 *,
  .subscription-site-v16b6 *::before,
  .subscription-site-v16b6 *::after{animation:none!important;transition:none!important}
}

/* =========================================================
   ANIQ TailorDesk Step 16B6A — Fabric Palette Restyle
   Palette sampled from the approved striped fabric reference:
   deep charcoal-green, warm off-white, stone grey, muted olive.
   Visual-only. No subscription logic or entitlement changes.
   ========================================================= */
#modal[data-mode="subscription"] .modal-body{
  background:#E9E8E4!important;
}
#modal[data-mode="subscription"] .modal-actions{
  background:#F7F6F1!important;
  border-top-color:#C9CAC2!important;
}
#modal[data-mode="subscription"] #modalSaveBtn{
  background:#1C2B2B!important;
  border-color:#1C2B2B!important;
  color:#F6F4EC!important;
}

.subscription-site-v16b6{
  --sub-charcoal:#1C2B2B;
  --sub-charcoal-soft:#484E44;
  --sub-white:#F8F7F2;
  --sub-grey:#E9E8E4;
  --sub-grey-2:#C9CAC2;
  --sub-muted:#707970;
  --sub-olive:#BEBB79;
  --sub-olive-dark:#6F714B;
  --sub-olive-soft:#ECEBD8;
  color:#1C2B2B;
  background:
    radial-gradient(circle at 88% 6%,rgba(190,187,121,.18),transparent 27%),
    linear-gradient(180deg,#F7F6F1 0%,#E9E8E4 100%);
}
.subscription-hero{
  border-color:#293837;
  background:linear-gradient(128deg,#1C2B2B 0%,#2A3733 66%,#484E44 100%);
  box-shadow:0 18px 40px rgba(28,43,43,.17);
}
.subscription-hero::before{
  border-color:rgba(233,232,228,.16);
}
.subscription-hero::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:0 0 0 auto;
  width:48%;
  pointer-events:none;
  opacity:.22;
  background:repeating-linear-gradient(
    90deg,
    transparent 0 15px,
    rgba(190,187,121,.52) 15px 18px,
    transparent 18px 31px,
    rgba(137,144,141,.42) 31px 35px,
    transparent 35px 51px,
    rgba(233,232,228,.30) 51px 53px,
    transparent 53px 69px
  );
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.82) 32%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.82) 32%,#000 100%);
}
.subscription-hero-copy,.subscription-hero-graphic{position:relative;z-index:1}
.subscription-kicker{color:#D8D7CF}
.subscription-kicker::before{background:#BEBB79}
.subscription-hero h2{color:#F8F7F2!important}
.subscription-hero-copy>p{color:#D8D7CF!important}
.subscription-status-inline{
  border-color:rgba(233,232,228,.20);
  background:rgba(233,232,228,.08);
}
.subscription-status-inline small{color:#C4C4AC}
.subscription-status-inline strong{color:#F8F7F2!important}
.subscription-status-dot{background:#BEBB79;box-shadow:0 0 0 5px rgba(190,187,121,.16)}
.subscription-orbit{border-color:rgba(216,215,207,.24)}
.subscription-graphic-card{
  border-color:rgba(233,232,228,.24);
  background:rgba(233,232,228,.10);
  color:#F8F7F2;
}
.subscription-graphic-card b{color:#D8D7CF}
.subscription-graphic-card span{color:#F8F7F2}
.subscription-graphic-card.graphic-two{background:rgba(190,187,121,.24)}

.subscription-status-panel,
.subscription-usage-strip>div,
.subscription-plan-card,
.subscription-mini-card{
  background:#F8F7F2;
}
.subscription-status-panel{border-color:#C9CAC2;box-shadow:0 6px 20px rgba(28,43,43,.05)}
.subscription-status-panel span{color:#757D74}
.subscription-status-panel strong{color:#1C2B2B!important}
.subscription-status-panel p{color:#707970!important}
.subscription-test-badge{
  background:#ECEBD8;
  color:#5D603F!important;
  border-color:#D3D09C;
}
.subscription-usage-strip{border-color:#C9CAC2;background:#C9CAC2}
.subscription-usage-strip small{color:#757D74}
.subscription-usage-strip strong{color:#1C2B2B!important}
.subscription-usage-strip span{color:#707970}
.subscription-section-heading span{color:#6F714B}
.subscription-section-heading h3{color:#1C2B2B!important}
.subscription-section-heading p{color:#707970!important}

.subscription-plan-card{
  border-color:#C9CAC2;
  box-shadow:0 9px 24px rgba(28,43,43,.06);
}
.subscription-plan-card:hover{box-shadow:0 16px 34px rgba(28,43,43,.12)}
.subscription-plan-card.tone-smart{border-color:#C5C28D}
.subscription-plan-card.tone-studio{border-color:#89908D}
.subscription-plan-card.is-current{box-shadow:0 0 0 2px rgba(190,187,121,.34),0 13px 30px rgba(28,43,43,.09)}
.subscription-plan-ribbon{background:#89908D}
.subscription-plan-card.tone-smart .subscription-plan-ribbon{background:#BEBB79}
.subscription-plan-card.tone-studio .subscription-plan-ribbon{background:#1C2B2B}
.subscription-plan-title-line h3{color:#1C2B2B!important}
.subscription-plan-card-head p{color:#757D74!important}
.subscription-plan-symbol{background:#E9E8E4;color:#5E6861}
.tone-smart .subscription-plan-symbol{background:#ECEBD8;color:#626440}
.tone-studio .subscription-plan-symbol{background:#1C2B2B;color:#F8F7F2}
.subscription-popular-pill{background:#ECEBD8;color:#5D603F!important;border-color:#D3D09C}
.subscription-current-pill{background:#1C2B2B;color:#F8F7F2!important}
.subscription-price-block>strong{color:#1C2B2B!important}
.subscription-price-block>span{color:#707970}
.subscription-price-block>small{color:#89908D}
.subscription-card-divider{background:#D8D7CF}
.subscription-feature-list li{color:#484E44}
.subscription-feature-list li.is-locked{color:#89908D}
.subscription-feature-icon{background:#ECEBD8;color:#5D603F}
.subscription-feature-list li.is-locked .subscription-feature-icon{background:#E1E0DB;color:#757D74}
.subscription-plan-action{
  border-color:#C9CAC2;
  background:#F1F0EA;
  color:#1C2B2B;
}
.subscription-plan-action:hover:not(:disabled){background:#E9E8E4;border-color:#A1A69E}
.tone-smart .subscription-plan-action:not(:disabled){background:#BEBB79;border-color:#BEBB79;color:#1C2B2B}
.tone-studio .subscription-plan-action:not(:disabled){background:#1C2B2B;border-color:#1C2B2B;color:#F8F7F2}
.subscription-plan-action.current{background:#ECEBD8!important;border-color:#D3D09C!important;color:#5D603F!important}

.subscription-entitlement-note{border-color:#D3D09C;background:#F0EFDf}
.subscription-entitlement-icon{background:#BEBB79;color:#1C2B2B}
.subscription-entitlement-note strong{color:#41452F!important}
.subscription-entitlement-note p{color:#626658!important}
.subscription-mini-card{border-color:#C9CAC2}
.subscription-mini-card>span{color:#757D74}
.subscription-mini-card>strong{color:#1C2B2B!important}
.subscription-mini-card>p{color:#707970!important}
.subscription-payment-bar{border-color:#293837;background:#1C2B2B;color:#F8F7F2}
.subscription-payment-bar strong{color:#F8F7F2!important}
.subscription-payment-bar small{color:#D8D7CF}
.subscription-payment-button{border-color:rgba(233,232,228,.22);background:rgba(233,232,228,.08);color:#E9E8E4}
.bottom-nav button.subscription-feature-locked::after{background:#BEBB79;color:#1C2B2B}

@media(max-width:760px){
  .subscription-hero::after{width:66%;opacity:.17}
}


/* Step 16B6C — Internal Test feature-preview controls */
.subscription-preview-state{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.subscription-preview-exit{min-height:36px;padding:8px 12px;border:1px solid rgba(46,58,52,.28);border-radius:999px;background:#f6f4ee;color:#2e3a34;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.subscription-preview-exit:hover{background:#eceadf}
.subscription-preview-exit:focus-visible{outline:2px solid #b6be67;outline-offset:2px}
@media(max-width:720px){.subscription-preview-state{justify-content:flex-start}.subscription-preview-exit{min-height:44px}}

/* =========================================================
   Step 16B6D — Free Trial / Classic / Signature
   Fabric palette is scoped ONLY to Plan & Subscription.
   Palette sampled from the supplied striped fabric:
   deep charcoal-green, warm off-white, stone grey, muted lime-olive, taupe.
   ========================================================= */

/* Plan-locked controls elsewhere keep the existing app palette. They remain clickable
   so TailorDesk can explain which plan is required instead of silently disabling them. */
button.subscription-feature-locked:not(.subscription-plan-action),
.soft-btn.subscription-feature-locked,
.inline-order-voice-btn.subscription-feature-locked{
  opacity:.62;
  filter:saturate(.45);
  cursor:pointer!important;
}
button.subscription-feature-locked:not(.bottom-nav button):not(.subscription-plan-action){
  outline:1px dashed currentColor;
  outline-offset:1px;
}

#modal[data-mode="subscription"]{
  --ff-plan-ink:#1D2B2B;
  --ff-plan-deep:#1D2B2B;
  --ff-plan-deep-2:#4F564D;
  --ff-plan-cream:#E2E1DC;
  --ff-plan-paper:#F7F6F1;
  --ff-plan-stone:#A3A79E;
  --ff-plan-grey:#878E8A;
  --ff-plan-olive:#BEBB79;
  --ff-plan-olive-soft:#E4E2C9;
  --ff-plan-taupe:#6A746C;
  --ff-plan-line:#C8C8B2;
}
#modal[data-mode="subscription"] .modal-card{background:var(--ff-plan-cream)!important}
#modal[data-mode="subscription"] .modal-head{background:var(--ff-plan-paper)!important;border-color:var(--ff-plan-line)!important}
#modal[data-mode="subscription"] .modal-head h2{color:var(--ff-plan-ink)!important}
#modal[data-mode="subscription"] .modal-head .muted{color:var(--ff-plan-taupe)!important}
#modal[data-mode="subscription"] .modal-body{background:var(--ff-plan-cream)!important}
#modal[data-mode="subscription"] .subscription-site-v16b6d{background:var(--ff-plan-cream)!important}
#modal[data-mode="subscription"] .subscription-hero{
  background:linear-gradient(135deg,var(--ff-plan-deep) 0%,var(--ff-plan-deep-2) 68%,#425653 100%)!important;
  border-color:var(--ff-plan-deep)!important;
}
#modal[data-mode="subscription"] .subscription-hero::after{
  background:repeating-linear-gradient(90deg,
    rgba(250,249,244,.94) 0 5px,
    rgba(194,200,110,.92) 5px 12px,
    rgba(141,154,152,.8) 12px 17px,
    rgba(250,249,244,.9) 17px 23px,
    rgba(116,108,94,.8) 23px 27px,
    rgba(32,52,50,.95) 27px 37px)!important;
  opacity:.16!important;
}
#modal[data-mode="subscription"] .subscription-kicker{color:var(--ff-plan-olive)!important}
#modal[data-mode="subscription"] .subscription-hero h2{color:var(--ff-plan-paper)!important}
#modal[data-mode="subscription"] .subscription-hero p{color:#E0E2DC!important}
#modal[data-mode="subscription"] .subscription-status-inline{border-color:rgba(241,240,232,.22)!important;background:rgba(241,240,232,.08)!important}
#modal[data-mode="subscription"] .subscription-status-dot{background:var(--ff-plan-olive)!important;box-shadow:0 0 0 4px rgba(194,200,110,.16)!important}
#modal[data-mode="subscription"] .subscription-graphic-card{background:var(--ff-plan-paper)!important;border-color:var(--ff-plan-stone)!important;color:var(--ff-plan-ink)!important}
#modal[data-mode="subscription"] .subscription-graphic-card b{color:var(--ff-plan-olive)!important}
#modal[data-mode="subscription"] .subscription-orbit{border-color:rgba(194,200,110,.42)!important}
#modal[data-mode="subscription"] .subscription-status-panel,
#modal[data-mode="subscription"] .subscription-usage-strip,
#modal[data-mode="subscription"] .subscription-plan-card,
#modal[data-mode="subscription"] .subscription-entitlement-note,
#modal[data-mode="subscription"] .subscription-mini-card{
  background:var(--ff-plan-paper)!important;
  border-color:var(--ff-plan-line)!important;
}
#modal[data-mode="subscription"] .subscription-status-panel>div>span,
#modal[data-mode="subscription"] .subscription-usage-strip small,
#modal[data-mode="subscription"] .subscription-section-heading span,
#modal[data-mode="subscription"] .subscription-mini-card>span{color:var(--ff-plan-taupe)!important}
#modal[data-mode="subscription"] .subscription-status-panel strong,
#modal[data-mode="subscription"] .subscription-usage-strip strong,
#modal[data-mode="subscription"] .subscription-section-heading h3,
#modal[data-mode="subscription"] .subscription-plan-card h3,
#modal[data-mode="subscription"] .subscription-mini-card strong{color:var(--ff-plan-ink)!important}
#modal[data-mode="subscription"] .subscription-status-panel p,
#modal[data-mode="subscription"] .subscription-section-heading p,
#modal[data-mode="subscription"] .subscription-mini-card p{color:#687471!important}
#modal[data-mode="subscription"] .subscription-test-badge,
#modal[data-mode="subscription"] .subscription-current-pill{background:var(--ff-plan-olive-soft)!important;color:var(--ff-plan-ink)!important;border-color:var(--ff-plan-olive)!important}
#modal[data-mode="subscription"] .subscription-preview-exit{background:var(--ff-plan-paper)!important;color:var(--ff-plan-ink)!important;border-color:var(--ff-plan-stone)!important}
#modal[data-mode="subscription"] .subscription-plan-card.tone-essential{border-top:4px solid var(--ff-plan-grey)!important}
#modal[data-mode="subscription"] .subscription-plan-card.tone-smart{border-top:4px solid var(--ff-plan-taupe)!important}
#modal[data-mode="subscription"] .subscription-plan-card.tone-studio{border-top:4px solid var(--ff-plan-olive)!important;box-shadow:0 12px 30px rgba(24,42,41,.12)!important}
#modal[data-mode="subscription"] .subscription-plan-ribbon{background:linear-gradient(90deg,var(--ff-plan-deep),var(--ff-plan-olive),var(--ff-plan-stone))!important}
#modal[data-mode="subscription"] .subscription-popular-pill{background:var(--ff-plan-deep)!important;color:var(--ff-plan-paper)!important}
#modal[data-mode="subscription"] .subscription-price-block strong{color:var(--ff-plan-deep)!important}
#modal[data-mode="subscription"] .subscription-price-block span,
#modal[data-mode="subscription"] .subscription-price-block small{color:var(--ff-plan-taupe)!important}
#modal[data-mode="subscription"] .subscription-card-divider{background:var(--ff-plan-line)!important}
#modal[data-mode="subscription"] .subscription-feature-icon{background:var(--ff-plan-olive-soft)!important;color:var(--ff-plan-deep)!important}
#modal[data-mode="subscription"] .subscription-feature-list li.is-locked{color:#7E817A!important}
#modal[data-mode="subscription"] .subscription-feature-list li.is-locked .subscription-feature-icon{background:#E1E1DC!important;color:var(--ff-plan-taupe)!important}
#modal[data-mode="subscription"] .subscription-plan-action{background:var(--ff-plan-deep)!important;color:var(--ff-plan-paper)!important;border-color:var(--ff-plan-deep)!important}
#modal[data-mode="subscription"] .subscription-plan-action.current{background:#E2E3DC!important;color:var(--ff-plan-taupe)!important;border-color:var(--ff-plan-stone)!important}
#modal[data-mode="subscription"] .tone-studio .subscription-plan-action{background:var(--ff-plan-olive)!important;color:var(--ff-plan-ink)!important;border-color:var(--ff-plan-olive)!important}
#modal[data-mode="subscription"] .subscription-entitlement-icon{background:var(--ff-plan-olive-soft)!important;color:var(--ff-plan-deep)!important}
#modal[data-mode="subscription"] .subscription-payment-bar{background:var(--ff-plan-deep)!important;border-color:var(--ff-plan-deep)!important}
#modal[data-mode="subscription"] .subscription-payment-bar strong{color:var(--ff-plan-paper)!important}
#modal[data-mode="subscription"] .subscription-payment-bar small{color:#D7D9D2!important}
#modal[data-mode="subscription"] .subscription-payment-button{border-color:rgba(241,240,232,.24)!important;background:rgba(241,240,232,.09)!important;color:var(--ff-plan-paper)!important}

/* Locked navigation outside the subscription modal keeps TailorDesk's normal app palette. */
.bottom-nav button.subscription-feature-locked::after{
  background:var(--accent)!important;
  color:#fff!important;
}
\n\n/* =========================================================\n   Step 16B6D FIX3 — clear yearly billing offer\n   Pricing / Subscription page only. Palette stays derived\n   from the approved striped-fabric reference.\n   ========================================================= */\n#modal[data-mode="subscription"] .subscription-annual-offer{\n  display:grid;gap:7px;margin-top:11px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--ff-plan-olive) 42%,#ffffff);border-radius:13px;background:color-mix(in srgb,var(--ff-plan-cream) 82%,var(--ff-plan-olive) 18%);\n}\n#modal[data-mode="subscription"] .subscription-annual-pay{display:grid;gap:2px}\n#modal[data-mode="subscription"] .subscription-annual-pay>span{font-size:.5rem;font-weight:900;letter-spacing:.12em;color:var(--ff-plan-olive-dark)}\n#modal[data-mode="subscription"] .subscription-annual-pay>strong{font-size:.69rem;line-height:1.35;color:var(--ff-plan-deep);font-weight:850}\n#modal[data-mode="subscription"] .subscription-annual-save{font-size:.61rem;line-height:1.4;color:var(--ff-plan-deep)}\n#modal[data-mode="subscription"] .subscription-annual-save strong{font-weight:900;color:var(--ff-plan-olive-dark)}\n@media(max-width:760px){\n  #modal[data-mode="subscription"] .subscription-annual-offer{padding:12px}\n  #modal[data-mode="subscription"] .subscription-annual-save{font-size:.66rem}\n  #modal[data-mode="subscription"] .subscription-annual-pay>strong{font-size:.73rem}\n}\n

/* =========================================================
   Step 16B6D FIX4 — compact yearly price comparison
   Pricing / Subscription page ONLY.
   Pattern: full yearly value struck through, discounted yearly
   price beside it, then a small percentage-off badge.
   ========================================================= */
#modal[data-mode="subscription"] .subscription-annual-offer.subscription-annual-compact{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  flex-wrap:wrap!important;
  margin-top:9px!important;
  padding:8px 0 10px!important;
  border:0!important;
  border-radius:0!important;
  border-bottom:1px solid var(--ff-plan-line)!important;
  background:transparent!important;
  min-height:32px!important;
}
#modal[data-mode="subscription"] .subscription-annual-label{
  font-size:.58rem!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
  color:var(--ff-plan-taupe)!important;
}
#modal[data-mode="subscription"] .subscription-annual-original{
  font-size:.68rem!important;
  line-height:1!important;
  font-weight:650!important;
  color:#8A8E88!important;
  text-decoration-line:line-through!important;
  text-decoration-thickness:1.5px!important;
  text-decoration-color:var(--ff-plan-taupe)!important;
}
#modal[data-mode="subscription"] .subscription-annual-price{
  font-size:.82rem!important;
  line-height:1!important;
  font-weight:900!important;
  color:var(--ff-plan-deep)!important;
  letter-spacing:-.015em!important;
}
#modal[data-mode="subscription"] .subscription-annual-period{
  margin-left:-4px!important;
  font-size:.56rem!important;
  line-height:1!important;
  color:var(--ff-plan-taupe)!important;
}
#modal[data-mode="subscription"] .subscription-annual-discount{
  display:inline-flex!important;
  align-items:center!important;
  min-height:20px!important;
  padding:3px 7px!important;
  border:1px solid color-mix(in srgb,var(--ff-plan-olive) 58%,var(--ff-plan-line))!important;
  border-radius:999px!important;
  background:var(--ff-plan-olive-soft)!important;
  color:var(--ff-plan-deep)!important;
  font-size:.52rem!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.035em!important;
  white-space:nowrap!important;
}
@media(max-width:760px){
  #modal[data-mode="subscription"] .subscription-annual-offer.subscription-annual-compact{
    gap:6px!important;
    padding-bottom:9px!important;
  }
  #modal[data-mode="subscription"] .subscription-annual-price{font-size:.86rem!important}
  #modal[data-mode="subscription"] .subscription-annual-original{font-size:.7rem!important}
  #modal[data-mode="subscription"] .subscription-annual-discount{font-size:.54rem!important}
}

/* =========================================================
   Step 16B6D FIX5 — clearer yearly pricing typography
   Pricing / Subscription page ONLY.
   Keeps FIX4 compact layout, but improves readability with
   larger text and lighter font weights.
   ========================================================= */
#modal[data-mode="subscription"] .subscription-annual-offer.subscription-annual-compact{
  gap:8px!important;
  min-height:38px!important;
  padding:9px 0 11px!important;
}
#modal[data-mode="subscription"] .subscription-annual-label{
  font-size:.66rem!important;
  line-height:1.1!important;
  font-weight:700!important;
  letter-spacing:.055em!important;
}
#modal[data-mode="subscription"] .subscription-annual-original{
  font-size:.74rem!important;
  line-height:1.1!important;
  font-weight:500!important;
  color:#747A74!important;
  text-decoration-thickness:1.25px!important;
}
#modal[data-mode="subscription"] .subscription-annual-price{
  font-size:.96rem!important;
  line-height:1.1!important;
  font-weight:700!important;
  letter-spacing:-.01em!important;
}
#modal[data-mode="subscription"] .subscription-annual-period{
  margin-left:-5px!important;
  font-size:.63rem!important;
  line-height:1.1!important;
  font-weight:500!important;
}
#modal[data-mode="subscription"] .subscription-annual-discount{
  min-height:23px!important;
  padding:4px 8px!important;
  font-size:.60rem!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:.025em!important;
}
@media(max-width:760px){
  #modal[data-mode="subscription"] .subscription-annual-offer.subscription-annual-compact{
    gap:7px!important;
    min-height:40px!important;
    padding:10px 0 11px!important;
  }
  #modal[data-mode="subscription"] .subscription-annual-label{font-size:.68rem!important}
  #modal[data-mode="subscription"] .subscription-annual-original{font-size:.77rem!important}
  #modal[data-mode="subscription"] .subscription-annual-price{font-size:1rem!important}
  #modal[data-mode="subscription"] .subscription-annual-period{font-size:.65rem!important}
  #modal[data-mode="subscription"] .subscription-annual-discount{font-size:.62rem!important}
}

/* =========================================================
   Step 16C1 — manual plan activation request flow
   Subscription page only. Does not alter locked app layouts.
   ========================================================= */
#modal[data-mode="subscription"] .subscription-plan-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  margin-top:10px;
}
#modal[data-mode="subscription"] .subscription-plan-actions .subscription-plan-action{
  width:100%;
  min-height:38px;
  font-size:.66rem!important;
  font-weight:700!important;
  letter-spacing:.005em!important;
}
#modal[data-mode="subscription"] .subscription-plan-request-pending{
  background:var(--ff-plan-olive-soft)!important;
  color:var(--ff-plan-deep)!important;
  border-color:var(--ff-plan-olive)!important;
  opacity:1!important;
}
#modal[data-mode="subscription"] .subscription-request-banner{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin:12px 0;
  padding:12px 14px;
  border:1px solid color-mix(in srgb,var(--ff-plan-olive) 52%,var(--ff-plan-line));
  border-radius:15px;
  background:color-mix(in srgb,var(--ff-plan-cream) 78%,var(--ff-plan-olive-soft) 22%);
}
#modal[data-mode="subscription"] .subscription-request-icon{
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border-radius:999px;
  background:var(--ff-plan-olive-soft);
  color:var(--ff-plan-deep);
  font-size:.78rem;
  font-weight:800;
}
#modal[data-mode="subscription"] .subscription-request-copy{
  display:grid;
  gap:3px;
  min-width:0;
}
#modal[data-mode="subscription"] .subscription-request-copy>span,
#modal[data-mode="subscription"] .subscription-request-confirm-kicker{
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.075em;
  color:var(--ff-plan-taupe);
}
#modal[data-mode="subscription"] .subscription-request-copy>strong{
  font-size:.76rem;
  font-weight:700;
  color:var(--ff-plan-ink);
}
#modal[data-mode="subscription"] .subscription-request-copy>p{
  margin:0;
  font-size:.61rem;
  line-height:1.45;
  color:#687471;
}
#modal[data-mode="subscription"] .subscription-request-cancel{
  min-height:34px;
  padding:7px 10px;
  border:1px solid var(--ff-plan-stone);
  border-radius:10px;
  background:var(--ff-plan-paper);
  color:var(--ff-plan-ink);
  font-size:.6rem;
  font-weight:650;
}
#modal[data-mode="subscription"] .subscription-request-confirm{
  display:grid;
  gap:12px;
  padding:4px 1px 2px;
}
#modal[data-mode="subscription"] .subscription-request-confirm h3{
  margin:0;
  font-size:1rem;
  font-weight:700;
  color:var(--ff-plan-ink);
}
#modal[data-mode="subscription"] .subscription-request-confirm-price{
  display:flex;
  align-items:baseline;
  gap:4px;
  font-size:1.55rem;
  line-height:1;
  font-weight:700;
  color:var(--ff-plan-deep);
}
#modal[data-mode="subscription"] .subscription-request-confirm-price small{
  font-size:.66rem;
  font-weight:500;
  color:var(--ff-plan-taupe);
}
#modal[data-mode="subscription"] .subscription-request-confirm-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--ff-plan-line);
  font-size:.67rem;
}
#modal[data-mode="subscription"] .subscription-request-confirm-row span{color:#687471}
#modal[data-mode="subscription"] .subscription-request-confirm-row strong{color:var(--ff-plan-ink);font-weight:700}
#modal[data-mode="subscription"] .subscription-request-confirm>p{
  margin:0;
  padding:10px 11px;
  border-radius:12px;
  background:var(--ff-plan-olive-soft);
  color:var(--ff-plan-deep);
  font-size:.65rem;
  line-height:1.5;
}
@media(max-width:760px){
  #modal[data-mode="subscription"] .subscription-request-banner{
    grid-template-columns:auto 1fr;
    align-items:start;
  }
  #modal[data-mode="subscription"] .subscription-request-cancel{
    grid-column:1/-1;
    width:100%;
  }
  #modal[data-mode="subscription"] .subscription-plan-actions .subscription-plan-action{
    min-height:42px;
    font-size:.7rem!important;
  }
}

/* =========================================================
   Step 16C2 — prorated upgrades / renewal downgrades
   Plan & Subscription page only.
   ========================================================= */
#modal[data-mode="subscription"] .subscription-request-confirm.request-kind-upgrade{
  border-color:color-mix(in srgb,var(--ff-plan-olive) 44%,#d9e6dd);
}
#modal[data-mode="subscription"] .subscription-request-confirm.request-kind-downgrade,
#modal[data-mode="subscription"] .subscription-request-confirm.request-kind-cycle_change{
  border-color:color-mix(in srgb,var(--ff-plan-taupe) 42%,#e8e2d8);
}
#modal[data-mode="subscription"] .subscription-request-confirm-price small{
  font-weight:650;
  letter-spacing:.01em;
}
#modal[data-mode="subscription"] .subscription-request-banner.request-kind-downgrade .subscription-request-icon,
#modal[data-mode="subscription"] .subscription-request-banner.request-kind-cycle_change .subscription-request-icon{
  font-size:1.05rem;
  font-weight:700;
}
#modal[data-mode="subscription"] .subscription-plan-action:not(.current):not(.subscription-plan-request-pending){
  white-space:normal;
  line-height:1.25;
}


/* =========================================================
   Step 16D1A — Internal Test Razorpay checkout preview
   Subscription page only.
   ========================================================= */
.subscription-rzp-test-panel{
  margin:18px 0 4px;
  padding:16px;
  border:1px solid rgba(33,53,48,.16);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(242,243,224,.94),rgba(248,247,240,.98));
  display:grid;
  grid-template-columns:minmax(220px,.85fr) minmax(360px,1.6fr);
  gap:16px;
  align-items:center;
}
.subscription-rzp-test-copy>span{
  display:block;
  margin-bottom:5px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:650;
  color:#59655e;
}
.subscription-rzp-test-copy>strong{
  display:block;
  font-size:17px;
  line-height:1.25;
  font-weight:650;
  color:#1e302c;
}
.subscription-rzp-test-copy>p{
  margin:6px 0 0;
  font-size:12px;
  line-height:1.45;
  color:#66716b;
}
.subscription-rzp-test-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.subscription-rzp-test-button{
  min-height:52px;
  border:1px solid rgba(35,53,49,.18);
  border-radius:13px;
  background:rgba(255,255,255,.72);
  padding:9px 11px;
  text-align:left;
  cursor:pointer;
  color:#20312d;
  box-shadow:none;
}
.subscription-rzp-test-button:hover{background:#fff;transform:translateY(-1px)}
.subscription-rzp-test-button:disabled{opacity:.62;cursor:wait;transform:none}
.subscription-rzp-test-button.is-basic{grid-column:1/-1}
.subscription-rzp-test-button span{
  display:block;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  color:#6a756f;
}
.subscription-rzp-test-button strong{
  display:block;
  margin-top:3px;
  font-size:13px;
  line-height:1.25;
  font-weight:600;
  color:#1d302b;
}
@media(max-width:760px){
  .subscription-rzp-test-panel{grid-template-columns:1fr;padding:13px}
  .subscription-rzp-test-actions{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .subscription-rzp-test-actions{grid-template-columns:1fr}
}

/* =========================================================
   Step 18A — Public Invoice Link V1 + reliable UPI QR
   Larger scanner presentation; keeps existing invoice layout.
   ========================================================= */
.invoice-upi-section{
  grid-template-columns:minmax(0,1fr) 320px;
}
.invoice-upi-section img{
  width:300px;
  height:300px;
  border:0;
  padding:12px;
  background:#fff;
  box-sizing:border-box;
}
@media(max-width:760px){
  .invoice-upi-section{
    grid-template-columns:1fr;
  }
  .invoice-upi-section img{
    width:min(280px,82vw);
    height:auto;
    aspect-ratio:1;
    padding:10px;
    justify-self:center;
  }
}


/* Step 18A1 — official boutique payment QR */
.invoice-payment-qr-preview-wrap{margin:8px 0 10px}
.invoice-payment-qr-preview{display:grid;justify-items:center;gap:7px;padding:10px;border:1px solid var(--line,#ded5cc);border-radius:12px;background:#fff}
.invoice-payment-qr-preview img{display:block;max-width:min(320px,100%);max-height:420px;width:auto;height:auto;object-fit:contain;border-radius:8px;background:#fff}
.invoice-payment-qr-preview span{font-size:.72rem;color:var(--muted,#756960);font-weight:700}
.invoice-payment-qr-empty{display:grid;gap:4px;padding:14px;border:1px dashed var(--line,#ded5cc);border-radius:12px;background:#fff}
.invoice-payment-qr-empty strong{font-size:.82rem}
.invoice-payment-qr-empty span{font-size:.72rem;color:var(--muted,#756960);line-height:1.45}
.invoice-payment-qr-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.invoice-payment-qr-upload{position:relative;overflow:hidden;cursor:pointer}
.invoice-payment-qr-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.invoice-upi-section img{width:auto!important;max-width:min(340px,100%)!important;height:auto!important;max-height:440px!important;object-fit:contain!important;background:#fff}
@media(max-width:700px){
  .invoice-payment-qr-preview img{max-width:min(300px,82vw);max-height:390px}
  .invoice-upi-section img{max-width:min(320px,86vw)!important;max-height:430px!important}
}
\n\n/* ANIQ TailorDesk Step 20F — approved product icon replaces legacy AT product marks. */
.product-icon-mark{
  overflow:hidden!important;
  padding:0!important;
  background:#f5f0e7!important;
  border:1px solid rgba(62,76,47,.16)!important;
  color:transparent!important;
  box-shadow:0 5px 14px rgba(46,57,40,.10)!important;
}
.product-icon-mark img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:inherit!important;
}
.brand-mark.product-icon-mark{width:60px;height:60px;border-radius:18px}
.workspace-brand-mark.product-icon-mark img{object-fit:cover!important}
.tailordesk-share-mark.product-icon-mark{display:block}
@media(max-width:560px){
  .brand-mark.product-icon-mark{width:52px;height:52px;border-radius:16px}
}

/* =========================================================
   Step 20G — Mobile auth/signup visibility fix
   Keeps the app workspace scroll lock, but makes auth/onboarding
   screens independently scrollable on phones.
   ========================================================= */
@media(max-width:760px){
  .auth-shell{
    width:100%!important;
    max-width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    place-items:start center!important;
    padding:16px 12px calc(28px + env(safe-area-inset-bottom))!important;
  }
  .auth-shell>.auth-card,
  .auth-card{
    width:100%!important;
    max-width:470px!important;
    min-width:0!important;
    margin:0 auto!important;
    padding:22px 18px!important;
    border-radius:22px!important;
  }
  .auth-card *,
  .auth-card form,
  .auth-card label,
  .auth-card input,
  .auth-card button,
  .auth-card .brand-lockup,
  .auth-card .auth-mode-tabs,
  .auth-card .auth-form-intro{
    min-width:0;
    max-width:100%;
  }
  .auth-card input,
  .auth-card select,
  .auth-card textarea,
  .auth-card button{
    width:100%;
  }
  .auth-card .brand-lockup{
    align-items:center;
  }
  .auth-card .product-brand-name{
    max-width:100%;
    overflow-wrap:anywhere;
  }
}
@media(max-width:360px){
  .auth-shell{
    padding-left:8px!important;
    padding-right:8px!important;
  }
  .auth-card{
    padding:18px 14px!important;
    border-radius:18px!important;
  }
}

/* =========================================================
   Step 20H — New boutique email-confirmation guidance
   Persistent confirmation state replaces the easy-to-miss toast.
   ========================================================= */
.owner-signup-email-note{
  display:block;
  margin-top:1px;
  color:var(--muted);
  font-size:.75rem;
  line-height:1.45;
  font-weight:520;
}
.owner-signup-confirm-panel{
  display:grid;
  gap:12px;
  margin-top:18px;
  padding:18px;
  border:1px solid #d8dfcf;
  border-radius:18px;
  background:#fbfcf8;
}
.owner-signup-confirm-badge{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#667548;
  color:#fff;
  font-size:1.2rem;
  font-weight:850;
}
.owner-signup-confirm-kicker{
  color:#7b2330;
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.1em;
}
.owner-signup-confirm-panel h2{
  margin:-4px 0 0;
  font-size:1.28rem;
}
.owner-signup-confirm-panel p{
  margin:0;
  color:#4e4a55;
  line-height:1.5;
}
.owner-signup-confirm-panel p strong{
  color:var(--text);
  overflow-wrap:anywhere;
}
.owner-signup-confirm-steps{
  margin:0;
  padding-left:1.25rem;
  display:grid;
  gap:8px;
  color:#36323d;
  font-size:.88rem;
  line-height:1.45;
}
.owner-signup-confirm-help{
  display:grid;
  gap:3px;
  padding:11px 12px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--line);
}
.owner-signup-confirm-help strong{font-size:.82rem}
.owner-signup-confirm-help span{color:var(--muted);font-size:.76rem;line-height:1.45}
@media(max-width:760px){
  .owner-signup-confirm-panel{padding:16px 14px;border-radius:16px}
  .owner-signup-confirm-panel .primary,
  .owner-signup-confirm-panel .auth-secondary-link{width:100%}
}

/* =========================================================
   STEP 21A0 — IPHONE NEW ORDER DELIVERY / PRIORITY STACK
   Scope: narrow WebKit/iPhone only. Android/tablet/desktop unchanged.
   Purpose: prevent the native iOS date control from crowding/overlapping
   Priority while preserving the native iOS date picker.
   ========================================================= */
@supports (-webkit-touch-callout: none){
  @media (max-width:480px){
    html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .refined-order-basics{
      grid-template-columns:minmax(0,1fr)!important;
      column-gap:0!important;
      row-gap:14px!important;
    }

    html:not(.fitflow-tablet-layout) #modal[data-mode="order"] .refined-order-basics>label:not(.order-customer-field){
      grid-column:1 / -1!important;
      width:100%!important;
      min-width:0!important;
      max-width:100%!important;
      box-sizing:border-box!important;
    }

    html:not(.fitflow-tablet-layout) #modal[data-mode="order"] #oDelivery,
    html:not(.fitflow-tablet-layout) #modal[data-mode="order"] #oPriority{
      width:100%!important;
      min-width:0!important;
      max-width:100%!important;
      inline-size:100%!important;
      min-inline-size:0!important;
      max-inline-size:100%!important;
      box-sizing:border-box!important;
    }
  }
}



/* =========================================================
   ANIQ TailorRecord Step 21D1 — display-language foundation
   Isolated Settings language chooser + Indic font fallback.
   No existing desktop/tablet/mobile layout rules are changed.
   ========================================================= */
.settings-language-panel{display:grid;gap:12px}
.settings-language-choice-list{display:grid;gap:8px}
.settings-language-choice{
  width:100%;display:grid;grid-template-columns:18px minmax(0,1fr) auto;
  align-items:center;gap:11px;text-align:left;padding:12px 13px;
  border:1px solid var(--line);border-radius:13px;background:#fffefa;color:var(--text);
  cursor:pointer;box-shadow:none;
}
.settings-language-choice:hover{border-color:var(--line-strong);background:var(--bg-soft)}
.settings-language-choice.is-active{border-color:#8a667f;background:var(--accent-soft)}
.settings-language-choice>span:nth-child(2){display:grid;gap:2px;min-width:0}
.settings-language-choice strong{font-size:.88rem;font-weight:750}
.settings-language-choice small{font-size:.69rem;color:var(--muted);font-weight:550}
.settings-language-radio{width:16px;height:16px;border:1.5px solid #aa98a2;border-radius:50%;position:relative}
.settings-language-choice.is-active .settings-language-radio:after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
.settings-language-check{font-size:.9rem;font-weight:800;color:var(--ok)}
.settings-language-note{padding:10px 12px;border:1px solid #e8dfd7;border-radius:11px;background:#faf7f3;color:var(--muted);font-size:.72rem;line-height:1.5}

/* Georgia does not reliably include Devanagari/Telugu glyphs. Keep the same
   hierarchy while letting the operating system use its native Indic font. */
html[lang="hi"] body,html[lang="hi"] button,html[lang="hi"] input,html[lang="hi"] select,html[lang="hi"] textarea,
html[lang="te"] body,html[lang="te"] button,html[lang="te"] input,html[lang="te"] select,html[lang="te"] textarea{
  font-family:"Nirmala UI","Segoe UI",Roboto,Arial,sans-serif;
}
html[lang="hi"] h1,html[lang="hi"] h2,html[lang="hi"] h3,html[lang="hi"] .brand-lockup h1,
html[lang="te"] h1,html[lang="te"] h2,html[lang="te"] h3,html[lang="te"] .brand-lockup h1{
  font-family:"Nirmala UI","Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:0;
}


/* =========================================================
   Step 21F2 — pre-signup language + trial experience choice
   ========================================================= */
.auth-language-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:4px 0 14px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fffdfa;
}
.auth-language-strip>span{
  color:var(--muted);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.auth-language-buttons{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.auth-language-buttons button{
  border:1px solid transparent;
  border-radius:999px;
  padding:6px 9px;
  background:transparent;
  color:#4c3d45;
  font-size:.72rem;
  font-weight:750;
  cursor:pointer;
}
.auth-language-buttons button:hover{background:var(--bg-soft)}
.auth-language-buttons button.is-active{border-color:#bca8b4;background:var(--accent-soft);color:var(--accent)}

.trial-choice-shell{padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom))}
.trial-choice-card{width:min(760px,calc(100vw - 32px));padding:28px}
.trial-choice-brand-row{margin-bottom:22px}
.trial-free-badge{
  align-self:flex-start;
  padding:7px 10px;
  border:1px solid #d9c8a8;
  border-radius:999px;
  background:#fbf4e4;
  color:#715d37;
  font-size:.62rem;
  font-weight:850;
  letter-spacing:.05em;
  white-space:nowrap;
}
.trial-choice-heading{display:grid;gap:7px;margin-bottom:18px}
.trial-choice-heading h2{margin:0;font-size:1.75rem;line-height:1.15;color:#352a30}
.trial-choice-heading>.muted{margin:0;max-width:650px;line-height:1.55}
.trial-choice-boutique{margin-top:6px;font-size:.88rem;color:#4c3d45}
.trial-current-workspace{color:var(--muted);font-size:.72rem}
.trial-experience-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.trial-experience-card{
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 22px;
  align-items:start;
  gap:12px;
  min-height:164px;
  padding:18px;
  text-align:left;
  border:1px solid #dfd4cd;
  border-radius:20px;
  background:#fffefa;
  color:inherit;
  cursor:pointer;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.trial-experience-card:hover{border-color:#bba8b1;transform:translateY(-1px);box-shadow:0 8px 22px rgba(54,39,47,.07)}
.trial-experience-card.is-selected{border-color:#856377;background:#faf5f8;box-shadow:0 0 0 2px rgba(133,99,119,.08)}
.trial-card-symbol{
  display:grid;
  place-items:center;
  width:42px;height:42px;
  border-radius:14px;
  background:#f2ece8;
  color:#704e62;
  font-size:1.2rem;
  font-weight:800;
}
.trial-experience-card.is-selected .trial-card-symbol{background:#eadfe6;color:#644357}
.trial-card-copy{display:grid;gap:6px;min-width:0}
.trial-card-copy small{color:var(--muted);font-size:.62rem;font-weight:850;letter-spacing:.07em}
.trial-card-copy strong{font-size:1rem;color:#382d33}
.trial-card-copy span{font-size:.75rem;line-height:1.5;color:#70636a}
.trial-card-check{
  display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  border:1px solid #cdbfc7;color:transparent;font-size:.72rem;font-weight:900;
}
.trial-experience-card.is-selected .trial-card-check{background:#6f5062;border-color:#6f5062;color:white}
.trial-simple-workspace{display:grid;gap:9px;margin-top:14px;padding:14px;border:1px solid #e5d9ca;border-radius:16px;background:#fcf8f0}
.trial-simple-workspace>strong{font-size:.82rem;color:#4a3a31}
.trial-simple-workspace>span{font-size:.72rem;line-height:1.45;color:#796b61}
.trial-choice-note{display:grid;gap:3px;margin-top:14px;padding:11px 13px;border-radius:14px;background:#f6f3f1}
.trial-choice-note strong{font-size:.75rem;color:#4b3c43}
.trial-choice-note span{font-size:.69rem;line-height:1.45;color:var(--muted)}
.trial-choice-actions{display:flex;justify-content:flex-end;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.trial-choice-actions .primary{min-width:170px}

@media(max-width:760px){
  .auth-language-strip{align-items:flex-start;flex-direction:column}
  .auth-language-buttons{width:100%;justify-content:stretch}
  .auth-language-buttons button{flex:1}
  .trial-choice-card{width:min(100%,calc(100vw - 20px));padding:21px 17px;border-radius:23px}
  .trial-choice-brand-row{align-items:flex-start;gap:10px}
  .trial-free-badge{font-size:.57rem;padding:6px 8px}
  .trial-choice-heading h2{font-size:1.5rem}
  .trial-experience-grid{grid-template-columns:1fr}
  .trial-experience-card{min-height:0;padding:15px;grid-template-columns:40px minmax(0,1fr) 20px}
  .trial-card-symbol{width:38px;height:38px;border-radius:12px}
  .trial-choice-actions{position:sticky;bottom:0;background:rgba(255,253,251,.98);padding-bottom:max(2px,env(safe-area-inset-bottom))}
  .trial-choice-actions .primary{width:100%}
}


/* =========================================================
   Step 21G — Simple Tailor Active → Completed workflow
   Scoped additions only; Full Boutique responsive layout remains unchanged.
   ========================================================= */
.simple-workflow-track{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg-soft)}
.simple-workflow-step{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.78rem;font-weight:750;white-space:nowrap}
.simple-workflow-step>span{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-strong);background:var(--card);font-size:.7rem}
.simple-workflow-step.current{color:var(--text)}
.simple-workflow-step.current>span,.simple-workflow-step.done>span{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.simple-workflow-line{height:2px;min-width:28px;flex:1;background:var(--line-strong);border-radius:999px}
.simple-workflow-line.done{background:var(--ok)}
.simple-workflow-badge.is-active{background:var(--gold-soft);color:var(--warn)}
.simple-workflow-badge.is-completed{background:var(--ok-soft);color:var(--ok)}
.simple-workflow-badge.is-cancelled{background:var(--danger-soft);color:var(--danger)}
.simple-order-workflow-card{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--bg-soft)}
.simple-order-workflow-card>div{display:grid;gap:6px;min-width:0}
.simple-order-workflow-state{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.simple-order-workflow-state>strong{font-family:Georgia,"Times New Roman",serif;font-size:1.05rem;font-weight:600}
.simple-order-workflow-card small{color:var(--muted);line-height:1.45}
.simple-garment-status-cell .simple-workflow-badge{justify-content:center}
.mobile-order-simple-status{display:none}
@media(max-width:760px){
  .simple-workflow-track{gap:7px;padding:10px 11px}
  .simple-workflow-step{font-size:.72rem}
  .simple-workflow-line{min-width:14px}
  .simple-order-workflow-card{align-items:stretch;flex-direction:column}
  .simple-order-workflow-card button{width:100%}
  .mobile-order-simple-status{display:flex;margin-top:8px}
}

/* =========================================================
   Step 21G1 — Header Alerts button visual consistency
   Remove the browser's dotted mouse-focus outline so Alerts
   matches Settings / Logout. Keep a clean accessible keyboard
   focus ring for keyboard navigation.
   ========================================================= */
#appView .topbar-actions > button:focus{
  outline:none!important;
}
#appView .topbar-actions > button:focus-visible{
  outline:none!important;
  box-shadow:0 0 0 2px rgba(94,105,120,.16)!important;
}

/* =========================================================
   Step 21G1A — Owner Alerts locked-state visual normalization
   Root cause: the shared .subscription-feature-locked rule adds
   a dashed outline and reduced opacity. Keep the feature locked
   functionally, but make the header button match its neighbours.
   ========================================================= */
#appView #ownerAlertsBtn.subscription-feature-locked{
  opacity:1!important;
  filter:none!important;
  outline:none!important;
  outline-offset:0!important;
  border:1px solid #D8CCC1!important;
  background:#FFFDFC!important;
  color:#403934!important;
  box-shadow:none!important;
}
#appView #ownerAlertsBtn.subscription-feature-locked:focus{
  outline:none!important;
  box-shadow:none!important;
}
#appView #ownerAlertsBtn.subscription-feature-locked:focus-visible{
  outline:none!important;
  box-shadow:0 0 0 2px rgba(94,105,120,.16)!important;
}

/* =========================================================
   ANIQ TailorRecord Step 21G2 — Basic / Classic / Signature
   Plan & Subscription alignment.
   Scoped to the subscription modal and the one status-share control.
   Keeps the previously approved fabric palette and responsive layout.
   ========================================================= */
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-plan-card.tone-basic{
  border-top:4px solid var(--ff-plan-grey)!important;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .tone-basic .subscription-plan-symbol{
  background:#E9E8E4!important;
  color:#5E6861!important;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-choice-cue{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-top:8px;
  padding:6px 10px;
  border:1px solid var(--ff-plan-line);
  border-radius:999px;
  background:var(--ff-plan-olive-soft);
  color:var(--ff-plan-deep);
  font-size:.64rem;
  line-height:1.2;
  font-weight:750;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-free-access-pill{
  display:inline-flex;
  margin-top:8px;
  padding:5px 8px;
  border:1px solid var(--ff-plan-olive);
  border-radius:999px;
  background:var(--ff-plan-olive-soft);
  color:var(--ff-plan-deep);
  font-size:.55rem;
  line-height:1;
  font-weight:850;
  letter-spacing:.05em;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-capacity-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:11px;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-capacity-pair>div{
  display:grid;
  gap:2px;
  padding:10px 11px;
  border:1px solid var(--ff-plan-line);
  border-radius:12px;
  background:color-mix(in srgb,var(--ff-plan-paper) 78%,var(--ff-plan-olive-soft) 22%);
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-capacity-pair strong{
  color:var(--ff-plan-deep)!important;
  font-size:1.34rem!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:-.03em!important;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-capacity-pair span{
  color:var(--ff-plan-taupe)!important;
  font-size:.49rem!important;
  line-height:1.2!important;
  font-weight:800!important;
  letter-spacing:.06em!important;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-capacity-note{
  margin:6px 0 0!important;
  color:#737A74!important;
  font-size:.56rem!important;
  line-height:1.35!important;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-basic-monthly-only{
  display:flex;
  align-items:center;
  min-height:38px;
  margin-top:9px;
  padding:9px 0 11px;
  border-bottom:1px solid var(--ff-plan-line);
  color:var(--ff-plan-taupe);
  font-size:.66rem;
  font-weight:700;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-usage-strip-v21g2>div{
  align-content:start;
  min-width:0;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-usage-number{
  display:flex;
  align-items:baseline;
  gap:5px;
  margin-top:2px;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-usage-number strong{
  font-size:1.6rem!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-usage-number span{
  color:var(--ff-plan-taupe)!important;
  font-size:.68rem!important;
  font-weight:650!important;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-usage-strip-v21g2 b{
  color:var(--ff-plan-deep);
  font-size:.65rem;
  font-weight:750;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-usage-strip-v21g2 em{
  color:#737A74;
  font-size:.56rem;
  line-height:1.35;
  font-style:normal;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-usage-plan{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin:4px 0 2px;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-usage-plan strong{
  font-size:1rem!important;
  font-weight:800!important;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-usage-plan span{
  display:inline-flex;
  padding:4px 7px;
  border-radius:999px;
  background:var(--ff-plan-olive-soft);
  color:var(--ff-plan-deep)!important;
  font-size:.5rem!important;
  font-weight:850!important;
  letter-spacing:.04em;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-card{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) auto minmax(230px,.9fr);
  align-items:center;
  gap:16px;
  padding:16px 18px;
  border:1px solid var(--ff-plan-line);
  border-radius:18px;
  background:linear-gradient(115deg,var(--ff-plan-paper) 0%,color-mix(in srgb,var(--ff-plan-paper) 72%,var(--ff-plan-olive-soft) 28%) 100%);
  box-shadow:0 8px 22px rgba(29,43,43,.06);
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-copy{
  display:grid;
  gap:5px;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-copy>span{
  color:var(--ff-plan-taupe);
  font-size:.55rem;
  font-weight:850;
  letter-spacing:.07em;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-title{
  display:flex;
  align-items:baseline;
  gap:7px;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-title strong{
  color:var(--ff-plan-deep)!important;
  font-size:1.7rem!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:-.04em!important;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-title em{
  color:var(--ff-plan-taupe);
  font-size:.68rem;
  font-style:normal;
  font-weight:650;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-copy p{
  margin:0!important;
  color:#687471!important;
  font-size:.62rem!important;
  line-height:1.45!important;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-numbers{
  display:flex;
  gap:8px;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-numbers>div{
  display:grid;
  min-width:86px;
  gap:3px;
  padding:10px 11px;
  border-radius:13px;
  background:var(--ff-plan-deep);
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-numbers strong{
  color:var(--ff-plan-paper)!important;
  font-size:1.2rem!important;
  line-height:1!important;
  font-weight:800!important;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-numbers span{
  color:#D7D9D2!important;
  font-size:.47rem!important;
  line-height:1.2!important;
  font-weight:800!important;
  letter-spacing:.05em!important;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-rules{
  display:grid;
  gap:3px;
  color:#707970;
  font-size:.56rem;
  line-height:1.35;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-rules b{
  color:var(--ff-plan-deep);
  font-size:.62rem;
}
.customer-status-share-trigger.is-plan-locked{
  opacity:.67;
  cursor:pointer;
}
button.customer-status-share-trigger.is-plan-locked{
  outline:0!important;
}
@media(max-width:900px){
  #modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-card{
    grid-template-columns:1fr auto;
  }
  #modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-rules{grid-column:1/-1}
}
@media(max-width:760px){
  #modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-capacity-pair strong{font-size:1.45rem!important}
  #modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-usage-number strong{font-size:1.7rem!important}
  #modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-card{grid-template-columns:1fr;padding:15px}
  #modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-numbers{width:100%}
  #modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-numbers>div{flex:1;min-width:0}
  #modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-rules{grid-column:auto}
}

/* =========================================================
   ANIQ TailorRecord Step 21G2A — Subscription UI polish
   Visual-only refinement of Step 21G2. No entitlement,
   pricing, capacity or payment logic changes.
   ========================================================= */
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-capacity-pair{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-capacity-item{
  display:grid;
  align-content:start;
  gap:5px;
  min-width:0;
  padding:11px 12px;
  border:1px solid var(--ff-plan-line);
  border-radius:12px;
  background:color-mix(in srgb,var(--ff-plan-paper) 78%,var(--ff-plan-olive-soft) 22%);
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-capacity-label{
  display:block;
  color:var(--ff-plan-taupe)!important;
  font-size:.5rem!important;
  line-height:1.3!important;
  font-weight:800!important;
  letter-spacing:.055em!important;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-usage-plan{
  display:grid;
  justify-items:start;
  align-content:start;
  gap:5px;
  margin:5px 0 4px;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-usage-plan-badge{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:4px 8px;
  border-radius:999px;
  background:var(--ff-plan-olive-soft);
  color:var(--ff-plan-deep)!important;
  font-size:.5rem!important;
  line-height:1.2!important;
  font-weight:850!important;
  letter-spacing:.045em;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-card{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr);
  align-items:start;
  gap:16px 20px;
  padding:18px;
  border:1px solid var(--ff-plan-line);
  border-radius:18px;
  background:linear-gradient(115deg,var(--ff-plan-paper) 0%,color-mix(in srgb,var(--ff-plan-paper) 72%,var(--ff-plan-olive-soft) 28%) 100%);
  box-shadow:0 8px 22px rgba(29,43,43,.06);
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-title{
  display:grid;
  align-items:start;
  gap:4px;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-title strong{
  display:block;
  color:var(--ff-plan-deep)!important;
  font-size:1.8rem!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:-.04em!important;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-title>div{
  color:var(--ff-plan-taupe)!important;
  font-size:.72rem!important;
  line-height:1.35!important;
  font-weight:700!important;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-numbers{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  width:100%;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-numbers>div{
  display:grid;
  align-content:center;
  min-width:0;
  min-height:74px;
  gap:5px;
  padding:12px;
  border-radius:13px;
  background:var(--ff-plan-deep);
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-numbers strong{
  display:block;
  color:var(--ff-plan-paper)!important;
  font-size:1.4rem!important;
  line-height:1!important;
  font-weight:850!important;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-numbers>div>div{
  color:#D7D9D2!important;
  font-size:.54rem!important;
  line-height:1.25!important;
  font-weight:800!important;
  letter-spacing:.045em!important;
  text-transform:uppercase;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-rules{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin:0;
  padding:0;
  list-style:none;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-rules li{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:6px 9px;
  border:1px solid var(--ff-plan-line);
  border-radius:999px;
  background:rgba(248,247,242,.78);
  color:#66716D;
  font-size:.56rem;
  line-height:1.2;
  font-weight:700;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-rules li:first-child{
  border-color:var(--ff-plan-olive);
  background:var(--ff-plan-olive-soft);
  color:var(--ff-plan-deep);
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-rules b{
  color:inherit;
  font-size:inherit;
}
#modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-footnote{
  grid-column:1/-1;
  margin:0!important;
  padding-top:10px;
  border-top:1px solid var(--ff-plan-line);
  color:#737A74!important;
  font-size:.56rem!important;
  line-height:1.4!important;
}
@media(max-width:760px){
  #modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-card{
    grid-template-columns:1fr;
    gap:13px;
    padding:15px;
  }
  #modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-rules,
  #modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-footnote{
    grid-column:auto;
  }
}
@media(max-width:390px){
  #modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-capacity-pair{
    grid-template-columns:1fr;
  }
  #modal[data-mode="subscription"] .subscription-site-v21g2 .subscription-topup-numbers{
    grid-template-columns:1fr 1fr;
  }
}


/* =========================================================
   V2.3.47 Step 21I — Legal & Support
   ========================================================= */
.auth-signup-legal-note{margin:2px 0 -4px;color:#766B63;font-size:.68rem;line-height:1.4;text-align:center}
.auth-signup-legal-links,.auth-public-legal{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}
.auth-signup-legal-links{margin:-1px 0 3px}
.auth-inline-legal-link,.auth-public-legal button{appearance:none;border:0;background:transparent;padding:2px 0;color:#55695F;text-decoration:underline;text-underline-offset:2px;font:inherit;font-size:.69rem;cursor:pointer}
.auth-public-legal{margin-top:11px;padding-top:10px;border-top:1px solid #ECE5DE;color:#94887F;font-size:.68rem}
.auth-public-legal button{font-size:.67rem;color:#66776F}
#modal[data-mode="legal"] .modal-card,#modal[data-mode="legal-hub"] .modal-card{width:min(820px,94vw)}
#modal[data-mode="legal"] .modal-body,#modal[data-mode="legal-hub"] .modal-body{padding-top:12px}
.legal-language-summary{margin:0 0 14px;padding:13px 14px;border:1px solid #D9DDCF;border-radius:14px;background:#F6F6EE}
.legal-language-summary>span{display:block;margin-bottom:4px;color:#70724F;font-size:.66rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
.legal-language-summary p{margin:0;color:#3D4945;font-size:.83rem;line-height:1.55}
.legal-language-summary small{display:block;margin-top:7px;color:#81766D;font-size:.68rem;line-height:1.45}
.legal-doc{display:grid;gap:11px;color:#3E3A36}
.legal-doc-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:11px;border-bottom:1px solid #E7E0D9}
.legal-doc-meta span{font-size:.91rem;font-weight:750;color:#283B37}.legal-doc-meta small{font-size:.67rem;color:#847970;white-space:nowrap}
.legal-doc-section{padding:0 2px}.legal-doc-section h3{margin:0 0 5px;color:#374A44;font-size:.82rem}.legal-doc-section p{margin:0 0 7px;font-size:.76rem;line-height:1.62;color:#514A45}.legal-doc-section p:last-child{margin-bottom:0}
.legal-doc-section ul{margin:4px 0 0;padding-left:20px}.legal-doc-section li{margin:0 0 5px;color:#514A45;font-size:.75rem;line-height:1.52}
.legal-doc-section a,.legal-support-panel a{color:#526C61;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.legal-hub{display:grid;gap:12px}.legal-hub-note{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 13px;border:1px solid #D9DDCF;border-radius:14px;background:#F6F6EE}.legal-hub-note strong{font-size:.76rem;color:#364841}.legal-hub-note span{font-size:.7rem;color:#6D675F}
.legal-hub-list{overflow:hidden;border:1px solid #DED4CB;border-radius:16px;background:#FFFDFB}.legal-hub-list button{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) 16px;align-items:center;gap:10px;padding:12px;border:0;border-bottom:1px solid #EEE6DE;background:#FFFDFB;text-align:left;cursor:pointer}.legal-hub-list button:last-child{border-bottom:0}.legal-hub-list button:hover{background:#FAF7F3}.legal-hub-list button>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#EEF1EA;color:#61705D;font-weight:750}.legal-hub-list button div strong{display:block;color:#403833;font-size:.81rem}.legal-hub-list button div small{display:block;margin-top:2px;color:#756A63;font-size:.68rem;line-height:1.35}.legal-hub-list button>b{color:#A6978C;font-size:1.2rem}
.legal-support-panel{display:grid;gap:13px}.legal-support-email,.legal-support-safety,.legal-support-diagnostics{padding:13px 14px;border:1px solid #E1D9D1;border-radius:14px;background:#FFFDFB}.legal-support-email span{display:block;color:#82766D;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em}.legal-support-email strong{display:block;margin-top:3px;color:#30433D;font-size:.9rem;overflow-wrap:anywhere}.legal-support-email p,.legal-support-safety p{margin:5px 0 0;color:#625951;font-size:.73rem;line-height:1.5}.legal-support-actions{display:flex;gap:8px;flex-wrap:wrap}.legal-support-actions button{min-height:38px}.legal-support-safety strong{color:#78493E;font-size:.77rem}.legal-support-diagnostics summary{cursor:pointer;color:#52645E;font-size:.73rem;font-weight:700}.legal-support-diagnostics pre{margin:10px 0 0;padding:10px;border-radius:10px;background:#F4F1ED;color:#5B544F;font:600 .67rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.subscription-legal-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:10px 12px;border:1px solid #D8D9CD;border-radius:12px;background:#F7F6F1}.subscription-legal-row span{color:#6C685F;font-size:.68rem;line-height:1.4}.subscription-legal-row button{border:0;background:transparent;color:#59634F;font-size:.7rem;font-weight:750;text-decoration:underline;text-underline-offset:2px;cursor:pointer;white-space:nowrap}
@media(max-width:760px){.legal-doc-meta{display:grid;gap:3px}.legal-doc-meta small{white-space:normal}.legal-hub-note{display:grid;gap:4px}.legal-support-actions{display:grid;grid-template-columns:1fr}.subscription-legal-row{align-items:flex-start;flex-direction:column}.subscription-legal-row button{white-space:normal;padding:0}.auth-public-legal{gap:5px}.legal-doc-section p{font-size:.75rem}}

/* =========================================================
   V2.3.47 Step 21I1A — Legal modal bottom visibility fix
   Gives long legal/support documents enough scroll clearance
   above the persistent modal action bar on desktop and mobile.
   ========================================================= */
#modal[data-mode="legal"] .modal-body,
#modal[data-mode="legal-hub"] .modal-body{
  padding-bottom:56px!important;
  scroll-padding-bottom:56px;
}
#modal[data-mode="legal"] .legal-doc,
#modal[data-mode="legal"] .legal-support-panel,
#modal[data-mode="legal-hub"] .legal-hub{
  padding-bottom:10px;
}
@media(max-width:760px){
  #modal[data-mode="legal"] .modal-body,
  #modal[data-mode="legal-hub"] .modal-body{
    padding-bottom:64px!important;
    scroll-padding-bottom:64px;
  }
}

/* =========================================================
   V2.3.47 Step 21I1B — Mobile Legal / Loading / Login Alignment Fix
   MOBILE ONLY. Desktop legal, auth and startup layouts remain unchanged.
   ========================================================= */
@media(max-width:760px){
  /* Use the real visible phone viewport so the startup card stays visually centered
     below browser chrome and inside the installed PWA. */
  .startup-shell{
    min-height:100dvh!important;
    height:100dvh!important;
    padding:16px!important;
    place-items:center!important;
    align-content:center!important;
    overflow:hidden;
  }
  .startup-card{
    width:min(430px,100%)!important;
    margin:auto!important;
    padding:28px 20px!important;
    text-align:center!important;
  }
  .startup-brand{
    width:100%;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0 auto 18px!important;
  }
  .startup-spinner{margin:4px auto 12px!important}
  .startup-card h2{margin:12px 0 5px!important;text-align:center!important}
  .startup-card p{margin:0 auto!important;text-align:center!important}

  /* Legal screens should begin at the top of the scrolling body instead of stretching
     one child to fill the full phone modal height. */
  #modal[data-mode="legal"] .modal-body,
  #modal[data-mode="legal-hub"] .modal-body{
    align-content:start!important;
    padding-top:10px!important;
    padding-left:12px!important;
    padding-right:12px!important;
    padding-bottom:64px!important;
    scroll-padding-bottom:64px;
  }
  #modal[data-mode="legal-hub"] .legal-hub{
    align-content:start!important;
    grid-auto-rows:max-content!important;
    gap:10px!important;
  }
  #modal[data-mode="legal-hub"] .legal-hub-note{
    display:grid!important;
    align-content:start!important;
    gap:5px!important;
    min-height:0!important;
    height:auto!important;
    padding:12px 14px!important;
  }
  #modal[data-mode="legal-hub"] .legal-hub-list{align-self:start!important}
  #modal[data-mode="legal-hub"] .legal-hub-list button{padding:11px 12px!important}

  /* Tighter but still readable legal/support content on narrow screens. */
  .legal-language-summary{margin-bottom:10px!important;padding:11px 12px!important}
  .legal-doc{gap:9px!important}
  .legal-support-panel{gap:10px!important}
  .legal-support-email,.legal-support-safety,.legal-support-diagnostics{padding:11px 12px!important}
  .legal-support-actions{gap:8px!important}

  /* A single Close action should sit in the visual center of legal modals. */
  #modal[data-mode="legal"] .modal-actions,
  #modal[data-mode="legal-hub"] .modal-actions{
    grid-template-columns:1fr!important;
  }
  #modal[data-mode="legal"] #modalSaveBtn,
  #modal[data-mode="legal-hub"] #modalSaveBtn{
    width:min(220px,100%)!important;
    justify-self:center!important;
  }

  /* Public legal links on the sign-in screen stay on one balanced row rather than
     stacking with separator dots on separate lines. */
  .auth-public-legal{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    margin-top:12px!important;
    padding-top:10px!important;
  }
  .auth-public-legal>span{display:none!important}
  .auth-public-legal button{
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:4px 2px!important;
    font-size:.64rem!important;
    line-height:1.3!important;
    text-align:center!important;
    white-space:normal!important;
  }
}

@media(max-width:360px){
  .auth-public-legal{gap:4px!important}
  .auth-public-legal button{font-size:.6rem!important}
}

/* =========================================================
   V2.3.47 Step 21I1C — Mobile Legal Right-Gap Fix
   MOBILE ONLY. Makes the legal modal card fill its dialog width so
   the backdrop does not show as an uneven strip on the right.
   ========================================================= */
@media(max-width:760px){
  #modal[data-mode="legal"] .modal-card,
  #modal[data-mode="legal-hub"] .modal-card{
    width:100%!important;
    max-width:none!important;
  }
}


/* Step 21I2 — FAQ responsive hardening only. */
@media (min-width:761px) and (max-width:1100px){
  #modal[data-mode="help-faq"]{width:min(880px,calc(100% - 18px))!important}
  #modal[data-mode="help-faq"] .modal-body{padding:14px 14px 20px!important}
  .help-faq-shell{min-width:0}
}
@media (max-width:760px){
  #modal[data-mode="help-faq"]{width:calc(100% - 8px)!important;max-width:none!important}
  #modal[data-mode="help-faq"] .modal-card{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
  #modal[data-mode="help-faq"] .modal-body{width:100%!important;box-sizing:border-box!important;overflow-x:hidden!important}
  .help-faq-shell,.help-faq-list,.help-faq-item,.help-faq-answer{min-width:0;max-width:100%;box-sizing:border-box}
  .help-faq-categories{max-width:100%;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
}

/* =========================================================
   ANIQ TailorRecord V2.3.47 — Step 21J2 FIX7
   Mobile modal centering + Plan Request confirmation polish
   Scope only:
   - Plan & Subscription
   - Plan & Subscription — Confirm request
   - Help & FAQ
   No workflow, subscription, payment or entitlement logic changes.
   ========================================================= */

/* The phone workspace rule intentionally makes most shared dialogs full-screen.
   Help/FAQ and Subscription later reduce their width, so they must restore
   horizontal auto margins; otherwise the narrower dialog remains left-anchored
   and leaves the visible empty strip on the right. */
@media (max-width:760px){
  #modal[data-mode="help-faq"],
  #modal[data-mode="subscription"]{
    left:0!important;
    right:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    overflow-x:hidden!important;
  }

  #modal[data-mode="help-faq"]{
    width:calc(100% - 20px)!important;
    max-width:calc(100% - 20px)!important;
  }

  #modal[data-mode="subscription"]{
    width:calc(100% - 20px)!important;
    max-width:calc(100% - 20px)!important;
  }

  #modal[data-mode="help-faq"] .modal-card,
  #modal[data-mode="subscription"] .modal-card{
    width:100%!important;
    max-width:100%!important;
  }

  #modal[data-mode="help-faq"] .modal-body,
  #modal[data-mode="subscription"] .modal-body{
    overflow-x:hidden!important;
  }
}

/* Confirm-request modal: compact, centered and intentionally card-like.
   :has() is limited to this exact confirmation content so the main plan page
   keeps its approved mini-site layout. */
#modal[data-mode="subscription"]:has(.subscription-request-confirm){
  width:min(720px,calc(100% - 32px))!important;
  max-width:720px!important;
  height:auto!important;
  max-height:min(88dvh,760px)!important;
  margin:auto!important;
  border-radius:24px!important;
  overflow:hidden!important;
}

#modal[data-mode="subscription"]:has(.subscription-request-confirm) .modal-card{
  width:100%!important;
  height:auto!important;
  max-height:min(88dvh,760px)!important;
  border-radius:24px!important;
  overflow:hidden!important;
  background:#F3F2ED!important;
}

#modal[data-mode="subscription"]:has(.subscription-request-confirm) .modal-head{
  padding:20px 24px 16px!important;
  background:#FFFDF9!important;
  border-bottom:1px solid var(--ff-plan-line,#C8C8B2)!important;
}

#modal[data-mode="subscription"]:has(.subscription-request-confirm) .modal-head h2{
  max-width:calc(100% - 58px)!important;
  font-size:1.34rem!important;
  line-height:1.18!important;
}

#modal[data-mode="subscription"]:has(.subscription-request-confirm) .modal-head .muted{
  max-width:620px!important;
  margin-top:5px!important;
  font-size:.72rem!important;
  line-height:1.45!important;
}

#modal[data-mode="subscription"]:has(.subscription-request-confirm) .modal-body{
  display:block!important;
  min-height:0!important;
  max-height:calc(min(88dvh,760px) - 154px)!important;
  padding:20px 24px 22px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  background:#F3F2ED!important;
}

#modal[data-mode="subscription"]:has(.subscription-request-confirm) .subscription-request-confirm{
  display:grid!important;
  gap:0!important;
  width:100%!important;
  min-width:0!important;
  padding:20px 21px!important;
  border:1px solid #D2D2C3!important;
  border-radius:18px!important;
  background:#FFFDF9!important;
  box-shadow:0 12px 28px rgba(29,43,43,.07)!important;
}

#modal[data-mode="subscription"]:has(.subscription-request-confirm) .subscription-request-confirm-kicker{
  display:block!important;
  margin-bottom:8px!important;
  font-size:.58rem!important;
  line-height:1.2!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
}

#modal[data-mode="subscription"]:has(.subscription-request-confirm) .subscription-request-confirm h3{
  margin:0 0 12px!important;
  font-size:1.08rem!important;
  line-height:1.25!important;
  letter-spacing:-.015em!important;
}

#modal[data-mode="subscription"]:has(.subscription-request-confirm) .subscription-request-confirm-price{
  margin:2px 0 16px!important;
  font-size:1.8rem!important;
  line-height:1!important;
}

#modal[data-mode="subscription"]:has(.subscription-request-confirm) .subscription-request-confirm-price small{
  font-size:.65rem!important;
}

#modal[data-mode="subscription"]:has(.subscription-request-confirm) .subscription-request-confirm-row{
  display:grid!important;
  grid-template-columns:minmax(120px,.8fr) minmax(0,1.2fr)!important;
  align-items:center!important;
  gap:18px!important;
  min-width:0!important;
  padding:12px 0!important;
  font-size:.69rem!important;
  line-height:1.38!important;
}

#modal[data-mode="subscription"]:has(.subscription-request-confirm) .subscription-request-confirm-row span,
#modal[data-mode="subscription"]:has(.subscription-request-confirm) .subscription-request-confirm-row strong{
  min-width:0!important;
  overflow-wrap:anywhere!important;
}

#modal[data-mode="subscription"]:has(.subscription-request-confirm) .subscription-request-confirm-row strong{
  text-align:right!important;
}

#modal[data-mode="subscription"]:has(.subscription-request-confirm) .subscription-request-confirm>p{
  margin:16px 0 0!important;
  padding:13px 14px!important;
  border:1px solid color-mix(in srgb,var(--ff-plan-olive,#BEBB79) 40%,#E8E6D5)!important;
  border-radius:13px!important;
  font-size:.68rem!important;
  line-height:1.55!important;
}

#modal[data-mode="subscription"]:has(.subscription-request-confirm) .modal-actions{
  padding:13px 24px 15px!important;
  background:#FFFDF9!important;
  border-top:1px solid var(--ff-plan-line,#C8C8B2)!important;
  box-shadow:0 -8px 22px rgba(29,43,43,.055)!important;
}

@media (max-width:760px){
  #modal[data-mode="subscription"]:has(.subscription-request-confirm){
    width:calc(100% - 20px)!important;
    max-width:calc(100% - 20px)!important;
    height:auto!important;
    max-height:calc(var(--ff-mobile-viewport,100dvh) - 20px)!important;
    margin:auto!important;
    border-radius:22px!important;
  }

  #modal[data-mode="subscription"]:has(.subscription-request-confirm) .modal-card{
    height:auto!important;
    max-height:calc(var(--ff-mobile-viewport,100dvh) - 20px)!important;
    border-radius:22px!important;
  }

  #modal[data-mode="subscription"]:has(.subscription-request-confirm) .modal-head{
    padding:17px 18px 14px!important;
    min-height:0!important;
  }

  #modal[data-mode="subscription"]:has(.subscription-request-confirm) .modal-head h2{
    font-size:1.23rem!important;
    line-height:1.18!important;
  }

  #modal[data-mode="subscription"]:has(.subscription-request-confirm) .modal-head .muted{
    font-size:.69rem!important;
    line-height:1.42!important;
  }

  #modal[data-mode="subscription"]:has(.subscription-request-confirm) .icon-btn{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
  }

  #modal[data-mode="subscription"]:has(.subscription-request-confirm) .modal-body{
    display:block!important;
    max-height:calc(var(--ff-mobile-viewport,100dvh) - 155px)!important;
    padding:14px!important;
  }

  #modal[data-mode="subscription"]:has(.subscription-request-confirm) .subscription-request-confirm{
    padding:17px 16px!important;
    border-radius:16px!important;
  }

  #modal[data-mode="subscription"]:has(.subscription-request-confirm) .subscription-request-confirm-kicker{
    margin-bottom:7px!important;
    font-size:.57rem!important;
  }

  #modal[data-mode="subscription"]:has(.subscription-request-confirm) .subscription-request-confirm h3{
    margin-bottom:11px!important;
    font-size:1.03rem!important;
  }

  #modal[data-mode="subscription"]:has(.subscription-request-confirm) .subscription-request-confirm-price{
    margin-bottom:13px!important;
    font-size:1.65rem!important;
  }

  #modal[data-mode="subscription"]:has(.subscription-request-confirm) .subscription-request-confirm-row{
    grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)!important;
    gap:12px!important;
    padding:11px 0!important;
    font-size:.68rem!important;
  }

  #modal[data-mode="subscription"]:has(.subscription-request-confirm) .subscription-request-confirm-row strong{
    line-height:1.35!important;
  }

  #modal[data-mode="subscription"]:has(.subscription-request-confirm) .subscription-request-confirm>p{
    margin-top:14px!important;
    padding:12px 13px!important;
    font-size:.67rem!important;
    line-height:1.5!important;
  }

  #modal[data-mode="subscription"]:has(.subscription-request-confirm) .modal-actions{
    grid-template-columns:minmax(92px,.36fr) minmax(0,1fr)!important;
    gap:9px!important;
    padding:11px 14px calc(11px + env(safe-area-inset-bottom))!important;
  }

  #modal[data-mode="subscription"]:has(.subscription-request-confirm) .modal-actions button{
    min-height:48px!important;
  }
}

/* =========================================================
   ANIQ TailorRecord V2.3.47 — Step 21J2 FIX8
   MOBILE ONLY — full-width main Plan & Subscription + Help & FAQ
   Desktop is intentionally untouched.
   The compact Plan-change confirmation card from FIX7 is also untouched.
   ========================================================= */
@media (max-width:760px){
  /* Restore the approved full-phone workspace for the two long settings
     screens. FIX7 centered a narrowed sheet; on real phones that created
     visible side gutters. These two main screens now use the full viewport. */
  #modal[data-mode="help-faq"],
  #modal[data-mode="subscription"]:not(:has(.subscription-request-confirm)){
    width:100vw!important;
    max-width:none!important;
    margin:0!important;
    left:0!important;
    right:0!important;
    border-radius:0!important;
    overflow-x:hidden!important;
  }

  #modal[data-mode="help-faq"] .modal-card,
  #modal[data-mode="subscription"]:not(:has(.subscription-request-confirm)) .modal-card{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    border-radius:0!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }

  /* Keep the existing comfortable INNER spacing; only the outer gutters
     are removed. Prevent any child from re-introducing horizontal overflow. */
  #modal[data-mode="help-faq"] .modal-head,
  #modal[data-mode="help-faq"] .modal-body,
  #modal[data-mode="help-faq"] .modal-actions,
  #modal[data-mode="subscription"]:not(:has(.subscription-request-confirm)) .modal-head,
  #modal[data-mode="subscription"]:not(:has(.subscription-request-confirm)) .modal-body,
  #modal[data-mode="subscription"]:not(:has(.subscription-request-confirm)) .modal-actions{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  #modal[data-mode="help-faq"] .help-faq-shell,
  #modal[data-mode="subscription"]:not(:has(.subscription-request-confirm)) .subscription-shell{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
}

/* =========================================================
   Step 21J2 FIX10 — mobile plan-action clarity + pending-card polish
   Desktop presentation intentionally remains unchanged.
   ========================================================= */
#modal[data-mode="subscription"] .subscription-plan-action-mobile{
  display:none;
}

@media(max-width:760px){
  /* Keep desktop button wording untouched; mobile gets explicit cycle + price. */
  #modal[data-mode="subscription"] .subscription-plan-action-desktop{
    display:none!important;
  }
  #modal[data-mode="subscription"] .subscription-plan-action-mobile{
    display:flex!important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    width:100%;
    min-width:0;
    line-height:1.22;
    text-align:center;
  }
  #modal[data-mode="subscription"] .subscription-plan-action-mobile>span{
    display:block;
    max-width:100%;
    font-size:.78rem;
    font-weight:750;
    white-space:normal;
  }
  #modal[data-mode="subscription"] .subscription-plan-action-mobile>small{
    display:block;
    max-width:100%;
    font-size:.66rem;
    line-height:1.25;
    font-weight:650;
    opacity:.82;
    white-space:normal;
  }
  #modal[data-mode="subscription"] .subscription-plan-actions .subscription-plan-action{
    min-height:52px!important;
    padding:9px 12px!important;
    overflow-wrap:anywhere;
  }

  /* Pending payment/change card: two clean columns, then full-width actions.
     This prevents the action wrapper from becoming an implicit third grid column. */
  #modal[data-mode="subscription"] .subscription-request-banner{
    grid-template-columns:38px minmax(0,1fr)!important;
    align-items:start!important;
    gap:10px 12px!important;
    padding:16px!important;
    margin:14px 0!important;
    border-radius:20px!important;
    min-height:0!important;
  }
  #modal[data-mode="subscription"] .subscription-request-icon{
    grid-column:1!important;
    grid-row:1!important;
    width:38px!important;
    height:38px!important;
    align-self:start!important;
    font-size:1rem!important;
  }
  #modal[data-mode="subscription"] .subscription-request-copy{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    gap:5px!important;
    padding:0!important;
  }
  #modal[data-mode="subscription"] .subscription-request-copy>span{
    font-size:.66rem!important;
    line-height:1.25!important;
    letter-spacing:.07em!important;
  }
  #modal[data-mode="subscription"] .subscription-request-copy>strong{
    display:block!important;
    max-width:100%!important;
    font-size:.93rem!important;
    line-height:1.3!important;
    overflow-wrap:anywhere;
  }
  #modal[data-mode="subscription"] .subscription-request-copy>p{
    max-width:100%!important;
    font-size:.76rem!important;
    line-height:1.5!important;
    overflow-wrap:anywhere;
  }
  #modal[data-mode="subscription"] .subscription-request-actions{
    grid-column:1/-1!important;
    grid-row:2!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    margin-top:4px!important;
  }
  #modal[data-mode="subscription"] .subscription-request-pay,
  #modal[data-mode="subscription"] .subscription-request-cancel{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    padding:10px 13px!important;
    border-radius:12px!important;
    font-size:.78rem!important;
    line-height:1.25!important;
    font-weight:750!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
  }
  #modal[data-mode="subscription"] .subscription-request-pay{
    border:1px solid var(--ff-plan-deep)!important;
    background:var(--ff-plan-deep)!important;
    color:var(--ff-plan-paper)!important;
    box-shadow:0 8px 18px rgba(28,43,43,.10);
  }
  #modal[data-mode="subscription"] .subscription-request-cancel{
    grid-column:auto!important;
    border-color:var(--ff-plan-stone)!important;
    background:var(--ff-plan-paper)!important;
    color:var(--ff-plan-ink)!important;
  }
}


/* =========================================================
   ANIQ TailorRecord V2.3.47 — Step 21J2 FIX13
   Refresh TailorRecord polish
   - mobile refresh sheet is compact instead of full-height
   - no stretched information cards / large empty gaps
   - desktop layout outside this refresh sheet is untouched
   ========================================================= */
@media(max-width:760px){
  #modal[data-mode="refresh-app"]{
    width:100vw!important;
    max-width:none!important;
    height:auto!important;
    max-height:100dvh!important;
    margin:auto 0!important;
    left:0!important;
    right:0!important;
    border-radius:0!important;
    overflow:hidden!important;
  }
  #modal[data-mode="refresh-app"] .modal-card{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(var(--ff-mobile-viewport,100dvh) - 12px)!important;
    grid-template-rows:auto auto auto!important;
    border-radius:0!important;
    overflow:hidden!important;
  }
  #modal[data-mode="refresh-app"] .modal-head{
    min-height:0!important;
    padding:16px 18px 13px!important;
  }
  #modal[data-mode="refresh-app"] .modal-body{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(var(--ff-mobile-viewport,100dvh) - 185px)!important;
    padding:14px 16px 15px!important;
    overflow:auto!important;
    background:#f7f2ed!important;
  }
  #modal[data-mode="refresh-app"] .settings-form{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-content:start!important;
    gap:10px!important;
    width:100%!important;
    min-height:0!important;
  }
  #modal[data-mode="refresh-app"] .settings-info-box.compact{
    display:grid!important;
    align-content:start!important;
    gap:6px!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:13px 14px!important;
    border-radius:15px!important;
  }
  #modal[data-mode="refresh-app"] .settings-info-box.compact strong{
    font-size:.82rem!important;
    line-height:1.3!important;
  }
  #modal[data-mode="refresh-app"] .settings-info-box.compact span{
    margin:0!important;
    font-size:.72rem!important;
    line-height:1.45!important;
  }
  #modal[data-mode="refresh-app"] .settings-help{
    margin:1px 2px 0!important;
    font-size:.69rem!important;
    line-height:1.42!important;
  }
  #modal[data-mode="refresh-app"] .modal-actions{
    position:static!important;
    grid-template-columns:minmax(96px,.38fr) minmax(0,1fr)!important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;
    box-shadow:0 -5px 16px rgba(54,37,46,.07)!important;
  }
  #modal[data-mode="refresh-app"] .modal-actions button{
    min-height:48px!important;
  }
}

/* =========================================================
   STEP 21K5C1 — MOBILE OWNER ALERT BADGE PLACEMENT FIX
   Keep the unread count inside the Alerts button on phone.
   Later compact-header rules set topbar buttons to position:static;
   an absolutely-positioned badge then anchors to the topbar instead.
   Use normal flex flow for the badge on mobile so it always stays
   attached to the Alerts control at every compact breakpoint.
   ========================================================= */
@media (max-width: 760px) {
  #appView .owner-alerts-trigger {
    position: relative !important;
    overflow: visible !important;
  }

  #appView .owner-alerts-count {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 0 0 2px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    transform: none !important;
  }
}


/* ==========================================================
   Step 21K6A — Owner Alert per-card delete control
   Primary Owner can permanently remove an alert they no longer need.
   ========================================================== */
.owner-alert-card{
  position:relative;
  padding-right:42px;
}

.owner-alert-delete-btn{
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  width:26px;
  min-width:26px;
  height:26px;
  min-height:26px!important;
  padding:0!important;
  display:grid;
  place-items:center;
  border:1px solid #E3D8D0;
  border-radius:999px;
  background:#F8F1ED;
  color:#8F5C50;
  font-size:18px!important;
  line-height:1!important;
  font-weight:700;
  box-shadow:none;
}

.owner-alert-delete-btn:hover{
  background:#F1E3DE;
  border-color:#D7C5BC;
}

.owner-alert-delete-btn:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}

@media (max-width:640px){
  .owner-alert-card{
    padding-right:40px;
  }

  .owner-alert-delete-btn{
    top:7px;
    right:7px;
    width:25px;
    min-width:25px;
    height:25px;
    min-height:25px!important;
  }
}


/* =========================================================
   ANIQ TailorRecord V2.3.47 Step 21L1A — Owner email-change
   confirmation guidance. Strong visual notice that BOTH the
   current and new email addresses must be confirmed.
   ========================================================= */
.my-account-email-confirm-alert{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:10px;
  align-items:start;
  margin:2px 0 0;
  padding:11px 12px;
  border:1px solid #D7A36B;
  border-left:4px solid #A35C2D;
  border-radius:12px;
  background:#FFF7EA;
  box-shadow:0 5px 14px rgba(104,65,34,.08);
}
.my-account-email-confirm-icon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#A35C2D;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:.95rem;
  font-weight:800;
  line-height:1;
}
.my-account-email-confirm-alert>div{min-width:0}
.my-account-email-confirm-alert strong{
  display:block;
  margin:0 0 4px;
  color:#7A351F;
  font-family:Georgia,"Times New Roman",serif;
  font-size:.84rem;
  font-weight:800;
  letter-spacing:.01em;
}
.my-account-email-confirm-alert span:not(.my-account-email-confirm-icon){
  display:block;
  color:#664A38;
  font-size:.70rem;
  font-weight:600;
  line-height:1.5;
}
.my-account-email-confirm-alert b{
  color:#7A351F;
  font-weight:800;
}
.my-account-email-record-note{
  margin:0!important;
  color:#786D66!important;
  line-height:1.4!important;
}
@media(max-width:760px){
  .my-account-email-confirm-alert{
    grid-template-columns:26px minmax(0,1fr);
    gap:8px;
    padding:10px;
    border-radius:11px;
  }
  .my-account-email-confirm-icon{width:24px;height:24px;font-size:.82rem}
  .my-account-email-confirm-alert strong{font-size:.77rem}
  .my-account-email-confirm-alert span:not(.my-account-email-confirm-icon){font-size:.65rem;line-height:1.45}
}


/* =========================================================
   Step 21N2D — ANIQ Platform Admin (read-only)
   ========================================================= */
.platform-admin-screen{max-width:1180px;margin-inline:auto}
.platform-admin-screen-head{align-items:flex-start}
.platform-admin-screen-head .muted{max-width:760px;line-height:1.5}
.platform-admin-readonly-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-4px 0 14px;padding:10px 12px;border:1px solid #d8d2c8;border-radius:13px;background:#f7f4ef;color:#544b45;font-size:.74rem}
.platform-admin-readonly-note strong{color:#403832}
.platform-admin-readonly-note span{color:#716760}
.platform-admin-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}
.platform-admin-metric{display:grid;gap:4px;padding:13px 14px;border:1px solid #dfd6cd;border-radius:15px;background:#fffdfb;box-shadow:0 5px 16px rgba(64,43,52,.035)}
.platform-admin-metric span{font-size:.67rem;color:#7b7068;font-weight:650}
.platform-admin-metric strong{font-size:1.3rem;color:#3d3530;font-family:Georgia,"Times New Roman",serif;font-weight:600}
.platform-admin-toolbar{display:grid;grid-template-columns:minmax(240px,1fr) 180px auto auto;gap:9px;align-items:center;margin-bottom:12px}
.platform-admin-toolbar input,.platform-admin-toolbar select{min-height:42px;background:#fffdfb;border-color:#ddd4cc}
.platform-admin-toolbar .ghost{min-height:42px;white-space:nowrap}
.platform-admin-result-count{justify-self:end;color:#746a63;font-size:.7rem;font-weight:650}
.platform-admin-content{display:grid;gap:12px}
.platform-admin-boutique-card{border:1px solid #ddd4cc;border-radius:18px;background:#fffdfb;box-shadow:0 7px 24px rgba(64,43,52,.04);overflow:hidden}
.platform-admin-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:15px 16px 12px;border-bottom:1px solid #eee7df}
.platform-admin-identity{display:grid;gap:3px;min-width:0}
.platform-admin-identity strong{font-family:Georgia,"Times New Roman",serif;font-size:1rem;font-weight:600;color:#3c332f}
.platform-admin-identity span{font-size:.69rem;color:#7a6f68;overflow-wrap:anywhere}
.platform-admin-badges{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.platform-admin-badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;font-size:.61rem;line-height:1.15;font-weight:780;text-transform:capitalize;border:1px solid #ddd4cc;background:#f5f1ed;color:#655b55}
.platform-admin-badge.ok{border-color:#bcd8c8;background:#edf6f1;color:#35644e}
.platform-admin-badge.warning{border-color:#ead1a4;background:#fbf3e5;color:#8c5c20}
.platform-admin-badge.attention{border-color:#e4b7b4;background:#faeceb;color:#913d3a}
.platform-admin-overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-bottom:1px solid #eee7df}
.platform-admin-overview-grid>div{display:grid;gap:3px;padding:12px 14px;border-right:1px solid #eee7df}
.platform-admin-overview-grid>div:last-child{border-right:0}
.platform-admin-overview-grid span,.platform-admin-detail-block>span{font-size:.62rem;color:#897d74;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.platform-admin-overview-grid strong{font-size:.83rem;color:#403732}
.platform-admin-overview-grid small{font-size:.63rem;color:#81756d;line-height:1.35}
.platform-admin-commercial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.platform-admin-detail-block{display:grid;gap:6px;padding:12px 14px;border-right:1px solid #eee7df;border-bottom:1px solid #eee7df;min-height:82px}
.platform-admin-detail-block:nth-child(2n){border-right:0}
.platform-admin-detail-block:nth-last-child(-n+2){border-bottom:0}
.platform-admin-detail-block>div{font-size:.68rem;line-height:1.45;color:#5f554f;overflow-wrap:anywhere}
.platform-admin-detail-block>div strong{color:#403732;font-size:.7rem}
.platform-admin-detail-block>div span{color:#83776f;font-size:.64rem}
.platform-admin-muted{color:#8a7f77!important}
.platform-admin-danger-text{color:#943d3a!important}
.platform-admin-card-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:9px 14px;background:#faf7f3;color:#857970;font-size:.61rem;border-top:1px solid #eee7df}
.platform-admin-empty{display:grid;gap:5px;place-items:center;text-align:center;padding:34px 18px;border:1px dashed #d9cfc6;border-radius:16px;background:#fffdfb;color:#776c65}
.platform-admin-empty strong{color:#463d38;font-size:.8rem}
.platform-admin-empty span{font-size:.69rem}
@media(max-width:900px){
  .platform-admin-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
  .platform-admin-toolbar{grid-template-columns:1fr 170px auto}.platform-admin-result-count{grid-column:1/-1;justify-self:start}
  .platform-admin-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .platform-admin-overview-grid>div:nth-child(2){border-right:0}.platform-admin-overview-grid>div:nth-child(-n+2){border-bottom:1px solid #eee7df}
}
@media(max-width:620px){
  .platform-admin-screen-head{display:grid;grid-template-columns:1fr}.platform-admin-screen-head .ghost{justify-self:start}
  .platform-admin-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.platform-admin-metric{padding:10px 11px}.platform-admin-metric strong{font-size:1.12rem}
  .platform-admin-toolbar{grid-template-columns:1fr}.platform-admin-toolbar select,.platform-admin-toolbar .ghost{width:100%}.platform-admin-result-count{grid-column:auto}
  .platform-admin-card-head{display:grid}.platform-admin-badges{justify-content:flex-start}
  .platform-admin-overview-grid{grid-template-columns:1fr}.platform-admin-overview-grid>div{border-right:0!important;border-bottom:1px solid #eee7df}.platform-admin-overview-grid>div:last-child{border-bottom:0}
  .platform-admin-commercial-grid{grid-template-columns:1fr}.platform-admin-detail-block{border-right:0!important;border-bottom:1px solid #eee7df!important}.platform-admin-detail-block:last-child{border-bottom:0!important}
  .platform-admin-card-foot{display:grid;gap:3px}
}

/* =========================================================
   V2.3.47 — STEP 21O2 OWNER PAYMENT MOBILE ON INVOICE
   Single source of truth: business_settings.phone.
   ========================================================= */
.invoice-payment-phone{
  display:grid;
  gap:3px;
  margin-top:10px;
  padding:9px 10px;
  border:1px solid #CFE1D6;
  border-radius:10px;
  background:#F4F9F5;
}
.invoice-payment-phone>span{
  color:#5E6A61;
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.07em;
}
.invoice-payment-phone>strong{
  color:#247447!important;
  font-size:1rem!important;
  font-weight:850!important;
  letter-spacing:.025em;
  user-select:text;
  -webkit-user-select:text;
}
.invoice-payment-phone>small{
  margin:0!important;
  color:#24211F!important;
  font-size:.65rem!important;
  line-height:1.4!important;
}
.invoice-payment-phone.compact{
  margin:2px 0 10px;
  padding:10px 11px;
}
.invoice-payment-phone.compact>strong{font-size:1.08rem!important}
.invoice-phone-only-payment{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 14px 14px;
  padding:12px;
  border:1px solid #CFE1D6;
  border-radius:12px;
  background:#F4F9F5;
}
.invoice-phone-only-payment>div{min-width:0;flex:1}
.invoice-phone-only-payment>strong{color:#3F3731;font-size:.86rem;white-space:nowrap}
.qr-print-note.phone_only .invoice-payment-phone{margin-top:7px}
@media(max-width:700px){
  .invoice-phone-only-payment{flex-direction:column;align-items:stretch;gap:8px}
  .invoice-phone-only-payment>strong{white-space:normal}
}
.invoice-upi-section>.invoice-payment-phone{grid-column:1/-1;margin-top:0}


/* =========================================================
   Step 21O4 — optional garment Style / Variant
   Scoped additive rules only. Existing Desktop / Tablet / Mobile
   garment pricing grids remain unchanged.
   ========================================================= */
.garment-variant-row{
  display:flex;
  align-items:flex-end;
  margin-top:10px;
}
.garment-variant-field{
  width:min(100%,520px);
  margin:0;
}
.garment-variant-field input{
  width:100%;
}
.garment-variant-help{
  display:block;
  margin-top:5px;
}
.garment-style-variant{
  display:block;
  margin-top:3px;
  font-size:.78rem;
  line-height:1.25;
  font-weight:650;
  color:#74685f;
}
.pricing-variant{
  display:block;
  margin-top:3px;
  font-size:.76rem;
  line-height:1.25;
  font-weight:600;
  color:#74685f;
}
@media (max-width:900px){
  .garment-variant-field{width:100%;max-width:none;}
}
@media (max-width:600px){
  .garment-variant-row{margin-top:9px;}
  .garment-style-variant,.pricing-variant{font-size:.75rem;}
}