:root{--bg:#f4f7fb;--panel:#fff;--text:#152230;--muted:#6f7d8b;--line:#dde5ec;--accent:#0f2f49;--soft:#edf3f7;--danger:#b42318;--shadow:0 18px 50px rgba(15,47,73,.08);--radius:18px}
[data-theme=dark]{--bg:#0b1220;--panel:#111b2b;--text:#edf4fb;--muted:#9eb0c2;--line:#24334a;--accent:#4ca5c5;--soft:#182437;--shadow:0 18px 50px rgba(0,0,0,.25)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}.hidden{display:none!important}
.auth-screen{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:linear-gradient(145deg,#081827,#174b68);z-index:100}.auth-card{width:min(560px,100%);background:var(--panel);border-radius:26px;padding:28px;box-shadow:0 35px 100px rgba(0,0,0,.35)}
.brand-row{display:flex;align-items:center;gap:12px}.brand-mark{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#1f6f8b,#6bc2dd);color:#fff;font-weight:900}.auth-card h1{margin:0}.auth-card p{margin:4px 0 0;color:var(--muted)}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--soft);padding:5px;border-radius:12px;margin:22px 0}.auth-tab{border:0;background:transparent;padding:11px;border-radius:9px;font-weight:800;color:var(--muted);cursor:pointer}.auth-tab.active{background:var(--panel);color:var(--text)}.auth-form{display:none;gap:14px}.auth-form.active{display:grid}
.auth-link{border:0;background:transparent;color:#19724b;font:inherit;font-weight:800;padding:4px;cursor:pointer;text-align:center}.auth-link:hover{text-decoration:underline}.auth-message{margin-top:16px;padding:12px 14px;border-radius:12px;background:#eaf6ef;color:#1d613f;font-weight:700;line-height:1.45}.auth-message.error{background:#fff0ef;color:#9b2c24}.auth-form h2{margin:0}.auth-form p{margin:5px 0 0}
.email-confirmation-notice{display:grid;gap:8px;margin-top:16px;padding:16px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.email-confirmation-notice.hidden{display:none}
.email-confirmation-notice strong{font-size:14px}
.email-confirmation-notice p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.email-confirmation-notice .email-confirmation-address{font-size:11px}
.email-confirmation-address span{color:var(--text);font-weight:800}
.app{min-height:100vh;display:grid;grid-template-columns:250px 1fr}.sidebar{background:#0d2338;color:#fff;padding:20px 16px;display:flex;flex-direction:column;min-height:100vh;position:sticky;top:0;height:100vh}.sidebar-top{display:flex;justify-content:space-between;gap:10px}.brand-copy strong,.brand-copy span{display:block}.brand-copy span{font-size:12px;color:#9fb4c8}.sidebar nav{display:grid;gap:7px;margin-top:26px}.nav{border:0;background:transparent;color:#c7d6e4;border-radius:11px;padding:12px 13px;text-align:left;display:flex;gap:12px;align-items:center;font-weight:750;cursor:pointer;white-space:nowrap}.nav:hover,.nav.active{background:#173d5e;color:#fff}.nav.danger{color:#ffb4ad}.sidebar-bottom{margin-top:auto;border-top:1px solid #29445e;padding-top:14px}.icon-btn{width:36px;height:36px;border:1px solid var(--line);background:var(--soft);color:var(--text);border-radius:10px;cursor:pointer}.sidebar .icon-btn{border-color:#31516e;background:#173d5e;color:#fff}
.app.collapsed{grid-template-columns:82px 1fr}.app.collapsed .brand-copy,.app.collapsed .nav b{display:none}.app.collapsed .sidebar{padding-inline:12px}.app.collapsed .nav{justify-content:center}.app.collapsed .sidebar-top{display:grid;justify-content:center}.app.collapsed #collapseBtn{transform:rotate(180deg);margin:auto}
.main{min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 30px 18px}.topbar h1{margin:0}.topbar p{margin:5px 0 0;color:var(--muted)}.top-actions,.row{display:flex;gap:10px;align-items:center}.wrap{flex-wrap:wrap}.save-state{font-size:12px;color:var(--muted)}.view{display:none;padding:0 30px 42px}.view.active{display:block}
.card,.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.card h2,.card h3{margin-top:0}.card p{color:var(--muted)}.card-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;margin-bottom:18px}
.grid{display:grid;gap:14px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.content-grid{display:grid;gap:22px}.profile-grid{grid-template-columns:290px 1fr}.two-col{grid-template-columns:1fr 1fr}.calc-grid{grid-template-columns:minmax(0,1.3fr) minmax(340px,.7fr)}.stack{display:grid;gap:22px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stat-card span{display:block;color:var(--muted);font-size:13px}.stat-card strong{display:block;font-size:28px;margin-top:6px}
label{display:grid;gap:6px;font-size:13px;font-weight:750}input,select,textarea{width:100%;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:11px;padding:11px 12px}textarea{resize:vertical}.btn{border:0;border-radius:11px;padding:11px 15px;font-weight:800;cursor:pointer}.btn.primary{background:var(--accent);color:#fff}.btn.secondary{background:var(--soft);color:var(--text)}.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}.btn.small{padding:7px 10px;font-size:12px}.wide{width:100%}.file-label{position:relative;overflow:hidden;display:inline-flex}.file-label input{position:absolute;inset:0;opacity:0}.section-gap{margin-top:18px}details{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}summary{cursor:pointer;font-weight:850}.details-body{margin-top:15px}
.profile-preview{background:linear-gradient(145deg,#0f2f49,#174f70);color:#fff;position:sticky;top:18px;align-self:start}.profile-preview p{color:#cbe0eb}.logo-frame{min-height:90px;display:flex;align-items:center}.logo-frame img{display:none;max-width:190px;max-height:85px;object-fit:contain;background:#fff;border-radius:12px;padding:8px}.avatar{width:78px;height:78px;border-radius:20px;display:grid;place-items:center;background:rgba(255,255,255,.14);font-size:24px;font-weight:900}.preview-lines{display:grid;gap:8px;color:#d8e7ef;font-size:13px;margin-top:20px}
.price-card{background:linear-gradient(145deg,#0f2f49,#174f70);color:#fff}.price-card>span,.price-card small{display:block;color:#cbe0eb}.price-card>strong{display:block;font-size:44px;margin:4px 0}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.metric-grid div{border-top:1px solid rgba(255,255,255,.14);padding-top:10px}.metric-grid span,.metric-grid b{display:block}.metrics div{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.data-list{display:grid;gap:10px}.data-row{display:grid;grid-template-columns:42px minmax(170px,1.3fr) repeat(3,minmax(110px,.7fr)) auto;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}.data-row.dragging{opacity:.45}.drag-handle{cursor:grab;font-size:22px;color:var(--muted);user-select:none}.row-actions{display:flex;gap:7px;flex-wrap:wrap}.data-label{font-size:11px;text-transform:uppercase;color:var(--muted);display:none}
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(4,13,22,.58);padding:18px;z-index:50}.modal.open{display:grid}.modal-card{width:min(760px,100%);max-height:90vh;overflow:auto;background:var(--panel);border-radius:20px;padding:22px}.toast-host{position:fixed;top:18px;right:18px;z-index:200;display:grid;gap:10px}.toast{background:#14293d;color:#fff;padding:12px 15px;border-radius:12px}
@media(max-width:1100px){.app{grid-template-columns:84px 1fr}.brand-copy,.nav b{display:none}.sidebar{padding-inline:12px}.nav{justify-content:center}.sidebar-top{display:grid;justify-content:center}.calc-grid,.profile-grid{grid-template-columns:1fr}.profile-preview{position:static}.stats-grid{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.app{display:block}.sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;min-height:0;z-index:30;padding:8px}.sidebar-top,.sidebar-bottom{display:none}.sidebar nav{margin:0;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;overflow-x:auto}.nav{display:grid;justify-items:center;gap:2px;padding:8px 5px}.nav b{display:block;font-size:10px}.main{padding-bottom:82px}.topbar{padding:18px 16px 12px;align-items:flex-start;flex-direction:column}.top-actions{width:100%;flex-wrap:wrap}.view{padding:0 12px 28px}.grid.two,.grid.three,.two-col,.stats-grid{grid-template-columns:1fr}.data-row{grid-template-columns:34px 1fr}.data-cell{grid-column:2}.data-label{display:block}.row-actions{grid-column:2}.metric-grid{grid-template-columns:1fr}.card{padding:17px}.toast-host{left:12px;right:12px;top:12px}}

/* Dashboard customization */
.dashboard-toolbar{display:flex;justify-content:space-between;gap:18px;align-items:center}
.dashboard-toolbar h2{margin-bottom:4px}
.dashboard-toolbar p{margin:0}
.dashboard-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:dense;gap:16px}
.dashboard-widget{position:relative;min-width:0;transition:transform .18s ease,opacity .18s ease}
.dashboard-widget[data-size="small"]{grid-column:span 3;min-height:145px}
.dashboard-widget[data-size="medium"]{grid-column:span 4;min-height:180px}
.dashboard-widget[data-size="large"]{grid-column:span 6;min-height:240px}
.dashboard-widget[data-size="wide"]{grid-column:span 12;min-height:220px}


.dashboard-widget.dragging{opacity:.45;transform:scale(.99)}
.dashboard-widget .widget-content{height:100%}
.dashboard-widget.stat-card .widget-content{display:flex;flex-direction:column;justify-content:center}
.dashboard-widget.stat-card strong{font-size:clamp(28px,4vw,44px)}
.dashboard-widget[data-size="small"] .widget-content h2{font-size:17px}
@media(max-width:1100px){
  .dashboard-widget[data-size="small"]{grid-column:span 4}
  .dashboard-widget[data-size="medium"]{grid-column:span 6}
  .dashboard-widget[data-size="large"]{grid-column:span 6}
}
@media(max-width:760px){
  .dashboard-toolbar{align-items:flex-start;flex-direction:column}
  .dashboard-grid{grid-template-columns:1fr}
  .dashboard-widget[data-size]{grid-column:1!important;min-height:auto}
  }

/* Hover-to-move and live resize dashboard widgets */
.dashboard-widget{user-select:none}
.dashboard-widget .widget-handle{
  display:grid;
  position:absolute;
  left:10px;
  top:10px;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:9px;
  background:var(--soft);
  color:var(--muted);
  cursor:move;
  z-index:3;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease,transform .15s ease;
}
.dashboard-widget .widget-handle::before{
  content:"↕";
  position:absolute;
  transform:rotate(45deg);
  font-size:18px;
  line-height:1;
}
.dashboard-widget:hover .widget-handle,
.dashboard-widget:focus-within .widget-handle{
  opacity:1;
  pointer-events:auto;
}
.dashboard-widget:hover .widget-content{padding-top:38px}
.dashboard-widget .widget-resize-handle{
  position:absolute;
  right:6px;
  bottom:6px;
  width:20px;
  height:20px;
  opacity:0;
  pointer-events:none;
  cursor:nwse-resize;
  z-index:3;
  border-right:3px solid var(--muted);
  border-bottom:3px solid var(--muted);
  border-radius:0 0 5px 0;
  transition:opacity .15s ease;
}
.dashboard-widget:hover .widget-resize-handle,
.dashboard-widget:focus-within .widget-resize-handle{
  opacity:.8;
  pointer-events:auto;
}
.dashboard-widget.resizing{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.dashboard-widget.dragging{cursor:grabbing}
@media(max-width:760px){
  .dashboard-widget .widget-handle,
  .dashboard-widget .widget-resize-handle{
    opacity:1;
    pointer-events:auto;
  }
  .dashboard-widget:hover .widget-content{padding-top:38px}
}

:root{--user-accent:#0f2f49}.topbar,.price-card{background:linear-gradient(145deg,var(--user-accent),color-mix(in srgb,var(--user-accent) 70%, white));}.btn.primary{background:var(--user-accent)}.brand-mark{background:var(--user-accent)}
.color-setting{display:grid;gap:10px}
.setting-label{font-size:13px;font-weight:750}
.color-swatches{display:flex;gap:9px;flex-wrap:wrap}
.color-swatch{width:34px;height:34px;border-radius:10px;border:3px solid transparent;background:var(--swatch);cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.color-swatch.active{border-color:var(--panel);box-shadow:0 0 0 3px var(--text)}
.custom-color-label{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.custom-color-label input[type=color]{width:46px;height:34px;padding:2px;border-radius:8px}
#accentColorValue{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.sidebar{background:var(--user-accent)!important}
.sidebar .nav:hover,.sidebar .nav.active{background:color-mix(in srgb,var(--user-accent) 72%, white)!important}
.sidebar .icon-btn{background:color-mix(in srgb,var(--user-accent) 82%, black)!important}

:root{
  --user-background:#0f2f49;
  --user-menu:#0f2f49;
  --user-text:#152230;
}
body{background:var(--bg)!important;color:var(--user-text)!important}
.main,.view{color:var(--user-text)}
.sidebar{background:var(--user-menu)!important}
.sidebar .nav:hover,.sidebar .nav.active{background:color-mix(in srgb,var(--user-menu) 72%, white)!important}
.sidebar .icon-btn{background:color-mix(in srgb,var(--user-menu) 82%, black)!important}
.topbar h1,.topbar p,.card,.stat-card,.dashboard-toolbar{color:var(--user-text)}
.theme-color-group{display:grid;gap:18px}
.color-setting{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
/* Preserve input field colors regardless of theme color selections */
input,select,textarea{
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

/* Apply the selected background color to the application, not the browser canvas */
.app{background:var(--user-background)!important}
.main{background:var(--user-background)!important}
.view{background:transparent!important}
.topbar{background:transparent!important}
.sidebar{background:var(--user-menu)!important}

/* Cards and input fields keep their own surfaces */
.card,.stat-card,.dashboard-toolbar,.modal-card,.auth-card{
  background:var(--panel)!important;
}
input,select,textarea{
  background:var(--panel)!important;
  color:var(--text)!important;
}

:root{--user-app-color:#0f2f49}
.app,.main{background:var(--user-app-color)!important}
.sidebar{background:var(--user-app-color)!important}
.sidebar .nav:hover,.sidebar .nav.active{
  background:color-mix(in srgb,var(--user-app-color) 72%, white)!important;
}
.sidebar .icon-btn{
  background:color-mix(in srgb,var(--user-app-color) 82%, black)!important;
}

.custom-color-label{display:none!important;}

.quotation-list{display:grid;gap:10px}
.quotation-row{display:grid;grid-template-columns:42px minmax(180px,1.4fr) minmax(120px,.8fr) minmax(90px,.55fr) minmax(110px,.7fr) auto;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}
.quotation-row.dragging{opacity:.45}.quotation-main strong{display:block}.quotation-main small{display:block;color:var(--muted);margin-top:3px}.quotation-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:760px){.quotation-row{grid-template-columns:34px 1fr}.quotation-row>div:not(.drag-handle){grid-column:2}.quotation-actions{justify-content:flex-start}}

.advanced-color-controls{display:grid;gap:12px;margin-top:12px}
.color-mode-panel{padding:12px;border:1px dashed var(--line);border-radius:10px}
.gradient-preview{height:54px;border-radius:10px;border:1px solid var(--line);margin-top:10px}

:root{--user-app-background:#0f2f49}
.app,.main,.sidebar{background:var(--user-app-background)!important}

.gradient-total{display:flex;align-items:end;padding:0 0 8px;font-size:13px;color:var(--muted)}
input[type="range"]{padding:0!important;accent-color:var(--user-app-color)}

/* Modern layout refresh */
:root{
  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:22px;
  --surface-glass:rgba(255,255,255,.92);
}
body{letter-spacing:-.01em}
.topbar{padding:28px 32px 20px}
.topbar h1{font-size:clamp(28px,3vw,38px);letter-spacing:-.035em}
.topbar p{font-size:14px}
.view{padding:0 32px 46px}
.card,.stat-card{border-radius:var(--radius-lg);padding:24px}
.card-head{margin-bottom:22px}
.card-head h2{font-size:20px;letter-spacing:-.02em}
.card-head p{margin:5px 0 0;font-size:13px}
.grid{gap:16px}
label{font-size:12px;text-transform:none;letter-spacing:0}
input,select,textarea{min-height:46px;border-radius:12px;padding:12px 14px;transition:border-color .18s,box-shadow .18s,transform .18s}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(29,111,139,.12)}
.btn{min-height:42px;border-radius:12px;padding:11px 16px;transition:transform .16s,box-shadow .16s,opacity .16s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{box-shadow:0 8px 18px rgba(15,47,73,.18)}
.sidebar{padding:22px 14px}
.nav{border-radius:13px;padding:13px 14px}
.nav span{font-size:18px}
.sidebar-bottom{padding-top:18px}
.price-card{border:none}
.metric-grid{gap:12px}
.metric-grid div{padding:12px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}
.metrics div{padding:12px 0}
.details-body{padding-top:4px}
details{padding-top:18px}
summary{font-size:14px}
.profile-preview{border:none}
.logo-frame{min-height:100px}
.data-row,.quotation-row{border-radius:16px;padding:14px 16px}
.data-row:hover,.quotation-row:hover{box-shadow:0 10px 24px rgba(15,47,73,.07);transform:translateY(-1px)}
.modal-card{border-radius:24px;padding:26px}
.auth-card{border-radius:28px;padding:30px}
.auth-tabs{border-radius:14px}
.auth-tab{border-radius:10px}
.toast{border-radius:14px;padding:13px 16px}
.settings-layout{display:grid;gap:20px}
.settings-card{overflow:hidden}
.settings-section{display:grid;gap:18px}
.settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.settings-actions-card{display:flex;align-items:center;justify-content:space-between;gap:20px}
.theme-color-group{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.color-setting{border-radius:16px;padding:18px}
.color-swatches{gap:10px}
.color-swatch{width:38px;height:38px;border-radius:12px;transition:transform .15s,box-shadow .15s}
.color-swatch:hover{transform:scale(1.05)}
.color-mode-panel{border-radius:12px;background:var(--soft);border-style:solid}
.gradient-preview{height:64px;border-radius:14px}
.range-value{font-size:12px;color:var(--muted);font-weight:700}
.gradient-total{align-self:end;min-height:46px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.dashboard-toolbar{border-radius:20px}
.dashboard-grid{gap:18px}
.dashboard-widget{border-radius:20px}
.quotation-list,.data-list{gap:12px}
@media(max-width:1100px){
  .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .theme-color-group{grid-template-columns:1fr}
  .view{padding-inline:22px}
  .topbar{padding-inline:22px}
}
@media(max-width:760px){
  .topbar{padding:18px 14px 12px}
  .view{padding:0 12px 30px}
  .card,.stat-card{padding:18px;border-radius:18px}
  .settings-grid{grid-template-columns:1fr}
  .settings-actions-card{align-items:flex-start;flex-direction:column}
  .settings-actions-card .row{width:100%}
  .settings-actions-card .btn{flex:1}
  .theme-color-group{grid-template-columns:1fr}
}
.input-with-action{display:grid;grid-template-columns:1fr auto;gap:8px}.opportunity-number{font-family:ui-monospace,monospace;font-weight:700}.status-pill{display:inline-flex;padding:5px 9px;border-radius:999px;background:var(--soft);font-size:11px;font-weight:800}.status-pill.won{background:#dcfce7;color:#166534}.status-pill.lost{background:#fee2e2;color:#991b1b}.status-pill.open{background:#dbeafe;color:#1d4ed8}.status-pill.delayed{background:#fef3c7;color:#92400e}.status-pill.none{background:var(--soft);color:var(--muted)}
/* Solid colors only */
.advanced-color-controls,
#gradientColorControls,
#solidColorControls,
.gradient-preview,
.gradient-total{
  display:none!important;
}
.custom-color-card{
  display:grid;
  grid-template-columns:48px 1fr auto auto;
  gap:12px;
  align-items:center;
  margin-top:14px;
  padding:13px;
  border:1px dashed var(--line);
  border-radius:14px;
  background:var(--soft);
}
.custom-color-preview{
  width:48px;
  height:48px;
  border-radius:13px;
  background:var(--user-app-color);
}
.hex-value{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}

.clickable-color-card{
  position:relative;
  grid-template-columns:1fr auto;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.clickable-color-card:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(15,47,73,.08);
  border-color:var(--accent);
}
.clickable-color-card::after{
  content:"Choose";
  padding:7px 10px;
  border-radius:9px;
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--text);
  font-size:11px;
  font-weight:800;
}
.clickable-color-card input[type="color"]{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  cursor:pointer!important;
  padding:0!important;
  border:0!important;
}
.clickable-color-card .hex-value{
  margin-right:70px;
}
.custom-color-preview{display:none!important}
@media(max-width:760px){
  .clickable-color-card{
    grid-template-columns:1fr auto;
  }
  .clickable-color-card .hex-value{
    grid-column:auto;
    margin-right:60px;
  }
}

.color-setting[data-color-setting="app"],
.color-setting[data-color-setting="text"]{
  display:grid;
  gap:12px;
}
.color-setting[data-color-setting="app"] .color-swatches,
.color-setting[data-color-setting="text"] .color-swatches{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
}
.color-setting[data-color-setting="app"] .clickable-color-card,
.color-setting[data-color-setting="text"] .clickable-color-card{
  min-height:72px;
}


/* Equal width for both color selector sections */
.color-setting[data-color-setting="app"],
.color-setting[data-color-setting="text"]{
  width:100%;
}

.color-setting[data-color-setting="app"] .color-swatches,
.color-setting[data-color-setting="text"] .color-swatches{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  width:100%;
}

.color-setting[data-color-setting="app"] .color-swatch,
.color-setting[data-color-setting="text"] .color-swatch{
  width:100%;
  aspect-ratio:1;
  max-width:none;
  height:auto;
}

.color-setting[data-color-setting="app"] .clickable-color-card,
.color-setting[data-color-setting="text"] .clickable-color-card{
  width:100%;
}

@media (max-width:900px){
  .color-setting[data-color-setting="app"] .color-swatches,
  .color-setting[data-color-setting="text"] .color-swatches{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:600px){
  .color-setting[data-color-setting="app"] .color-swatches,
  .color-setting[data-color-setting="text"] .color-swatches{
    grid-template-columns:1fr;
  }
}

/* Compact Settings redesign */
.settings-shell{display:grid;gap:16px;padding-bottom:96px}
.settings-panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.settings-panel-head{
  padding:18px 20px 14px;
  border-bottom:1px solid var(--line);
}
.settings-panel-head h2{margin:0;font-size:18px;letter-spacing:-.02em}
.settings-panel-head p{margin:4px 0 0;color:var(--muted);font-size:12px}
.settings-row{
  display:grid;
  grid-template-columns:minmax(180px,.55fr) minmax(0,1.45fr);
  gap:22px;
  align-items:center;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
}
.settings-row:last-child{border-bottom:0}
.settings-label strong,.settings-label small{display:block}
.settings-label strong{font-size:13px}
.settings-label small{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.35}
.settings-control{min-width:0}
.compact-control{max-width:320px}
.settings-grid.compact-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:18px 20px 20px;
}
.discount-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.settings-grid.compact-grid label{font-size:11px}
.settings-grid.compact-grid input,
.settings-grid.compact-grid select,
.compact-control select{
  min-height:40px;
  padding:9px 11px;
  border-radius:10px;
}
.compact-swatches{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.compact-swatch{
  width:28px!important;
  height:28px!important;
  min-width:28px;
  border-radius:8px;
  border:2px solid transparent;
  background:var(--swatch);
  cursor:pointer;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.compact-swatch:hover{transform:scale(1.08)}
.compact-swatch.active{
  border-color:var(--panel);
  box-shadow:0 0 0 3px var(--text);
}
.compact-custom-color{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--soft);
  cursor:pointer;
  font-size:11px;
  font-weight:800;
}
.compact-custom-color:hover{border-color:var(--accent)}
.compact-custom-color input[type="color"]{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  opacity:0!important;
  cursor:pointer!important;
  padding:0!important;
  border:0!important;
}
.compact-custom-color .hex-value{
  font-size:10px;
  font-weight:700;
  color:var(--muted);
}
.settings-action-bar{
  position:sticky;
  bottom:12px;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:18px;
  padding:14px 16px;
  background:color-mix(in srgb,var(--panel) 92%, transparent);
  backdrop-filter:blur(16px);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 14px 36px rgba(15,47,73,.14);
}
.settings-action-bar strong,.settings-action-bar small{display:block}
.settings-action-bar small{margin-top:2px;color:var(--muted);font-size:11px}
@media(max-width:1100px){
  .settings-grid.compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .discount-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:760px){
  .settings-row{grid-template-columns:1fr;gap:10px;padding:14px 16px}
  .settings-grid.compact-grid,.discount-grid{grid-template-columns:1fr!important;padding:14px 16px 16px}
  .settings-action-bar{align-items:flex-start;flex-direction:column;bottom:8px}
  .settings-action-bar .row{width:100%}
  .settings-action-bar .btn{flex:1}
}

/* Forecast */
.forecast-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.forecast-layout{display:grid;grid-template-columns:minmax(320px,.7fr) minmax(0,1.3fr);gap:20px;align-items:start}
.forecast-filter-head{align-items:end}
.forecast-sort{min-width:240px}
.forecast-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.filter-chip{position:relative;display:inline-flex;cursor:pointer}
.filter-chip input{position:absolute;opacity:0;pointer-events:none}
.filter-chip span{display:inline-flex;align-items:center;min-height:34px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:12px;font-weight:800;color:var(--muted)}
.filter-chip input:checked+span{background:var(--soft);border-color:var(--accent);color:var(--text);box-shadow:0 0 0 2px rgba(29,111,139,.08)}
.forecast-list{display:grid;gap:10px}
.forecast-row{display:grid;grid-template-columns:minmax(190px,1.35fr) minmax(90px,.55fr) minmax(110px,.7fr) minmax(130px,.9fr) minmax(100px,.65fr) auto;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.forecast-row:hover{box-shadow:0 10px 24px rgba(15,47,73,.07)}
.forecast-main strong,.forecast-main small,.forecast-row small{display:block}
.forecast-main small,.forecast-row small{color:var(--muted);margin-top:3px;font-size:11px}
.forecast-actions{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap}
.empty-state{display:grid;gap:5px;text-align:center;padding:34px;border:1px dashed var(--line);border-radius:14px;color:var(--muted)}
.stage-chart{display:grid;gap:14px}
.stage-chart.large{gap:18px}
.stage-chart-row{display:grid;grid-template-columns:150px minmax(100px,1fr) 100px;gap:12px;align-items:center}
.stage-chart-label{display:grid;grid-template-columns:10px 1fr;column-gap:8px;align-items:center}
.stage-chart-label strong{font-size:12px}
.stage-chart-label small{grid-column:2;color:var(--muted);font-size:10px}
.status-dot{width:9px;height:9px;border-radius:50%;background:#94a3b8}
.status-dot.open,.stage-chart-bar.open{background:#3b82f6}
.status-dot.won,.stage-chart-bar.won{background:#22c55e}
.status-dot.lost,.stage-chart-bar.lost{background:#ef4444}
.status-dot.delayed,.stage-chart-bar.delayed{background:#f59e0b}
.status-dot.none,.stage-chart-bar.none{background:#94a3b8}
.stage-chart-bar-track{height:12px;background:var(--soft);border-radius:999px;overflow:hidden}
.stage-chart-bar{height:100%;border-radius:999px;min-width:0;transition:width .25s ease}
.stage-chart-value{text-align:right;font-size:12px;font-weight:800}
.dashboard-widget[data-widget="opportunityStages"]{grid-column:span 12}
@media(max-width:1100px){
  .forecast-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .forecast-layout{grid-template-columns:1fr}
  .forecast-row{grid-template-columns:1fr 1fr 1fr}
  .forecast-main,.forecast-actions{grid-column:1/-1}
  .forecast-actions{justify-content:flex-start}
}
@media(max-width:760px){
  .forecast-summary-grid{grid-template-columns:1fr}
  .forecast-filter-head{align-items:flex-start;flex-direction:column}
  .forecast-sort{min-width:0;width:100%}
  .forecast-row{grid-template-columns:1fr}
  .forecast-main,.forecast-actions{grid-column:auto}
  .stage-chart-row{grid-template-columns:120px 1fr}
  .stage-chart-value{grid-column:2;text-align:left}
}

/* Persistent Nivo4 branding */
.nivo4-logo{
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  min-width:54px;
  padding:7px 9px;
  border-radius:12px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  line-height:1;
  letter-spacing:-.06em;
}
.auth-card .nivo4-logo{
  background:var(--user-app-color,#0f2f49);
  border-color:transparent;
}
.nivo4-word{
  font-size:15px;
  font-weight:900;
  color:#fff;
}
.nivo4-four{
  margin-left:2px;
  font-size:22px;
  font-weight:950;
  color:#68c4df;
}
.nivo4-logo.large{
  min-width:88px;
  padding:12px 14px;
  border-radius:16px;
  background:var(--user-app-color,#0f2f49);
}
.nivo4-logo.large .nivo4-word{font-size:22px}
.nivo4-logo.large .nivo4-four{font-size:31px}
.powered-by{
  display:flex;
  align-items:baseline;
  gap:5px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  color:var(--muted);
  font-size:10px;
  white-space:nowrap;
}
.powered-by strong{
  color:var(--text);
  font-size:12px;
}
.app-footer{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:0 32px 24px;
  color:rgba(255,255,255,.72);
  font-size:11px;
}
.about-card{max-width:640px}
.about-brand{display:flex;align-items:center;gap:14px}
.about-brand h2{margin:0}
.about-brand p{margin:4px 0 0}
.about-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
.about-grid div{
  padding:14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--soft);
}
.about-grid span,.about-grid strong{display:block}
.about-grid span{color:var(--muted);font-size:11px}
.about-grid strong{margin-top:4px;font-size:13px}
.about-copy{
  margin:18px 0 0;
  padding-top:16px;
  border-top:1px solid var(--line);
  line-height:1.55;
}
.sidebar .nivo4-logo{
  background:rgba(255,255,255,.08);
}
.app.collapsed .sidebar .nivo4-logo{
  min-width:48px;
  padding-inline:6px;
}
@media(max-width:760px){
  .powered-by{display:none}
  .app-footer{padding:0 16px 96px;flex-direction:column}
  .about-grid{grid-template-columns:1fr}
}

/* Official uploaded Nivo4 logo */
.nivo4-logo-image{
  display:block;
  width:72px;
  height:72px;
  object-fit:contain;
  border-radius:50%;
  background:#fff;
  flex:0 0 auto;
}
.auth-card .nivo4-logo-image{
  width:92px;
  height:92px;
}
.sidebar .nivo4-logo-image{
  width:58px;
  height:58px;
}
.about-brand .nivo4-logo-image{
  width:88px;
  height:88px;
}
.app.collapsed .sidebar .nivo4-logo-image{
  width:50px;
  height:50px;
}
@media(max-width:760px){
  .sidebar .nivo4-logo-image{
    width:34px;
    height:34px;
  }
}

/* Forecast redesign */
.forecast-hero{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-end;
  padding:4px 2px 2px;
}
.forecast-hero h2{margin:4px 0 6px;font-size:28px;letter-spacing:-.035em}
.forecast-hero p{margin:0;color:var(--muted)}
.eyebrow{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:900;color:var(--muted)}
.forecast-summary-grid{margin-top:18px}
.forecast-kpi{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:116px;
  padding:18px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.forecast-kpi-icon{
  width:48px;height:48px;min-width:48px;
  display:grid;place-items:center;border-radius:15px;
  font-size:21px;font-weight:900;
}
.forecast-kpi-icon.open{background:#dbeafe;color:#2563eb}
.forecast-kpi-icon.won{background:#dcfce7;color:#16a34a}
.forecast-kpi-icon.total{background:#ede9fe;color:#7c3aed}
.forecast-kpi-icon.average{background:#fef3c7;color:#d97706}
.forecast-kpi span,.forecast-kpi strong,.forecast-kpi small{display:block}
.forecast-kpi span{font-size:11px;color:var(--muted);font-weight:800}
.forecast-kpi strong{margin-top:4px;font-size:24px;letter-spacing:-.03em}
.forecast-kpi small{margin-top:3px;color:var(--muted);font-size:10px}
.forecast-top-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:20px}
.forecast-chart-card,.forecast-actions-card{min-height:360px}
.modern-stage-chart .stage-chart-row{grid-template-columns:150px 1fr 110px;padding:7px 0}
.modern-stage-chart .stage-chart-bar-track{height:14px}
.upcoming-actions{display:grid;gap:8px}
.upcoming-action{
  width:100%;display:grid;grid-template-columns:78px 1fr auto;
  gap:12px;align-items:center;padding:12px;border:1px solid var(--line);
  border-radius:13px;background:var(--panel);color:var(--text);text-align:left;cursor:pointer;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.upcoming-action:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,47,73,.08);border-color:var(--accent)}
.upcoming-date{font-size:10px;font-weight:900;color:var(--muted)}
.upcoming-copy strong,.upcoming-copy small{display:block}
.upcoming-copy strong{font-size:12px}
.upcoming-copy small{margin-top:3px;color:var(--muted);font-size:10px}
.upcoming-arrow{font-size:22px;color:var(--muted)}
.forecast-table-card{overflow:hidden}
.forecast-toolbar{
  display:flex;justify-content:space-between;gap:22px;align-items:end;
  padding-bottom:18px;border-bottom:1px solid var(--line);
}
.forecast-toolbar h2{margin:3px 0 4px}
.forecast-toolbar p{margin:0;color:var(--muted)}
.forecast-toolbar-controls{display:flex;gap:12px;align-items:end}
.forecast-search{min-width:260px}
.forecast-sort{min-width:230px}
.forecast-toolbar-controls label span{display:block;margin-bottom:6px;font-size:10px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.forecast-filter-bar{
  display:flex;justify-content:space-between;gap:14px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.result-count{font-size:11px;color:var(--muted);font-weight:800}
.chip-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px}
.chip-dot.open{background:#3b82f6}.chip-dot.won{background:#22c55e}.chip-dot.lost{background:#ef4444}.chip-dot.delayed{background:#f59e0b}.chip-dot.none{background:#94a3b8}
.forecast-table-head{
  display:grid;
  grid-template-columns:minmax(190px,1.35fr) minmax(90px,.55fr) minmax(110px,.7fr) minmax(130px,.9fr) minmax(100px,.65fr) auto;
  gap:12px;padding:12px 14px 8px;
  color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;
}
.forecast-list{gap:0}
.forecast-row{
  border:0;border-top:1px solid var(--line);border-radius:0;padding:15px 14px;
  transition:background .15s;
}
.forecast-row:hover{box-shadow:none;transform:none;background:var(--soft)}
.forecast-title-line{display:flex;gap:10px;align-items:center;justify-content:space-between}
.forecast-score-date{font-size:9px;color:var(--muted);white-space:nowrap}
.forecast-next-action strong{display:block;font-size:12px}
.empty-state.compact{padding:24px}
@media(max-width:1100px){
  .forecast-top-grid{grid-template-columns:1fr}
  .forecast-toolbar{align-items:flex-start;flex-direction:column}
  .forecast-toolbar-controls{width:100%}
  .forecast-search,.forecast-sort{min-width:0;flex:1}
  .forecast-table-head{display:none}
  .forecast-row{border:1px solid var(--line);border-radius:14px;margin-top:10px}
}
@media(max-width:760px){
  .forecast-hero{align-items:flex-start;flex-direction:column}
  .forecast-hero-actions,.forecast-hero-actions .btn{width:100%}
  .forecast-toolbar-controls{flex-direction:column}
  .forecast-search,.forecast-sort{width:100%}
  .forecast-filter-bar{align-items:flex-start;flex-direction:column}
  .forecast-kpi{min-height:96px}
  .modern-stage-chart .stage-chart-row{grid-template-columns:110px 1fr}
}

/* About button follows the selected app/menu color */
#aboutBtn{
  background:var(--user-app-color,#0f2f49)!important;
  border-color:var(--user-app-color,#0f2f49)!important;
  color:#fff!important;
  box-shadow:0 6px 14px color-mix(in srgb,var(--user-app-color,#0f2f49) 28%, transparent);
}
#aboutBtn:hover{
  background:color-mix(in srgb,var(--user-app-color,#0f2f49) 84%, white)!important;
  border-color:color-mix(in srgb,var(--user-app-color,#0f2f49) 84%, white)!important;
  color:#fff!important;
}
#aboutBtn:active{
  background:color-mix(in srgb,var(--user-app-color,#0f2f49) 84%, black)!important;
  border-color:color-mix(in srgb,var(--user-app-color,#0f2f49) 84%, black)!important;
}
#aboutBtn:focus-visible{
  outline:3px solid color-mix(in srgb,var(--user-app-color,#0f2f49) 35%, transparent);
  outline-offset:2px;
}

/* Profile photo and avatar */
.profile-media-preview{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
  margin-bottom:18px;
}
.profile-media-item{display:grid;gap:8px;justify-items:center}
.profile-media-label{
  font-size:10px;
  color:var(--muted);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.profile-photo-frame{
  width:112px;
  height:112px;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--soft);
  box-shadow:inset 0 0 0 5px var(--panel);
}
.profile-photo-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.profile-photo-placeholder{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:var(--muted);
}
.profile-photo-placeholder small{font-size:10px;font-weight:800}
.camera-icon{
  position:relative;
  display:block;
  width:38px;
  height:27px;
  border:3px solid currentColor;
  border-radius:7px;
}
.camera-icon::before{
  content:"";
  position:absolute;
  width:16px;
  height:7px;
  left:8px;
  top:-9px;
  border:3px solid currentColor;
  border-bottom:0;
  border-radius:5px 5px 0 0;
}
.camera-lens{
  position:absolute;
  width:12px;
  height:12px;
  left:10px;
  top:5px;
  border:3px solid currentColor;
  border-radius:50%;
}
.profile-upload-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:20px;
}
.profile-upload-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--soft);
}
.profile-upload-card h3{margin:0 0 4px;font-size:14px}
.profile-upload-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.4}
.sidebar-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 9px;
  margin-bottom:8px;
  border-radius:13px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
}
.sidebar-avatar-wrap{
  width:38px;
  height:38px;
  min-width:38px;
  border-radius:50%;
  overflow:hidden;
  background:rgba(255,255,255,.12);
}
.sidebar-avatar{
  width:100%;
  height:100%;
  object-fit:cover;
}
.sidebar-avatar-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  position:relative;
}
.sidebar-avatar-placeholder::before{
  content:"";
  position:absolute;
  width:14px;
  height:14px;
  top:6px;
  border:2px solid #fff;
  border-radius:50%;
}
.sidebar-avatar-placeholder::after{
  content:"";
  position:absolute;
  width:22px;
  height:11px;
  bottom:5px;
  border:2px solid #fff;
  border-radius:12px 12px 5px 5px;
}
.camera-glyph{
  position:absolute;
  right:0;
  bottom:0;
  width:14px;
  height:14px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--user-app-color,#0f2f49);
  border:2px solid #fff;
  font-size:0;
}
.camera-glyph::before{
  content:"";
  width:7px;
  height:5px;
  border:1.5px solid #fff;
  border-radius:2px;
}
.sidebar-user-copy{min-width:0}
.sidebar-user-copy strong,.sidebar-user-copy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-copy strong{font-size:12px;color:#fff}
.sidebar-user-copy span{margin-top:2px;font-size:10px;color:rgba(255,255,255,.7)}
.app.collapsed .sidebar-user-copy{display:none}
.app.collapsed .sidebar-user{justify-content:center;padding:8px 4px}
@media(max-width:760px){
  .profile-media-preview,.profile-upload-grid{grid-template-columns:1fr}
  .sidebar-user{display:none}
}

.profile-record-head{align-items:flex-start;gap:22px}.profile-media-controls{display:flex;gap:16px;margin-left:auto}.profile-media-control{position:relative;display:grid;justify-items:center;gap:7px}.profile-media-button{position:relative;width:68px;height:68px;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--soft);cursor:pointer;box-shadow:0 5px 14px rgba(15,47,73,.08);transition:transform .15s,box-shadow .15s,border-color .15s}.profile-media-button.round{border-radius:50%}.profile-media-button:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 10px 22px rgba(15,47,73,.12)}.profile-media-button img{width:100%;height:100%;display:none;object-fit:cover}#profileLogoPreview{object-fit:contain;background:#fff}.profile-media-placeholder{width:100%;height:100%;display:grid;place-items:center}.logo-placeholder{font-size:20px;font-weight:900;color:var(--text)}.camera-placeholder{color:var(--muted)}.media-edit-badge{position:absolute;right:3px;bottom:3px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:var(--user-app-color,#0f2f49);color:#fff;border:2px solid var(--panel);font-size:10px;font-weight:900}.profile-media-caption{text-align:center}.profile-media-caption strong,.profile-media-caption span{display:block}.profile-media-caption strong{font-size:10px}.profile-media-caption span{margin-top:2px;font-size:9px;color:var(--muted)}.profile-media-menu{position:absolute;top:88px;right:0;z-index:40;display:none;min-width:142px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 16px 34px rgba(15,47,73,.18)}.profile-media-menu.open{display:grid}.media-menu-item{position:relative;width:100%;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--text);text-align:left;font:inherit;font-size:11px;font-weight:750;cursor:pointer}.media-menu-item:hover{background:var(--soft)}.media-menu-item.danger{color:var(--danger)}.media-menu-item:disabled{opacity:.4;cursor:not-allowed}.media-menu-item input[type=file]{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;cursor:pointer!important}.image-viewer-card{max-width:720px}.image-viewer-card img{width:100%;max-height:70vh;object-fit:contain;border-radius:14px;background:var(--soft)}.profile-upload-grid,.profile-media-preview{display:none!important}@media(max-width:900px){.profile-record-head{flex-direction:column}.profile-media-controls{width:100%;justify-content:flex-start;margin-left:0}}@media(max-width:560px){.profile-media-controls{justify-content:space-around}}

/* Integrated profile summary */
.profile-grid{
  grid-template-columns:1fr!important;
}
.profile-record-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
  padding:20px;
  margin-bottom:18px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--panel);
  box-shadow:var(--shadow);
}
.profile-summary-panel{
  min-width:0;
  padding:18px 20px;
  border-radius:18px;
  background:color-mix(in srgb,var(--user-app-color,#0f2f49) 10%, var(--panel));
}
.profile-summary-main h2{
  margin:0;
  font-size:32px;
  line-height:1.05;
  letter-spacing:-.04em;
}
.profile-summary-main p{
  margin:10px 0 0;
  font-size:17px;
  color:color-mix(in srgb,var(--user-app-color,#0f2f49) 36%, var(--muted));
  font-weight:700;
}
.profile-summary-details{
  display:grid;
  gap:8px;
  margin-top:20px;
}
.profile-summary-details span{
  display:block;
  color:color-mix(in srgb,var(--user-app-color,#0f2f49) 28%, var(--muted));
  font-size:14px;
  font-weight:650;
}
.profile-section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:4px 0 16px;
}
.profile-section-heading h2{
  margin:0;
  font-size:18px;
}
.profile-section-heading p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
}
.profile-record-top .profile-media-controls{
  margin-left:0;
}
.profile-preview{display:none!important}
@media(max-width:900px){
  .profile-record-top{
    grid-template-columns:1fr;
    align-items:start;
  }
  .profile-record-top .profile-media-controls{
    width:100%;
    justify-content:flex-start;
  }
}
@media(max-width:560px){
  .profile-record-top{
    padding:14px;
  }
  .profile-summary-panel{
    padding:16px;
  }
  .profile-summary-main h2{
    font-size:25px;
  }
  .profile-summary-main p{
    font-size:15px;
  }
}

/* Nivo4 Photography OS */
:root{
  --photo-ink:#172534;
  --photo-navy:#132b43;
  --photo-blue:#294961;
  --photo-sand:#d2b58d;
  --photo-cream:#f5f1ea;
}
body{
  background:
    radial-gradient(circle at 88% 8%,rgba(210,181,141,.18),transparent 28rem),
    var(--bg);
}
.sidebar{
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 34%),
    var(--photo-navy);
}
.topbar{
  background:
    linear-gradient(110deg,var(--photo-navy),var(--photo-blue));
}
.topbar h1,.topbar p{color:#fff}
.topbar p{opacity:.72}
.card,.settings-panel,.forecast-kpi{
  border-color:color-mix(in srgb,var(--line) 82%,var(--photo-sand));
}
.dashboard-kpi-card.primary{
  background:linear-gradient(145deg,var(--photo-navy),var(--photo-blue));
}
.photography-quote-card{
  overflow:hidden;
  position:relative;
  background:
    linear-gradient(135deg,rgba(210,181,141,.14),transparent 42%),
    var(--panel);
}
.photography-quote-card::after{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  right:-65px;
  top:-70px;
  border:22px solid rgba(210,181,141,.16);
  border-radius:50%;
  pointer-events:none;
}
.quote-card-intro{max-width:48ch;color:var(--muted)}
.contact-gallery-field{grid-column:span 2}
.contact-gallery-link{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-top:5px;
  color:var(--accent);
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}
.contact-gallery-link:hover{text-decoration:underline}
@media(max-width:720px){
  .contact-gallery-field{grid-column:1/-1}
}


/* Premium UI refinement */
:root{
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --radius-xs:8px;
  --radius-sm:11px;
  --radius-md:15px;
  --radius-lg:20px;
  --radius-xl:26px;
  --shadow-soft:0 8px 24px rgba(15,23,42,.06);
  --shadow-card:0 14px 38px rgba(15,23,42,.08);
  --shadow-float:0 24px 60px rgba(15,23,42,.16);
}

*{box-sizing:border-box}

html{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  font-family:var(--font-sans);
  font-size:14px;
  line-height:1.5;
  letter-spacing:-.005em;
}

button,input,select,textarea{
  font:inherit;
}

h1,h2,h3,h4,strong{
  letter-spacing:-.025em;
}

h1{
  font-size:clamp(28px,3vw,40px);
  line-height:1.08;
  font-weight:760;
}

h2{
  line-height:1.15;
  font-weight:730;
}

h3{
  line-height:1.2;
  font-weight:700;
}

p{
  line-height:1.6;
}

.main{
  min-width:0;
}

.topbar{
  min-height:92px;
  padding:24px 30px 20px;
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%, transparent);
  backdrop-filter:blur(18px);
}

.topbar h1{
  margin:0;
}

.topbar p{
  margin:6px 0 0;
  font-size:13px;
  color:var(--muted);
}

.top-actions{
  gap:10px;
}

.view{
  padding:24px 30px 44px;
}

.section-gap{
  margin-top:20px;
}

.card,
.stat-card,
.settings-panel,
.forecast-kpi,
.dashboard-widget{
  border:1px solid color-mix(in srgb,var(--line) 84%, transparent);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}

.card{
  padding:22px;
}

.card:hover,
.forecast-kpi:hover,
.dashboard-widget:hover{
  box-shadow:var(--shadow-card);
}

.card-head{
  gap:18px;
  margin-bottom:18px;
}

.card-head h2{
  margin:0;
  font-size:19px;
}

.card-head p{
  margin:5px 0 0;
  font-size:12px;
  color:var(--muted);
}

.sidebar{
  padding:20px 12px;
  box-shadow:10px 0 30px rgba(15,23,42,.08);
}

.brand{
  padding:4px 6px 18px;
  gap:12px;
}

.brand-copy strong{
  font-size:14px;
  font-weight:780;
}

.brand-copy span{
  margin-top:3px;
  font-size:10px;
  opacity:.72;
}

.nav-list{
  gap:5px;
}

.nav{
  min-height:44px;
  padding:10px 12px;
  border-radius:12px;
  font-weight:650;
  letter-spacing:-.01em;
}

.nav span{
  width:22px;
  font-size:17px;
}

.nav b{
  font-size:12px;
}

.sidebar-bottom{
  gap:8px;
}

.sidebar-user{
  padding:10px;
  border-radius:14px;
}

.sidebar-user-copy strong{
  font-size:11px;
}

.sidebar-user-copy span{
  font-size:9px;
}

.btn{
  min-height:40px;
  padding:9px 14px;
  border-radius:10px;
  font-size:12px;
  font-weight:720;
  letter-spacing:-.01em;
  box-shadow:none;
}

.btn.small{
  min-height:34px;
  padding:7px 10px;
  font-size:11px;
}

.btn.primary{
  box-shadow:0 6px 16px color-mix(in srgb,var(--user-app-color,#0f2f49) 20%, transparent);
}

.btn:hover{
  transform:translateY(-1px);
}

.btn:active{
  transform:translateY(0);
}

input,
select,
textarea{
  min-height:42px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid color-mix(in srgb,var(--line) 92%, transparent);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}

textarea{
  min-height:100px;
  resize:vertical;
}

input:hover,
select:hover,
textarea:hover{
  border-color:color-mix(in srgb,var(--line) 55%, var(--text));
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%, transparent);
}

label{
  display:grid;
  gap:6px;
  font-size:11px;
  font-weight:680;
  color:var(--text);
}

.grid{
  gap:14px;
}

.grid.two{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.grid.three{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.metric-grid,
.forecast-summary-grid,
.dashboard-grid{
  gap:14px;
}

.stat-card{
  padding:18px;
}

.stat-card span{
  font-size:11px;
  font-weight:680;
}

.stat-card strong{
  margin-top:8px;
  font-size:25px;
}

.price-card{
  border-radius:var(--radius-xl);
  padding:24px;
  box-shadow:var(--shadow-card);
}

.metric-grid div{
  border-radius:12px;
  padding:12px;
}

.data-list,
.quotation-list,
.forecast-list{
  gap:10px;
}

.data-row,
.quotation-row,
.forecast-row{
  border-radius:14px;
  transition:background .15s ease,box-shadow .15s ease,transform .15s ease;
}

.data-row:hover,
.quotation-row:hover{
  transform:translateY(-1px);
}

.data-label{
  margin-bottom:4px;
  font-size:9px;
  font-weight:820;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.status-pill{
  padding:5px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:780;
}

.profile-record-top{
  padding:18px;
  gap:20px;
  border-radius:var(--radius-xl);
}

.profile-summary-panel{
  padding:20px;
  border-radius:18px;
}

.profile-summary-main h2{
  font-size:30px;
  font-weight:770;
}

.profile-summary-main p{
  margin-top:8px;
  font-size:15px;
}

.profile-summary-details{
  gap:7px;
  margin-top:18px;
}

.profile-summary-details span{
  font-size:13px;
}

.profile-media-button{
  width:64px;
  height:64px;
  border-radius:15px;
}

.profile-media-caption strong{
  font-size:9px;
  letter-spacing:.02em;
}

.profile-media-caption span{
  font-size:8px;
}

.profile-media-menu{
  border-radius:12px;
  box-shadow:var(--shadow-float);
}

.settings-shell{
  gap:14px;
}

.settings-panel{
  border-radius:18px;
}

.settings-panel-head{
  padding:16px 18px 13px;
}

.settings-panel-head h2{
  font-size:17px;
}

.settings-row{
  padding:13px 18px;
  gap:18px;
}

.settings-grid.compact-grid{
  padding:16px 18px 18px;
  gap:12px;
}

.compact-swatch{
  width:26px!important;
  height:26px!important;
  min-width:26px;
  border-radius:7px;
}

.compact-custom-color{
  min-height:32px;
  padding:5px 9px;
}

.settings-action-bar{
  padding:12px 14px;
  border-radius:14px;
  box-shadow:var(--shadow-card);
}

.forecast-hero{
  padding-top:0;
}

.forecast-hero h2{
  font-size:30px;
  font-weight:760;
}

.forecast-kpi{
  min-height:108px;
  padding:16px;
}

.forecast-kpi-icon{
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:13px;
}

.forecast-kpi strong{
  font-size:22px;
}

.forecast-top-grid{
  gap:18px;
}

.forecast-chart-card,
.forecast-actions-card{
  min-height:340px;
}

.upcoming-action{
  padding:11px;
  border-radius:12px;
}

.forecast-toolbar{
  gap:18px;
  padding-bottom:16px;
}

.forecast-filter-bar{
  padding:12px 0;
}

.filter-chip span{
  min-height:32px;
  padding:6px 10px;
  font-size:11px;
}

.forecast-row{
  padding:14px 12px;
}

.modal-card{
  border-radius:var(--radius-xl);
  padding:24px;
  box-shadow:var(--shadow-float);
}

.auth-card{
  border-radius:28px;
  padding:28px;
  box-shadow:var(--shadow-float);
}

.toast{
  border-radius:12px;
  box-shadow:var(--shadow-float);
}

.app-footer{
  font-size:10px;
  opacity:.84;
}

@media(max-width:1100px){
  .topbar{
    padding-inline:22px;
  }
  .view{
    padding-inline:22px;
  }
  .grid.three{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px){
  body{
    font-size:13px;
  }
  .topbar{
    min-height:auto;
    padding:16px 14px 12px;
  }
  .topbar h1{
    font-size:26px;
  }
  .view{
    padding:16px 12px 32px;
  }
  .card{
    padding:17px;
    border-radius:17px;
  }
  .grid.two,
  .grid.three{
    grid-template-columns:1fr;
  }
  .profile-record-top{
    padding:14px;
  }
  .profile-summary-panel{
    padding:16px;
  }
  .profile-summary-main h2{
    font-size:24px;
  }
  .forecast-hero h2{
    font-size:25px;
  }
}

/* Refined navigation */
.nav-list{
  gap:2px!important;
}
.nav{
  min-height:38px!important;
  padding:7px 11px!important;
  border-radius:10px!important;
  font-weight:400!important;
}
.nav b{
  font-size:12px!important;
  font-weight:400!important;
  letter-spacing:0!important;
}
.nav span{
  font-size:16px!important;
}
.nav.active b{
  font-weight:520!important;
}
.sidebar-bottom{
  gap:4px!important;
}
.sidebar-user{
  margin-bottom:5px!important;
}
#logoutBtn{
  min-height:38px!important;
}

/* Polished opportunity graphs */
.stage-chart{
  display:block!important;
}
.opportunity-donut-layout{
  display:grid;
  grid-template-columns:minmax(170px,.75fr) minmax(220px,1.25fr);
  gap:26px;
  align-items:center;
}
.opportunity-donut-layout.large{
  grid-template-columns:minmax(210px,.8fr) minmax(260px,1.2fr);
}
.opportunity-donut{
  width:min(100%,230px);
  aspect-ratio:1;
  margin-inline:auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 16px 36px rgba(15,23,42,.10);
}
.opportunity-donut-layout.large .opportunity-donut{
  width:min(100%,270px);
}
.opportunity-donut-center{
  width:62%;
  aspect-ratio:1;
  display:grid;
  place-content:center;
  text-align:center;
  border-radius:50%;
  background:var(--panel);
  box-shadow:0 8px 20px rgba(15,23,42,.08);
}
.opportunity-donut-center strong{
  font-size:30px;
  line-height:1;
}
.opportunity-donut-center span{
  margin-top:6px;
  font-size:10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:760;
}
.opportunity-donut-center small{
  margin-top:5px;
  font-size:11px;
  color:var(--muted);
}
.opportunity-legend{
  display:grid;
  gap:8px;
}
.opportunity-legend-row{
  display:grid;
  grid-template-columns:10px 1fr auto;
  gap:10px;
  align-items:center;
  padding:9px 10px;
  border-radius:11px;
  transition:background .15s ease;
}
.opportunity-legend-row:hover{
  background:var(--soft);
}
.legend-dot{
  width:9px;
  height:9px;
  border-radius:50%;
}
.legend-copy strong,
.legend-copy small{
  display:block;
}
.legend-copy strong{
  font-size:11px;
  font-weight:680;
}
.legend-copy small{
  margin-top:2px;
  font-size:9px;
  color:var(--muted);
}
.legend-value{
  font-size:11px;
  font-weight:720;
}
.forecast-pipeline-trend{
  margin-top:22px;
}
.pipeline-trend-card{
  padding-top:18px;
  border-top:1px solid var(--line);
}
.pipeline-trend-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:10px;
}
.pipeline-trend-head strong,
.pipeline-trend-head small{
  display:block;
}
.pipeline-trend-head strong{
  font-size:12px;
}
.pipeline-trend-head small{
  margin-top:2px;
  font-size:9px;
  color:var(--muted);
}
.pipeline-trend-head>span{
  font-size:13px;
  font-weight:760;
}
.pipeline-trend-svg{
  width:100%;
  height:auto;
  overflow:visible;
}
.trend-axis{
  stroke:var(--line);
  stroke-width:1;
}
.trend-line{
  fill:none;
  stroke:var(--user-app-color);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.trend-point{
  fill:var(--panel);
  stroke:var(--user-app-color);
  stroke-width:3;
}
.trend-label{
  fill:var(--muted);
  font-size:10px;
  font-family:var(--font-sans);
}
@media(max-width:760px){
  .nav{
    min-height:36px!important;
  }
  .opportunity-donut-layout,
  .opportunity-donut-layout.large{
    grid-template-columns:1fr;
  }
  .opportunity-donut,
  .opportunity-donut-layout.large .opportunity-donut{
    width:min(100%,220px);
  }
}

/* Dashboard line graph */
.dashboard-line-graph{
  min-height:330px;
}
.line-chart-summary{
  display:flex;
  justify-content:flex-end;
  gap:24px;
  margin-bottom:4px;
}
.line-chart-summary div{
  text-align:right;
}
.line-chart-summary span,
.line-chart-summary strong{
  display:block;
}
.line-chart-summary span{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  font-weight:760;
}
.line-chart-summary strong{
  margin-top:3px;
  font-size:14px;
}
.dashboard-line-svg{
  width:100%;
  height:auto;
  overflow:visible;
}
.line-chart-grid{
  stroke:var(--line);
  stroke-width:1;
  stroke-dasharray:4 5;
}
.line-chart-y-label,
.line-chart-x-label{
  fill:var(--muted);
  font-size:10px;
  font-family:var(--font-sans);
}
.dashboard-line-path{
  fill:none;
  stroke:var(--user-app-color);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dashboard-line-point{
  fill:var(--panel);
  stroke:var(--user-app-color);
  stroke-width:3;
  transition:r .15s ease;
}
.dashboard-line-point:hover{
  r:7;
}

/* Forecast graphs side by side */
.forecast-top-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,.38fr);
  gap:18px;
  align-items:start;
}
.forecast-graphs-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.forecast-graphs-grid .forecast-chart-card{
  min-height:390px;
}
.forecast-bars{
  height:280px;
  display:grid;
  grid-template-columns:repeat(5,minmax(48px,1fr));
  gap:14px;
  align-items:end;
  padding:8px 4px 0;
}
.forecast-bar-column{
  height:100%;
  display:grid;
  grid-template-rows:28px 1fr 32px;
  gap:7px;
  align-items:end;
  text-align:center;
}
.forecast-bar-value{
  min-height:28px;
  display:flex;
  justify-content:center;
  align-items:end;
  font-size:10px;
  font-weight:720;
  color:var(--muted);
}
.forecast-bar-track{
  width:min(54px,80%);
  height:100%;
  margin-inline:auto;
  display:flex;
  align-items:flex-end;
  border-radius:10px 10px 4px 4px;
  background:var(--soft);
  overflow:hidden;
}
.forecast-bar-fill{
  position:relative;
  width:100%;
  min-height:0;
  border-radius:9px 9px 3px 3px;
  transition:height .28s ease,filter .15s ease;
}
.forecast-bar-fill:hover{
  filter:brightness(1.08);
}
.forecast-bar-tooltip{
  position:absolute;
  left:50%;
  top:8px;
  transform:translateX(-50%);
  min-width:max-content;
  padding:4px 6px;
  border-radius:6px;
  background:rgba(15,23,42,.8);
  color:#fff;
  font-size:8px;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
.forecast-bar-fill:hover .forecast-bar-tooltip{
  opacity:1;
}
.forecast-bar-label{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:5px;
  font-size:9px;
  font-weight:680;
  color:var(--muted);
}
.forecast-bar-label .legend-dot{
  width:7px;
  height:7px;
}

@media(max-width:1280px){
  .forecast-top-layout{
    grid-template-columns:1fr;
  }
}
@media(max-width:980px){
  .forecast-graphs-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:760px){
  .dashboard-line-graph{
    min-height:250px;
    overflow-x:auto;
  }
  .dashboard-line-svg{
    min-width:620px;
  }
  .line-chart-summary{
    justify-content:flex-start;
  }
  .forecast-bars{
    height:230px;
    gap:7px;
  }
  .forecast-bar-track{
    width:min(40px,84%);
  }
  .forecast-bar-value{
    font-size:8px;
  }
}

.chart-type-control{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:145px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.chart-type-control select{
  min-height:34px;
  padding:6px 28px 6px 9px;
  font-size:11px;
  text-transform:none;
  letter-spacing:0;
}
.dashboard-month-bars{
  height:270px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(44px,1fr));
  gap:12px;
  align-items:end;
}
.dashboard-month-bar{
  height:100%;
  display:grid;
  grid-template-rows:28px 1fr 28px;
  gap:5px;
  text-align:center;
}
.dashboard-month-track{
  height:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  border-radius:9px 9px 3px 3px;
  background:var(--soft);
}
.dashboard-month-fill{
  width:min(42px,75%);
  border-radius:8px 8px 2px 2px;
  background:var(--user-app-color);
}
.dashboard-month-value,.dashboard-month-label{
  font-size:9px;
  color:var(--muted);
}
.stage-vertical-bars{
  height:270px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  align-items:end;
}
.stage-vertical-column{
  height:100%;
  display:grid;
  grid-template-rows:24px 1fr 25px;
  gap:6px;
  text-align:center;
}
.stage-vertical-track{
  height:100%;
  display:flex;
  align-items:flex-end;
  background:var(--soft);
  border-radius:9px 9px 3px 3px;
}
.stage-vertical-fill{
  width:100%;
  border-radius:8px 8px 2px 2px;
}
.stage-vertical-column strong,.stage-vertical-column span{
  font-size:10px;
}
.stage-horizontal-bars,.value-horizontal-bars{
  display:grid;
  gap:14px;
  padding-top:8px;
}
.stage-horizontal-row,.value-horizontal-row{
  display:grid;
  grid-template-columns:100px 1fr 90px;
  gap:12px;
  align-items:center;
}
.stage-horizontal-label{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
}
.stage-horizontal-track,.value-horizontal-track{
  height:12px;
  border-radius:999px;
  background:var(--soft);
  overflow:hidden;
}
.stage-horizontal-fill,.value-horizontal-fill{
  height:100%;
  border-radius:999px;
}
.stage-horizontal-row strong,.value-horizontal-row strong{
  text-align:right;
  font-size:11px;
}
.value-horizontal-row>span{
  font-size:11px;
}
.forecast-value-line{
  width:100%;
  height:auto;
}
.forecast-value-line-path{
  fill:none;
  stroke:var(--user-app-color);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.forecast-value-line-point{
  fill:var(--panel);
  stroke:var(--user-app-color);
  stroke-width:3;
}
@media(max-width:760px){
  .chart-type-control{
    width:100%;
    justify-content:space-between;
  }
  .stage-horizontal-row,.value-horizontal-row{
    grid-template-columns:80px 1fr 70px;
  }
}

/* Powered by Nivo4 replaces the About button */
.powered-by-button{
  appearance:none;
  cursor:pointer;
  min-height:38px;
  padding:8px 13px;
  font-family:inherit;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease;
}
.powered-by-button:hover{
  transform:translateY(-1px);
  border-color:var(--user-app-color,#0f2f49);
  box-shadow:0 7px 18px color-mix(in srgb,var(--user-app-color,#0f2f49) 18%, transparent);
}
.powered-by-button:active{
  transform:translateY(0);
}
.powered-by-button:focus-visible{
  outline:3px solid color-mix(in srgb,var(--user-app-color,#0f2f49) 22%, transparent);
  outline-offset:2px;
}

/* Shared Forecast pipeline trend */
.forecast-shared-trend-card{
  overflow:hidden;
}
.forecast-shared-trend{
  min-height:330px;
}
@media(max-width:760px){
  .powered-by-button{
    display:flex!important;
  }
  .forecast-shared-trend{
    min-height:250px;
    overflow-x:auto;
  }
}

/* Prominent Powered by Nivo4 button */
.powered-by-button{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:42px;
  padding:9px 16px!important;
  border:2px solid var(--user-app-color,#0f2f49)!important;
  border-radius:12px!important;
  background:var(--user-app-color,#0f2f49)!important;
  color:#fff!important;
  box-shadow:0 8px 20px color-mix(in srgb,var(--user-app-color,#0f2f49) 30%, transparent)!important;
  opacity:1!important;
}
.powered-by-button span{
  color:rgba(255,255,255,.78)!important;
  font-size:10px!important;
  font-weight:650!important;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.powered-by-button strong{
  color:#fff!important;
  font-size:13px!important;
  font-weight:820!important;
}
.powered-by-button::after{
  content:"ⓘ";
  margin-left:3px;
  color:rgba(255,255,255,.88);
  font-size:14px;
}
.powered-by-button:hover{
  transform:translateY(-2px)!important;
  background:color-mix(in srgb,var(--user-app-color,#0f2f49) 88%, white)!important;
  border-color:color-mix(in srgb,var(--user-app-color,#0f2f49) 88%, white)!important;
  box-shadow:0 12px 28px color-mix(in srgb,var(--user-app-color,#0f2f49) 38%, transparent)!important;
}
.powered-by-button:active{
  transform:translateY(0)!important;
}

/* Dashboard uses the same polished forecast graph as Forecast */
.dashboard-forecast-graph{
  min-height:320px;
  display:grid!important;
  align-items:center;
}
.dashboard-widget[data-widget="opportunityStages"] .widget-content{
  min-height:100%;
}
@media(max-width:760px){
  .powered-by-button{
    width:auto!important;
    min-height:40px;
    padding:8px 12px!important;
  }
  .powered-by-button span{
    display:none;
  }
  .dashboard-forecast-graph{
    min-height:280px;
  }
}

/* Clickable quotation rows */
.clickable-quotation-row{
  cursor:pointer;
}
.clickable-quotation-row:hover{
  background:var(--soft);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}

/* External Quotes */
.external-quotes-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
}
.external-quotes-hero h2{
  margin:4px 0 6px;
  font-size:30px;
}
.external-quotes-hero p{
  margin:0;
  color:var(--muted);
}
.external-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.external-list-head{
  align-items:end;
}
.external-search{
  min-width:280px;
}
.external-table-head,
.external-quote-row{
  display:grid;
  grid-template-columns:minmax(210px,1.3fr) minmax(150px,.9fr) minmax(110px,.65fr) minmax(100px,.6fr) minmax(110px,.65fr) auto;
  gap:14px;
  align-items:center;
}
.external-table-head{
  padding:11px 12px;
  color:var(--muted);
  font-size:9px;
  font-weight:820;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.external-quotes-list{
  display:grid;
}
.external-quote-row{
  padding:14px 12px;
  border-top:1px solid var(--line);
  cursor:pointer;
  transition:background .15s ease;
}
.external-quote-row:hover{
  background:var(--soft);
}
.external-quote-main strong,
.external-quote-main small,
.external-quote-row small{
  display:block;
}
.external-quote-main small,
.external-quote-row small{
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}
.external-row-actions{
  display:flex;
  gap:6px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.status-pill.active{background:#dcfce7;color:#166534}
.status-pill.paused{background:#fef3c7;color:#92400e}
.status-pill.expired{background:#fee2e2;color:#991b1b}

/* External quote editor */
.external-quote-modal-card{
  max-width:860px;
}
.external-permissions h3{
  margin:0 0 10px;
  font-size:14px;
}
.permission-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.permission-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--soft);
}
.permission-toggle input{
  min-height:0;
}

/* Customer Portal */
.customer-portal-modal{
  padding:18px;
  overflow:auto;
  background:rgba(10,20,32,.76);
}
.customer-portal-shell{
  position:relative;
  width:min(1120px,100%);
  margin:auto;
  padding:28px;
  border-radius:28px;
  background:#f7f9fc;
  color:#172033;
  box-shadow:0 32px 90px rgba(0,0,0,.32);
}
.customer-portal-close{
  position:absolute;
  right:18px;
  top:18px;
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:#e8edf5;
  color:#172033;
  font-size:22px;
  cursor:pointer;
}
.customer-portal-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:28px;
}
.customer-portal-brand img{
  width:56px;
  height:56px;
  object-fit:contain;
  border-radius:14px;
  background:#fff;
}
.customer-portal-brand span,
.customer-portal-brand strong{
  display:block;
}
.customer-portal-brand span{
  font-size:10px;
  color:#6b7280;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:800;
}
.customer-portal-brand strong{
  margin-top:3px;
  font-size:18px;
}
.customer-portal-unlock{
  width:min(440px,100%);
  margin:60px auto 80px;
  padding:26px;
  border:1px solid #dce3ee;
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 50px rgba(31,50,79,.10);
}
.customer-portal-unlock h2{
  margin:0;
  font-size:24px;
}
.customer-portal-unlock p{
  margin:7px 0 20px;
  color:#6b7280;
}
.portal-error{
  display:block;
  min-height:20px;
  margin-top:10px;
  color:#b91c1c;
  font-size:11px;
}
.customer-portal-header{
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:flex-start;
  margin-bottom:22px;
}
.customer-portal-header h1{
  margin:6px 0 8px;
  font-size:34px;
}
.customer-portal-header p{
  max-width:720px;
  margin:0;
  color:#687386;
}
.portal-quote-number{
  color:#64748b;
  font-size:10px;
  font-weight:820;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.portal-validity{
  min-width:150px;
  padding:12px 14px;
  border-radius:14px;
  background:#fff;
  border:1px solid #dce3ee;
}
.portal-validity span,
.portal-validity strong{
  display:block;
}
.portal-validity span{
  font-size:9px;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.portal-validity strong{
  margin-top:4px;
}
.customer-portal-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:20px;
  align-items:start;
}
.portal-options-card,
.portal-price-card{
  padding:24px;
  border-radius:20px;
  background:#fff;
  border:1px solid #dce3ee;
  box-shadow:0 10px 30px rgba(31,50,79,.07);
}
.portal-options-card{
  display:grid;
  gap:15px;
}
.portal-options-card input,
.portal-options-card textarea{
  background:#fbfcfe;
  border-color:#dce3ee;
  color:#172033;
}
.portal-section-head h2{
  margin:0;
}
.portal-section-head p{
  margin:5px 0 4px;
  color:#6b7280;
  font-size:12px;
}
.portal-check-option{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid #dce3ee;
  border-radius:12px;
  background:#fbfcfe;
}
.portal-check-option input{
  min-height:0;
}
.portal-check-option strong,
.portal-check-option small{
  display:block;
}
.portal-check-option small{
  margin-top:3px;
  color:#6b7280;
}
.portal-price-card{
  position:sticky;
  top:18px;
}
.portal-price-card>span{
  display:block;
  color:#64748b;
  font-size:11px;
  font-weight:760;
}
.portal-price-card>strong{
  display:block;
  margin-top:7px;
  font-size:38px;
  letter-spacing:-.045em;
}
.portal-price-card>small{
  display:block;
  margin-top:3px;
  color:#64748b;
}
.portal-price-breakdown{
  display:grid;
  gap:10px;
  margin:20px 0;
  padding:16px 0;
  border-top:1px solid #e5eaf1;
  border-bottom:1px solid #e5eaf1;
}
.portal-price-breakdown div{
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.portal-price-breakdown span{
  color:#64748b;
  font-size:11px;
}
.portal-price-breakdown strong{
  font-size:12px;
}
.portal-action-button{
  width:100%;
  margin-top:9px;
}
.portal-disclaimer{
  margin:14px 0 0;
  color:#7b8494;
  font-size:9px;
  line-height:1.5;
}
@media(max-width:1100px){
  .external-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .external-table-head{display:none}
  .external-quote-row{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px;border:1px solid var(--line);border-radius:14px}
  .external-quote-main,.external-row-actions{grid-column:1/-1}
  .external-row-actions{justify-content:flex-start}
}
@media(max-width:760px){
  .external-quotes-hero{align-items:flex-start;flex-direction:column}
  .external-quotes-hero .btn{width:100%}
  .external-kpi-grid{grid-template-columns:1fr}
  .external-list-head{align-items:flex-start;flex-direction:column}
  .external-search{min-width:0;width:100%}
  .external-quote-row{grid-template-columns:1fr}
  .external-quote-main,.external-row-actions{grid-column:auto}
  .permission-grid{grid-template-columns:1fr 1fr}
  .customer-portal-shell{padding:20px 14px;border-radius:20px}
  .customer-portal-header{flex-direction:column}
  .customer-portal-header h1{font-size:27px}
  .customer-portal-grid{grid-template-columns:1fr}
  .portal-price-card{position:static}
}

/* External Quote editor visibility and layout fix */
#externalQuoteModal{
  align-items:flex-start!important;
  justify-content:center!important;
  overflow-y:auto!important;
  padding:24px 16px!important;
}

.external-quote-modal-card{
  width:min(920px,100%)!important;
  max-width:920px!important;
  max-height:none!important;
  margin:auto!important;
  overflow:visible!important;
  padding:24px!important;
}

.external-quote-modal-card .card-head{
  position:sticky;
  top:-24px;
  z-index:12;
  margin:-24px -24px 20px;
  padding:22px 24px 16px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  border-radius:24px 24px 0 0;
}

.external-quote-modal-card .grid.two{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:start!important;
}

.external-quote-modal-card label{
  min-width:0!important;
}

.external-quote-modal-card input,
.external-quote-modal-card select,
.external-quote-modal-card textarea{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}

.external-quote-modal-card .input-with-action{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:8px!important;
  align-items:center!important;
  min-width:0!important;
}

.external-quote-modal-card .input-with-action input{
  min-width:0!important;
}

.external-permissions{
  clear:both!important;
  width:100%!important;
}

.permission-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}

.permission-toggle{
  min-width:0!important;
  width:100%!important;
  align-items:center!important;
}

.permission-toggle span{
  min-width:0!important;
  white-space:normal!important;
  line-height:1.35!important;
}

.external-quote-modal-card textarea{
  min-height:120px!important;
}

.external-quote-modal-card .modal-actions{
  position:sticky;
  bottom:-24px;
  z-index:12;
  display:flex!important;
  justify-content:flex-end!important;
  gap:10px!important;
  margin:20px -24px -24px!important;
  padding:16px 24px!important;
  background:color-mix(in srgb,var(--panel) 96%, transparent)!important;
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line)!important;
  border-radius:0 0 24px 24px!important;
}

.external-quote-modal-card .modal-actions .btn{
  flex:0 1 auto!important;
  white-space:nowrap!important;
}

@media(max-width:760px){
  #externalQuoteModal{
    padding:10px!important;
  }

  .external-quote-modal-card{
    width:100%!important;
    padding:18px!important;
    border-radius:18px!important;
  }

  .external-quote-modal-card .card-head{
    top:-18px;
    margin:-18px -18px 16px;
    padding:18px 18px 14px;
    border-radius:18px 18px 0 0;
  }

  .external-quote-modal-card .grid.two{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .permission-grid{
    grid-template-columns:1fr!important;
  }

  .external-quote-modal-card .modal-actions{
    bottom:-18px;
    flex-direction:column!important;
    margin:18px -18px -18px!important;
    padding:14px 18px!important;
    border-radius:0 0 18px 18px!important;
  }

  .external-quote-modal-card .modal-actions .btn{
    width:100%!important;
  }
}

@media(max-height:720px){
  #externalQuoteModal{
    padding-top:8px!important;
    padding-bottom:8px!important;
  }

  .external-quote-modal-card{
    margin:0 auto!important;
  }
}

/* Improved readability for end-user editable options */
.external-permissions{
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--soft);
}

.external-permissions h3{
  margin:0 0 4px!important;
  font-size:15px!important;
  font-weight:750!important;
  color:var(--text)!important;
}

.external-permissions h3::after{
  content:"Select which fields the customer may change.";
  display:block;
  margin-top:4px;
  font-size:11px;
  font-weight:500;
  line-height:1.4;
  color:var(--muted);
}

.permission-grid{
  margin-top:14px!important;
  gap:12px!important;
}

.permission-toggle{
  position:relative;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-height:58px!important;
  padding:12px 14px!important;
  border:1px solid var(--line)!important;
  border-radius:13px!important;
  background:var(--panel)!important;
  cursor:pointer!important;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease,transform .15s ease;
}

.permission-toggle:hover{
  transform:translateY(-1px);
  border-color:var(--accent)!important;
  box-shadow:0 8px 18px rgba(15,23,42,.07);
}

.permission-toggle input[type="checkbox"]{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  min-height:24px!important;
  margin:0!important;
  padding:0!important;
  border:2px solid color-mix(in srgb,var(--line) 55%, var(--text))!important;
  border-radius:7px!important;
  background:var(--panel)!important;
  display:grid!important;
  place-items:center!important;
  cursor:pointer!important;
  box-shadow:none!important;
}

.permission-toggle input[type="checkbox"]::after{
  content:"";
  width:10px;
  height:6px;
  border-left:3px solid #fff;
  border-bottom:3px solid #fff;
  transform:rotate(-45deg) scale(0);
  transform-origin:center;
  transition:transform .12s ease;
  margin-top:-2px;
}

.permission-toggle input[type="checkbox"]:checked{
  background:var(--user-app-color,#0f2f49)!important;
  border-color:var(--user-app-color,#0f2f49)!important;
}

.permission-toggle input[type="checkbox"]:checked::after{
  transform:rotate(-45deg) scale(1);
}

.permission-toggle input[type="checkbox"]:focus-visible{
  outline:3px solid color-mix(in srgb,var(--user-app-color,#0f2f49) 22%, transparent)!important;
  outline-offset:2px;
}

.permission-toggle span{
  display:block!important;
  color:var(--text)!important;
  font-size:13px!important;
  font-weight:680!important;
  line-height:1.35!important;
}

.permission-toggle:has(input:checked){
  border-color:color-mix(in srgb,var(--user-app-color,#0f2f49) 58%, var(--line))!important;
  background:color-mix(in srgb,var(--user-app-color,#0f2f49) 7%, var(--panel))!important;
}

.permission-toggle:has(input:checked) span{
  color:var(--text)!important;
}

@media(max-width:760px){
  .external-permissions{
    padding:14px;
  }

  .permission-toggle{
    min-height:54px!important;
    padding:11px 12px!important;
  }

  .permission-toggle span{
    font-size:12px!important;
  }
}

/* Premium Interactive Price Quote */
.customer-portal-modal{
  background:
    radial-gradient(circle at top left,rgba(255,255,255,.08),transparent 34%),
    rgba(8,18,31,.82)!important;
}

.customer-portal-shell{
  width:min(1180px,100%)!important;
  padding:30px!important;
  border-radius:30px!important;
  background:linear-gradient(180deg,#f8fafc 0%,#f3f6fa 100%)!important;
}

.customer-portal-brand{
  margin-bottom:22px!important;
  padding-bottom:20px;
  border-bottom:1px solid #e1e7ef;
}

.customer-portal-brand img{
  width:62px!important;
  height:62px!important;
  border-radius:16px!important;
  box-shadow:0 8px 20px rgba(31,50,79,.1);
}

.customer-portal-brand strong{
  font-size:20px!important;
  letter-spacing:-.025em;
}

.portal-progress{
  display:flex;
  align-items:center;
  width:min(460px,100%);
  margin:0 auto 28px;
}

.portal-progress-step{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  color:#8a94a5;
}

.portal-progress-step span{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e6ebf2;
  color:#64748b;
  font-size:11px;
  font-weight:800;
}

.portal-progress-step strong{
  font-size:11px;
  font-weight:700;
}

.portal-progress-step.active{
  color:#172033;
}

.portal-progress-step.active span{
  background:var(--user-app-color,#0f2f49);
  color:#fff;
  box-shadow:0 5px 14px color-mix(in srgb,var(--user-app-color,#0f2f49) 25%,transparent);
}

.portal-progress-line{
  flex:1;
  height:2px;
  margin:0 12px;
  background:#dfe5ed;
}

.customer-portal-header{
  padding:24px 26px;
  margin-bottom:20px!important;
  border:1px solid #dfe5ee;
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 28px rgba(31,50,79,.06);
}

.portal-heading-copy{
  min-width:0;
}

.customer-portal-header h1{
  margin:5px 0 8px!important;
  font-size:36px!important;
  line-height:1.08!important;
  letter-spacing:-.045em!important;
}

.customer-portal-header p{
  max-width:760px!important;
  line-height:1.6!important;
}

.portal-validity{
  min-width:176px!important;
  padding:15px 16px!important;
  border-radius:14px!important;
  background:#f7f9fc!important;
}

.customer-portal-grid{
  grid-template-columns:minmax(0,1.4fr) minmax(340px,.6fr)!important;
  gap:22px!important;
}

.portal-options-card,
.portal-price-card{
  border-radius:22px!important;
  border:1px solid #dfe5ed!important;
  box-shadow:0 14px 38px rgba(31,50,79,.07)!important;
}

.portal-options-card{
  padding:26px!important;
  gap:18px!important;
}

.portal-section-head>div{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.portal-section-number{
  width:32px;
  height:32px;
  min-width:32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--user-app-color,#0f2f49);
  color:#fff;
  font-size:12px;
  font-weight:800;
}

.portal-section-head h2{
  margin:0!important;
  font-size:20px;
}

.portal-section-head p{
  margin:5px 0 0!important;
}

.portal-product-summary{
  display:grid;
  gap:6px;
  padding:14px;
  border-radius:14px;
  background:#f7f9fc;
  border:1px solid #e0e6ee;
}

.portal-product-summary>span,
.portal-field-label{
  font-size:10px;
  font-weight:800;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.portal-product-summary input{
  min-height:38px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  font-size:16px!important;
  font-weight:720!important;
  color:#172033!important;
  box-shadow:none!important;
}

.portal-option-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.portal-field-card,
.portal-notes-card{
  display:grid!important;
  gap:8px!important;
  padding:15px!important;
  border:1px solid #dfe5ee!important;
  border-radius:14px!important;
  background:#fbfcfe!important;
}

.portal-field-card input,
.portal-notes-card textarea{
  width:100%;
  border-color:#d5dde8!important;
  background:#fff!important;
}

.portal-field-card small,
.portal-notes-card small{
  color:#7b8494;
  font-size:9px;
  line-height:1.4;
}

.portal-check-option.premium{
  position:relative;
  display:grid!important;
  grid-template-columns:auto auto 1fr;
  gap:12px!important;
  align-items:center!important;
  padding:16px!important;
  background:#fbfcfe!important;
  border:1px solid #dfe5ee!important;
  border-radius:14px!important;
}

.portal-check-option.premium input{
  position:absolute;
  opacity:0;
}

.portal-check-visual{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:2px solid #cbd5e1;
  border-radius:8px;
  background:#fff;
}

.portal-check-visual::after{
  content:"";
  width:11px;
  height:6px;
  border-left:3px solid #fff;
  border-bottom:3px solid #fff;
  transform:rotate(-45deg) scale(0);
  transition:transform .15s ease;
  margin-top:-2px;
}

.portal-check-option.premium input:checked+.portal-check-visual{
  background:var(--user-app-color,#0f2f49);
  border-color:var(--user-app-color,#0f2f49);
}

.portal-check-option.premium input:checked+.portal-check-visual::after{
  transform:rotate(-45deg) scale(1);
}

.portal-check-copy strong,
.portal-check-copy small{
  display:block;
}

.portal-check-copy strong{
  font-size:13px;
}

.portal-check-copy small{
  margin-top:3px;
  color:#6b7280;
  font-size:10px;
  line-height:1.45;
}

.portal-price-card{
  padding:24px!important;
  overflow:hidden;
}

.portal-price-top{
  padding:4px 0 20px;
  text-align:left;
}

.portal-price-top>span{
  display:block;
  font-size:10px;
  color:#64748b;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.portal-price-top>strong{
  display:block;
  margin-top:7px;
  font-size:42px;
  line-height:1;
  letter-spacing:-.05em;
  color:#172033;
}

.portal-price-top>small{
  display:block;
  margin-top:6px;
  color:#6b7280;
}

.portal-price-breakdown{
  margin:0!important;
  padding:18px 0!important;
}

.portal-price-breakdown div{
  align-items:center;
}

.portal-price-breakdown span{
  font-size:11px!important;
}

.portal-price-breakdown strong{
  font-size:12px!important;
}

.portal-action-section{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.portal-action-eyebrow{
  display:block;
  margin-bottom:2px;
  font-size:9px;
  color:#64748b;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.portal-action-button{
  display:grid!important;
  grid-template-columns:34px 1fr;
  gap:10px;
  align-items:center;
  min-height:62px!important;
  margin-top:0!important;
  padding:11px 13px!important;
  text-align:left!important;
}

.portal-action-button>span:last-child strong,
.portal-action-button>span:last-child small{
  display:block;
}

.portal-action-button>span:last-child strong{
  font-size:12px;
}

.portal-action-button>span:last-child small{
  margin-top:3px;
  font-size:9px;
  opacity:.78;
  line-height:1.35;
}

.portal-action-icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(255,255,255,.15);
  font-size:15px;
}

.portal-trust-note{
  display:flex;
  gap:9px;
  align-items:flex-start;
  margin-top:15px;
  padding:12px;
  border-radius:12px;
  background:#f6f8fb;
  border:1px solid #e1e6ed;
}

.portal-trust-note p{
  margin:0;
  color:#70798a;
  font-size:9px;
  line-height:1.5;
}

.portal-lock-icon{
  color:var(--user-app-color,#0f2f49);
  font-size:10px;
}

.portal-footer{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:18px 4px 0;
  color:#8a94a5;
  font-size:9px;
}

@media(max-width:900px){
  .customer-portal-grid{
    grid-template-columns:1fr!important;
  }

  .portal-price-card{
    position:static!important;
  }
}

@media(max-width:640px){
  .customer-portal-shell{
    padding:16px!important;
    border-radius:20px!important;
  }

  .customer-portal-brand{
    padding-right:40px;
  }

  .portal-progress{
    margin-bottom:20px;
  }

  .portal-progress-step strong{
    display:none;
  }

  .customer-portal-header{
    padding:18px!important;
  }

  .customer-portal-header h1{
    font-size:27px!important;
  }

  .portal-option-grid{
    grid-template-columns:1fr;
  }

  .portal-options-card,
  .portal-price-card{
    padding:18px!important;
  }

  .portal-price-top>strong{
    font-size:36px;
  }

  .portal-footer{
    flex-direction:column;
  }
}

/* Forecast opportunity action dropdown */
.forecast-actions{position:relative;display:flex;justify-content:flex-end;overflow:visible}
.forecast-action-menu{position:relative}
.forecast-action-trigger{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:34px;padding:7px 11px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);color:var(--text);
  font:inherit;font-size:11px;font-weight:650;cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s
}
.forecast-action-trigger:hover{border-color:var(--accent);background:var(--soft);box-shadow:0 5px 14px rgba(15,23,42,.07)}
.forecast-action-chevron{font-size:13px;line-height:1;color:var(--muted)}
.forecast-action-dropdown{
  position:absolute;right:0;top:calc(100% + 6px);z-index:80;
  display:none;min-width:150px;padding:6px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel);box-shadow:0 18px 42px rgba(15,23,42,.18)
}
.forecast-action-dropdown.open{display:grid}
.forecast-action-dropdown button{
  width:100%;min-height:35px;padding:8px 10px;border:0;border-radius:8px;
  background:transparent;color:var(--text);font:inherit;font-size:11px;
  font-weight:580;text-align:left;cursor:pointer
}
.forecast-action-dropdown button:hover{background:var(--soft)}
.forecast-action-dropdown button.danger{color:#b42318}
.forecast-action-dropdown button.danger:hover{background:#fef2f2;color:#991b1b}
.forecast-action-divider{height:1px;margin:5px 4px;background:var(--line)}
.forecast-list,.forecast-table-card,.forecast-row{overflow:visible!important}
@media(max-width:1100px){
  .forecast-actions{justify-content:flex-start}
  .forecast-action-dropdown{right:auto;left:0}
}

/* Pipeline is now the central opportunity workspace */
.legacy-quotes-view{
  display:none!important;
}

.pipeline-row-clickable{
  cursor:pointer;
}

.pipeline-row-clickable:hover{
  background:var(--soft);
}

.pipeline-row-clickable:focus-within{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--user-app-color,#0f2f49) 14%, transparent);
}

/* Keep action controls above the clickable row */
.pipeline-row-clickable .forecast-action-menu,
.pipeline-row-clickable button{
  position:relative;
  z-index:2;
}

/* Negotiated External Quote pricing */
.field-help{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:9px;
  font-weight:500;
  line-height:1.4;
}

.portal-negotiated-price-info{
  display:grid;
  gap:4px;
  margin-top:13px;
  padding:11px 12px;
  border-radius:11px;
  background:#ecfdf3;
  border:1px solid #bbf7d0;
}

.portal-negotiated-price-info span{
  color:#64748b;
  font-size:10px;
  text-decoration:line-through;
}

.portal-negotiated-price-info strong{
  color:#15803d;
  font-size:11px;
}

#externalAgreedPrice:not(:placeholder-shown){
  border-color:var(--user-app-color,#0f2f49);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--user-app-color,#0f2f49) 12%,transparent);
}

/* Pipeline Actions menu foreground fix */
.forecast-table-card,
.forecast-list,
.forecast-row,
.pipeline-row-clickable,
.forecast-actions,
.forecast-action-menu{
  overflow:visible!important;
}

.forecast-table-card{
  position:relative;
  z-index:1;
}

.pipeline-row-clickable{
  position:relative;
  z-index:1;
}

.pipeline-row-clickable:has(.forecast-action-dropdown.open){
  z-index:5000;
}

.forecast-action-menu{
  z-index:5001;
}

.forecast-action-dropdown{
  position:fixed!important;
  right:auto!important;
  bottom:auto!important;
  z-index:2147483000!important;
  min-width:170px!important;
  isolation:isolate;
  border:1px solid color-mix(in srgb,var(--line) 75%, var(--text))!important;
  background:var(--panel)!important;
  box-shadow:0 24px 64px rgba(15,23,42,.28)!important;
  backdrop-filter:blur(18px);
}

.forecast-action-dropdown.open{
  display:grid!important;
  animation:forecastMenuIn .12s ease-out;
}

.forecast-action-dropdown::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:12px;
  background:var(--panel);
}

.forecast-action-dropdown button{
  position:relative;
  z-index:1;
}

@keyframes forecastMenuIn{
  from{
    opacity:0;
    transform:translateY(-4px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* Nivo4 Maker OS rebuild */
.nav[data-view="quotes"],
.legacy-quotes-view{
  display:none!important;
}

#pipeline .forecast-list,
#pipeline .forecast-row,
#pipeline .forecast-table-card{
  overflow:visible!important;
}

.pipeline-row-clickable{
  cursor:pointer;
}

.pipeline-row-clickable:hover{
  background:var(--soft);
}

.forecast-action-dropdown{
  z-index:2147483000!important;
}

.card,
.dashboard-widget,
.forecast-kpi,
.settings-panel,
input,
select,
textarea{
  min-width:0;
}

/* External Quote negotiation and Pipeline synchronization */
.field-help{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:9px;
  font-weight:500;
  line-height:1.4;
}

.external-pricing-preview{
  display:grid;
  gap:4px;
  align-content:center;
  min-height:78px;
  padding:13px 15px;
  border:1px solid color-mix(in srgb,var(--user-app-color,#0f2f49) 32%,var(--line));
  border-radius:13px;
  background:color-mix(in srgb,var(--user-app-color,#0f2f49) 7%,var(--panel));
}

.external-pricing-preview span{
  font-size:9px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
}

.external-pricing-preview strong{
  font-size:20px;
  letter-spacing:-.035em;
}

.external-pricing-preview small{
  color:var(--muted);
  font-size:9px;
  line-height:1.4;
}

.portal-negotiated-price-info{
  display:grid;
  gap:4px;
  margin-top:13px;
  padding:11px 12px;
  border-radius:11px;
  background:#ecfdf3;
  border:1px solid #bbf7d0;
}

.portal-negotiated-price-info span{
  color:#64748b;
  font-size:10px;
  text-decoration:line-through;
}

.portal-negotiated-price-info strong{
  color:#15803d;
  font-size:11px;
}

#externalAgreedPrice:not(:placeholder-shown){
  border-color:var(--user-app-color,#0f2f49);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--user-app-color,#0f2f49) 12%,transparent);
}

.external-negotiation-permissions{grid-column:1/-1;display:grid;gap:13px;padding:16px;border:1px solid var(--line);border-radius:15px;background:var(--soft)}
.external-negotiation-permissions h3{margin:0;font-size:14px}
.external-negotiation-permissions p{margin:4px 0 0;color:var(--muted);font-size:10px;line-height:1.5}
.negotiation-permission-grid{margin:0!important}
.portal-negotiation-panel{display:grid;gap:12px;margin-top:18px;padding:15px;border:1px solid color-mix(in srgb,var(--user-app-color,#0f2f49) 36%,#dfe5ed);border-radius:15px;background:color-mix(in srgb,var(--user-app-color,#0f2f49) 6%,#fff)}
.portal-negotiation-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.portal-negotiation-head span,.portal-negotiation-head strong{display:block}
.portal-negotiation-head>div>span{color:#64748b;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.portal-negotiation-head strong{margin-top:3px;font-size:13px}
.portal-maker-badge{padding:5px 8px;border-radius:999px;background:var(--user-app-color,#0f2f49);color:#fff;font-size:8px!important;font-weight:800;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.portal-negotiation-field{display:grid!important;gap:7px!important;padding:12px!important;border:1px solid #dfe5ed!important;border-radius:12px!important;background:#fff!important}
.portal-negotiation-field>span{color:#64748b;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.portal-negotiation-field small{color:#7b8494;font-size:9px;line-height:1.4}
.portal-negotiation-field input{width:100%;background:#fbfcfe!important;border-color:#d7dfe9!important;color:#172033!important}
.portal-negotiation-field .input-with-action{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.portal-negotiation-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.portal-negotiation-actions>span{color:#64748b;font-size:9px}
@media(max-width:640px){.portal-negotiation-head{flex-direction:column}.portal-negotiation-actions .btn{width:100%}.portal-negotiation-field .input-with-action{grid-template-columns:1fr}}

/* Stable layout rebuild additions */
.pipeline-status-filter{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font:inherit;font-size:11px;font-weight:650;cursor:pointer}
.pipeline-status-filter:hover{border-color:var(--accent);background:var(--soft)}
.pipeline-status-filter.active{border-color:var(--accent);background:color-mix(in srgb,var(--user-app-color,#0f2f49) 10%,var(--panel));color:var(--text);box-shadow:0 0 0 2px color-mix(in srgb,var(--user-app-color,#0f2f49) 8%,transparent)}
.pipeline-status-filter b{min-width:19px;height:19px;display:grid;place-items:center;padding:0 5px;border-radius:999px;background:color-mix(in srgb,var(--muted) 12%,transparent);font-size:9px}
.pipeline-filter-actions{display:inline-flex;gap:4px;margin-left:6px}
.pipeline-filter-actions button{min-height:30px;padding:5px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font:inherit;font-size:10px;font-weight:650;cursor:pointer}
.pipeline-filter-actions button:hover{border-color:var(--accent);background:var(--soft)}
.pipeline-contact-filter{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;padding:9px 12px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:11px;background:color-mix(in srgb,var(--accent) 7%,var(--panel));font-size:12px;color:var(--muted)}
.pipeline-contact-filter[hidden]{display:none!important}
.pipeline-contact-filter strong{color:var(--text)}
.pipeline-contact-filter button{min-height:30px;padding:5px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);font:inherit;font-size:11px;font-weight:750;cursor:pointer}
.pipeline-contact-filter button:hover{border-color:var(--accent);background:var(--soft)}
@media(max-width:760px){.pipeline-filter-actions{width:100%;margin-left:0}}

/* Dashboard without graph: executive overview */
.executive-stat .widget-content{
  display:grid;
  align-content:center;
  gap:4px;
  min-height:100%;
}
.executive-stat .widget-content>span{
  color:var(--muted);
  font-size:10px;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.executive-stat .widget-content>strong{
  font-size:27px;
  line-height:1.05;
  letter-spacing:-.045em;
}
.executive-stat .widget-content>small{
  color:var(--muted);
  font-size:9px;
}
.executive-list-card .widget-content{
  min-height:100%;
}
.dashboard-action-list,
.dashboard-opportunity-list{
  display:grid;
  gap:8px;
}
.dashboard-action-row,
.dashboard-opportunity-row,
.dashboard-compact-row{
  width:100%;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--panel);
  color:var(--text);
  font:inherit;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.dashboard-action-row:hover,
.dashboard-opportunity-row:hover,
.dashboard-compact-row:hover{
  border-color:var(--accent);
  background:var(--soft);
  transform:translateY(-1px);
}
.dashboard-action-row{
  display:grid;
  grid-template-columns:82px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:11px 12px;
  text-align:left;
}
.dashboard-action-date{
  color:var(--muted);
  font-size:10px;
  font-weight:700;
}
.dashboard-action-copy strong,
.dashboard-action-copy small{
  display:block;
}
.dashboard-action-copy strong{
  font-size:12px;
}
.dashboard-action-copy small{
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
}
.dashboard-action-arrow{
  color:var(--muted);
  font-size:19px;
}
.dashboard-opportunity-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:12px;
  align-items:center;
  padding:12px;
  text-align:left;
}
.dashboard-opportunity-main strong,
.dashboard-opportunity-main small{
  display:block;
}
.dashboard-opportunity-main strong{
  font-size:12px;
}
.dashboard-opportunity-main small{
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
}
.dashboard-opportunity-value{
  font-size:12px;
  white-space:nowrap;
}
.dashboard-compact-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:9px 10px;
  margin-bottom:6px;
  text-align:left;
}
.dashboard-compact-row span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard-compact-row b{
  white-space:nowrap;
}
@media(max-width:700px){
  .dashboard-action-row{
    grid-template-columns:1fr auto;
  }
  .dashboard-action-date{
    grid-column:1/-1;
  }
  .dashboard-opportunity-row{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .dashboard-opportunity-value{
    grid-column:1/-1;
  }
}
.device-verification-modal{z-index:300}
.device-verification-card{max-width:520px;text-align:center}
.device-verification-card label{display:grid;gap:7px;text-align:left;margin:20px 0}
.device-verification-card input{font-size:28px;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
.device-verification-card .row{justify-content:center}
@media(max-width:560px){
  .device-verification-modal{padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
  .device-verification-card{width:100%;max-height:calc(100dvh - 24px);padding:20px}
  .device-verification-card input{font-size:24px;letter-spacing:.25em}
  .device-verification-card .row{display:grid;grid-template-columns:1fr}
  .device-verification-card .btn{width:100%}
}

/* Nivo4 V4 Dashboard rebuild */
#dashboard{
  min-width:0;
}
.dashboard-toolbar,
#dashboardGrid,
.dashboard-widget,
.widget-handle,
.widget-resize-handle{
  display:none!important;
}
.dashboard-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}
.dashboard-hero h2{
  margin:5px 0 7px;
  font-size:31px;
  letter-spacing:-.04em;
}
.dashboard-hero p{
  margin:0;
  color:var(--muted);
}
.dashboard-kpi-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.dashboard-kpi-card{
  display:grid;
  gap:5px;
  min-height:126px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  box-shadow:0 10px 26px rgba(15,23,42,.05);
}
.dashboard-kpi-card.primary{
  background:color-mix(in srgb,var(--user-app-color,#0f2f49) 9%,var(--panel));
  border-color:color-mix(in srgb,var(--user-app-color,#0f2f49) 34%,var(--line));
}
.dashboard-kpi-card>span{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.dashboard-kpi-card>strong{
  margin-top:4px;
  font-size:29px;
  line-height:1;
  letter-spacing:-.05em;
}
.dashboard-kpi-card>small{
  margin-top:auto;
  color:var(--muted);
  font-size:9px;
}
.dashboard-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:16px;
}
.dashboard-secondary-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
}
.dashboard-panel{
  min-width:0;
}
.dashboard-action-list,
.dashboard-opportunity-list,
.dashboard-product-list{
  display:grid;
  gap:8px;
}
.dashboard-summary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.dashboard-summary-grid>div{
  display:grid;
  gap:4px;
  min-height:82px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--soft);
}
.dashboard-summary-grid span{
  color:var(--muted);
  font-size:9px;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.dashboard-summary-grid strong{
  font-size:20px;
}
.dashboard-product-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--panel);
}
.dashboard-product-row span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard-product-row strong{
  min-width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--soft);
}
.dashboard-action-row,
.dashboard-opportunity-row{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  color:var(--text);
  font:inherit;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.dashboard-action-row:hover,
.dashboard-opportunity-row:hover{
  border-color:var(--accent);
  background:var(--soft);
  transform:translateY(-1px);
}
.dashboard-action-row{
  display:grid;
  grid-template-columns:82px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px;
  text-align:left;
}
.dashboard-action-date{
  color:var(--muted);
  font-size:10px;
  font-weight:700;
}
.dashboard-action-copy strong,
.dashboard-action-copy small{
  display:block;
}
.dashboard-action-copy small{
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
}
.dashboard-action-arrow{
  color:var(--muted);
  font-size:20px;
}
.dashboard-opportunity-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:12px;
  align-items:center;
  padding:12px;
  text-align:left;
}
.dashboard-opportunity-main strong,
.dashboard-opportunity-main small{
  display:block;
}
.dashboard-opportunity-main small{
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
}
.dashboard-opportunity-value{
  white-space:nowrap;
}
@media(max-width:1000px){
  .dashboard-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .dashboard-main-grid,
  .dashboard-secondary-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:640px){
  .dashboard-hero{
    align-items:flex-start;
    flex-direction:column;
  }
  .dashboard-hero .btn{
    width:100%;
  }
  .dashboard-kpi-grid{
    grid-template-columns:1fr;
  }
  .dashboard-action-row{
    grid-template-columns:1fr auto;
  }
  .dashboard-action-date{
    grid-column:1/-1;
  }
  .dashboard-opportunity-row{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .dashboard-opportunity-value{
    grid-column:1/-1;
  }
}

/* Calculator rebuild without artwork dimensions */
#calculator .calc-grid .grid.three{
  align-items:start;
}
#calculator .calc-grid .grid.three>label{
  min-width:0;
}
@media(min-width:1100px){
  #calculator .calc-grid>article:first-child .grid.three{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Calculator button and input interaction repair */
#calculator button,
#calculator input,
#calculator select,
#calculator textarea{
  position:relative;
  z-index:1;
  pointer-events:auto;
}
#calculateBtn:active,
#saveQuote:active,
#resetCalc:active,
#copyQuote:active,
#printQuote:active{
  transform:translateY(1px);
}

/* Apply and update Pipeline feedback */
#applyPortalNegotiation[disabled]{
  cursor:wait;
  opacity:.72;
}
#portalNegotiationStatus{
  min-height:18px;
  line-height:1.4;
}

/* Official quote email request */
.portal-email-request-hint{
  display:block;
  margin:-4px 2px 4px;
  color:#7b8494;
  font-size:9px;
  line-height:1.4;
}
#portalRequestQuote[disabled]{
  opacity:.65;
  cursor:not-allowed;
}

/* Unified prospect price negotiation */
.unified-negotiation-toggle{
  max-width:420px;
}
.portal-maker-badge{
  background:color-mix(in srgb,var(--user-app-color,#0f2f49) 86%,#ffffff)!important;
}
.portal-negotiation-panel:not(.hidden)::before{
  content:"Price negotiation"!important;
}

/* Smooth Order Now confirmation */
.order-thank-you-modal{
  z-index:2147483600!important;
}
.order-thank-you-card{
  width:min(480px,100%);
  padding:34px;
  text-align:center;
  border-radius:24px;
}
.order-success-icon{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  margin:0 auto 17px;
  border-radius:50%;
  background:#ecfdf3;
  border:1px solid #bbf7d0;
  color:#15803d;
  font-size:30px;
  font-weight:800;
  box-shadow:0 12px 28px rgba(21,128,61,.13);
}
.order-thank-you-card h2{
  margin:7px 0 10px;
  font-size:27px;
  letter-spacing:-.04em;
}
.order-thank-you-card p{
  margin:7px auto;
  max-width:390px;
  color:var(--muted);
  line-height:1.6;
}
.order-confirmation-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:22px 0;
  text-align:left;
}
.order-confirmation-summary>div{
  display:grid;
  gap:5px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--soft);
}
.order-confirmation-summary span{
  color:var(--muted);
  font-size:9px;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.order-confirmation-summary strong{
  font-size:14px;
}
.order-thank-you-card>.btn{
  width:100%;
}
.portal-action-button[disabled]{
  cursor:wait;
  opacity:.72;
}
@media(max-width:520px){
  .order-thank-you-card{
    padding:26px 18px;
  }
  .order-confirmation-summary{
    grid-template-columns:1fr;
  }
}

/* Cleaned Pipeline workspace */
#pipeline .forecast-hero{
  margin-bottom:18px;
}
#pipeline .forecast-summary-grid{
  margin-bottom:18px;
}
#pipeline .forecast-top-layout{
  margin-top:0!important;
  margin-bottom:18px;
}
#pipeline .forecast-table-card{
  margin-top:0!important;
}
#pipeline .forecast-toolbar{
  align-items:flex-end;
}
#pipeline .forecast-toolbar-controls{
  flex-wrap:wrap;
}
#pipeline .forecast-list{
  min-height:320px;
}
#pipeline .forecast-row{
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
#pipeline .forecast-row:hover{
  transform:translateY(-1px);
}
@media(max-width:980px){
  #pipeline .forecast-top-layout{
    grid-template-columns:1fr!important;
  }
}

/* Pipeline top panels — equal-height rebuild */
#pipeline .pipeline-equal-panels{
  --pipeline-panel-height: 540px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
  margin-top:18px;
  margin-bottom:18px;
}

#pipeline .pipeline-overview-card{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  height:var(--pipeline-panel-height);
  min-height:var(--pipeline-panel-height);
  max-height:var(--pipeline-panel-height);
  padding:24px;
  overflow:hidden;
}

#pipeline .pipeline-card-head{
  min-height:126px;
  margin:0;
  padding:0 0 18px;
  align-items:flex-start;
  border-bottom:1px solid var(--line);
}

#pipeline .pipeline-card-head>div{
  min-width:0;
}

#pipeline .pipeline-card-head h2{
  margin:4px 0 7px;
  line-height:1.12;
}

#pipeline .pipeline-card-head p{
  max-width:310px;
  margin:0;
  color:var(--muted);
  line-height:1.55;
}

#pipeline .pipeline-card-head .chart-type-control{
  flex:0 0 auto;
  min-width:132px;
}

#pipeline .pipeline-panel-content{
  min-width:0;
  min-height:0;
  padding-top:18px;
}

#pipeline .pipeline-chart-content{
  display:grid;
  align-items:center;
  overflow:hidden;
}

#pipeline .pipeline-chart-content>.stage-chart,
#pipeline .pipeline-chart-content>.forecast-bar-graph{
  width:100%;
  min-height:0;
  max-height:100%;
  margin:0;
}

#pipeline .pipeline-actions-content{
  overflow:hidden;
}

#pipeline .pipeline-actions-content .upcoming-actions{
  height:100%;
  max-height:100%;
  padding-right:5px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  align-content:start;
}

#pipeline .pipeline-actions-content .upcoming-actions::-webkit-scrollbar{
  width:7px;
}

#pipeline .pipeline-actions-content .upcoming-actions::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:color-mix(in srgb,var(--muted) 32%,transparent);
}

#pipeline .upcoming-action{
  min-height:82px;
  flex:none;
}

#pipeline .forecast-table-card{
  margin-top:0!important;
}

/* Avoid older rules forcing mismatched card heights. */
#pipeline .forecast-graphs-grid,
#pipeline .forecast-graphs-grid .forecast-chart-card{
  min-height:0;
  height:auto;
}

/* Medium desktop: keep equal height, use two columns with actions full width. */
@media(max-width:1280px) and (min-width:901px){
  #pipeline .pipeline-equal-panels{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #pipeline .pipeline-overview-card{
    --pipeline-panel-height:500px;
  }

  #pipeline .forecast-actions-card{
    grid-column:1/-1;
    height:420px;
    min-height:420px;
    max-height:420px;
  }
}

/* Tablet and mobile: panels stack and can grow naturally. */
@media(max-width:900px){
  #pipeline .pipeline-equal-panels{
    grid-template-columns:1fr;
  }

  #pipeline .pipeline-overview-card{
    height:auto;
    min-height:420px;
    max-height:none;
  }

  #pipeline .forecast-actions-card{
    min-height:440px;
  }

  #pipeline .pipeline-actions-content .upcoming-actions{
    max-height:330px;
  }
}

@media(max-width:600px){
  #pipeline .pipeline-overview-card{
    min-height:390px;
    padding:18px;
  }

  #pipeline .pipeline-card-head{
    min-height:0;
    flex-direction:column;
    gap:12px;
  }

  #pipeline .pipeline-card-head .chart-type-control{
    width:100%;
  }

  #pipeline .pipeline-card-head .chart-type-control select{
    width:100%;
  }

  #pipeline .upcoming-action{
    grid-template-columns:1fr auto;
  }

  #pipeline .upcoming-date{
    grid-column:1/-1;
  }
}

/* Single page-header rebuild */
#dashboard .dashboard-hero,
#pipeline .forecast-hero,
#externalQuotes .external-quotes-hero{
  display:none!important;
}

.page-content-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:42px;
  margin:0 0 18px;
}

.page-content-actions .btn{
  min-height:40px;
  padding-inline:16px;
}

/* The global topbar is the only page title area. */
.topbar{
  min-height:82px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}

.topbar h1{
  margin:0;
  font-size:28px;
  line-height:1.05;
  letter-spacing:-.035em;
}

.topbar p{
  margin:6px 0 0;
  max-width:720px;
  color:var(--muted);
  line-height:1.45;
}

/* Consistent content rhythm across the rebuilt tabs. */
#dashboard,
#pipeline,
#externalQuotes{
  padding-top:22px;
}

#dashboard .dashboard-kpi-grid,
#pipeline .forecast-summary-grid,
#externalQuotes .external-kpi-grid{
  margin-top:0!important;
}

#dashboard .section-gap,
#pipeline .section-gap,
#externalQuotes .section-gap{
  margin-top:18px;
}

#dashboard .card,
#pipeline .card,
#externalQuotes .card{
  border-radius:18px;
}

#dashboard .card-head,
#pipeline .card-head,
#externalQuotes .card-head{
  gap:18px;
}

#dashboard .card-head h2,
#pipeline .card-head h2,
#externalQuotes .card-head h2{
  margin-top:3px;
  letter-spacing:-.025em;
}

#externalQuotes .external-list-head{
  align-items:flex-end;
}

#externalQuotes .external-search{
  min-width:280px;
}

#pipeline .pipeline-equal-panels{
  margin-top:18px!important;
}

#pipeline .forecast-summary-grid{
  margin-bottom:0!important;
}

#dashboard .dashboard-kpi-grid{
  margin-bottom:0;
}

@media(max-width:760px){
  .page-content-actions{
    justify-content:stretch;
    margin-bottom:14px;
  }

  .page-content-actions .btn{
    width:100%;
  }

  .topbar{
    align-items:flex-start;
  }

  #externalQuotes .external-list-head{
    align-items:stretch;
    flex-direction:column;
  }

  #externalQuotes .external-search{
    min-width:0;
    width:100%;
  }
}


/* V5 consolidated contact-email validation */
#cContactEmail:invalid:not(:placeholder-shown){
  border-color:#dc2626;
}
#cContactEmail:valid:not(:placeholder-shown){
  border-color:color-mix(in srgb,#16a34a 55%,var(--line));
}

/* V5 Pipeline Actions menu — touch and foreground fix */
#pipeline .forecast-table-card,
#pipeline .forecast-list,
#pipeline .forecast-row,
#pipeline .forecast-actions,
#pipeline .forecast-action-menu{
  overflow:visible!important;
}

.forecast-action-trigger{
  position:relative;
  z-index:2;
  min-height:38px;
  min-width:104px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.forecast-action-trigger[aria-expanded="true"]{
  border-color:var(--accent);
  background:var(--soft);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--user-app-color,#0f2f49) 10%,transparent);
}

.forecast-action-dropdown{
  display:none;
  min-width:180px!important;
  padding:6px!important;
  border:1px solid var(--line)!important;
  border-radius:13px!important;
  background:var(--panel)!important;
  box-shadow:0 24px 70px rgba(15,23,42,.28)!important;
  isolation:isolate;
}

.forecast-action-dropdown.open{
  display:grid!important;
  gap:2px;
  animation:forecastActionsOpen .12s ease-out;
}

.forecast-action-dropdown[data-floating="true"]{
  position:fixed!important;
  z-index:2147483646!important;
}

.forecast-action-dropdown button{
  width:100%;
  min-height:40px;
  display:flex;
  align-items:center;
  padding:9px 11px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:11px;
  text-align:left;
  cursor:pointer;
  touch-action:manipulation;
}

.forecast-action-dropdown button:hover,
.forecast-action-dropdown button:focus-visible{
  background:var(--soft);
  outline:none;
}

.forecast-action-dropdown button.danger{
  color:#dc2626;
}

.forecast-action-dropdown button.danger:hover,
.forecast-action-dropdown button.danger:focus-visible{
  background:#fef2f2;
}

@keyframes forecastActionsOpen{
  from{
    opacity:0;
    transform:translateY(-4px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@media(max-width:760px){
  .forecast-action-trigger{
    min-width:96px;
  }

  .forecast-action-dropdown{
    min-width:190px!important;
  }
}

/* V5 stable global Pipeline Actions menu */
.pipeline-global-actions-menu{
  position:fixed;
  left:-9999px;
  top:-9999px;
  z-index:2147483646;
  display:none;
  min-width:184px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel);
  box-shadow:0 24px 70px rgba(15,23,42,.30);
}

.pipeline-global-actions-menu.open{
  display:grid;
  gap:2px;
  animation:pipelineGlobalMenuOpen .1s ease-out;
}

.pipeline-global-actions-menu button{
  width:100%;
  min-height:41px;
  display:flex;
  align-items:center;
  padding:9px 11px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:11px;
  text-align:left;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.pipeline-global-actions-menu button:hover,
.pipeline-global-actions-menu button:focus-visible{
  background:var(--soft);
  outline:none;
}

.pipeline-global-actions-menu button.danger{
  color:#dc2626;
}

.pipeline-global-actions-menu button.danger:hover,
.pipeline-global-actions-menu button.danger:focus-visible{
  background:#fef2f2;
}

.forecast-action-trigger{
  min-width:104px;
  min-height:38px;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.forecast-action-trigger[aria-expanded="true"]{
  border-color:var(--accent);
  background:var(--soft);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--user-app-color,#0f2f49) 10%,transparent);
}

@keyframes pipelineGlobalMenuOpen{
  from{
    opacity:0;
    transform:translateY(-3px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* Disable old row-contained dropdowns completely. */
.forecast-action-dropdown{
  display:none!important;
}

/* Reliable Settings save feedback */
#saveSettings[disabled]{
  cursor:wait;
  opacity:.72;
}
#settingsSaveMessage{
  transition:color .15s ease;
}

/* Rebuilt Settings persistence feedback */
#settingsSaveMessage{display:block;min-height:16px}
#saveSettings[disabled]{cursor:wait;opacity:.7}

/* Protected recalculation confirmation */
.recalculate-confirmation-modal{
  z-index:2147483600!important;
}
.recalculate-confirmation-card{
  width:min(520px,100%);
  padding:32px;
  border-radius:22px;
}
.recalculate-warning-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin-bottom:16px;
  border-radius:50%;
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#c2410c;
  font-size:28px;
  font-weight:850;
}
.recalculate-confirmation-card h2{
  margin:6px 0 10px;
  font-size:26px;
  letter-spacing:-.04em;
}
.recalculate-confirmation-card>p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}
.recalculate-price-comparison{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:22px 0;
}
.recalculate-price-comparison>div{
  display:grid;
  gap:5px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--soft);
}
.recalculate-price-comparison span{
  color:var(--muted);
  font-size:9px;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.recalculate-price-comparison strong{
  font-size:14px;
}
.recalculate-confirmation-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
@media(max-width:560px){
  .recalculate-confirmation-card{
    padding:24px 18px;
  }
  .recalculate-price-comparison{
    grid-template-columns:1fr;
  }
  .recalculate-confirmation-actions{
    flex-direction:column-reverse;
  }
  .recalculate-confirmation-actions .btn{
    width:100%;
  }
}

/* Current calculated price selection */
.recalculate-price-comparison{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(max-width:700px){
  .recalculate-price-comparison{
    grid-template-columns:1fr;
  }
}

/* Total Recalculated Price source-of-truth */
#cRrp{
  font-weight:700;
}
#cRrp:focus{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--user-app-color,#0f2f49) 12%,transparent);
}

/* Machine edit units and monetary maintenance */
.machine-edit-grid{
  align-items:start;
}
.machine-field{
  display:grid;
  gap:7px;
}
.machine-label-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.machine-label-line>span{
  min-width:0;
}
.unit-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:3px 7px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--soft);
  color:var(--muted);
  font-size:9px;
  font-weight:750;
  line-height:1;
  letter-spacing:.02em;
  text-transform:none;
}
.machine-field input{
  width:100%;
}

/* Machine edit save reliability */
.machine-edit-grid input{
  font-variant-numeric:tabular-nums;
}
#modalSave[disabled],
#saveModal[disabled]{
  cursor:wait;
  opacity:.72;
}

/* Verified machine and currency saving */
#modalSave[disabled],
#saveSettings[disabled]{
  cursor:wait;
  opacity:.7;
}
#sCurrency{
  font-weight:700;
}

/* Compact Machines list with one-line Actions menu */
#machines .card{
  overflow:visible;
}

#machineList{
  display:grid;
  gap:8px;
  overflow:visible;
}

.machine-list-row{
  display:grid;
  grid-template-columns:28px minmax(150px,1.45fr) repeat(5,minmax(92px,.85fr)) 112px;
  gap:12px;
  align-items:center;
  min-height:66px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel);
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
  overflow:visible;
}

.machine-list-row:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--user-app-color,#0f2f49) 24%,var(--line));
  box-shadow:0 10px 26px rgba(15,23,42,.07);
}

.machine-list-row[role="button"]{
  cursor:pointer;
}

.machine-list-row[role="button"]:focus-visible{
  outline:3px solid rgba(0,113,227,.32);
  outline-offset:2px;
}

.machine-list-row.dragging{
  opacity:.58;
}

.machine-list-name,
.machine-list-value{
  min-width:0;
}

.machine-list-name{
  display:grid;
  gap:3px;
}

.machine-list-name strong,
.machine-list-name small,
.machine-list-value strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.machine-list-name strong{
  font-size:12px;
}

.machine-list-name small,
.machine-list-value span{
  color:var(--muted);
  font-size:9px;
}

.machine-list-value{
  display:grid;
  gap:4px;
}

.machine-list-value span{
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:700;
}

.machine-list-value strong{
  font-size:11px;
  font-variant-numeric:tabular-nums;
}

.machine-list-actions{
  display:flex;
  justify-content:flex-end;
}

.machine-action-trigger{
  min-width:100px;
}

.machine-global-actions-menu{
  min-width:184px;
}

@media(max-width:1180px){
  .machine-list-row{
    grid-template-columns:28px minmax(140px,1.4fr) repeat(3,minmax(90px,.8fr)) 108px;
  }

  .machine-list-row .machine-list-value:nth-of-type(5),
  .machine-list-row .machine-list-value:nth-of-type(6){
    display:none;
  }
}

@media(max-width:820px){
  .machine-list-row{
    grid-template-columns:26px minmax(130px,1.4fr) minmax(90px,.8fr) minmax(90px,.8fr) 104px;
  }

  .machine-list-row .machine-list-value:nth-of-type(n+4){
    display:none;
  }
}

@media(max-width:560px){
  .machine-list-row{
    grid-template-columns:24px minmax(0,1fr) 98px;
    gap:9px;
  }

  .machine-list-row .machine-list-value{
    display:none!important;
  }

  .machine-action-trigger{
    min-width:92px;
  }
}

/* Compact Product Library list */
#products .card{
  overflow:visible;
}

#productList{
  display:grid;
  gap:8px;
  overflow:visible;
}
.product-library-actions{display:flex;align-items:flex-end;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.product-list-filter{display:grid;gap:5px;color:var(--muted);font-size:11px;font-weight:750}
.product-list-filter select{min-width:210px}
@media(max-width:650px){
  .product-library-actions{width:100%;align-items:stretch}
  .product-list-filter,.product-list-filter select,.product-create-menu,.product-create-trigger{width:100%}
}

/* Editable dashboard layout */
.dashboard-editable-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-flow:dense;
  grid-auto-rows:64px;
  gap:14px;
  align-items:stretch;
}
.dashboard-editable-panel{
  position:relative;
  grid-column:span var(--dashboard-panel-cols,4);
  grid-row:span var(--dashboard-panel-rows,2);
  min-width:0;
  min-height:0;
  margin:0!important;
  overflow:hidden;
  transition:box-shadow .16s ease,border-color .16s ease,opacity .16s ease,transform .16s ease;
}
.dashboard-editable-panel:hover{
  border-color:color-mix(in srgb,var(--user-app-color,#0f2f49) 50%,var(--line));
}
.dashboard-panel-drag-handle{
  cursor:move!important;
  touch-action:none;
  user-select:none;
}
.dashboard-kpi-card .dashboard-panel-drag-handle{
  margin:-20px -20px 0;
  padding:17px 20px 8px;
}
.dashboard-editable-panel.dashboard-panel-dragging{
  z-index:20;
  opacity:.72;
  cursor:grabbing!important;
  transform:scale(.985);
  box-shadow:0 22px 48px rgba(15,23,42,.18);
}
.dashboard-editable-panel.dashboard-panel-resizing{
  z-index:19;
  border-color:var(--user-app-color,#0f2f49);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--user-app-color,#0f2f49) 15%,transparent);
}
.dashboard-panel .dashboard-action-list,
.dashboard-panel .dashboard-opportunity-list,
.dashboard-panel .dashboard-product-list{
  max-height:calc(100% - 74px);
  overflow:auto;
}
.dashboard-resize-handle{
  position:absolute;
  z-index:12;
  display:block;
  touch-action:none;
}
.dashboard-resize-n,.dashboard-resize-s{left:10px;right:10px;height:8px}
.dashboard-resize-n{top:0;cursor:ns-resize}
.dashboard-resize-s{bottom:0;cursor:ns-resize}
.dashboard-resize-e,.dashboard-resize-w{top:10px;bottom:10px;width:8px}
.dashboard-resize-e{right:0;cursor:ew-resize}
.dashboard-resize-w{left:0;cursor:ew-resize}
.dashboard-resize-ne,.dashboard-resize-nw,.dashboard-resize-se,.dashboard-resize-sw{width:14px;height:14px}
.dashboard-resize-ne{top:0;right:0;cursor:nesw-resize}
.dashboard-resize-nw{top:0;left:0;cursor:nwse-resize}
.dashboard-resize-se{right:0;bottom:0;cursor:nwse-resize}
.dashboard-resize-sw{left:0;bottom:0;cursor:nesw-resize}
@media(max-width:760px){
  .dashboard-editable-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .dashboard-editable-panel{
    grid-column:1!important;
    grid-row:auto!important;
    min-height:126px;
  }
  .dashboard-resize-handle{display:none}
}

.product-list-row{
  display:grid;
  grid-template-columns:28px minmax(150px,1.45fr) repeat(6,minmax(90px,.82fr)) 112px;
  gap:12px;
  align-items:center;
  min-height:66px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel);
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
  overflow:visible;
}

.product-list-row:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--user-app-color,#0f2f49) 24%,var(--line));
  box-shadow:0 10px 26px rgba(15,23,42,.07);
}

.product-list-row.dragging{
  opacity:.58;
}

.product-list-name,
.product-list-value{
  min-width:0;
}

.product-list-name{
  display:grid;
  gap:3px;
}

.product-list-name strong,
.product-list-name small,
.product-list-value strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.product-list-name strong{
  font-size:12px;
}

.product-list-name small,
.product-list-value span{
  color:var(--muted);
  font-size:9px;
}

.product-list-value{
  display:grid;
  gap:4px;
}

.product-list-value span{
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:700;
}

.product-list-value strong{
  font-size:11px;
  font-variant-numeric:tabular-nums;
}

.product-list-actions{
  display:flex;
  justify-content:flex-end;
}

.product-action-trigger{
  min-width:100px;
}

.product-global-actions-menu{
  min-width:184px;
}

/* Product detail units */
.product-edit-grid{
  align-items:start;
}

.product-field{
  display:grid;
  gap:7px;
}

.product-machine-field{
  grid-column:1/-1;
}

.product-field input,
.product-field select{
  width:100%;
}

@media(max-width:1260px){
  .product-list-row{
    grid-template-columns:28px minmax(140px,1.45fr) repeat(4,minmax(88px,.8fr)) 108px;
  }

  .product-list-row .product-list-value:nth-of-type(6),
  .product-list-row .product-list-value:nth-of-type(7){
    display:none;
  }
}

@media(max-width:900px){
  .product-list-row{
    grid-template-columns:26px minmax(130px,1.4fr) repeat(3,minmax(86px,.8fr)) 104px;
  }

  .product-list-row .product-list-value:nth-of-type(n+5){
    display:none;
  }
}

@media(max-width:620px){
  .product-list-row{
    grid-template-columns:24px minmax(0,1fr) 98px;
    gap:9px;
  }

  .product-list-row .product-list-value{
    display:none!important;
  }

  .product-action-trigger{
    min-width:92px;
  }

  .product-machine-field{
    grid-column:auto;
  }
}

/* Currency type lives inside monetary inputs, never above the field. */
.currency-input-shell{
  min-width:0;
  width:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:stretch;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--panel);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.currency-input-shell:focus-within{
  border-color:var(--user-app-color,var(--accent));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--user-app-color,var(--accent)) 13%,transparent);
}
.currency-input-shell .currency-input-prefix,
.currency-input-shell .currency-input-suffix{
  display:flex;
  align-items:center;
  padding:0 10px;
  background:var(--soft);
  color:var(--muted);
  font-size:10px;
  font-weight:850;
  white-space:nowrap;
  pointer-events:none;
}
.currency-input-shell .currency-input-prefix{
  border-right:1px solid var(--line);
}
.currency-input-shell .currency-input-suffix{
  border-left:1px solid var(--line);
}
.currency-input-shell input{
  min-width:0!important;
  width:100%!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:var(--panel)!important;
  font-variant-numeric:tabular-nums;
  text-align:right;
}
[data-theme=dark] .currency-input-shell,
[data-theme=dark] .currency-input-shell input{
  background:var(--panel)!important;
}
.portal-negotiation-field .input-with-action>.currency-input-shell{
  min-width:0;
}

/* Product Library drag-and-drop repair */
.product-list-row{
  position:relative;
}

.product-list-row.dragging{
  opacity:.48;
  transform:scale(.995);
}

.product-list-row.drag-over-before::before,
.product-list-row.drag-over-after::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  height:3px;
  border-radius:999px;
  background:var(--accent);
  pointer-events:none;
  z-index:4;
}

.product-list-row.drag-over-before::before{
  top:-6px;
}

.product-list-row.drag-over-after::after{
  bottom:-6px;
}

.product-list-row .drag-handle{
  cursor:grab;
  user-select:none;
  touch-action:none;
}

.product-list-row.dragging .drag-handle{
  cursor:grabbing;
}

.product-action-trigger{
  touch-action:manipulation;
}

/* Machines drag-and-drop repair */
.machine-list-row{
  position:relative;
}

.machine-list-row.drag-armed{
  border-color:color-mix(in srgb,var(--user-app-color,#0f2f49) 32%,var(--line));
}

.machine-list-row.dragging{
  opacity:.46;
  transform:none!important;
  box-shadow:none;
}

.machine-list-row.drag-over-before::before,
.machine-list-row.drag-over-after::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  height:3px;
  border-radius:999px;
  background:var(--accent);
  pointer-events:none;
  z-index:5;
}

.machine-list-row.drag-over-before::before{
  top:-6px;
}

.machine-list-row.drag-over-after::after{
  bottom:-6px;
}

.machine-list-row .drag-handle{
  cursor:grab;
  user-select:none;
  touch-action:none;
  -webkit-user-drag:none;
}

.machine-list-row.dragging .drag-handle{
  cursor:grabbing;
}

.machine-list-row:has(.machine-action-trigger[aria-expanded="true"]){
  z-index:2;
}

.machine-action-trigger{
  touch-action:manipulation;
}

/* Green Actions buttons */
.forecast-action-trigger,
.machine-action-trigger,
.product-action-trigger{
  background:#1f9d55 !important;
  border-color:#1f9d55 !important;
  color:#fff !important;
}
.forecast-action-trigger:hover,
.machine-action-trigger:hover,
.product-action-trigger:hover{
  background:#18864a !important;
  border-color:#18864a !important;
}

/* Action button dropdown indicator */
.forecast-action-trigger,
.machine-action-trigger,
.product-action-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.forecast-action-chevron{
  color:currentColor !important;
  font-size:11px;
  font-weight:700;
  line-height:1;
}

/* Compact External Quotes list */
#externalQuotes .card,
#externalQuotes .external-quotes-list-card{
  overflow:visible;
}

#externalQuotesList{
  display:grid;
  gap:8px;
  overflow:visible;
}

.external-compact-row{
  display:grid;
  grid-template-columns:minmax(180px,1.45fr) minmax(150px,1.1fr) minmax(120px,.8fr) minmax(95px,.7fr) minmax(105px,.75fr) 112px;
  gap:12px;
  align-items:center;
  min-height:68px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel);
  cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
  overflow:visible;
}

.external-compact-row:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--user-app-color,#0f2f49) 24%,var(--line));
  box-shadow:0 10px 26px rgba(15,23,42,.07);
}

.external-compact-main,
.external-compact-value{
  min-width:0;
}

.external-compact-main,
.external-compact-value{
  display:grid;
  gap:3px;
}

.external-compact-main strong,
.external-compact-main small,
.external-compact-value strong,
.external-compact-value small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.external-compact-main strong{
  font-size:12px;
}

.external-compact-main small,
.external-compact-value small,
.external-compact-value span{
  color:var(--muted);
  font-size:9px;
}

.external-compact-value span{
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:700;
}

.external-compact-value strong{
  font-size:11px;
  font-variant-numeric:tabular-nums;
}

.external-compact-actions{
  display:flex;
  justify-content:flex-end;
}

.external-action-trigger{
  min-width:100px;
}

.external-global-actions-menu{
  min-width:184px;
}

@media(max-width:1100px){
  .external-compact-row{
    grid-template-columns:minmax(170px,1.4fr) minmax(140px,1fr) minmax(105px,.8fr) minmax(95px,.7fr) 108px;
  }

  .external-compact-row .external-compact-value:nth-of-type(5){
    display:none;
  }
}

@media(max-width:820px){
  .external-compact-row{
    grid-template-columns:minmax(150px,1.4fr) minmax(120px,1fr) minmax(100px,.8fr) 104px;
  }

  .external-compact-row .external-compact-value:nth-of-type(4),
  .external-compact-row .external-compact-value:nth-of-type(5){
    display:none;
  }
}

@media(max-width:580px){
  .external-compact-row{
    grid-template-columns:minmax(0,1fr) 98px;
    gap:9px;
  }

  .external-compact-row .external-compact-value{
    display:none!important;
  }

  .external-action-trigger{
    min-width:92px;
  }
}

/* Complete Settings persistence */
#settingsSaveMessage{
  min-height:16px;
  display:block;
}
#saveSettings[disabled]{
  cursor:wait;
  opacity:.7;
}
.settings-action-bar{
  position:sticky;
  bottom:0;
  z-index:12;
}

/* Immediate theme switching */
body,
.app-shell,
.sidebar,
.topbar,
.card,
.settings-panel,
.modal-card{
  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.item-image-editor{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:center;margin-bottom:20px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--soft)}
.item-image-preview{width:112px;height:92px;display:grid;place-items:center;overflow:hidden;border:1px dashed color-mix(in srgb,var(--muted) 45%,transparent);border-radius:13px;background:var(--panel)}
.item-image-preview img,.item-list-thumbnail img{width:100%;height:100%;object-fit:cover}
.item-image-placeholder{color:var(--muted);font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.06em}
.item-image-controls{display:grid;gap:5px}.item-image-controls>small{color:var(--muted)}.item-image-controls>div{display:flex;gap:8px;margin-top:5px}.item-image-upload{cursor:pointer}
.item-list-thumbnail{width:42px;height:42px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.item-list-thumbnail-empty{color:var(--muted);font-size:13px;font-weight:800}
.product-list-row{grid-template-columns:28px 42px minmax(150px,1.45fr) repeat(6,minmax(90px,.82fr)) 112px}
.machine-list-row{grid-template-columns:28px 42px minmax(150px,1.45fr) repeat(5,minmax(92px,.85fr)) 112px}
@media(max-width:1260px){.product-list-row{grid-template-columns:28px 42px minmax(140px,1.45fr) repeat(4,minmax(88px,.8fr)) 108px}}
@media(max-width:1180px){.machine-list-row{grid-template-columns:28px 42px minmax(140px,1.4fr) repeat(3,minmax(90px,.8fr)) 108px}}
@media(max-width:900px){.product-list-row{grid-template-columns:26px 42px minmax(130px,1.4fr) repeat(3,minmax(86px,.8fr)) 104px}}
@media(max-width:820px){.machine-list-row{grid-template-columns:26px 42px minmax(130px,1.4fr) minmax(90px,.8fr) minmax(90px,.8fr) 104px}}
@media(max-width:620px){.product-list-row{grid-template-columns:24px 40px minmax(0,1fr) 98px}}
@media(max-width:560px){.machine-list-row{grid-template-columns:24px 40px minmax(0,1fr) 98px}}
@media(max-width:520px){.item-image-editor{grid-template-columns:1fr}.item-image-preview{width:100%;height:150px}}

/* Verified Product/Machine save state */
#modalSave[disabled]{
  cursor:wait;
  opacity:.72;
}

/* Generic External Configurator prospect details */
.portal-prospect-details{
  display:grid;
  gap:12px;
  margin:16px 0;
  padding:16px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--soft);
}
.portal-section-subhead{
  display:grid;
  gap:3px;
}
.portal-section-subhead small{
  color:var(--muted);
}
.portal-prospect-error{
  min-height:18px;
  margin:0;
  color:#b91c1c;
  font-size:11px;
  font-weight:700;
}
.portal-prospect-details input:invalid:not(:placeholder-shown){
  border-color:#dc2626;
}

/* Reliable prospect contact form */
.portal-prospect-details input{
  position:relative;
  z-index:1;
  pointer-events:auto;
}
.portal-prospect-details input:focus{
  outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent);
  outline-offset:1px;
}

/* Configurator access details shown before interactive pricing */
.customer-portal-access-details{
  max-width:720px;
  margin:34px auto;
  padding:28px;
  display:grid;
  gap:18px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--panel);
  box-shadow:0 22px 60px rgba(15,23,42,.12);
}

.customer-portal-access-details.hidden{
  display:none!important;
}

.portal-access-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  color:var(--accent);
  font-size:24px;
  font-weight:800;
}

.customer-portal-access-details h2,
.customer-portal-access-details p{
  margin:0;
}

.customer-portal-access-details>p{
  color:var(--muted);
}

.portal-access-values{
  display:grid;
  gap:14px;
}

.portal-access-value{
  display:grid;
  gap:7px;
}

.portal-access-value>span{
  color:var(--muted);
  font-size:10px;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.portal-access-copy-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
}

.portal-access-copy-row input{
  width:100%;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  background:var(--soft);
}

.portal-access-note{
  padding:12px 14px;
  border-radius:12px;
  background:color-mix(in srgb,var(--accent) 8%,var(--soft));
  color:var(--muted);
  font-size:11px;
}

#continueToCustomerPortal{
  justify-self:start;
}

@media(max-width:620px){
  .customer-portal-access-details{
    margin:18px 12px;
    padding:20px;
  }

  .portal-access-copy-row{
    grid-template-columns:1fr;
  }

  .portal-access-copy-row .btn,
  #continueToCustomerPortal{
    width:100%;
  }
}

/* Email validation feedback */
#portalContactEmail.email-invalid{
  border-color:#dc2626!important;
}

/* Reliable Product Actions interaction */
#productGlobalActionsMenu [data-product-action]{
  width:100%;
  cursor:pointer;
  touch-action:manipulation;
  pointer-events:auto;
}
#productGlobalActionsMenu [data-product-action]:active{
  transform:translateY(1px);
}

/* Trial and subscription management */
.subscribe-now-button{
  background:#1f9d55;
  color:#fff;
  border-color:#1f9d55;
}

.subscription-profile-card{
  margin:0 0 22px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--user-app-color,#0f2f49) 8%,var(--panel)),var(--panel));
}

.subscription-profile-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
}

.subscription-profile-head h2,
.subscription-profile-head p{
  margin:4px 0 0;
}

.subscription-profile-head p{
  color:var(--muted);
}

.subscription-status-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.subscription-status-badge.trial{
  background:#fef3c7;
  color:#92400e;
}

.subscription-status-badge.active{
  background:#dcfce7;
  color:#166534;
}

.subscription-status-badge.expired{
  background:#fee2e2;
  color:#991b1b;
}

.subscription-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}

.subscription-summary-grid>div{
  display:grid;
  gap:5px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  min-width:0;
}

.subscription-summary-grid span{
  color:var(--muted);
  font-size:9px;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.subscription-summary-grid strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}

.subscription-profile-actions{
  display:flex;
  gap:9px;
  margin-top:16px;
}

.subscription-modal .modal-card{
  position:relative;
}

.trial-reminder-card{
  width:min(520px,calc(100vw - 30px));
  text-align:center;
}

.trial-reminder-card h2{
  margin:7px 0;
}

.trial-reminder-card p{
  color:var(--muted);
}

.trial-reminder-progress{
  height:9px;
  margin:20px 0;
  overflow:hidden;
  border-radius:999px;
  background:var(--soft);
}

.trial-reminder-progress span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:#1f9d55;
  transition:width .25s ease;
}
.trial-reminder-card .subscription-days-number{color:#1f9d55}
.subscription-modal[data-urgency="warning"] .subscription-days-number{color:#d97706}
.subscription-modal[data-urgency="danger"] .subscription-days-number{color:#dc2626}
.subscription-modal[data-urgency="warning"] .trial-reminder-progress span{background:#d97706}
.subscription-modal[data-urgency="danger"] .trial-reminder-progress span{background:#dc2626}

.trial-reminder-actions{
  display:flex;
  justify-content:center;
  gap:9px;
}

.subscription-plan-card{
  width:min(820px,calc(100vw - 30px));
}

.subscription-plan-card>h2,
.subscription-plan-card>p{
  margin:6px 0;
}

.subscription-plan-card>p{
  color:var(--muted);
}

.subscription-plan-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:22px;
}

.subscription-plan{
  position:relative;
  display:grid;
  align-content:start;
  gap:12px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
}

.subscription-plan.featured{
  border:2px solid #1f9d55;
  box-shadow:0 16px 40px rgba(31,157,85,.12);
}

.subscription-plan h3{
  margin:0;
  font-size:26px;
}

.subscription-plan p,
.subscription-plan li{
  color:var(--muted);
}

.subscription-plan ul{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:6px;
}

.plan-label{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.plan-ribbon{
  position:absolute;
  top:14px;
  right:14px;
  padding:5px 8px;
  border-radius:999px;
  background:#dcfce7;
  color:#166534;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
}

.subscription-demo-note{
  margin-top:18px!important;
  font-size:10px;
}

.subscription-confirmation-card{
  width:min(520px,calc(100vw - 30px));
  text-align:center;
}

.subscription-success-icon{
  width:60px;
  height:60px;
  margin:0 auto 12px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#dcfce7;
  color:#166534;
  font-size:28px;
  font-weight:900;
}

.subscription-confirmation-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin:20px 0;
}

.subscription-confirmation-summary>div{
  display:grid;
  gap:5px;
  padding:12px;
  border-radius:12px;
  background:var(--soft);
}

.subscription-confirmation-summary span{
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
}

@media(max-width:720px){
  .subscription-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .subscription-plan-grid{
    grid-template-columns:1fr;
  }

  .subscription-confirmation-summary{
    grid-template-columns:1fr;
  }
}

@media(max-width:480px){
  .subscription-summary-grid{
    grid-template-columns:1fr;
  }

  .subscription-profile-head,
  .trial-reminder-actions,
  .subscription-profile-actions{
    display:grid;
  }
}

/* Strict subscription plan day indicators */
.subscription-plan [data-plan-days]{
  position:relative;
}
.subscription-plan::after{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:10px;
  font-weight:700;
}
.subscription-plan:first-child::after{
  content:"Adds 31 days";
}
.subscription-plan.featured::after{
  content:"Adds 365 days";
}

.trial-eligibility-message{padding:11px 12px;border-radius:10px;font-size:11px;line-height:1.45}
.trial-eligibility-message.hidden{display:none!important}
.trial-eligibility-message.approved{display:block;border:1px solid #86efac;background:#dcfce7;color:#166534}
.trial-eligibility-message.denied{display:block;border:1px solid #fecaca;background:#fee2e2;color:#991b1b}

/* Internal-only quotation build */
#externalQuotes,#externalQuoteModal,#externalQuotePreviewModal,#externalCustomerView,#externalGlobalActionsMenu,[data-view="externalQuotes"],#pipelineActionExternal{display:none!important}
#cProduct[multiple]{min-height:150px;padding:8px}
#cProduct[multiple] option{padding:9px 10px;border-radius:8px;margin:2px 0}
#cProduct[multiple] option:checked{font-weight:800}
.field-help{display:block;color:var(--muted);font-size:10px;font-weight:600;line-height:1.35}


/* Ten-line calculator product grid */
.calculator-lines-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(520px,1.8fr);gap:14px;align-items:end;margin-top:4px;margin-bottom:8px}.calculator-lines-heading strong,.calculator-lines-heading small{display:block}.calculator-lines-heading small{margin-top:4px;color:var(--muted);font-size:11px}.calculator-line-columns{display:grid;grid-template-columns:minmax(210px,1.25fr) minmax(180px,1fr) 110px;gap:12px;padding:0 12px;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.calculator-product-lines{display:grid;gap:8px}.calculator-product-line{display:grid;grid-template-columns:32px minmax(210px,1.25fr) minmax(180px,1fr) 110px;gap:12px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}.calculator-product-line:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,111,139,.08)}.calculator-line-number{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--soft);color:var(--muted);font-size:11px;font-weight:900}.calculator-product-line label{display:block}.calculator-product-line select,.calculator-product-line input{min-height:40px;padding:8px 10px}.calculator-product-line select:disabled{opacity:.55}.mobile-line-label{display:none}.calculator-product-line:has(select[id^="cLineProduct"] option:checked:not([value=""])) .calculator-line-number{background:var(--user-app-color);color:#fff}@media(max-width:900px){.calculator-lines-heading{grid-template-columns:1fr}.calculator-line-columns{display:none}.calculator-product-line{grid-template-columns:32px 1fr 1fr 95px}}@media(max-width:650px){.calculator-product-line{grid-template-columns:28px 1fr;padding:10px}.calculator-product-line label{grid-column:2}.mobile-line-label{display:block;margin-bottom:5px;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase}.calculator-line-number{grid-row:1/span 3;align-self:start}}

/* Compact table layout for the 10 calculator product lines */
.calculator-lines-heading{
  grid-template-columns:minmax(210px,1.25fr) minmax(180px,1fr) 82px;
  gap:8px;
  align-items:end;
  margin:0 0 5px;
  padding:0 8px 0 38px;
}
.calculator-lines-heading>div:first-child{
  grid-column:1/-1;
  margin-bottom:4px;
}
.calculator-lines-heading>div:first-child small{margin-top:2px}
.calculator-line-columns{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(210px,1.25fr) minmax(180px,1fr) 82px;
  gap:8px;
  padding:0;
}
.calculator-product-lines{
  display:grid;
  gap:0;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--panel);
}
.calculator-product-line{
  grid-template-columns:28px minmax(210px,1.25fr) minmax(180px,1fr) 82px;
  gap:8px;
  min-height:43px;
  padding:4px 8px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:var(--panel);
}
.calculator-product-line:last-child{border-bottom:0}
.calculator-product-line:nth-child(even){background:color-mix(in srgb,var(--soft) 35%,var(--panel))}
.calculator-product-line:focus-within{
  position:relative;
  z-index:1;
  border-color:transparent;
  box-shadow:inset 3px 0 0 var(--accent);
  background:var(--panel);
}
.calculator-line-number{
  width:22px;
  height:22px;
  border-radius:6px;
  font-size:10px;
}
.calculator-product-line select,
.calculator-product-line input{
  min-height:32px;
  height:32px;
  padding:4px 8px;
  border-radius:8px;
  font-size:12px;
}
.calculator-product-line input[type="number"]{text-align:right}
@media(max-width:900px){
  .calculator-lines-heading{display:none}
  .calculator-product-line{grid-template-columns:25px minmax(170px,1.2fr) minmax(145px,1fr) 76px}
}
@media(max-width:650px){
  .calculator-product-lines{gap:6px;border:0;background:transparent;overflow:visible}
  .calculator-product-line{
    grid-template-columns:24px 1fr;
    gap:5px 8px;
    padding:7px 8px;
    border:1px solid var(--line);
    border-radius:10px;
  }
  .calculator-product-line:last-child{border-bottom:1px solid var(--line)}
  .calculator-product-line label{grid-column:2}
  .calculator-product-line select,.calculator-product-line input{height:34px;min-height:34px}
  .mobile-line-label{margin-bottom:2px;font-size:9px}
  .calculator-line-number{grid-row:1/span 3}
}

/* Currency-aware calculator inputs */
.currency-field{font-variant-numeric:tabular-nums;text-align:right;font-weight:700}
.currency-field[readonly]{background:var(--soft)!important;color:var(--text)!important}

/* VAT and cost inclusion controls */
.cost-toggle-field>span,.checkbox-control{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:750}
.cost-toggle-field input[type="checkbox"],.checkbox-control input[type="checkbox"]{width:15px!important;height:15px!important;min-height:0!important;padding:0!important;flex:0 0 auto;accent-color:var(--user-app-color)}
.cost-toggle-field:has(input[type="checkbox"]:not(:checked))>input{opacity:.48;text-decoration:line-through}
.vat-price-mode{align-content:start}
.checkbox-control{min-height:46px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text)}

/* Production cost master control */
.production-cost-summary{display:flex;align-items:center;justify-content:space-between;gap:16px}
.select-all-costs{display:inline-flex;grid-template-columns:auto auto;align-items:center;gap:7px;font-size:11px;font-weight:800;color:var(--muted);cursor:pointer;white-space:nowrap}
.select-all-costs input{width:15px!important;height:15px!important;min-height:0!important;padding:0!important;margin:0;accent-color:var(--user-app-color,var(--accent))}
@media(max-width:600px){.production-cost-summary{align-items:flex-start}.select-all-costs{margin-top:1px}}


/* Inline VAT inclusion control in Pricing Strategy */
.vat-rate-label{align-content:start}
.vat-rate-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:24px}
.vat-inline-toggle{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--muted);white-space:nowrap;cursor:pointer;text-transform:none}
.vat-inline-toggle input[type="checkbox"]{width:15px!important;height:15px!important;min-height:15px!important;margin:0;padding:0!important;accent-color:var(--user-app-color,var(--accent));cursor:pointer}
.vat-inline-toggle:has(input:checked){color:var(--text)}
@media(max-width:760px){.vat-rate-heading{align-items:flex-start;flex-direction:column;gap:5px}}

/* Dynamic calculator product lines */
.calculator-lines-heading{
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
}
.calculator-lines-heading>div:first-child{grid-column:auto!important;margin-bottom:0!important}
.calculator-lines-heading .calculator-line-columns{
  grid-column:1/-1!important;
  grid-template-columns:minmax(210px,1.25fr) minmax(180px,1fr) 82px 34px!important;
}
.calculator-product-line{
  grid-template-columns:28px minmax(210px,1.25fr) minmax(180px,1fr) 82px 34px!important;
}
.calculator-item-discount,.calculator-item-discount-heading{display:none!important}
.calculator-line-volume-button,.calculator-line-volume-heading{display:none!important}
#calculator.per-item-discount-mode .calculator-lines-heading .calculator-line-columns{
  grid-template-columns:minmax(210px,1.25fr) minmax(180px,1fr) 82px 96px 34px!important;
}
#calculator.per-item-discount-mode .calculator-product-line{
  grid-template-columns:28px minmax(210px,1.25fr) minmax(180px,1fr) 82px 96px 34px!important;
}
#calculator.per-item-discount-mode .calculator-item-discount,
#calculator.per-item-discount-mode .calculator-item-discount-heading{display:block!important}
#calculator.per-line-volume-mode .calculator-line-volume-button,
#calculator.per-line-volume-mode .calculator-line-volume-heading{display:block!important}
#calculator.per-line-volume-mode:not(.per-item-discount-mode) .calculator-lines-heading .calculator-line-columns{
  grid-template-columns:minmax(210px,1.25fr) minmax(180px,1fr) 82px 112px 34px!important;
}
#calculator.per-line-volume-mode:not(.per-item-discount-mode) .calculator-product-line{
  grid-template-columns:28px minmax(210px,1.25fr) minmax(180px,1fr) 82px 112px 34px!important;
}
#calculator.per-line-volume-mode.per-item-discount-mode .calculator-lines-heading .calculator-line-columns{
  grid-template-columns:minmax(210px,1.25fr) minmax(180px,1fr) 82px 96px 150px 34px!important;
}
#calculator.per-line-volume-mode.per-item-discount-mode .calculator-product-line{
  grid-template-columns:28px minmax(210px,1.25fr) minmax(180px,1fr) 82px 96px 150px 34px!important;
}
.calculator-line-volume-button{min-height:32px!important;height:32px!important;padding:4px 7px!important;white-space:nowrap;font-size:10px!important}
.calculator-line-volume-button.active{border-color:var(--user-app-color,var(--accent));color:var(--user-app-color,var(--accent));background:color-mix(in srgb,var(--user-app-color,var(--accent)) 8%,var(--panel))}
.calculator-line-delete{
  width:30px;height:30px;min-height:30px;padding:0;border:0;border-radius:8px;
  display:grid;place-items:center;background:transparent;color:var(--muted);
  font-size:20px;line-height:1;cursor:pointer;
}
.calculator-line-delete:hover{background:#fee2e2;color:#b42318}
@media(max-width:900px){
  .calculator-lines-heading{display:grid!important;grid-template-columns:1fr auto!important}
  .calculator-lines-heading .calculator-line-columns{display:none!important}
  .calculator-product-line{grid-template-columns:25px minmax(170px,1.2fr) minmax(145px,1fr) 76px 34px!important}
  #calculator.per-item-discount-mode .calculator-product-line{grid-template-columns:25px minmax(170px,1.2fr) minmax(145px,1fr) 76px 92px 34px!important}
  #calculator.per-line-volume-mode:not(.per-item-discount-mode) .calculator-product-line{grid-template-columns:25px minmax(170px,1.2fr) minmax(145px,1fr) 76px 108px 34px!important}
  #calculator.per-line-volume-mode.per-item-discount-mode .calculator-product-line{grid-template-columns:25px minmax(150px,1.15fr) minmax(135px,1fr) 70px 86px 138px 34px!important}
}
@media(max-width:650px){
  .calculator-lines-heading{grid-template-columns:1fr!important}
  .calculator-lines-heading .btn{justify-self:start}
  .calculator-product-line{grid-template-columns:24px 1fr 34px!important}
  .calculator-product-line label{grid-column:2!important}
  #calculator.per-item-discount-mode .calculator-product-line .calculator-item-discount{display:block!important}
  #calculator.per-line-volume-mode .calculator-product-line .calculator-line-volume-button{display:block!important;grid-column:2!important;width:100%}
  .calculator-line-delete{grid-column:3;grid-row:1;align-self:start}
  .calculator-line-number{grid-row:1/span 3!important}
  #calculator.per-item-discount-mode .calculator-line-number{grid-row:1/span 4!important}
  #calculator.per-line-volume-mode .calculator-line-number{grid-row:1/span 4!important}
  #calculator.per-line-volume-mode.per-item-discount-mode .calculator-line-number{grid-row:1/span 5!important}
}

.line-volume-discount-card{max-width:620px}
.line-volume-discount-table{margin-top:14px}
.line-volume-discount-actions{justify-content:flex-end;margin-top:18px}

/* Pipeline column alignment */
:root{--pipeline-columns:minmax(250px,1.45fr) 110px 135px minmax(170px,1fr) 125px 112px}
.forecast-table-head,
.forecast-row{
  grid-template-columns:var(--pipeline-columns)!important;
  column-gap:14px!important;
}
.forecast-table-head{
  padding-left:14px!important;
  padding-right:14px!important;
  align-items:end;
}
.forecast-table-head>span:nth-child(5),
.forecast-row>div:nth-child(5){text-align:right}
.forecast-table-head>span:last-child,
.forecast-actions{justify-self:end;width:112px}
.forecast-actions .forecast-action-trigger{width:112px;justify-content:center}
@media(max-width:1100px){
  .forecast-row{grid-template-columns:1fr 1fr 1fr!important}
  .forecast-table-head{display:none!important}
  .forecast-actions{width:auto;justify-self:start}
}
@media(max-width:760px){.forecast-row{grid-template-columns:1fr!important}}

/* Compact Pipeline toolbar and Actions control */
#pipeline .forecast-toolbar-controls .forecast-search,
#pipeline .forecast-toolbar-controls .forecast-sort{
  display:grid;
  align-content:end;
  margin:0;
}
#pipeline .forecast-new-opportunity{
  height:44px;min-height:44px;white-space:nowrap
}
@media(max-width:760px){
  #pipeline .forecast-new-opportunity{width:100%}
}
#pipeline .forecast-toolbar-controls .forecast-search input,
#pipeline .forecast-toolbar-controls .forecast-sort select{
  height:44px!important;
  min-height:44px!important;
  padding-top:9px!important;
  padding-bottom:9px!important;
}
:root{--pipeline-columns:minmax(250px,1.45fr) 110px 135px minmax(170px,1fr) 140px 88px}
#pipeline .forecast-table-head>span:last-child,
#pipeline .forecast-actions{
  justify-self:end;
  width:88px;
}
#pipeline .forecast-actions .forecast-action-trigger{
  width:88px;
  min-width:88px;
  min-height:34px;
  padding:7px 10px;
  gap:5px;
  justify-content:center;
  white-space:nowrap;
}
#pipeline .forecast-action-trigger .forecast-action-chevron{
  color:currentColor!important;
  font-size:12px;
}
@media(max-width:1100px){
  #pipeline .forecast-actions{width:auto;justify-self:start}
  #pipeline .forecast-actions .forecast-action-trigger{width:auto;min-width:82px}
}

