*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Site-admin impersonation banner (public/js/app/auth-ui.js): a fixed top bar
when the session is an admin "log in as user". body.impersonating pushes the
normal flex flow down so the bar never overlaps the app. */
body.impersonating{padding-top:40px}
/* --p-warning-600 (a background-role amber, dark enough for white text in BOTH
themes) — not --p-warning-700, which is amber *text* and lightens in dark. */
.impersonation-banner{position:fixed;top:0;left:0;right:0;z-index:10002;display:flex;align-items:center;justify-content:center;gap:14px;background:var(--p-warning-600);color:#fff;font-size:13px;font-weight:600;padding:9px 16px;line-height:1.3}
.impersonation-banner button{font-family:inherit;font-size:12.5px;font-weight:700;color:var(--p-warning-600);background:#fff;border:none;border-radius:7px;padding:5px 12px;cursor:pointer}
.impersonation-banner button:hover{background:var(--p-surface-100)}
/* App font for elements outside the .hr-quantum container (modal, feedback widget). */
body{font-family:Inter,system-ui,sans-serif;color:var(--p-text-color)}
.cgs-scroll::-webkit-scrollbar{width:10px}
.cgs-scroll::-webkit-scrollbar-thumb{background:var(--p-surface-300);border-radius:6px;border:3px solid var(--p-surface-0)}
.cgs-range{-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:var(--p-surface-200);outline:none}
.cgs-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--p-primary-500);cursor:pointer;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.cgs-range::-moz-range-thumb{width:18px;height:18px;border:2px solid #fff;border-radius:50%;background:var(--p-primary-500);cursor:pointer}
.cgs-sel{appearance:none;-webkit-appearance:none;background-image:none}
.cgs-stage{display:flex;align-items:center;justify-content:center;padding:44px;min-height:340px;background-color:var(--p-surface-100);background-image:linear-gradient(45deg,var(--p-surface-200) 25%,transparent 25%),linear-gradient(-45deg,var(--p-surface-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--p-surface-200) 75%),linear-gradient(-45deg,transparent 75%,var(--p-surface-200) 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0}
.cgs-sectlabel{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--p-text-muted-color);margin:0}
[hidden]{display:none!important}
/* === App-shell layout (moved out of editor.html inline styles so media
queries can restyle it). Responsive breakpoint convention: exactly two
widths — 900px ("compact": drawer nav + stacked editor) and 640px
("phone": density pass). Do not invent new query widths. === */
.app-shell{display:flex;height:100vh;height:100dvh;min-height:660px;font-family:Inter,system-ui,sans-serif;background:var(--p-surface-50);color:var(--p-text-color);overflow:hidden}
/* The five center views (Home/Templates/My timers/Analytics/Settings) */
.cgs-view{order:1;flex:1;min-width:0;overflow-y:auto;padding:34px 44px;background:var(--p-surface-50)}
/* The editor column and its right config rail */
.cgs-editor{order:1;flex:1;display:flex;flex-direction:column;min-width:0}
.cgs-rail{order:2;width:372px;flex:none;height:100%;overflow-y:auto;background:var(--p-surface-0);border-left:1px solid var(--p-content-border-color)}
.ed-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 28px;border-bottom:1px solid var(--p-content-border-color);background:var(--p-surface-0)}
.ed-scroll{flex:1;min-height:0;overflow-y:auto}
.ed-livebadge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:9999px;font-size:11.5px;font-weight:600;background:var(--p-success-50);color:var(--p-success-700);white-space:nowrap;flex:none}
/* Card grids — the min() floor lets a card shrink below its ideal width
instead of overflowing a narrow viewport */
.timers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px;margin-top:24px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:16px}
/* Mobile top bar (hamburger + brand); shown only in the compact shell below */
.cgs-mobilebar{display:none}
.cgs-mobilebar .util-btn{flex:none;width:40px;height:40px}
.mb-brand{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:var(--p-gradient-uma);color:#fff;text-decoration:none;flex:none;box-shadow:var(--p-shadow-small)}
.mb-title{font-size:14px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Collapsible sections */
.cgs-sec{border-bottom:1px solid var(--p-content-border-color)}
.cgs-head{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;padding:16px 22px;font:inherit;color:inherit;text-align:left}
.cgs-head:hover .cgs-sectlabel{color:var(--p-text-color)}
.cgs-chev{color:var(--p-text-muted-color);font-size:18px;transition:transform .2s ease}
.cgs-body{padding:0 22px 18px}
.cgs-sec.collapsed .cgs-body{display:none}
.cgs-sec.collapsed .cgs-chev{transform:rotate(-90deg)}
/* Instant custom tooltip (replaces weak native title= tooltips) */
.cgs-tip{cursor:help}
/* Intentionally dark in both themes; the faint border separates it from a dark page. */
.cgs-tooltip{position:fixed;z-index:9999;max-width:240px;background:#111827;color:#fff;border:1px solid rgba(255,255,255,.12);font-size:11.5px;line-height:1.45;font-weight:500;padding:8px 10px;border-radius:8px;box-shadow:var(--p-shadow-large);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}
.cgs-tooltip.show{opacity:1;transform:translateY(0)}
/* Color rows with a visible HEX field */
.cgs-color{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid var(--p-content-border-color);border-radius:9px}
.cgs-color input[type=color]{width:26px;height:26px;border:none;background:none;padding:0;border-radius:6px;cursor:pointer;flex:none}
.cgs-cname{font-size:13px;font-weight:500;flex:1}
.cgs-hex{width:92px;flex:none;font-size:12.5px;font-family:'Roboto Mono',ui-monospace,monospace;letter-spacing:.02em;text-transform:uppercase;padding:5px 8px}
/* Left app nav (collapsible) */
.cgs-nav{width:230px;flex:none;height:100%;display:flex;flex-direction:column;background:var(--p-surface-0);border-right:1px solid var(--p-content-border-color);transition:width .18s ease;overflow:hidden}
.cgs-nav.collapsed{width:64px}
/* Top workspace switcher (below the brand; auth-ui.js renders #wsSwitch into the slot) */
#wsSwitcherSlot{padding:10px 10px 0}
#wsSwitcherSlot .ws-switch{display:flex;align-items:center;gap:8px;width:100%;height:38px;padding:0 8px;border-radius:10px;background:var(--p-surface-50);border:1px solid var(--p-content-border-color);color:var(--p-text-color);font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
#wsSwitcherSlot .ws-switch:hover{border-color:var(--p-primary-400,var(--p-primary-500))}
#wsSwitcherSlot .ws-badge{flex:none;width:24px;height:24px;border-radius:7px;background:var(--p-gradient-uma);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
#wsSwitcherSlot .ws-name{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#wsSwitcherSlot .ws-caret{margin-left:auto;font-size:14px;color:var(--p-text-muted-color)}
.cgs-nav.collapsed #wsSwitcherSlot{padding:10px 6px 0}
.cgs-nav.collapsed #wsSwitcherSlot .ws-switch{justify-content:center;padding:0}
.cgs-nav.collapsed #wsSwitcherSlot .ws-name,.cgs-nav.collapsed #wsSwitcherSlot .ws-caret{display:none}
/* Bottom auth block: purely personal — the user chip opens the account menu */
#authArea{margin:6px 10px 10px;padding:11px 12px;border-radius:11px;background:var(--p-surface-50);border:1px solid var(--p-content-border-color)}
#authArea .cta{display:flex;flex-direction:column;gap:7px}
#authArea .cta a{display:flex;align-items:center;justify-content:center;gap:6px;height:32px;border-radius:8px;font-size:12.5px;font-weight:700;text-decoration:none;font-family:inherit}
#authArea .cta a.primary{background:var(--p-primary-500);color:#fff}
#authArea .cta a.secondary{background:var(--p-surface-0);color:var(--p-text-color);border:1px solid var(--p-content-border-color)}
#authArea .who{display:flex;align-items:center;gap:9px;min-width:0;width:100%;padding:0;border:none;background:none;cursor:pointer;font-family:inherit;text-align:left}
#authArea .avatar{flex:none;width:28px;height:28px;border-radius:50%;background:var(--p-gradient-uma);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
#authArea .email{flex:1;min-width:0;font-size:12px;font-weight:600;color:var(--p-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#authArea .who-caret{flex:none;font-size:14px;color:var(--p-text-muted-color)}
#authArea .who:hover .email{color:var(--p-primary-600)}
/* Collapsed: keep the chip as an avatar-only button; the logged-out CTA has no compact form */
.cgs-nav.collapsed #authArea{margin:6px;padding:7px 0;display:flex;justify-content:center}
.cgs-nav.collapsed #authArea:not(.logged-in){display:none}
.cgs-nav.collapsed #authArea .who{width:auto;justify-content:center}
.cgs-nav.collapsed #authArea .email,.cgs-nav.collapsed #authArea .who-caret{display:none}
.gate{max-width:420px;margin:60px auto;text-align:center;padding:36px 30px;background:var(--p-surface-0);border:1px solid var(--p-content-border-color);border-radius:16px}
.gate .ic{width:52px;height:52px;border-radius:50%;background:var(--p-primary-50);color:var(--p-primary-600);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 16px}
.gate h2{margin:0 0 8px;font-size:18px;font-weight:800}
.gate p{margin:0 0 20px;font-size:13.5px;color:var(--p-text-muted-color);line-height:1.55}
.gate .row{display:flex;gap:10px;justify-content:center}
.nav-brand{display:flex;align-items:center;gap:11px;padding:15px 14px;border-bottom:1px solid var(--p-content-border-color);white-space:nowrap;overflow:hidden}
.cgs-nav.collapsed .nav-brand{justify-content:center;padding:15px 8px}
.nav-item{display:flex;align-items:center;gap:11px;margin:2px 10px;padding:9px 11px;border:none;border-radius:9px;background:none;color:var(--p-text-muted-color);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;text-align:left}
.nav-item i{font-size:17px;flex:none;width:20px;text-align:center}
.nav-item:hover{background:var(--p-surface-100);color:var(--p-text-color)}
.nav-item.active{background:var(--p-primary-50);color:var(--p-primary-600)}
.cgs-nav.collapsed .nav-label{display:none}
.cgs-nav.collapsed .nav-item{justify-content:center;padding:9px 0}
/* Language switcher (js/i18n.js wires any [data-locale] buttons it finds).
Lives in Settings → Profile (js/app/settings.js) and, unstyled by this rule,
via inline CSS on the standalone auth/landing pages. The .cgs-nav.collapsed
variant below is retained for reuse but the sidebar no longer renders it. */
.cgs-locale-switch{display:flex;align-items:center;gap:2px;margin:0 14px 10px;background:var(--p-surface-100);border-radius:9px;padding:3px;flex:none}
.cgs-nav.collapsed .cgs-locale-switch{margin:0 8px 10px}
/* Sidebar utility row: Theme / Feedback / Collapse as icon-only buttons under
#authArea — folds the two former full-width rows into one and adds the theme
switcher. Labels become tooltips (.cgs-tip + data-i18n-tip). */
.side-utils{display:flex;align-items:center;gap:4px;margin:2px 10px 8px;padding-top:8px;border-top:1px solid var(--p-content-border-color)}
.util-btn{flex:1;height:34px;display:flex;align-items:center;justify-content:center;border:none;border-radius:9px;background:none;color:var(--p-text-muted-color);cursor:pointer;font-family:inherit}
.util-btn i{font-size:17px}
.util-btn:hover{background:var(--p-surface-100);color:var(--p-text-color)}
.util-btn[aria-expanded="true"]{background:var(--p-surface-100);color:var(--p-text-color)}
/* Theme icon reflects the APPLIED theme with no JS flash: both glyphs ship and
CSS picks one by data-theme (sun in light, moon in dark). */
.theme-ic-dark{display:none}
:root[data-theme="dark"] .theme-ic-light{display:none}
:root[data-theme="dark"] .theme-ic-dark{display:inline-block}
/* Collapsed rail (64px): stack the three icons; flip the collapse arrow to point
right (i.e. "expand"). */
.cgs-nav.collapsed .side-utils{flex-direction:column;margin:2px 8px 8px}
.cgs-nav.collapsed .side-utils .util-btn{width:100%}
.cgs-nav.collapsed .collapse-ic{transform:rotate(180deg)}
.cgs-locale-btn{flex:1;height:26px;border:none;border-radius:7px;cursor:pointer;font-size:11.5px;font-weight:700;background:none;color:var(--p-text-muted-color);font:inherit}
.cgs-locale-btn:hover{color:var(--p-text-color)}
.cgs-locale-btn.active{background:var(--p-surface-0);color:var(--p-primary-600);box-shadow:var(--p-shadow-small)}
/* Settings hub (#viewSettings): sub-nav (grouped, role-gated) + section body */
.settings-layout{display:flex;gap:28px;align-items:flex-start;margin-top:22px}
#settingsNav{flex:none;width:205px;position:sticky;top:0;display:flex;flex-direction:column;gap:2px}
#settingsNav .set-group{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--p-text-muted-color);margin:16px 0 6px;padding:0 11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#settingsNav .set-group:first-child{margin-top:0}
#settingsNav .set-item{display:flex;align-items:center;gap:9px;padding:8px 11px;border:none;border-radius:9px;background:none;color:var(--p-text-muted-color);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:left;white-space:nowrap}
#settingsNav .set-item i{font-size:15px;flex:none;width:18px;text-align:center}
#settingsNav .set-item:hover{background:var(--p-surface-100);color:var(--p-text-color)}
#settingsNav .set-item.active{background:var(--p-primary-50);color:var(--p-primary-600)}
#settingsBody{flex:1;min-width:0;max-width:720px}
@media (max-width:900px){
.settings-layout{flex-direction:column;gap:16px}
#settingsNav{width:100%;flex-direction:row;flex-wrap:wrap;position:static}
#settingsNav .set-group{width:100%;margin:8px 0 4px}
}
.wiz-beta-pill{border:1px dashed var(--p-primary-300);color:var(--p-primary-600);background:var(--p-primary-50)}
.wiz-beta-pill:hover{background:var(--p-primary-100);color:var(--p-primary-700)}
.wiz-beta-pill b{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--p-primary-500);color:#fff;border-radius:5px;padding:2px 5px;margin-left:4px}
/* Templates gallery */
.tpl-chip{height:30px;padding:0 13px;border-radius:9999px;border:1px solid var(--p-content-border-color);background:var(--p-surface-0);font-size:12.5px;font-weight:600;color:var(--p-text-muted-color);cursor:pointer;font-family:inherit}
.tpl-chip:hover{color:var(--p-text-color)}
.tpl-chip.active{background:var(--p-text-color);border-color:var(--p-text-color);color:var(--p-surface-0)}
.tpl-card{position:relative;display:flex;flex-direction:column;background:var(--p-surface-0);border:1.5px solid var(--p-content-border-color);border-radius:14px;overflow:hidden;cursor:pointer;text-align:left;padding:0;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.tpl-card:hover{border-color:var(--p-primary-300);box-shadow:var(--p-shadow-medium)}
.tpl-card.active{border-color:var(--p-primary-500);box-shadow:0 0 0 3px var(--p-primary-50)}
.tpl-thumb{display:block;width:100%;height:auto}
.tpl-meta{padding:12px 14px 14px;border-top:1px solid var(--p-content-border-color)}
.tpl-name{font-size:14px;font-weight:700;color:var(--p-text-color)}
.tpl-desc{font-size:12px;color:var(--p-text-muted-color);margin-top:3px;line-height:1.45}
.tpl-tag{display:inline-flex;margin-top:9px;font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:6px;background:var(--p-surface-100);color:var(--p-text-muted-color)}
.tpl-use{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:7px;background:var(--p-primary-50);color:var(--p-primary-600);white-space:nowrap}
.tpl-card:hover .tpl-use{background:var(--p-primary-500);color:#fff}
/* Home dashboard */
.home-hero{background:var(--p-gradient-uma,linear-gradient(120deg,#6366F1,#8B5CF6));color:#fff;border-radius:18px;padding:30px 32px;box-shadow:var(--p-shadow-medium)}
.home-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:28px 0 14px}
.home-sec-head h2{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em}
.home-sec-head a{font-size:12.5px;font-weight:600;color:var(--p-primary-600);text-decoration:none;cursor:pointer}
.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),360px));gap:16px;justify-content:start}
/* Signed-in dashboard band: recent timers (left) + this-week pulse panel (right) */
.home-band{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start;margin-top:28px}
@media (max-width:900px){.home-band{grid-template-columns:1fr}}
.home-week{background:var(--p-surface-0);border:1px solid var(--p-content-border-color);border-radius:14px;padding:4px 16px 12px}
.tpl-del{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--p-surface-0);border:1px solid var(--p-content-border-color);color:var(--p-text-muted-color);display:flex;align-items:center;justify-content:center;box-shadow:var(--p-shadow-small)}
.tpl-del:hover{color:var(--p-danger-500,#ef4444)}
/* Timer cards (My timers + Home tiles): status badge + clickable stat row */
.tc-badge{display:inline-flex;align-items:center;flex:none;font-size:10px;font-weight:700;padding:2px 7px;border-radius:9999px}
.tc-badge.live{background:var(--p-success-50);color:var(--p-success-700)}
.tc-badge.draft,.tc-badge.expired{background:var(--p-warning-50);color:var(--p-warning-700)}
.tc-stats{display:flex;align-items:center;gap:5px;flex-wrap:wrap;width:100%;margin-top:10px;padding:7px 10px;border:1px solid var(--p-content-border-color);border-radius:9px;background:var(--p-surface-50);font-size:11.5px;color:var(--p-text-muted-color);cursor:pointer;font-family:inherit;text-align:left}
.tc-stats:hover{border-color:var(--p-primary-300);color:var(--p-text-color)}
.tc-stats b{font-weight:700;color:var(--p-text-color);font-variant-numeric:tabular-nums}
/* Shared overflow menu — body-appended position:fixed singleton (an in-card
menu would clip on .tpl-card's overflow:hidden) */
.cgs-menu{position:fixed;z-index:10001;min-width:172px;background:var(--p-surface-0);border:1px solid var(--p-content-border-color);border-radius:11px;box-shadow:var(--p-shadow-large);padding:5px}
.cgs-menu-item{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;border-radius:7px;padding:8px 10px;font:inherit;font-size:12.5px;font-weight:600;color:var(--p-text-color);cursor:pointer;text-align:left}
.cgs-menu-item:hover,.cgs-menu-item:focus{background:var(--p-surface-100);outline:none}
.cgs-menu-item i{font-size:14px;width:16px;text-align:center;color:var(--p-text-muted-color)}
.cgs-menu-item.danger,.cgs-menu-item.danger i{color:var(--p-danger-600)}
/* Active (current-choice) row — used by the theme menu's Light/Dark/System. */
.cgs-menu-item.active,.cgs-menu-item.active i{color:var(--p-primary-600)}
.cgs-menu-check{margin-left:auto}
/* Analytics per-timer table */
.an-row{display:grid;grid-template-columns:84px minmax(160px,1fr) 130px 84px 74px 64px 92px 28px;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--p-content-border-color)}
.an-row:first-child{border-top:none}
/* Workspace company-profile form (js/app/workspace.js): two columns that
collapse to one when a column can't hold ~240px */
.ws-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:12px;margin-top:16px}
.an-head{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--p-text-muted-color);background:var(--p-surface-50)}
.an-body-row{cursor:pointer;transition:background .12s}
.an-body-row:hover{background:var(--p-surface-50)}
.an-num{text-align:right;font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums}
.an-pill{display:inline-flex;font-size:10px;font-weight:700;padding:2px 7px;border-radius:9999px;background:var(--p-surface-100);color:var(--p-text-muted-color)}
.an-chip{display:inline-flex;font-size:10px;font-weight:700;padding:2px 7px;border-radius:9999px}
.an-drill{padding:0 18px 18px;background:var(--p-surface-50);border-top:1px solid var(--p-content-border-color)}
#chartTip{position:fixed;pointer-events:none;z-index:50;background:var(--p-surface-0);border:1px solid var(--p-content-border-color);border-radius:8px;box-shadow:var(--p-shadow-small);padding:6px 9px;font-size:11.5px;color:var(--p-text-color);white-space:nowrap;opacity:0;transition:opacity .1s}
@media (max-width:900px){ .an-row{grid-template-columns:84px minmax(140px,1fr) 74px 64px 28px} .an-hide-narrow{display:none} }
/* Color preset swatches */
.cgs-swatch{position:relative;width:32px;height:32px;border-radius:9px;border:1px solid var(--p-content-border-color);cursor:pointer;padding:0;flex:none}
.cgs-swatch:hover{box-shadow:0 0 0 3px var(--p-primary-50);border-color:var(--p-primary-300)}
.cgs-swatch.add{background:var(--p-surface-0);color:var(--p-text-muted-color);border-style:dashed;font-size:15px;display:flex;align-items:center;justify-content:center}
.cgs-swatch .tpl-del{top:-7px;right:-7px;width:16px;height:16px}
/* Modal */
.cgs-modal-overlay{position:fixed;inset:0;z-index:10000;background:var(--p-overlay);display:flex;align-items:center;justify-content:center;padding:24px}
.cgs-modal{width:100%;max-width:340px;background:var(--p-surface-0);border:1px solid var(--p-content-border-color);border-radius:14px;box-shadow:var(--p-shadow-large);padding:20px}
.cgs-modal-title{font-size:15px;font-weight:700;letter-spacing:-.01em;margin:0 0 14px}
.cgs-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.cgs-modal-actions button{height:38px;padding:0 16px;border-radius:9px;font-size:13.5px;font-weight:600;cursor:pointer}
#modalCancel,#modalSecondary{background:var(--p-surface-0);border:1px solid var(--p-content-border-color);color:var(--p-text-color)}
#modalSecondary{color:var(--p-primary-600);border-color:var(--p-primary-200,var(--p-content-border-color));font-weight:700}
#modalOk.cgs-danger{background:var(--p-danger-500);border-color:var(--p-danger-500)}
/* Inline auth modal (login/signup without leaving the editor) */
.cgs-modal.auth-modal{max-width:380px;padding:24px 26px 22px;position:relative}
.auth-modal .authClose{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;border:none;background:none;color:var(--p-text-muted-color);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px}
.auth-modal .authClose:hover{background:var(--p-surface-100);color:var(--p-text-color)}
.auth-modal h2{margin:0 0 6px;font-size:18px;font-weight:800;letter-spacing:-.01em;padding-right:24px}
.auth-modal .authMsg{margin:0 0 18px;font-size:13px;color:var(--p-text-muted-color);line-height:1.5}
.auth-modal .authTabs{display:flex;background:var(--p-surface-100);border-radius:10px;padding:3px;gap:3px;margin-bottom:16px}
.auth-modal .authTabs button{flex:1;height:32px;border:none;border-radius:8px;background:none;font-size:13px;font-weight:700;color:var(--p-text-muted-color);cursor:pointer;font-family:inherit}
.auth-modal .authTabs button.active{background:var(--p-surface-0);color:var(--p-text-color);box-shadow:0 1px 2px rgba(15,23,42,.08)}
.auth-modal .authField{margin-bottom:12px}
.auth-modal .authField label{display:block;font-size:12px;font-weight:600;margin:0 0 5px}
.auth-modal .authField input{width:100%}
.auth-modal .authSubmit{width:100%;height:42px;justify-content:center;font-size:13.5px;margin-top:2px}
.auth-modal .authDivider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--p-text-muted-color);font-size:11.5px}
.auth-modal .authDivider::before,.auth-modal .authDivider::after{content:"";flex:1;height:1px;background:var(--p-content-border-color)}
.auth-modal #authGoogleBtn{display:flex;justify-content:center;min-height:40px}
.auth-modal .authError{margin-top:12px;font-size:12px;line-height:1.5;padding:9px 11px;border-radius:9px;color:var(--p-danger-600);background:color-mix(in srgb,var(--p-danger-500) 10%,transparent);border:1px solid color-mix(in srgb,var(--p-danger-500) 30%,transparent)}
.auth-modal .authForgot{display:block;text-align:right;font-size:12px;font-weight:600;color:var(--p-primary-600);text-decoration:none;margin:-6px 0 14px}
.auth-modal .authForgot:hover{text-decoration:underline}
.auth-modal .authVerifyIcon{width:48px;height:48px;border-radius:50%;background:var(--p-success-50);color:var(--p-success-600);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 14px}
.auth-modal .authHint{font-size:11.5px;color:var(--p-text-muted-color);margin-top:10px;line-height:1.5}
.auth-modal .authConsent{margin:4px 0 12px;padding:10px 12px;border:1px solid var(--p-content-border-color);border-radius:9px;background:var(--p-surface-50)}
.auth-modal .authConsent-row{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.4;margin:0 0 8px;color:var(--p-text-color)}
.auth-modal .authConsent-row:last-child{margin-bottom:0}
.auth-modal .authConsent-row input{margin-top:2px;flex:none}
.auth-modal .authConsent-row a{color:var(--p-primary-600);font-weight:600;text-decoration:none}
.auth-modal .authConsent-row a:hover{text-decoration:underline}
.auth-modal .google-wrap{position:relative;min-height:40px}
.auth-modal .google-wrap.gated{opacity:.45}
.auth-modal .google-wrap.gated::after{content:"";position:absolute;inset:0;z-index:2;cursor:not-allowed}
/* Feedback widget (centered modal — was a right-side slideout) */
.fb-panel{width:100%;max-width:340px;max-height:calc(100vh - 48px);overflow:auto;background:var(--p-surface-0);border:1px solid var(--p-content-border-color);border-radius:16px;box-shadow:var(--p-shadow-large);padding:18px;position:relative}
.fb-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.fb-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.fb-title i{color:var(--p-primary-500)}
.fb-x{width:30px;height:30px;border-radius:8px;border:none;background:var(--p-surface-100);color:var(--p-text-muted-color);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px}
.fb-x:hover{background:var(--p-surface-200)}
.fb-label{font-size:12.5px;font-weight:600;margin:14px 0 6px}
.fb-opt{font-weight:400;color:var(--p-text-muted-color)}
.fb-panel textarea,.fb-panel input.p-inputtext{width:100%;box-sizing:border-box}
.fb-panel textarea{resize:vertical;font-family:inherit;font-size:13.5px}
.fb-stars{display:flex;gap:6px}
.fb-star{font-size:26px;color:var(--p-surface-300);cursor:pointer;line-height:1;transition:color .12s,transform .12s}
.fb-star:hover{transform:scale(1.12)}
.fb-star.on{color:#F59E0B}
.fb-hp{position:absolute!important;left:-9999px!important;top:0;width:1px;height:1px;opacity:0}
.fb-err{margin-top:12px;font-size:12.5px;color:var(--p-danger-600,#dc2626);background:color-mix(in srgb,var(--p-danger-500,#ef4444) 10%,transparent);border:1px solid color-mix(in srgb,var(--p-danger-500,#ef4444) 30%,transparent);border-radius:9px;padding:8px 10px}
.fb-send{width:100%;height:44px;margin-top:16px;border-radius:11px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.fb-thanks{text-align:center;padding:20px 6px 8px}
.fb-check{width:52px;height:52px;border-radius:50%;background:var(--p-success-50);color:var(--p-success-600);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 12px}
.fb-thanks p{color:var(--p-text-muted-color);font-size:13.5px;margin:6px 0 0}
/* === v2 wizard chrome (not in editor.html) === */
#wizStepper{display:flex;align-items:center;gap:8px;padding:10px 28px;border-bottom:1px solid var(--p-content-border-color);background:var(--p-surface-0)}
.wiz-tab{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border:none;border-radius:9px;background:none;color:var(--p-text-muted-color);font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.wiz-tab:hover{background:var(--p-surface-100);color:var(--p-text-color)}
.wiz-tab.active{background:var(--p-primary-50);color:var(--p-primary-600)}
.wiz-num{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:var(--p-surface-200);color:var(--p-text-muted-color);font-size:11px;font-weight:700;flex:none}
.wiz-tab.active .wiz-num{background:var(--p-primary-500);color:#fff}
.wiz-sep{color:var(--p-surface-300);font-size:16px;flex:none}
.wiz-dot{width:8px;height:8px;border-radius:50%;background:var(--p-warning-500,#f59e0b);flex:none}
.wiz-dot.danger{background:var(--p-danger-500,#ef4444)}
.wiz-nav{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 14px;border-radius:9px;border:1px solid var(--p-content-border-color);background:var(--p-surface-0);color:var(--p-text-color);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.wiz-nav:hover{background:var(--p-surface-100)}
.wiz-next{background:var(--p-primary-500);border-color:var(--p-primary-500);color:#fff}
.wiz-next:hover{background:var(--p-primary-600)}
.wiz-stephead{padding:16px 22px 4px}
.wiz-stephead b{display:block;font-size:13px;font-weight:800;letter-spacing:-.01em}
.wiz-stephead span{font-size:11.5px;color:var(--p-text-muted-color)}
#configPanel.wiz-rail-off{display:none}
.cgs-nav.collapsed .wiz-tab{padding:0 8px}
/* Per-step preview: steps 1–2 = full-bleed checkerboard stage with the timer
centered; step 3 = the export card is the hero and the preview compacts
into a sticky white strip above it (still live-ticking, stays pinned while
the embed code scrolls). wizard.js stamps data-wiz-step on #viewEditor.
Canvas is a replaced element, so an !important height + width:auto scales
it proportionally over redraw()'s inline pixel size; steps 1–2 are
rule-free so the exact size is restored. The step-3 `background` shorthand
also clears .cgs-stage's checkerboard background-image. */
#viewEditor[data-wiz-step] > .cgs-scroll{display:flex;flex-direction:column}
#viewEditor[data-wiz-step] .cgs-stage{flex:1 1 auto}
#viewEditor[data-wiz-step="3"] .cgs-stage{flex:none;flex-direction:column;gap:8px;background:transparent;padding:26px 28px 0 !important;min-height:0 !important}
#viewEditor[data-wiz-step="3"] #canvas{height:110px !important;width:auto !important;max-width:100%}
/* Checkerboard behind the step-3 thumbnail: invisible for opaque timers (the
canvas paints its own background), shows through transparent ones. */
#viewEditor[data-wiz-step="3"] #canvasWrap{border:1px solid var(--p-content-border-color);background-color:var(--p-surface-100);background-image:linear-gradient(45deg,var(--p-surface-200) 25%,transparent 25%),linear-gradient(-45deg,var(--p-surface-200) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--p-surface-200) 75%),linear-gradient(-45deg,transparent 75%,var(--p-surface-200) 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0}
/* Step-3 full-page export column (no card) */
.wiz-export{width:100%;max-width:960px;margin:0 auto;padding:34px 32px 72px}
.wiz-ex-intro{margin:0 0 4px;font-size:13px;color:var(--p-text-muted-color);line-height:1.55;max-width:640px}
.wiz-ex-heading{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--p-text-muted-color);margin:28px 0 12px}
.wiz-ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:900px){.wiz-ex-grid{grid-template-columns:1fr}}
.wiz-action{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:30px;padding:20px 0;border-top:1px solid var(--p-content-border-color);border-bottom:1px solid var(--p-content-border-color)}
.wiz-code{display:block;width:100%;font-family:'Roboto Mono',ui-monospace,monospace;font-size:12px;line-height:1.6;resize:vertical;white-space:pre;background:#0F172A;color:#E2E8F0;border:1px solid #1E293B;border-radius:12px;padding:14px 16px;box-sizing:border-box}
.wiz-code:focus{outline:2px solid var(--p-primary-300)}
.wiz-dyn{margin:24px 0 4px;padding:16px 18px;background:var(--p-surface-50);border:1px solid var(--p-content-border-color);border-radius:12px}
.wiz-static-zone{margin-top:36px}
.wiz-static-row{display:flex;align-items:center;gap:10px;width:100%;padding:14px 16px;border:1px dashed var(--p-content-border-color);border-radius:11px;background:none;color:var(--p-text-muted-color);font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.wiz-static-row:hover{background:var(--p-surface-50);color:var(--p-text-color)}
.wiz-static-row.disabled{opacity:.45;cursor:not-allowed}
.wiz-static-row.disabled:hover{background:none;color:var(--p-text-muted-color)}
/* Once the static pane is open, its own goLiveEmbed link is the way back — hide the entry row */
.wiz-static-zone:has(#staticPane:not([hidden])) .wiz-static-row{display:none}
.wiz-pip-label{display:none;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--p-text-muted-color);letter-spacing:.02em}
.wiz-pip-label::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--p-success-500,#22c55e)}
#viewEditor[data-wiz-step="3"] .wiz-pip-label{display:inline-flex}
/* === Compact shell (<900px): column layout, top bar, off-canvas drawer.
The drawer is position:fixed so it escapes the shell's overflow:hidden;
z-index 9998/9999 stays below modals (10000), the overflow menu (10001),
and the impersonation banner (10002). Drawer visibility uses transform —
never [hidden], which is display:none!important above. === */
@media (max-width:900px){
.app-shell{flex-direction:column;min-height:0}
.cgs-mobilebar{display:flex;align-items:center;gap:10px;order:-1;flex:none;height:52px;padding:0 10px;background:var(--p-surface-0);border-bottom:1px solid var(--p-content-border-color)}
.cgs-nav,.cgs-nav.collapsed{position:fixed;top:0;bottom:0;left:0;width:280px;z-index:9999;transform:translateX(-105%);transition:transform .2s ease;box-shadow:var(--p-shadow-large)}
body.nav-open .cgs-nav{transform:none}
.cgs-scrim{position:fixed;inset:0;z-index:9998;background:var(--p-overlay)}
/* Collapse is a desktop-only concept: hide its button and neutralize the
persisted .collapsed label-hiding inside the drawer. */
.cgs-nav #navCollapse{display:none}
.cgs-nav.collapsed .nav-label,
.cgs-nav.collapsed #wsSwitcherSlot .ws-name,
.cgs-nav.collapsed #wsSwitcherSlot .ws-caret,
.cgs-nav.collapsed #authArea .email,
.cgs-nav.collapsed #authArea .who-caret{display:revert}
.cgs-nav.collapsed .nav-brand{justify-content:flex-start;padding:15px 14px}
.cgs-nav.collapsed #wsSwitcherSlot{padding:10px 10px 0}
.cgs-nav.collapsed #wsSwitcherSlot .ws-switch{justify-content:flex-start;padding:0 8px}
.cgs-nav.collapsed #authArea{margin:6px 10px 10px;padding:11px 12px;display:block}
.cgs-nav.collapsed #authArea:not(.logged-in){display:block}
.cgs-nav.collapsed #authArea .who{width:100%;justify-content:flex-start}
.cgs-nav.collapsed .nav-item{justify-content:flex-start;padding:9px 11px}
.cgs-nav.collapsed .side-utils{flex-direction:row;margin:2px 10px 8px}
.cgs-nav.collapsed .side-utils .util-btn{width:auto}
.cgs-view{padding:20px 16px}
/* --- Editor: pinned compact preview + full-width settings rail below.
Steps 1–2: #viewEditor shrinks to its natural height (topbar + stepper +
compact stage) and stops scrolling; the rail takes the remaining column
height and scrolls on its own, so the live preview stays visible while
tweaking. Step 3: wizard.js stamps .wiz-rail-off on #configPanel
(display:none) — the sibling selector hands the full column back to
#viewEditor and restores its inner scroll. #configPanel precedes
#viewEditor in the DOM, so `~` works. --- */
.cgs-editor{flex:none;min-height:0}
.cgs-rail{order:3;width:100%;flex:1 1 auto;height:auto;min-height:0;border-left:none;border-top:1px solid var(--p-content-border-color);overscroll-behavior:contain}
.cgs-editor .ed-scroll{flex:none;overflow:visible}
#configPanel.wiz-rail-off ~ #viewEditor{flex:1;min-height:0}
#configPanel.wiz-rail-off ~ #viewEditor .ed-scroll{flex:1;overflow-y:auto}
.cgs-stage{padding:14px;min-height:0}
/* Compact preview: the canvas is a replaced element, so auto width/height +
max constraints scale it proportionally from its intrinsic ratio — this
beats preview.js's per-tick inline pixel size without touching JS. The
step-3 rule (height:110px) is untouched and still applies there. */
#viewEditor[data-wiz-step="1"] #canvas,
#viewEditor[data-wiz-step="2"] #canvas{width:auto !important;height:auto !important;max-width:100% !important;max-height:140px}
.ed-topbar{padding:10px 12px}
#wizStepper{padding:8px 10px;gap:4px;overflow-x:auto}
}
@media (max-width:640px){
.cgs-view{padding:16px 12px}
.mb-title{font-size:13px}
.ed-livebadge{display:none}
/* Inactive wizard tabs shrink to their step number (the warning dot stays) */
#wizStepper .wiz-tab:not(.active) > span:not(.wiz-num):not(.wiz-dot){display:none}
#wizStepper .wiz-sep{display:none}
#wizStepper .wiz-tab{padding:0 8px}
#wizStepper .wiz-nav{padding:0 10px}
/* Back shrinks to its arrow (aria-label keeps its name); Next loses its
chevron — the primary action must fit fully on a 360px screen */
#wizBack > span,#wizNext > i{display:none}
/* Analytics phone tier: thumb · name · opens · chevron (extends the
existing 900px an-hide-narrow trim) */
.an-row{grid-template-columns:56px minmax(0,1fr) 74px 28px;gap:8px;padding:10px 12px}
.an-hide-phone{display:none}
.an-body-row > div:first-child canvas{width:56px !important;height:18px !important}
/* Modals: fit short viewports; the auth modal was 380px + 48px padding */
.cgs-modal-overlay{padding:14px}
.cgs-modal{max-height:calc(100dvh - 28px);overflow:auto}
.gate{margin:32px auto;padding:28px 18px}
.wiz-export{padding:20px 16px 56px}
.cgs-head{padding:14px 16px}
.cgs-body{padding:0 16px 16px}
/* iOS Safari zooms the page when a focused control's font is under 16px */
.cgs-rail .p-inputtext,.cgs-rail select{font-size:16px}
}