:root{--sb-w:260px;
--teal:#5fe6e0;--teal-dk:#1fa8a4;--teal-dim:rgba(51,209,204,.1);--teal-dim2:rgba(51,209,204,.05);
--teal-sel:rgba(51,209,204,.18);--teal-surface:rgba(51,209,204,.12); /* unified teal: selected/active fill + highlighted-day surface */
--red:#d04141;--red-dim:rgba(208,65,65,.1);
--green:#5ba045;--green-dim:rgba(91,160,69,.1);
--amber:#c89148;--amber-dim:rgba(200,145,72,.1);
--blue:#4d83c0;--blue-dim:rgba(77,131,192,.1);
--purple:#7d5fcb;--purple-dim:rgba(125,95,203,.1);
--pink:#cf5274;--pink-dim:rgba(207,82,116,.12);
--fd:'Barlow Condensed',sans-serif;--fb:'Barlow',sans-serif;--fm:'Space Mono',monospace;
--r:2px;--rl:4px;--rs:2px;--tr:140ms ease;
--sb-w:260px;
}
[data-theme="dark"]{
--bg:#1d1d1d;--bg2:rgba(255,255,255,.03);--bg3:rgba(255,255,255,.05);--bg4:rgba(255,255,255,.08);
--border:rgba(255,255,255,.06);--border2:rgba(255,255,255,.08);--border3:rgba(255,255,255,.12);
--text:#dce4f0;--text2:#c8d0dc;--text3:#a0aab8;
--card:rgba(255,255,255,.03);--card2:rgba(255,255,255,.05);
--sb-bg:#171717;--sb-border:rgba(255,255,255,.04);
--shadow:0 4px 24px rgba(0,0,0,.4);
/* Earth-tone accents for dark mode — closer to original brightness */
--blue:#5a9adb;--blue-dim:rgba(90,154,219,.12);
--purple:#9670d8;--purple-dim:rgba(150,112,216,.12);
--amber:#d4a13f;--amber-dim:rgba(212,161,63,.12);
--green:#6dba50;--green-dim:rgba(109,186,80,.12);
--red:#d65454;--red-dim:rgba(214,84,84,.12);
--teal:#5fe6e0;--teal-dim:rgba(51,209,204,.12);--teal-sel:rgba(51,209,204,.18);--teal-surface:rgba(51,209,204,.12);
--pink:#d4628e;--pink-dim:rgba(212,98,142,.14);
}
[data-theme="light"]{
--bg:#f1f1ef;--bg2:#ffffff;--bg3:rgba(0,0,0,.035);--bg4:rgba(0,0,0,.06);
--border:rgba(0,0,0,.10);--border2:rgba(0,0,0,.13);--border3:rgba(0,0,0,.16);
--text:#1a1a2e;--text2:#6b7280;--text3:#9ca3af;
--card:#ffffff;--card2:#ffffff;
--sb-bg:#171717;--sb-border:rgba(255,255,255,.04);
--shadow:0 4px 24px rgba(0,0,0,.06);
/* Earth-tone accents for light mode — closer to original saturation */
--blue:#3a7ab0;--blue-dim:rgba(58,122,176,.1);
--purple:#6f47c0;--purple-dim:rgba(111,71,192,.1);
--amber:#b07730;--amber-dim:rgba(176,119,48,.1);
--green:#3a9645;--green-dim:rgba(58,150,69,.1);
--red:#c63636;--red-dim:rgba(198,54,54,.1);
--teal:#26b8b3;--teal-dim:rgba(38,184,179,.1);--teal-sel:rgba(38,184,179,.14);--teal-surface:rgba(38,184,179,.1);
--pink:#bb305f;--pink-dim:rgba(187,48,95,.1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{font-size:17px;height:100%;font-family:var(--fb);background:var(--bg);color:var(--text)}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=date]{color-scheme:dark;accent-color:var(--teal)}
[data-theme="light"] input[type=date]{color-scheme:light}
input[type=date]::-webkit-calendar-picker-indicator{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:13px;background-position:center;width:18px;height:18px;cursor:pointer;opacity:.75}
/* ── APP SHELL ── */
.app{display:flex;flex-direction:row;height:100dvh;overflow:hidden}
.page-scroll{flex:1;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;min-height:0;background:var(--bg);overscroll-behavior-y:contain;padding-bottom:env(safe-area-inset-bottom,16px)}
/* Mobile bottom-nav clearance spacer (shown only on phones; no nav on desktop). */
.nav-spacer{display:none}
/* Pull-to-refresh indicator — only visible during a pull gesture. Parked
* above the top edge by default and translated into view by touchmove.
* overscroll-behavior-y:contain above suppresses Chrome Android's native
* page-reload pull so our custom gesture is the only one firing. */
#ptr-indicator{position:absolute;top:0;left:50%;transform:translate(-50%,-100%);background:var(--card);border:1px solid var(--border);border-top:none;border-radius:0 0 14px 14px;padding:.45rem 1rem;display:flex;align-items:center;gap:.5rem;font-family:var(--dm);font-size:.7rem;color:var(--text2);z-index:100;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.15);will-change:transform}
#ptr-indicator.snap{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
#ptr-indicator svg{stroke:var(--teal)}
#ptr-indicator.refreshing svg{animation:ptr-rotate 1s linear infinite}
@keyframes ptr-rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.main{display:contents}
/* ── SIDEBAR ── */
.sb{width:var(--sb-w);background:var(--sb-bg);border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;transition:width .25s ease}
.sb-nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-top:8px;scrollbar-width:thin;scrollbar-color:transparent transparent;transition:scrollbar-color .25s}
.sb-nav:hover,.sb-nav:focus-within,.sb-nav.scrolling{scrollbar-color:rgba(255,255,255,.2) transparent}
.sb-nav::-webkit-scrollbar{width:6px;background:transparent}
.sb-nav::-webkit-scrollbar-track{background:transparent}
.sb-nav::-webkit-scrollbar-thumb{background:transparent;border-radius:3px;transition:background .25s}
.sb-nav:hover::-webkit-scrollbar-thumb,.sb-nav:focus-within::-webkit-scrollbar-thumb,.sb-nav.scrolling::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15)}
.sb-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}
[data-theme="light"] .sb{background:#f5f5f5!important;border-right-color:rgba(0,0,0,.08)!important}
.sb::-webkit-scrollbar{width:2px}.sb::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:1px}
.sb-header{min-height:auto;box-sizing:border-box;flex-shrink:0}
.sb-logo{font-family:var(--fd);font-weight:900;font-size:1.15rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)!important;line-height:1}
.sb-sub{font-family:var(--dm);font-size:.64rem;color:#888!important;letter-spacing:.08em;text-transform:uppercase;margin-top:.25rem;opacity:1}
.sb-nav{flex:1;padding:.5rem 0}
.sb-section{margin-bottom:.1rem}
.sb-section-hdr{display:flex;align-items:center;justify-content:space-between;padding:.45rem 1rem .35rem;cursor:pointer;user-select:none}
.sb-section-hdr-text{display:flex;flex-direction:column;gap:0}
.sb-section-lbl{font-family:var(--dm);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)!important;font-weight:700;transition:color var(--tr)}
.sb-section-desc{display:none}
.sb-section-hdr:hover .sb-section-lbl{color:#bbb!important}
.sb-section-hdr.open .sb-section-lbl{color:var(--teal)!important}
.sb-chevron{display:inline-flex;align-items:center;color:var(--text3)!important;transition:transform .2s ease,color .15s;line-height:1}
.sb-section-hdr.open .sb-chevron{transform:rotate(90deg);color:#4a9f9b!important}
.sb-items{max-height:0;overflow:hidden;opacity:0;transition:max-height .25s ease,opacity .2s ease;padding-bottom:0}
.sb-items.open{max-height:500px;opacity:1;padding-bottom:.25rem}
.sb-item{display:flex;align-items:center;gap:.5rem;padding:.4rem 1rem .4rem 1.25rem;cursor:pointer;transition:all .15s ease;border-radius:8px;margin:2px .6rem}
.sb-item:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.7)}
.sb-item.active{background:rgba(51,209,204,.1);color:var(--teal)}
.sb-item-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:color var(--tr);color:var(--text)}
.sb-item-icon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block}
.sb-item.active .sb-item-icon{color:var(--teal)!important}
.sb-item:hover .sb-item-icon{color:#ccc!important}
.sb-item-lbl{font-size:.9rem;color:var(--text)!important;transition:color var(--tr)}
.sb-item.active .sb-item-lbl{color:var(--teal)!important;font-weight:500}
.sb-item:hover .sb-item-lbl{color:#ddd!important}
.sb-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;background:var(--red);color:#fff;font-family:var(--dm);font-size:10px;font-weight:700;border-radius:8px;margin-left:auto;flex-shrink:0}
.sb-badge:empty,.sb-badge[data-n="0"]{display:none}
.sb-footer{padding:.75rem 1rem;border-top:1px solid var(--sb-border);flex-shrink:0;display:flex;align-items:center;justify-content:space-between}
.sb-footer-lbl{font-family:var(--dm);font-size:.68rem;color:var(--text3)!important}
.theme-selector{display:flex;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px;overflow:hidden;flex-shrink:0}
[data-theme="light"] .theme-selector{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1)}
.theme-opt{background:none;border:none;padding:4px 7px;cursor:pointer;color:#fff!important;transition:all .15s;display:flex;align-items:center;justify-content:center}
.theme-opt:hover{color:#fff!important}
.theme-opt.active{background:var(--teal);color:#000!important;border-radius:4px}
[data-theme="light"] .theme-opt{color:#374151!important}
[data-theme="light"] .theme-opt:hover{color:#111!important}
[data-theme="light"] .theme-opt.active{color:#000!important}
/* ── SIDEBAR COLLAPSE ── */
.sb.sb-mini{width:52px!important;min-width:52px!important;overflow:visible!important}
/* Hide text, section headers, footer, badges */
.sb.sb-mini .sb-item-lbl{opacity:0!important;width:0!important;overflow:hidden;transition:opacity .15s}
.sb.sb-mini .sb-section-hdr{opacity:0;height:0;padding:0;overflow:hidden;pointer-events:none;transition:opacity .15s}
.sb.sb-mini .sb-items{max-height:500px!important;opacity:1!important;padding:0!important}
.sb.sb-mini .sb-footer{opacity:0;height:0;padding:0;overflow:hidden;transition:opacity .15s}
.sb.sb-mini .sb-badge{display:none!important}
/* Logo area: logo stays, wordmark hides */
.sb.sb-mini #sb-logo-wrap .sb-wordmark{opacity:0;width:0;overflow:hidden;transition:opacity .15s}
/* OS expand-on-hover: shows "OS" by default, "OPERATIONS SUITE" on logo hover */
.sb-os-short,.sb-os-full{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;transition:max-width .4s ease,opacity .25s ease}
.sb-os-short{max-width:2.5em;opacity:1}
.sb-os-full{max-width:0;opacity:0}
#sb-logo-wrap:hover .sb-os-short{max-width:0;opacity:0}
#sb-logo-wrap:hover .sb-os-full{max-width:14em;opacity:1}
.sb.sb-mini #sb-logo-wrap img{max-height:28px!important;width:auto!important;transition:all .25s ease}
.sb.sb-mini .sb-header{justify-content:center!important;position:relative;padding:12px 0!important}
.sb.sb-mini #sb-logo-wrap{justify-content:center!important;gap:0!important;transition:all .25s}
/* Collapse button: hidden by default, shows on header hover (swaps with logo) */
.sb.sb-mini #sb-collapse-btn{position:absolute!important;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;opacity:0;transition:opacity .15s}
.sb.sb-mini #sb-collapse-btn .sb-collapse-chevron{transform:rotate(180deg)}
.sb.sb-mini .sb-header:hover #sb-collapse-btn{opacity:1}
.sb.sb-mini .sb-header:hover #sb-logo-wrap img{opacity:0}
/* Icon items: uniform spacing, centered */
.sb.sb-mini .sb-item{position:relative;justify-content:center;padding:0!important;margin:0!important;border-left-width:2px!important;height:36px;min-height:36px;max-height:36px;width:52px;box-sizing:border-box}
.sb.sb-mini .sb-item .sb-item-icon{width:16px;height:16px}
.sb.sb-mini .sb-item .sb-item-icon svg{width:14px!important;height:14px!important}
.sb.sb-mini .sb-item:hover{background:rgba(255,255,255,.04)!important}
.sb.sb-mini .sb-item.active{background:rgba(51,209,204,.1)!important;border-radius:8px!important}
/* Section dividers in collapsed mode */
.sb.sb-mini .sb-section{border-top:1px solid rgba(255,255,255,.06);margin:0}
.sb.sb-mini .sb-section:first-child{border-top:none}
[data-theme="light"] .sb.sb-mini .sb-section{border-top-color:rgba(0,0,0,.06)}
[data-theme="light"] .sb.sb-mini .sb-item:hover{background:rgba(0,0,0,.03)!important}
/* Sidebar mini tooltip — rendered at body level to escape overflow:hidden */
#sb-mini-tip{position:fixed;background:rgba(23,23,23,.97);color:#d0dae8;font-family:var(--dm);font-size:11px;padding:4px 10px;border-radius:4px;white-space:nowrap;pointer-events:none;z-index:9999;box-shadow:0 4px 12px rgba(0,0,0,.3);display:none}
[data-theme="light"] #sb-mini-tip{background:rgba(255,255,255,.97);color:#374151;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.sb-header{min-height:auto;box-sizing:border-box;flex-shrink:0}
/* ── ALERT BELL ── */
.alert-bell{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;transition:background .15s}
.alert-bell:hover{background:var(--bg3)}
.alert-bell svg{width:18px;height:18px;stroke:var(--text2);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.alert-bell-badge{position:absolute;top:2px;right:2px;min-width:14px;height:14px;padding:0 3px;background:var(--teal);color:#000;font-family:var(--dm);font-size:.64rem;font-weight:700;border-radius:7px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.alert-bell-badge.urgent{background:var(--red);color:#fff}
.alert-bell-badge:empty{display:none}
.alert-dropdown{position:absolute;top:100%;right:0;width:360px;max-height:420px;overflow-y:auto;background:rgba(23,23,23,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:10px;box-shadow:0 16px 48px rgba(0,0,0,.5);z-index:9000;display:none;margin-top:6px}
.alert-dropdown.open{display:block}
.alert-dropdown-header{padding:.6rem .8rem;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between}
.alert-dropdown-header span{font-family:var(--dm);font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text2)}
.alert-dropdown-empty{padding:1.5rem;text-align:center;font-family:var(--dm);font-size:.72rem;color:var(--text2)}
.alert-group-title{font-family:var(--dm);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.5rem .8rem .25rem;color:#5a6a7e}
.alert-item{display:flex;align-items:flex-start;gap:.5rem;padding:.45rem .8rem;cursor:pointer;transition:background .1s;border-bottom:1px solid rgba(255,255,255,.06)}
.alert-item:hover{background:rgba(255,255,255,.06)}
.alert-item:last-child{border-bottom:none}
.alert-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:5px}
.alert-item-body{flex:1;min-width:0}
.alert-item-title{font-family:var(--dm);font-size:13px;font-weight:600;color:#d0dae8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alert-item-msg{font-family:var(--dm);font-size:10px;color:#5a6a7e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
@media(max-width:480px){.alert-dropdown{width:calc(100vw - 1rem);right:-4rem}}
/* Toast stack — colored-border alert cards with filled circle icon + dismiss */
.nb-toast-stack{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;z-index:99999;pointer-events:none;width:max-content;max-width:92vw}
.nb-toast{display:flex;align-items:center;gap:.6rem;width:max-content;min-width:260px;max-width:92vw;padding:.62rem .7rem .62rem .78rem;border-radius:5px;background-color:#1b1b1b;border:1px solid var(--border);box-shadow:0 10px 34px rgba(0,0,0,.42);opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease;pointer-events:none;box-sizing:border-box}
.nb-toast.show{opacity:1;transform:translateY(0)}
[data-theme="light"] .nb-toast{background-color:#ffffff;box-shadow:0 10px 34px rgba(0,0,0,.14)}
.nb-toast-chip{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.nb-toast-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.nb-toast-title{font-family:var(--fb);font-size:.83rem;font-weight:600;color:var(--text);line-height:1.3}
.nb-toast-sub{font-family:var(--fb);font-size:.72rem;font-weight:400;color:var(--text2);line-height:1.25;margin-top:1px}
.nb-toast-x{flex-shrink:0;background:none;border:none;padding:4px;margin-left:2px;cursor:pointer;display:flex;align-items:center;opacity:.65;transition:opacity .12s;pointer-events:auto}
.nb-toast-x:hover{opacity:1}
@media(max-width:768px){
.tb-dd{
position:fixed!important;
top:68px!important;
left:1rem!important;right:1rem!important;
width:auto!important;max-width:none!important;
margin-top:0!important;
z-index:9001!important;
background:rgba(23,23,23,1)!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
/* Match the More-menu (sidebar) rows: same height, font size and icon size so
the profile dropdown reads identically to the More nav on mobile. The base
.tb-dd-item rule is later in source, so these need !important to win. */
.tb-dd-item{padding:.75rem 1.5rem .75rem 1.75rem!important;font-size:1rem!important;gap:.7rem!important}
.tb-dd-item svg{width:18px!important;height:18px!important}
.tb-dd-section{padding:.45rem 1.5rem .35rem 1.75rem!important;font-size:.66rem!important}
.alert-dropdown{
position:fixed!important;
top:68px!important;
left:.75rem!important;right:.75rem!important;
width:auto!important;max-width:none!important;
z-index:9001!important;
background:rgba(23,23,23,1)!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.tb-dd-backdrop{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:8999}
.page-scroll.tb-blur{filter:blur(3px);pointer-events:none}
.sb.tb-blur{filter:blur(3px);pointer-events:none}
.tb-dd-backdrop.on{display:block}
}
/* ── TOPBAR DROPDOWNS (shared) ── */
.tb-icon{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;transition:background .15s;flex-shrink:0}
.tb-icon:hover{background:var(--bg3)}
.tb-icon svg{width:18px;height:18px;stroke:var(--text2);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tb-icon.active svg{stroke:var(--teal)!important}
.tb-dd{position:absolute;top:100%;right:0;width:260px;background:rgba(23,23,23,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:10px;box-shadow:0 16px 48px rgba(0,0,0,.5);z-index:9000;display:none;margin-top:6px;overflow:hidden}
.tb-dd.open{display:block;animation:tbDdIn .12s ease}
/* #unified-dd, when open, expands to a full-height side drawer. We only
* override position + dimensions — display stays block (inherited from
* .tb-dd.open above) so the open/close mechanism is undisturbed. Inner
* content panels can scroll the full new height. */
#unified-dd.open{position:fixed!important;top:calc(62px + var(--banner-h, 0px))!important;right:0!important;bottom:0!important;width:260px!important;max-width:100vw!important;height:auto!important;margin-top:0!important;border-radius:0!important;border-right:none!important;border-top:none!important}
#unified-dd.open #up-content-settings,
#unified-dd.open #up-content-alerts,
#unified-dd.open #up-content-profile{max-height:calc(100vh - 62px)!important;padding-top:16px!important}
@media (max-width:768px){
/* On phones the profile dropdown is a right-side drawer that slides in/out
like the sidebar + settings rail — kept mounted off-screen so it can
transition both ways instead of popping in. */
#unified-dd{
display:block!important;
position:fixed!important;
top:calc(62px + var(--banner-h, 0px))!important;
right:0!important;
bottom:calc(56px + env(safe-area-inset-bottom))!important;
width:min(88vw,360px)!important;max-width:88vw!important;
height:auto!important;margin:0!important;border-radius:0!important;
box-shadow:-10px 0 30px rgba(0,0,0,.5)!important;
transform:translateX(100%);
transition:transform .25s ease, visibility 0s linear .25s;
animation:none!important;
pointer-events:none;
visibility:hidden;
}
#unified-dd.open{transform:translateX(0)!important;pointer-events:auto;visibility:visible!important;transition:transform .25s ease, visibility 0s linear 0s!important;width:min(88vw,360px)!important;right:0!important;left:auto!important;bottom:calc(56px + env(safe-area-inset-bottom))!important}
/* Keep the inner lists (alerts/settings/profile) within the drawer height so
the last items sit above the bottom nav instead of behind it. */
#unified-dd.open #up-content-settings,
#unified-dd.open #up-content-alerts,
#unified-dd.open #up-content-profile{max-height:calc(100vh - 62px - 56px - env(safe-area-inset-bottom))!important}
/* Notifications list: bigger, consistent type + roomier rows to match the
profile/settings menu styling. */
.alert-item{padding:.7rem 1.1rem!important;gap:.6rem}
.alert-item-title{font-size:.95rem!important;font-weight:600}
.alert-item-msg{font-size:.78rem!important;margin-top:2px!important}
.alert-group-title{font-size:.7rem!important;padding:.55rem 1.1rem .25rem!important}
/* Clip horizontal overflow from the off-screen drawers — use `clip`, NOT
`hidden`: `hidden` forces overflow-y to compute to `auto`, which makes
a scroll container and breaks touch-scrolling of the inner
.page-scroll on iOS. `clip` clips x without touching overflow-y. */
body{overflow-x:clip}
}
@keyframes tbDdIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.tb-dd-item{display:flex;align-items:center;gap:.5rem;padding:.4rem 1rem .4rem 1.25rem;margin:2px .6rem;border-radius:8px;font-family:var(--dm);font-size:13px;font-weight:500;color:var(--text)!important;cursor:pointer;transition:background .15s ease,color .15s ease;text-decoration:none}
.tb-dd-item:hover{background:rgba(255,255,255,.05);color:#d0dae8!important}
.tb-dd-item.tb-dd-item-active{background:rgba(51,209,204,.1)!important;color:var(--teal)!important}
.tb-dd-item.tb-dd-item-active svg{color:var(--teal)!important}
.tb-dd-item.tb-dd-item-active:hover{color:var(--teal)!important}
.tb-dd-item.tb-dd-item-active:hover svg{color:var(--teal)!important}
.tb-dd-item svg{width:16px;height:16px;stroke:currentColor;color:var(--text)!important;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;transition:color .15s ease}
.tb-dd-item:hover svg{color:#d0dae8!important}
.tb-dd-div{height:1px;background:rgba(255,255,255,.06);margin:4px 0}
.tb-dd-section{font-family:var(--dm)!important;font-size:11px!important;font-weight:700!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--teal)!important;padding:14px 14px 6px 1.25rem!important;pointer-events:none}
[data-theme="light"] .tb-dd-section{color:var(--teal)!important}
.tb-avatar{width:28px;height:28px;border-radius:50%;background:var(--teal);color:#000;font-family:var(--dm);font-size:.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;overflow:hidden}
.tb-avatar img{width:100%;height:100%;object-fit:cover}
.tb-avatar-wrap{display:flex;align-items:center;gap:6px;cursor:pointer;flex-shrink:0;position:relative}
.tb-avatar-name{font-size:12px;color:var(--text2);font-family:var(--fb);white-space:nowrap}
.tb-divider{width:1px;height:20px;background:rgba(255,255,255,.06);flex-shrink:0;margin:0 5px}
[data-theme="light"] .tb-divider{background:rgba(0,0,0,.06)}
/* ── GLASS CONSOLE DESIGN SYSTEM ── */
:root{--gc-bg:linear-gradient(180deg,#161616 0%,#1d1d1d 100%);--gc-panel:rgba(255,255,255,.05);--gc-border:rgba(255,255,255,.1);--gc-panel-hover:rgba(255,255,255,.08);--gc-border-hover:rgba(255,255,255,.14);--gc-label:#8a96a6;--gc-body:#dce4f0;--gc-muted:#8a96a6;--gc-success:#34d399;--gc-warn:#d6890c;--gc-danger:#d04949;--dm:'DM Sans',sans-serif}
[data-theme="light"]{--gc-bg:var(--bg);--gc-panel:#ffffff;--gc-border:rgba(0,0,0,.10);--gc-panel-hover:#ffffff;--gc-border-hover:rgba(0,0,0,.14);--gc-label:#6b7280;--gc-body:#374151;--gc-muted:#9ca3af;--gc-success:#059669;--gc-warn:#d97706;--gc-danger:#c43232}
/* Dashboard glass panels */
#pg-dash{padding:1.75rem 2rem;flex:1;background-color:#1d1d1d;background-image:none}
[data-theme="light"] #pg-dash{background-color:var(--bg);background-image:none}
#pg-dash .gc{background:var(--gc-panel);border:1px solid var(--gc-border);border-radius:10px;padding:1rem 1.15rem;transition:background .15s,border-color .15s}
#pg-dash .gc:hover{background:var(--gc-panel-hover);border-color:var(--gc-border-hover)}
#pg-dash .gc-lbl{font-family:var(--dm);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--gc-label);margin-bottom:.6rem}
#pg-dash .gc-val{font-family:var(--dm);font-size:28px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.1}
[data-theme="light"] #pg-dash .gc{background:#ffffff;border-color:rgba(0,0,0,.10);box-shadow:0 1px 4px rgba(0,0,0,.05)}
[data-theme="light"] #pg-dash .gc:hover{background:#ffffff;border-color:rgba(0,0,0,.14);box-shadow:0 2px 8px rgba(0,0,0,.07)}
[data-theme="light"] .gc-cmd-item:hover{background:rgba(0,0,0,.03)}
[data-theme="light"] .gc-cmd-title{color:#374151}
[data-theme="light"] .gc-quick-card{background:#ffffff;border-color:rgba(0,0,0,.10)}
[data-theme="light"] .gc-quick-card:hover{background:#ffffff;border-color:#26b8b3}
#pg-dash .gc-sub{font-family:var(--dm);font-size:11px;color:var(--gc-muted);margin-top:.3rem}
#pg-dash .gc-row{display:grid;gap:.75rem;margin-bottom:.75rem}
/* Dashboard command center */
.gc-cmd-item{display:flex;align-items:center;gap:.65rem;padding:.5rem .4rem;border-radius:6px;cursor:pointer;transition:background .12s}
.gc-cmd-item:hover{background:rgba(255,255,255,.04)}
[data-theme="light"] .gc-cmd-item:hover{background:rgba(0,0,0,.03)}
.gc-cmd-icon{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.gc-cmd-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gc-cmd-title{font-family:var(--dm);font-size:12px;font-weight:500;color:var(--gc-body)}
.gc-cmd-sub{font-family:var(--dm);font-size:9px;color:var(--gc-muted)}
/* Dashboard quick access */
.gc-quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.5rem}
.gc-quick-card{background:var(--gc-panel);border:1px solid var(--gc-border);border-radius:8px;padding:.75rem .5rem;text-align:center;cursor:pointer;transition:all .15s}
.gc-quick-card svg{width:18px;height:18px;stroke:var(--teal);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block;margin:0 auto .35rem}
/* Sidebar glass — override variables + direct styles */
[data-theme="dark"]{--sb-bg:#171717;--sb-border:rgba(255,255,255,.04)}
.sb{background:var(--sb-bg)!important;border-right:1px solid var(--sb-border)!important}
.sb .sb-item-lbl{font-family:var(--dm)!important;font-size:13px!important;font-weight:500!important;color:var(--text)!important}
.sb .sb-item:hover{background:rgba(255,255,255,.03)!important}
.sb .sb-item:hover .sb-item-lbl{color:#d0dae8!important}
.sb .sb-item:hover .sb-item-icon{color:#d0dae8!important}
.sb .sb-item.active{background:rgba(51,209,204,.1)!important;border-radius:8px!important}
.sb .sb-item.active .sb-item-lbl{color:var(--teal)!important;font-weight:500}
.sb .sb-item.active .sb-item-icon{color:var(--teal)!important}
.sb .sb-item-icon{color:var(--text)!important}
.sb .sb-section-lbl{font-family:var(--dm)!important;font-size:11px!important;font-weight:700!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--teal)!important}
.sb .sb-section-hdr:hover .sb-section-lbl{color:var(--teal)!important}
.sb .sb-section-hdr.open .sb-section-lbl{color:var(--teal)!important}
.sb .sb-chevron{color:var(--text3)!important}
.sb .sb-section-hdr.open .sb-chevron{color:var(--teal)!important}
.sb .sb-sub{color:var(--text3)!important}
.sb .sb-footer-lbl{color:var(--text3)!important}
/* Topbar glass — override all themes */
.topbar{background:#171717!important;border-bottom:1px solid rgba(255,255,255,.06)!important}
.topbar .topbar-title{font-family:var(--dm)!important;font-size:12px!important;font-weight:600!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:#fff!important}
.topbar .topbar-breadcrumb{font-family:var(--dm)!important;font-size:11px!important;font-weight:400!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:var(--text2)!important}
.tb-icon svg{stroke:#7a8a9e!important}
.tb-icon:hover svg{stroke:#d0dae8!important}
.tb-icon.tb-icon-active svg,.alert-bell.tb-icon-active svg{stroke:var(--teal)!important}
.tb-avatar-wrap.tb-icon-active .tb-avatar{box-shadow:0 0 0 2px var(--teal)}
/* Dropdown glass styles moved to base rules */
/* ── LIGHT MODE: Glass Console overrides ── */
/* Sidebar */
[data-theme="light"]{--sb-bg:#f5f5f5;--sb-border:rgba(0,0,0,.08)}
[data-theme="light"] .sb .sb-item-lbl{color:#374151!important}
[data-theme="light"] .sb .sb-item:hover{background:rgba(0,0,0,.04)!important}
[data-theme="light"] .sb .sb-item:hover .sb-item-lbl{color:#1a1a2e!important}
[data-theme="light"] .sb .sb-item:hover .sb-item-icon{color:#1a1a2e!important}
[data-theme="light"] .sb .sb-item.active{background:rgba(38,184,179,.1)!important;border-radius:8px!important}
[data-theme="light"] .sb .sb-item.active .sb-item-lbl{color:#26b8b3!important}
[data-theme="light"] .sb .sb-item.active .sb-item-icon{color:#26b8b3!important}
[data-theme="light"] .sb .sb-item-icon{color:#374151!important}
[data-theme="light"] .sb .sb-section-lbl{color:#26b8b3!important}
[data-theme="light"] .sb-header{border-bottom-color:rgba(0,0,0,.08)!important}
[data-theme="light"] .sb-wordmark div:first-child{color:#1a1a2e!important}
[data-theme="light"] .sb-wordmark div:first-child span{color:#26b8b3!important}
[data-theme="light"] .sb-wordmark div:last-child{color:#6b7280!important}
[data-theme="light"] .sb .sb-section-hdr:hover .sb-section-lbl{color:#1a1a2e!important}
[data-theme="light"] .sb .sb-section-hdr.open .sb-section-lbl{color:#26b8b3!important}
[data-theme="light"] .sb .sb-chevron{color:#9ca3af!important}
[data-theme="light"] .sb .sb-section-hdr.open .sb-chevron{color:#26b8b3!important}
[data-theme="light"] .sb .sb-sub{color:#6b7280!important}
[data-theme="light"] .sb .sb-footer-lbl{color:#6b7280!important}
/* Topbar */
[data-theme="light"] .topbar{background:#f0f0f0!important;border-bottom:1px solid rgba(0,0,0,.08)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
[data-theme="light"] .topbar .topbar-title{color:#1a1a2e!important}
[data-theme="light"] .topbar .topbar-breadcrumb{color:#6b7280!important}
[data-theme="light"] .tb-icon svg{stroke:#6b7280!important}
[data-theme="light"] .tb-icon:hover svg{stroke:#374151!important}
[data-theme="light"] .tb-avatar-name{color:#6b7280!important}
/* Dropdowns */
[data-theme="light"] .tb-dd,[data-theme="light"] .alert-dropdown{background:rgba(255,255,255,.96)!important;border-color:rgba(0,0,0,.08)!important;box-shadow:0 16px 48px rgba(0,0,0,.1)!important}
[data-theme="light"] .tb-dd-item{color:#374151!important}
[data-theme="light"] .tb-dd-item:hover{background:rgba(0,0,0,.04)!important;color:#1a1a2e!important}
[data-theme="light"] .tb-dd-item svg{stroke:currentColor!important;color:var(--text2)!important}
[data-theme="light"] .tb-dd-item:hover svg{color:#1a1a2e!important}
[data-theme="light"] .tb-dd-item.tb-dd-item-active{background:rgba(31,122,114,.1)!important;color:var(--teal)!important}
[data-theme="light"] .tb-dd-item.tb-dd-item-active svg{color:var(--teal)!important}
[data-theme="light"] .tb-dd-item.tb-dd-item-active:hover{color:var(--teal)!important}
[data-theme="light"] .tb-dd-item.tb-dd-item-active:hover svg{color:var(--teal)!important}
[data-theme="light"] .tb-dd-div{background:rgba(0,0,0,.06)!important}
[data-theme="light"] .alert-dropdown-header{border-bottom-color:rgba(0,0,0,.06)!important}
[data-theme="light"] .alert-item{border-bottom-color:rgba(0,0,0,.04)!important}
[data-theme="light"] .alert-item:hover{background:rgba(0,0,0,.02)!important}
[data-theme="light"] .alert-item-title{color:#1a1a2e!important}
[data-theme="light"] .alert-item-msg{color:#6b7280!important}
[data-theme="light"] .alert-group-title{color:#9ca3af!important}
/* ══ GLASS CONSOLE — GLOBAL OVERRIDES ══════════════════════════════════ */
/* Page backgrounds — transparent so body gradient shows */
.pg.content{background:transparent}
.pg{color:var(--gc-body)}
/* Cards */
.card{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:10px!important;box-shadow:none!important}
.card:hover{background:var(--card2)!important;border-color:var(--border2)!important}
/* Tables */
table.dt th{background:var(--gc-panel)!important;color:var(--gc-label)!important;font-family:var(--dm)!important;font-size:11px!important;font-weight:700!important;letter-spacing:.1em!important;text-transform:uppercase!important;border-bottom:1px solid var(--gc-border)!important}
table.dt td{border-bottom:1px solid var(--gc-border)!important;color:var(--gc-body)!important;font-family:var(--dm)!important;font-size:13px!important}
table.dt tr:hover td{background:var(--gc-panel)!important}
/* Tabs */
.pipeline-tab{font-family:var(--dm)!important;font-size:12px!important;font-weight:500!important;letter-spacing:.01em!important;text-transform:none!important;color:var(--text2)!important;background:transparent!important;border:1px solid var(--border)!important;border-radius:99px!important;padding:6px 14px!important;cursor:pointer!important;transition:all .15s!important}
.pipeline-tab:hover{background:rgba(255,255,255,.04)!important;color:var(--text)!important}
.pipeline-tab.active{background:rgba(51,209,204,.12)!important;color:var(--teal)!important;border-color:rgba(51,209,204,.3)!important}
[data-theme="light"] .pipeline-tab{color:#9ca3af!important;border-color:rgba(0,0,0,.1)!important}
[data-theme="light"] .pipeline-tab:hover{color:#374151!important;background:rgba(0,0,0,.03)!important}
[data-theme="light"] .pipeline-tab.active{color:#26b8b3!important;background:rgba(38,184,179,.1)!important;border-color:rgba(38,184,179,.3)!important}
/* Filter chips */
.cal-filter-btn,.exp-filter-btn{font-family:var(--dm)!important;font-size:11px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.08)!important;color:#7a8a9e!important;border-radius:20px!important;padding:5px 14px!important;cursor:pointer!important;transition:all .15s!important}
.cal-filter-btn.active,.exp-filter-btn.active{background:rgba(51,209,204,.08)!important;border-color:rgba(51,209,204,.2)!important;color:#4a9f9b!important}
.cal-filter-btn:hover,.exp-filter-btn:hover{background:rgba(255,255,255,.06)!important;color:#d0dae8!important}
[data-theme="light"] .cal-filter-btn,[data-theme="light"] .exp-filter-btn{background:rgba(0,0,0,.03)!important;border-color:rgba(0,0,0,.08)!important;color:#6b7280!important}
[data-theme="light"] .cal-filter-btn.active,[data-theme="light"] .exp-filter-btn.active{background:rgba(38,184,179,.08)!important;border-color:rgba(38,184,179,.2)!important;color:#26b8b3!important}
/* Modals */
/* Modals — frosted glass */
@keyframes modalIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.modal-bg{background:rgba(0,0,0,.5)!important;backdrop-filter:blur(2px)!important;-webkit-backdrop-filter:blur(2px)!important}
[data-theme="light"] .modal-bg{background:rgba(0,0,0,.3)!important}
.modal{background:#303030!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:12px!important;box-shadow:0 24px 64px rgba(0,0,0,.5)!important;animation:modalIn .15s ease!important}
.modal h2{font-family:var(--dm)!important;font-weight:600!important;font-size:18px!important;letter-spacing:0!important;text-transform:none!important;color:var(--text)!important}
.modal-footer{border-top:1px solid rgba(255,255,255,.06)!important;background:#303030!important;}
[data-theme="light"] .modal{background:rgba(255,255,255,.92)!important;border-color:rgba(0,0,0,.06)!important;box-shadow:0 24px 64px rgba(0,0,0,.1)!important}
[data-theme="light"] .modal-footer{border-top-color:rgba(0,0,0,.08)!important;background:#ffffff!important}
/* Dialog panels (confirm, alert, prompt, lost reason) */
.gc-dialog{background:rgba(23,23,23,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:1.5rem 1.75rem;width:100%;box-shadow:0 24px 64px rgba(0,0,0,.5);animation:modalIn .15s ease}
[data-theme="light"] .gc-dialog{background:rgba(255,255,255,.95);border-color:rgba(0,0,0,.06);box-shadow:0 24px 64px rgba(0,0,0,.1)}
[data-theme="light"] .gc-dialog [style*="rgba(255,255,255,.06)"]{border-color:rgba(0,0,0,.06)!important}
/* Lost reason tiles — Glass Console */
.lost-reason-tile{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:8px!important;font-family:var(--dm)!important;font-size:12px!important;color:#7a8a9e!important;letter-spacing:0!important}
.lost-reason-tile:hover{border-color:rgba(239,68,68,.3)!important;background:rgba(239,68,68,.06)!important;color:#d04949!important}
[data-theme="light"] .lost-reason-tile{background:rgba(0,0,0,.03)!important;border-color:rgba(0,0,0,.06)!important;color:#6b7280!important}
[data-theme="light"] .lost-reason-tile:hover{background:rgba(239,68,68,.04)!important;border-color:rgba(239,68,68,.2)!important;color:#c43232!important}
/* Form inputs */
.field label{color:var(--gc-label)!important;font-family:var(--dm)!important;font-size:11px!important;font-weight:600!important;letter-spacing:.1em!important;text-transform:uppercase!important;margin-bottom:8px!important}
.field{margin-bottom:16px}
.req-dot{display:none}
.field input,.field select,.field textarea{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.08)!important;color:var(--gc-body)!important;font-family:var(--dm)!important;font-size:14px!important;border-radius:8px!important;padding:10px 12px!important}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal)!important;background:rgba(255,255,255,.06)!important;box-shadow:0 0 0 3px rgba(51,209,204,.12)!important;transition:border-color .15s,box-shadow .15s!important}
[data-theme="light"] .field input,[data-theme="light"] .field select,[data-theme="light"] .field textarea{background:#fff!important;border-color:rgba(0,0,0,.1)!important;color:#374151!important}
[data-theme="light"] .field label{color:#6b7280!important}
[data-theme="light"] .input-wrap{background:#fff!important;border-color:rgba(0,0,0,.1)!important}
[data-theme="light"] .input-wrap .suffix{color:#9ca3af!important}
[data-theme="light"] .input-wrap:focus-within{border-color:var(--teal)!important;box-shadow:0 0 0 3px rgba(38,184,179,.12)!important}
/* Buttons — unified design system */
.btn{font-family:var(--dm)!important;font-weight:500!important;font-size:13px!important;letter-spacing:0!important;text-transform:none!important;border-radius:6px!important;padding:9px 18px!important;cursor:pointer!important;transition:all .15s!important;border:none!important}
.btn-sm{font-size:12px!important;padding:9px 13px!important;border-radius:5px!important}
/* Primary */
.btn-p{background:#2bc5c0!important;color:#fff!important;border:none!important}
.btn-p:hover{background:#22b0ab!important;box-shadow:0 2px 8px rgba(51,209,204,.15)!important;transform:translateY(-1px)}
/* Ghost */
.btn-g{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.1)!important;color:#d0dae8!important}
.btn-g:hover{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.15)!important}
/* Outline teal */
.btn-o,.btn-ot{background:transparent!important;border:1px solid rgba(51,209,204,.3)!important;color:#4a9f9b!important}
.btn-o:hover,.btn-ot:hover{background:rgba(51,209,204,.08)!important;border-color:rgba(51,209,204,.5)!important}
/* Destructive */
.btn-d{background:rgba(239,68,68,.1)!important;border:1px solid rgba(239,68,68,.2)!important;color:#d04949!important}
.btn-d:hover{background:rgba(239,68,68,.15)!important;border-color:rgba(239,68,68,.3)!important}
.btn-success{background:rgba(34,197,94,.1)!important;border:1px solid rgba(34,197,94,.25)!important;color:#36a85e!important}
.btn-success:hover{background:rgba(34,197,94,.15)!important;border-color:rgba(34,197,94,.35)!important}
.btn-success.is-sent,.btn-success.is-sent:hover{background:#36a85e!important;border:1px solid #36a85e!important;color:#fff!important;cursor:default!important;pointer-events:none}
.btn-amber{background:rgba(245,158,11,.1)!important;border:1px solid rgba(245,158,11,.25)!important;color:#d6890c!important}
.btn-amber:hover{background:rgba(245,158,11,.15)!important;border-color:rgba(245,158,11,.35)!important}
.btn-saved{background:rgba(34,197,94,.15)!important;border:1px solid rgba(34,197,94,.3)!important;color:#36a85e!important}
/* Destructive solid */
.btn-ds:hover{background:#c43232!important;box-shadow:0 4px 16px rgba(239,68,68,.3)!important}
/* Glass */
.btn-gl{background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,255,255,.06)!important;color:#d0dae8!important}
.btn-gl:hover{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.1)!important}
/* Light mode button overrides */
[data-theme="light"] .btn-p{background:#26b8b3!important;color:#fff!important}
[data-theme="light"] .btn-g{background:rgba(0,0,0,.04)!important;border:1px solid rgba(0,0,0,.12)!important;color:#374151!important}
[data-theme="light"] .btn-g:hover{background:rgba(0,0,0,.06)!important;border-color:rgba(0,0,0,.18)!important}
[data-theme="light"] .btn-o,[data-theme="light"] .btn-ot{border-color:rgba(38,184,179,.35)!important;color:#26b8b3!important}
[data-theme="light"] .btn-o:hover,[data-theme="light"] .btn-ot:hover{background:rgba(38,184,179,.06)!important}
[data-theme="light"] .btn-d{background:rgba(239,68,68,.08)!important;border-color:rgba(239,68,68,.2)!important;color:#c43232!important}
[data-theme="light"] .btn-gl{background:rgba(255,255,255,.7)!important;border:1px solid rgba(0,0,0,.08)!important;color:#374151!important}
/* Close/dismiss button system — unified .btn-close (24px default, .lg → 32px panel variant) */
.btn-close{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:none;background:transparent;color:var(--text3);cursor:pointer;transition:all .15s;flex-shrink:0}
.btn-close:hover{background:rgba(239,68,68,.08);color:#d04949}
.btn-close svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.btn-close.lg{width:32px;height:32px}
.btn-close.lg svg{width:18px;height:18px}
.btn-close.lg:hover{background:rgba(255,255,255,.06);color:#d0dae8}
[data-theme="light"] .btn-close{color:#9ca3af}
[data-theme="light"] .btn-close:hover{background:rgba(239,68,68,.08);color:#c43232}
[data-theme="light"] .btn-close.lg:hover{background:rgba(0,0,0,.04);color:#374151}
.close-circle{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:rgba(239,68,68,.8);border:none;cursor:pointer;border-radius:50%;transition:all .15s;color:#fff;position:absolute;top:-5px;right:-5px;z-index:2}
.close-circle:hover{background:rgba(239,68,68,1)}
.close-circle svg{width:10px;height:10px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round}
/* Chevron toggle */
.chevron-toggle{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;cursor:pointer;border:none;background:transparent;transition:transform .2s ease;color:#5a6a7e;flex-shrink:0}
.chevron-toggle:hover{color:#d0dae8}
.chevron-toggle svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
[data-theme="light"] .chevron-toggle{color:#9ca3af}
[data-theme="light"] .chevron-toggle:hover{color:#374151}
/* Avatar theme toggle */
.avatar-theme-toggle{display:flex;gap:2px;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:9px;padding:3px}
.avatar-theme-toggle button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 4px;border:none;border-radius:6px;background:transparent;color:#8a9aae!important;cursor:pointer;font-family:var(--dm);font-size:11px;font-weight:600;transition:background .15s,color .15s}
.avatar-theme-toggle button:hover{color:#d0dae8!important;background:rgba(255,255,255,.05)}
.avatar-theme-toggle button.active{background:rgba(43,197,192,.14)!important;color:var(--teal)!important;box-shadow:inset 0 0 0 1px rgba(43,197,192,.35)}
.avatar-theme-toggle button svg{stroke:currentColor!important;fill:none!important;flex-shrink:0}
[data-theme="light"] .avatar-theme-toggle{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1)}
[data-theme="light"] .avatar-theme-toggle button{color:#7a8694!important}
[data-theme="light"] .avatar-theme-toggle button:hover{color:#374151!important;background:rgba(0,0,0,.04)}
[data-theme="light"] .avatar-theme-toggle button.active{background:rgba(31,143,138,.12)!important;color:#1f8f8a!important;box-shadow:inset 0 0 0 1px rgba(31,143,138,.35)}
.avatar-theme-toggle button span{color:inherit!important}
[data-theme="light"] .avatar-theme-toggle{background:rgba(0,0,0,.04)}
[data-theme="light"] .avatar-theme-toggle button{color:#9ca3af}
[data-theme="light"] .avatar-theme-toggle button:hover{color:#374151}
[data-theme="light"] .avatar-theme-toggle button.active{background:rgba(38,184,179,.1);color:#26b8b3}
/* Sidebar chevron override */
.sb-chevron{display:inline-flex!important;align-items:center;color:#5a6a7e!important;transition:transform .2s ease,color .15s}
.sb-chevron svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.sb-section-hdr.open .sb-chevron{transform:rotate(90deg)}
/* Tags / badges */
.tag{font-family:var(--dm)!important;font-size:10px!important;font-weight:700!important;letter-spacing:.07em!important;text-transform:uppercase!important;border-radius:10px!important;padding:2px 10px!important}
/* Page titles */
.page-title{font-family:var(--dm)!important;font-weight:600!important;font-size:22px!important;letter-spacing:0!important;text-transform:none!important;color:var(--text)!important}
.dv-stat-card{padding:1rem 1.25rem}
.dv-stat-label{font-family:var(--dm);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);margin-bottom:.35rem}
.dv-stat-val{font-family:var(--dm);font-size:1.75rem;font-weight:700;color:var(--text)!important;letter-spacing:-.02em;line-height:1}
.dv-tab{font-family:var(--dm);font-size:.75rem;font-weight:600;padding:.38rem .85rem;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;transition:all .15s}
.dv-tab:hover{background:var(--hover);color:var(--text)}
.dv-tab.active{background:rgba(51,209,204,.1);color:var(--teal);border-color:rgba(51,209,204,.3)}
.dv-th{font-family:var(--dm);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);padding:.65rem 1rem;text-align:left;white-space:nowrap}
.dv-row{border-top:1px solid var(--border);cursor:pointer;transition:background .12s}
.dv-row:hover{background:var(--hover)}
.dv-row td{padding:.7rem 1rem;vertical-align:middle}
.dv-badge{font-family:var(--dm);font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:4px;border:1px solid;white-space:nowrap}
/* DevOps → User Emails */
.dm-layout{display:grid;grid-template-columns:230px minmax(0,1fr) minmax(0,440px);gap:1rem;align-items:start}
.dm-list{padding:.5rem}
.dm-li{display:flex;flex-direction:column;gap:2px;padding:.7rem .8rem;border-radius:8px;cursor:pointer;transition:background .12s;border:1px solid transparent}
.dm-li:hover{background:var(--hover)}
.dm-li.active{background:rgba(51,209,204,.1);border-color:rgba(51,209,204,.3)}
.dm-li-name{font-family:var(--dm);font-size:.86rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:.4rem}
.dm-li-sub{font-family:var(--dm);font-size:.72rem;color:var(--text3)}
.dm-li-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dm-editor{padding:1.25rem}
.dm-field{margin-bottom:1rem}
.dm-field label{display:block;font-family:var(--dm);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);margin-bottom:.35rem}
.dm-field input,.dm-field textarea{width:100%;font-family:var(--dm);font-size:.86rem;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:.55rem .7rem;resize:vertical}
.dm-field input:focus,.dm-field textarea:focus{outline:none;border-color:var(--teal)}
.dm-field textarea{min-height:150px;line-height:1.55}
.dm-field-hint{font-family:var(--dm);font-size:.7rem;color:var(--text3);margin-top:.3rem}
.dm-tokens{font-family:var(--dm);font-size:.72rem;color:var(--text2);background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:.55rem .7rem;margin-bottom:1rem;line-height:1.7}
.dm-tokens code{font-family:var(--dm);background:rgba(51,209,204,.12);color:var(--teal);padding:1px 6px;border-radius:4px;cursor:pointer}
.dm-editor-actions{display:flex;align-items:center;gap:.6rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border)}
.dm-editor-actions .dm-saved{font-family:var(--dm);font-size:.74rem;color:var(--text3);margin-left:auto}
.dm-preview{padding:0;overflow:hidden;position:sticky;top:1rem}
.dm-preview-hd{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;border-bottom:1px solid var(--border);font-family:var(--dm);font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.dm-preview-frame{position:relative;height:620px;background:#0a0e14}
.dm-preview-frame iframe{width:100%;height:100%;border:0;display:block}
.dm-preview-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem;font-family:var(--dm);font-size:.82rem;color:#94a3b8;background:#0a0e14}
.dm-toggle{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--dm);font-size:.8rem;color:var(--text2);cursor:pointer}
@media(max-width:1100px){.dm-layout{grid-template-columns:1fr}.dm-preview{position:static}}
/* Help Center */
.help-hero{text-align:center;padding:1.75rem 1rem 2rem;max-width:680px;margin:0 auto}
.help-hero-title{font-family:var(--dm);font-size:1.25rem;font-weight:600;letter-spacing:-.01em;color:var(--text);margin-bottom:.3rem}
.help-hero-sub{font-family:var(--dm);font-size:.86rem;color:var(--text2);margin-bottom:1.1rem}
.help-search-wrap{position:relative;max-width:520px;margin:0 auto;display:flex;align-items:center}
.help-search-wrap svg{position:absolute;left:14px;color:var(--text3);pointer-events:none}
.help-search-wrap input{width:100%;font-family:var(--dm);font-size:.86rem;color:var(--text);background:var(--bg2,var(--card,#fff));border:1px solid var(--border);border-radius:8px;padding:.62rem 1rem .62rem 2.55rem;box-shadow:var(--shadow,0 1px 4px rgba(0,0,0,.06))}
.help-search-wrap input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-dim)}
/* Help layout: a fixed flush-left category panel (mirrors the settings rail) +
centered content. The panel sits just past the main sidebar (--sb-w), which the
help page auto-collapses, so it tucks against it. */
.help-sidebar{position:fixed;left:var(--sb-w);top:calc(62px + var(--banner-h, 0px));bottom:0;width:248px;background:var(--card);border-right:1px solid var(--border);overflow-y:auto;padding:1.35rem .8rem;display:flex;flex-direction:column;gap:1px;z-index:11;transition:left .25s ease}
#pg-help.on{padding-left:248px;box-sizing:border-box}
.help-main{max-width:860px;margin:0 auto;width:100%}
/* Category headers match the main sidebar section labels: teal, uppercase,
11px / 700 / .12em — with teal icons + chevrons. */
.help-side-home{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:.45rem .55rem;border-radius:8px;font-family:var(--dm);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#33d1cc!important;transition:background .12s;margin-bottom:.35rem}
.help-side-home svg{color:#33d1cc!important;stroke:#33d1cc!important;flex-shrink:0}
.help-side-home span{color:#33d1cc!important}
.help-side-home:hover{background:rgba(255,255,255,.05)}
.help-side-home.on{background:var(--teal-dim)}
.help-side-cat{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:.45rem .55rem;border-radius:8px;font-family:var(--dm);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#33d1cc!important;transition:background .12s}
.help-side-cat:hover{background:rgba(255,255,255,.05)}
.help-side-cat-ic{width:17px;height:17px;color:#33d1cc!important;display:flex;align-items:center;flex-shrink:0}
.help-side-cat-ic svg{width:17px;height:17px;stroke:#33d1cc!important}
.help-side-cat-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#33d1cc!important}
.help-side-chev{color:#33d1cc;opacity:.7;transition:transform .18s ease;flex-shrink:0}
.help-side-grp.open .help-side-chev{transform:rotate(180deg)}
.help-side-arts{display:none;flex-direction:column;gap:1px;margin:1px 0 5px 1rem;padding-left:0}
.help-side-grp.open .help-side-arts{display:flex}
.help-side-art{text-align:left;background:none;border:none;cursor:pointer;padding:.34rem .5rem;border-radius:6px;font-family:var(--dm);font-size:.81rem;color:var(--text3);transition:background .12s,color .12s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.help-side-art:hover{background:rgba(255,255,255,.05);color:var(--text2)}
.help-side-art.on{color:var(--teal);background:var(--teal-dim);font-weight:500}
@media(max-width:768px){#pg-help.on{padding-left:.75rem}.help-sidebar{display:none}.help-main{max-width:none}}
/* Category grid (home) */
.help-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-auto-rows:1fr;gap:1rem}
.help-cat-card{background:var(--card,#fff);border:1px solid var(--border);border-radius:4px;padding:1.15rem 1.1rem;cursor:pointer;transition:border-color .14s,box-shadow .14s,transform .08s;text-align:center;display:flex;flex-direction:column;justify-content:center}
.help-cat-card:hover{border-color:var(--teal);box-shadow:var(--shadow,0 6px 18px rgba(0,0,0,.06));transform:translateY(-2px)}
.help-cat-card:hover .help-cat-name,.help-cat-card:hover .help-cat-desc,.help-cat-card:hover .help-cat-meta{color:#33d1cc!important;transition:color .12s}
.help-cat-ic{display:flex;justify-content:center;margin:0 auto .6rem}
.help-cat-ic svg{width:25px;height:25px;stroke:#33d1cc}
.help-cat-name{font-family:var(--dm);font-size:.8rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text);margin-bottom:.25rem}
.help-cat-desc{font-family:var(--dm);font-size:.8rem;color:var(--text2);line-height:1.45;margin-bottom:.5rem}
.help-cat-meta{font-family:var(--dm);font-size:.72rem;color:var(--text3)}
/* Category header */
.help-cat-head{display:flex;align-items:center;gap:.9rem;margin:.2rem 0 1.4rem}
.help-cat-head-ic{display:flex;align-items:center;flex-shrink:0}
.help-cat-head-ic svg{width:28px;height:28px;stroke:#33d1cc}
.help-cat-head-t{font-family:var(--dm);font-size:1.15rem;font-weight:600;color:var(--text);letter-spacing:-.01em}
.help-cat-head-d{font-family:var(--dm);font-size:.88rem;color:var(--text2);margin-top:1px}
/* Article rows (list / search) */
.help-rows{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:4px;overflow:hidden;background:var(--card,#fff)}
.help-row{display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;cursor:pointer;border-top:1px solid var(--border);transition:background .12s}
.help-row:first-child{border-top:none}
.help-row:hover{background:var(--hover)}
.help-row-txt{flex:1;min-width:0}
.help-row-t{font-family:var(--dm);font-size:.95rem;font-weight:500;color:var(--text)}
.help-row-s{font-family:var(--dm);font-size:.84rem;color:var(--text2);line-height:1.4;margin-top:1px}
.help-row-arr{color:var(--text3);flex-shrink:0}
.help-row:hover .help-row-arr{color:var(--teal)}
.help-result-h{font-family:var(--dm);font-size:.85rem;color:var(--text3);margin-bottom:.9rem}
/* Breadcrumb */
.help-crumb{font-family:var(--dm);font-size:.8rem;color:var(--text3);max-width:720px;margin:0 auto 1.4rem}
.help-crumb a{color:var(--teal);text-decoration:none;cursor:pointer}
.help-crumb a:hover{text-decoration:underline}
.help-crumb span{color:var(--text2)}
.help-crumb span.help-crumb-cur{color:#33d1cc!important;font-weight:600}
.help-crumb-sep{color:var(--text3);margin:0 .35rem}
.help-empty{font-family:var(--dm);font-size:.9rem;color:var(--text3);padding:2.5rem 1rem;text-align:center}
.help-article{font-family:var(--dm);color:var(--text2);max-width:720px;margin:0 auto}
.help-title{font-family:var(--dm);font-size:1.35rem;font-weight:600;letter-spacing:-.01em;color:var(--text);margin:0 0 1.1rem}
.help-h2{font-family:var(--dm);font-size:1.05rem;font-weight:600;color:var(--text);margin:1.6rem 0 .6rem}
.help-h3{font-family:var(--dm);font-size:.95rem;font-weight:500;color:var(--text);margin:1.3rem 0 .5rem}
.help-h4{font-family:var(--dm);font-size:.85rem;font-weight:500;color:var(--text);margin:1.1rem 0 .4rem}
.help-p{font-family:var(--dm);font-size:.95rem;line-height:1.65;color:var(--text2);margin:0 0 .9rem}
.help-list{margin:0 0 1rem;padding-left:1.3rem}
.help-list li{font-family:var(--dm);font-size:.95rem;line-height:1.6;color:var(--text2);margin-bottom:.35rem}
.help-article strong{font-weight:600;color:var(--text)}
.help-article code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;background:var(--teal-dim);color:var(--teal);padding:1px 6px;border-radius:5px}
.help-article a{color:var(--teal);text-decoration:none}
.help-article a:hover{text-decoration:underline}
.help-table{width:100%;border-collapse:collapse;margin:.5rem 0 1.2rem;font-family:var(--dm)}
.help-table th{text-align:left;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);padding:.5rem .7rem;border-bottom:2px solid var(--border)}
.help-table td{font-size:.88rem;color:var(--text2);padding:.55rem .7rem;border-bottom:1px solid var(--border);vertical-align:top}
.help-fb{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--border);text-align:center}
.help-fb-q{font-family:var(--dm);font-size:.9rem;font-weight:600;color:var(--text);margin-bottom:.7rem}
.help-fb-btns{display:inline-flex;gap:.55rem}
.help-fb-btn{font-family:var(--dm);font-size:.84rem;font-weight:600;color:var(--text2);background:var(--card,#fff);border:1px solid var(--border);border-radius:8px;padding:.45rem 1rem;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem}
.help-fb-btn:hover{border-color:var(--teal);color:var(--teal)}
.help-fb-done{font-family:var(--dm);font-size:.88rem;color:var(--teal);font-weight:600}
@media(max-width:600px){.help-grid{grid-template-columns:1fr}}
/* Floating contextual help button */
#help-fab{position:fixed;right:20px;bottom:20px;width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.28);z-index:850;transition:transform .24s cubic-bezier(.34,1.4,.5,1),opacity .2s ease,box-shadow .18s}
#help-fab:hover{box-shadow:0 6px 20px rgba(0,0,0,.34)}
/* Desktop (hover devices, wide): tuck ~60% past the right edge as a peek tab;
slide fully out on hover or keyboard focus. Touch/mobile keeps it fully shown. */
@media(hover:hover) and (min-width:769px){
#help-fab{right:0;transform:translateX(60%);opacity:.7}
#help-fab:hover,#help-fab:focus-visible{transform:translateX(0);opacity:1}
}
@media(max-width:768px){#help-fab{display:none}}
.sec{font-family:var(--dm)!important;font-size:11px!important;font-weight:700!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:var(--teal)!important;margin-top:0!important;margin-bottom:10px!important}
/* Empty states */
.empty{color:var(--gc-muted)!important}
/* Detail panels */
.acc-panel,.con-panel,.lead-panel{background:#252525!important;border-color:var(--gc-border)!important}
[data-theme="light"] .acc-panel,[data-theme="light"] .con-panel,[data-theme="light"] .lead-panel{background:#ffffff!important}
/* Panel sticky header */
.acc-panel>.lp-hdr,.con-panel>.lp-hdr,.lead-panel>.lp-hdr,
.lead-panel>div:first-child{position:sticky!important;top:0!important;z-index:2!important;background:#252525!important;border-bottom:1px solid rgba(255,255,255,.06)!important}
[data-theme="light"] .lead-panel>div:first-child{background:#ffffff!important;border-bottom-color:rgba(0,0,0,.08)!important}
/* Panel sticky footer */
.acc-panel .modal-footer,.con-panel .modal-footer,.lead-panel .modal-footer,
.acc-panel>.lp-actions,.con-panel>.lp-actions,.lead-panel>.lp-actions{position:sticky!important;bottom:0!important;z-index:2!important;background:#252525!important;border-top:1px solid rgba(255,255,255,.06)!important;padding:.75rem 1rem!important}
[data-theme="light"] .acc-panel .modal-footer,[data-theme="light"] .con-panel .modal-footer,[data-theme="light"] .lead-panel .modal-footer{background:#ffffff!important;border-top-color:rgba(0,0,0,.08)!important}
/* Kanban boards */
.kb-col-hdr{background:var(--gc-panel)!important;border:1px solid var(--gc-border)!important}
.kb-cards{background:rgba(255,255,255,.01)!important;border-color:var(--gc-border)!important}
.kb-card{background:var(--gc-panel)!important;border:1px solid var(--gc-border)!important;border-radius:8px!important;box-shadow:none!important}
.kb-card:hover{background:var(--gc-panel-hover)!important;border-color:var(--gc-border-hover)!important;transform:translateY(-1px)}
.kb-add-btn{border-color:var(--gc-border)!important;color:var(--gc-label)!important}
.kb-add-btn:hover{border-color:var(--teal)!important;color:var(--teal)!important}
/* Scrollbars */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.15)}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1)}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.15)}
/* Pipeline tabs wrapper */
.pipeline-tabs{border-bottom:none!important}
.ss-tab{font-family:var(--dm)!important;font-size:13px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--text2)!important;background:transparent!important;border:none!important;border-bottom:2px solid transparent!important;padding:14px 28px!important;cursor:pointer!important;transition:color .15s,border-color .15s!important}
.ss-tab:hover{color:var(--text)!important}
.ss-tab.active{color:var(--teal)!important;border-bottom-color:var(--teal)!important}
[data-theme="light"] .ss-tab{color:#9ca3af!important}
[data-theme="light"] .ss-tab.active{color:#26b8b3!important;border-bottom-color:#26b8b3!important}
/* Body text consistency */
.page-scroll{color:var(--gc-body)}
/* Order cards, lead cards, etc — inline card styles */
.lead-card-compact,.order-card{border-radius:8px!important}
/* R-panel (side info panels) */
.r-panel{background:var(--gc-panel)!important;border:1px solid var(--gc-border)!important;border-radius:10px!important}
/* ── Per-page inline style overrides ── */
/* Lead cards */
.lead-card-compact{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:8px!important}
.lead-card-compact:hover{background:var(--card2)!important;border-color:var(--border2)!important}
.lead-card-compact.active{background:var(--teal-sel)!important}
/* Order cards */
#order-list>div{border-radius:8px!important}
/* Activity cards — rendered as inline divs */
#act-list>div{border-radius:8px!important}
/* Task cards */
#task-list>div>div{border-radius:8px!important}
/* Calendar */
.cal-days-grid{border-color:var(--gc-border)!important}
.cal-day{border-color:var(--gc-border)!important;background:var(--gc-panel)!important}
.cal-day:hover{background:var(--gc-panel-hover)!important}
.cal-day.today{background:var(--teal-surface)!important;border-color:var(--teal)!important}
.cal-hdr{color:var(--gc-label)!important}
.cal-day-n{color:var(--gc-body)!important}
.cal-day.other .cal-day-n{color:var(--gc-label)!important;opacity:.4}
.cal-pill{border-radius:4px!important;font-size:9px!important}
.cal-filter-btn{background:var(--gc-panel)!important;border:1px solid var(--gc-border)!important;color:var(--gc-label)!important;border-radius:4px!important}
.cal-filter-btn.active{background:var(--teal-sel)!important;border-color:var(--teal)!important;color:var(--teal)!important}
.cal-view-btn.active{background:var(--teal-sel)!important;border-color:var(--teal)!important;color:var(--teal)!important}
/* Art library */
.art-card{background:transparent!important;border:none!important;border-radius:0!important}
.art-card:hover{background:transparent!important}
.art-folder-card{background:transparent!important;border:none!important;border-radius:0!important}
.art-folder-card:hover{background:transparent!important}
.art-nav-card{background:transparent!important;border:none!important}
.art-nav-item{color:var(--gc-body)!important}
.art-nav-item:hover{background:var(--gc-panel-hover)!important}
.art-nav-search{background:rgba(255,255,255,.04)!important;border:1px solid var(--gc-border)!important;color:var(--gc-body)!important}
/* Checklist panel */
#chk-panel{background:#252525!important;border-color:var(--gc-border)!important}
[data-theme="light"] #chk-panel{background:#ffffff!important}
/* Inventory table */
#inv-list{border-radius:8px!important;overflow:hidden}
/* Profile cards in modal */
.mp-profile-card{background:var(--card)!important;border:1px solid var(--border)!important;border-radius:8px!important}
.mp-profile-card:hover{background:var(--card2)!important;border-color:var(--border2)!important}
.mp-profile-card.mp-selected{background:rgba(51,209,204,.06)!important;border-color:var(--teal)!important}
/* SS tabs (settings — now split pages but may still exist) */
.ss-panel .card{background:var(--gc-panel)!important;border:1px solid var(--gc-border)!important}
/* Quote/Invoice/Proof full-screen builders */
.qg-doc,.inv-doc{background:var(--gc-panel)!important;border:1px solid var(--gc-border)!important;border-radius:8px!important}
/* ── MAIN CONTENT ── */
.topbar{height:62px;background:#171717;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 1.25rem;gap:.75rem;flex-shrink:0;width:100%;box-sizing:border-box;z-index:50}
.topbar-title{font-family:var(--fd);font-weight:900;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-breadcrumb{font-family:var(--dm);font-size:.68rem;color:var(--text2);letter-spacing:.06em;flex-shrink:0;opacity:.6}
.topbar-po{font-family:var(--dm);font-size:.70rem;color:var(--text2)}
[data-theme="light"] .topbar-po{color:var(--text2)}
.content{padding:1.5rem 1.75rem;box-sizing:border-box;width:100%;overflow-x:hidden}
.content.no-pad{padding:0}
/* Sales/CRM + To-Do — keep buttons in place, pull filter bar up tight below them */
#pg-leads .page-hdr,#pg-accounts .page-hdr,#pg-contacts .page-hdr,
#pg-deals .page-hdr,#pg-activities .page-hdr,#pg-tasks .page-hdr{margin-bottom:.25rem}
#pg-leads .page-hdr #lead-filter,
#pg-activities .page-hdr #act-pill,
#pg-tasks .page-hdr #task-filter{margin-bottom:0!important;align-self:center}
#pg-deals.on .page-hdr .pipeline-tabs{margin:0!important;align-self:center}
#pg-dtf-gang.on{overflow:hidden;min-height:unset;height:calc(100vh - 62px - var(--banner-h, 0px));display:flex;flex-direction:column}
/* Phones: the gang-sheet builder's fixed height ignored the bottom nav + the
safe-area topbar, so it ran behind the nav. Fit it to the visible container. */
@media(max-width:768px){
#pg-dtf-gang.on{height:calc(100dvh - (62px + max(env(safe-area-inset-top),.5rem) - .5rem) - (56px + env(safe-area-inset-bottom)))!important}
}
/* ── PAGES ── */
.pg{display:none;animation:fi .15s ease;width:100%;min-width:0}
.pg.on{display:block;width:100%;min-height:100%;animation:fi .15s ease}
@keyframes fi{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
/* ── SHARED COMPONENTS ── */
.field{margin-bottom:1rem}
.field label{display:block;font-family:var(--dm);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gc-label);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--fb);font-size:.88rem;padding:8px 11px;border-radius:5px;outline:none;transition:border var(--tr),background var(--tr)}
.field input[type=number]{font-family:var(--fd);font-weight:700;font-size:.88rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);background:var(--bg2);box-shadow:0 0 0 3px rgba(51,209,204,.12);outline:none}
.field textarea{resize:vertical;min-height:54px;line-height:1.5}
.field select option{background:var(--bg2)}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;align-items:start}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem;align-items:start}
.fr4{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;align-items:end}
.sec{font-family:var(--dm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-top:0;margin-bottom:10px;padding-bottom:.35rem;border-bottom:1px solid var(--border)}
.card>.sec:first-child{font-size:.8rem;letter-spacing:.1em;margin-top:0;padding-top:.1rem;padding-bottom:.45rem;border-bottom:1px solid var(--border)}
.pb-sb .card>.sec:first-child{position:relative;border-bottom:none;padding-top:.9rem;padding-bottom:.45rem}
.pb-sb .card>.sec:first-child::after{content:'';position:absolute;bottom:0;left:-1.25rem;right:-1.25rem;height:1px;background:var(--border)}
/* Builder sidebar card/section defaults — remove need for per-card inline margins */
.pb-sb .card{margin-bottom:.75rem}
.pb-sb .card>.sec:not(:first-child){margin-top:.65rem;margin-bottom:.5rem}
.sec-opt{font-size:.6rem;color:var(--text2);font-weight:400}
.sec-desc{font-family:var(--dm);font-size:12px;color:var(--text3);line-height:1.4;margin-bottom:.5rem}
/* Sleek inline info hint next to a field label — hover for a fast custom tooltip. */
.fld-info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:50%;border:1px solid var(--text3);color:var(--text3);font-family:var(--dm);font-size:9px;font-weight:700;font-style:normal;line-height:1;margin-left:5px;cursor:default;vertical-align:middle;user-select:none;text-transform:none!important;letter-spacing:0;flex-shrink:0}
.fld-info:hover{border-color:var(--teal);color:var(--teal)}
.fld-info::after{content:attr(data-tip);position:absolute;top:calc(100% + 7px);left:0;width:max-content;max-width:230px;background:var(--bg);color:var(--text);font:400 11px/1.45 var(--dm);text-transform:none;letter-spacing:0;text-align:left;padding:7px 9px;border-radius:7px;border:1px solid var(--border);box-shadow:0 6px 18px rgba(0,0,0,.35);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .08s ease;z-index:2000}
.fld-info:hover::after{opacity:1;visibility:visible}
/* Garment-catalog per-size cells: reveal the corner remove × only on hover/focus */
.gdb-size-cell:hover .gdb-size-x,.gdb-size-x:focus-visible{opacity:1!important}
/* Shared art-fee picker buttons (quote + invoice builders) */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--rl);padding:1rem;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.btn{font-family:var(--fd);font-weight:700;font-size:.94rem;letter-spacing:.06em;text-transform:uppercase;padding:7px 14px;border-radius:var(--r);cursor:pointer;border:none;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;white-space:nowrap;transition:all var(--tr)}
.btn-p{background:#2bc5c0;color:#fff}.btn-p:hover{background:#22b0ab;transform:translateY(-1px)}
.btn-o{background:transparent;color:var(--teal);border:1px solid var(--teal)}.btn-o:hover{background:var(--teal-dim);transform:translateY(-1px)}
.btn-g{background:transparent;color:var(--text2);border:1px solid var(--border)}.btn-g:hover{border-color:var(--border2);color:var(--text);transform:translateY(-1px)}
.btn-d{background:transparent;color:var(--red);border:1px solid var(--border)}.btn-d:hover{border-color:var(--red)}
.btn:disabled{opacity:.3;cursor:not-allowed}
.tag{font-family:var(--dm);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;padding:2px 6px;border-radius:2px;font-weight:700;white-space:nowrap}
.t-teal{background:var(--teal-dim);color:var(--teal)}.t-green{background:var(--green-dim);color:var(--green)}
.t-amber{background:var(--amber-dim);color:var(--amber)}.t-red{background:var(--red-dim);color:var(--red)}
.t-blue{background:var(--blue-dim);color:var(--blue)}.t-purple{background:var(--purple-dim);color:var(--purple)}
.t-gray{background:var(--bg3);color:var(--text2)}
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:9500;align-items:center;justify-content:center;padding:1rem;overscroll-behavior:contain;touch-action:none}
.modal-bg.open ~ *,html:has(.modal-bg.open),body:has(.modal-bg.open){overflow:hidden!important;touch-action:none!important}
.modal{overscroll-behavior:contain;touch-action:auto}
.modal-bg.on{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--rl);padding:1.4rem 1.4rem 0;width:100%;max-width:640px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow)}
.modal h2{font-family:var(--fd);font-weight:900;font-size:1.2rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1rem;color:var(--teal)}
.modal-footer{position:sticky;bottom:0;background:inherit;display:flex;gap:.5rem;justify-content:flex-end;margin:1.1rem -1.5rem 0;padding:.85rem 1.5rem 1.1rem;border-top:1px solid var(--border);z-index:1;border-radius:0 0 12px 12px}
/* "Add from S&S Library" — category-first photo grid (Settings garment catalog) */
.ssl-panel{position:relative;background:var(--bg);border:1px solid var(--border3);border-radius:8px;width:min(900px,100%);height:min(86vh,760px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.ssl-head{display:flex;align-items:center;padding:14px 18px 10px}
.ssl-crumb{display:flex;align-items:center;gap:.45rem;font-family:var(--dm);font-size:.98rem;color:var(--text3)}
.ssl-crumb .ssl-seg{cursor:pointer;color:var(--text2)}
.ssl-crumb .ssl-seg:hover{color:var(--teal)}
.ssl-crumb .ssl-cur{color:var(--text);font-weight:600}
.ssl-crumb .ssl-sep{opacity:.5}
.ssl-nav{display:flex;align-items:center;gap:.5rem;padding:0 18px 12px;border-bottom:1px solid var(--border)}
.ssl-tab{font-family:var(--dm);font-size:.78rem;font-weight:600;color:var(--text2);background:none;border:1px solid var(--border);border-radius:7px;padding:.4rem .75rem;cursor:pointer;transition:all .12s;flex-shrink:0;white-space:nowrap}
.ssl-tab:hover{border-color:var(--border3);color:var(--text)}
.ssl-tab.on{background:var(--teal-dim);border-color:var(--teal);color:var(--teal)}
.ssl-brands{display:flex;align-items:flex-start;gap:.4rem;padding:11px 18px 0}
.ssl-bchips{display:flex;flex-wrap:wrap;gap:.4rem;flex:1;min-width:0}
.ssl-bchips.collapsed{max-height:64px;overflow:hidden}
.ssl-btoggle{flex-shrink:0;color:var(--teal)}
.ssl-bchip{font-family:var(--dm);font-size:.74rem;color:var(--text2);background:none;border:1px solid var(--border);border-radius:6px;padding:.28rem .6rem;cursor:pointer;transition:all .12s}
.ssl-bchip:hover{border-color:var(--border3);color:var(--text)}
.ssl-bchip.on{background:var(--teal-dim);border-color:var(--teal);color:var(--teal)}
.ssl-title{font-family:var(--dm);font-size:.95rem;font-weight:700;color:var(--text)}
.ssl-search{flex:1;padding:7px 11px;background:var(--card2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:var(--dm);font-size:.82rem;outline:none}
.ssl-close{position:absolute;top:9px;right:14px;z-index:3;background:none;border:none;color:var(--text3);font-size:1.5rem;line-height:1;cursor:pointer;padding:0 .2rem}
.ssl-filters{padding:11px 18px;border-bottom:1px solid var(--border);display:none;align-items:center;gap:14px}
.ssl-flbl{font-family:var(--dm);font-size:.62rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text3)}
.ssl-filters select{padding:7px 11px;background:var(--card2);border:1px solid var(--border);border-radius:5px;color:var(--text);font-family:var(--dm);font-size:.8rem;outline:none;cursor:pointer}
.ssl-grid{flex:1;overflow-y:auto;padding:16px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:min-content;gap:13px;align-content:start}
.ssl-card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:4px;overflow:hidden;cursor:pointer;transition:border-color .14s,transform .14s}
.ssl-card:hover{border-color:var(--teal);transform:translateY(-2px)}
.ssl-img{height:150px;background:#fff center/contain no-repeat;border-bottom:1px solid var(--border)}
.ssl-cat .ssl-img{height:130px}
.ssl-body{padding:8px 10px 10px}
.ssl-cat-name{font-family:var(--dm);font-size:.92rem;font-weight:700;color:var(--text);line-height:1.2}
.ssl-brand{font-family:var(--dm);font-size:.7rem;color:var(--text3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssl-style{font-family:var(--dm);font-size:.84rem;font-weight:600;color:var(--text);margin:1px 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ssl-foot{display:flex;align-items:center;justify-content:space-between;gap:6px}
.ssl-meta{font-family:var(--dm);font-size:.66rem;color:var(--text3)}
.ssl-add{font-family:var(--dm);font-size:.68rem;font-weight:700;color:var(--teal);background:var(--teal-dim);border:1px solid rgba(95,230,224,.3);border-radius:4px;padding:3px 9px}
.ssl-added{font-family:var(--dm);font-size:.68rem;font-weight:700;color:var(--green)}
.ssl-instatus{font-family:var(--dm);font-size:.68rem;font-weight:600;margin-top:5px}
.ssl-addcat{color:var(--teal)}
.ssl-incat{color:var(--text3)}
.ssl-fsel{display:flex;align-items:center;gap:8px}
.ssl-card-sel{border-color:var(--teal)}
.ssl-card-have{border-color:var(--teal)}
.ssl-card-have .ssl-img{opacity:.5}
.ssl-card-have .ssl-meta{color:var(--teal)}
.ssl-empty{grid-column:1/-1;padding:2.5rem;text-align:center;color:var(--text3);font-family:var(--dm);font-size:.85rem}
.page-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;gap:.75rem;flex-wrap:wrap}
.empty{text-align:center;padding:3rem 1rem;color:var(--text2);font-family:var(--dm);font-size:.78rem;letter-spacing:.08em}
.field-warning{outline:2px solid var(--red)!important;outline-offset:-1px!important;background:rgba(239,68,68,.08)!important}
.pdf-ws{word-spacing:0.1em}
.empty-icon{font-size:1.75rem;margin-bottom:.65rem;opacity:.25}
table.dt{width:100%;border-collapse:collapse;font-size:.92rem}
table.dt th{font-family:var(--dm);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);padding:8px 10px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap;background:var(--bg2)}
table.dt td{padding:8px 9px;border-bottom:1px solid var(--border);vertical-align:middle}
table.dt tr:last-child td{border-bottom:none}
.pill-group{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.75rem}
.pill{font-family:var(--dm);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:20px;cursor:pointer;border:1px solid var(--border);color:var(--text2);transition:all var(--tr)}
.pill:hover{border-color:var(--border2);color:var(--text)}
.pill.active{background:var(--teal-dim);border-color:var(--teal);color:var(--teal)}
.search-row{display:flex;gap:.5rem;margin-bottom:.85rem;align-items:center}
.search-row input{flex:1;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--dm);font-size:.78rem;padding:0 10px;height:32px;line-height:1;border-radius:var(--r);outline:none;box-sizing:border-box}
.search-row input:focus{border-color:var(--teal)}
.search-row select{background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--dm);font-size:.78rem;padding:0 24px 0 10px;height:32px;line-height:1;border-radius:var(--r);outline:none;box-sizing:border-box;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 8px center}
.kv{display:flex;justify-content:space-between;padding:7px 12px;border-bottom:1px solid var(--border);font-size:.92rem}
.kv-l{color:var(--text2)}.kv-v{font-weight:600;font-family:var(--dm);font-size:.88rem}
.progress-fill{height:100%;background:var(--teal);border-radius:2px}
.check-item{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;border-bottom:1px solid var(--border);cursor:pointer}
.check-item span{font-size:.92rem;transition:color var(--tr)}
.check-item.done span{color:var(--text2);text-decoration:line-through}
.upzone{border:1.5px dashed var(--border2);border-radius:var(--r);padding:.4rem;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg3);min-height:60px;display:flex;align-items:center;justify-content:center}
.upzone:hover,.upzone.drag{border-color:var(--teal);background:var(--teal-dim)}
.upzone p{font-size:.70rem;color:var(--text2);line-height:1.3}
.lib-pill{display:flex;width:100%;align-items:center;justify-content:center;gap:.3rem;font-family:var(--fb);font-size:.75rem;color:var(--text2);background:var(--bg3);border:1.5px dashed var(--border2);border-radius:var(--r);padding:8px 9px;cursor:pointer;transition:border-color .15s,background .15s;user-select:none}
.rule-box{background:var(--card2);border-left:3px solid var(--border2);border-radius:0 var(--r) var(--r) 0;padding:.45rem .7rem;margin-bottom:.35rem;font-size:.9rem;color:var(--text2);line-height:1.5;transition:border var(--tr)}
.rule-box:hover{border-left-color:var(--teal)}
.rule-box strong{color:var(--teal)}
.detail-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--rl);padding:1.1rem;margin-top:.75rem}
.activity-item{padding:.6rem 0;border-bottom:1px solid var(--border);display:flex;gap:.75rem}
.act-icon{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--dm);font-size:.66rem;color:var(--text2);flex-shrink:0;background:var(--bg3)}
.act-body{font-size:15px;flex:1}
.act-title{font-size:.92rem;font-weight:500;color:var(--text)}
.act-meta{font-family:var(--dm);font-size:.70rem;color:var(--text2);margin-top:1px}
.task-item{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--border)}
.task-title{font-size:.92rem;color:var(--text)}
.task-meta{font-family:var(--dm);font-size:.68rem;color:var(--text2);margin-top:2px}
.task-item.done .task-title{color:var(--text2);text-decoration:line-through}
/* ── UI CONSISTENCY ── */
/* All page headers consistent */
.page-hdr{display:flex;align-items:center;justify-content:flex-end;margin-bottom:.85rem;gap:.5rem;flex-wrap:wrap}
/* All empty states consistent */
.empty{text-align:center;padding:2.5rem 1rem;color:var(--text2);font-family:var(--dm);font-size:.76rem;letter-spacing:.08em}
.empty-icon{font-size:1.5rem;margin-bottom:.5rem;opacity:.2;display:block}
/* Consistent table row highlight */
table.dt tbody tr{transition:background var(--tr)}
/* Topbar consistent height — defined above */
/* Sidebar item hover consistent */
.sb-item{transition:background var(--tr),color var(--tr),border-color var(--tr)}
/* All modals consistent padding */
.modal{padding:1.5rem 1.5rem 0}
/* Search row consistent */
.search-row{margin-bottom:.9rem}
/* ── CALENDAR ── */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-hdr{font-family:var(--dm);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);text-align:center;padding:.35rem 0}
.cal-day{position:relative;min-height:125px;background:var(--card2);border:1px solid var(--border);border-radius:var(--rs);padding:.3rem;transition:border-color var(--tr),background var(--tr)}
.cal-day.load-busy{background:rgba(245,158,11,.10)!important}
.cal-day.load-over{background:rgba(239,68,68,.14)!important}
[data-theme="light"] .cal-day.load-busy{background:rgba(245,158,11,.18)!important}
[data-theme="light"] .cal-day.load-over{background:rgba(239,68,68,.18)!important}
.cal-load-badge{position:absolute;top:4px;right:5px;z-index:4;font-family:var(--dm);font-size:.64rem;font-weight:700;background:rgba(0,0,0,.5);padding:2px 6px;border-radius:8px;line-height:1.3;pointer-events:none}
.cal-day-task-block.is-active{z-index:50!important;box-shadow:0 6px 18px rgba(0,0,0,.45)!important}
.cal-gantt-block.is-active{z-index:40!important;box-shadow:0 6px 18px rgba(0,0,0,.45)!important;outline:2px solid rgba(255,255,255,.35)}
/* KPI cards + analytics charts keep more vibrant color than the rest of the
app — the toned palette was applied globally, but data viz needs pop. */
.kpi,#pg-an,#pg-pl,#pg-rev,#pg-dash .an-breakdowns,#pg-dash .an-forward,#pg-dash .an-funnel{filter:saturate(1.35)}
[data-theme="light"] .cal-load-badge{background:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.cal-gantt-pop{background:rgba(37,37,37,.95);border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 64px rgba(0,0,0,.5);color:var(--text)}
[data-theme="light"] .cal-gantt-pop{background:rgba(255,255,255,.97);border:1px solid rgba(0,0,0,.08);box-shadow:0 12px 36px rgba(0,0,0,.18);color:#0f172a}
.cal-day.today{border-color:var(--teal)}
.cal-day.other{opacity:.3}
.cal-day-n{font-family:var(--dm);font-size:.74rem;color:var(--text2);margin-bottom:.2rem}
.cal-day.today .cal-day-n{color:var(--teal);font-weight:700}
.cal-ev{font-size:.68rem;padding:2px 4px;border-radius:2px;margin-bottom:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;line-height:1.3}
/* ── CALENDAR FIXED ── */
.cal-outer{background:var(--card);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;width:100%;display:flex;flex-direction:column;height:calc(100vh - 195px);min-height:420px}
.cal-outer .cal-days-grid{flex:1;grid-auto-rows:1fr;min-height:0}
.cal-outer .cal-day-view{flex:1;min-height:0;display:flex;flex-direction:column}
.cal-outer .cal-board{flex:1;min-height:0;display:flex;flex-direction:column}
.cal-outer .cal-timeline{flex:1;min-height:0;display:flex;flex-direction:column}
.cal-outer .cal-day{min-height:0;overflow:hidden}
/* Schedule page fits the viewport (no page scroll) on desktop — the calendar
flex-fills whatever space is left below the toolbar rows, so wrapping filters
never push it off-screen. Mobile (≤768px) keeps its natural scrolling layout. */
@media(min-width:769px){
#pg-schedule.pg.on{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
/* Fixed-list pages: page controls + the sticky table header stay put; only the
table body scrolls. The .*-layout (flex:1) + .*-list-col (overflow-y:auto)
base rules already define the scroller — we just make the PAGE a flex column
so that flex:1 is bounded. Desktop only; mobile keeps natural page scroll. */
#pg-leads.pg.on,#pg-accounts.pg.on,#pg-contacts.pg.on,#pg-activities.pg.on,#pg-tasks.pg.on{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
#pg-leads .page-hdr,#pg-leads .search-row,#pg-accounts .page-hdr,#pg-accounts .search-row,#pg-contacts .page-hdr,#pg-contacts .search-row,#pg-activities .page-hdr,#pg-activities .search-row,#pg-tasks .page-hdr,#pg-tasks .search-row,#act-bulk-banner,#tsk-bulk-banner{flex-shrink:0}
/* Activities/To-Do have no list-col, so their list+empty sit in a .list-scroll wrapper. */
#pg-activities .list-scroll,#pg-tasks .list-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
#cal-shell{flex-direction:row;flex:1;min-height:0;gap:.9rem}
#cal-main{flex:1}
#cal-rail{width:212px;flex-shrink:0;overflow-y:auto}
#cal-stage{flex:1;min-height:0;display:flex;flex-direction:column}
#pg-schedule .cal-outer{height:auto;min-height:0;flex:1}
#cal-stage>#cal-list{flex:1;min-height:0;overflow-y:auto}
}
/* ── Schedule control rail ─────────────────────────────────────────────
All schedule controls live in a grouped left rail (View · Show as ·
Method · Status · Options); the main column gets a slim date-nav bar and
the calendar full width. Rail rules are scoped under #cal-rail so they win
specificity over the global boxed .pipeline-tabs styling. */
#cal-shell{display:flex;gap:.9rem}
#cal-main{display:flex;flex-direction:column;min-width:0}
/* Mobile (≤768px): the control rail becomes a slide-in drawer toggled by the ▦
button, so it stops eating vertical space above the calendar. Closed by
default (translated off-canvas); opens when #cal-shell is NOT .rail-collapsed.
A tap-to-close scrim sits behind it. */
#cal-rail-scrim{display:none}
@media(max-width:768px){
#cal-shell{flex-direction:column;gap:.8rem}
/* Make the calendar fill the page (between the topbar and the bottom nav) with
its own internal scroll, instead of flowing as tall as its content. Mirrors
the desktop flex chain (which is gated to ≥769px). */
#pg-schedule.pg.on{display:flex!important;flex-direction:column;flex:1;min-height:0;overflow:hidden}
#pg-schedule #cal-shell{flex:1;min-height:0}
#pg-schedule #cal-main{flex:1;min-height:0;display:flex;flex-direction:column;min-width:0}
#pg-schedule #cal-topbar{flex-shrink:0}
#pg-schedule #cal-stage{flex:1;min-height:0;display:flex;flex-direction:column}
#pg-schedule .cal-outer{flex:1;min-height:0;height:auto}
#pg-schedule #cal-stage>#cal-list{flex:1;min-height:0;overflow-y:auto}
#cal-rail{
/* sit below the 62px global topbar and above the bottom nav, same width as
the other mobile drawers */
position:fixed;top:calc(62px + var(--banner-h, 0px));bottom:calc(56px + env(safe-area-inset-bottom));left:0;z-index:1200;width:min(88vw,360px);max-width:88vw;
box-sizing:border-box;margin:0;padding:14px 16px 28px!important;
/* opaque — the later `#cal-rail{background:none}` desktop rule would otherwise
win on source order and make the drawer see-through */
background:var(--bg)!important;border:0!important;border-right:1px solid var(--border)!important;
box-shadow:10px 0 30px rgba(0,0,0,.5);
overflow-y:auto;-webkit-overflow-scrolling:touch;
transform:translateX(-100%);transition:transform .24s ease, visibility 0s linear .24s;
visibility:hidden;
}
/* keep it in the DOM when closed (so it can slide) — override the desktop hide */
#cal-shell.rail-collapsed #cal-rail{display:block!important;transform:translateX(-100%);visibility:hidden}
#cal-shell:not(.rail-collapsed) #cal-rail{transform:translateX(0);visibility:visible!important;transition:transform .24s ease, visibility 0s linear 0s}
#cal-rail-scrim{display:block;position:fixed;top:calc(62px + var(--banner-h, 0px));bottom:calc(56px + env(safe-area-inset-bottom));left:0;right:0;z-index:1199;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .24s ease}
#cal-shell:not(.rail-collapsed) #cal-rail-scrim{opacity:1;visibility:visible}
/* Match the other sidebar-nav drawers — bigger rows + fonts on mobile. */
#cal-rail .cal-rail-sec,#cal-rail .cal-rail-sec--toggle{font-size:.8rem!important;margin:1.1rem 6px .4rem!important}
#cal-rail .cal-rail-item{font-size:1rem!important;padding:.7rem .75rem!important;gap:.7rem!important}
#cal-rail .cal-rail-item svg{width:1.15rem!important;height:1.15rem!important}
#cal-rail .cal-st-chip{font-size:1rem!important;padding:.7rem .9rem!important}
#cal-rail .cal-rail-toggle-lbl{font-size:1rem!important}
#cal-rail .cal-st-n{font-size:.72rem!important}
#cal-rail #cal-tasks-toggle .pipeline-tab{font-size:.95rem!important;padding:.5rem 1rem!important}
}
#cal-topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem;margin-bottom:.7rem;flex-shrink:0}
.cal-tb-left{display:flex;align-items:center;gap:.5rem;justify-self:start;min-width:0}
.cal-tb-center{justify-self:center}
.cal-tb-right{display:flex;align-items:center;gap:.5rem;justify-self:end}
#cal-topbar #cal-zoom-tabs,#cal-topbar #cal-monthmode-tabs{margin-bottom:0!important}
#cal-rail{background:none;border:0;border-radius:0;padding:12px 8px 12px 0}
#cal-shell.rail-collapsed #cal-rail{display:none}
.cal-rail-sec{font-family:var(--dm);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--teal);margin:16px 4px 7px}
.cal-rail-sec--toggle{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;box-sizing:border-box;margin:16px 0 7px;padding:0 4px;background:none;border:0;cursor:pointer}
.cal-rail-sec--toggle:hover{color:var(--text2)}
.cal-sec-chev{flex-shrink:0;opacity:.55;transition:transform .15s}
.cal-rail-sec--toggle.collapsed .cal-sec-chev{transform:rotate(-90deg)}
.cal-rail-secbody.collapsed{display:none}
#cal-rail>.cal-rail-sec:first-child,#cal-showas-grp .cal-rail-sec,#cal-tasks-wrap .cal-rail-sec{margin-top:14px}
#cal-rail>.cal-rail-sec:first-child{margin-top:2px}
/* View items — full-width vertical rows */
.cal-rail-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;color:var(--text2);font-family:var(--dm);font-size:13px;font-weight:500;padding:8px 10px;border-radius:4px;cursor:pointer;transition:background .12s,color .12s}
.cal-rail-item:hover{background:var(--bg3);color:var(--text)}
.cal-rail-item.active{background:var(--teal-sel);color:var(--teal);font-weight:600}
.cal-rail-item svg{width:15px;height:15px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8}
[data-theme="light"] .cal-rail-item.active{color:#26b8b3}
/* Nested pills (Day/Month under Calendar) */
#cal-rail .cal-rail-pills{margin:3px 0 4px 34px!important;padding:3px!important;width:fit-content!important;max-width:none!important;overflow:visible!important}
#cal-rail #cal-monthmode-tabs.cal-rail-pills-col{margin-left:4px!important;flex-direction:column!important;width:100%!important;align-items:stretch!important}
#cal-rail .cal-rail-pills-col .pipeline-tab{justify-content:flex-start!important;width:100%!important}
/* Options — Tasks toggle row */
.cal-rail-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px}
.cal-rail-toggle-lbl{font-family:var(--dm);font-size:12px;font-weight:500;color:var(--text2)}
#cal-rail .cal-rail-toggle .cal-rail-pills{margin:0!important}
/* Method filters — vertical full-width list */
#cal-rail #cal-filter-tabs,#cal-rail #cal-pay-tabs{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:4px!important;padding:0!important;margin:0!important;background:none!important;border:0!important;border-radius:0!important;width:100%!important;max-width:none!important;overflow:visible!important}
#cal-rail #cal-filter-tabs .pipeline-tab,#cal-rail #cal-pay-tabs .pipeline-tab{justify-content:space-between!important;width:100%!important;height:auto!important;padding:7px 10px!important;border-radius:4px!important;font-size:13px!important}
#cal-rail .ct{font-family:var(--dm);font-size:9px;font-weight:600;background:var(--bg4);color:var(--text3);padding:1px 6px;border-radius:10px}
/* Status legend — vertical full-width list */
#cal-rail #cal-status-chips{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:4px!important;justify-content:flex-start!important}
#cal-rail .cal-st-chip{width:100%!important;justify-content:flex-start!important;border-radius:4px!important;padding:7px 10px!important}
#cal-rail .cal-st-chip .cal-st-n{margin-left:auto!important}
/* Mobile: bump the Orders/Method pills, their count badges and the section
chevron to match the other sidebar-nav drawers. Placed after the .pipeline-tab
rules above so it wins on source order. */
@media(max-width:768px){
#cal-rail #cal-pay-tabs .pipeline-tab,#cal-rail #cal-filter-tabs .pipeline-tab{font-size:1rem!important;padding:.7rem .95rem!important}
#cal-rail .ct{font-size:.72rem!important;padding:2px 8px!important}
#cal-rail .cal-sec-chev{width:16px!important;height:16px!important}
}
/* Collapse toggle */
.cal-rail-collapse-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--border);background:var(--card);border-radius:8px;color:var(--text2);cursor:pointer;flex-shrink:0;transition:color .14s,border-color .14s}
.cal-rail-collapse-btn:hover{color:var(--text);border-color:var(--border2)}
#cal-shell.rail-collapsed #cal-rail-toggle{color:var(--teal);border-color:rgba(51,209,204,.3)}
/* Text-label topbar buttons (Today, Run sheet) share the collapse-btn box but auto-size */
.cal-rail-collapse-btn.cal-topbar-text{width:auto;padding:0 12px;font-family:var(--dm);font-size:12px;font-weight:500;gap:.4rem}
/* Shared job-card pieces: mockup tile, art-approval dot, status label */
.cal-card-thumb{position:relative;width:46px;height:46px;border-radius:4px;background:var(--bg4);border:1px solid var(--border);flex-shrink:0;align-self:center;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cal-card-thumb svg{width:26px;height:26px}
.cal-oc--solid .cal-card-thumb{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.5)}
/* Day-view rows are full width — show a larger mockup there. */
.cal-board-card .cal-card-thumb{width:60px;height:60px}
.cal-board-card .cal-card-thumb svg{width:32px;height:32px}
/* Pending (unpaid) order — forecast only: faded so it never reads as committed */
.cal-oc--pending{opacity:.6}
/* Pipeline-deal forecast card (quote/proof/invoice, no order yet) — neutral */
.cal-oc--forecast{background:var(--bg2);border:1px solid var(--border2);transition:background .12s}
.cal-oc--forecast:hover{background:var(--bg3)}
.cal-fc-icon{width:38px;height:38px;border-radius:3px;background:var(--bg4);border:1px solid var(--border);flex-shrink:0;align-self:center;display:flex;align-items:center;justify-content:center;color:var(--text3)}
.cal-fc-tag{flex-shrink:0;font-family:var(--dm);font-size:.52rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);background:var(--bg4);padding:1px 5px;border-radius:2px;align-self:center}
.cal-pend-tag{flex-shrink:0;font-family:var(--dm);font-size:.56rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.3);padding:1px 5px;border-radius:2px}
.cal-oc--solid .cal-card-adv{background:#fff;border:1.5px solid rgba(0,0,0,.25);color:#0e1117;opacity:1;box-shadow:0 2px 5px rgba(0,0,0,.45)}
.cal-oc--solid .cal-card-adv:hover{background:#fff;color:var(--teal);box-shadow:0 3px 7px rgba(0,0,0,.5)}
.cal-proof-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px var(--bg3)}
.cal-card-status{font-family:var(--dm);font-size:.64rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
/* ── Board order card (whole-card status tint, no side bar) ── */
.cal-oc{position:relative;display:flex;flex-direction:column;gap:4px;padding:6px 7px;border-radius:3px;border:1px solid var(--border);cursor:pointer;transition:background .12s}
.cal-oc-main{display:flex;gap:7px;min-width:0}
.cal-oc-duerow{display:flex;align-items:center;justify-content:flex-end;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.18)}
.cal-oc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cal-oc-top{display:flex;align-items:center;gap:4px;min-width:0}
.cal-oc-cust{flex:1;min-width:0;font-family:var(--dm);font-size:.76rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-oc-spec{font-family:var(--dm);font-size:.67rem;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-oc-foot{display:flex;align-items:center;gap:6px;margin-top:1px}
.cal-oc-due{display:inline-flex;align-items:center;gap:2px;font-family:var(--dm);font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
/* ── Job modal (board card → details + checklist + status) ── */
.cal-job-modal-ov{position:fixed;inset:0;z-index:9500;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px;animation:caljmIn .12s ease}
.cal-job-modal{width:360px;max-width:100%;max-height:90vh;overflow-y:auto;background:#232323;border:1px solid var(--border2);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
[data-theme="light"] .cal-job-modal{background:#fff}
.cal-jm-hd{display:flex;align-items:flex-start;gap:11px;padding:14px 16px;border-bottom:1px solid var(--border)}
.cal-jm-thumb{width:44px;height:44px;border-radius:8px;background:var(--bg4) center/cover no-repeat;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.cal-jm-thumb svg{width:22px;height:22px}
.cal-jm-title{font-family:var(--dm);font-size:15px;font-weight:700;color:var(--text)}
.cal-jm-status{font-family:var(--dm);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-top:3px}
.cal-jm-x{margin-left:auto;background:none;border:0;color:var(--text3);font-size:15px;cursor:pointer;padding:2px 4px;line-height:1}
.cal-jm-x:hover{color:var(--text)}
.cal-jm-rows{padding:4px 16px}
.cal-jm-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;font-family:var(--dm);font-size:12.5px;border-bottom:1px solid var(--border)}
.cal-jm-row:last-child{border-bottom:0}
.cal-jm-row span{color:var(--text3);flex-shrink:0}
.cal-jm-row b{color:var(--text);font-weight:600;text-align:right}
.cal-jm-thumbwrap{padding:8px 16px 2px}
.cal-jm-thumbstrip{display:flex;gap:6px;flex-wrap:wrap}
.cal-jm-thumbtile{width:46px;height:46px;border-radius:6px;background:var(--bg4) center/cover no-repeat;border:1px solid var(--border);cursor:pointer;transition:box-shadow .12s}
.cal-jm-thumbtile:hover{box-shadow:0 0 0 2px var(--border3)}
.cal-jm-thumbtile.sel{box-shadow:0 0 0 2px var(--teal);border-color:var(--teal)}
.cal-jm-ckwrap{padding:10px 16px 4px}
.cal-jm-ckhd{font-family:var(--dm);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-bottom:6px}
.cal-jm-ck{display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;font-family:var(--dm);font-size:13px;color:var(--text2)}
.cal-jm-ck:hover{color:var(--text)}
.cal-jm-ck .box{width:16px;height:16px;border:1.6px solid var(--border2);border-radius:4px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.cal-jm-ck.done .box{background:var(--teal);border-color:var(--teal)}
.cal-jm-ck.done .lbl{color:var(--text3);text-decoration:line-through}
.cal-jm-empty{font-family:var(--dm);font-size:12px;color:var(--text3);font-style:italic;padding:4px 0 8px}
.cal-jm-ft{display:flex;gap:8px;padding:13px 16px;border-top:1px solid var(--border)}
.cal-jm-ft .cal-jm-btn{flex:1 1 0;text-align:center}
.cal-jm-btn{font-family:var(--dm);font-size:12.5px;font-weight:600;border-radius:9px;padding:9px 13px;cursor:pointer;border:1px solid var(--border2);background:var(--bg3);color:var(--text2)}
.cal-jm-btn:hover{color:var(--text);background:var(--card2)}
.cal-jm-btn.primary{flex:1;background:#2bc5c0;color:#06080c;border-color:#2bc5c0}
.cal-jm-btn.primary:hover{background:#22b0ab;color:#06080c}
[data-theme="light"] .cal-jm-btn.primary{background:#26b8b3;color:#fff;border-color:#26b8b3}
@keyframes caljmIn{from{opacity:0}to{opacity:1}}
/* Inline status-advance button on Board/Day job cards */
.cal-card-adv{flex-shrink:0;align-self:center;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--border2);background:var(--card2);color:var(--text2);cursor:pointer;opacity:.55;transition:opacity .12s,color .12s,background .12s,border-color .12s}
.cal-board-card:hover .cal-card-adv{opacity:1}
.cal-card-adv:hover{background:rgba(51,209,204,.15);border-color:rgba(51,209,204,.4);color:var(--teal);opacity:1}
@media(hover:none){.cal-card-adv{opacity:.9}}
.leg-dot{position:relative;display:block;width:10px;height:10px;border-radius:50%;background:var(--c);cursor:pointer;transition:box-shadow .15s,transform .15s}
.leg-dot:hover{transform:scale(1.15)}
.leg-dot.active{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--c)}
.leg-dot::after{content:attr(data-leg);position:absolute;left:18px;top:50%;transform:translateY(-50%);background:rgba(37,37,37,.96);border:1px solid rgba(255,255,255,.08);color:var(--text);font-family:var(--dm);font-weight:500;font-size:.7rem;padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:20;box-shadow:0 6px 16px rgba(0,0,0,.4)}
[data-theme="light"] .leg-dot::after{background:rgba(255,255,255,.97);border:1px solid rgba(0,0,0,.08);color:#0f172a;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.leg-dot:hover::after{opacity:1}
.leg-dot.active:hover{transform:scale(1.15)}
/* Schedule status filter chips (labeled, colored, with counts) */
.cal-st-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--dm);font-size:12px;font-weight:500;color:var(--text2);background:var(--card);border:1px solid var(--border);border-radius:99px;padding:4px 9px 4px 11px;cursor:pointer;transition:border-color .14s,color .14s,background .14s;white-space:nowrap}
.cal-st-chip:hover{border-color:var(--c);color:var(--text)}
.cal-st-chip .cal-st-dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex-shrink:0}
.cal-st-chip .cal-st-n{font-family:var(--dm);font-size:10px;font-weight:700;color:var(--text3);background:rgba(255,255,255,.07);border-radius:99px;min-width:16px;height:16px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
[data-theme="light"] .cal-st-chip .cal-st-n{background:rgba(0,0,0,.05)}
.cal-st-chip.active{color:var(--c);border-color:var(--c);background:var(--cd)}
.cal-st-chip.active .cal-st-n{color:var(--c);background:var(--cd)}
.cal-hdr-row{display:grid!important;grid-template-columns:repeat(7,1fr)!important;width:100%;background:var(--bg2);border-bottom:1px solid var(--border);padding:0 .35rem}
.cal-hdr{font-family:var(--dm);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);text-align:center;padding:.5rem 0}
.cal-days-grid{display:grid!important;grid-template-columns:repeat(7,1fr)!important;width:100%;padding:.35rem;gap:2px}
.cal-day{min-height:80px;min-width:0;overflow:hidden;background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:.3rem .35rem;transition:border-color var(--tr),background var(--tr);contain:layout paint}
.cal-day:hover{border-color:var(--border2);background:var(--card2)}
.cal-day.today{border-color:var(--teal)}
.cal-day.other{opacity:.25}
.cal-day-n{font-family:var(--dm);font-size:.74rem;color:var(--text2);margin-bottom:.25rem}
.cal-day.today .cal-day-n{color:var(--teal);font-weight:700}
.cal-ev{font-size:.70rem;padding:2px 5px;border-radius:2px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;line-height:1.4}
/* View toggle */
.cal-view-toggle{display:flex;gap:2px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);padding:2px}
.cal-view-btn{font-family:var(--dm);font-size:.68rem;font-weight:600;padding:3px 10px;border-radius:3px;border:none;cursor:pointer;background:none;color:var(--text2);transition:all .15s;line-height:1.4}
.cal-view-btn.active{background:var(--card);color:var(--teal);box-shadow:0 1px 3px rgba(0,0,0,.15)}
/* Agenda panel */
.agenda-hdr{font-family:var(--dm);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);margin-bottom:.35rem}
.agenda-empty{font-family:var(--dm);font-size:.72rem;color:var(--teal);padding:.42rem .7rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r);display:inline-flex;align-items:center;gap:.4rem}
.agenda-item{display:flex;align-items:center;gap:.5rem;padding:.38rem .65rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:background .12s,border-color .12s;margin-bottom:.3rem}
.agenda-type{font-family:var(--dm);font-size:.64rem;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:20px;flex-shrink:0;text-transform:uppercase}
.agenda-po{font-family:var(--dm);font-size:.7rem;color:var(--text2);flex-shrink:0}
.agenda-cu{font-size:.88rem;font-weight:600;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agenda-meta{font-family:var(--dm);font-size:.63rem;color:var(--text2);white-space:nowrap;flex-shrink:0}
/* Workload bar */
.wl-1{background:rgba(51,209,204,.5)}.wl-2{background:rgba(51,209,204,.8)}.wl-3{background:rgba(245,158,11,.7)}.wl-4{background:rgba(239,68,68,.7)}
/* Week view — taller cells */
.cal-days-grid--week .cal-day{min-height:0;overflow:hidden;display:flex;flex-direction:column;padding-left:3px;padding-right:3px;padding-bottom:4px}
.cal-days-grid--week .cal-trail-stack{flex:1;min-height:0;overflow:hidden}
.cal-days-grid--week .cal-week-tasks{flex-shrink:0;margin-top:6px!important}
.cal-days-grid--week .cal-day .cal-week-tasks{margin-top:auto}
.cal-ev-week{font-size:.73rem;padding:3px 6px}
/* Mobile ≤480 compact month view — glance-able silhouette above the agenda.
Date number stays, pills render as colored dots, "more" button hidden
(full list lives in the agenda). Added when renderCal() toggles `.cal-mobile`
on .cal-outer for screens ≤480px. */
.cal-outer.cal-mobile .cal-hdr-row{padding:0 .15rem}
.cal-outer.cal-mobile .cal-hdr{font-size:.66rem;padding:4px 2px}
.cal-outer.cal-mobile .cal-days-grid{padding:.15rem;gap:1px}
.cal-outer.cal-mobile .cal-day{min-height:44px;padding:2px 3px;border-radius:3px}
.cal-outer.cal-mobile .cal-day-n{font-size:.62rem;margin-bottom:1px}
.cal-outer.cal-mobile .cal-pill{height:5px;border-radius:2.5px;padding:0;margin-bottom:1px;font-size:0;color:transparent}
.cal-outer.cal-mobile .cal-pill *{display:none}
.cal-outer.cal-mobile .cal-day button{font-size:.64rem;padding:0}
/* On narrow screens the month cells get squeezed (7 cols ÷ phone/tablet width),
and the absolute load badge (mini-bar + pcs) collides with the top-left date
number. Below 768px shrink it to a bare pcs chip in the corner and drop the
mini-bar so the date stays clear. Uses the viewport — not the .cal-mobile class
(≤480) — so it also covers the 481–768 range where the grid is still cramped. */
@media(max-width:768px){
.cal-outer .cal-load-badge{top:2px!important;right:2px!important;gap:0!important;padding:0 3px!important;background:rgba(0,0,0,.55)!important}
.cal-outer .cal-load-badge>div{display:none!important}
.cal-outer .cal-load-badge span{font-size:.56rem!important}
.cal-outer .cal-day-n{padding-right:20px}
}
/* Mobile: the topbar can't sit on one row at phone width — wrap it into two.
Row 1 = nav + title + Today (full width). Row 2 = the three control groups
side by side: the Day/Week/Month view toggle, the month-mode toggle (Due
dates / Production bars), and Run sheet. Tabs are tightened and Run sheet
collapses to its icon so all three fit on the single second line. */
@media(max-width:768px){
#cal-topbar{display:flex!important;flex-wrap:wrap;gap:.4rem .45rem;align-items:center}
#cal-topbar .cal-tb-left{flex:1 1 100%;justify-content:space-between;gap:.2rem;min-width:0}
#cal-topbar #cal-title{min-width:0!important;font-size:1.05rem!important;text-align:center;flex:1 1 auto}
/* Day/Week/Month centered on its own row; the month-mode toggle + Run sheet
centered on the row below it. */
#cal-topbar .cal-tb-center,#cal-topbar .cal-tb-right{flex:1 1 100%!important;justify-self:auto;margin:0!important;display:flex;align-items:center;justify-content:center}
#cal-topbar .cal-tb-right{gap:.45rem}
#cal-topbar .pipeline-tab{padding:4px 9px!important;font-size:.72rem!important}
/* Bigger tap targets: control button, prev/next arrows, Today */
#cal-topbar .cal-rail-collapse-btn{width:42px;height:42px;border-radius:10px}
#cal-topbar .cal-rail-collapse-btn svg{width:20px;height:20px}
#cal-topbar .cal-rail-collapse-btn.cal-topbar-text{width:auto;height:42px;padding:0 16px;font-size:13px}
}
/* Week view: the board now scrolls horizontally on mobile with ~180px day
columns, so the order cards keep their compact side-by-side (thumbnail + text)
layout — no stacking needed. */
/* ── CALENDAR FILTER BUTTONS ── */
.cal-filter-btn{font-family:var(--dm);font-size:.68rem;padding:3px 10px;border-radius:3px;border:1px solid var(--border);cursor:pointer;background:var(--bg3);color:var(--text2);transition:all .15s;line-height:1.4}
.cal-filter-btn.active{background:var(--teal);border-color:var(--teal);color:#fff}
/* Month view pills (due date only) */
.cal-pill{height:18px;border-radius:9px;padding:0 6px;font-size:.66rem;font-family:var(--dm);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;margin-bottom:2px;display:flex;align-items:center;line-height:1;max-width:100%;box-sizing:border-box}
/* Week view Gantt bars */
.cal-gantt{height:22px;font-size:.64rem;color:#fff;padding:0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;margin-bottom:2px;display:flex;align-items:center;line-height:1}
/* Follow-up dot on month view */
.cal-fu-dot{width:7px;height:7px;border-radius:50%;background:#a78bfa;display:inline-block;margin:2px 1px;vertical-align:middle;cursor:pointer}
/* Week view load indicator */
.cal-load{font-family:var(--dm);font-size:.60rem;padding:2px 5px;border-radius:3px;margin-bottom:.3rem;text-align:center}
.cal-load.load-ok{background:var(--teal-dim);color:var(--teal)}
.cal-load.load-busy{background:var(--amber-dim);color:var(--amber)}
.cal-load.load-over{background:var(--red-dim);color:var(--red)}
/* Week view order card */
.cal-wk-card{background:var(--card);border:1px solid var(--border);border-left-width:3px;border-radius:var(--rs);padding:.25rem .4rem;margin-bottom:.2rem;cursor:pointer;font-size:.72rem;transition:border-color .12s}
.cal-wk-card:hover{background:var(--card2)}
/* Drag-over highlight for calendar drop targets */
.cal-day.cal-drag-over{background:rgba(51,209,204,.12)!important;border-color:var(--teal)!important;box-shadow:inset 0 0 0 1px rgba(51,209,204,.25)}
/* Touch-dragging source pill — dim the original while the ghost follows the finger */
.cal-touch-dragging{opacity:.35!important}
/* ── CHARTS (pure CSS) ── */
.bar-chart{display:flex;align-items:flex-end;gap:4px;height:120px;padding:.25rem 0}
.bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:.2rem}
.bar{width:100%;background:var(--teal-dim);border-radius:2px 2px 0 0;transition:height .3s ease;border-top:2px solid var(--teal);position:relative;cursor:default}
.bar:hover{background:var(--teal-dim);opacity:.85}
.bar-lbl{font-family:var(--dm);font-size:.62rem;color:var(--text2);letter-spacing:.05em}
.bar-val{font-family:var(--dm);font-size:.68rem;color:var(--teal)}
/* ── ART LIBRARY ── */
.art-status-badge{display:inline-block;font-family:var(--dm);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:20px;font-weight:700}
.art-s-draft{background:rgba(255,255,255,.14);color:#e2e8f0;font-weight:700}
.art-s-rework{background:rgba(245,158,11,.28);color:#ffb84d;font-weight:700}
.art-s-ready{background:rgba(51,209,204,.3);color:#33d1cc;font-weight:700}
.art-s-approved{background:rgba(34,197,94,.28);color:#4ade80;font-weight:700}
.art-s-archived{background:var(--bg3);color:var(--text3)}
#art-lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center}
#art-lightbox-overlay .alb-topbar,#embed-lb-overlay .alb-topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;z-index:1}
#art-lightbox-overlay .alb-fname,#embed-lb-overlay .alb-fname{font-family:var(--dm);font-size:.8rem;color:#fff;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
#art-lightbox-overlay .alb-pos,#embed-lb-overlay .alb-pos{font-family:var(--dm);font-size:.72rem;color:#fff;opacity:.7}
#art-lightbox-overlay .alb-close,#embed-lb-overlay .alb-close{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:4px 8px;opacity:.7;line-height:1}
#art-lightbox-overlay .alb-close:hover,#embed-lb-overlay .alb-close:hover{opacity:1}
#art-lightbox-overlay .alb-imgwrap,#embed-lb-overlay .alb-imgwrap{flex:1;display:flex;align-items:center;justify-content:center;width:100%;position:relative;padding:60px 80px;box-sizing:border-box}
#art-lightbox-overlay .alb-img,#embed-lb-overlay .alb-img{max-width:90vw;max-height:85vh;object-fit:contain;display:block}
#art-lightbox-overlay .alb-arrow,#embed-lb-overlay .alb-arrow,#lead-art-lb-overlay .alb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:2}
#art-lightbox-overlay .alb-arrow:hover,#embed-lb-overlay .alb-arrow:hover,#lead-art-lb-overlay .alb-arrow:hover{background:rgba(255,255,255,.2)}
#art-lightbox-overlay .alb-arrow.alb-prev,#embed-lb-overlay .alb-arrow.alb-prev,#lead-art-lb-overlay .alb-arrow.alb-prev{left:1rem}
#art-lightbox-overlay .alb-arrow.alb-next,#embed-lb-overlay .alb-arrow.alb-next,#lead-art-lb-overlay .alb-arrow.alb-next{right:1rem}
#art-lightbox-overlay .alb-arrow:disabled,#embed-lb-overlay .alb-arrow:disabled,#lead-art-lb-overlay .alb-arrow:disabled{opacity:.2;cursor:default;pointer-events:none}
#art-lightbox-overlay .alb-bottom,#embed-lb-overlay .alb-bottom{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.55);padding:.75rem 1.5rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
#art-lightbox-overlay .alb-meta,#embed-lb-overlay .alb-meta{font-family:var(--dm);font-size:.7rem;color:#ccc;display:flex;align-items:center;gap:.75rem;flex:1;flex-wrap:wrap}
#art-lightbox-overlay .alb-actions,#embed-lb-overlay .alb-actions{display:flex;gap:.5rem;flex-shrink:0}
/* Art lightbox: two-pane viewer (left) + editor rail (right) */
#art-lightbox-overlay{flex-direction:row;align-items:stretch;justify-content:flex-start;background:#0d0d0d}
#art-lightbox-overlay .alb-stage{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;background:#0d0d0d}
#art-lightbox-overlay .alb-img{max-width:100%;max-height:84vh}
#art-lightbox-overlay .alb-rail{width:372px;flex-shrink:0;height:100vh;background:var(--bg2);border-left:1px solid var(--border);box-sizing:border-box;display:flex;flex-direction:column}
#art-lightbox-overlay .alb-rail-scroll{flex:1;overflow-y:auto;padding:1.1rem 1.15rem 1rem}
#art-lightbox-overlay .alb-rail h2{font-size:.92rem;margin:0 0 .25rem;color:var(--text);word-break:break-word;line-height:1.3}
#art-lightbox-overlay .alb-rail .field{margin-bottom:.55rem}
#art-lightbox-overlay .alb-rail-meta{font-family:var(--dm);font-size:.66rem;color:var(--text2);margin-bottom:1rem;display:flex;flex-wrap:wrap;gap:.4rem .55rem;align-items:center}
#art-lightbox-overlay .alb-sec-label{font-family:var(--dm);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text3);margin:.1rem 0 .5rem}
#art-lightbox-overlay .alb-card{background:var(--bg3);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:1rem}
#art-lightbox-overlay .alb-card-row{padding:.6rem .7rem}
#art-lightbox-overlay .alb-mini-label{display:block;font-family:var(--dm);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);margin-bottom:.38rem}
/* Branded dropdown (matches the app's custom-chevron selects) */
#art-lightbox-overlay .alb-rail select{-webkit-appearance:none!important;appearance:none!important;width:100%;box-sizing:border-box;cursor:pointer;background-color:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.1)!important;color:var(--text)!important;font-family:var(--dm)!important;font-size:13.5px!important;border-radius:8px!important;padding:9px 30px 9px 12px!important;background-image:url("data:image/svg+xml;utf8,")!important;background-repeat:no-repeat!important;background-position:right 11px center!important;transition:border-color .15s,box-shadow .15s,background-color .15s}
#art-lightbox-overlay .alb-rail select:focus{border-color:var(--teal)!important;box-shadow:0 0 0 3px rgba(51,209,204,.12)!important;background-color:rgba(255,255,255,.06)!important;outline:none}
#art-lightbox-overlay .alb-rail select:hover{border-color:rgba(255,255,255,.2)!important}
#art-lightbox-overlay .alb-rail select option{background:var(--bg2);color:var(--text)}
[data-theme="light"] #art-lightbox-overlay .alb-rail select{background-color:#fff!important;border-color:rgba(0,0,0,.12)!important;color:#374151!important}
#art-lightbox-overlay .alb-rail-foot{flex-shrink:0;display:flex;gap:.45rem;align-items:center;padding:.75rem 1.15rem;border-top:1px solid var(--border);background:var(--bg2)}
@media(max-width:860px){
#art-lightbox-overlay{flex-direction:column}
#art-lightbox-overlay .alb-stage{width:100%;min-height:0;flex:1}
#art-lightbox-overlay .alb-imgwrap{padding:46px 18px 14px}
#art-lightbox-overlay .alb-img{max-height:46vh}
#art-lightbox-overlay .alb-rail{width:100%;height:auto;max-height:52vh;border-left:none;border-top:1px solid var(--border)}
}
.art-folder-item{display:flex;align-items:center;gap:.45rem;padding:.42rem .6rem;border-radius:var(--rs);cursor:pointer;font-size:.88rem;color:var(--text2);transition:all .15s;border:1px solid transparent}
.art-folder-item:hover{background:var(--bg3);color:var(--text);border-color:var(--border2)}
.art-folder-item:hover .art-folder-del{opacity:.5!important}
.art-folder-item.active{background:var(--teal-dim);color:var(--teal);border-color:transparent;font-weight:600}
.art-folder-icon{font-size:.85rem;flex-shrink:0;line-height:1}
.art-folder-count{font-family:var(--dm);font-size:.66rem;font-weight:700;padding:1px 6px;border-radius:20px;background:var(--bg3);border:1px solid var(--border2);color:var(--text2);flex-shrink:0;min-width:18px;text-align:center}
.art-folder-item.active .art-folder-count{background:rgba(51,209,204,.15);border-color:rgba(51,209,204,.3);color:var(--teal)}
/* Grid */
.art-grid{display:grid;grid-template-columns:repeat(5,minmax(0,210px));justify-content:start;gap:.9rem}
/* Card */
.art-card{position:relative;background:transparent;border:none;border-radius:0;overflow:visible;cursor:grab;transition:transform .15s;display:flex;flex-direction:column}
.art-card.dragging{opacity:.5;cursor:grabbing}
.art-folder-card.drag-over{border:2px solid var(--teal)!important;background:rgba(51,209,204,.08)}
.art-card:hover{transform:translateY(-2px)}
.art-card:hover .art-card-thumb{border-color:var(--teal)}
.art-card-thumb{position:relative;aspect-ratio:1;background:var(--bg4);border:1px solid var(--border);border-radius:6px;overflow:hidden;flex-shrink:0;transition:border-color .12s}
/* Art Library page keeps a less-square 4:3 thumbnail; the 1:1 default is for
the lead-detail art cards. */
#pg-artlib .art-card-thumb{aspect-ratio:4/3}
.art-card-img{width:100%;height:100%;object-fit:contain;display:block}
.art-card-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.art-card-ext{font-family:var(--dm);font-size:1.3rem;font-weight:800;letter-spacing:.05em}
.art-card-sbadge{position:absolute;top:.38rem;right:.38rem;font-family:var(--dm);font-size:.62rem;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:20px;text-transform:uppercase;backdrop-filter:blur(4px);cursor:pointer;transition:transform .1s,opacity .1s}
.art-card-sbadge:hover{transform:scale(1.08);opacity:.85}
.art-card-overlay{position:absolute;inset:0;background:rgba(0,0,0,.42);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.art-card:hover .art-card-overlay{opacity:1}
.art-card-body{padding:.5rem .15rem .55rem;flex:1;display:flex;flex-direction:column;min-width:0}
.art-card-name{font-size:.88rem;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3;margin-bottom:.1rem}
.art-card-client{font-family:var(--dm);font-size:.63rem;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.2rem}
.art-card-footer{display:flex;justify-content:space-between;align-items:center;font-family:var(--dm);font-size:.66rem;color:var(--text2);margin-top:auto;padding-top:.15rem}
.art-card-po{color:var(--teal);font-weight:700}
.art-card-tags{display:flex;flex-wrap:wrap;gap:.18rem;margin-top:.25rem}
/* Mini stats */
.art-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:.45rem .75rem;min-width:90px}
.art-stat-v{font-family:var(--dm);font-size:1.15rem;font-weight:700;color:var(--text);line-height:1.2}
.art-stat-l{font-family:var(--dm);font-size:.66rem;color:var(--text2);text-transform:uppercase;letter-spacing:.07em}
/* Bulk select mode */
.art-bulk-bar{position:fixed;bottom:0;left:0;right:0;z-index:100;background:#1a1a1a;border-top:2px solid var(--teal);padding:.6rem 1.5rem;display:flex;align-items:center;gap:.75rem;box-shadow:0 -4px 20px rgba(0,0,0,.5);animation:fadeUp .2s ease}
[data-theme="light"] .art-bulk-bar{background:#ffffff}
.art-bulk-bar .bulk-count{font-family:var(--dm);font-size:.75rem;color:var(--teal);font-weight:700;letter-spacing:.04em}
.art-bulk-bar button{font-family:var(--dm);font-size:13px;padding:9px 14px;border-radius:var(--r);cursor:pointer;border:1px solid var(--border);background:var(--bg3);color:var(--text);transition:all .15s}
.art-bulk-bar button:hover{border-color:var(--teal);background:var(--teal-dim)}
.art-bulk-bar .bulk-del{color:var(--red);border-color:rgba(192,70,26,.3)}
.art-bulk-bar .bulk-del:hover{background:rgba(192,70,26,.12)}
.art-bulk-bar .bulk-done{color:var(--teal);border-color:rgba(51,209,204,.35)}
.art-bulk-bar .bulk-done:hover{background:var(--teal-dim)}
/* Bulk bar groups: selection controls (left) + a spacer + the file actions
(right). Each group wraps as a unit so related buttons stay together. */
.art-bulk-bar .bulk-grp{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.art-bulk-bar .bulk-spacer{flex:1}
.art-card.bulk-selected{border-color:var(--teal);box-shadow:0 0 0 2px rgba(51,209,204,.25)}
.art-card .bulk-check{position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:4px;background:rgba(0,0,0,.5);border:1.5px solid rgba(255,255,255,.3);display:none;align-items:center;justify-content:center;z-index:5;cursor:pointer;color:#fff;font-size:14px}
.art-bulk-mode .art-card .bulk-check{display:flex}
.art-card.bulk-selected .bulk-check{background:var(--teal);border-color:var(--teal)}
/* Folder cards (top-level view) */
.art-folder-grid{display:grid;grid-template-columns:repeat(5,minmax(0,210px));justify-content:start;gap:.9rem}
.art-folder-card{cursor:pointer;transition:transform .15s;display:flex;flex-direction:column;position:relative;overflow:visible!important;min-width:0;margin-top:11px}
/* Folder tab — sits above the thumbnail's top-left so the preview reads as a folder */
.art-folder-card::before{content:"";position:absolute;top:-12px;left:0;width:44%;height:11px;background:var(--bg4);border:1px solid var(--border);border-bottom:none;border-radius:5px 5px 0 0;transition:background .12s,border-color .12s;pointer-events:none;z-index:1}
.art-folder-card:hover{transform:translateY(-2px)}
.art-folder-card:hover::before,.art-folder-card:hover .art-folder-card-thumb{border-color:var(--teal)}
.art-folder-card:hover .art-folder-del-btn{opacity:1!important}
.art-folder-card-thumb{aspect-ratio:4/3;background:var(--bg4);border:1px solid var(--border);border-radius:0 6px 6px 6px;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;transition:border-color .12s}
.art-folder-card-body{padding:.58rem .7rem .65rem;display:flex;flex-direction:column;gap:.18rem}
.art-folder-card-name{font-size:.95rem;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-folder-card-meta{font-family:var(--dm);font-size:.63rem;color:var(--text2);display:flex;justify-content:space-between;align-items:center}
/* Art Library nav sidebar */
.art-nav-sidebar{width:260px;flex-shrink:0;display:flex;flex-direction:column;gap:0}
/* Folders drawer toggle — hidden on desktop, shown via @media below */
.art-nav-toggle{display:none}
#art-nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:349}
#art-nav-overlay.on{display:block}
.art-nav-card{background:transparent;border:none;border-radius:0;padding:0;overflow:visible}
.art-nav-search{width:100%;background:var(--bg3);border:1px solid var(--border2);color:var(--text);font-family:var(--fb);font-size:.82rem;padding:5px 9px;border-radius:var(--rs);outline:none;margin-bottom:.45rem;box-sizing:border-box;transition:border-color .15s}
.art-nav-search:focus{border-color:var(--teal)}
.art-nav-section{font-family:var(--dm);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);padding:.15rem .4rem .3rem;display:flex;align-items:center;justify-content:space-between}
.art-nav-item{display:flex;align-items:center;gap:.42rem;padding:.38rem .5rem;border-radius:var(--rs);cursor:pointer;color:var(--text2);transition:all .15s;border:1px solid transparent;font-size:.88rem;user-select:none}
.art-nav-item:hover{background:var(--bg3);color:var(--text);border-color:var(--border2)}
.art-nav-item.active{background:var(--teal-dim);color:var(--teal);border-color:transparent;font-weight:600}
.art-nav-item.active .art-folder-count{background:rgba(51,209,204,.15);border-color:rgba(51,209,204,.3);color:var(--teal)}
.art-nav-divider{height:1px;background:var(--border2);margin:.5rem 0}
.art-filter-bar{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.65rem}
.art-filter-pill{font-family:var(--dm);font-size:.68rem;padding:3px 10px;border-radius:99px;border:1px solid var(--border);background:var(--card2);color:var(--text2);cursor:pointer;transition:all .12s}
.art-filter-pill.active{border-color:var(--teal);background:var(--teal-dim);color:var(--teal)}
/* ── PRODUCTION SPEC SHEET ──
Printable cheat-sheet the press operator takes to the machine. One page
per method. Dark-text-on-white is enforced with -webkit-text-fill-color
(Safari overrides plain `color`) — same trick the proof doc at line ~996
uses so invoices/proofs print correctly on iOS. */
#pg-specs{background:var(--bg);overflow-y:auto}
.specs-doc{max-width:780px;margin:1rem auto 3rem;padding:0 1rem}
.specs-page{background:#fff!important;color:#0f172a!important;-webkit-text-fill-color:#0f172a!important;border-radius:8px;padding:2rem 2.25rem;margin-bottom:1.5rem;font-family:'DM Sans',sans-serif;box-shadow:var(--shadow);box-sizing:border-box;page-break-after:always}
/* Blanket dark-text cascade — every descendant inherits #0f172a via
-webkit-text-fill-color. Specific colored elements override below. */
.specs-page,.specs-page div,.specs-page span,.specs-page p,.specs-page td,.specs-page th,.specs-page b,.specs-page strong,.specs-page i,.specs-page em{color:#0f172a!important;-webkit-text-fill-color:#0f172a!important}
.specs-page:last-child{page-break-after:auto}
.specs-hdr{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:.9rem;margin-bottom:1rem;border-bottom:2px solid #0f172a}
/* ── SPEC SHEET TYPE HIERARCHY ──────────────────────────────────────────
Title 1.15/800 · Heading .95/700 · Subhead .8/700 · Value .8-.82
· Body .74 · Caption .66 · Eyebrow(UC labels) .6/700 */
.specs-page .specs-brand{font-family:'DM Sans',sans-serif!important;font-weight:400!important;font-size:.66rem!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:#64748b!important;-webkit-text-fill-color:#64748b!important}
.specs-page .specs-sub{font-family:'DM Sans',sans-serif!important;font-weight:700!important;font-size:.95rem!important;letter-spacing:.03em!important;text-transform:uppercase!important;color:#0f172a!important;-webkit-text-fill-color:#0f172a!important;margin-top:2px}
.specs-page .specs-method{font-family:'DM Sans',sans-serif!important;font-weight:800!important;font-size:1.15rem!important;letter-spacing:.02em!important;text-transform:uppercase!important;color:#1f7a72!important;-webkit-text-fill-color:#1f7a72!important;line-height:1;text-align:right}
.specs-page .specs-method-sub{font-family:'DM Sans',sans-serif!important;font-size:.66rem!important;color:#64748b!important;-webkit-text-fill-color:#64748b!important;text-transform:uppercase;letter-spacing:.08em;margin-top:3px;text-align:right}
.specs-page .specs-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1rem;padding:.75rem;background:#f8fafc!important;border:1px solid #e2e8f0;border-radius:6px}
.specs-page .specs-meta-lbl{font-family:'DM Sans',sans-serif!important;font-size:.6rem!important;text-transform:uppercase!important;letter-spacing:.08em!important;color:#475569!important;-webkit-text-fill-color:#475569!important;margin-bottom:3px;font-weight:600!important}
.specs-page .specs-meta-val{font-family:'DM Sans',sans-serif!important;font-weight:600!important;font-size:.8rem!important;color:#0f172a!important;-webkit-text-fill-color:#0f172a!important}
.specs-page .specs-rush{display:inline-block;font-family:'DM Sans',sans-serif!important;font-size:.6rem!important;font-weight:700!important;color:#b45309!important;-webkit-text-fill-color:#b45309!important;background:#fef3c7!important;border:1px solid #e4ad32;padding:2px 7px;border-radius:3px;letter-spacing:.08em;margin-left:6px}
.specs-page .specs-section{margin-bottom:1.1rem}
.specs-page .specs-section-hdr{font-family:'DM Sans',sans-serif!important;font-size:.6rem!important;text-transform:uppercase!important;letter-spacing:.1em!important;color:#1f7a72!important;-webkit-text-fill-color:#1f7a72!important;margin-bottom:.4rem;padding-bottom:3px;border-bottom:1px solid #e2e8f0;font-weight:700!important}
.specs-page .specs-table{width:100%;border-collapse:collapse;font-size:.74rem!important}
.specs-page .specs-table th{text-align:left;padding:7px 10px;font-family:'DM Sans',sans-serif!important;font-size:.6rem!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:#475569!important;-webkit-text-fill-color:#475569!important;background:#f1f5f9!important;border-bottom:1px solid #cbd5e1;font-weight:700!important}
.specs-page .specs-table td{padding:8px 10px;border-bottom:1px solid #e2e8f0;font-size:.74rem!important}
.specs-page .specs-table tr:last-child td{border-bottom:none}
.specs-page .specs-loc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.specs-page .specs-loc-card{background:#f8fafc!important;border:1px solid #cbd5e1;border-radius:5px;padding:.6rem .75rem}
.specs-page .specs-loc-name{font-family:'DM Sans',sans-serif!important;font-weight:700!important;font-size:.8rem!important;letter-spacing:.03em!important;text-transform:uppercase!important;color:#1f7a72!important;-webkit-text-fill-color:#1f7a72!important;margin-bottom:4px}
.specs-page .specs-loc-row{font-family:'DM Sans',sans-serif!important;font-size:.74rem!important;color:#334155!important;-webkit-text-fill-color:#334155!important;line-height:1.55}
.specs-page .specs-mockup{max-width:260px;max-height:260px;border:1px solid #cbd5e1;border-radius:5px;background:#fff;padding:6px;display:block}
.specs-loc-mock{width:100%;max-height:200px;object-fit:contain;background:#fff!important;border:1px solid #e2e8f0;border-radius:4px;padding:4px;margin-bottom:6px;display:block}
/* per-garment spec block: preview → count & stage → print locations */
.specs-page .gblk{border:1px solid #cbd5e1;border-radius:6px;padding:.9rem 1rem;margin-bottom:.9rem;background:#fff}
.specs-page .gblk-head{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:.6rem;margin-bottom:.7rem;border-bottom:2px solid #0f172a}
.specs-page .gblk-name{font-family:'DM Sans',sans-serif!important;font-weight:700!important;font-size:.95rem!important;letter-spacing:.02em!important;text-transform:uppercase!important;color:#0f172a!important;-webkit-text-fill-color:#0f172a!important}
.specs-page .gblk-sub{font-size:.66rem!important;color:#64748b!important;-webkit-text-fill-color:#64748b!important;font-weight:400;margin-left:.45rem}
.specs-page .gblk-tot{font-family:'DM Sans',sans-serif!important;font-size:.8rem!important;color:#475569!important;-webkit-text-fill-color:#475569!important;font-weight:700}
.specs-page .blk-lbl{font-family:'DM Sans',sans-serif!important;font-size:.6rem!important;text-transform:uppercase!important;letter-spacing:.1em!important;color:#1f7a72!important;-webkit-text-fill-color:#1f7a72!important;font-weight:700!important;margin:.2rem 0 .5rem}
.specs-page .gprev{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.9rem}
.specs-page .gprev-cell{border:1px solid #cbd5e1;border-radius:5px;background:#fff;padding:.4rem;text-align:center}
.specs-page .gprev-img{width:100%;height:215px;object-fit:contain;background:#fff!important;display:block;margin-bottom:4px}
.specs-page .gprev-lbl{font-family:'DM Sans',sans-serif!important;font-weight:700!important;font-size:.6rem!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:#475569!important;-webkit-text-fill-color:#475569!important}
.specs-page .sg{display:grid;gap:.4rem;margin-bottom:.9rem}
.specs-page .sg-cell{border:1px solid #cbd5e1;border-radius:5px;padding:.5rem .35rem;text-align:center;background:#f8fafc}
.specs-page .sg-chk{width:15px;height:15px;border:1.6px solid #64748b;border-radius:3px;display:inline-block;margin-bottom:5px}
.specs-page .sg-sz{font-family:'DM Sans',sans-serif!important;font-weight:700!important;font-size:.66rem!important;letter-spacing:.05em!important;text-transform:uppercase!important;color:#1f7a72!important;-webkit-text-fill-color:#1f7a72!important}
.specs-page .sg-qty{font-family:'DM Sans',sans-serif!important;font-weight:700!important;font-size:.82rem!important;line-height:1.1;color:#0f172a!important;-webkit-text-fill-color:#0f172a!important}
.specs-page .locgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.specs-page .loccard{border:1px solid #cbd5e1;border-radius:5px;padding:.45rem;background:#f8fafc}
.specs-page .locimg{width:100%;height:120px;object-fit:contain;background:#fff!important;border:1px solid #e2e8f0;border-radius:4px;margin-bottom:5px;display:block}
.specs-page .locname{font-family:'DM Sans',sans-serif!important;font-weight:700!important;font-size:.8rem!important;letter-spacing:.02em!important;text-transform:uppercase!important;color:#1f7a72!important;-webkit-text-fill-color:#1f7a72!important;margin-bottom:2px}
.specs-page .locrow{font-family:'DM Sans',sans-serif!important;font-size:.74rem!important;color:#334155!important;-webkit-text-fill-color:#334155!important;line-height:1.5}
.specs-page .inks{display:flex;flex-wrap:wrap;gap:5px 12px;margin:4px 0 5px}
.specs-page .ink{display:inline-flex;align-items:center;gap:5px;font-family:'DM Sans',sans-serif!important;font-size:.74rem!important;font-weight:700!important;color:#0f172a!important;-webkit-text-fill-color:#0f172a!important}
.specs-page .sw{width:13px;height:13px;border-radius:3px;border:1px solid #94a3b8;flex-shrink:0;display:inline-block}
.specs-page .specs-opchecklist{margin-top:1.2rem;padding-top:.8rem;border-top:1px solid #e2e8f0}
.specs-page .specs-opchecklist-title{font-family:'DM Sans',sans-serif!important;font-size:.6rem!important;text-transform:uppercase!important;letter-spacing:.1em!important;color:#475569!important;-webkit-text-fill-color:#475569!important;margin-bottom:.5rem;font-weight:700!important}
.specs-page .specs-opchecklist-row{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:.74rem!important;color:#1e293b!important;-webkit-text-fill-color:#1e293b!important;font-family:'DM Sans',sans-serif}
.specs-page .specs-opchecklist-box{width:15px;height:15px;border:1.5px solid #64748b;border-radius:2px;flex-shrink:0;background:#fff}
.specs-page .specs-notes{padding:.7rem .85rem;background:#fef9c3!important;border:1px solid #facc15;border-radius:5px;font-size:.82rem!important;color:#713f12!important;-webkit-text-fill-color:#713f12!important;line-height:1.55}
@media print{
body{background:#fff!important}
.sb,.topbar,.topbar-global>.topbar,.specs-toolbar,.sb-item,.sb-toggle,#mob-overlay,#tb-dd-backdrop{display:none!important}
.app,.topbar-global,.page-scroll{height:auto!important;overflow:visible!important;display:block!important}
#pg-specs{overflow:visible!important;background:#fff!important}
.specs-doc{max-width:none!important;margin:0!important;padding:0!important}
.specs-page{box-shadow:none!important;border-radius:0!important;margin:0!important;padding:.6in .7in!important;min-height:9.5in}
@page{size:letter portrait;margin:.3in}
}
/* ── INVOICE DOC ── */
.inv-doc{background:#fff;color:#1a1a1a;border-radius:8px;padding:2rem 2.25rem 2.5rem;font-family:'Helvetica Neue',Helvetica,'Barlow',sans-serif;max-width:680px;width:680px;min-width:680px;margin:0 auto;box-shadow:var(--shadow);box-sizing:border-box}
.inv-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem;padding-bottom:.85rem;border-bottom:1px solid #e5e7eb}
.inv-brand{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:1.25rem;letter-spacing:.08em;text-transform:uppercase;color:#111}
.inv-sub{font-size:.68rem;color:#999;margin-top:2px}
.inv-title{font-family:'Helvetica Neue',Helvetica,sans-serif;font-weight:800;font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:#1f7a72;text-align:right;margin-bottom:2px}
.inv-num{font-family:'Barlow',sans-serif;font-size:.8rem;color:#777;text-align:right;margin-top:2px}
.inv-meta{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.4rem;font-size:.9rem}
.inv-ml{font-family:'Space Mono',monospace;font-size:.67rem;text-transform:uppercase;letter-spacing:.08em;color:#aaa;margin-bottom:.2rem}
.inv-mv{font-weight:600;line-height:1.4}
.inv-table{width:100%;border-collapse:collapse;font-size:.9rem;margin-bottom:1.1rem}
.inv-table th{background:#f4f4f1;font-family:'Space Mono',monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:7px 9px;text-align:left;border:1px solid #e8e8e5}
.inv-totals{width:260px;margin-left:auto;font-size:.82rem;background:#fafafa;border:1px solid #e5e7eb;border-radius:8px;padding:.6rem .85rem}
.inv-tot-row{display:flex;justify-content:space-between;padding:4px 0;color:#555}
.inv-tot-row.grand{border-top:1.5px solid #1f7a72;padding-top:8px;margin-top:6px;font-weight:800;font-size:.95rem;border-bottom:none;color:#111}
.inv-foot{margin-top:.75rem;padding-top:.9rem;border-top:1px solid #eee;font-size:.78rem;color:#999;line-height:1.6}
/* ── INV DOC FIX ── */
.inv-doc textarea{width:100%;background:#f8f9fa;border:1px solid #e5e7eb;border-radius:6px;font-size:.82rem;padding:6px 10px;resize:none;line-height:1.4;font-family:'Helvetica Neue',Helvetica,sans-serif;color:#333}
/* ── INV TABLE ENHANCED ── */
.inv-table td input,.inv-table td select{background:#f8f8f5;border:1px solid #e8e8e5;border-radius:2px;font-size:.86rem;padding:2px 5px;width:100%;outline:none;font-family:'Barlow',sans-serif}
/* ── INVENTORY LINE ITEMS CONTAINED ── */
#inv-items > div{box-sizing:border-box;width:100%}
#inv-items input,#inv-items select{min-width:0;width:100%}
/* ── INVENTORY LABELS ── */
.inv-chk-cell{width:28px;padding:0 4px 0 8px!important;vertical-align:middle}
.inv-chk{width:14px;height:14px;accent-color:var(--teal);cursor:pointer;vertical-align:middle}
.inv-print-btn{background:none;border:none;cursor:pointer;color:var(--text2);padding:3px 5px;border-radius:4px;transition:color .12s,background .12s;flex-shrink:0}
.inv-print-btn:hover{color:var(--teal);background:var(--teal-dim)}
#inv-print-sel{display:none}
#inv-print-sel.has-sel{display:inline-flex}
/* ── INVENTORY BARCODE SCANNER ── */
#inv-scan-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9100;display:flex;align-items:center;justify-content:center;padding:1rem}
#inv-scan-card{background:rgba(28,28,28,.99);border:1px solid rgba(255,255,255,.1);border-radius:18px;width:100%;max-width:400px;overflow:hidden}
.inv-scan-hdr{padding:.9rem 1.1rem .7rem;border-bottom:1px solid rgba(255,255,255,.07)}
.inv-scan-title{font-family:var(--dm);font-size:.95rem;font-weight:700;color:var(--text)}
.inv-scan-sub{font-family:var(--dm);font-size:.65rem;color:var(--text2);margin-top:.15rem}
#inv-scan-vf{width:100%;background:#000;min-height:220px;position:relative}
#inv-scan-vf video{width:100%!important;object-fit:cover}
#inv-scan-vf canvas{position:absolute;top:0;left:0;width:100%!important;height:100%!important}
.inv-scan-aim{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}
.inv-scan-aim-box{width:220px;height:100px;border:2px solid var(--teal);border-radius:8px;box-shadow:0 0 0 2000px rgba(0,0,0,.35)}
.inv-scan-status{padding:.6rem 1.1rem;font-family:var(--dm);font-size:.72rem;color:var(--text2);min-height:2.2rem;display:flex;align-items:center;gap:.5rem;border-bottom:1px solid rgba(255,255,255,.05)}
.inv-scan-status.ok{color:#4caf84}
.inv-scan-status.warn{color:#e0a840}
.inv-scan-status.err{color:#e05050}
.inv-scan-foot{padding:.65rem 1rem;display:flex;gap:.5rem}
/* ── INVENTORY QUICK-ADJUST (QR scan landing) ── */
#inv-qa-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9000;display:flex;align-items:center;justify-content:center;padding:1rem}
#inv-qa-card{background:rgba(37,37,37,.98);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1.5rem 1.75rem;width:100%;max-width:340px;box-shadow:0 24px 64px rgba(0,0,0,.5)}
.inv-qa-name{font-family:var(--dm);font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:.2rem}
.inv-qa-cat{font-family:var(--dm);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:1.25rem}
.inv-qa-lbl{font-family:var(--dm);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);margin-bottom:.6rem}
.inv-qa-stepper{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.inv-qa-btn{width:48px;height:48px;border-radius:10px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-size:1.4rem;font-weight:300;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;flex-shrink:0}
.inv-qa-btn:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-dim)}
.inv-qa-btn:active{transform:scale(.94)}
#inv-qa-qty{width:80px;height:48px;text-align:center;font-family:var(--dm);font-size:1.4rem;font-weight:700;color:var(--text);background:var(--bg2);border:1px solid var(--border);border-radius:10px;outline:none}
.inv-qa-status{font-family:var(--dm);font-size:.72rem;color:var(--text2);margin-bottom:1.5rem}
.inv-qa-status .tag{font-size:.64rem;vertical-align:middle;margin-left:.35rem}
.inv-qa-actions{display:flex;gap:.6rem}
.inv-qa-actions .btn{flex:1;justify-content:center}
[data-theme="light"] #inv-qa-card{background:rgba(255,255,255,.92);border-color:rgba(0,0,0,.06);box-shadow:0 8px 32px rgba(0,0,0,.1)}
/* ── PROOF DOC ── */
#proof-doc{background:#fff;width:680px;max-width:680px;min-width:680px;margin:0 auto;color:#1a1a1a;border:1px solid #e5e7eb;border-radius:10px;font-family:'Helvetica Neue',Helvetica,'Barlow',sans-serif;box-shadow:0 4px 28px rgba(0,0,0,.12);box-sizing:border-box;overflow:hidden}
/* Header (dark) */
.pd-head{background:#0a0e14;padding:18px 24px;display:flex;align-items:center;justify-content:space-between}
.pd-head-logo{width:48px;height:48px;border-radius:8px;background:rgba(255,255,255,.06);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.pd-head-logo img{width:100%;height:100%;object-fit:contain}
.pd-brand{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:15px;font-weight:800;color:#4a9f9b;text-transform:uppercase;letter-spacing:.06em}
.pd-tagline{font-size:10px;color:rgba(255,255,255,.4);margin-top:2px}
.pd-po{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:12px;color:#4a9f9b;font-weight:700;text-align:right}
.pd-dates{font-size:9px;color:rgba(255,255,255,.35);margin-top:3px;text-align:right}
/* Meta bar */
.pd-meta{background:#0a0e14;padding:8px 24px;border-bottom:1px solid rgba(255,255,255,.06);font-size:10px;color:rgba(255,255,255,.4);display:flex;flex-wrap:wrap;gap:4px}
.pd-meta strong{color:#fff;font-weight:600}
/* Banner */
.pd-banner{display:flex;align-items:center;gap:12px;padding:14px 24px;border-bottom:1px solid #e5e7eb}
.pd-bl{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:16px;font-weight:800;text-transform:uppercase;color:#111;letter-spacing:.02em}
.pd-badge{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:8px;font-weight:700;padding:3px 8px;border-radius:4px;background:#0a0e14;color:#4a9f9b;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.pd-disc{font-size:9px;color:#999;line-height:1.4;max-width:280px;margin-left:auto}
/* Garment blocks */
.gbl{border-bottom:1px solid #f0f0f0}
.gbl-hdr{background:#f8f9fa;padding:10px 24px;display:flex;align-items:center;gap:10px;border-bottom:1px solid #e5e7eb;break-inside:avoid;page-break-inside:avoid}
.pd-mock{break-inside:avoid;page-break-inside:avoid}
.pd-sizes{break-inside:avoid;page-break-inside:avoid}
.pd-locs{break-inside:avoid;page-break-inside:avoid}
.gbl-badge{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:8px;font-weight:700;padding:3px 8px;border-radius:4px;background:#0a0e14;color:#4a9f9b;text-transform:uppercase;letter-spacing:.06em}
.gbl-name{font-size:12px;font-weight:600;color:#111}
.gbl-pg{font-size:9px;color:#aaa;margin-left:auto;font-family:'Helvetica Neue',Helvetica,sans-serif}
/* Garment preview */
.pd-mock{padding:18px 24px}
.pd-mock-lbl{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#999;margin-bottom:10px}
.pd-main-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pd-view{display:flex;flex-direction:column;gap:4px}
/* Per-placement proof block — Mockup + Artwork + size + colors, one per location */
.pd-plc{margin-bottom:14px}
.pd-plc:last-child{margin-bottom:0}
.pd-plc-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid #eee}
.pd-plc-name{font-family:var(--dm);font-size:12px;font-weight:700;color:#1a1a1a}
.pd-plc-meta{display:flex;align-items:center;gap:5px;font-family:var(--dm);font-size:10px;color:#888;white-space:nowrap}
.pd-plc-sw{display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.2)}
.pd-plc-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pd-view-lbl{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#999}
.pd-img{width:100%;background:#f5f5f5;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pd-img img{width:100%;height:auto;object-fit:contain;border-radius:8px}
.pd-ph{width:100%;min-height:120px;display:flex;align-items:center;justify-content:center;background:#f5f5f5;border-radius:8px;color:#ccc;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.pd-det{flex:1;min-width:60px;max-width:90px;display:flex;flex-direction:column;align-items:center;gap:3px}
.pd-det-lbl{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:8px;font-weight:600;color:#999;text-transform:uppercase;letter-spacing:.06em;text-align:center}
/* Specs + Locations */
.pd-specs-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:18px 24px;border-top:1px solid #f0f0f0}
.pd-sec-title{font-size:8px;font-weight:700;text-transform:uppercase;color:#111;margin-bottom:8px;font-family:'Helvetica Neue',Helvetica,sans-serif;letter-spacing:.12em}
.sp-row{display:flex;justify-content:space-between;font-size:10px;padding:4px 0;border-bottom:1px solid #f5f5f5;gap:8px}
.sp-row .sl{color:#999}.sp-row .sv{color:#111;font-weight:600;text-align:right;overflow-wrap:anywhere;max-width:65%}
.cm-row{display:flex;align-items:center;gap:3px;margin-top:4px}
.cm-sw{height:10px;width:16px;border-radius:3px;border:1px solid #e0e0e0;flex-shrink:0}
/* Size breakdown */
.pd-sizes{padding:18px 24px;border-top:1px solid #f0f0f0}
.pd-sz-tbl{width:100%;border-collapse:collapse}
.pd-sz-tbl th{background:#f8f9fa;font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:7px 8px;text-align:center;border-bottom:1.5px solid #e0e0e0;color:#888}
.pd-sz-tbl td{padding:7px 8px;border-bottom:1px solid #f0f0f0;text-align:center;font-size:11px;color:#1a1a1a}
.pd-sz-tbl td:first-child{text-align:left;font-weight:600}
#proof-doc .tc{background:#0a0e14!important;color:#fff!important;font-weight:700;border-radius:0 6px 6px 0}
/* Location cards */
.pd-locs{padding:18px 24px;border-top:1px solid #f0f0f0}
.pd-loc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pd-lc{border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}
/* Click-to-edit affordance on the proof builder preview (builder only). */
#proof-doc [data-pbnav]{cursor:pointer;transition:outline-color .1s}
#proof-doc [data-pbnav]:hover{outline:2px solid var(--teal);outline-offset:-2px}
/* Glow flash on the form section a preview click navigates to. */
@keyframes pbNavFlash{0%{box-shadow:0 0 0 2px var(--teal),0 0 14px 3px rgba(38,184,179,.55)}100%{box-shadow:0 0 0 2px rgba(38,184,179,0),0 0 14px 3px rgba(38,184,179,0)}}
.pb-nav-flash{animation:pbNavFlash 1.5s ease-out}
.pd-lc-h{background:#0a0e14;padding:7px 10px;display:flex;align-items:center;justify-content:space-between}
.pd-lc-h span{font-family:'Helvetica Neue',Helvetica,sans-serif;font-size:9px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.06em}
.pd-lc-tag{font-size:7px;font-weight:700;padding:2px 6px;border-radius:3px;background:#4a9f9b;color:#0a0e14;text-transform:uppercase;letter-spacing:.06em}
.pd-lc-b{padding:10px;text-align:center}
.pd-lc-img{width:100%;aspect-ratio:4/3;border-radius:6px;background:#f5f5f5;border:1px solid #e5e7eb;object-fit:contain;margin-bottom:6px}
.pd-lc-ph{width:100%;aspect-ratio:4/3;border-radius:6px;background:#f5f5f5;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;font-size:10px;color:#ccc;text-transform:uppercase;margin-bottom:6px}
.pd-lc-dims{font-size:11px;font-weight:700;color:#111}
.pd-lc-fn{font-size:8px;color:#aaa;word-break:break-all;margin-top:2px}
/* Notes + Footer */
.pd-notes{padding:14px 24px;border-top:1px solid #f0f0f0;font-size:10px;color:#555;line-height:1.6}
.pd-notes strong{color:#111;font-weight:700}
.pd-foot{padding:12px 24px;background:#f8f9fa;border-top:1px solid #e5e7eb}
.pd-disc-txt{font-size:8px;color:#aaa;line-height:1.5;font-style:italic}
/* Force dark text inside proof doc — !important overrides dark theme bleaching */
#proof-doc,#proof-doc div,#proof-doc span,#proof-doc p,#proof-doc td,#proof-doc th,#proof-doc strong,#proof-doc label{color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important}
/* Header bar — force light-on-dark colors */
#proof-doc .pd-head{color:#fff!important}
#proof-doc .pd-head div,#proof-doc .pd-head span{color:#fff!important;-webkit-text-fill-color:#fff!important}
#proof-doc .pd-brand{color:#4a9f9b!important;-webkit-text-fill-color:#4a9f9b!important}
#proof-doc .pd-tagline{color:rgba(255,255,255,.5)!important;-webkit-text-fill-color:rgba(255,255,255,.5)!important}
#proof-doc .pd-po{color:#4a9f9b!important;-webkit-text-fill-color:#4a9f9b!important}
#proof-doc .pd-dates{color:rgba(255,255,255,.45)!important;-webkit-text-fill-color:rgba(255,255,255,.45)!important}
#proof-doc .gbl-badge,#proof-doc .pd-badge{color:#4a9f9b!important;-webkit-text-fill-color:#4a9f9b!important}
#proof-doc .gbl-name{color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important}
#proof-doc .gbl-pg{color:#999!important;-webkit-text-fill-color:#999!important}
#proof-doc .pd-lc-h span{color:#fff!important;-webkit-text-fill-color:#fff!important}
#proof-doc .pd-lc-tag{color:#0a0e14!important;-webkit-text-fill-color:#0a0e14!important}
#proof-doc .tc{color:#fff!important;-webkit-text-fill-color:#fff!important}
#proof-doc .pd-meta,#proof-doc .pd-meta span{color:rgba(255,255,255,.5)!important;-webkit-text-fill-color:rgba(255,255,255,.5)!important}
#proof-doc .pd-meta strong{color:#fff!important;-webkit-text-fill-color:#fff!important}
#proof-doc .sp-row .sl{color:#888!important;-webkit-text-fill-color:#888!important}
#proof-doc .sp-row .sv{color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important}
#proof-doc .pd-view-lbl,#proof-doc .pd-mock-lbl,#proof-doc .pd-det-lbl,#proof-doc .pd-sec-title{color:#999!important;-webkit-text-fill-color:#999!important}
#proof-doc .pd-lc-dims{color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important}
#proof-doc .pd-lc-fn{color:#999!important;-webkit-text-fill-color:#999!important}
#proof-doc .pd-lc-ph,#proof-doc .pd-ph{color:#ccc!important;-webkit-text-fill-color:#ccc!important}
#proof-doc .pd-disc{color:#888!important;-webkit-text-fill-color:#888!important}
#proof-doc .pd-disc-txt{color:#999!important;-webkit-text-fill-color:#999!important}
#proof-doc .pd-notes,#proof-doc .pd-notes span{color:#666!important;-webkit-text-fill-color:#666!important}
#proof-doc .pd-notes strong{color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important}
#proof-doc .pd-sz-tbl th{color:#666!important;-webkit-text-fill-color:#666!important}
#proof-doc .pd-sz-tbl td{color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important}
#proof-doc .pd-sz-tbl td.tc,#proof-doc .pd-sz-tbl th.tc{color:#fff!important;-webkit-text-fill-color:#fff!important;background:#0a0e14!important;border-radius:0 4px 4px 0}
#proof-doc .pd-bl{color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important}
/* ── PROOF BUILDER LAYOUT ── */
.pb-foot{padding:.65rem .9rem;border-top:1px solid var(--border);flex-shrink:0}
.pb-preview-area{flex:1;min-width:0;min-height:0;overflow-y:auto;padding:1.5rem 1.5rem 2rem;background:var(--bg3);box-sizing:border-box}
/* ── Shared proof builder helpers (panel containers now use .card-item) ── */
.gc-add{width:calc(100% - 40px);margin:8px 20px 0;display:block;padding:10px;background:linear-gradient(135deg,#4ec3bf,#2c8a87);border:none;border-radius:8px;text-align:center;color:#06080c;font-family:var(--dm);font-size:11px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:all .15s;font-weight:700}
.gc-add:hover{background:linear-gradient(135deg,#4abeb9,#1f807c);transform:translateY(-1px)}
/* Upload box (reusable) */
.gc-upload{border-radius:8px;overflow:hidden;border:1px solid var(--border2)}
.gc-upload-hd{padding:6px 10px;display:flex;align-items:center;justify-content:space-between;background:var(--gc-panel-hover);border-bottom:1px solid var(--border)}
.gc-upload-hd-lbl{font-family:var(--dm);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text2)}
.gc-upload-hd-st{font-family:var(--dm);font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.gc-upload-body{padding:10px;display:flex;flex-direction:column;align-items:center;gap:8px}
.gc-upload-ph{width:100%;aspect-ratio:4/3;border-radius:6px;background:rgba(255,255,255,.02);border:1.5px dashed var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:border-color .12s,background .12s}
.gc-upload-ph:hover{border-color:var(--teal);background:rgba(51,209,204,.04)}
.gc-upload-img{width:100%;aspect-ratio:4/3;border-radius:6px;background:rgba(51,209,204,.06);border:1px solid var(--teal-dim);overflow:hidden;display:flex;align-items:center;justify-content:center}
.gc-upload-img img{width:100%;height:100%;object-fit:contain}
.gc-upload-btns{display:flex;gap:6px;width:100%}
.gc-ubtn{flex:1;padding:5px 8px;border-radius:5px;font-family:var(--dm);font-size:11px;cursor:pointer;text-align:center;transition:all .12s}
.gc-ubtn-p{background:var(--teal-dim);color:var(--teal);border:1px solid rgba(51,209,204,.2)}
.gc-ubtn-p:hover{background:rgba(51,209,204,.2)}
.gc-ubtn-s{background:rgba(255,255,255,.04);color:var(--text2);border:1px solid var(--border2)}
.gc-ubtn-s:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-dim)}
.gc-upload-meta{width:100%;display:flex;align-items:center;justify-content:space-between;font-family:var(--dm);font-size:10px}
/* Card body field row spacing — kept for legacy .fr2 layouts inside .card-item-body */
.card-item-body .fr2{margin-bottom:10px}
.card-item-body .fr2:last-of-type{margin-bottom:0}
/* Sizes grid */
.sz-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;text-align:center}
.sz-grid-hd{font-family:var(--dm);font-size:11px;color:var(--text2);padding:2px 0}
.sz-grid input{background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--gc-body);font-family:var(--dm);font-size:13px;width:100%;padding:5px 2px;text-align:center;outline:none;border-radius:6px;transition:border .14s,background .14s}
.sz-grid input:focus{border-color:var(--teal);background:rgba(255,255,255,.06);box-shadow:0 0 0 3px rgba(51,209,204,.1)}
.sz-grid-tot{font-family:var(--dm);font-size:13px;font-weight:500;color:var(--teal);padding:5px 2px;background:var(--teal-dim);border-radius:6px}
/* Location chips — 3-col grid */
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.loc-chip{background:rgba(255,255,255,.02);border:1px solid var(--border2);border-radius:6px;padding:9px 12px;cursor:pointer;transition:all .12s;display:flex;align-items:center;gap:6px;font-family:var(--dm);font-size:12px;color:var(--text2)}
.loc-chip:hover{border-color:var(--border3)}
.loc-chip.on{background:rgba(51,209,204,.25);border-color:transparent;color:var(--teal);font-weight:500}
.loc-chip .loc-chk{width:13px;height:13px;border-radius:3px;border:1.5px solid rgba(255,255,255,.2);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .12s}
.loc-chip.on .loc-chk{background:var(--teal);border-color:var(--teal)}
/* ── Unified card line items — single source of truth for quote / invoice / mockup ── */
.card-item{background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:24px;overflow:hidden}
.card-item-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:transparent;border-bottom:1px solid var(--border)}
.card-item-n{font-family:var(--dm);font-size:14px;font-weight:600;color:#eef1f5;letter-spacing:.04em}
.card-item-body{padding:20px}
/* Section labels above field groups */
.card-label{font-family:var(--dm);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gc-label);margin-bottom:8px}
/* Section dividers — flex pattern with text + line */
.card-divider{display:flex;align-items:center;gap:12px;margin:28px 0 16px}
.card-divider-text{font-family:var(--dm);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)!important;white-space:nowrap}
.card-divider-line{flex:1;height:1px;background:var(--border)}
/* Settings section hero — icon + title + one-line description. Replaces the
plain `.card-divider` on settings pages so each section reads like a
chapter opener instead of a horizontal rule. The hero is clickable and
toggles the wrapped `.ss-section-body` via `.ss-section.collapsed`. */
.ss-section{margin-top:8px}
.settings-section-hero{display:flex;align-items:center;gap:.9rem;margin:34px 0 18px;padding:0 0 14px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
.ss-section:first-child .settings-section-hero{margin-top:8px}
.ssh-icon{width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(51,209,204,.08);border:1px solid rgba(51,209,204,.22);color:var(--teal);flex-shrink:0;transition:background .15s,border-color .15s}
.ssh-icon svg{width:20px;height:20px}
.settings-section-hero:hover .ssh-icon{background:rgba(51,209,204,.14);border-color:rgba(51,209,204,.35)}
.ssh-title-wrap{flex:1;min-width:0}
.ssh-title{font-family:var(--dm);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--text);line-height:1.2}
.ssh-desc{font-family:var(--dm);font-size:12.5px;color:var(--text2);margin-top:3px;line-height:1.4;max-width:560px}
.ssh-chevron{display:flex;align-items:center;justify-content:center;width:26px;height:26px;color:var(--text2);transition:transform .2s ease,color .15s;flex-shrink:0}
.ssh-chevron svg{width:14px;height:14px}
.settings-section-hero:hover .ssh-chevron{color:var(--teal)}
.ss-section.collapsed .ssh-chevron{transform:rotate(-90deg)}
.ss-section.collapsed .settings-section-hero{margin-bottom:8px;border-bottom-color:transparent}
.ss-section-body{overflow:hidden}
.ss-section.collapsed .ss-section-body{display:none}
/* Full-screen loading ring — teal spinning circle on dimmed backdrop. Hidden
by default; toggled via `.on` class (_showLoader/_hideLoader). Used during
initial auth + loadShopData. Background-blur gives depth; pointer-events
block interaction while visible. */
#app-loader{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:transparent;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none}
#app-loader.on{display:flex;pointer-events:auto}
/* During boot the #boot-splash already covers the screen; hide the reload overlay
so its CMYK dots don't show through faintly behind the splash's. */
body.auth-pending #app-loader{display:none}
.app-loader-ring{width:52px;height:52px;border-radius:50%;border:3px solid rgba(51,209,204,.18);border-top-color:var(--teal);animation:appLoaderSpin 820ms linear infinite}
@keyframes appLoaderSpin{to{transform:rotate(360deg)}}
[data-theme="light"] #app-loader{background:transparent}
[data-theme="light"] .app-loader-ring{border-color:rgba(38,184,179,.18);border-top-color:#26b8b3}
/* Boot splash — branded full-screen loader shown while body.auth-pending (a
returning logged-in user is booting); fades out the moment auth resolves. */
#boot-splash{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:transparent;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
body.auth-pending #boot-splash{opacity:1;visibility:visible}
/* Pricing settings v2 — accordion polish + input adornments */
.ss-section{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color 180ms ease}
.ss-section:hover{border-color:var(--border2)}
.ss-section:not(.collapsed){border-color:var(--border3)}
.settings-section-hero{display:grid;grid-template-columns:auto 1fr auto auto;gap:16px;align-items:center;padding:16px 20px;cursor:pointer;user-select:none;margin:0;border-bottom:none}
.ssh-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--card2);border:1px solid var(--border2);color:var(--text2);flex-shrink:0;transition:all 180ms ease}
.ssh-icon svg{width:18px;height:18px}
.ss-section[data-ss-section="sp"]:not(.collapsed) .ssh-icon{background:rgba(51,209,204,.1);border-color:rgba(51,209,204,.22);color:var(--teal)}
.ss-section[data-ss-section="dtf"]:not(.collapsed) .ssh-icon{background:rgba(167,139,250,.12);border-color:rgba(167,139,250,.25);color:var(--purple,#a78bfa)}
.ss-section[data-ss-section="dtg"]:not(.collapsed) .ssh-icon{background:rgba(167,139,250,.12);border-color:rgba(167,139,250,.25);color:var(--purple,#a78bfa)}
.ss-section[data-ss-section="garment"]:not(.collapsed) .ssh-icon{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.25);color:var(--amber)}
.ss-section[data-ss-section="artfees"]:not(.collapsed) .ssh-icon{background:rgba(91,141,239,.12);border-color:rgba(91,141,239,.25);color:var(--blue)}
.ss-section[data-ss-section="stickers"]:not(.collapsed) .ssh-icon{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.25);color:var(--green)}
.ss-section[data-ss-section="banners"]:not(.collapsed) .ssh-icon{background:rgba(91,141,239,.12);border-color:rgba(91,141,239,.25);color:var(--blue)}
.ss-section[data-ss-section="cards"]:not(.collapsed) .ssh-icon{background:rgba(167,139,250,.12);border-color:rgba(167,139,250,.25);color:var(--purple,#a78bfa)}
.ss-section[data-ss-section="drinkware"]:not(.collapsed) .ssh-icon{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.25);color:var(--amber)}
.ssh-title-wrap{min-width:0}
.ssh-title{font-family:var(--dm);font-size:16px;font-weight:600;color:var(--text);letter-spacing:-0.01em;margin-bottom:4px}
.ssh-summary{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--dm);font-size:11px;color:var(--text3);letter-spacing:0.04em;margin-top:4px;background:none;border:none;padding:0}
/* Renamed from .stat/.stat-lbl/.stat-val — global .stat rule at app.html:~2525
was leaking card/border/padding into these inline summary chips. */
.ssh-summary .ssh-stat{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;background:none;border:none;padding:0;margin:0;min-height:0;border-radius:0;box-shadow:none}
.ssh-summary .ssh-stat-lbl{color:var(--text4,rgba(255,255,255,.15));text-transform:uppercase;font-size:9px;letter-spacing:0.12em;font-weight:700;font-family:var(--dm)}
.ssh-summary .ssh-stat-val{color:var(--text2);font-weight:700;font-family:var(--dm);font-size:11px}
.ss-section:not(.collapsed) .ssh-summary{display:none}
.ss-section.collapsed .ssh-desc{display:none}
.ssh-desc{font-family:var(--dm);font-size:12px;color:var(--text2);line-height:1.5;max-width:560px;margin-top:0}
.ssh-status{font-family:var(--dm);font-size:10px;letter-spacing:0.1em;color:var(--text3);padding:4px 10px;border-radius:4px;border:1px solid var(--border);background:var(--card2);text-transform:uppercase;font-weight:700;flex-shrink:0}
.ssh-status.configured{color:var(--green);border-color:rgba(34,197,94,.2);background:rgba(34,197,94,.08)}
.ssh-status.default{color:var(--text3)}
.ssh-chevron{width:20px;height:20px;color:var(--text3);transition:transform 180ms ease,color 180ms ease;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.ss-section:not(.collapsed) .ssh-chevron{transform:rotate(180deg);color:var(--text)}
.ss-section.collapsed .ssh-chevron{transform:rotate(0deg)}
.ssh-chevron svg{width:100%;height:100%}
.ss-section-body{border-top:1px solid var(--border);padding:20px;background:rgba(7,10,15,.3)}
/* Compact density overrides for settings pages (shorter cards) */
.ss-panel .card{padding:.85rem 1rem;margin-bottom:1.75rem!important}
.ss-panel .sec{margin-top:0!important;margin-bottom:8px!important;padding-bottom:0!important;border-bottom:none!important}
.ss-panel .sec-desc{margin-bottom:8px}
.ss-panel .field{margin-bottom:10px}
.ss-panel .field:last-child{margin-bottom:0}
.ss-panel .ss-section-body{padding:14px 16px}
.ss-panel .settings-section-hero{padding:12px 16px}
.ss-panel .card-divider{margin:16px 0 10px}
.ss-sec{margin-bottom:22px}
.ss-sec:last-child{margin-bottom:0}
.ss-sec-title{font-family:var(--dm);font-size:10px;color:var(--text2);letter-spacing:0.14em;text-transform:uppercase;font-weight:700}
/* Flat adornment — $ sits outside the input as muted text (matches the DTF
matrix pattern). Input keeps its own native .field border/background; the
wrapper is just a layout shell. Labels in fields that use an .input-wrap
get a small left indent so the label sits over the INPUT, not the $. */
.input-wrap{display:flex;align-items:stretch;min-width:0;width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:var(--rs);transition:border-color .12s,box-shadow .12s;overflow:hidden}
.input-wrap:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(51,209,204,.1)}
.input-wrap .adorn{font-family:var(--dm);font-size:13px;font-weight:700;color:var(--teal);flex-shrink:0;padding:0 4px 0 10px;display:flex;align-items:center;background:transparent;line-height:1;user-select:none}
.input-wrap input{flex:1 1 0!important;min-width:0!important;width:auto!important;background:transparent!important;border:none!important;border-radius:0!important;padding:10px 12px 10px 6px!important;outline:none!important}
.input-wrap .suffix{font-family:var(--dm);font-size:11px;font-weight:600;color:var(--text2);flex-shrink:0;padding:0 10px 0 4px;display:flex;align-items:center;background:transparent;letter-spacing:0.03em;text-transform:uppercase;white-space:nowrap;user-select:none}
.field:has(.input-wrap .adorn) > label{padding-left:0}
/* Markup tier example captions — reserve 2 lines of space so a wrapping
example ("Bella+Canvas") doesn't raise Tier 3's input above the others. */
#pg-settings-pricing .ss-tier-ex{min-height:2.4em;line-height:1.35}
/* Pill-container filter tabs — applied across Leads, Order Tracker, Activity,
To-Do, Deal Pipeline, Inventory, Expenses, and the Analytics/P&L/Revenue
period pickers. Replaces the separate-pill look with a single bordered box
that holds rounded tabs with teal (or red/amber/green) tinted active state. */
#lead-filter,#order-pill,#act-pill,#task-filter,#ful-tabs,#inv-cat-filter,#exp-filter,#pg-deals .pipeline-tabs,#an-range-row,#pl-period-row,#rev-period-row,#cal-filter-tabs,#cal-mode-tabs,#cal-nav-tabs,#cal-nav-tabs-prev,#cal-today-tab,#cal-view-tabs,#cal-tasks-toggle,#lead-view-toggle,#acc-view-toggle,#con-view-toggle,#task-view-toggle,#act-view-toggle,#ful-view-toggle,#cal-options-tabs,#cal-zoom-tabs,#cal-monthmode-tabs{display:inline-flex!important;gap:2px!important;padding:4px!important;background:var(--card)!important;border:1px solid var(--border)!important;border-radius:10px!important;width:fit-content!important;max-width:100%;margin-bottom:20px!important;flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Schedule toolbar: kill the segmented-control bottom margin so Row 1 controls
vertically align with the date title (the 20px margin offset align-items:center). */
#cal-mode-tools .pipeline-tabs,#cal-options-tabs,#pg-schedule #cal-filter-tabs{margin-bottom:0!important}
/* Day/Week/Month sub-toggle: hide unless Calendar is active (beats the shared
boxed-control display:inline-flex!important via id+attr specificity). */
#cal-zoom-tabs[hidden],#cal-monthmode-tabs[hidden],#cal-tasks-wrap[hidden],#cal-showas-grp[hidden]{display:none!important}
#lead-filter .pipeline-tab,#order-pill .pipeline-tab,#act-pill .pipeline-tab,#task-filter .pipeline-tab,#ful-tabs .pipeline-tab,#inv-cat-filter .pipeline-tab,#exp-filter .pipeline-tab,#pg-deals .pipeline-tabs .pipeline-tab,#an-range-row .pipeline-tab,#pl-period-row .pipeline-tab,#rev-period-row .pipeline-tab,#cal-filter-tabs .pipeline-tab,#cal-mode-tabs .pipeline-tab,#cal-nav-tabs .pipeline-tab,#cal-nav-tabs-prev .pipeline-tab,#cal-today-tab .pipeline-tab,#cal-view-tabs .pipeline-tab,#cal-tasks-toggle .pipeline-tab,#lead-view-toggle .pipeline-tab,#acc-view-toggle .pipeline-tab,#con-view-toggle .pipeline-tab,#task-view-toggle .pipeline-tab,#act-view-toggle .pipeline-tab,#ful-view-toggle .pipeline-tab,#cal-options-tabs .pipeline-tab,#cal-zoom-tabs .pipeline-tab,#cal-monthmode-tabs .pipeline-tab{font-family:var(--dm)!important;font-size:13px!important;font-weight:500!important;color:var(--text2)!important;padding:0 12px!important;height:26px!important;line-height:1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:.4rem!important;border-radius:7px!important;cursor:pointer;transition:all 150ms ease;background:transparent!important;border:0!important;letter-spacing:0!important;text-transform:none!important;flex-shrink:0!important;box-sizing:border-box!important}
#cal-filter-tabs .pipeline-tab,#cal-mode-tabs .pipeline-tab,#cal-today-tab .pipeline-tab,#cal-view-tabs .pipeline-tab,#cal-tasks-toggle .pipeline-tab,#cal-options-tabs .pipeline-tab,#cal-zoom-tabs .pipeline-tab,#cal-monthmode-tabs .pipeline-tab{padding:4px 12px!important;font-size:12px!important}
#cal-filter-tabs,#cal-mode-tabs,#cal-today-tab,#cal-view-tabs,#cal-tasks-toggle{padding:3px!important;margin-bottom:0!important}
#lead-filter .pipeline-tab:hover,#order-pill .pipeline-tab:hover,#act-pill .pipeline-tab:hover,#task-filter .pipeline-tab:hover,#inv-cat-filter .pipeline-tab:hover,#exp-filter .pipeline-tab:hover,#pg-deals .pipeline-tabs .pipeline-tab:hover,#an-range-row .pipeline-tab:hover,#pl-period-row .pipeline-tab:hover,#rev-period-row .pipeline-tab:hover,#cal-filter-tabs .pipeline-tab:hover,#cal-mode-tabs .pipeline-tab:hover,#cal-nav-tabs .pipeline-tab:hover,#cal-view-tabs .pipeline-tab:hover,#cal-tasks-toggle .pipeline-tab:hover{color:var(--text)!important;background:var(--card2)!important}
#cal-nav-tabs .pipeline-tab,#cal-nav-tabs-prev .pipeline-tab{padding:4px 9px!important;font-size:14px!important;line-height:1!important;appearance:none!important;-webkit-appearance:none!important;outline:none!important;box-shadow:none!important}
#cal-nav-tabs .pipeline-tab:focus,#cal-nav-tabs-prev .pipeline-tab:focus,#cal-nav-tabs .pipeline-tab:focus-visible,#cal-nav-tabs-prev .pipeline-tab:focus-visible,#cal-nav-tabs .pipeline-tab:active,#cal-nav-tabs-prev .pipeline-tab:active{outline:none!important;box-shadow:none!important;background:transparent!important}
#lead-filter .pipeline-tab.active,#order-pill .pipeline-tab.active,#act-pill .pipeline-tab.active,#task-filter .pipeline-tab.active,#ful-tabs .pipeline-tab.active,#inv-cat-filter .pipeline-tab.active,#exp-filter .pipeline-tab.active,#pg-deals .pipeline-tabs .pipeline-tab.active,#an-range-row .pipeline-tab.active,#pl-period-row .pipeline-tab.active,#rev-period-row .pipeline-tab.active,#cal-filter-tabs .pipeline-tab.active,#cal-mode-tabs .pipeline-tab.active,#cal-nav-tabs .pipeline-tab.active,#cal-view-tabs .pipeline-tab.active,#cal-tasks-toggle .pipeline-tab.active,#lead-view-toggle .pipeline-tab.active,#acc-view-toggle .pipeline-tab.active,#con-view-toggle .pipeline-tab.active,#task-view-toggle .pipeline-tab.active,#act-view-toggle .pipeline-tab.active,#ful-view-toggle .pipeline-tab.active,#cal-zoom-tabs .pipeline-tab.active,#cal-monthmode-tabs .pipeline-tab.active{color:var(--teal)!important;background:rgba(51,209,204,.12)!important;font-weight:600!important}
/* In-row toggle: 32px outer (matches inputs), 26px inner buttons */
.search-row #acc-view-toggle,.search-row #con-view-toggle,.search-row #lead-view-toggle,#act-view-toggle,#task-view-toggle{margin:0 0 0 auto!important;flex-shrink:0!important;height:32px!important;padding:2px!important;box-sizing:border-box!important;align-self:center!important}
/* Activity log + tasks: match the filter pill container to the view-toggle's
32px outer / 2px padding so all three (filter, view toggle, Select) sit
on the same baseline. Override width:fit-content + margin-bottom:20px
from line 1232 so act-pill can shrink to share the row with the view
toggle + Select instead of forcing them onto a new line. */
#act-pill .pipeline-tab,#task-filter .pipeline-tab,#act-bulk-toggle.pipeline-tab,#tsk-bulk-toggle.pipeline-tab{height:26px!important}
#act-bulk-toggle.pipeline-tab,#tsk-bulk-toggle.pipeline-tab{padding:0 14px!important;font-size:13px!important;font-family:var(--dm)!important;border-radius:10px!important;display:inline-flex!important;align-items:center!important;background:var(--card)!important;border:1px solid var(--border)!important;color:var(--text2)!important;line-height:1!important;box-sizing:border-box!important;flex-shrink:0!important;align-self:center!important;height:32px!important}
#act-bulk-toggle.pipeline-tab.active,#tsk-bulk-toggle.pipeline-tab.active{color:var(--teal)!important;background:rgba(51,209,204,.12)!important;border-color:rgba(51,209,204,.3)!important}
.search-row #acc-view-toggle .pipeline-tab,.search-row #con-view-toggle .pipeline-tab,.search-row #lead-view-toggle .pipeline-tab,#act-view-toggle .pipeline-tab{height:26px!important}
/* Color families — preserve red (overdue/lost/followups), amber (due today),
green (complete/ready) within the pill pattern. */
#lead-filter .pipeline-tab.overdue-tab,#lead-filter .pipeline-tab.lost-tab,#order-pill .pipeline-tab.overdue-tab,#order-pill .pipeline-tab.lost-tab,#task-filter .pipeline-tab.overdue-tab,#act-pill .pipeline-tab.overdue-tab,#pg-deals .pipeline-tabs .pipeline-tab.lost-tab,#task-filter .pipeline-tab#af-followups{color:var(--red)!important}
#lead-filter .pipeline-tab.overdue-tab:hover,#lead-filter .pipeline-tab.lost-tab:hover,#order-pill .pipeline-tab.overdue-tab:hover,#order-pill .pipeline-tab.lost-tab:hover,#task-filter .pipeline-tab.overdue-tab:hover,#pg-deals .pipeline-tabs .pipeline-tab.lost-tab:hover,#task-filter .pipeline-tab#af-followups:hover{background:rgba(239,68,68,.08)!important}
#lead-filter .pipeline-tab.overdue-tab.active,#lead-filter .pipeline-tab.lost-tab.active,#order-pill .pipeline-tab.overdue-tab.active,#order-pill .pipeline-tab.lost-tab.active,#task-filter .pipeline-tab.overdue-tab.active,#pg-deals .pipeline-tabs .pipeline-tab.lost-tab.active,#task-filter .pipeline-tab#af-followups.active{color:var(--red)!important;background:rgba(239,68,68,.15)!important}
#task-filter .pipeline-tab#tf-today,#order-pill .pipeline-tab#of-today,#cal-filter-tabs .pipeline-tab#cal-f-rush{color:var(--amber)!important}
#task-filter .pipeline-tab#tf-today:hover,#order-pill .pipeline-tab#of-today:hover,#cal-filter-tabs .pipeline-tab#cal-f-rush:hover{background:rgba(245,158,11,.08)!important}
#task-filter .pipeline-tab#tf-today.active,#order-pill .pipeline-tab#of-today.active,#cal-filter-tabs .pipeline-tab#cal-f-rush.active{color:var(--amber)!important;background:rgba(245,158,11,.15)!important}
#task-filter .pipeline-tab#tf-done,#order-pill .pipeline-tab#of-complete,#order-pill .pipeline-tab#of-delivered,#lead-filter .pipeline-tab#lf-ready{color:var(--green)!important}
#task-filter .pipeline-tab#tf-done:hover,#order-pill .pipeline-tab#of-complete:hover,#order-pill .pipeline-tab#of-delivered:hover,#lead-filter .pipeline-tab#lf-ready:hover{background:rgba(34,197,94,.08)!important}
#task-filter .pipeline-tab#tf-done.active,#order-pill .pipeline-tab#of-complete.active,#order-pill .pipeline-tab#of-delivered.active,#lead-filter .pipeline-tab#lf-ready.active{color:var(--green)!important;background:rgba(34,197,94,.15)!important}
/* Simple teal text button — matches the "+ Add Size / + Add Stock" buttons in
Custom Products. Replaces heavier .btn-g / .btn-sm chrome on Apparel add/reset
actions (DTF matrix + ink rate + tier). */
/* Sticky save bar — fixed at the bottom of the viewport so the user doesn't
have to scroll to save. `position:fixed` beats the overflow-hidden ancestor
issue that breaks `position:sticky` in the topbar-global scroll tree.
Offset by sidebar width on desktop; full-width on mobile (≤768px).
Applied across Pricing, Shop Profile, Documents, Garment Catalog, and
Sales & Pipeline. Only shown when the parent settings page is active
(`.pg.on`) so switching tabs hides the previous page's bar. */
#pg-settings-pricing.on .ss-save-bar,#pg-settings-profile.on .ss-save-bar,#pg-settings-docs.on .ss-save-bar,#pg-settings-garments.on .ss-save-bar,#pg-settings-sales.on .ss-save-bar,#pg-settings-email.on .ss-save-bar,#pg-settings-subscription.on .ss-save-bar,#pg-settings-operations.on .ss-save-bar,#pg-settings-finance.on .ss-save-bar,#pg-settings-quote.on .ss-save-bar,#pg-settings-invoice.on .ss-save-bar,#pg-settings-proof.on .ss-save-bar,#pg-settings-sharing.on .ss-save-bar,#pg-settings-payments.on .ss-save-bar,#pg-settings-gang.on .ss-save-bar,#pg-settings-apparel.on .ss-save-bar,#pg-settings-products.on .ss-save-bar,#pg-settings-markup.on .ss-save-bar{position:fixed;bottom:0;left:calc(var(--sb-w) + 260px);right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px 1.5rem;border-top:1px solid var(--border);background:#171717;box-shadow:0 -8px 24px rgba(0,0,0,.35)}
[data-theme="light"] #pg-settings-pricing.on .ss-save-bar,[data-theme="light"] #pg-settings-profile.on .ss-save-bar,[data-theme="light"] #pg-settings-docs.on .ss-save-bar,[data-theme="light"] #pg-settings-garments.on .ss-save-bar,[data-theme="light"] #pg-settings-sales.on .ss-save-bar,[data-theme="light"] #pg-settings-subscription.on .ss-save-bar,[data-theme="light"] #pg-settings-email.on .ss-save-bar,[data-theme="light"] #pg-settings-finance.on .ss-save-bar,[data-theme="light"] #pg-settings-quote.on .ss-save-bar,[data-theme="light"] #pg-settings-invoice.on .ss-save-bar,[data-theme="light"] #pg-settings-proof.on .ss-save-bar,[data-theme="light"] #pg-settings-sharing.on .ss-save-bar,[data-theme="light"] #pg-settings-payments.on .ss-save-bar,[data-theme="light"] #pg-settings-gang.on .ss-save-bar,[data-theme="light"] #pg-settings-apparel.on .ss-save-bar,[data-theme="light"] #pg-settings-products.on .ss-save-bar,[data-theme="light"] #pg-settings-markup.on .ss-save-bar{background:#f0f0f0;border-top-color:rgba(0,0,0,.08);box-shadow:0 -6px 18px rgba(0,0,0,.08)}
/* Make room at the bottom of each page so the save bar doesn't
permanently cover the last bit of content. */
#pg-settings-pricing .ss-panel,#pg-settings-profile .ss-panel,#pg-settings-docs .ss-panel,#pg-settings-sales .ss-panel,#pg-settings-operations .ss-panel,#pg-settings-finance .ss-panel,#pg-settings-garments,#pg-settings-quote .ss-panel,#pg-settings-invoice .ss-panel,#pg-settings-proof .ss-panel,#pg-settings-sharing .ss-panel,#pg-settings-payments .ss-panel,#pg-settings-gang .ss-panel,#pg-settings-apparel .ss-panel,#pg-settings-products .ss-panel,#pg-settings-markup .ss-panel{padding-bottom:72px}
/* When a save bar has only ONE button, right-align it (no left button to
justify against). Profile / Docs / Sales use single Save button. The
`!important` is needed to beat the page-scoped `space-between` default
on the sibling selector. */
.ss-save-bar.ss-save-bar--right{justify-content:flex-end!important}
.ss-card-footer{display:flex;justify-content:flex-end;align-items:center;gap:.5rem;margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--border)}
.ss-card-footer .ss-dirty-hint{font-family:var(--dm);font-size:.66rem;color:var(--amber);display:none;margin-right:.15rem}
.ss-card-footer .ss-reset-link{margin-right:auto}
.btn.ss-save-clean{opacity:.45;cursor:default!important;filter:grayscale(.5);box-shadow:none!important}
.btn.ss-save-clean:hover{opacity:.45;filter:grayscale(.5)}
/* Mobile — sidebar hidden, so the bar spans full width with
safe-area respect on iPhone home indicator. */
@media (max-width:768px){
#pg-settings-pricing.on .ss-save-bar,#pg-settings-profile.on .ss-save-bar,#pg-settings-docs.on .ss-save-bar,#pg-settings-garments.on .ss-save-bar,#pg-settings-sales.on .ss-save-bar,#pg-settings-email.on .ss-save-bar,#pg-settings-subscription.on .ss-save-bar,#pg-settings-operations.on .ss-save-bar,#pg-settings-finance.on .ss-save-bar,#pg-settings-quote.on .ss-save-bar,#pg-settings-invoice.on .ss-save-bar,#pg-settings-proof.on .ss-save-bar,#pg-settings-sharing.on .ss-save-bar,#pg-settings-payments.on .ss-save-bar,#pg-settings-gang.on .ss-save-bar,#pg-settings-apparel.on .ss-save-bar,#pg-settings-products.on .ss-save-bar,#pg-settings-markup.on .ss-save-bar{left:0;bottom:calc(56px + env(safe-area-inset-bottom));padding-bottom:14px}
}
.ss-teal-link{background:transparent!important;border:none!important;color:var(--teal)!important;cursor:pointer;font-family:var(--dm)!important;font-size:.7rem!important;padding:4px 0!important;font-weight:700!important;letter-spacing:.04em!important;text-transform:none!important;transition:color .12s}
.ss-teal-link:hover{color:#5ae3de!important}
.ss-teal-link.destructive{color:var(--red)!important}
.ss-teal-link.destructive:hover{color:#ef7a7a!important}
#pg-settings-pricing .ss-tabs,#pg-settings-docs .ss-tabs{display:flex;gap:2px;padding:4px;background:var(--card);border:1px solid var(--border);border-radius:10px;width:fit-content;margin-bottom:20px;overflow:visible}
#pg-settings-pricing .ss-tabs .ss-tab,#pg-settings-docs .ss-tabs .ss-tab{font-family:var(--dm)!important;font-size:13px!important;font-weight:500!important;color:var(--text2)!important;padding:9px 18px!important;border-radius:7px!important;cursor:pointer;transition:all 150ms ease;background:transparent!important;border:0!important}
#pg-settings-pricing .ss-tabs .ss-tab:hover,#pg-settings-docs .ss-tabs .ss-tab:hover{color:var(--text)!important;background:var(--card2)!important}
#pg-settings-pricing .ss-tabs .ss-tab.active,#pg-settings-docs .ss-tabs .ss-tab.active{color:var(--teal)!important;background:rgba(51,209,204,.1)!important;font-weight:600!important;border-bottom-color:transparent!important}
@media (max-width:720px){
.settings-section-hero{grid-template-columns:auto 1fr auto;gap:12px;padding:14px 16px}
.ssh-status{display:none}
.ssh-summary{font-size:10px}
}
/* Settings pages — typography swap. Drop mono (--fm) from labels, values, and
section titles on the 8 settings pages only. Modals, builders, and every
non-settings page keep their existing mono DNA. Mono stays on: breadcrumb,
status pills (.ssh-status, .tag), .input-wrap adornment symbols. */
#pg-settings-profile .field label,#pg-settings-docs .field label,#pg-settings-pricing .field label,#pg-settings-sales .field label,#pg-settings-emails .field label,#pg-settings-email .field label,#pg-settings-garments .field label,#pg-settings-subscription .field label,#pg-settings-operations .field label,#pg-settings-finance .field label,#pg-settings-apparel .field label,#pg-settings-products .field label,#pg-settings-markup .field label{font-family:var(--dm)!important;text-transform:none!important;letter-spacing:0!important;font-size:12px!important;font-weight:500!important;color:var(--text)!important}
#pg-settings-profile .sec,#pg-settings-docs .sec,#pg-settings-pricing .sec,#pg-settings-sales .sec,#pg-settings-email .sec,#pg-settings-garments .sec,#pg-settings-subscription .sec,#pg-settings-operations .sec,#pg-settings-finance .sec,#pg-settings-quote .sec,#pg-settings-invoice .sec,#pg-settings-proof .sec,#pg-settings-sharing .sec,#pg-settings-payments .sec,#pg-settings-gang .sec,#pg-settings-apparel .sec,#pg-settings-products .sec,#pg-settings-markup .sec{font-family:var(--dm)!important;text-transform:none!important;letter-spacing:-0.005em!important;font-size:14px!important;font-weight:600!important;color:var(--teal)!important}
#pg-settings-apparel .sec,#pg-settings-products .sec,#pg-settings-markup .sec{font-size:13px!important;font-weight:600!important;color:var(--teal)!important;text-transform:uppercase!important;letter-spacing:.06em!important;font-family:var(--dm)!important;margin-bottom:12px!important}
#pg-settings-profile .sec-desc,#pg-settings-docs .sec-desc,#pg-settings-pricing .sec-desc,#pg-settings-sales .sec-desc,#pg-settings-email .sec-desc,#pg-settings-garments .sec-desc,#pg-settings-subscription .sec-desc,#pg-settings-operations .sec-desc,#pg-settings-finance .sec-desc,#pg-settings-quote .sec-desc,#pg-settings-invoice .sec-desc,#pg-settings-proof .sec-desc,#pg-settings-sharing .sec-desc,#pg-settings-payments .sec-desc,#pg-settings-apparel .sec-desc,#pg-settings-products .sec-desc,#pg-settings-markup .sec-desc{font-family:var(--dm)!important;font-size:12px!important;color:var(--text3)!important}
.ssh-summary{font-family:var(--dm)!important;font-size:12px!important;letter-spacing:0!important}
.ssh-summary .ssh-stat-lbl{font-family:var(--dm)!important;font-size:11px!important;letter-spacing:0!important;text-transform:none!important;font-weight:500!important;color:var(--text2)!important}
.ssh-summary .ssh-stat-val{font-family:var(--dm)!important;font-size:12px!important;letter-spacing:0!important;font-weight:600!important;color:var(--text2)!important}
.ss-sec-title{font-family:var(--dm)!important;font-size:14px!important;letter-spacing:-0.005em!important;text-transform:none!important;font-weight:600!important;color:var(--text)!important}
#pg-settings-profile .field input[type=number],#pg-settings-docs .field input[type=number],#pg-settings-pricing .field input[type=number],#pg-settings-sales .field input[type=number],#pg-settings-email .field input[type=number],#pg-settings-garments .field input[type=number],#pg-settings-subscription .field input[type=number],#pg-settings-operations .field input[type=number],#pg-settings-finance .field input[type=number],#pg-settings-quote .field input[type=number],#pg-settings-invoice .field input[type=number],#pg-settings-proof .field input[type=number],#pg-settings-sharing .field input[type=number],#pg-settings-payments .field input[type=number],#pg-settings-apparel .field input[type=number],#pg-settings-products .field input[type=number],#pg-settings-markup .field input[type=number]{font-family:var(--fb)!important;font-size:14px!important;font-weight:600!important}
/* Pricing cards — tighten vertical density inside the accordion bodies. */
#pg-settings-pricing .ss-section-body{padding:16px}
#pg-settings-pricing .ss-section-body .card{padding:14px 16px!important;margin-bottom:8px!important}
#pg-settings-pricing .ss-section-body .card:last-child{margin-bottom:0!important}
#pg-settings-pricing .ss-section-body .sec{margin-top:0!important;margin-bottom:10px!important;padding-bottom:6px!important}
#pg-settings-pricing .ss-section-body .sec-desc{margin-top:-4px!important;margin-bottom:10px!important;line-height:1.4!important}
/* Fields inside a grid row get spacing from the grid's `gap` — margin on
individual .field elements would offset them inside their cells and (with
align-items:end) push non-last fields up while the last field sits at the
cell bottom, creating a "last field is low" misalignment. */
#pg-settings-pricing .ss-section-body .field{margin-bottom:0!important}
#pg-settings-pricing .ss-section-body .fr2,#pg-settings-pricing .ss-section-body .fr3{margin-bottom:10px}
#pg-settings-pricing .ss-section-body .fr2:last-child,#pg-settings-pricing .ss-section-body .fr3:last-child{margin-bottom:0!important}
/* Location Add-On Rates — 3 per row (matches the Fees card's .fr3 row count so
both cards render at equal height in the 2-col wrapper). Drops to 2-col on mobile. */
#pg-settings-pricing .ss-loc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem .6rem;align-items:end;margin-bottom:0}
#pg-settings-pricing .ss-loc-grid .field{margin-bottom:0!important;min-width:0}
#pg-settings-pricing .ss-loc-grid .input-wrap{width:100%}
/* Inline 2-col card rows (Fees+LocRates, DTG+ArtFee, Markup+SizeUpcharge) —
`align-items:start` lets each card size to its own content. Cards that are
naturally close in height still look matched; cards that differ a lot
(Markup Tiers is dense, Size Upcharges is just 4 inputs) stay compact
instead of stretching the short card to match a much taller sibling. */
#pg-settings-pricing .ss-section-body > div[style*="grid-template-columns"]{margin-bottom:8px;align-items:start}
/* Screen Print's Fees + Location Add-On Rates pair IS intended to match —
Location is structured as 2 rows to mirror Fees' row count, so stretch
aligns them cleanly. */
#pg-settings-pricing .ss-section[data-ss-section="sp"] .ss-section-body > div[style*="grid-template-columns"]{align-items:stretch}
/* Force inline repeat(N,1fr) grids to use minmax(0,1fr) so cells shrink below
their content's intrinsic width — otherwise the longest label (e.g.
"Screen Print Min (pcs)") makes its column wider than the others. Also
handles the longhand "1fr 1fr 1fr" form used in the Drinkware card wrapper. */
#pg-settings-pricing .ss-section-body div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
#pg-settings-pricing .ss-section-body div[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#pg-settings-pricing .ss-section-body div[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#pg-settings-pricing .ss-section-body div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#pg-settings-pricing .ss-section-body .fr3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#pg-settings-pricing .ss-section-body .fr2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#pg-settings-pricing .ss-section-body .field{min-width:0}
#pg-settings-pricing .ss-section-body .field input,#pg-settings-pricing .ss-section-body .field select{width:100%!important;box-sizing:border-box}
/* Pin all field grids to the bottom of their cells so the INPUTS line up on
one row regardless of how many lines each .field's label (or caption) wraps
to. This way "Tier 3 — Premium" (short) and "Tier 2 — Mid" (wraps)
still show their input at the same Y-position. */
#pg-settings-pricing .ss-section-body .card > div[style*="display:grid"],#pg-settings-pricing .ss-section-body .card > .fr2,#pg-settings-pricing .ss-section-body .card > .fr3,#pg-settings-pricing .ss-section-body .card .ss-loc-grid{align-items:end!important}
/* Pricing-specific accordion styles — shared by apparel/products/markup pages */
.ss-method-jumper{display:none;position:fixed;top:calc(62px + var(--banner-h, 0px));left:calc(var(--sb-w) + 260px);right:0;z-index:14;background:var(--bg);border-bottom:1px solid var(--border);padding:0 1.75rem;gap:0;flex-wrap:wrap;justify-content:flex-start;transition:left .25s ease,top .2s ease}
#pg-settings-apparel.on .ss-method-jumper,#pg-settings-products.on .ss-method-jumper,#pg-settings-markup.on .ss-method-jumper{display:flex}
.ss-section.ss-tab-hidden{display:none!important}
#pg-settings-apparel .settings-section-hero,#pg-settings-products .settings-section-hero,#pg-settings-markup .settings-section-hero{display:none}
#pg-settings-apparel .ss-section,#pg-settings-products .ss-section,#pg-settings-markup .ss-section{background:transparent!important;border:none!important;border-radius:0!important;margin-top:0!important;overflow:visible!important}
#pg-settings-apparel .ss-section-body,#pg-settings-products .ss-section-body,#pg-settings-markup .ss-section-body{display:block!important;background:transparent!important;border-top:none!important;padding:2rem 0 2.5rem!important;overflow:visible!important}
#pg-settings-apparel .ss-panel,#pg-settings-products .ss-panel,#pg-settings-markup .ss-panel{padding-left:3rem!important;padding-right:3rem!important}
.ss-mj-btn{display:flex;align-items:center;gap:.4rem;padding:1.1rem 1.1rem;border-radius:0;border:none;border-bottom:2px solid transparent;background:transparent;font-family:var(--dm);font-size:.8rem;font-weight:500;color:var(--text2);cursor:pointer;transition:color 120ms,border-color 120ms;white-space:nowrap;margin-bottom:-1px}
.ss-mj-btn:hover{color:var(--text);border-bottom-color:var(--border)}
.ss-mj-btn.active{color:var(--mj-color,var(--teal))!important;border-bottom-color:var(--mj-color,var(--teal))!important}
.ss-mj-dot{display:none}
.ss-mj-btn .ss-mj-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
/* ── Upload progress panel ── */
#uprog-panel{position:fixed;bottom:1.5rem;right:1.5rem;width:272px;background:var(--bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 4px 24px rgba(0,0,0,.35);z-index:9998;overflow:hidden;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}
#uprog-panel.on{opacity:1;transform:translateY(0);pointer-events:auto}
.uprog-hd{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-bottom:1px solid var(--border);background:var(--bg4)}
.uprog-hd-icon{font-size:.8rem;color:var(--teal);flex-shrink:0}
.uprog-hd-title{flex:1;font-family:var(--dm);font-size:.72rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uprog-hd-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:1rem;line-height:1;padding:0 0 0 .25rem;flex-shrink:0}
.uprog-hd-close:hover{color:var(--text)}
#uprog-list{max-height:200px;overflow-y:auto;padding:.25rem 0}
.uprog-row{padding:.3rem .75rem .35rem;display:flex;flex-direction:column;gap:.3rem}
.uprog-fname{font-family:var(--dm);font-size:.68rem;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uprog-track{height:3px;background:var(--border2);border-radius:99px;overflow:hidden;position:relative}
.uprog-fill{height:100%;border-radius:99px;background:var(--teal);width:12%;transition:width .25s ease,background .2s}
.uprog-fill.uploading{animation:uprog-grow 4s ease-out forwards}
.uprog-fill.done{width:100%!important;animation:none}
.uprog-fill.error{width:100%!important;animation:none;background:#ef4444}
@keyframes uprog-grow{from{width:12%}to{width:82%}}
.ss-gang-unit-row{display:flex;align-items:center;gap:.35rem;flex-shrink:0}
.ss-gut-lbl{font-family:var(--dm);font-size:.72rem;font-weight:500;color:var(--text2);transition:color .15s;user-select:none}
.ss-tog-sw{position:relative;width:30px;height:17px;cursor:pointer;display:inline-block;flex-shrink:0}
.ss-tog-sw input{opacity:0;width:0;height:0;position:absolute}
.ss-tog-track{position:absolute;inset:0;background:var(--border2);border-radius:99px;transition:background .15s}
.ss-tog-track::after{content:'';position:absolute;width:13px;height:13px;border-radius:50%;background:#fff;top:2px;left:2px;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.ss-tog-sw input:checked+.ss-tog-track{background:var(--teal)}
.ss-tog-sw input:checked+.ss-tog-track::after{left:15px}
.gang-tab-btn{flex:1;background:none;border:none;border-bottom:2px solid transparent;font-family:var(--dm);font-size:.72rem;font-weight:600;color:var(--text2);padding:.35rem 0;cursor:pointer;transition:color .15s,border-color .15s}
.gang-tab-btn.active{color:var(--text);border-bottom-color:var(--teal)}
.gang-tab-btn:hover:not(.active){color:var(--text)}
#gang-drop-zone{border:2px dashed var(--border2);border-radius:10px;padding:2rem .75rem;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}
#gang-drop-zone.drag-over{border-color:var(--teal);background:rgba(74,159,155,.07)}
@media(max-width:768px){.ss-method-jumper{left:0!important}}
.ss-pricing-page .ss-section-body{padding:20px}
.ss-pricing-page .ss-section-body .card{padding:18px 20px!important;margin-bottom:14px!important}
.ss-pricing-page .ss-section-body .card:last-child{margin-bottom:0!important}
.ss-pricing-page .ss-section-body .sec{margin-top:0!important;margin-bottom:12px!important;padding-bottom:6px!important}
.ss-pricing-page .ss-section-body .sec-desc{margin-top:-4px!important;margin-bottom:12px!important;line-height:1.4!important}
.ss-pricing-page .ss-section-body .field{margin-bottom:0!important}
.ss-pricing-page .ss-section-body .fr2,.ss-pricing-page .ss-section-body .fr3{margin-bottom:10px}
.ss-pricing-page .ss-section-body .fr2:last-child,.ss-pricing-page .ss-section-body .fr3:last-child{margin-bottom:0!important}
.ss-pricing-page .ss-loc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem .6rem;align-items:end;margin-bottom:0}
.ss-pricing-page .ss-loc-grid .field{margin-bottom:0!important;min-width:0}
.ss-pricing-page .ss-loc-grid .input-wrap{width:100%}
.ss-pricing-page .ss-section-body > div[style*="grid-template-columns"]{margin-bottom:14px;align-items:start;gap:14px!important}
.ss-pricing-page .ss-section[data-ss-section="sp"] .ss-section-body > div[style*="grid-template-columns"]{align-items:stretch}
.ss-pricing-page .ss-section-body div[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.ss-pricing-page .ss-section-body div[style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.ss-pricing-page .ss-section-body div[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.ss-pricing-page .ss-section-body div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.ss-pricing-page .ss-section-body .fr3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.ss-pricing-page .ss-section-body .fr2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.ss-pricing-page .ss-section-body .field{min-width:0}
.ss-pricing-page .ss-section-body .field input,.ss-pricing-page .ss-section-body .field select{width:100%!important;box-sizing:border-box}
.ss-pricing-page .ss-section-body .card > div[style*="display:grid"],.ss-pricing-page .ss-section-body .card > .fr2,.ss-pricing-page .ss-section-body .card > .fr3,.ss-pricing-page .ss-section-body .card .ss-loc-grid{align-items:end!important}
.ss-pricing-page .ss-tier-ex{min-height:2.4em;line-height:1.35}
.ss-pricing-page .card,.ss-pricing-page .card{transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.ss-pricing-page .card:hover{border-color:var(--border2)!important;box-shadow:0 2px 10px rgba(0,0,0,.18)!important}
/* ── Settings inner nav rail ─────────────────────────────────────────────── */
#ss-rail{position:fixed;left:var(--sb-w);top:calc(62px + var(--banner-h, 0px));bottom:0;width:260px;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:.65rem .5rem .75rem;gap:1px;z-index:11;overflow-y:auto;opacity:0;visibility:hidden;pointer-events:none;transition:left .25s ease,opacity .2s ease,visibility .2s ease}
#ss-rail.on{opacity:1;visibility:visible;pointer-events:auto}
#fin-rail{position:fixed;left:var(--sb-w);top:calc(62px + var(--banner-h, 0px));bottom:0;width:220px;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:.65rem .5rem .75rem;gap:1px;z-index:11;overflow-y:auto;opacity:0;visibility:hidden;pointer-events:none;transition:left .25s ease,opacity .2s ease,visibility .2s ease}
#fin-rail.on{opacity:1;visibility:visible;pointer-events:auto}
#fin-rail .ss-ri{width:100%}
.fin-page{margin-left:0;transition:margin-left .25s ease}
#fin-rail.on ~ .pg.on{padding-left:248px;box-sizing:border-box}
.ss-ri-hd{font-family:var(--dm);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--teal)!important;padding:.5rem .55rem .3rem;text-transform:uppercase}
.ss-ri-group-label{font-family:var(--dm);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--teal)!important;text-transform:uppercase;padding:8px 10px 1px;margin-top:4px}
.ss-ri-group-desc{display:none}
.ss-ri{display:flex;align-items:center;gap:.55rem;padding:.46rem .6rem;border-radius:7px;font-family:var(--dm);font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;width:100%;text-align:left;background:none;border:none;transition:background 110ms,color 110ms;line-height:1.2;text-decoration:none}
.ss-ri:hover{background:var(--card2);color:var(--text)}
.ss-ri.active{background:rgba(51,209,204,.1)!important;color:var(--teal)!important;font-weight:600!important}
.ss-ri svg{width:14px;height:14px;flex-shrink:0;stroke-width:1.7}
.ss-ri-div{height:1px;background:var(--border);margin:.4rem .5rem}
/* Settings pages shift right to make room for the rail */
.pg.ss-page{transition:padding-left .25s ease}
.pg.ss-page.on{padding-left:260px}
/* Mobile: rail becomes a sticky horizontal strip inside the settings page scroll container.
position:fixed doesn't work on iOS Safari when body has overflow:hidden. */
/* Mobile settings overlay */
#ss-mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:399}
#ss-mob-overlay.on{display:block}
#ss-rail-close-btn{display:none;position:absolute;top:.75rem;right:.75rem;background:var(--bg3);border:1px solid var(--border);color:var(--text2);width:36px;height:36px;border-radius:50%;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;z-index:10;flex-shrink:0}
#ss-rail-close-btn:hover{color:var(--teal);border-color:var(--teal)}
@media(max-width:768px){
#ss-rail{
position:fixed!important;
top:0!important;right:0!important;left:auto!important;bottom:0!important;
width:min(88vw,360px)!important;max-width:88vw!important;min-width:0!important;
z-index:400!important;
box-shadow:-10px 0 30px rgba(0,0,0,.5)!important;
transform:translateX(100%);
transition:transform .28s ease, visibility 0s linear .28s!important;
opacity:1!important;visibility:hidden!important;pointer-events:none!important;
display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;
overflow-y:auto!important;overflow-x:hidden!important;
padding:.65rem .5rem!important;
padding-top:calc(3.5rem + max(env(safe-area-inset-top),.5rem))!important;
/* clear the fixed bottom nav (56px) so the last settings items are reachable */
padding-bottom:calc(56px + env(safe-area-inset-bottom) + .5rem)!important;
border-right:none!important;border-radius:0!important;gap:1px!important;
background:var(--sb-bg)!important;
}
#ss-rail.mob-open{transform:translateX(0)!important;visibility:visible!important;pointer-events:auto!important;transition:transform .28s ease, visibility 0s linear 0s!important}
#ss-rail .ss-ri-hd,#ss-rail .ss-ri-group-label,#ss-rail .ss-ri-div{display:initial!important}
#ss-rail .ss-ri{width:100%!important;padding:.75rem 1.5rem .75rem 1.75rem!important;font-size:1rem!important;white-space:normal;flex-shrink:0}
#ss-rail .ss-ri svg{display:inline-block!important;width:1rem;height:1rem;flex-shrink:0}
#ss-rail-close-btn{display:flex!important}
.pg.ss-page.on{padding-left:0!important}
}
/* Accordion auto-expand: pricing sections are always open when rail is present */
#ss-rail.on ~ .content .ss-section.collapsed{border-color:var(--border3)}
#ss-rail.on ~ .content .ss-section.collapsed .ss-section-body{display:block}
#ss-rail.on ~ .content .ss-section.collapsed .settings-section-hero{margin-bottom:0;border-bottom:1px solid var(--border)}
#ss-rail.on ~ .content .ssh-chevron{display:none}
/* Cleaner inner form aesthetic when rail is active */
#ss-rail.on ~ .content .ss-section-body{background:transparent}
#ss-rail.on ~ .content .ss-section{border-radius:10px;margin-bottom:.5rem}
/* Settings form polish — subtle lift on card hover, hover state on inputs,
stronger .sec labels for readability. Scoped to #pg-settings-pricing and
sibling settings pages so it doesn't affect the rest of the app. */
#pg-settings-pricing .card,#pg-settings-profile .card,#pg-settings-docs .card,
#pg-settings-garments .card,#pg-settings-sales .card,#pg-settings-email .card,#pg-settings-operations .card,#pg-settings-finance .card,
#pg-settings-quote .card,#pg-settings-invoice .card,#pg-settings-proof .card,#pg-settings-sharing .card,#pg-settings-payments .card,#pg-settings-gang .card{
transition:border-color .15s ease,box-shadow .15s ease,background .15s ease
}
#pg-settings-pricing .card:hover,#pg-settings-docs .card:hover,
#pg-settings-garments .card:hover,#pg-settings-sales .card:hover,#pg-settings-email .card:hover,#pg-settings-operations .card:hover,#pg-settings-finance .card:hover{
border-color:var(--border2)!important;box-shadow:0 2px 10px rgba(0,0,0,.18)!important
}
.ss-dform .card:hover{border-color:var(--border2)!important}
#pg-settings-pricing .field input:not(:focus):hover,#pg-settings-pricing .field select:not(:focus):hover,
#pg-settings-profile .field input:not(:focus):hover,#pg-settings-docs .field input:not(:focus):hover,
#pg-settings-quote .field input:not(:focus):hover,#pg-settings-invoice .field input:not(:focus):hover,
#pg-settings-proof .field input:not(:focus):hover{
border-color:var(--border2)!important
}
#pg-settings-pricing .sec,#pg-settings-profile .sec,#pg-settings-docs .sec,
#pg-settings-garments .sec,#pg-settings-sales .sec,#pg-settings-email .sec,
#pg-settings-quote .sec,#pg-settings-invoice .sec,#pg-settings-proof .sec,#pg-settings-sharing .sec,#pg-settings-payments .sec{
font-size:12px!important;color:var(--teal)!important;letter-spacing:.08em!important;
padding-bottom:.45rem!important;border-bottom:1px solid var(--border)!important;margin-bottom:14px!important
}
#pg-settings-pricing .sec-desc,#pg-settings-profile .sec-desc,
#pg-settings-quote .sec-desc,#pg-settings-invoice .sec-desc,#pg-settings-proof .sec-desc,#pg-settings-sharing .sec-desc,#pg-settings-payments .sec-desc{
color:var(--text2);font-family:var(--dm);font-size:12.5px;line-height:1.45;margin:-4px 0 12px;max-width:560px
}
/* ── Job template method tabs — underline style ────────────────────────── */
#ss-method-tabs{border-bottom:1px solid var(--border);gap:0!important;margin-bottom:.75rem}
#ss-method-tabs .pipeline-tab{border-radius:0!important;background:transparent!important;border:none!important;border-bottom:2px solid transparent!important;padding:7px 16px!important;margin-bottom:-1px;font-size:13px!important}
#ss-method-tabs .pipeline-tab.active{background:transparent!important;border-bottom-color:var(--teal)!important;color:var(--teal)!important;font-weight:600!important}
/* ── Settings: Option D horizontal row layout ──────────────────────────────
Applied via .ss-dform class on Profile, Docs, Sales, Email pages.
Pricing, Garments, Billing use their own layouts and are excluded. */
.ss-dform .card{padding:0!important;overflow:hidden;transition:border-color .15s ease}
/* Padding for any non-field, non-header content inside D-layout cards */
.ss-dform .card > *:not(.sec):not(.sec-desc):not(.field):not(.fr2):not(.fr3){padding-left:18px!important;padding-right:18px!important}
.ss-dform .card > .sec ~ *:not(.sec):not(.sec-desc):not(.field):not(.fr2):not(.fr3):first-of-type{padding-top:14px!important}
.ss-dform .card > *:not(.sec):not(.sec-desc):not(.field):not(.fr2):not(.fr3):last-child{padding-bottom:14px!important}
/* Bottom padding when last item IS a field */
.ss-dform .card > .field:last-child,.ss-dform .card > .fr2:last-child,.ss-dform .card > .fr3:last-child{padding-bottom:2px}
/* Section header row */
.ss-dform .sec{
padding:13px 18px 12px!important;margin:0!important;
background:rgba(0,0,0,.18)!important;
border-bottom:1px solid var(--border)!important;
font-size:13px!important;font-weight:600!important;
letter-spacing:0!important;color:var(--teal)!important
}
/* Description row */
.ss-dform .sec-desc{
padding:6px 18px 8px!important;margin:0!important;
border-bottom:1px solid var(--border)!important;
font-size:11px!important;line-height:1.5!important;max-width:none!important;
color:var(--text3)!important
}
/* Flatten fr2/fr3 grids into stacked rows */
.ss-dform .fr2,.ss-dform .fr3{display:flex!important;flex-direction:column!important;gap:0!important}
/* Each field = one horizontal row */
.ss-dform .field{
display:flex!important;align-items:stretch!important;flex-wrap:wrap;
margin:0!important;border-bottom:1px solid var(--border);
transition:background 100ms
}
.ss-dform .field:last-child{border-bottom:none!important}
.ss-dform .field:focus-within{background:rgba(51,209,204,.03)!important}
/* Escape hatch — cards with custom/dynamic layouts share the same shell
(header row, border) but opt out of the label→input row treatment. */
.ss-dform .ss-no-dform{padding:0!important;overflow:hidden!important}
/* Header row matches D-layout cards exactly */
.ss-dform .ss-no-dform .sec{
padding:13px 18px 12px!important;margin:0!important;
background:rgba(0,0,0,.18)!important;
border-bottom:1px solid var(--border)!important;
font-size:13px!important;font-weight:600!important;
letter-spacing:0!important;color:var(--text)!important
}
/* Content body gets its own padding beneath the header */
.ss-dform .ss-no-dform .sec ~ *{padding-left:18px;padding-right:18px}
.ss-dform .ss-no-dform .sec ~ *:first-of-type{padding-top:14px}
.ss-dform .ss-no-dform .sec ~ *:last-child{padding-bottom:16px}
/* Description text just below the header */
.ss-dform .ss-no-dform .sec + div,
.ss-dform .ss-no-dform .sec + p{
font-size:11.5px!important;color:var(--text3)!important;
line-height:1.5!important;font-style:normal!important;
padding-top:10px!important;padding-bottom:8px!important;margin:0!important
}
/* Fields inside stay as original stacked layout */
.ss-dform .ss-no-dform .field{display:block!important;margin-bottom:1rem!important;border-bottom:none!important}
.ss-dform .ss-no-dform .field label{width:auto!important;min-width:0!important;border-right:none!important;padding:0 0 6px!important;display:block!important}
.ss-dform .ss-no-dform .field input,.ss-dform .ss-no-dform .field select,.ss-dform .ss-no-dform .field textarea{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:8px!important;padding:10px 12px!important}
/* Label = left column */
.ss-dform .field label{
width:200px!important;min-width:200px!important;flex-shrink:0!important;
padding:12px 14px 12px 18px!important;margin:0!important;
display:flex!important;align-items:center!important;
border-right:1px solid var(--border);
font-size:12px!important;font-weight:500!important;
color:var(--text2)!important;letter-spacing:0!important;
text-transform:none!important;line-height:1.35!important;
transition:color 100ms
}
.ss-dform .field:focus-within label{color:var(--teal)!important}
/* Input/select = right column */
.ss-dform .field input:not([type=file]):not([type=checkbox]):not([type=color]),
.ss-dform .field select{
flex:1!important;min-width:0!important;
background:transparent!important;border:none!important;
border-radius:0!important;padding:12px 18px!important;
font-size:13px!important;color:var(--text)!important;
box-shadow:none!important;outline:none!important
}
.ss-dform .field input:not([type=file]):not([type=checkbox]):not([type=color]):hover,
.ss-dform .field select:hover{background:transparent!important;border:none!important}
.ss-dform .field input:not([type=file]):not([type=checkbox]):not([type=color]):focus,
.ss-dform .field select:focus{background:transparent!important;border:none!important;box-shadow:none!important}
/* Number inputs: compact width */
.ss-dform .field input[type=number]{flex:0 0 auto!important;width:90px!important}
/* Textareas: stack label above, full width — too tall for side-by-side */
.ss-dform .field:has(textarea){flex-direction:column!important;align-items:stretch!important}
.ss-dform .field:has(textarea) label{
width:auto!important;min-width:0!important;border-right:none!important;
padding:12px 18px 6px!important;border-bottom:none!important;
font-size:11px!important;text-transform:uppercase!important;letter-spacing:.06em!important;color:var(--text3)!important
}
.ss-dform .field:has(textarea) textarea{
flex:1!important;background:transparent!important;border:none!important;
border-radius:0!important;padding:6px 18px 12px!important;
font-size:13px!important;color:var(--text)!important;
box-shadow:none!important;outline:none!important;resize:vertical
}
.ss-dform .field:has(textarea):focus-within{background:rgba(51,209,204,.03)!important}
/* Checkboxes: keep inline, just clean up padding */
.ss-dform .field:has(input[type=checkbox]){align-items:center!important;padding:10px 18px!important}
.ss-dform .field:has(input[type=checkbox]) label{
width:auto!important;min-width:0!important;border-right:none!important;
padding:0 0 0 8px!important;order:2
}
.ss-dform .field:has(input[type=checkbox]) input[type=checkbox]{order:1;flex:0 0 auto!important}
/* Helper text wraps full-width, indented under the input column */
.ss-dform .field > div{
flex:0 0 100%;padding:0 18px 10px calc(200px + 18px);
font-size:.65rem!important;color:var(--text2)!important;line-height:1.45!important;margin-top:-4px
}
/* Inputs */
.card-input,.card-select{width:100%;padding:7px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;font-family:var(--dm);font-size:13px;color:var(--text);outline:none}
.card-input:focus,.card-select:focus{border-color:var(--teal);box-shadow:0 0 0 2px rgba(51,209,204,.12)}
/* Selection cards (pick one of N) */
.sel-card{padding:8px 12px;background:var(--bg3);border:2px solid var(--border);border-radius:8px;cursor:pointer;text-align:center;transition:all .15s;font-family:var(--dm);font-size:14px;font-weight:500;color:var(--text)}
.sel-card:hover{border-color:var(--border2)}
.sel-card.on{background:rgba(51,209,204,.25);border-color:transparent;color:var(--teal)}
.sel-card-name{font-family:var(--dm);font-size:12px;font-weight:500;color:var(--text)}
.sel-card.on .sel-card-name{color:var(--teal)}
.sel-card-sub{font-family:var(--fb);font-size:11px;color:var(--text3);margin-top:2px;font-weight:400}
.sel-card.on .sel-card-sub{color:var(--text2)}
.sel-card.on-amber{background:rgba(245,158,11,.06);border-color:var(--amber);color:var(--amber)}
.sel-card.on-amber .sel-card-name{color:var(--amber)}
/* Grid helpers */
.card-grid{display:grid;gap:10px}
.cg-2{grid-template-columns:repeat(2,1fr)}
.cg-3{grid-template-columns:repeat(3,1fr)}
.cg-4{grid-template-columns:repeat(4,1fr)}
.cg-5{grid-template-columns:repeat(5,1fr)}
/* Line total row */
.card-total{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.card-total-info{font-size:13px;color:var(--text2)}
.card-total-sub{font-size:12px;color:var(--text3);margin-top:2px}
.card-total-amt{font-family:var(--fd);font-size:15px;font-weight:700;color:var(--teal)}
/* Shared utility classes for inline card UI */
.card-chip{font-family:var(--dm);font-size:13px;font-weight:500}
.card-body-text{font-family:var(--fb);font-size:14px;font-weight:400;line-height:1.5}
.card-hint{font-family:var(--fb);font-size:12px;color:var(--text3);line-height:1.4}
.size-grid-hd{font-family:var(--dm);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text2)}
.size-grid-input{font-family:var(--dm);font-size:14px;font-weight:600;text-align:center}
.upcharge-lbl{font-family:var(--fb);font-size:11px;color:var(--amber)}
.color-step-btn{font-family:var(--dm);font-size:16px;font-weight:700;line-height:1}
.color-step-num{font-family:var(--dm);font-size:14px;font-weight:600}
/* Location expanded detail */
.loc-detail{margin-top:6px;padding:8px 10px;background:rgba(255,255,255,.02);border-radius:6px;border:1px solid var(--border);display:none}
.loc-detail.show{display:block}
.loc-detail-title{font-family:var(--dm);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.loc-detail .fr2 label{font-size:9px;font-weight:600;color:var(--gc-label);display:block;margin-bottom:3px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--dm)}
.loc-fn{font-family:var(--dm);font-size:11px;color:var(--text3);margin-top:6px;word-break:break-all}
/* Mockup upload boxes */
.mk-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
/* Merged placement cards: one per active location — mockup + artwork + size + colors */
.plc-grid{display:flex;flex-direction:column;gap:.7rem;margin-bottom:12px}
.plc{border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--card2)}
.plc-hd{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border)}
.plc-name{font-size:.84rem;font-weight:600;color:var(--text)}
.plc-rm{font-size:.66rem;color:var(--text3);cursor:pointer}
.plc-rm:hover{color:var(--red,#ef4444)}
.plc-body{padding:11px 12px}
.plc .imgs{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-bottom:.7rem}
.plc .imgcell{min-width:0}
.plc .imgcell-lbl{font-size:.58rem;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.plc .imgbox{height:140px;border-radius:7px;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;overflow:hidden}
.plc .imgbox.mock{background:#f3f3f1}
.plc .imgbox.art{background:repeating-conic-gradient(#d0d0d0 0% 25%,#fff 0% 50%) 0 0/16px 16px;border:1px solid var(--border)}
.plc .imgbox img{max-width:100%;max-height:100%;object-fit:contain}
.plc .imgbox.empty{flex-direction:column;gap:6px;color:var(--text3);background:var(--card);border:1px solid var(--border)}
.plc .imgbox.empty svg{width:24px;height:24px;opacity:.7}
.plc .imgbox.empty span{font-size:.64rem}
.plc .imgbox-x{position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:16px;text-align:center}
.plc .imgcell-foot{margin-top:4px;text-align:center}
.plc .imgcell-foot .lnk{font-size:.66rem;color:var(--teal);cursor:pointer}
.plc-meta{display:grid;grid-template-columns:auto 1fr;gap:.5rem .85rem;align-items:center}
.plc-meta-lbl{font-size:.64rem;color:var(--text2);font-weight:600}
.plc-size{display:flex;align-items:center;gap:.35rem}
.plc-size input{width:60px;background:var(--card);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:var(--dm);font-size:.78rem;padding:5px 8px;text-align:center;outline:none}
.plc-size span{font-size:.68rem;color:var(--text3)}
.plc-colors{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.plc-colors .sw{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.25);cursor:pointer}
.plc-colors .sw-add{position:relative;width:18px;height:18px;border-radius:50%;border:1px solid var(--border3);color:var(--text3);font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.plc-colors .sw-add input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;padding:0;border:none}
.plc-colors .sw-cnt{font-size:.66rem;color:var(--text3)}
/* Detail views */
.dv{cursor:pointer;text-align:center;border-radius:6px;overflow:hidden;border:1px solid var(--border2);background:var(--gc-panel);transition:all .12s}
.dv:hover{border-color:var(--teal)}
.dv-sq{width:64px}.dv-wide{width:120px}
.dv-inner{width:100%;height:64px;display:flex;align-items:center;justify-content:center;position:relative}
.dv-inner img{width:100%;height:100%;object-fit:contain}
.dv-ph{color:var(--text3);font-size:1.2rem}
.dv-lbl{font-family:var(--dm);font-size:9px;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;padding:3px 0 4px;border-top:1px solid var(--border);text-align:center}
.dv-filled{border-color:rgba(51,209,204,.25);background:rgba(51,209,204,.05)}
/* Placement cards */
.pp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pp-card{border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.02);overflow:hidden}
.pp-card-hd{padding:7px 10px;display:flex;align-items:center;justify-content:space-between;background:var(--gc-panel);border-bottom:1px solid var(--border)}
.pp-card-hd-lbl{font-family:var(--dm);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.pp-tag{font-family:var(--dm);font-size:8px;padding:2px 6px;border-radius:3px;background:var(--teal-dim);color:var(--teal);text-transform:uppercase;letter-spacing:.06em}
.pp-body{padding:10px}
.pp-dims{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.pp-dims label{font-size:9px;font-weight:600;color:var(--gc-label);display:block;margin-bottom:3px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--dm)}
.pp-dims input{background:rgba(255,255,255,.04);border:1px solid var(--border2);color:var(--gc-body);font-family:var(--dm);font-size:12px;padding:4px 6px;text-align:center;border-radius:6px;outline:none;width:100%;transition:border .14s}
.pp-dims input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(51,209,204,.1)}
/* Sticker rows */
.stk-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.02);margin-bottom:8px}
.stk-thumb{width:48px;height:48px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.stk-thumb-empty{border:1.5px dashed var(--border2);background:var(--gc-panel);color:var(--text3);font-size:1.1rem;cursor:pointer}
.stk-thumb-filled{border:1px solid rgba(51,209,204,.25);background:rgba(51,209,204,.06)}
.stk-thumb-filled img{width:100%;height:100%;object-fit:contain}
.stk-info{flex:1;min-width:0}
.stk-title{font-family:var(--dm);font-size:12px;font-weight:500;color:var(--text)}
.stk-detail{font-family:var(--dm);font-size:10px;color:var(--text2);margin-top:1px}
.stk-btns{display:flex;gap:4px;flex-shrink:0}
.stk-btn{padding:5px 10px;border-radius:5px;font-family:var(--dm);font-size:10px;cursor:pointer;transition:all .12s}
.stk-btn-p{background:var(--teal-dim);color:var(--teal);border:1px solid rgba(51,209,204,.2)}
.stk-btn-p:hover{background:rgba(51,209,204,.2)}
.stk-btn-s{background:rgba(255,255,255,.04);color:var(--text2);border:1px solid var(--border2)}
.stk-btn-s:hover{border-color:var(--teal);color:var(--teal)}
.stk-exp{padding:10px 12px;border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;margin-top:-8px;margin-bottom:8px;background:rgba(255,255,255,.02)}
.art-row{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:5px 7px;display:flex;align-items:center;gap:.35rem;margin-bottom:.25rem}
.art-row img{width:28px;height:28px;object-fit:cover;border-radius:var(--rs);border:1px solid var(--border);flex-shrink:0}
.art-row-n{font-size:.76rem;color:var(--text2);flex:1;word-break:break-all;line-height:1.3}
.art-row select{background:var(--bg2);border:1px solid var(--border);color:var(--text);font-size:.76rem;padding:2px 5px;border-radius:var(--rs);outline:none;max-width:115px}
.mv-row{display:flex;gap:.35rem;margin-bottom:.35rem}
.mv-item{flex:1}
.mv-lbl{font-family:var(--dm);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text2);margin-bottom:.2rem}
.mv-zone{border:1.5px dashed var(--border2);border-radius:var(--r);padding:.4rem;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg3);position:relative;min-height:60px;display:flex;align-items:center;justify-content:center}
.mv-zone:hover{border-color:var(--teal);background:var(--teal-dim)}
.mv-zone p{font-size:.70rem;color:var(--text2);line-height:1.3}
.mv-zone span{color:var(--teal)}
.mv-zone input{display:none}
.mv-thumb{width:100%;height:56px;object-fit:contain;border-radius:var(--rs);display:block}
.mv-del{position:absolute;top:-5px;right:-5px;width:14px;height:14px;background:var(--red);border:none;border-radius:50%;color:#fff;font-size:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700;z-index:5}
.po-row-f{display:flex;gap:.4rem;align-items:flex-end;margin-bottom:.45rem}
.po-row-f .field{flex:1;margin-bottom:0}
/* ── QUICK REF ── */
.qr-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.qr-table{width:100%;border-collapse:collapse;font-size:.9rem;margin-bottom:.4rem}
.qr-table th{background:var(--bg3);color:var(--text2);font-family:var(--dm);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;text-align:center;border:1px solid var(--border)}
.qr-table th:first-child{text-align:left}
.qr-table td{padding:5px 8px;border:1px solid var(--border)}
.qr-table td:first-child{font-weight:600}
.qr-table tr:nth-child(even) td{background:var(--card2)}
.formula-box{background:var(--card2);border-left:3px solid var(--teal);border-radius:0 var(--r) var(--r) 0;padding:.55rem .8rem;margin-bottom:.45rem}
.f-title{font-family:var(--dm);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:.2rem}
.f-text{font-family:var(--dm);font-size:.88rem;font-weight:700;color:var(--text);line-height:1.5}
.markup-row{display:flex;gap:.45rem;margin:.4rem 0}
.mp{flex:1;text-align:center;padding:.4rem;border-radius:var(--r);background:var(--card2);border:1px solid var(--border)}
.mp-v{font-family:var(--dm);font-size:1.05rem;font-weight:700;color:var(--teal)}
.mp-l{font-family:var(--dm);font-size:.66rem;color:var(--text2)}
/* ── QUICK REFERENCE — design refresh (scoped to #pg-ref) ────────────
Typography: Barlow Condensed on section headers (not Space Mono),
standardized body sizes, tighter letter-spacing.
Formulas: numbered tech-spec layout, hairline dividers, no boxes.
Markup tiers: ghost pills with vertical divider separators.
All overrides scoped to #pg-ref so the rest of the app is untouched. */
#pg-ref .sec {
font-family: var(--fd) !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
display: flex;
align-items: center;
gap: .45rem;
}
#pg-ref .card { font-family: var(--fb); font-size: 14px; line-height: 1.5; }
#pg-ref .q-item { font-size: 14px; }
#pg-ref .qr-icon { width: 15px; height: 15px; flex-shrink: 0; stroke: currentColor; }
#pg-ref .formula-box {
background: transparent !important;
border: none !important;
border-bottom: 1px solid var(--border) !important;
border-radius: 0 !important;
padding: .7rem 0 !important;
margin: 0 !important;
display: grid;
grid-template-columns: 32px 1fr;
gap: .75rem;
align-items: baseline;
}
#pg-ref .formula-box:last-of-type {
border-bottom: none !important;
padding-bottom: .4rem !important;
}
#pg-ref .f-num {
font-family: var(--fd);
font-size: 20px;
font-weight: 700;
color: var(--teal);
letter-spacing: .02em;
line-height: 1;
}
#pg-ref .f-body { display: flex; flex-direction: column; gap: .25rem; }
#pg-ref .f-title {
font-family: var(--fd) !important;
font-size: 11px !important;
letter-spacing: .08em !important;
font-weight: 700 !important;
text-transform: uppercase !important;
color: var(--text2) !important;
}
#pg-ref .f-text {
font-family: var(--dm) !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--text) !important;
line-height: 1.5 !important;
}
#pg-ref .markup-row {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
margin: .85rem 0 .3rem !important;
padding-top: .85rem;
border-top: 1px solid var(--border);
}
#pg-ref .mp {
flex: none !important;
text-align: center !important;
padding: .3rem .5rem !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
border-right: 1px solid var(--border) !important;
}
#pg-ref .mp:last-child { border-right: none !important; }
#pg-ref .mp-v {
font-family: var(--fd) !important;
font-size: 20px !important;
font-weight: 700 !important;
color: var(--teal) !important;
line-height: 1.1;
}
#pg-ref .mp-l {
font-family: var(--fd) !important;
font-size: 10px !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
color: var(--text3) !important;
margin-top: .15rem;
}
.qr-badge{display:inline-block;font-family:var(--dm);font-size:.66rem;font-weight:700;padding:2px 6px;border-radius:2px;letter-spacing:.04em}
.qb-sp{background:var(--teal-dim);color:var(--teal);border:1px solid rgba(51,209,204,.3)}
.qb-dtf{background:var(--blue-dim);color:var(--blue);border:1px solid rgba(59,130,246,.3)}
.q-item{padding:4px 0;border-bottom:1px solid var(--border);font-size:.9rem;color:var(--text2);display:flex;gap:.45rem}
.q-item.no-border{border-bottom:none}
.q-n{color:var(--teal);font-family:var(--dm);font-size:.74rem;font-weight:700;flex-shrink:0;min-width:1rem}
.qr-knowledge-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1rem;margin-top:1rem}
.qr-playbook-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.qr-card-mb{margin-bottom:.75rem}
.qr-body{font-size:.88rem;line-height:1.6;color:var(--text2)}
.qr-body-lg{font-size:.92rem;line-height:1.7;color:var(--text2)}
.qr-p{margin-bottom:.5rem}
.qr-step-p{margin-bottom:.75rem}
.qr-note{font-family:var(--dm);font-size:.62rem;color:var(--text2);margin-top:.5rem}
.qr-highlight{background:var(--card2);border-left:3px solid var(--teal);padding:.5rem .75rem;border-radius:0 var(--r) var(--r) 0;font-size:.88rem}
.qr-step-lbl{color:var(--teal);font-family:var(--dm);font-size:.70rem}
.ref-logo{max-height:50px;margin-bottom:.5rem}
.ref-shop-title{font-size:18px;font-weight:700}
/* ── DASHBOARD GRID ── */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.65rem;margin-bottom:1.25rem}
.dash-grid-compact{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem;margin-bottom:1.25rem}
.dash-card-compact{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:.65rem .7rem;cursor:pointer;transition:all .18s;display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center}
.dash-card-compact:hover{border-color:var(--border2);transform:translateY(-1px)}
.dash-card-compact .dash-card-icon{margin-bottom:0;opacity:.5}
.dash-card-compact .dash-card-title{font-family:var(--dm);font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text)}
.dash-priority-item{display:flex;align-items:center;gap:.75rem;padding:.55rem .75rem;background:var(--card);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:border-color .15s}
.dash-priority-item:hover{border-color:var(--border2)}
.dash-priority-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dash-priority-label{font-size:.83rem;color:var(--text);flex:1}
.dash-priority-count{font-family:var(--dm);font-size:.75rem;font-weight:700}
.dash-card{background:var(--card);border:1px solid var(--border);border-radius:var(--rl);padding:1.1rem;cursor:pointer;transition:all .18s;position:relative;overflow:hidden}
.dash-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.dash-card:hover{border-color:var(--border2);transform:translateY(-1px)}.dash-card:hover::before{transform:scaleX(1)}
.dash-card-icon{color:var(--teal);opacity:.5;margin-bottom:.65rem;display:flex;align-items:center}.dash-card-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block}
.dash-card-title{font-family:var(--fd);font-weight:900;font-size:1rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.2rem}
.dash-card-desc{font-size:.75rem;color:var(--text2);line-height:1.4}
/* ── QC / INLINE FORM ── */
.ci{display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:all var(--tr)}
.ci:hover{border-color:var(--border2)}
.ci.on{border-color:var(--teal);background:var(--teal-dim)}
.ci input{accent-color:var(--teal);width:12px;height:12px;flex-shrink:0}
.ci label{font-size:.9rem;color:var(--text);cursor:pointer;pointer-events:none}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin-bottom:.6rem}
.fee-row{display:flex;align-items:center;gap:.45rem;margin-bottom:.4rem}
.fee-row label{font-size:.92rem;color:var(--text)}
.r-panel{background:var(--card2);border:1px solid var(--border);border-radius:var(--rl);overflow:hidden;margin-top:1.1rem}
.r-title{font-family:var(--dm);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);padding:.65rem .9rem;border-bottom:1px solid var(--border)}
.r-lines{padding:.35rem .9rem}
.r-line{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--border);font-size:.9rem}
.r-line:last-child{border-bottom:none}
.r-ll{color:var(--text2)}.r-lv{font-weight:600;font-family:var(--dm);font-size:.86rem}
.r-total{background:var(--teal);padding:.8rem .9rem;display:flex;justify-content:space-between;align-items:center}
.r-tl{font-family:var(--fd);font-weight:700;font-size:.94rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(0,0,0,.65)}
.r-tv{font-family:var(--dm);font-size:1.6rem;font-weight:700;color:#000}
.r-per{font-family:var(--dm);font-size:.76rem;color:var(--text2);text-align:right;padding:.3rem .9rem .4rem}
.r-warn{font-family:var(--dm);font-size:.74rem;color:var(--teal);padding:.3rem .9rem;background:var(--teal-dim)}
.r-note{font-family:var(--dm);font-size:.68rem;color:var(--text3);text-align:center;padding:.4rem;border-top:1px solid var(--border)}
.a-warn{background:var(--teal-dim);border:1px solid rgba(51,209,204,.25);border-radius:var(--r);padding:.5rem .7rem;font-size:.86rem;color:var(--teal);margin:.5rem 0}
/* ── FINANCE CHARTS ── */
.pl-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.75rem}
#pl-kpi-row{display:grid;grid-template-columns:repeat(6,1fr);gap:.65rem;margin-bottom:.75rem}
@media(max-width:1200px){#pl-kpi-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){#pl-kpi-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){#pl-kpi-row{grid-template-columns:1fr}}
#order-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem;margin-bottom:.75rem}
@media(max-width:900px){#order-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){#order-stats{grid-template-columns:1fr}}
#inv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin-bottom:.75rem}
@media(max-width:700px){#inv-stats{grid-template-columns:1fr}}
#rev-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.65rem;margin-bottom:.75rem}
#exp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem;margin-bottom:.75rem}
@media(max-width:900px){#exp-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){#exp-stats{grid-template-columns:1fr}}
#pay-stats,#tax-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem;margin-bottom:1rem}
@media(max-width:900px){#pay-stats,#tax-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){#pay-stats,#tax-stats{grid-template-columns:1fr}}
#act-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:.65rem;margin-bottom:.75rem}
@media(max-width:1000px){#act-stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){#act-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){#act-stats{grid-template-columns:1fr}}
#task-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem;margin-bottom:.75rem}
@media(max-width:900px){#task-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){#task-stats{grid-template-columns:1fr}}
.panel.pl-panel{min-height:0;padding:1rem 1.2rem}
.pl-panel .panel-head{margin-bottom:.65rem;padding-bottom:.5rem}
.pl-panel .ranked-row{margin-bottom:.55rem}
.pl-panel .ranked-row:last-child{margin-bottom:0}
.month-bar-wrap{display:flex;gap:.35rem;align-items:flex-end;height:140px;padding:.2rem 0;overflow-x:auto}
.m-bar-col{display:flex;flex-direction:column;align-items:center;gap:.2rem;min-width:36px}
.m-bar{width:28px;border-radius:2px 2px 0 0;transition:height .3s ease;cursor:default}
.m-bar.rev{background:var(--teal);opacity:.7}
.m-bar.exp{background:var(--red);opacity:.5}
.m-bar-lbl{font-family:var(--dm);font-size:.6rem;color:var(--text2);letter-spacing:.04em}
.m-bar-pair{display:flex;gap:2px;align-items:flex-end}
.tax-table{width:100%;border-collapse:collapse;font-size:.92rem}
.tax-table th{background:var(--bg3);font-family:var(--dm);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);padding:7px 10px;border:1px solid var(--border);text-align:left}
.tax-table td{padding:7px 10px;border:1px solid var(--border)}
.tax-table tr:nth-child(even) td{background:var(--card2)}
@media(max-width:768px){
/* ── LAYOUT ── */
.app{flex-direction:column}
.content{overflow-y:auto;-webkit-overflow-scrolling:touch}
.pg.on{overflow-y:visible;min-height:auto}
body{overflow:hidden;height:100%}
html{overflow:hidden;height:100%}
/* ── SIDEBAR — full screen overlay on mobile ── */
.sb{
position:fixed;top:0;bottom:0;left:0;right:auto;z-index:400;
transform:translateX(-100%);transition:transform .28s ease, visibility 0s linear .28s;
visibility:hidden;
width:min(88vw,360px)!important;max-width:88vw!important;
box-shadow:10px 0 30px rgba(0,0,0,.5);overflow-y:auto!important;
padding-top:env(safe-area-inset-top);
/* clear the fixed bottom nav (56px) so the last menu items are reachable */
padding-bottom:calc(56px + env(safe-area-inset-bottom) + .5rem)
}
.sb.mob-open{transform:translateX(0)!important;visibility:visible!important;transition:transform .28s ease, visibility 0s linear 0s!important}
.sb.sb-mini{transform:translateX(-100%);width:min(88vw,360px)!important}
/* Close button — only visible on mobile */
#mob-close-btn{display:flex;position:absolute;top:.75rem;right:.75rem;background:var(--bg3);border:1px solid var(--border);color:var(--text2);width:36px;height:36px;border-radius:50%;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;z-index:10;flex-shrink:0}
#mob-close-btn:hover{color:var(--teal);border-color:var(--teal)}
/* ── MOB MENU TOGGLE BUTTON — visible on mobile, !important to beat
the inline style="display:none" defaults on the buttons themselves ── */
#mob-menu-btn,#mob-close-btn{display:flex!important}
#sb-collapse-btn{display:none}
/* ── OVERLAY BACKDROP ── */
#mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:399}
#mob-overlay.on{display:block}
/* Bigger tap targets in sidebar on mobile */
.sb.mob-open .sb-item{padding:.75rem 1.5rem .75rem 1.75rem;font-size:1rem}
.sb.mob-open .sb-item-lbl{font-size:1rem!important}
.sb.mob-open .sb-section-lbl{font-size:.8rem!important}
.sb.mob-open .sb-section-hdr{padding:.6rem 1rem}
/* ── TOPBAR ── */
.topbar{padding:max(env(safe-area-inset-top),.5rem) .75rem 0;gap:.5rem;height:calc(62px + max(env(safe-area-inset-top),.5rem) - .5rem)}
#topbar-po{display:none}
/* ── CONTENT ── */
.content{padding:1rem .75rem}
#pg-dash{padding:1rem .75rem!important}
.pg.on{overflow-x:hidden}
/* ── GRIDS → SINGLE COLUMN ── */
.fr2,.fr3,.fr4{grid-template-columns:1fr!important}
/* ── TABLES → HORIZONTAL SCROLL ── */
.card{overflow-x:auto}
table.dt{min-width:500px}
#lead-tbody td:last-child{min-width:180px}
/* ── MODALS — FULL SCREEN ── */
.modal-bg{padding:.5rem;align-items:flex-end}
.modal{
width:100%!important;max-width:100%!important;
max-height:92vh;overflow-y:auto;
border-radius:14px 14px 0 0;
margin:0;
padding-bottom:0!important
}
/* Sticky footer carries the safe-area padding itself (and stays opaque to the
very bottom edge) so there's no see-through gap below the buttons. */
.modal .modal-footer{
border-radius:0;
margin-bottom:0!important;
padding-bottom:max(env(safe-area-inset-bottom),1.1rem)!important;
}
/* ── PIPELINE — HORIZONTAL SWIPE ── */
.r-panel{position:static!important}
/* ── PROOF BUILDER ── */
/* ── SIDE PANELS → FULL-SCREEN OVERLAY ON MOBILE ──
Topbar has inline z-index:9000 (app.html:~3360) and stays on top, so we
start the panel below the topbar rather than clipping its hero behind it. */
.lead-panel,.acc-panel,.con-panel,#chk-panel{
position:fixed!important;
top:calc(62px + max(env(safe-area-inset-top),.5rem) - .5rem)!important;
right:0!important;bottom:0!important;left:0!important;
inset:auto;
width:100vw!important;min-width:0!important;max-width:100vw!important;
height:auto!important;max-height:none!important;
z-index:350;overflow:hidden!important;
border-left:none!important;
}
/* Mobile: keep the panel-content scrollable while footer stays pinned */
#acc-panel-content,#con-panel-content{
padding-bottom:max(env(safe-area-inset-bottom),.5rem)!important
}
/* Both axes must be cleared — CSS upgrades overflow-y:visible to auto when
overflow-x is still hidden, creating a ghost scroll container that swallows
all iOS touch events. overflow:visible on every layer lets the page's native
scroll handle everything. */
#pg-leads.on,#pg-accounts.on,#pg-contacts.on{
/* flex:0 0 auto — these are flex children of .page-scroll; without it they
shrink to the container height while their list overflows, stranding the
bottom rows (and the nav spacer) above the real content. Size to content. */
flex:0 0 auto!important;
height:auto!important;min-height:0!important;overflow:visible!important
}
.leads-layout,.acc-layout,.con-layout{display:block!important;overflow:visible!important}
.leads-list-col,.acc-list-col,.con-list-col{overflow:visible!important}
/* Checklist page: keep the flex chain alive so kanban columns stretch to
the bottom of the viewport instead of collapsing to card content height.
Scoped to .on so the page still toggles off when not active. */
#pg-checklist.on{display:flex!important;flex-direction:column!important;min-height:100%!important;overflow-y:visible!important}
#pg-checklist.on>.chk-layout{display:flex!important;flex:1!important;min-height:0!important}
#pg-checklist.on .chk-kanban{flex:1!important;min-height:0!important}
/* Close buttons stay reachable in overlay mode */
#lead-panel .btn-close,#acc-panel .btn-close,#con-panel .btn-close,#chk-panel .lc-icon-btn{
position:sticky;top:.5rem;float:right;z-index:10;
}
/* ── TAP TARGETS — 44px min on mobile for accessibility ── */
.content .btn,.modal .btn,.pg .btn{min-height:44px}
.btn-sm{min-height:36px;padding:0 .75rem}
.lc-icon-btn{width:36px!important;height:36px!important}
/* ── DASHBOARD → 2-COLUMN ON MOBILE ── */
.dash-kpis{grid-template-columns:1fr 1fr!important}
.dash-kpis>:nth-child(3){grid-column:1/-1!important}
.dash-panels-2{grid-template-columns:1fr!important}
.dash-btm{display:grid!important;grid-template-columns:1fr 1fr!important}
.dash-btm>:first-child{grid-column:1/-1!important}
/* ── MISC ── */
.qr-grid{grid-template-columns:1fr}
.pl-row{grid-template-columns:1fr}
.page-hdr{flex-wrap:wrap;gap:.5rem}
.kb-card-actions{flex-wrap:wrap}
/* Deals / Activities: keep the action button pinned to the top-right on the
same row as the filter tabs. The tab strip shrinks and scrolls horizontally
to make room instead of pushing the button to its own row. */
/* Deal pipeline fills to bottom:0, but the fixed bottom nav covers the lower
~56px — end the page above the nav so the kanban columns reach the visible
bottom and the last cards aren't hidden behind it. */
#pg-deals.on{bottom:calc(56px + env(safe-area-inset-bottom))!important}
/* Deal pipeline: action button top-right on the tab row (tabs scroll). */
#pg-deals .page-hdr{flex-wrap:nowrap!important}
#pg-deals .page-hdr .pipeline-tabs{min-width:0!important;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none}
#pg-deals .page-hdr .pipeline-tabs::-webkit-scrollbar{display:none}
#pg-deals .page-hdr > .btn{flex-shrink:0;margin-left:.5rem}
/* Leads + Activities: stack — the primary action button on top (right-aligned),
the filter tabs on their own row below (scrolling horizontally). The search
row with the List/Cards toggle sits below that. The !important beats the
inline align-items:center so rows stretch full-width and the button right-
aligns. */
#pg-leads .page-hdr,#pg-activities .page-hdr{flex-direction:column;align-items:stretch!important;gap:.5rem}
#pg-leads .page-hdr > div:last-child{order:-1;justify-content:flex-end}
#pg-activities .page-hdr > .btn{order:-1;align-self:flex-end}
#pg-leads #lead-filter,#pg-activities #act-pill{min-width:0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none}
#pg-leads #lead-filter::-webkit-scrollbar,#pg-activities #act-pill::-webkit-scrollbar{display:none}
/* Art Library top bar — 4 rows on mobile:
Row 1: title + Upload Files (right)
Row 2: Folders · New Folder · New Mockup
Row 3: Search (full width)
Row 4: Newest sort + Select (right) */
.art-hdr{flex-wrap:wrap;gap:.5rem}
.art-hdr #art-up-btn{order:1;margin-left:auto}
.art-hdr .art-hdr-actions{order:2;flex-basis:100%;flex-wrap:wrap;justify-content:space-between}
#art-file-controls{flex-wrap:wrap}
#art-file-controls #art-search{flex:1 1 100%!important;order:0}
#art-file-controls #art-sort{order:1}
#art-file-controls #art-bulk-toggle{order:2;margin-left:auto}
/* Select-mode bulk bar: it's fixed at bottom:0 with z-index 100, so the bottom
nav (z-index 450) hides it. Lift it above the nav and let the actions wrap so
they're all reachable. The flex:1 spacer keeps selection actions on row 1 and
the bulk operations below. */
.art-bulk-bar{bottom:calc(56px + env(safe-area-inset-bottom))!important;flex-wrap:wrap;padding:.55rem .8rem!important;gap:.4rem .5rem}
.art-bulk-bar button{font-size:12px!important;padding:7px 11px!important}
/* Account list table: 7 columns don't fit a phone. Show the essentials —
Company · Orders · Revenue — and hide Rep/Type/Contacts/Last Order. */
.acc-list-grid{grid-template-columns:1.7fr .7fr 1fr!important;gap:.6rem!important}
.acc-list-grid > :nth-child(2),
.acc-list-grid > :nth-child(3),
.acc-list-grid > :nth-child(4),
.acc-list-grid > :nth-child(7){display:none!important}
/* Search rows: input + view toggle share row 1, filter + sort wrap to row 2.
Prevents the A→Z sort select from running off-screen on accounts/contacts. */
.search-row{flex-wrap:wrap}
/* Row 1 = search input (grows) + the List/Cards toggle pinned top-right; the
filter selects always wrap to row 2. Keeps the toggle in the exact same spot
on every list page regardless of how many filters it has. */
.search-row input{flex:1 1 auto;min-width:140px;order:0}
.search-row #acc-view-toggle,.search-row #con-view-toggle,.search-row #lead-view-toggle,.search-row #act-view-toggle,.search-row #task-view-toggle{order:1;margin-left:auto!important}
.search-row select{flex:1 1 45%;min-width:130px;max-width:none;order:2}
/* Activity search row: drop the bulk "Select" button below so the List/Cards
toggle keeps the top-right of row 1 next to the search box. */
.search-row #act-bulk-toggle{order:3;flex-shrink:0;margin-left:auto}
/* Fulfillment: keep its List/Cards toggle pinned top-right on the status-tab
row (tabs scroll) — same position as the other pages' toggles. */
.ful-toolbar{flex-wrap:nowrap!important}
.ful-toolbar #ful-tabs{min-width:0!important}
.ful-toolbar #ful-view-toggle{flex-shrink:0;margin-left:.5rem}
/* Side panels: tighten button sizes and clip horizontal overflow so Preview /
Share / View action rows inside the Documents dropdowns don't push off-screen. */
.acc-panel,.con-panel,.lead-panel{overflow-x:hidden!important}
/* overflow-y:auto on the content div auto-upgrades overflow-x to scrollable,
letting inner content bleed past the panel edge on mobile. Force clip. */
#lead-panel-content,#acc-panel-content,#con-panel-content{
overflow-x:hidden!important;max-width:100%;
}
.acc-panel .btn-sm,.con-panel .btn-sm,.lead-panel .btn-sm{
min-height:30px!important;padding:4px 9px!important;font-size:.7rem!important
}
/* Documents-row buttons (Preview/Share/View) take their own full-width line
on mobile so they never run past the panel edge. The flex:1 spacer inside
the row is forced to 100% so everything after it wraps to the next line. */
.acc-doc-row{gap:.3rem!important}
.acc-doc-row > span[style*="flex:1"]{flex:1 1 100%!important}
.acc-doc-row .btn-sm{flex:0 1 auto!important}
/* Art Library: collapse the 210px folder sidebar into a left-edge drawer
opened via the "☰ Folders" button in the page header. Main content (folder
grid + file grid) gets full width so thumbnails aren't cramped. Folders
pack 2-per-row on mobile; file thumbnails stay auto-fill. */
.art-nav-toggle{display:inline-flex!important}
/* minmax(0,1fr) (not 1fr) so the cards always shrink to fit two-per-row
instead of letting thumbnail/name min-content push the grid off-screen. */
#pg-artlib .art-folder-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#pg-artlib .art-folder-card-name{font-size:.82rem!important}
#pg-artlib .art-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#pg-artlib .art-nav-sidebar{
position:fixed!important;
top:calc(62px + max(env(safe-area-inset-top),.5rem) - .5rem)!important;
left:0!important;bottom:0!important;
width:85vw!important;max-width:320px!important;
z-index:350;
transform:translateX(-100%);transition:transform .2s ease;
padding:.75rem;overflow-y:auto;
background:var(--bg);border-right:1px solid var(--border);
box-shadow:6px 0 24px rgba(0,0,0,.4);
}
#pg-artlib .art-nav-sidebar.open{transform:translateX(0)}
#pg-artlib .art-nav-card{padding:.55rem}
/* ── SETTINGS / PRICING PAGE — stack 2-col layouts, keep 5/4-col input grids
from cramming into tiny inputs. Selectors target inline grid-template-columns
styles because the markup uses inline styles (app.html:~4588 area). ── */
#pg-settings-pricing .page-hdr{justify-content:flex-start!important}
#pg-settings-pricing div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
#pg-settings-pricing div[style*="repeat(5"]{grid-template-columns:repeat(2,1fr)!important}
#pg-settings-pricing .ss-loc-grid{grid-template-columns:repeat(2,1fr)!important}
#pg-settings-pricing div[style*="repeat(4"]{grid-template-columns:repeat(2,1fr)!important}
#pg-settings-pricing div[style*="repeat(3"]{grid-template-columns:1fr!important}
#pg-settings-pricing .fr2,#pg-settings-pricing .fr3{grid-template-columns:1fr!important}
#pg-settings-pricing .ss-tab,#pg-settings-docs .ss-tab{padding:14px 14px!important;font-size:12px!important}
#pg-settings-pricing .ss-panel,#pg-settings-docs .ss-panel{max-width:100%!important}
/* ── PROFILES MODAL ── */
#m-profiles>.modal{width:95vw!important;height:90vh!important;max-width:100%!important}
#mp-panel-profiles{flex-direction:column!important;overflow-y:auto!important}
#mp-panel-profiles>div:first-child{width:100%!important;border-right:none!important;border-bottom:1px solid var(--border);max-height:200px;flex-shrink:0}
#mp-panel-profiles>div:last-child{width:100%!important;flex:1;overflow-y:auto}
/* ── LOGIN ── */
.login-box{padding:2rem 1.25rem;margin:.75rem;max-width:100%;border-radius:12px}
.login-screen::before{width:250px;height:250px}
.login-screen::after{width:200px;height:200px}
#google-signin-btn{min-height:48px!important;font-size:1rem!important;border-radius:8px!important}
.login-error{font-size:.8rem!important;line-height:1.5;word-break:break-word}
.login-logo{font-size:1.75rem}
.login-sub{font-size:.65rem;margin-bottom:1.5rem}
.invite-row{flex-direction:column}
.invite-row button{width:100%}
.welcome-back-continue{min-height:48px}
/* ── DETAIL PAGES — rules live at end of