/* Calculator field alignment rebuild */
#calculator .calculator-primary-details,
#calculator .calculator-reference-details,
#calculator .opportunity-forecast-grid{
  align-items:end;
}
#calculator .calculator-primary-details > label,
#calculator .calculator-reference-details > label,
#calculator .opportunity-forecast-grid > label{
  display:grid;
  grid-template-rows:auto 46px;
  align-self:stretch;
}
#calculator .calculator-primary-details input,
#calculator .calculator-reference-details input,
#calculator .calculator-reference-details .input-with-action,
#calculator .opportunity-forecast-grid input,
#calculator .opportunity-forecast-grid select{
  height:46px;
  min-height:46px;
  margin:0;
}
#calculator .calculator-reference-details .input-with-action{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
}
#calculator .calculator-reference-details .input-with-action .btn{
  height:46px;
  min-height:46px;
  margin:0;
}
#calculator .opportunity-forecast-grid .status-field,
#calculator .opportunity-forecast-grid .status-field select{
  width:100%;
}
@media(max-width:760px){
  #calculator .calculator-primary-details > label,
  #calculator .calculator-reference-details > label,
  #calculator .opportunity-forecast-grid > label{
    grid-template-rows:auto 46px;
  }
}

/* Volume discount checkbox in Pricing Strategy */
.pricing-checkbox-field{display:grid;gap:6px;align-content:start}
.pricing-checkbox-control{min-height:46px;display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#f1f3f5;color:var(--text);font-size:12px;font-weight:750}
.pricing-checkbox-control input[type="checkbox"]{width:16px!important;height:16px!important;min-height:16px!important;margin:0;padding:0!important;accent-color:var(--user-app-color,var(--accent));flex:0 0 auto}
[data-theme=dark] .pricing-checkbox-control{background:var(--soft)}

/* Product create/import menu */
.product-create-menu{position:relative}
.product-create-trigger{display:flex;align-items:center;gap:8px}
.product-create-options{
  position:absolute;right:0;top:calc(100% + 7px);z-index:60;display:none;min-width:176px;
  padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--panel);
  box-shadow:0 16px 34px rgba(15,47,73,.18)
}
.product-create-options.open{display:grid}
.product-create-options button,.product-create-options label{
  position:relative;display:block;width:100%;padding:10px 12px;border:0;border-radius:8px;
  background:transparent;color:var(--text);font:750 12px/1.2 inherit;text-align:left;cursor:pointer
}
.product-create-options button:hover,.product-create-options label:hover{background:var(--soft)}
.product-create-options input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}

/* Five-row volume discount tables */
.volume-discount-panel{margin-top:14px;padding:15px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--soft) 45%,var(--panel))}
.volume-discount-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.volume-discount-head strong,.volume-discount-head small{display:block}
.volume-discount-head small{margin-top:3px;color:var(--muted);font-size:10px}
.volume-discount-toggle{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;white-space:nowrap}
.volume-discount-toggle input{width:17px!important;height:17px!important;min-height:17px!important;margin:0;accent-color:var(--user-app-color,var(--accent))}
.volume-discount-table{display:grid;gap:6px;width:min(100%,560px)}
.volume-discount-header,.volume-discount-row{display:grid;grid-template-columns:minmax(76px,.8fr) minmax(92px,1fr) minmax(110px,1fr);gap:8px;align-items:center}
.volume-discount-header{padding:0 9px;color:var(--muted);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}
.volume-discount-row{padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.volume-discount-row output,.volume-discount-row>span{font-size:12px;font-weight:800;color:var(--text)}
.volume-discount-row input{width:100%;height:36px;min-height:36px;padding:6px 9px;text-align:right}
.settings-volume-discount{margin-top:2px}
@media(max-width:560px){
 .volume-discount-head{align-items:flex-start;flex-direction:column}
 .volume-discount-table{width:100%}
 .volume-discount-header,.volume-discount-row{grid-template-columns:70px 1fr 1fr}
}

/* Mobile registration, responsive navigation and tablet orientation */
.nivo4-logo-link{
  display:block;
  flex:0 0 auto;
  border-radius:50%;
  cursor:pointer;
  line-height:0;
}
.nivo4-logo-link:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 70%,white);
  outline-offset:3px;
}

/* Keep every authentication form reachable on short phone screens and
   when the software keyboard is open. */
.auth-screen{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}
.auth-card{
  flex:0 0 auto;
  margin:auto 0;
}

@media(max-width:760px){
  .auth-screen{
    min-height:100dvh;
    padding:10px 10px calc(24px + env(safe-area-inset-bottom));
  }
  .auth-card{
    width:100%;
    margin:0;
    padding:18px;
    border-radius:20px;
  }
  .auth-card .brand-row{gap:10px}
  .auth-card .nivo4-logo-image{width:64px;height:64px}
  .auth-card h1{font-size:clamp(22px,7vw,30px)}
  .auth-card p{font-size:12px}
  .auth-tabs{margin-top:16px}
  .auth-form{gap:12px}
  .auth-form input{min-height:46px}
  .auth-form .btn{min-height:46px}
  #registerForm .grid.two{gap:12px}
}

/* Phones in either orientation and tablets held in portrait use the
   touch-first bottom navigation. */
@media (max-width:760px),
       (min-width:761px) and (max-width:1180px) and (orientation:portrait),
       (max-width:900px) and (max-height:600px) and (orientation:landscape){
  .app,
  .app.collapsed{
    display:block;
    min-height:100dvh;
  }
  .sidebar,
  .app.collapsed .sidebar{
    position:fixed;
    z-index:50;
    inset:auto 0 0;
    width:auto;
    height:auto;
    min-height:0;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top:1px solid rgba(255,255,255,.14);
  }
  .sidebar-top,
  .sidebar-bottom,
  .app.collapsed .sidebar-top{
    display:none;
  }
  .sidebar nav{
    display:grid;
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:minmax(72px,1fr);
    gap:4px;
    margin:0;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .sidebar nav::-webkit-scrollbar{display:none}
  .sidebar .nav,
  .app.collapsed .sidebar .nav{
    min-height:52px!important;
    display:grid;
    justify-content:center;
    justify-items:center;
    gap:2px;
    padding:7px 6px!important;
    touch-action:manipulation;
  }
  .sidebar .nav b,
  .app.collapsed .sidebar .nav b{
    display:block;
    max-width:76px;
    overflow:hidden;
    font-size:10px!important;
    text-overflow:ellipsis;
  }
  .main{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .topbar{
    min-height:auto;
    padding:16px 16px 12px;
    align-items:flex-start;
    flex-direction:column;
  }
  .top-actions{
    width:100%;
    flex-wrap:wrap;
  }
  .top-actions .btn{min-height:44px}
  .view{padding:0 14px 30px}
  .content-grid,
  .profile-grid,
  .calc-grid,
  .two-col,
  .grid.three{
    grid-template-columns:1fr;
  }
  .card{max-width:100%;overflow-wrap:anywhere}
  input,select,textarea,.btn{font-size:16px}
}

/* A landscape tablet has enough horizontal space for the regular sidebar.
   Content grids still collapse where needed, preventing horizontal overflow. */
@media (min-width:900px) and (max-width:1366px) and (min-height:600px) and (orientation:landscape){
  .app,
  .app.collapsed{
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
  }
  .sidebar,
  .app.collapsed .sidebar{
    position:sticky;
    inset:0 auto auto;
    width:auto;
    height:100vh;
    min-height:100vh;
    padding:20px 16px;
  }
  .sidebar-top,
  .app.collapsed .sidebar-top{
    display:flex;
    justify-content:space-between;
  }
  .sidebar-bottom{display:block}
  .sidebar nav{
    display:grid;
    grid-template-columns:1fr;
    grid-auto-flow:row;
    gap:7px;
    margin-top:26px;
    overflow:visible;
  }
  .sidebar .nav,
  .app.collapsed .sidebar .nav{
    display:flex;
    justify-content:flex-start;
    justify-items:initial;
    min-height:44px!important;
    gap:12px;
    padding:10px 12px!important;
  }
  .sidebar .nav b,
  .app.collapsed .sidebar .nav b,
  .brand-copy,
  .app.collapsed .brand-copy,
  .sidebar-user-copy,
  .app.collapsed .sidebar-user-copy{
    display:block;
  }
  .app.collapsed #collapseBtn{transform:none}
  .main{padding-bottom:0}
}

/* Product production workflows */
.product-list-row{
  grid-template-columns:28px 42px minmax(150px,1.35fr) repeat(6,minmax(82px,.72fr)) minmax(202px,auto)!important;
}
.product-list-actions{align-items:center;gap:7px}
.product-machine-settings-button{min-height:34px;white-space:nowrap}
.machine-settings-modal-card{
  width:min(1060px,100%);
  max-height:min(92vh,920px);
  padding:24px;
}
.machine-settings-product{
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:15px;
  align-items:center;
  padding:14px;
  margin-bottom:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--soft);
}
.machine-settings-product-image{
  width:76px;height:76px;display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--line);border-radius:14px;background:var(--panel);
  color:var(--muted);font-size:24px;font-weight:850;
}
.machine-settings-product-image img{width:100%;height:100%;object-fit:cover}
.machine-settings-product h3{margin:3px 0;font-size:20px}
.machine-settings-product p{margin:0;color:var(--muted);font-size:12px}
.machine-settings-note{
  margin-bottom:14px;padding:11px 13px;border-radius:12px;
  background:color-mix(in srgb,var(--accent) 8%,var(--panel));
  color:var(--muted);font-size:12px;line-height:1.5;
}
.machine-workflow-list{display:grid;gap:10px}
.machine-workflow-job{
  border:1px solid var(--line);border-radius:15px;background:var(--panel);overflow:hidden;
}
.machine-workflow-job>summary{
  display:grid;grid-template-columns:32px minmax(0,1fr) 34px;gap:10px;align-items:center;
  padding:12px 14px;cursor:pointer;list-style:none;background:var(--soft);
}
.machine-workflow-job>summary::-webkit-details-marker{display:none}
.machine-workflow-job>summary>span:nth-child(2){display:grid;gap:2px}
.machine-workflow-job>summary strong{font-size:13px}
.machine-workflow-job>summary small{color:var(--muted);font-size:10px;text-transform:capitalize}
.machine-workflow-order{
  width:28px;height:28px;display:grid;place-items:center;border-radius:9px;
  background:var(--user-app-color,var(--accent));color:#fff;font-size:11px;font-weight:850;
}
.machine-workflow-job .icon-btn.danger{color:#b42318;background:#fff}
.machine-workflow-fields{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  padding:15px;
}
.machine-workflow-field{display:grid;gap:6px;min-width:0}
.machine-workflow-field>span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.machine-workflow-field>span small{font-size:9px;text-transform:none;letter-spacing:0}
.machine-workflow-field input,
.machine-workflow-field select,
.machine-workflow-field textarea{width:100%;background:#f1f3f5}
[data-theme=dark] .machine-workflow-field input,
[data-theme=dark] .machine-workflow-field select,
[data-theme=dark] .machine-workflow-field textarea{background:var(--soft)}
.machine-workflow-notes{grid-column:1/-1}
.machine-settings-footer{
  position:sticky;bottom:-24px;z-index:4;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin:18px -24px -24px;padding:14px 24px;
  border-top:1px solid var(--line);background:var(--panel);
}
.machine-settings-footer>small{max-width:430px;color:var(--muted);font-size:10px}

@media(max-width:1260px){
  .product-list-row{
    grid-template-columns:28px 42px minmax(140px,1.4fr) repeat(3,minmax(82px,.72fr)) minmax(202px,auto)!important;
  }
  .product-list-row .product-list-value:nth-of-type(n+4){display:none!important}
}
@media(max-width:900px){
  .product-list-row{grid-template-columns:26px 42px minmax(130px,1fr) minmax(202px,auto)!important}
  .product-list-row .product-list-value{display:none!important}
  .machine-workflow-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .product-list-row{grid-template-columns:24px 40px minmax(0,1fr) 42px!important}
  .product-machine-settings-button{grid-column:1/-1;width:100%}
  .product-action-trigger{min-width:42px;width:42px;padding:7px}
  .product-action-trigger>span:first-child{display:none}
  .machine-settings-modal-card{padding:16px}
  .machine-workflow-fields{grid-template-columns:1fr;padding:12px}
  .machine-workflow-notes{grid-column:auto}
  .machine-settings-footer{position:static;align-items:stretch;flex-direction:column;margin:16px -16px -16px;padding:14px 16px}
  .machine-settings-footer .row,.machine-settings-footer .btn{width:100%}
}

/* Keep the iPad landscape Pipeline inside the same content width as its card. */
@media (min-width:900px) and (max-width:1366px) and (min-height:600px) and (orientation:landscape){
  #pipeline .forecast-table-card,
  #pipeline .forecast-list,
  #pipeline .forecast-row{min-width:0!important;max-width:100%!important}
  #pipeline .forecast-table-card{overflow:hidden!important}
  #pipeline .forecast-row{
    grid-template-columns:minmax(0,1.4fr) minmax(76px,.55fr) minmax(90px,.68fr) minmax(0,1fr) minmax(98px,.7fr) 82px!important;
    column-gap:8px!important;
  }
  #pipeline .forecast-table-head{
    display:grid!important;
    grid-template-columns:minmax(0,1.4fr) minmax(76px,.55fr) minmax(90px,.68fr) minmax(0,1fr) minmax(98px,.7fr) 82px!important;
    column-gap:8px!important;
  }
  #pipeline .forecast-row>div,
  #pipeline .forecast-table-head>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  #pipeline .forecast-actions{width:82px!important}
  #pipeline .forecast-actions .forecast-action-trigger{width:82px!important;min-width:82px!important}
}

/* xTool machine catalog */
.xtool-catalog-modal-card{
  width:min(1180px,100%);
  max-height:min(94vh,980px);
  padding:24px;
}
.xtool-catalog-modal-card>.card-head{align-items:flex-start}
.xtool-catalog-modal-card>.card-head p{margin:5px 0 0;color:var(--muted);font-size:12px}
.xtool-catalog-toolbar{
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(190px,.35fr);
  gap:12px;
  margin:14px 0;
}
.makerflo-catalog-toolbar{grid-template-columns:minmax(240px,1fr) repeat(2,minmax(160px,.35fr))}
.supply-purchase-link-actions{display:inline-flex;align-items:center;gap:8px}
.supply-purchase-link-actions .btn{min-height:28px;padding:4px 10px;white-space:nowrap}
.vendor-supply-catalog-list{
  display:grid;gap:8px;overflow:auto;min-height:220px;max-height:min(58vh,620px);padding:2px 4px 10px 2px;
}
.vendor-supply-list-row{
  display:grid;grid-template-columns:28px 52px minmax(210px,1.7fr) minmax(135px,.9fr) minmax(105px,.65fr) 108px;
  align-items:center;gap:12px;min-height:68px;padding:8px 12px;
  border:1px solid var(--line);border-radius:13px;background:var(--panel);
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.vendor-supply-list-row:hover{border-color:color-mix(in srgb,var(--accent) 32%,var(--line));box-shadow:0 5px 16px rgba(29,50,73,.06)}
.vendor-supply-list-row.owned{background:color-mix(in srgb,var(--accent) 5%,var(--panel))}
.vendor-supply-list-selector{display:grid;place-items:center;cursor:pointer}
.vendor-supply-list-selector input{width:17px;height:17px;margin:0;accent-color:var(--accent)}
.vendor-supply-list-image{width:52px;height:52px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--muted);font-size:20px;font-weight:850}
.vendor-supply-list-image img{width:100%;height:100%;object-fit:cover}
.vendor-supply-list-name{display:grid;gap:4px;min-width:0}
.vendor-supply-list-name strong,.vendor-supply-list-name small,.vendor-supply-list-row .product-list-value strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vendor-supply-list-name strong{font-size:13px;color:var(--text)}
.vendor-supply-list-name small{font-size:10px;color:var(--muted)}
.vendor-supply-list-row .product-list-value{min-width:0}
.vendor-supply-list-row .product-list-value span{font-size:9px}
.vendor-supply-list-row .product-list-value strong{display:block;font-size:11px}
.vendor-supply-row-actions{display:flex;justify-content:flex-end;gap:7px;min-width:0}
.vendor-supply-purchase,.vendor-supply-add{justify-content:center;white-space:nowrap}
.makerflo-catalog-card .xtool-catalog-image img{object-fit:cover}
.xtool-catalog-toolbar label{display:grid;gap:6px}
.xtool-catalog-toolbar label>span{
  color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
}
.xtool-catalog-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  overflow:auto;
  padding:2px 4px 12px 2px;
}
.xtool-catalog-card{
  position:relative;
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:15px;
  min-height:250px;
  padding:42px 15px 15px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
}
.xtool-catalog-card.is-owned{background:color-mix(in srgb,var(--accent) 5%,var(--panel))}
.xtool-catalog-selector{
  position:absolute;top:12px;left:15px;
  display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:750;cursor:pointer;
}
.xtool-catalog-selector input{width:16px;height:16px}
.xtool-catalog-image{
  width:150px;height:145px;
  display:grid;place-items:center;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.xtool-catalog-image img{width:100%;height:100%;object-fit:contain}
.xtool-catalog-image-fallback{font-size:38px;font-weight:850;color:var(--muted)}
.xtool-catalog-copy{min-width:0}
.xtool-catalog-heading{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.xtool-legacy-badge{
  display:inline-flex;align-items:center;
  padding:3px 7px;border-radius:999px;
  background:#fff0d5;color:#8a5200;
  font-size:8px;font-weight:850;letter-spacing:.04em;text-transform:uppercase;
}
.xtool-catalog-copy h3{margin:3px 0 4px;font-size:17px}
.xtool-catalog-copy>p{margin:0 0 8px;color:var(--muted);font-size:11px}
.xtool-catalog-copy dl{display:grid;gap:5px;margin:0 0 9px;font-size:10px}
.xtool-catalog-copy dl div{display:grid;grid-template-columns:70px minmax(0,1fr);gap:7px}
.xtool-catalog-copy dt{color:var(--muted);font-weight:800}
.xtool-catalog-copy dd{margin:0;line-height:1.35}
.xtool-catalog-copy>a{display:inline-block;margin-top:9px;color:var(--accent);font-size:10px;font-weight:750}
.xtool-material-chips{display:flex;flex-wrap:wrap;gap:4px}
.xtool-material-chips span{
  padding:4px 6px;border-radius:999px;
  background:var(--soft);color:var(--muted);
  font-size:9px;font-weight:700;
}
.xtool-catalog-footer{
  position:sticky;bottom:-24px;z-index:3;
  display:flex;justify-content:space-between;align-items:center;gap:15px;
  margin:14px -24px -24px;padding:14px 24px;
  border-top:1px solid var(--line);background:var(--panel);
}
.xtool-catalog-footer>small{max-width:580px;color:var(--muted);font-size:10px;line-height:1.45}
.machine-editor-wide{grid-column:1/-1}
.machine-editor-wide textarea{width:100%;resize:vertical}

@media(max-width:900px){
  .xtool-catalog-list{grid-template-columns:1fr}
  .makerflo-catalog-toolbar{grid-template-columns:1fr 1fr}
  .makerflo-catalog-toolbar label:first-child{grid-column:1/-1}
  .vendor-supply-list-row{grid-template-columns:28px 48px minmax(160px,1fr) 100px}
  .vendor-supply-list-image{width:48px;height:48px}
  .vendor-supply-list-material,.vendor-supply-list-vendor{display:none!important}
}
@media(max-width:620px){
  .xtool-catalog-modal-card{padding:16px}
  .xtool-catalog-toolbar{grid-template-columns:1fr}
  .makerflo-catalog-toolbar{grid-template-columns:1fr}
  .makerflo-catalog-toolbar label:first-child{grid-column:auto}
  .xtool-catalog-card{grid-template-columns:92px minmax(0,1fr);padding:42px 12px 12px;gap:11px}
  .xtool-catalog-image{width:92px;height:96px}
  .xtool-catalog-copy dl div{grid-template-columns:1fr;gap:1px}
  .xtool-catalog-footer{position:static;align-items:stretch;flex-direction:column;margin:14px -16px -16px;padding:14px 16px}
  .xtool-catalog-footer .row,.xtool-catalog-footer .btn{width:100%}
  .vendor-supply-list-row{grid-template-columns:24px 42px minmax(0,1fr) 42px;gap:9px;min-height:60px;padding:7px 9px}
  .vendor-supply-list-image{width:42px;height:42px;border-radius:9px}
  .vendor-supply-purchase{width:42px;min-width:42px;padding:7px;font-size:0}
  .vendor-supply-purchase::after{content:"↗";font-size:14px}
}

/* Compact profile menu, header and responsive list alignment */
.app,
.app.collapsed{
  display:block!important;
  min-height:100dvh;
}
.profile-menu-shell,
.app.collapsed .profile-menu-shell{
  position:fixed!important;
  z-index:90;
  inset:10px auto auto 12px!important;
  width:58px!important;
  height:58px!important;
  min-height:58px!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
}
.profile-menu-toggle{
  position:relative;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  padding:3px;
  border:2px solid rgba(255,255,255,.72);
  border-radius:50%;
  background:var(--user-app-color,#0f2f49);
  color:#fff;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(3,16,28,.25);
}
.profile-menu-toggle:focus-visible{outline:3px solid #68c4df;outline-offset:3px}
.profile-menu-avatar{
  width:48px;height:48px;
  display:grid;place-items:center;
  overflow:hidden;border-radius:50%;
  background:color-mix(in srgb,var(--user-app-color,#0f2f49) 76%,white);
}
.profile-menu-avatar .sidebar-avatar,
.profile-menu-avatar .sidebar-avatar-placeholder{
  width:100%!important;height:100%!important;
  margin:0!important;border:0!important;border-radius:50%!important;
  object-fit:cover;
}
.profile-menu-avatar .sidebar-avatar-placeholder{display:grid;place-items:center;font-size:20px}
.profile-menu-bars{
  position:absolute;right:-4px;bottom:-2px;
  width:25px;height:25px;
  display:grid;align-content:center;gap:3px;padding:5px;
  border:2px solid #fff;border-radius:50%;
  background:var(--user-app-color,#0f2f49);
  box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.profile-menu-bars i{display:block;height:2px;border-radius:2px;background:#fff}
.profile-menu-panel{
  position:absolute;
  top:66px;left:0;
  width:min(300px,calc(100vw - 24px));
  max-height:calc(100dvh - 86px);
  display:none;
  overflow:auto;
  padding:14px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:18px;
  background:color-mix(in srgb,var(--user-app-color,#0f2f49) 94%,black);
  color:#fff;
  box-shadow:0 22px 55px rgba(3,16,28,.4);
  overscroll-behavior:contain;
}
.profile-menu-shell.menu-open .profile-menu-panel{display:block}
.profile-menu-panel .sidebar-user{
  display:block;
  margin:0 0 10px;padding:5px 8px 13px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.profile-menu-panel .sidebar-user-copy{display:block!important}
.profile-menu-panel .sidebar-user-copy strong,
.profile-menu-panel .sidebar-user-copy span{display:block}
.profile-menu-panel .sidebar-user-copy span{margin-top:3px;color:#bcd0df;font-size:11px}
.profile-menu-panel nav{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-auto-flow:row!important;
  gap:5px!important;
  margin:0!important;
  overflow:visible!important;
}
.profile-menu-panel .nav,
.app.collapsed .profile-menu-panel .nav{
  width:100%;
  min-height:42px!important;
  display:flex!important;
  justify-content:flex-start!important;
  justify-items:initial!important;
  gap:11px!important;
  padding:10px 12px!important;
}
.profile-menu-panel .nav b,
.app.collapsed .profile-menu-panel .nav b{display:block!important;font-size:12px!important}
.profile-menu-secondary{
  display:grid;gap:5px;
  margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.14);
}
.profile-menu-secondary #aboutBtn{
  border:0!important;box-shadow:none!important;
  background:transparent!important;
}
.profile-menu-secondary #aboutBtn:hover{background:color-mix(in srgb,var(--user-app-color,#0f2f49) 72%,white)!important}

.main,
.app.collapsed .main{min-width:0;padding:0!important}
.compact-topbar{
  position:relative;
  min-height:78px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px;
  padding:12px 20px 10px 88px!important;
  background:transparent!important;
}
.compact-topbar h1{font-size:clamp(20px,2.2vw,29px)}
.compact-topbar h1,.compact-topbar p{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.18)}
.compact-topbar p{font-size:11px;color:rgba(255,255,255,.76)!important}
.compact-topbar .top-actions{width:auto!important;margin-left:auto}
.new-opportunity-icon{
  width:44px;height:44px;min-width:44px;
  display:grid;place-items:center;
  padding:0;border:0;border-radius:14px;
  background:#2ca35c;color:#fff;
  font-size:28px;font-weight:500;line-height:1;
  cursor:pointer;box-shadow:0 7px 18px rgba(20,120,62,.22);
}
.new-opportunity-icon:hover{background:#218c4d;transform:translateY(-1px)}
.new-opportunity-icon.small{width:36px;height:36px;min-width:36px;border-radius:10px;font-size:22px}
.view{padding:0 24px 38px!important}
#pAffiliateNumber{background:var(--soft)!important;color:var(--muted)!important;font-variant-numeric:tabular-nums;letter-spacing:.08em}
.about-grid a{color:var(--accent);text-decoration:none}
.about-grid a:hover{text-decoration:underline}

/* Lists use one shared card width and never push outside their page. */
#productList,#machineList,#pipeline .forecast-list,
#products .card,#machines .card,#pipeline .forecast-table-card{
  width:100%;min-width:0;max-width:100%;
}
.product-list-row,.machine-list-row,#pipeline .forecast-row{
  width:100%;min-width:0;max-width:100%;
}
.product-list-row>*,.machine-list-row>*,#pipeline .forecast-row>*{min-width:0}

@media(max-width:1100px){
  .product-list-row{
    grid-template-columns:26px 42px minmax(0,1fr) minmax(86px,.7fr) minmax(86px,.7fr) minmax(190px,auto)!important;
  }
  .product-list-row .product-list-value{display:none!important}
  .product-list-row>.product-list-value:nth-child(4),
  .product-list-row>.product-list-value:nth-child(5){display:grid!important}
  .machine-list-row{
    grid-template-columns:26px 42px minmax(0,1fr) minmax(90px,.75fr) minmax(90px,.75fr) 102px!important;
  }
  .machine-list-row .machine-list-value{display:none!important}
  .machine-list-row>.machine-list-value:nth-child(4),
  .machine-list-row>.machine-list-value:nth-child(5){display:grid!important}
  #pipeline .forecast-row{
    grid-template-columns:minmax(0,1fr) minmax(90px,.55fr) minmax(105px,.65fr)!important;
    gap:10px!important;
    padding:14px!important;
    border:1px solid var(--line)!important;border-radius:14px!important;margin-top:10px;
  }
  #pipeline .forecast-row .forecast-main,
  #pipeline .forecast-row .forecast-next-action,
  #pipeline .forecast-row .forecast-actions{grid-column:1/-1}
  #pipeline .forecast-actions{width:auto!important;justify-self:start!important}
  #pipeline .forecast-table-head{display:none!important}
}

@media(max-width:760px){
  .profile-menu-shell,.app.collapsed .profile-menu-shell{top:8px!important;left:10px!important;width:52px!important;height:52px!important;min-height:52px!important}
  .profile-menu-toggle{width:52px;height:52px}
  .profile-menu-avatar{width:42px;height:42px}
  .profile-menu-panel{top:60px;max-height:calc(100dvh - 76px)}
  .compact-topbar{min-height:70px!important;padding:10px 12px 8px 74px!important}
  .compact-topbar p{display:none}
  .compact-topbar h1{font-size:20px}
  .new-opportunity-icon{width:40px;height:40px;min-width:40px;border-radius:12px}
  .view{padding:0 10px 26px!important}
  .card{padding:15px!important}
  .profile-record-top{align-items:flex-start}
  .profile-summary-panel{min-width:0}
  .profile-media-controls{width:auto!important;margin-left:auto!important;justify-content:flex-end!important}
  .profile-media-caption{display:none}

  .product-list-row,.machine-list-row{
    display:grid!important;
    grid-template-columns:22px 40px minmax(0,1fr) 42px!important;
    gap:8px!important;
    padding:10px!important;
  }
  .product-list-row .product-list-value,
  .machine-list-row .machine-list-value,
  .product-list-row>.product-list-value:nth-child(4),
  .product-list-row>.product-list-value:nth-child(5),
  .machine-list-row>.machine-list-value:nth-child(4),
  .machine-list-row>.machine-list-value:nth-child(5){display:none!important}
  .product-list-actions,.machine-list-actions{
    width:auto!important;min-width:0!important;
    justify-self:end;display:grid!important;grid-template-columns:42px!important;
  }
  .product-machine-settings-button{
    grid-column:1/-1!important;
    width:100%!important;min-height:36px;
  }
  .product-action-trigger,.machine-action-trigger{
    width:42px!important;min-width:42px!important;
    padding:7px!important;
  }
  .product-action-trigger>span:first-child,
  .machine-action-trigger>span:first-child{display:none}

  #pipeline .forecast-row{
    display:grid!important;grid-template-columns:1fr!important;
    gap:9px!important;padding:13px!important;
  }
  #pipeline .forecast-row>div{grid-column:1!important;text-align:left!important}
  #pipeline .forecast-actions{width:100%!important}
  #pipeline .forecast-actions .forecast-action-trigger{width:100%!important}
  #pipeline .forecast-toolbar,#pipeline .forecast-toolbar-controls{width:100%}
}

/* Portrait tablets get touch-friendly card lists; landscape tablets retain
   compact desktop rows with equal outer widths. */
@media(min-width:761px) and (max-width:1180px) and (orientation:portrait){
  .view{padding-inline:18px!important}
  .product-list-row,.machine-list-row{
    grid-template-columns:26px 44px minmax(0,1fr) minmax(100px,.65fr) minmax(180px,auto)!important;
  }
  .product-list-row .product-list-value,
  .machine-list-row .machine-list-value{display:none!important}
  .product-list-row>.product-list-value:nth-child(4),
  .machine-list-row>.machine-list-value:nth-child(4){display:grid!important}
  #pipeline .forecast-row{grid-template-columns:minmax(0,1fr) minmax(95px,.55fr)!important}
}

@media(min-width:900px) and (max-width:1366px) and (orientation:landscape){
  .view{padding-inline:22px!important}
  #products .card,#machines .card,#pipeline .forecast-table-card{overflow:hidden!important}
  .product-list-row{
    grid-template-columns:26px 42px minmax(0,1.25fr) repeat(2,minmax(82px,.62fr)) minmax(190px,auto)!important;
  }
  .product-list-row .product-list-value{display:none!important}
  .product-list-row>.product-list-value:nth-child(4),
  .product-list-row>.product-list-value:nth-child(5){display:grid!important}
  .machine-list-row{
    grid-template-columns:26px 42px minmax(0,1.3fr) repeat(2,minmax(86px,.65fr)) 98px!important;
  }
  .machine-list-row .machine-list-value{display:none!important}
  .machine-list-row>.machine-list-value:nth-child(4),
  .machine-list-row>.machine-list-value:nth-child(5){display:grid!important}
}

/* Clean portrait card lists. Actions stay in one predictable top-right place. */
@media(max-width:760px), (min-width:761px) and (max-width:1180px) and (orientation:portrait){
  .product-list-row,
  .machine-list-row{
    position:relative;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;
    grid-auto-rows:auto;
    align-items:center!important;
    gap:8px 10px!important;
    padding:12px!important;
    min-height:70px;
  }
  .product-list-row>.drag-handle,
  .machine-list-row>.drag-handle{display:none!important}
  .product-list-row>.item-list-thumbnail,
  .machine-list-row>.item-list-thumbnail{
    grid-column:1;
    grid-row:1;
    width:44px!important;
    height:44px!important;
  }
  .product-list-name,
  .machine-list-name{
    grid-column:2;
    grid-row:1;
    align-self:center;
  }
  .product-list-actions,
  .machine-list-actions{
    grid-column:3!important;
    grid-row:1!important;
    width:auto!important;
    min-width:0!important;
    justify-self:end!important;
    align-self:center!important;
    display:flex!important;
  }
  .product-list-row .product-list-value,
  .machine-list-row .machine-list-value,
  .product-list-row>.product-list-value:nth-child(4),
  .product-list-row>.product-list-value:nth-child(5),
  .machine-list-row>.machine-list-value:nth-child(4),
  .machine-list-row>.machine-list-value:nth-child(5){display:none!important}
  .product-action-trigger,
  .machine-action-trigger{
    width:auto!important;
    min-width:42px!important;
    height:40px;
    padding:7px 10px!important;
  }
  .product-action-trigger>span:first-child,
  .machine-action-trigger>span:first-child{display:none}

  #pipeline .forecast-row{
    position:relative;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px 12px!important;
    align-items:start!important;
    padding:13px!important;
  }
  #pipeline .forecast-row>div{
    grid-column:1!important;
    width:auto!important;
    min-width:0!important;
    text-align:left!important;
  }
  #pipeline .forecast-row .forecast-main{grid-row:1!important}
  #pipeline .forecast-row .forecast-actions{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:end!important;
  }
  #pipeline .forecast-actions .forecast-action-trigger{
    width:auto!important;
    min-width:42px!important;
    height:40px;
    padding:7px 10px!important;
  }
}
.product-master-group{border-radius:16px}

/* Supabase-managed field explanations */
.field-help-button{
  display:inline-grid;place-items:center;width:17px;height:17px;padding:0;
  border:1px solid color-mix(in srgb,var(--user-app-color,#0f2f49) 42%,transparent);
  border-radius:50%;background:transparent;color:var(--user-app-color,#0f2f49);
  font:800 10px/1 inherit;vertical-align:middle;cursor:pointer
}
.field-help-button:hover,.field-help-button:focus-visible{background:var(--user-app-color,#0f2f49);color:#fff;outline:none}
.field-label-with-help{display:inline-flex;align-items:center;gap:4px;min-width:0}
.field-help-popover{
  position:fixed;z-index:10020;padding:14px;border:1px solid var(--line);border-radius:13px;
  background:var(--panel);color:var(--text);box-shadow:0 18px 44px rgba(15,47,73,.2)
}
.field-help-popover[hidden]{display:none}
.field-help-popover-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.field-help-popover-head strong{font-size:13px}
.field-help-popover-head button{border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}
.field-help-popover p{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.5}

/* Field-help icons are intentionally disabled throughout Nivo4 Maker OS. */
.field-help-button,
.field-help-popover{
  display:none!important;
}

/* Compact, collapsible calculator sections */
#calculator .calculator-customer-details .details-body{gap:9px 12px;margin-top:10px}
#calculator .calculator-customer-details label{grid-template-rows:auto 38px}
#calculator .calculator-customer-details input,
#calculator .calculator-customer-details .input-with-action,
#calculator .calculator-customer-details .input-with-action .btn{
  height:38px;min-height:38px
}
#calculator .calculator-customer-details input{padding-block:7px}
#calculator .calculator-customer-details .input-with-action{align-items:stretch}
#calculator .calculator-production-costs > .production-cost-summary{
  display:list-item
}
#calculator .calculator-production-costs > .production-cost-summary::-webkit-details-marker{
  display:initial
}
#calculator .calculator-production-costs .production-cost-summary-content{
  width:calc(100% - 8px);
  display:inline-flex;align-items:center;justify-content:space-between;gap:16px;
  vertical-align:middle
}
#calculator .production-cost-grid input:not([type=checkbox]){background:var(--panel)}
#calculator .production-cost-grid input[data-manual-override=true]{
  border-color:var(--user-app-color,var(--accent));
  box-shadow:inset 3px 0 0 var(--user-app-color,var(--accent))
}
#cAverageDiscount{font-weight:850;background:var(--soft)}

/* Shared profile, product and machine image editor */
.image-editor-card{width:min(620px,calc(100vw - 24px));max-width:620px}
.image-editor-stage{position:relative;width:min(460px,100%);aspect-ratio:1;margin:0 auto;overflow:hidden;border-radius:18px;background:#101820;touch-action:none}
.image-editor-stage canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.image-editor-stage canvas.dragging{cursor:grabbing}
.image-editor-mask{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.9)}
.image-editor-modal[data-shape=round] .image-editor-mask{border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.42),inset 0 0 0 3px #fff}
.image-editor-zoom{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;margin-top:16px}
.image-editor-zoom>span{font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.image-editor-zoom input{padding:0}
.image-editor-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.image-editor-actions{justify-content:flex-end;margin-top:18px}
@media(max-width:540px){.image-editor-card{padding:14px}.image-editor-tools .btn{flex:1 1 44%}.image-editor-actions .btn{flex:1}}
.product-master-row{cursor:pointer}
.product-expand-icon{display:inline-block;width:20px;color:#6c7d8d}
.product-variant-list{margin:0 14px 14px 58px;padding:10px;border:1px solid #dce5ec;border-top:0;border-radius:0 0 14px 14px;background:#f6f8fa}
.product-variant-row,.product-variant-add{width:100%;border:0;background:transparent;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border-radius:10px;text-align:left;color:inherit}
.product-variant-row:hover,.product-variant-add:hover{background:#fff}
.product-variant-row .item-thumbnail{width:42px;height:42px}
.product-variant-row span:nth-child(2){display:grid;gap:3px;min-width:0}
.product-variant-row small{color:#6b7c8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-variant-open{color:#238b57;font-weight:700}
.product-variant-add{display:block;color:#238b57;font-weight:800;text-align:center;border:1px dashed #a8c9b7;margin-top:6px}
.product-variant-modal-card{max-width:780px}
.product-variant-grid .span-two{grid-column:1/-1}
.product-variant-guidance{padding:12px 14px;border-radius:10px;background:#eef7f2;color:#315d47}
.product-file-panel{display:grid;gap:12px;margin-top:18px;padding:16px;border:1px solid #dce5ec;border-radius:14px;background:#f8fafb}
.product-file-panel>div:first-child{display:grid;gap:4px}
.product-file-panel small{color:#667786}
.product-file-list{display:grid;gap:8px}
.product-file-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:#fff;border:1px solid #dce5ec;border-radius:10px}
.product-file-row>span{display:grid;gap:3px;min-width:0}
.product-file-row strong{overflow-wrap:anywhere}
@media(max-width:700px){
 .product-variant-list{margin:0 8px 12px;padding:8px}
 .product-variant-row{grid-template-columns:40px minmax(0,1fr)}
 .product-variant-open{display:none}
 .product-file-row{align-items:flex-start;flex-direction:column}
 .product-file-row .row{width:100%;justify-content:flex-end}
}

/* Global cloud activity feedback */
.startup-loading-overlay{
 position:fixed;
 inset:0;
 z-index:20000;
 display:grid;
 place-items:center;
 padding:24px;
 background:rgba(245,248,250,.86);
 -webkit-backdrop-filter:blur(5px);
 backdrop-filter:blur(5px);
}
.startup-loading-overlay[hidden]{display:none!important}
.startup-loading-card{
 display:grid;
 justify-items:center;
 gap:12px;
 width:min(360px,calc(100vw - 40px));
 padding:28px;
 border:1px solid rgba(15,47,73,.12);
 border-radius:18px;
 background:#fff;
 color:#0f2f49;
 text-align:center;
 box-shadow:0 20px 55px rgba(7,28,43,.18);
}
.startup-loading-card strong{font-size:18px}
.startup-loading-card>span:last-child{color:#667786;font-size:13px}
.startup-loading-spinner{
 width:34px;
 height:34px;
 border:4px solid rgba(15,47,73,.16);
 border-top-color:#0f2f49;
 border-radius:50%;
 animation:global-activity-spin .7s linear infinite;
}
.startup-data-loading #globalActivityIndicator{display:none!important}
.global-activity-indicator{
 position:fixed;
 left:50%;
 top:50%;
 z-index:10000;
 display:flex;
 align-items:center;
 gap:10px;
 max-width:min(90vw,420px);
 padding:11px 16px;
 border:1px solid rgba(255,255,255,.2);
 border-radius:999px;
 background:rgba(15,47,73,.96);
 color:#fff;
 box-shadow:0 14px 34px rgba(7,28,43,.28);
 font-size:13px;
 font-weight:800;
 line-height:1.25;
 pointer-events:none;
 transform:translate(-50%,-50%);
 animation:global-activity-enter .18s ease-out;
}
.global-activity-indicator[hidden]{display:none!important}
.global-activity-spinner{
 width:17px;
 height:17px;
 flex:0 0 17px;
 border:2px solid rgba(255,255,255,.35);
 border-top-color:#fff;
 border-radius:50%;
 animation:global-activity-spin .7s linear infinite;
}
@keyframes global-activity-spin{to{transform:rotate(360deg)}}
@keyframes global-activity-enter{
 from{opacity:0;transform:translate(-50%,calc(-50% + 8px))}
 to{opacity:1;transform:translate(-50%,-50%)}
}
@media(prefers-reduced-motion:reduce){
 .global-activity-indicator{animation:none}
 .global-activity-spinner{animation-duration:1.4s}
}
@media(max-width:560px){
 .global-activity-indicator{
  max-width:calc(100vw - 28px);
  padding:10px 14px;
 }
}

/* Persistent side panel navigation */
.app{
  display:grid!important;
  grid-template-columns:260px minmax(0,1fr)!important;
  min-height:100dvh
}
.app.collapsed{
  display:block!important;
  grid-template-columns:none!important
}
.profile-menu-shell,
.app.collapsed .profile-menu-shell{
  position:sticky!important;
  inset:auto!important;
  top:0!important;
  width:auto!important;
  height:100dvh!important;
  min-height:100dvh!important;
  padding:16px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:var(--user-app-color,#0f2f49)!important
}
.sidebar-compact-controls{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px
}
.profile-menu-toggle{
  width:48px;height:48px;
  display:grid;
  flex:0 0 48px;
  border-width:1px;
  box-shadow:none;
  cursor:default
}
.profile-menu-avatar{width:40px;height:40px}
.profile-menu-bars{display:none}
.sidebar-expand-toggle{
  width:36px;height:36px;min-width:36px;
  display:grid;place-items:center;
  padding:0;border:1px solid rgba(255,255,255,.28);border-radius:10px;
  background:rgba(255,255,255,.09);color:#fff;
  line-height:1;cursor:pointer
}
.sidebar-panel-icon{
  width:19px;height:19px;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round
}
.sidebar-panel-open-icon{display:none}
.sidebar-expand-toggle:hover{background:rgba(255,255,255,.17)}
.sidebar-expand-toggle:focus-visible{outline:3px solid #68c4df;outline-offset:2px}
.profile-menu-panel,
.profile-menu-shell.menu-open .profile-menu-panel{
  position:static!important;
  width:100%!important;
  max-height:none!important;
  height:calc(100dvh - 80px);
  display:flex!important;
  flex-direction:column;
  overflow:auto;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important
}
.profile-menu-panel .sidebar-user{
  width:100%;
  display:block!important;
  margin:2px 0 8px!important;
  padding:12px 10px 14px!important;
  border:0!important;
  border-radius:12px;
  background:transparent;
  color:#fff;
  text-align:left;
  cursor:pointer
}
.profile-menu-panel .sidebar-user:hover{background:rgba(255,255,255,.09)}
.profile-menu-panel .sidebar-user-copy{display:block!important}
.profile-menu-panel nav{
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-auto-flow:row!important;
  align-content:start;
  gap:5px!important;
  margin:0!important
}
.profile-menu-panel .nav,
.app.collapsed .profile-menu-panel .nav{
  min-height:43px!important;
  display:flex!important;
  justify-content:flex-start!important;
  gap:11px!important;
  padding:10px 12px!important
}
.profile-menu-panel .nav b,
.app.collapsed .profile-menu-panel .nav b{display:block!important;font-size:12px!important}
.profile-menu-panel #aboutBtn{border:0!important;background:transparent!important;box-shadow:none!important}
.profile-menu-panel #aboutBtn:hover{background:rgba(255,255,255,.09)!important}
.sidebar-menu-divider{
  height:1px;
  margin:8px 4px;
  background:rgba(255,255,255,.18)
}
.compact-topbar{padding-left:24px!important}

.app.collapsed .profile-menu-shell{
  position:fixed!important;
  inset:10px auto auto 12px!important;
  top:10px!important;left:12px!important;
  width:124px!important;
  height:58px!important;
  min-height:58px!important;
  padding:3px!important;
  background:transparent!important
}
.app.collapsed .sidebar-compact-controls{min-height:52px;justify-content:flex-start;gap:32px}
.app.collapsed .profile-menu-toggle{
  position:relative;
  width:52px;height:52px;
  display:grid;
  flex:0 0 52px
}
.app.collapsed .profile-menu-avatar{width:42px;height:42px}
.app.collapsed .profile-menu-bars{display:grid}
.app.collapsed .sidebar-expand-toggle{
  width:34px;height:42px;min-width:34px;
  margin:0!important;transform:none!important
}
.app.collapsed .sidebar-panel-close-icon{display:none}
.app.collapsed .sidebar-panel-open-icon{display:block}
.app.collapsed .profile-menu-panel{
  position:absolute!important;
  top:72px!important;left:8px!important;
  width:min(300px,calc(100vw - 24px))!important;
  height:auto!important;
  max-height:calc(100dvh - 88px)!important;
  display:none!important;
  padding:14px!important;
  border:1px solid rgba(255,255,255,.15)!important;
  border-radius:18px!important;
  background:color-mix(in srgb,var(--user-app-color,#0f2f49) 94%,black)!important;
  box-shadow:0 22px 55px rgba(3,16,28,.4)!important
}
.app.collapsed .profile-menu-shell.menu-open .profile-menu-panel{display:flex!important}
.app.collapsed .compact-topbar{padding-left:154px!important}

/* Phones and portrait tablets always use the avatar hamburger menu.
   The separate sidebar expand control is reserved for landscape tablets
   and desktop-sized windows. */
body.compact-navigation .sidebar-expand-toggle{
  display:none!important
}
body.compact-navigation .app.collapsed .profile-menu-shell{
  width:60px!important
}
body.compact-navigation .app.collapsed .sidebar-compact-controls{
  gap:0
}
body.compact-navigation .app.collapsed .compact-topbar{
  padding-left:88px!important
}

@media(max-width:760px){
  .app{display:block!important}
  .profile-menu-shell{
    position:fixed!important;
    z-index:90;
    width:min(280px,calc(100vw - 56px))!important
  }
  .app.collapsed .profile-menu-shell{
    top:8px!important;left:8px!important;
    height:58px!important;min-height:58px!important
  }
  .compact-topbar{padding-left:88px!important}
}

/* Dashboard editing polish and compact opportunity headers */
.dashboard-editable-panel > .dashboard-panel-drag-handle{
  position:relative;
  cursor:move!important;
  transition:background-color .15s ease;
}
.dashboard-editable-panel > .dashboard-panel-drag-handle:hover{
  background:color-mix(in srgb,var(--user-app-color,#0f2f49) 5%,transparent);
}
.dashboard-editable-panel.dashboard-panel-dragging > .dashboard-panel-drag-handle{
  cursor:grabbing!important;
}
.dashboard-editable-panel:hover .dashboard-resize-handle{
  background:color-mix(in srgb,var(--user-app-color,#0f2f49) 12%,transparent);
}
.dashboard-editable-panel:hover .dashboard-resize-n,
.dashboard-editable-panel:hover .dashboard-resize-s{
  left:16px;
  right:16px;
  height:5px;
}
.dashboard-editable-panel:hover .dashboard-resize-e,
.dashboard-editable-panel:hover .dashboard-resize-w{
  top:16px;
  bottom:16px;
  width:5px;
}
.dashboard-editable-panel:hover .dashboard-resize-ne,
.dashboard-editable-panel:hover .dashboard-resize-nw,
.dashboard-editable-panel:hover .dashboard-resize-se,
.dashboard-editable-panel:hover .dashboard-resize-sw{
  width:12px;
  height:12px;
  background:transparent;
}

#pipeline .pipeline-card-head .chart-type-control{
  display:grid;
  grid-template-columns:auto minmax(88px,1fr);
  align-items:center;
  gap:8px;
}
#pipeline .pipeline-card-head .chart-type-control .field-label-with-help{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}
#pipeline .pipeline-card-head .chart-type-control .field-help-button{
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  min-height:16px!important;
  flex:0 0 16px;
  font-size:9px!important;
  line-height:1!important;
}

@media(min-width:901px){
  #pipeline .forecast-table-card .forecast-toolbar{
    display:grid!important;
    grid-template-columns:minmax(210px,1fr) minmax(500px,auto);
    align-items:end!important;
    gap:16px;
  }
  #pipeline .forecast-table-card .forecast-toolbar > div:first-child{
    min-width:0;
  }
  #pipeline .forecast-table-card .forecast-toolbar h2,
  #pipeline .forecast-table-card .forecast-toolbar p{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #pipeline .forecast-table-card .forecast-toolbar-controls{
    display:grid!important;
    grid-template-columns:max-content minmax(180px,240px) minmax(160px,210px);
    align-items:end;
    gap:10px;
    width:auto!important;
    min-width:0;
    flex-wrap:nowrap!important;
  }
  #pipeline .forecast-table-card .forecast-search,
  #pipeline .forecast-table-card .forecast-sort{
    min-width:0;
  }
}

@media(min-width:901px) and (max-width:1120px){
  #pipeline .forecast-table-card .forecast-toolbar{
    grid-template-columns:minmax(190px,.7fr) minmax(460px,1.3fr);
  }
  #pipeline .forecast-table-card .forecast-toolbar-controls{
    grid-template-columns:max-content minmax(155px,1fr) minmax(145px,.85fr);
  }
}

/* Editable machine-setting dropdowns */
.machine-workflow-field-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.machine-workflow-field-heading>span{
  min-width:0;
}
.machine-workflow-option-edit{
  flex:0 0 auto;
  padding:2px 0;
  border:0;
  background:transparent;
  color:var(--accent);
  font-size:9px;
  font-weight:850;
  text-transform:none;
  letter-spacing:0;
  cursor:pointer;
}
.machine-workflow-option-edit:hover,
.machine-workflow-option-edit:focus-visible{
  text-decoration:underline;
}
.machine-workflow-combobox{
  position:relative;
  display:block;
}
.machine-workflow-combobox::after{
  content:"";
  position:absolute;
  top:50%;
  right:13px;
  width:7px;
  height:7px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}
.machine-workflow-combobox input{
  padding-right:34px;
}
.machine-workflow-option-editor-card{
  width:min(560px,100%);
  max-height:min(86vh,760px);
}
.machine-workflow-option-editor-card .card-head p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:12px;
}
.machine-workflow-option-list{
  display:grid;
  gap:9px;
  max-height:48vh;
  overflow:auto;
  padding:2px;
}
.machine-workflow-option-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 38px;
  gap:8px;
  align-items:center;
}
.machine-workflow-option-row .icon-btn.danger{
  color:var(--danger);
}
.machine-workflow-option-actions{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
  padding-top:15px;
  border-top:1px solid var(--line);
}

/* Keep wide machine dialogs inside the workspace beside the open sidebar. */
@media(min-width:761px){
  body.sidebar-expanded #machineSettingsModal,
  body.sidebar-expanded #xToolCatalogModal,
  body.sidebar-expanded #bambuCatalogModal,
  body.sidebar-expanded #makerFloCatalogModal,
  body.sidebar-expanded #hoggCatalogModal,
  body.sidebar-expanded #vendorSupplyCatalogModal{
    left:260px;
    width:calc(100vw - 260px);
  }
  body.sidebar-expanded #machineSettingsModal .machine-settings-modal-card,
  body.sidebar-expanded #xToolCatalogModal .xtool-catalog-modal-card,
  body.sidebar-expanded #bambuCatalogModal .xtool-catalog-modal-card,
  body.sidebar-expanded #makerFloCatalogModal .xtool-catalog-modal-card,
  body.sidebar-expanded #hoggCatalogModal .xtool-catalog-modal-card,
  body.sidebar-expanded #vendorSupplyCatalogModal .xtool-catalog-modal-card{
    max-width:calc(100vw - 296px);
  }
}

@media(max-width:620px){
  .machine-workflow-option-actions{
    align-items:stretch;
    flex-direction:column;
  }
  .machine-workflow-option-actions .row,
  .machine-workflow-option-actions .btn{
    width:100%;
  }
}

/* Refined workspace spacing and a quieter, Apple-inspired interface. */
:root{
  --radius:16px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 10px 30px rgba(15,23,42,.07);
  --apple-green:#34c759;
  --apple-green-hover:#2db84d;
  --apple-green-active:#248a3d;
  --apple-green-shadow:0 7px 18px rgba(52,199,89,.22);
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* The title area flows directly into the workspace without a divider. */
.topbar,
.compact-topbar{
  border-bottom:0!important;
  box-shadow:none!important;
}

@media(min-width:761px){
  .view{
    padding-left:clamp(34px,3vw,48px)!important;
    padding-right:clamp(30px,2.6vw,44px)!important;
    padding-bottom:44px!important;
  }
  .app:not(.collapsed) .compact-topbar{
    padding-left:clamp(34px,3vw,48px)!important;
    padding-right:clamp(30px,2.6vw,44px)!important;
  }
}

.card,
.stat-card,
.settings-panel,
.forecast-kpi,
.modal-card,
.dashboard-toolbar{
  border-color:color-mix(in srgb,var(--line) 82%,transparent);
  box-shadow:var(--shadow);
}

.card,
.stat-card{
  padding:21px;
}

.card-head{
  margin-bottom:18px;
}

input,
select,
textarea{
  min-height:40px;
  padding:9px 12px;
  border-radius:10px;
  box-shadow:0 1px 1px rgba(15,23,42,.02);
}

textarea{
  min-height:82px;
  line-height:1.45;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:#0a84ff!important;
  box-shadow:0 0 0 3px rgba(10,132,255,.14);
}

.btn{
  min-height:39px;
  padding:9px 14px;
  border-radius:10px;
}

.btn.small{
  min-height:32px;
  padding:6px 10px;
}

.settings-grid.compact-grid{
  gap:12px 16px;
}

.settings-grid.compact-grid input,
.settings-grid.compact-grid select,
.compact-control select{
  min-height:38px;
  padding:8px 10px;
}

.product-list-filter{
  width:min(210px,100%);
}

#pipeline .chart-type-control select{
  min-height:36px;
  padding-block:7px;
}

#pipeline .forecast-search{
  width:min(230px,100%);
}

#pipeline .forecast-sort{
  width:min(210px,100%);
}

.data-row,
.quotation-row,
.forecast-row{
  padding-block:12px;
}

@media(max-width:760px){
  .view{
    padding:0 16px 32px!important;
  }
  .card,
  .stat-card{
    padding:17px;
  }
}

/* Apple system green for affirmative and creation actions. */
.forecast-action-trigger,
.machine-action-trigger,
.product-action-trigger,
.subscribe-now-button,
.new-opportunity-icon{
  background:var(--apple-green)!important;
  border-color:var(--apple-green)!important;
  color:#fff!important;
  box-shadow:var(--apple-green-shadow);
}

.forecast-action-trigger:hover,
.machine-action-trigger:hover,
.product-action-trigger:hover,
.subscribe-now-button:hover,
.new-opportunity-icon:hover{
  background:var(--apple-green-hover)!important;
  border-color:var(--apple-green-hover)!important;
}

.forecast-action-trigger:active,
.machine-action-trigger:active,
.product-action-trigger:active,
.subscribe-now-button:active,
.new-opportunity-icon:active{
  background:var(--apple-green-active)!important;
  border-color:var(--apple-green-active)!important;
  transform:translateY(0);
}

.forecast-action-trigger:focus-visible,
.machine-action-trigger:focus-visible,
.product-action-trigger:focus-visible,
.subscribe-now-button:focus-visible,
.new-opportunity-icon:focus-visible{
  outline:3px solid rgba(52,199,89,.28);
  outline-offset:2px;
}

/* Keep every sidebar menu option visually equal. */
.profile-menu-panel .nav,
.app.collapsed .profile-menu-panel .nav,
.profile-menu-panel #aboutBtn,
.profile-menu-panel #logoutBtn{
  font-family:inherit!important;
  font-size:12px!important;
  font-weight:400!important;
  letter-spacing:0!important;
  color:#c7d6e4!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

.profile-menu-panel .nav b,
.app.collapsed .profile-menu-panel .nav b,
.profile-menu-panel #aboutBtn b,
.profile-menu-panel #logoutBtn b{
  font:inherit!important;
  color:inherit!important;
}

.profile-menu-panel .nav:hover,
.profile-menu-panel .nav.active,
.profile-menu-panel #aboutBtn:hover,
.profile-menu-panel #logoutBtn:hover{
  background:rgba(255,255,255,.09)!important;
  color:#fff!important;
}

/* In-app learning centre and startup slideshow. */
.learning-resource-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding:18px 20px 20px;
}
.learning-resource{
  min-width:0;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:12px;
  align-content:start;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
}
.learning-resource.featured{
  grid-template-columns:42px minmax(0,1fr);
  background:color-mix(in srgb,var(--user-app-color,#0f2f49) 5%,var(--panel));
  border-color:color-mix(in srgb,var(--user-app-color,#0f2f49) 25%,var(--line));
}
.learning-resource-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:var(--soft);
  color:var(--accent);
  font-size:18px;
  font-weight:850;
}
.learning-resource strong{display:block;font-size:13px}
.learning-resource p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.5}
.learning-resource .btn,
.learning-resource-status{
  grid-column:1/-1;
  justify-self:start;
  margin-top:5px;
}
.learning-resource-status{
  padding:6px 9px;
  border-radius:999px;
  background:var(--soft);
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}

.instruction-slideshow-modal{
  z-index:120;
  background:rgba(5,15,25,.68);
  backdrop-filter:blur(12px);
}
.instruction-slideshow-card{
  position:relative;
  width:min(880px,100%);
  display:grid;
  grid-template-columns:minmax(240px,.75fr) minmax(0,1.25fr);
  gap:0 34px;
  overflow:hidden;
  padding:30px;
  border:1px solid color-mix(in srgb,var(--line) 75%,transparent);
  box-shadow:0 34px 90px rgba(4,13,22,.30);
}
.instruction-slide-visual{
  position:relative;
  grid-row:1/4;
  min-height:390px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:22px;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.28),transparent 32%),
    linear-gradient(145deg,var(--user-app-color,#0f2f49),color-mix(in srgb,var(--user-app-color,#0f2f49) 64%,#5ac8fa));
}
.instruction-slide-icon{
  position:relative;
  z-index:2;
  width:112px;
  height:112px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.4);
  border-radius:32px;
  background:rgba(255,255,255,.16);
  color:#fff;
  box-shadow:0 20px 48px rgba(0,0,0,.18);
  backdrop-filter:blur(16px);
  font-size:52px;
  font-weight:800;
}
.instruction-slide-orbit{
  position:absolute;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
}
.instruction-slide-orbit.one{width:230px;height:230px}
.instruction-slide-orbit.two{width:340px;height:340px}
.instruction-slide-content{
  align-self:center;
  padding-top:28px;
}
.instruction-slide-content h2{
  max-width:520px;
  margin:8px 0 12px;
  font-size:clamp(25px,3vw,36px);
  letter-spacing:-.04em;
}
.instruction-slide-content>p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}
.instruction-slide-points{
  display:grid;
  gap:9px;
  margin:20px 0 0;
  padding:0;
  list-style:none;
}
.instruction-slide-points li{
  position:relative;
  padding-left:25px;
  color:var(--text);
  font-size:13px;
  font-weight:650;
}
.instruction-slide-points li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:-1px;
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(52,199,89,.14);
  color:#248a3d;
  font-size:10px;
  font-weight:900;
}
.instruction-progress-track{
  align-self:end;
  height:5px;
  margin-top:26px;
  overflow:hidden;
  border-radius:999px;
  background:var(--soft);
}
.instruction-progress-track span{
  display:block;
  width:20%;
  height:100%;
  border-radius:inherit;
  background:#0a84ff;
  transition:width .24s ease;
}
.instruction-slide-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-top:10px;
  color:var(--muted);
  font-size:10px;
  font-weight:750;
}
.instruction-slide-dots{display:flex;gap:6px}
.instruction-slide-dots button{
  width:7px;
  height:7px;
  min-height:0;
  padding:0;
  border:0;
  border-radius:999px;
  background:var(--line);
  cursor:pointer;
  transition:width .18s ease,background .18s ease;
}
.instruction-slide-dots button.active{width:22px;background:#0a84ff}
.instruction-slide-footer{
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.instruction-dismiss-choice{
  display:flex;
  grid-template-columns:none;
  align-items:center;
  gap:9px;
  color:var(--muted);
  font-size:11px;
  font-weight:650;
  cursor:pointer;
}
.instruction-dismiss-choice input{
  width:17px;
  height:17px;
  min-height:0;
  margin:0;
  accent-color:#0a84ff;
}
@media(max-width:900px){
  .learning-resource-grid{grid-template-columns:1fr}
  .instruction-slideshow-card{grid-template-columns:1fr;max-width:680px}
  .instruction-slide-visual{grid-row:auto;min-height:190px}
  .instruction-slide-icon{width:86px;height:86px;border-radius:25px;font-size:39px}
  .instruction-slide-content{padding-top:22px}
}
@media(max-width:620px){
  .instruction-slideshow-card{padding:20px}
  .instruction-slide-visual{min-height:145px}
  .instruction-slide-orbit.two{display:none}
  .instruction-slide-content h2{font-size:24px}
  .instruction-slide-footer{align-items:stretch;flex-direction:column}
  .instruction-slide-footer .row{width:100%}
  .instruction-slide-footer .btn{flex:1}
}

/* Supplies */
.supply-list-toolbar{
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(180px,260px);
  gap:14px;
  margin:4px 0 18px;
}
.supply-list-toolbar label{display:grid;gap:6px}
.supply-list-toolbar label>span{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.supply-list-row{
  display:grid;
  grid-template-columns:42px minmax(190px,1.4fr) repeat(4,minmax(112px,.72fr)) auto;
  align-items:center;
  gap:15px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.supply-list-row:hover{
  border-color:color-mix(in srgb,var(--accent) 28%,var(--line));
  box-shadow:0 8px 22px rgba(15,47,73,.08);
  transform:translateY(-1px);
}
.supply-list-row:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 28%,transparent);
  outline-offset:2px;
}
.supply-data-list{display:grid;gap:10px}
.supply-list-thumbnail{width:42px;height:42px;border-radius:12px}
.supply-list-thumbnail-default{
  border-color:color-mix(in srgb,var(--accent) 18%,var(--line));
  background:color-mix(in srgb,var(--accent) 9%,var(--panel));
  color:var(--accent);
}
.supply-list-thumbnail-default svg{width:25px;height:25px}
.supply-list-thumbnail-default path,.item-image-default-icon path{
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.item-image-default-icon{width:52px;height:52px;color:var(--accent)}
.supply-list-name{display:grid;gap:3px;min-width:0}
.supply-list-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.supply-list-name small,.product-list-value small{color:var(--muted)}
.supply-price-field .currency-input-shell,
.quick-supply-price-field .currency-input-shell{
  grid-template-columns:auto minmax(105px,1fr) auto;
}
.supply-price-field .currency-input-shell input,
.quick-supply-price-field .currency-input-shell input{
  padding-inline:12px!important;
}
.supply-field-guidance{
  color:var(--muted);
  font-size:9px;
  font-weight:600;
  line-height:1.35;
}
.supply-quantity-field,.quick-supply-quantity-field{align-content:start}
.quick-supply-price-field{grid-column:span 2}
.supply-editor-wide{grid-column:1/-1}
.supply-usage-panel,.product-supplies-panel{
  margin-top:18px;
  padding:17px;
  border:1px solid var(--line);
  border-radius:17px;
  background:color-mix(in srgb,var(--panel) 94%,var(--accent) 6%);
}
.supply-usage-panel .card-head,.product-supplies-panel .card-head{margin-bottom:13px}
.supply-usage-panel h3,.product-supplies-panel h3{margin:0 0 3px}
.supply-usage-list{display:grid;gap:7px}
.supply-usage-list>button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
  padding:11px 13px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  color:var(--text);
  text-align:left;
  cursor:pointer;
}
.supply-usage-list>button span{display:grid;gap:2px}
.supply-usage-list small{color:var(--muted)}
.product-supply-summary{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  margin-bottom:12px;
  color:var(--muted);
  font-size:11px;
}
.product-supply-summary strong{margin-left:5px;color:var(--text);font-size:13px}
.product-supply-lines{display:grid;gap:8px;margin-bottom:10px}
.quick-supply-editor{
  margin:12px 0;
  padding:15px;
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  border-radius:15px;
  background:color-mix(in srgb,var(--accent) 5%,var(--panel));
}
.quick-supply-editor[hidden]{display:none}
.quick-supply-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:13px;
}
.quick-supply-heading>div{display:grid;gap:3px}
.quick-supply-heading small{color:var(--muted)}
.quick-supply-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(130px,1fr));
  gap:11px;
  align-items:start;
}
.quick-supply-grid>label{display:grid;grid-template-rows:14px 42px;gap:6px;align-content:start;min-width:0}
.quick-supply-grid>label>span{
  display:flex;
  align-items:center;
  min-height:14px;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.quick-supply-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:13px;
}
.product-supply-line{
  display:grid;
  grid-template-columns:minmax(190px,1.6fr) minmax(130px,.7fr) minmax(90px,.45fr) minmax(120px,.55fr) 36px;
  align-items:start;
  gap:9px;
  padding:11px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--panel);
}
.product-supply-line label,
.product-supply-unit,
.product-supply-cost{
  display:grid;
  grid-template-rows:14px 42px;
  gap:6px;
  align-content:start;
  min-width:0;
}
.product-supply-line label>span,.product-supply-unit>span,.product-supply-cost>span{
  display:flex;
  align-items:center;
  min-height:14px;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.product-supply-line select,
.product-supply-line input,
.quick-supply-grid input,
.quick-supply-grid select,
.quick-supply-grid .currency-input-shell{
  width:100%;
  height:42px!important;
  min-height:42px!important;
  margin:0;
}
.product-supply-unit>strong,.product-supply-cost>strong{
  display:flex;
  align-items:center;
  min-width:0;
  height:42px;
  padding:0 11px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--soft);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.product-supply-remove{align-self:end;width:42px;height:42px;margin:0}
@media(max-width:1100px){
  .supply-list-row{grid-template-columns:42px minmax(180px,1fr) repeat(2,minmax(110px,.65fr)) auto}
  .supply-list-row>.product-list-value:nth-of-type(4),
  .supply-list-row>.product-list-value:nth-of-type(5){display:none}
  .product-supply-line{grid-template-columns:1fr 1fr 90px 120px 42px}
  .quick-supply-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}
}
@media(max-width:760px){
  .supply-list-toolbar{grid-template-columns:1fr}
  .supply-list-row{grid-template-columns:38px minmax(0,1fr) auto}
  .supply-list-row>.product-list-value{display:none}
  .supply-list-row .row-actions{grid-column:2/-1;justify-content:flex-start}
  .product-supply-line{grid-template-columns:1fr 1fr 42px}
  .product-supply-cost{grid-column:2}
  .product-supply-remove{grid-column:3;grid-row:1}
  .quick-supply-grid{grid-template-columns:1fr}
  .quick-supply-price-field{grid-column:auto}
}

/* Consistent professional form alignment */
#modal .modal-card:has(.product-edit-grid),
#modal .modal-card:has(.machine-edit-grid),
#modal .modal-card:has(.supply-edit-grid){
  width:min(860px,100%);
}

.product-edit-grid,
.machine-edit-grid,
.supply-edit-grid,
.quick-supply-grid,
.settings-grid,
.calculator-primary-details,
#calculator .opportunity-forecast-grid,
#profile .grid.three,
#calculator .production-cost-grid,
#calculator details>.grid.three{
  align-items:start;
  column-gap:18px;
  row-gap:14px;
}

.product-edit-grid .machine-field,
.machine-edit-grid .machine-field,
.supply-edit-grid .machine-field,
.quick-supply-grid>label,
.settings-grid>label,
.calculator-primary-details>label,
#calculator .opportunity-forecast-grid>label,
#profile .grid.three>label,
#calculator .production-cost-grid>label,
#calculator details>.grid.three>label{
  min-width:0;
  align-content:start;
}

.product-edit-grid .machine-label-line,
.machine-edit-grid .machine-label-line,
.supply-edit-grid .machine-label-line{
  min-height:24px;
  align-items:center;
}

:where(
  .product-edit-grid,
  .machine-edit-grid,
  .supply-edit-grid,
  .quick-supply-grid,
  .settings-grid,
  .calculator-primary-details,
  #calculator .opportunity-forecast-grid,
  #profile .grid.three,
  #calculator .production-cost-grid,
  #calculator details>.grid.three
) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:where(
  .product-edit-grid,
  .machine-edit-grid,
  .supply-edit-grid,
  .quick-supply-grid,
  .settings-grid,
  .calculator-primary-details,
  #calculator .opportunity-forecast-grid,
  #profile .grid.three,
  #calculator .production-cost-grid,
  #calculator details>.grid.three
) select,
:where(
  .product-edit-grid,
  .machine-edit-grid,
  .supply-edit-grid,
  .quick-supply-grid,
  .settings-grid,
  .calculator-primary-details,
  #calculator .opportunity-forecast-grid,
  #profile .grid.three,
  #calculator .production-cost-grid,
  #calculator details>.grid.three
) .currency-input-shell{
  height:42px;
  min-height:42px;
}

:where(
  .product-edit-grid,
  .machine-edit-grid,
  .supply-edit-grid,
  .quick-supply-grid,
  .settings-grid,
  .calculator-primary-details,
  #calculator .opportunity-forecast-grid,
  #profile .grid.three,
  #calculator .production-cost-grid,
  #calculator details>.grid.three
) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:where(
  .product-edit-grid,
  .machine-edit-grid,
  .supply-edit-grid,
  .quick-supply-grid,
  .settings-grid,
  .calculator-primary-details,
  #calculator .opportunity-forecast-grid,
  #profile .grid.three,
  #calculator .production-cost-grid,
  #calculator details>.grid.three
) select{
  padding-block:9px;
}

.product-edit-grid .currency-input-shell input,
.machine-edit-grid .currency-input-shell input,
.supply-edit-grid .currency-input-shell input,
.quick-supply-grid .currency-input-shell input{
  height:40px;
  min-height:40px;
}

.machine-edit-grid textarea,
.supply-edit-grid textarea,
#calculator .opportunity-forecast-grid textarea{
  min-height:96px;
}

#calculator .calculator-primary-details input:not([type="checkbox"]),
#calculator .production-cost-grid input:not([type="checkbox"]),
#calculator .opportunity-forecast-grid input:not([type="checkbox"]),
#calculator .opportunity-forecast-grid select,
#calculator details>.grid.three input:not([type="checkbox"]),
#calculator details>.grid.three select{
  height:42px!important;
  min-height:42px!important;
}

.product-supplies-panel,
.product-file-panel{
  margin-top:20px;
}

@media(max-width:760px){
  .product-edit-grid,
  .machine-edit-grid,
  .supply-edit-grid,
  .quick-supply-grid,
  .settings-grid,
  .calculator-primary-details,
  #calculator .opportunity-forecast-grid,
  #profile .grid.three,
  #calculator .production-cost-grid,
  #calculator details>.grid.three{
    column-gap:12px;
    row-gap:12px;
  }
}
.contact-list-toolbar{display:grid;grid-template-columns:minmax(240px,1fr) minmax(150px,210px) minmax(160px,220px);gap:14px;margin:18px 0}
.contact-header-actions{justify-content:flex-end}
.contact-list-toolbar label{display:grid;gap:6px;font-size:.8rem;font-weight:700;color:var(--muted)}
.contact-data-list{display:grid;gap:10px}
.contact-list-item{display:grid;grid-template-columns:48px minmax(150px,1.2fr) auto minmax(190px,1fr) 92px;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);cursor:pointer;transition:border-color .18s,box-shadow .18s}
.contact-list-item:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 8px 24px rgba(28,48,68,.08)}
.contact-avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,white);color:var(--accent);font-weight:800}
.contact-avatar img{width:100%;height:100%;object-fit:cover}
.contact-primary,.contact-channel{display:grid;gap:3px;min-width:0}
.contact-primary small,.contact-channel small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-channel a{color:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-type{padding:5px 9px;border-radius:999px;background:#e9f2fb;color:#286089;font-size:.75rem;font-weight:750}
.contact-type.client{background:#e5f5ec;color:#177342}.contact-type.suspect{background:#f3eefb;color:#68449b}
.contact-actions-menu{position:relative;justify-self:end}
.contact-actions-menu>summary{
  list-style:none;
  width:92px;
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:7px 10px;
  border:1px solid var(--apple-green)!important;
  border-radius:10px;
  background:var(--apple-green)!important;
  color:#fff!important;
  box-shadow:var(--apple-green-shadow);
  cursor:pointer;
  font:inherit;
  font-weight:750;
  white-space:nowrap;
}
.contact-actions-menu>summary:hover,
.contact-actions-menu[open]>summary{
  border-color:var(--apple-green-hover)!important;
  background:var(--apple-green-hover)!important;
}
.contact-actions-menu>summary::-webkit-details-marker{display:none}
.contact-actions-options{position:absolute;z-index:70;top:calc(100% + 6px);right:0;min-width:170px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 18px 40px rgba(19,40,60,.22);isolation:isolate}
.contact-actions-options button{width:100%;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:inherit;text-align:left;cursor:pointer}
.contact-actions-options button:hover{background:var(--soft)}
.contact-actions-options button.danger{color:#b42318}
.contact-actions-options button:disabled{opacity:.45;cursor:not-allowed}
.pipeline-global-actions-menu button:disabled{opacity:.42;cursor:not-allowed}
.modal-section-title{margin:22px 0 10px}
.contact-import-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.contact-import-summary>div{display:grid;gap:2px;padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:var(--soft)}
.contact-import-summary strong{font-size:1.3rem;color:var(--heading)}
.contact-import-summary span,.contact-import-source{font-size:.78rem;color:var(--muted)}
.contact-import-source{margin:0 0 15px}
.contact-import-duplicate{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,290px);align-items:center;gap:12px;margin-bottom:15px;font-size:.84rem;font-weight:750}
.contact-import-list{display:grid;gap:8px;max-height:42vh;overflow:auto;padding:2px}
.contact-import-row{display:grid;grid-template-columns:20px 46px minmax(0,1fr) auto;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:var(--panel);cursor:pointer}
.contact-import-row>input{width:17px;height:17px}
.contact-import-person{display:grid;gap:2px;min-width:0}
.contact-import-person small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-import-state{padding:5px 8px;border-radius:999px;background:#e5f5ec;color:#177342;font-size:.7rem;font-weight:750;white-space:nowrap}
.contact-import-state.duplicate{background:#fff1d6;color:#8a5200}
.contact-export-intro,.contact-export-note{color:var(--muted);font-size:.82rem}
.contact-export-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 16px}
.contact-export-options>label{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);cursor:pointer}
.contact-export-options>label:has(input:checked){border-color:color-mix(in srgb,var(--accent) 65%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--panel));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent)}
.contact-export-options input{margin-top:3px}
.contact-export-options span{display:grid;gap:4px}
.contact-export-options small{color:var(--muted);line-height:1.35}
.contact-export-scope{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,300px);align-items:center;gap:12px;font-size:.84rem;font-weight:750}
.contact-export-note{margin:13px 0 0}
.automatic-contact-sources{display:grid;gap:10px;margin-top:16px}
.automatic-contact-source{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:13px;padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}
.automatic-contact-source>div:nth-child(2){display:grid;gap:4px;min-width:0}
.automatic-contact-source small{color:var(--muted);line-height:1.4}
.automatic-contact-logo{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;font-weight:850;background:var(--soft);color:var(--heading)}
.automatic-contact-logo.google{color:#4285f4;background:#eef4ff}
.automatic-contact-logo.microsoft{color:#0078d4;background:#eaf5ff}
.automatic-contact-logo.apple{color:#202124;background:#f1f2f4}
.contact-notes{grid-column:1/-1}
.contact-opportunity-link{display:flex;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.contact-address-grid[data-address-layout="north-america"] .contact-postal{order:6}
.contact-address-grid[data-address-layout="north-america"] .contact-region{order:5}
.input-with-action{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.opportunity-contact-actions{grid-template-columns:minmax(0,1fr) auto auto}
.contact-combobox{position:relative;min-width:0}
.contact-combobox>input[type="search"]{width:100%}
.contact-combobox-results{position:absolute;z-index:80;top:calc(100% + 6px);left:0;right:0;max-height:310px;overflow:auto;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 45px rgba(19,40,60,.24);isolation:isolate}
.contact-combobox-results button{width:100%;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;padding:9px;border:0;border-radius:10px;background:transparent;color:inherit;text-align:left;cursor:pointer}
.contact-combobox-results button:hover,.contact-combobox-results button:focus{background:var(--soft);outline:none}
.contact-combobox-results button>span:last-child{display:grid;gap:2px;min-width:0}
.contact-combobox-results small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contact-result-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,white);color:var(--accent);font-size:.72rem;font-weight:800}
.contact-result-avatar img{width:100%;height:100%;object-fit:cover}
.contact-result-empty{padding:14px;color:var(--muted);font-size:.82rem}
.forecast-main{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:11px;min-width:0}
.forecast-main-copy{display:grid;gap:3px;min-width:0}
.forecast-main-copy>small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.forecast-contact-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,white);color:var(--accent);font-size:.76rem;font-weight:800;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 16%,var(--line))}
.forecast-contact-avatar img{width:100%;height:100%;object-fit:cover}
@media(max-width:850px){
 .contact-header-actions{width:100%;justify-content:stretch}
 .contact-header-actions .btn{flex:1}
 .contact-list-toolbar{grid-template-columns:1fr}
 .contact-list-item{grid-template-columns:46px 1fr auto}
 .contact-list-item .contact-channel{grid-column:2/-1}
 .contact-list-item .contact-type{grid-column:3}
 .contact-actions-menu{grid-column:3;grid-row:1}
 .contact-editor-grid,.contact-address-grid{grid-template-columns:1fr!important}
 .contact-import-summary{grid-template-columns:1fr}
 .contact-import-duplicate{grid-template-columns:1fr}
 .contact-import-row{grid-template-columns:20px 42px minmax(0,1fr)}
 .contact-import-state{grid-column:3}
 .contact-export-options{grid-template-columns:1fr}
 .contact-export-scope{grid-template-columns:1fr}
 .automatic-contact-source{grid-template-columns:42px minmax(0,1fr)}
 .automatic-contact-source>.row{grid-column:2}
 .pipeline-contact-filter{align-items:flex-start;flex-direction:column}
}

/* Compact list density */
.product-list-row,
.machine-list-row{
  min-height:0!important;
  gap:9px!important;
  padding:7px 10px!important;
}
.product-list-row>.item-list-thumbnail,
.machine-list-row>.item-list-thumbnail,
.supply-list-thumbnail{
  width:36px!important;
  height:36px!important;
  border-radius:9px;
}
.product-list-row{
  grid-template-columns:24px 36px minmax(150px,1.45fr) repeat(6,minmax(86px,.8fr)) 106px;
}
.machine-list-row{
  grid-template-columns:24px 36px minmax(150px,1.45fr) repeat(5,minmax(86px,.8fr)) 106px;
}
#productList,
#machineList,
.supply-data-list,
.contact-data-list,
#pipeline .forecast-list{
  gap:7px;
}
.supply-list-row{
  grid-template-columns:36px minmax(190px,1.4fr) repeat(4,minmax(112px,.72fr)) auto;
  gap:10px;
  padding:8px 11px;
  border-radius:13px;
}
.supply-list-row>*{min-width:0}
.supply-list-row .product-list-value strong,
.supply-list-name strong,
.supply-list-name small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.supply-list-row .product-list-actions{justify-self:end}
.supply-list-row .product-action-trigger{width:100px;min-width:100px}
.contact-list-item{
  grid-template-columns:40px minmax(150px,1.2fr) auto minmax(190px,1fr) 88px;
  gap:10px;
  padding:7px 11px;
  border-radius:12px;
}
.contact-avatar{
  width:38px;
  height:38px;
}
.contact-actions-menu>summary{
  width:88px;
  min-height:30px;
  padding:5px 8px;
}
#pipeline .forecast-row{
  gap:9px!important;
  padding:9px 12px!important;
}
.forecast-contact-avatar{
  width:34px;
  height:34px;
}
.forecast-main{
  grid-template-columns:34px minmax(0,1fr);
  gap:9px;
}

@media(max-width:760px), (min-width:761px) and (max-width:1180px) and (orientation:portrait){
  .product-list-row,
  .machine-list-row{
    grid-template-columns:38px minmax(0,1fr) auto!important;
    min-height:56px!important;
    padding:8px 10px!important;
  }
  .product-list-row>.item-list-thumbnail,
  .machine-list-row>.item-list-thumbnail{
    width:38px!important;
    height:38px!important;
  }
  #pipeline .forecast-row{
    padding:9px 10px!important;
  }
}

/* Keep My Supplies aligned with the other compact list views. */
@media(min-width:1181px){
  .supply-list-row{
    grid-template-columns:36px minmax(190px,1.4fr) repeat(4,minmax(100px,.72fr)) 106px;
  }
}
@media(min-width:761px) and (max-width:1180px){
  .supply-list-row{
    grid-template-columns:36px minmax(170px,1.4fr) repeat(2,minmax(100px,.75fr)) 106px;
  }
  .supply-list-row .supply-list-unit-cost{display:grid!important}
  .supply-list-row .supply-list-usage,
  .supply-list-row .supply-list-vendor{display:none}
}
@media(max-width:760px){
  .supply-list-row{
    grid-template-columns:38px minmax(0,1fr) 42px!important;
    gap:9px!important;
    min-height:56px;
    padding:8px 10px!important;
  }
  .supply-list-row .product-list-value{display:none!important}
  .supply-list-row .product-list-actions{
    grid-column:auto;
    justify-content:flex-end;
  }
  .supply-list-row .product-action-trigger{
    width:42px!important;
    min-width:42px!important;
  }
}

/* Subtle pastel lift for the editable dashboard. */
#dashboard .dashboard-editable-panel{
  border-color:color-mix(in srgb,var(--user-app-color,#0f2f49) 12%,var(--line));
  box-shadow:
    0 16px 34px rgba(31,71,98,.07),
    inset 0 1px 0 rgba(255,255,255,.72);
}
#dashboard [data-dashboard-panel="pipelineValue"]{
  background:linear-gradient(145deg,color-mix(in srgb,#dceeff 66%,var(--panel)),color-mix(in srgb,#eef8ff 34%,var(--panel)));
}
#dashboard [data-dashboard-panel="expectedThisMonth"],
#dashboard [data-dashboard-panel="nextActions"]{
  background:linear-gradient(145deg,color-mix(in srgb,#e4f7ee 61%,var(--panel)),color-mix(in srgb,#f2fbf6 30%,var(--panel)));
}
#dashboard [data-dashboard-panel="expectedNextMonth"],
#dashboard [data-dashboard-panel="recentOpportunities"]{
  background:linear-gradient(145deg,color-mix(in srgb,#eee9ff 58%,var(--panel)),color-mix(in srgb,#f7f4ff 28%,var(--panel)));
}
#dashboard [data-dashboard-panel="winRate"],
#dashboard [data-dashboard-panel="opportunitySummary"]{
  background:linear-gradient(145deg,color-mix(in srgb,#fff0d9 58%,var(--panel)),color-mix(in srgb,#fff8ed 30%,var(--panel)));
}
#dashboard [data-dashboard-panel="averageDeal"],
#dashboard [data-dashboard-panel="popularProducts"]{
  background:linear-gradient(145deg,color-mix(in srgb,#e2f4f5 60%,var(--panel)),color-mix(in srgb,#f0fafb 28%,var(--panel)));
}
#dashboard [data-dashboard-panel="averageDiscount"]{
  background:linear-gradient(145deg,color-mix(in srgb,#ffe8ee 56%,var(--panel)),color-mix(in srgb,#fff4f7 28%,var(--panel)));
}
#dashboard [data-dashboard-panel="machinePerformance"]{background:linear-gradient(145deg,#f3f0ff 0%,#edf7ff 100%)}
.dashboard-machine-controls,.dashboard-machine-custom-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}
.dashboard-machine-controls label,.dashboard-machine-custom-dates label{display:grid;gap:5px}
.dashboard-machine-controls label>span,.dashboard-machine-custom-dates label>span{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.dashboard-machine-controls select,.dashboard-machine-custom-dates input{min-height:36px;padding:7px 10px;font-size:11px}
.dashboard-machine-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:4px 0 9px}
.dashboard-machine-metrics>div{display:grid;gap:4px;padding:12px;border:1px solid color-mix(in srgb,var(--accent) 12%,var(--line));border-radius:13px;background:rgba(255,255,255,.62)}
.dashboard-machine-metrics span{font-size:10px;color:var(--muted)}
.dashboard-machine-metrics strong{font-size:clamp(18px,2vw,25px)}
.dashboard-machine-performance-panel>small{color:var(--muted);font-size:10px}
.dashboard-panel-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.dashboard-panel-choice{display:flex;align-items:center;gap:9px;min-height:42px;padding:9px 11px;border:1px solid var(--line);border-radius:12px;background:var(--soft);font-size:11px;font-weight:720;cursor:pointer}
.dashboard-panel-choice input{width:17px;height:17px;margin:0;accent-color:var(--accent)}
@media(max-width:900px){.dashboard-panel-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Contact details stay inside the workspace beside the expanded side panel. */
@media(min-width:761px){
  body.sidebar-expanded.contact-detail-open #modal{
    left:260px;
    width:calc(100vw - 260px);
  }
  body.sidebar-expanded.contact-detail-open #modal .modal-card{
    max-width:calc(100vw - 296px);
  }
}

/* Upcoming actions: explicit opportunity context and tighter vertical rhythm. */
#pipeline .pipeline-actions-content .upcoming-actions{gap:6px}
#pipeline .upcoming-action{
  min-height:64px;
  grid-template-columns:72px minmax(0,1fr) auto;
  gap:9px;
  padding:8px 10px;
  border-radius:11px;
}
#pipeline .upcoming-copy{min-width:0}
#pipeline .upcoming-copy strong{font-size:11px;line-height:1.25}
#pipeline .upcoming-copy small{
  margin-top:2px;
  overflow:hidden;
  color:var(--text);
  font-size:10px;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#pipeline .upcoming-copy small b{color:var(--muted);font-weight:750}
#pipeline .upcoming-contact{display:block;margin-top:1px;color:var(--muted);font-size:9px;line-height:1.2}
#pipeline .upcoming-date{font-size:9px}
@media(max-width:600px){
  #pipeline .upcoming-action{grid-template-columns:68px minmax(0,1fr) auto}
  #pipeline .upcoming-date{grid-column:auto}
}

/* Portrait opportunity lists keep the landscape hierarchy without tall cards. */
@media(min-width:761px) and (max-width:1180px) and (orientation:portrait){
  #pipeline .forecast-row{
    grid-template-columns:minmax(170px,1.35fr) 76px 92px minmax(108px,.8fr) 82px 42px!important;
    align-items:center!important;
    gap:7px 9px!important;
    padding:8px 10px!important;
    margin-top:6px!important;
  }
  #pipeline .forecast-row>div{grid-column:auto!important;width:auto!important;text-align:left!important}
  #pipeline .forecast-row .forecast-main{grid-column:1!important;grid-row:1!important}
  #pipeline .forecast-row .forecast-next-action{grid-column:4!important;grid-row:1!important}
  #pipeline .forecast-row .forecast-actions{grid-column:6!important;grid-row:1!important;justify-self:end!important}
  #pipeline .forecast-actions .forecast-action-trigger{width:42px!important;min-width:42px!important;height:36px;padding:6px!important}
  #pipeline .forecast-actions .forecast-action-trigger>span:first-child{display:none}
  #pipeline .forecast-main-copy>small,
  #pipeline .forecast-next-action small{margin-top:1px;font-size:9px}
  #pipeline .forecast-row .data-label{margin-bottom:2px;font-size:8px}
  #pipeline .forecast-row strong{font-size:11px}
}

@media(max-width:760px){
  #pipeline .forecast-row{
    grid-template-columns:repeat(3,minmax(0,1fr)) 42px!important;
    gap:7px 9px!important;
    padding:9px 10px!important;
  }
  #pipeline .forecast-row>div{grid-column:auto!important}
  #pipeline .forecast-row .forecast-main{grid-column:1/4!important;grid-row:1!important}
  #pipeline .forecast-row .forecast-actions{grid-column:4!important;grid-row:1!important;width:auto!important;justify-self:end!important}
  #pipeline .forecast-row>div:nth-child(2){grid-column:1!important;grid-row:2!important}
  #pipeline .forecast-row>div:nth-child(3){grid-column:2!important;grid-row:2!important}
  #pipeline .forecast-row>div:nth-child(5){grid-column:3!important;grid-row:2!important}
  #pipeline .forecast-row .forecast-next-action{grid-column:1/5!important;grid-row:3!important;padding-top:6px;border-top:1px solid var(--line)}
  #pipeline .forecast-actions .forecast-action-trigger{width:42px!important;min-width:42px!important;height:38px;padding:6px!important}
  #pipeline .forecast-actions .forecast-action-trigger>span:first-child{display:none}
  #pipeline .forecast-row .data-label{margin-bottom:2px;font-size:8px}
  #pipeline .forecast-row strong{font-size:11px}
  #pipeline .forecast-next-action small{display:inline;margin-left:6px;font-size:9px}
}
@media(max-width:620px){.dashboard-machine-controls,.dashboard-machine-custom-dates,.dashboard-machine-metrics,.dashboard-panel-choice-grid{grid-template-columns:1fr}}
[data-theme="dark"] #dashboard .dashboard-editable-panel{
  border-color:color-mix(in srgb,#8fb9d5 15%,var(--line));
  box-shadow:0 16px 34px rgba(0,0,0,.16);
}

/* Carry the same pastel system into My Opportunities. */
#pipeline .forecast-kpi,
#pipeline .pipeline-overview-card,
#calculator .calc-grid>.stack>article{
  border-color:color-mix(in srgb,var(--user-app-color,#0f2f49) 12%,var(--line));
  box-shadow:
    0 16px 34px rgba(31,71,98,.07),
    inset 0 1px 0 rgba(255,255,255,.72);
}
#pipeline .forecast-kpi:nth-child(1){
  background:linear-gradient(145deg,color-mix(in srgb,#dceeff 66%,var(--panel)),color-mix(in srgb,#eef8ff 34%,var(--panel)));
}
#pipeline .forecast-kpi:nth-child(2){
  background:linear-gradient(145deg,color-mix(in srgb,#e4f7ee 61%,var(--panel)),color-mix(in srgb,#f2fbf6 30%,var(--panel)));
}
#pipeline .forecast-kpi:nth-child(3){
  background:linear-gradient(145deg,color-mix(in srgb,#eee9ff 58%,var(--panel)),color-mix(in srgb,#f7f4ff 28%,var(--panel)));
}
#pipeline .forecast-kpi:nth-child(4){
  background:linear-gradient(145deg,color-mix(in srgb,#fff0d9 58%,var(--panel)),color-mix(in srgb,#fff8ed 30%,var(--panel)));
}
#pipeline .pipeline-overview-card:nth-child(1){
  background:linear-gradient(145deg,color-mix(in srgb,#e2f4f5 60%,var(--panel)),color-mix(in srgb,#f0fafb 28%,var(--panel)))!important;
}
#pipeline .pipeline-overview-card:nth-child(2){
  background:linear-gradient(145deg,color-mix(in srgb,#ffe8ee 56%,var(--panel)),color-mix(in srgb,#fff4f7 28%,var(--panel)))!important;
}
#pipeline .pipeline-overview-card:nth-child(3){
  background:linear-gradient(145deg,color-mix(in srgb,#e4f7ee 61%,var(--panel)),color-mix(in srgb,#f2fbf6 30%,var(--panel)))!important;
}
#calculator .calc-grid>.stack>article:nth-child(1){
  color:var(--text);
  background:linear-gradient(145deg,color-mix(in srgb,#dceeff 66%,var(--panel)),color-mix(in srgb,#eef8ff 34%,var(--panel)))!important;
}
#calculator .calc-grid>.stack>article:nth-child(2){
  background:linear-gradient(145deg,color-mix(in srgb,#fff0d9 58%,var(--panel)),color-mix(in srgb,#fff8ed 30%,var(--panel)))!important;
}
#calculator .calc-grid>.stack>article:nth-child(3){
  background:linear-gradient(145deg,color-mix(in srgb,#eee9ff 58%,var(--panel)),color-mix(in srgb,#f7f4ff 28%,var(--panel)))!important;
}
#calculator .calc-grid>.stack>.price-card>span,
#calculator .calc-grid>.stack>.price-card small{color:var(--muted)}
#calculator .calc-grid>.stack>.price-card .metric-grid div{
  border-color:color-mix(in srgb,var(--user-app-color,#0f2f49) 14%,var(--line));
}
[data-theme="dark"] #pipeline .forecast-kpi,
[data-theme="dark"] #pipeline .pipeline-overview-card,
[data-theme="dark"] #calculator .calc-grid>.stack>article{
  border-color:color-mix(in srgb,#8fb9d5 15%,var(--line));
  box-shadow:0 16px 34px rgba(0,0,0,.16);
}

/* Branded Tell a friend flow. */
.invite-friend-card{width:min(680px,100%)}
.invite-friend-card .card-head p{max-width:520px;margin:5px 0 0}
.invite-friend-preview{
  display:grid;
  gap:7px;
  margin:4px 0 20px;
  padding:22px;
  border:1px solid color-mix(in srgb,#0a84ff 18%,var(--line));
  border-radius:17px;
  background:linear-gradient(145deg,color-mix(in srgb,#dceeff 62%,var(--panel)),color-mix(in srgb,#f3efff 35%,var(--panel)));
}
.invite-friend-preview>span{color:#1764a0;font-size:9px;font-weight:850;letter-spacing:.09em}
.invite-friend-preview>strong{font-size:18px;letter-spacing:-.02em}
.invite-friend-preview>small{color:var(--muted);line-height:1.5}
.invite-friend-fields{align-items:start}
.invite-friend-card .auth-message{margin-top:16px}
@media(max-width:620px){
  .invite-friend-fields{grid-template-columns:1fr!important}
  .invite-friend-card .row .btn{flex:1}
}

/* Compact, selectable contact register. */
.contact-list-toolbar input,
.contact-list-toolbar select{
  height:42px!important;
  min-height:42px!important;
  padding-block:8px!important;
}
.contact-bulk-toolbar{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  align-items:end;
  gap:12px;
  margin:-3px 0 12px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:color-mix(in srgb,var(--user-app-color,#0f2f49) 4%,var(--panel));
}
.contact-select-all{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  color:var(--text);
  font-size:11px;
  white-space:nowrap;
}
.contact-select-all input,
.contact-row-select input{
  width:17px!important;
  height:17px!important;
  min-height:17px!important;
  margin:0;
  padding:0!important;
  accent-color:var(--user-app-color,#0f2f49);
}
#selectedContactCount{
  align-self:center;
  color:var(--muted);
  font-size:11px;
  white-space:nowrap;
}
.contact-bulk-actions{
  display:flex;
  align-items:end;
  justify-content:flex-end;
  gap:7px;
  min-width:0;
}
.contact-bulk-actions>label{
  display:grid;
  grid-template-columns:auto minmax(130px,180px);
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:10px;
  white-space:nowrap;
}
.contact-bulk-actions select{
  min-height:32px!important;
  height:32px!important;
  padding:5px 28px 5px 9px!important;
  font-size:11px;
}
.contact-bulk-actions .btn{
  min-height:32px;
  padding:6px 10px;
  white-space:nowrap;
}
.contact-bulk-actions .btn:disabled{opacity:.42;cursor:not-allowed}
.contact-list-item{
  grid-template-columns:20px 34px minmax(150px,1.2fr) auto minmax(180px,1fr) 84px!important;
  gap:8px!important;
  min-height:48px;
  padding:5px 9px!important;
  border-radius:11px!important;
}
.contact-list-item.selected{
  border-color:color-mix(in srgb,var(--user-app-color,#0f2f49) 38%,var(--line));
  background:color-mix(in srgb,var(--user-app-color,#0f2f49) 5%,var(--panel));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--user-app-color,#0f2f49) 7%,transparent);
}
.contact-row-select{
  display:grid;
  place-items:center;
  min-width:20px;
  cursor:pointer;
}
.contact-list-item .contact-avatar{
  width:34px!important;
  height:34px!important;
  font-size:11px;
}
.contact-list-item .contact-primary,
.contact-list-item .contact-channel{gap:1px}
.contact-list-item .contact-primary strong{font-size:11px}
.contact-list-item .contact-primary small,
.contact-list-item .contact-channel,
.contact-list-item .contact-channel small{font-size:9px}
.contact-list-item .contact-type{
  padding:4px 7px;
  font-size:9px;
}
.contact-list-item .contact-actions-menu>summary{
  width:84px;
  min-height:28px;
  padding:4px 7px;
  font-size:10px;
}
.contact-list-item .contact-actions-menu{
  margin:0;
  padding:0;
  border:0;
}
@media(max-width:1050px){
  .contact-bulk-toolbar{grid-template-columns:auto 1fr}
  .contact-bulk-actions{grid-column:1/-1;justify-content:flex-start}
}
@media(max-width:850px){
  .contact-bulk-toolbar{grid-template-columns:1fr auto;align-items:center}
  .contact-bulk-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
  }
  .contact-bulk-actions>label{grid-column:1/-1;grid-template-columns:1fr}
  .contact-bulk-actions>label select{width:100%}
  .contact-bulk-actions .btn{width:100%}
  .contact-list-item{
    grid-template-columns:20px 34px minmax(0,1fr) 42px!important;
    min-height:46px;
  }
  .contact-list-item .contact-avatar{grid-column:2;grid-row:1}
  .contact-list-item .contact-primary{grid-column:3;grid-row:1}
  .contact-list-item .contact-type,
  .contact-list-item .contact-channel{display:none}
  .contact-list-item .contact-actions-menu{grid-column:4;grid-row:1}
  .contact-list-item .contact-actions-menu>summary{
    width:42px!important;
    min-width:42px!important;
    padding:4px!important;
  }
  .contact-list-item .contact-actions-menu>summary span:first-child{display:none}
.contact-bulk-toolbar:not(.has-selection) .contact-bulk-actions{display:none}
}

/* Compact, consistent primary actions in the My Contacts header. */
#contacts .contact-header-actions{
  display:grid;
  grid-template-columns:repeat(3,max-content);
  align-items:center;
  justify-content:end;
  gap:8px;
}
#contacts .contact-header-actions .btn{
  min-width:0;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 12px;
  border-radius:11px;
  font-size:11px;
  line-height:1.15;
  white-space:nowrap;
}
#contacts .contact-header-actions .btn::before{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  flex:0 0 18px;
  border-radius:6px;
  background:color-mix(in srgb,currentColor 10%,transparent);
  font-size:13px;
  font-weight:850;
}
#exportContacts::before{content:"↓"}
#importContacts::before{content:"↑"}
#addContact::before{content:"+";font-size:16px!important}
.supply-variant-panel,.supply-usage-panel{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.supply-variant-list{display:grid;gap:7px;margin-top:10px}
.supply-variant-list>button{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);text-align:left;color:var(--text);cursor:pointer}
.supply-variant-list>button span:first-child{display:grid;gap:2px}.supply-variant-list small{color:var(--muted)}
.supply-to-product-callout{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,var(--panel)),var(--panel))}
.supply-to-product-callout>div{display:grid;gap:3px}.supply-to-product-callout small,.block-note{display:block;color:var(--muted)}
.supply-to-products-card{width:min(720px,100%)}
.supply-create-product-option{display:flex;align-items:center;gap:9px;margin:15px 0;padding:12px;border-radius:12px;background:var(--soft);font-weight:750}
.supply-create-product-option input{width:18px;height:18px}
.supply-product-selection{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:310px;overflow:auto;margin-top:9px}
.supply-product-selection label{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.supply-product-selection label>span{display:flex;align-items:center;gap:8px;min-width:0}.supply-product-selection input{width:17px;height:17px;flex:0 0 auto}.supply-product-selection .item-thumbnail{width:34px;height:34px}
.supply-master-group{border-radius:14px;overflow:hidden}.supply-master-group.expanded{border:1px solid var(--line);background:color-mix(in srgb,var(--accent) 3%,var(--panel))}.supply-master-group.expanded .supply-list-row{border-bottom:1px solid var(--line);border-radius:0}
.supply-expand-button{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:5px;border:0;border-radius:7px;background:var(--soft);color:var(--text);cursor:pointer;vertical-align:middle}
.supply-list-variants{display:grid;padding:7px 12px 10px 64px}.supply-list-variants>button{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);text-align:left;cursor:pointer}.supply-list-variants>button:last-child{border-bottom:0}.supply-list-variants>button span:nth-child(2){display:grid;gap:2px}.supply-list-variants small{color:var(--muted)}.supply-list-variants .item-thumbnail{width:36px;height:36px}.supply-list-variants .supply-list-add-variant{display:block;padding-left:48px;color:var(--accent);font-weight:800}
@media(max-width:620px){.supply-to-product-callout{align-items:stretch;flex-direction:column}.supply-product-selection{grid-template-columns:1fr}}
@media(max-width:1050px){
  #contacts>.card>.card-head{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  #contacts .contact-header-actions{
    width:100%;
    grid-template-columns:repeat(3,minmax(0,1fr));
    justify-content:stretch;
  }
}

/* Photography OS responsive shell
   This final layer deliberately owns the relationship between navigation,
   page content and dialogs. It replaces several historical breakpoint rules
   that could leave tablet content underneath the side panel. */
html,body{max-width:100%;overflow-x:hidden}
#app,.main,.view,.card,.content-grid{min-width:0;max-width:100%}

/* A dialog is a viewport-level surface. Keeping it above the navigation makes
   every editor and detail window behave identically with either sidebar state. */
.modal{
  z-index:220!important;
  box-sizing:border-box;
  width:100%;
  max-width:100vw;
  padding:clamp(12px,2vw,24px)!important;
  overflow:hidden;
}
.modal-card{
  box-sizing:border-box;
  min-width:0;
  max-width:min(100%,1180px);
  max-height:calc(100dvh - clamp(24px,4vw,48px))!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.modal-card>.card-head{position:relative;min-width:0}
.modal-card input,.modal-card select,.modal-card textarea{max-width:100%}
.action-menu,.profile-media-menu,.contact-actions-menu,.product-actions-menu,.machine-actions-menu{
  max-width:min(300px,calc(100vw - 24px));
  max-height:min(520px,calc(100dvh - 24px));
  overflow:auto;
}

/* Expanded desktop and landscape-tablet navigation participates in the grid,
   so it can never cover the page. */
@media (min-width:761px){
  body.sidebar-expanded .app{
    display:grid!important;
    grid-template-columns:clamp(230px,19vw,260px) minmax(0,1fr)!important;
  }
  body.sidebar-expanded .profile-menu-shell{
    position:sticky!important;
    inset:auto!important;
    top:0!important;
    width:auto!important;
    height:100dvh!important;
    min-height:100dvh!important;
  }
  body.sidebar-expanded .main{grid-column:2;min-width:0;width:auto!important}

  body.sidebar-collapsed .app{display:block!important}
  body.sidebar-collapsed .main{width:100%!important;margin:0!important}
  body.sidebar-collapsed .compact-topbar{padding-left:154px!important}
}

/* Portrait tablets use the same predictable drawer pattern as phones. */
@media (min-width:761px) and (max-width:1180px) and (orientation:portrait){
  body.compact-navigation .app{display:block!important}
  body.compact-navigation .main{width:100%!important;margin:0!important;padding-bottom:18px!important}
  body.compact-navigation .compact-topbar{padding:12px 20px 10px 88px!important}
  body.compact-navigation .view{padding:0 18px 32px!important}
  body.compact-navigation .profile-menu-shell{
    position:fixed!important;
    top:10px!important;left:12px!important;
    width:60px!important;height:58px!important;min-height:58px!important;
  }
  body.compact-navigation .profile-menu-panel{
    position:absolute!important;
    top:66px!important;left:0!important;
    width:min(320px,calc(100vw - 28px))!important;
    height:auto!important;max-height:calc(100dvh - 92px)!important;
  }
  .dashboard-grid,.dashboard-layout,.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .calc-grid,.profile-grid,.two-col{grid-template-columns:1fr!important}
}

/* Phone layout: one readable column, full-width controls and an app-like
   profile drawer. Tables stay inside their own horizontal scroller. */
@media (max-width:760px){
  body.compact-navigation .app,
  body.sidebar-collapsed .app{display:block!important}
  body.compact-navigation .main,
  body.sidebar-collapsed .main{
    width:100%!important;margin:0!important;
    padding:0 0 max(12px,env(safe-area-inset-bottom))!important;
  }
  body.compact-navigation .compact-topbar,
  body.sidebar-collapsed .compact-topbar{
    min-height:72px!important;
    padding:10px 12px 8px 76px!important;
  }
  .compact-topbar .top-actions{width:auto!important;margin-left:auto}
  .view{width:100%;padding:0 10px 24px!important}
  .card{width:100%;padding:14px!important;border-radius:16px!important}
  .grid,.grid.two,.grid.three,.two-col,.stats-grid,.metric-grid,
  .content-grid,.profile-grid,.calc-grid,.dashboard-grid,.dashboard-layout{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .card-head,.toolbar,.contact-list-toolbar,.contact-bulk-toolbar{
    min-width:0;max-width:100%;
  }
  .card-head{align-items:flex-start!important;flex-wrap:wrap}
  .card-head>.row,.toolbar>.row{width:100%;flex-wrap:wrap}
  .card-head .btn,.toolbar .btn{min-height:42px}
  .table-wrap,.forecast-table-card,.contact-data-list{
    max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }
  .modal{padding:8px!important;align-items:end!important}
  .modal-card{
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - 16px)!important;
    padding:16px!important;
    border-radius:18px!important;
  }
  .modal-card>.card-head{
    position:sticky;top:-16px;z-index:5;
    margin:-16px -16px 12px;padding:16px;
    background:var(--panel);border-bottom:1px solid var(--line);
  }
  .modal-card .grid.two,.modal-card .grid.three{grid-template-columns:1fr!important}
  .modal-card .row.wrap{align-items:stretch}
  .modal-card .row.wrap>.btn{flex:1 1 140px}
  .profile-menu-panel{overscroll-behavior:contain}
}

@media (max-width:480px){
  .compact-topbar h1{font-size:19px!important}
  .modal{padding:0!important}
  .modal-card{
    max-height:100dvh!important;min-height:100dvh;
    border-radius:0!important;
  }
  .modal-card>.card-head{top:-16px}
}
@media(max-width:560px){
  #contacts .contact-header-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #contacts .contact-header-actions #addContact{
    grid-column:1/-1;
  }
  #contacts .contact-header-actions .btn{
    width:100%;
    min-height:40px;
  }
}