/* ============================================================================ wb-ui.css — the studio's own design system. Modern professional software: neutral dark surfaces, one accent, crisp 13px UI type, 8px grid, subtle depth. No gradients-as-decoration, no emoji. The user's SITE gets its own compiled stylesheet — never this one. ========================================================================== */ /* ---------------------------------- tokens ---------------------------------- The studio wears the platform's palette (app/css/tokens.css, copied from pragoptics.com, both themes). The studio's own names below point at the platform's, so every rule that reads --ui-* flips with [data-theme="light"] on and nothing here knows which theme is on. Dark is the ground truth; light swaps the two accents' roles (purple primary, teal accent), exactly as the platform does. Code surfaces stay dark in both, the platform's rule for terminals. */ :root{ --ui-bg:var(--bg-deep); --ui-canvas:var(--media-ground); --ui-panel:var(--panel-deep-a); --ui-panel-2:var(--panel-deep-b); --ui-hover:color-mix(in srgb, var(--ink) 9%, transparent); --ui-border:var(--border); --ui-border-soft:color-mix(in srgb, var(--border) 60%, transparent); --ui-border-strong:color-mix(in srgb, var(--ink) 22%, transparent); --ui-text:var(--ink); --ui-muted:var(--muted); --ui-faint:color-mix(in srgb, var(--muted) 72%, transparent); --ui-accent:var(--brand-600); --ui-accent-hover:color-mix(in srgb, var(--brand-600) 82%, var(--ink)); --ui-on-accent:var(--on-brand); --ui-accent-soft:var(--hi-bg); --ui-accent-2:var(--brand-purp-solid); /* second accent, the quieter action buttons */ --ui-accent-2-hover:var(--purp-bright); --ui-accent-2-soft:color-mix(in srgb, var(--brand-purp-solid) 16%, transparent); --ui-danger:var(--danger); --ui-warn:var(--brand-warn); --ui-ok:#3fb984; --ui-shade:#000; /* the base of every shadow */ --ui-scrim:#04060a; /* the base of every modal scrim */ --ui-glint:#fff; /* the base of every highlight hairline */ --ui-code-bg:#0c0e12; /* code surfaces: dark in both themes */ --ui-code-text:#d6dbe4; --ui-code-gutter:#464f5e; --ui-radius:var(--radius-btn); /* 10px: a rectangle with rounded corners, never a pill */ --ui-radius-lg:var(--radius-card); --ui-shadow:0 8px 28px color-mix(in srgb, var(--ui-shade) 45%, transparent); --ui-font:ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ui-mono:ui-monospace, "Cascadia Code", Consolas, monospace; --ui-zoom:1; /* whole-studio scale, stepped down on laptop viewports below */ } :root[data-theme="light"]{ --ui-ok:#1f8a5e; --ui-shade:rgba(30,20,64,.3); /* shadows soften on the white ground, the platform's shade */ --ui-scrim:#1e1440; --ui-glint:var(--ink); } /* The studio's densities were tuned on large monitors. On laptop-class viewports scale the WHOLE chrome down a notch instead of shrinking pieces one by one. (vh-based heights don't zoom — .studio compensates with /var(--ui-zoom).) */ @media (max-width:1560px){ :root{ --ui-zoom:.9; } } @media (max-width:1360px){ :root{ --ui-zoom:.85; } } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; height:100%; } code{ font-family:var(--ui-mono); } /* the house mono, everywhere code appears */ body{ font:14px/1.5 var(--ui-font); color:var(--ui-text); background:var(--grad) no-repeat fixed, var(--ui-bg); /* the platform's nebula tints over its ground */ overflow:hidden; /* the studio manages its own scroll areas */ -webkit-font-smoothing:antialiased; zoom:var(--ui-zoom); } .hidden{ display:none !important; } button{ font:inherit; color:inherit; } /* every form control renders its NATIVE widgets (autofill, search-clear ✕, spinners, * date pickers, carets) in dark — one base rule so no surface can leak a light-mode * native widget again (F3 shatter-scan root fix; per-context rules still add the rest) */ input, textarea, select{ color-scheme:inherit; } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--ui-text) 18%, transparent); border-radius:5px; border:2px solid transparent; background-clip:content-box; } ::-webkit-scrollbar-track{ background:transparent; } /* ------------------------------- primitives ------------------------------- */ .btn{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:var(--ui-radius); border:1px solid var(--ui-border); background:var(--ui-panel-2); color:var(--ui-text); cursor:pointer; white-space:nowrap; transition:background .12s ease, border-color .12s ease; } .btn:hover{ background:var(--ui-hover); border-color:var(--ui-border-strong); } .btn:disabled{ opacity:.45; cursor:default; } .btn.primary{ background:var(--ui-accent); border-color:transparent; color:var(--ui-on-accent); font-weight:600; } .btn.primary:hover{ background:var(--ui-accent-hover); } .btn.danger:hover{ border-color:var(--ui-danger); color:var(--ui-danger); } .btn.ghost{ background:transparent; border-color:transparent; color:var(--ui-muted); } .btn.ghost:hover{ background:var(--ui-hover); color:var(--ui-text); } .btn.sm{ padding:5px 11px; font-size:12px; gap:5px; } /* An icon and nothing else (the header's account and settings buttons, like the front end's header): the same button, squared up, the words in the title and the aria-label. */ .btn.icon-only{ padding:7px 9px; min-width:34px; justify-content:center; } .btn.icon-only .acc-chip{ margin:-2px 0; } .icon-btn{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:var(--ui-radius); border:1px solid transparent; background:transparent; color:var(--ui-muted); cursor:pointer; transition:background .12s ease, color .12s ease; } .icon-btn:hover{ background:var(--ui-hover); color:var(--ui-text); } .icon-btn.is-on{ background:var(--ui-accent-soft); color:var(--ui-accent-hover); border-color:color-mix(in srgb, var(--ui-accent) 40%, transparent); } .icon-btn:disabled{ opacity:.4; cursor:default; } .seg{ display:inline-flex; padding:3px; gap:2px; background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:10px; } .seg button{ display:inline-flex; align-items:center; gap:6px; border:none; background:transparent; color:var(--ui-muted); padding:5px 12px; border-radius:7px; cursor:pointer; transition:all .12s ease; } .seg button:hover{ color:var(--ui-text); } .seg button.is-on{ background:var(--ui-hover); color:var(--ui-text); font-weight:600; } .field{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; } .field > label{ font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--ui-faint); } .field input[type=text], .field input[type=email], .field input[type=url], .field input[type=number], .field select, .field textarea{ background:var(--ui-panel-2); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:var(--ui-radius); padding:7px 10px; outline:none; width:100%; font:inherit; /* form controls don't inherit font — without this every .field input renders the UA typeface (F3) */ } .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--ui-accent); } .field textarea{ resize:vertical; min-height:64px; font-family:inherit; } .row{ display:flex; gap:8px; align-items:center; } .row > *{ flex:1; } .row > .fix{ flex:0 0 auto; } input[type=range]{ width:100%; accent-color:var(--ui-accent); } input[type=color]{ width:34px; height:26px; padding:0; border:1px solid var(--ui-border); border-radius:6px; background:none; cursor:pointer; flex:0 0 auto; } input[type=checkbox]{ accent-color:var(--ui-accent); width:15px; height:15px; } .pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; padding:2.5px 9px; border-radius:999px; border:1px solid var(--ui-border); color:var(--ui-muted); background:var(--ui-panel); } .pill.on{ color:var(--ui-accent-hover); border-color:color-mix(in srgb, var(--ui-accent) 40%, transparent); background:var(--ui-accent-soft); } /* G3: the AI credits pill warns as the balance nears empty, then flags out */ .pill.is-low{ color:var(--ui-warn); border-color:color-mix(in srgb, var(--ui-warn) 40%, transparent); background:color-mix(in srgb, var(--ui-warn) 10%, transparent); } .pill.is-out{ color:var(--ui-danger); border-color:color-mix(in srgb, var(--ui-danger) 45%, transparent); background:color-mix(in srgb, var(--ui-danger) 10%, transparent); } .kbd{ font:11px var(--ui-mono); padding:1px 6px; border-radius:5px; border:1px solid var(--ui-border); background:var(--ui-panel-2); color:var(--ui-muted); } /* --------------------------------- topbar --------------------------------- */ .tb{ display:flex; align-items:center; gap:10px; height:48px; padding:0 12px; background:var(--ui-panel); border-bottom:1px solid var(--ui-border); /* the toolbar NEVER pushes the page wide — at any width where a mode is too dense * to fit, the bar itself scrolls horizontally (brand stays pinned) instead of the page */ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; } .tb::-webkit-scrollbar{ display:none; } .tb-brand{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px; overflow:hidden; padding:0; border:1px solid var(--ui-border); background:#000; cursor:pointer; transition:box-shadow .18s var(--ease); flex:0 0 auto; position:sticky; left:0; z-index:3; /* home never shrinks, clips, or scrolls out of reach */ } .tb-brand img{ width:100%; height:100%; object-fit:cover; display:block; } .tb-brand:hover{ box-shadow:0 0 0 1px color-mix(in srgb, var(--ui-accent-2) 50%, transparent), 0 0 14px color-mix(in srgb, var(--ui-accent-2) 35%, transparent); } .tb-wordmark{ font-weight:700; letter-spacing:2.5px; font-size:12.5px; text-transform:uppercase; background:linear-gradient(120deg,#b9c8ff,#c99df1 55%,#8fd7e8); -webkit-background-clip:text; background-clip:text; color:transparent; user-select:none; flex:0 1 auto; min-width:0; white-space:nowrap; overflow:hidden; /* decorative — yields before anything functional */ } .tb-name{ background:transparent; border:1px solid transparent; border-radius:7px; color:var(--ui-text); font-weight:600; font-size:13px; padding:5px 8px; min-width:0; max-width:220px; flex:1 1 auto; /* the flexible middle — shrinks (with ellipsis) instead of overflowing the bar */ text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } /* the universal Pages menu trigger — lives beside the project name in every mode */ .tb-pages{ display:inline-flex; align-items:center; gap:5px; background:transparent; border:1px solid transparent; border-radius:7px; color:var(--ui-muted); font:inherit; font-size:12px; padding:5px 9px; cursor:pointer; flex:0 0 auto; transition:none; } .tb-pages:hover{ color:var(--ui-text); background:var(--ui-hover); border-color:var(--ui-border); } .tb-pages svg:last-child{ color:var(--ui-faint); } .tb-pages-pop .ws-menu-item.is-cur{ background:var(--ui-hover); } .tb-pages-pop .ws-menu-item.is-cur small{ color:var(--ui-accent); display:inline-flex; align-items:center; gap:3px; } .tb-name:hover{ border-color:var(--ui-border); } .tb-name:focus{ border-color:var(--ui-accent); outline:none; background:var(--ui-panel-2); } .tb-spacer{ flex:1; } .tb-group{ display:flex; align-items:center; gap:2px; } .tb-sep{ width:1px; height:22px; background:var(--ui-border); margin:0 6px; } .tb-break{ display:none; } /* the phone layer's row break (below) */ /* --------------------------------- studio --------------------------------- */ /* 100vh doesn't shrink with zoom — divide it back out so the studio still fills the window exactly */ .studio{ display:flex; height:calc(100vh / var(--ui-zoom) - var(--tb-h, 48px) - var(--devc-h, 0px)); } .rail{ /* left: add-module palette */ width:220px; flex:0 0 auto; display:flex; flex-direction:column; background:var(--ui-panel); border-right:1px solid var(--ui-border); transition:margin-left .18s ease; } .rail.is-closed{ margin-left:-220px; } .rail-head, .insp-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px 8px; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--ui-faint); } .rail-list{ overflow-y:auto; padding:4px 8px 16px; } .rail-cat{ margin:10px 4px 4px; font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--ui-faint); } .mod{ width:100%; display:flex; align-items:center; gap:10px; padding:8px 10px; margin-bottom:2px; background:transparent; border:1px solid transparent; border-radius:var(--ui-radius); color:var(--ui-text); cursor:pointer; text-align:left; transition:background .12s ease, border-color .12s ease; } .mod:hover{ background:var(--ui-hover); border-color:var(--ui-border); } .mod .mod-ic{ color:var(--ui-muted); display:grid; place-items:center; } .mod:hover .mod-ic{ color:var(--ui-accent-hover); } .mod small{ display:block; color:var(--ui-faint); font-size:11px; } /* middle column: the page bar rides above the canvas so pages are always visible */ .canvas-col{ flex:1; min-width:0; display:flex; flex-direction:column; } .pagebar{ display:flex; align-items:center; gap:4px; padding:5px 12px; border-bottom:1px solid var(--ui-border); background:var(--ui-panel); min-height:36px; overflow-x:auto; flex:0 0 auto; } .pagetab{ display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid transparent; border-radius:7px; color:var(--ui-muted); font:inherit; font-size:12px; padding:4px 12px; cursor:pointer; white-space:nowrap; flex:0 0 auto; max-width:190px; overflow:hidden; text-overflow:ellipsis; } .pagetab:hover{ color:var(--ui-text); background:var(--ui-hover); } .pagetab.is-on{ color:var(--ui-text); background:var(--ui-panel-2); border-color:var(--ui-border); } .pagetab-ic{ display:inline-flex; color:var(--ui-faint); } .pagetab.is-on .pagetab-ic{ color:var(--ui-accent); } .pagetab-add{ display:inline-flex; align-items:center; gap:5px; background:none; border:1px dashed var(--ui-border); border-radius:7px; color:var(--ui-muted); font:inherit; font-size:12px; padding:4px 10px; cursor:pointer; flex:0 0 auto; margin-left:2px; } .pagetab-add:hover{ color:var(--ui-text); border-color:var(--ui-border-strong,var(--ui-border)); } .canvas-wrap{ flex:1; position:relative; overflow:auto; background:var(--ui-canvas); background-image:radial-gradient(var(--ui-border-soft) 1px, transparent 1px); background-size:22px 22px; display:flex; align-items:flex-start; justify-content:center; padding:26px; } .canvas-frame{ width:100%; max-width:1200px; height:calc(100% - 4px); background:#fff; border-radius:10px; overflow:hidden; border:1px solid var(--ui-border); box-shadow:var(--ui-shadow); transition:max-width .25s ease; } .canvas-frame.phone{ max-width:400px; } .canvas-frame iframe{ width:100%; height:100%; border:none; display:block; background:#fff; } .insp{ /* right: inspector */ width:290px; flex:0 0 auto; display:flex; flex-direction:column; background:var(--ui-panel); border-left:1px solid var(--ui-border); transition:margin-right .18s ease; } .insp.is-closed{ margin-right:-290px; } .insp-tabs{ display:flex; gap:2px; padding:8px 10px 0; border-bottom:1px solid var(--ui-border-soft); } .insp-tab{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:7px 4px; background:transparent; border:none; cursor:pointer; color:var(--ui-muted); border-bottom:2px solid transparent; font-size:12px; } .insp-tab:hover{ color:var(--ui-text); } .insp-tab.is-on{ color:var(--ui-text); border-bottom-color:var(--ui-accent); font-weight:600; } .insp-body{ flex:1; overflow-y:auto; padding:14px; } .insp-sec{ border-top:1px solid var(--ui-border-soft); margin-top:14px; padding-top:12px; } .insp-sec:first-child{ border-top:none; margin-top:0; padding-top:0; } .insp-sec > h4{ margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--ui-faint); } .insp-empty{ color:var(--ui-faint); text-align:center; padding:40px 12px; } .insp-empty svg{ opacity:.5; margin-bottom:10px; } .swatches{ display:flex; gap:8px; flex-wrap:wrap; } .swatch{ width:44px; height:30px; border-radius:7px; cursor:pointer; border:1px solid var(--ui-border); position:relative; overflow:hidden; padding:0; } .swatch span{ position:absolute; inset:0 55% 0 0; } .swatch.is-on{ outline:2px solid var(--ui-accent); outline-offset:1px; } .list-editor .le-row{ display:flex; gap:6px; margin-bottom:6px; } .list-editor input{ flex:1; min-width:0; background:var(--ui-panel-2); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:7px; padding:6px 8px; } .asset-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .asset-cell{ position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--ui-border); aspect-ratio:1; } .asset-cell img{ width:100%; height:100%; object-fit:cover; display:block; } .asset-cell .del{ position:absolute; top:4px; right:4px; width:20px; height:20px; display:grid; place-items:center; border-radius:6px; border:none; cursor:pointer; background:color-mix(in srgb, var(--ui-shade) 65%, transparent); color:#fff; } .dropzone{ display:grid; place-items:center; text-align:center; gap:4px; padding:18px 12px; min-height:74px; margin-bottom:10px; border:1.5px dashed var(--ui-border); border-radius:var(--ui-radius); color:var(--ui-muted); cursor:pointer; transition:all .15s ease; } .dropzone:hover, .dropzone.is-drag{ border-color:var(--ui-accent); color:var(--ui-text); background:var(--ui-accent-soft); } /* ------------------------------ splash & menu ------------------------------ */ .gate{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:radial-gradient(1200px 700px at 50% 30%, var(--ui-panel) 0%, var(--ui-bg) 60%); overflow:auto; } .splash-stage{ display:grid; place-items:center; } .splash-art{ width:min(760px, 92vw); border-radius:20px; display:block; animation:markIn .7s cubic-bezier(.2,.8,.25,1) both; box-shadow:0 24px 90px color-mix(in srgb, var(--ui-accent-2) 40%, transparent), 0 0 0 1px color-mix(in srgb, var(--ui-glint) 6%, transparent); } @keyframes markIn{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } } @keyframes fadeUp{ from{ transform:translateY(8px); opacity:0; } to{ transform:none; opacity:1; } } .gate.fade-out{ animation:gateOut .35s ease both; } @keyframes gateOut{ to{ opacity:0; visibility:hidden; } } .menu-wrap{ width:min(860px, 92vw); padding:40px 0 60px; animation:fadeUp .5s ease both; } .menu-wrap h1{ font-size:24px; font-weight:650; margin:0 0 4px; } .menu-wrap > p{ color:var(--ui-muted); margin:0 0 26px; } /* same column math as .proj-grid so the "Your projects" and "Start something new" * sections line up column-for-column (shared 260px min, 12px gap, auto-fill) */ .create-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:14px; } .create-card{ text-align:left; padding:20px; cursor:pointer; background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:var(--ui-radius-lg); color:var(--ui-text); transition:transform .15s ease, border-color .15s ease, background .15s ease; display:flex; flex-direction:column; gap:8px; position:relative; } .create-card:hover{ transform:translateY(-2px); border-color:var(--ui-border-strong); background:var(--ui-panel-2); } .create-card:disabled{ opacity:.55; cursor:default; } .create-card:disabled:hover{ transform:none; } .cc-ic{ color:var(--ui-accent-hover); } .cc-t{ font-weight:650; font-size:14.5px; } .cc-s{ color:var(--ui-muted); font-size:12.5px; line-height:1.45; } .cc-flag{ position:absolute; top:12px; right:12px; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:2px 8px; border-radius:999px; color:var(--ui-warn); border:1px solid color-mix(in srgb, var(--ui-warn) 35%, transparent); background:color-mix(in srgb, var(--ui-warn) 8%, transparent); } /* guided-build card: the "do it all" first entry — accent-lit so it stands apart from the six mode cards; theme-aware (uses the user's accent), filled flag vs. beta's soft. */ .create-card-guided{ border-color:var(--ui-accent); background:linear-gradient(180deg, var(--ui-accent-soft), var(--ui-panel)); } .create-card-guided:hover:not(:disabled){ border-color:var(--ui-accent-hover); background:linear-gradient(180deg, var(--ui-accent-soft), var(--ui-panel-2)); } .create-card-guided .cc-ic{ color:var(--ui-accent); } .cc-flag.guided{ color:var(--ui-on-accent); border-color:transparent; background:var(--ui-accent); } .menu-foot{ margin-top:22px; display:flex; gap:10px; align-items:center; } /* ------------------------------- code mode ------------------------------- */ .ed-shell{ display:flex; flex:1; min-width:0; height:100%; } .ed-side{ width:230px; flex:0 0 auto; background:var(--ui-panel); border-right:1px solid var(--ui-border); padding:10px; overflow-y:auto; } .ed-folder{ margin-bottom:2px; } .ed-folder-head{ width:100%; display:flex; align-items:center; gap:6px; padding:6px 6px; background:transparent; border:none; border-radius:7px; color:var(--ui-muted); cursor:pointer; font-size:11.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; } .ed-folder-head:hover{ background:var(--ui-hover); color:var(--ui-text); } .ed-folder-head .chev{ display:grid; place-items:center; transition:transform .15s var(--ease); } .ed-folder.is-closed .chev{ transform:rotate(-90deg); } .ed-folder-head .cnt{ margin-left:auto; font-weight:600; color:var(--ui-faint); } .ed-folder-body{ padding-left:14px; } .ed-folder.is-closed .ed-folder-body{ display:none; } .ed-asset{ width:100%; display:flex; align-items:center; gap:8px; padding:5px 9px; border-radius:7px; border:1px solid transparent; background:transparent; color:var(--ui-muted); font:12px var(--ui-mono); text-align:left; cursor:default; } .ed-asset img{ width:20px; height:20px; object-fit:cover; border-radius:4px; border:1px solid var(--ui-border); } .ed-asset span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ed-file{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:8px; font:12px var(--ui-mono); color:var(--ui-muted); text-align:left; cursor:pointer; background:transparent; border:1px solid transparent; border-radius:7px; padding:7px 9px; margin-bottom:2px; } .ed-file:hover{ background:var(--ui-hover); color:var(--ui-text); } .ed-file.is-on{ background:var(--ui-hover); color:var(--ui-text); border-color:var(--ui-border); } .ed-main{ flex:1; display:flex; flex-direction:column; min-width:0; } .ed-surface{ flex:1; display:flex; min-height:0; } .ed-banner{ padding:8px 14px; font-size:12px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:color-mix(in srgb, var(--ui-warn) 8%, transparent); border-bottom:1px solid color-mix(in srgb, var(--ui-warn) 25%, transparent); color:var(--ui-text); } .tok-tag{ color:#67c5e0; } .tok-attr{ color:#c39cf2; } .tok-str{ color:#d8a15c; } .tok-com{ color:var(--ui-faint); } /* ----------------------- shared code surface (codeSurface.js) ----------------------- */ .cs{ position:relative; display:flex; flex:1; min-height:0; background:var(--ui-code-bg); overflow:hidden; --cs-fs:13px; --cs-tab:2; } .cs-gutter{ flex:0 0 auto; width:46px; padding:14px 8px 14px 0; margin:0; text-align:right; font:var(--cs-fs)/1.6 var(--ui-mono); color:var(--ui-code-gutter); background:var(--ui-code-bg); border-right:1px solid var(--ui-border-soft); white-space:pre; overflow:hidden; user-select:none; } .cs-scroll{ position:relative; flex:1; min-width:0; } .cs-hl, .cs-ta{ position:absolute; inset:0; margin:0; padding:14px 16px; font:var(--cs-fs)/1.6 var(--ui-mono); tab-size:var(--cs-tab); white-space:pre; overflow:auto; border:none; } .cs-hl{ pointer-events:none; color:var(--ui-code-text); background:transparent; } .cs-ta{ resize:none; outline:none; background:transparent; color:transparent; caret-color:var(--ui-accent-hover); } .cs.is-wrap .cs-hl, .cs.is-wrap .cs-ta{ white-space:pre-wrap; word-break:break-word; } /* -------------------------------- toasts -------------------------------- */ /* z 380: toasts must never hide behind dialogs (idlg 240s) — progress and * outcomes stay visible even with a modal up */ .toast-wrap{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:380; display:flex; flex-direction:column; gap:8px; align-items:center; } .toast{ background:var(--ui-panel-2); border:1px solid var(--ui-border); color:var(--ui-text); border-radius:9px; padding:10px 16px; font-size:13.5px; box-shadow:var(--ui-shadow); transition:opacity .35s ease; } .toast.warn{ border-color:color-mix(in srgb, var(--ui-warn) 50%, transparent); } .toast.ok{ border-color:color-mix(in srgb, var(--ui-accent) 55%, transparent); } .toast.has-action{ display:flex; align-items:center; gap:12px; padding-right:8px; } .toast-action{ flex:0 0 auto; background:var(--ui-accent); color:var(--ui-on-accent); border:none; border-radius:7px; padding:5px 12px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; } .toast-action:hover{ filter:brightness(1.08); } .toast.is-busy, .toast.is-settled{ display:flex; align-items:center; gap:9px; } .toast-mark{ flex:0 0 auto; font-weight:700; } .toast.ok .toast-mark{ color:var(--ui-accent-hover); } .toast.warn .toast-mark{ color:var(--ui-warn); } .toast-spin{ width:13px; height:13px; flex:0 0 auto; border-radius:50%; border:2px solid var(--ui-border); border-top-color:var(--ui-accent); animation:toastSpin .7s linear infinite; } @keyframes toastSpin{ to{ transform:rotate(360deg); } } /* project card while its draft opens — spinner replaces the meta line */ .proj-card.is-opening{ pointer-events:none; } .proj-card.is-opening .pc-thumb{ opacity:.5; } .pc-meta .toast-spin{ display:inline-block; vertical-align:-2px; margin-right:6px; width:11px; height:11px; } /* in-dialog busy state (recover batch runs with the summary open) */ .idlg label.is-busy{ pointer-events:none; opacity:.75; } .idlg label.is-busy .toast-spin{ display:inline-block; vertical-align:-2px; margin-right:7px; border-top-color:var(--ui-on-accent); } /* ------------------------------- notebook ------------------------------- */ .nb-shell{ flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; background:var(--ui-canvas); } .nb-foot{ flex:0 0 auto; } .nb-wrap{ max-width:920px; margin:0 auto; padding:22px 20px 60px; } .nb-toolbar{ display:flex; align-items:center; gap:8px; margin-bottom:14px; } .nb-cell{ background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:var(--ui-radius-lg); margin-bottom:16px; overflow:hidden; box-shadow:0 1px 2px color-mix(in srgb, var(--ui-shade) 30%, transparent), 0 6px 18px color-mix(in srgb, var(--ui-shade) 22%, transparent); transition:border-color .16s var(--ease); } .nb-cell:focus-within{ border-color:color-mix(in srgb, var(--ui-accent) 45%, transparent); } .nb-head{ display:flex; align-items:center; gap:6px; padding:7px 10px; border-bottom:1px solid var(--ui-border-soft); background:var(--ui-panel-2); } .nb-lang{ background:transparent; color:var(--ui-muted); border:1px solid var(--ui-border); border-radius:7px; padding:4px 8px; font-size:11.5px; cursor:pointer; } .nb-run{ padding:5px 12px; } .nb-editor{ position:relative; height:190px; min-height:90px; resize:vertical; overflow:hidden; background:var(--ui-code-bg); } .nb-editor textarea, .nb-editor pre{ position:absolute; inset:0; margin:0; padding:14px 16px; font:12.5px/1.6 var(--ui-mono); white-space:pre; overflow:auto; tab-size:4; border:none; } .nb-editor pre{ pointer-events:none; color:var(--ui-code-text); background:transparent; } .nb-editor textarea{ resize:none; outline:none; background:transparent; color:transparent; caret-color:var(--ui-accent-hover); } .nb-out{ border-top:1px dashed var(--ui-border); background:var(--ui-code-bg); } .nb-stdout{ margin:0; padding:12px 16px; font:12.5px/1.6 var(--ui-mono); color:#9fd3c4; white-space:pre-wrap; word-break:break-word; max-height:300px; overflow:auto; } .nb-stdout.nb-err{ color:var(--ui-danger); } .nb-note{ padding:10px 16px; color:var(--ui-faint); font-size:12px; } .nb-live{ width:100%; height:240px; border:none; background:#fff; display:block; } .nb-viz{ border:1px solid var(--ui-border); border-radius:8px; margin-bottom:8px; background:var(--ui-code-bg); } .nb-outimg{ max-width:100%; border:1px solid var(--ui-border); border-radius:8px; margin-bottom:8px; display:block; } .nb-foot{ color:var(--ui-faint); font-size:11.5px; text-align:center; margin-top:22px; } .nb-datahint{ color:var(--ui-muted); } .nb-datahint b{ color:var(--ui-text); } .nb-datahint code, .nb-foot code{ font-family:var(--ui-mono); font-size:.92em; background:var(--ui-hover); padding:1px 5px; border-radius:5px; color:var(--ui-accent-hover); } .nb-spin{ display:inline-block; width:12px; height:12px; border-radius:50%; border:2px solid color-mix(in srgb, var(--ui-glint) 25%, transparent); border-top-color:var(--ui-on-accent); animation:nbspin .7s linear infinite; } @keyframes nbspin{ to{ transform:rotate(360deg); } } /* ----------------------- polish layer (micro-detail) ----------------------- The physical feel lives here: layered shadows, press states, focus rings, entrance motion, and grain at whisper volume. Restraint is the feature. */ :root{ --ease:cubic-bezier(.2,.7,.3,1); --ui-shadow-1:0 1px 2px color-mix(in srgb, var(--ui-shade) 35%, transparent), 0 8px 24px color-mix(in srgb, var(--ui-shade) 28%, transparent); --ui-shadow-2:0 2px 4px color-mix(in srgb, var(--ui-shade) 40%, transparent), 0 16px 44px color-mix(in srgb, var(--ui-shade) 42%, transparent); } body::after{ /* film grain — barely there */ content:""; position:fixed; inset:0; z-index:500; pointer-events:none; opacity:.02; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } .btn, .icon-btn, .seg button, .mod, .create-card, .swatch, .ed-file, .insp-tab{ transition:background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease), transform .14s var(--ease), box-shadow .18s var(--ease); } .btn:active, .icon-btn:active, .mod:active, .create-card:active:not(:disabled){ transform:translateY(1px) scale(.995); } .btn.primary{ box-shadow:0 1px 2px color-mix(in srgb, var(--ui-shade) 35%, transparent), 0 4px 14px color-mix(in srgb, var(--ui-accent) 25%, transparent); } .btn.primary:active{ box-shadow:0 1px 4px color-mix(in srgb, var(--ui-accent) 30%, transparent); } :is(.btn, .icon-btn, .seg button, .mod, .create-card, .insp-tab, .tb-name, .nb-lang):focus-visible{ outline:2px solid var(--ui-accent); outline-offset:1px; } .seg{ box-shadow:inset 0 1px 2px color-mix(in srgb, var(--ui-shade) 35%, transparent); } .seg button.is-on{ box-shadow:0 1px 2px color-mix(in srgb, var(--ui-shade) 40%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ui-glint) 4%, transparent); } .tb{ box-shadow:0 1px 0 color-mix(in srgb, var(--ui-shade) 40%, transparent); } .rail, .insp{ box-shadow:inset 0 0 0 0 transparent; } .canvas-frame{ box-shadow:var(--ui-shadow-2), 0 0 0 1px color-mix(in srgb, var(--ui-glint) 3%, transparent); } .create-card{ box-shadow:0 1px 2px color-mix(in srgb, var(--ui-shade) 30%, transparent); } .create-card:hover:not(:disabled){ box-shadow:var(--ui-shadow-1); } .create-card:hover:not(:disabled) .cc-ic{ transform:translateY(-1px); } .cc-ic{ transition:transform .18s var(--ease); } .mod:hover .mod-ic{ transform:translateX(1px); } .mod-ic{ transition:transform .16s var(--ease), color .14s var(--ease); } .toast{ animation:toastIn .28s var(--ease) both; } @keyframes toastIn{ from{ transform:translateY(10px); opacity:0; } to{ transform:none; opacity:1; } } .insp-body{ scrollbar-gutter:stable; } .insp-sec{ animation:secIn .2s var(--ease) both; } @keyframes secIn{ from{ opacity:.4; } to{ opacity:1; } } ::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--ui-text) 28%, transparent); background-clip:content-box; border:2px solid transparent; } .splash-stage{ position:relative; } .splash-stage::after{ content:""; position:absolute; inset:-14px; border-radius:34px; border:1.5px solid color-mix(in srgb, var(--ui-accent-2) 35%, transparent); pointer-events:none; animation:ringPulse 1.6s var(--ease) .35s both; } @keyframes ringPulse{ 0%{ transform:scale(.92); opacity:0; } 45%{ opacity:1; } 100%{ transform:scale(1.05); opacity:0; } } /* --------------------------- AI assistant dock --------------------------- One coherent surface built from the studio tokens: 13px type throughout, 8px grid, one accent. Header · "runs here" status strip · thread · composer. */ .ai-dock{ position:absolute; right:18px; bottom:18px; width:392px; max-width:calc(100vw - 32px); max-height:calc(100vh - 96px); display:none; flex-direction:column; min-height:0; background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:var(--ui-radius-lg); box-shadow:var(--ui-shadow-2); overflow:hidden; z-index:60; animation:aiIn .2s var(--ease) both; } .ai-dock.is-open{ display:flex; } @keyframes aiIn{ from{ transform:translateY(12px) scale(.98); opacity:0; } to{ transform:none; opacity:1; } } /* header — title pinned left, window controls right; never clips */ .ai-head{ display:flex; align-items:center; gap:6px; flex:0 0 auto; padding:9px 8px 9px 14px; border-bottom:1px solid var(--ui-border); background:var(--ui-panel-2); } .ai-title{ display:flex; align-items:center; gap:8px; min-width:0; margin-right:auto; } .ai-title svg{ color:var(--ui-accent-hover); flex:0 0 auto; } .ai-title b{ font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--ui-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ai-head .icon-btn{ width:28px; height:28px; flex:0 0 auto; } /* the "where it runs" strip — reads as a local agent at a glance */ .ai-sub{ display:flex; align-items:center; gap:10px; flex:0 0 auto; padding:8px 14px; background:var(--ui-panel); border-bottom:1px solid var(--ui-border-soft); } .ai-where{ display:inline-flex; align-items:center; gap:7px; min-width:0; font-size:12px; font-weight:600; color:var(--ui-text); white-space:nowrap; } .ai-live{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--ui-accent); box-shadow:0 0 0 3px var(--ui-accent-soft); } .ai-live.warn{ background:var(--ui-warn); box-shadow:0 0 0 3px color-mix(in srgb, var(--ui-warn) 14%, transparent); } .ai-live.off{ background:var(--ui-faint); box-shadow:none; } /* the chat-box model picker — switch models without opening Settings */ .ai-modelsel{ margin-left:auto; max-width:62%; font:11px var(--ui-mono); color:var(--ui-muted); background:var(--ui-panel-2); border:1px solid var(--ui-border); border-radius:7px; padding:3px 7px; outline:none; cursor:pointer; transition:border-color .12s var(--ease), color .12s var(--ease); } .ai-modelsel:hover{ border-color:var(--ui-border-strong); color:var(--ui-text); } .ai-modelsel:focus{ border-color:var(--ui-accent); } /* thread */ .ai-thread{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px; } .ai-msg{ max-width:86%; padding:9px 13px; border-radius:14px; font-size:13px; line-height:1.5; word-break:break-word; } .ai-user{ align-self:flex-end; background:var(--ui-accent); color:var(--ui-on-accent); border-bottom-right-radius:5px; } .ai-bot{ align-self:flex-start; background:var(--ui-panel-2); border:1px solid var(--ui-border); border-bottom-left-radius:5px; } .ai-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; } .ai-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; padding:3px 9px; border-radius:7px; background:var(--ui-accent-soft); color:var(--ui-accent-hover); border:1px solid color-mix(in srgb, var(--ui-accent) 28%, transparent); } .ai-chip.err{ background:color-mix(in srgb, var(--ui-danger) 12%, transparent); color:var(--danger-text); border-color:color-mix(in srgb, var(--ui-danger) 32%, transparent); } /* the quiet run footer under a model turn — model · where · elapsed · dropped */ .ai-meta{ margin-top:8px; font-size:11px; color:var(--ui-faint); letter-spacing:.01em; } /* pending + download progress */ .ai-pending{ display:flex; align-items:flex-start; gap:10px; } /* Stop — a local run can take minutes on a weak GPU; the way out must not be "reload the page" */ .ai-stop{ margin-left:auto; flex:0 0 auto; align-self:center; background:transparent; border:1px solid var(--ui-border); color:var(--ui-muted); font:inherit; font-size:11px; padding:3px 9px; border-radius:999px; cursor:pointer; } .ai-stop:hover{ color:var(--ui-text); border-color:var(--ui-danger); } .ai-spin{ width:15px; height:15px; flex:0 0 auto; margin-top:1px; border-radius:50%; border:2px solid var(--ui-border); border-top-color:var(--ui-accent-hover); animation:aiSpin .7s linear infinite; } @keyframes aiSpin{ to{ transform:rotate(360deg); } } .ai-pending-body{ min-width:0; flex:1 1 auto; } .ai-pending-text{ font-size:12.5px; color:var(--ui-muted); line-height:1.45; } .ai-bar{ height:5px; margin-top:9px; border-radius:999px; background:var(--ui-hover); overflow:hidden; } .ai-bar i{ display:block; height:100%; border-radius:999px; background:var(--ui-accent); transition:width .2s var(--ease); } .reduce-motion .ai-spin, .force-reduce-motion .ai-spin{ animation:none; } /* empty state — premium, with clickable starters */ .ai-empty{ margin:auto; text-align:center; padding:8px 6px; max-width:302px; } .ai-empty-ic{ display:grid; place-items:center; width:44px; height:44px; margin:0 auto 13px; border-radius:13px; background:var(--ui-accent-soft); color:var(--ui-accent-hover); border:1px solid color-mix(in srgb, var(--ui-accent) 28%, transparent); } .ai-empty h4{ margin:0 0 5px; font-size:14px; font-weight:600; color:var(--ui-text); } .ai-empty p{ margin:0; font-size:12px; line-height:1.55; color:var(--ui-muted); } .ai-examples{ display:flex; flex-direction:column; gap:7px; margin-top:16px; } .ai-ex{ display:flex; align-items:center; gap:8px; text-align:left; width:100%; font:inherit; font-size:12.5px; color:var(--ui-text); padding:9px 11px; border-radius:9px; background:var(--ui-panel-2); border:1px solid var(--ui-border); cursor:pointer; transition:border-color .12s var(--ease), background .12s var(--ease); } .ai-ex svg{ color:var(--ui-faint); flex:0 0 auto; } .ai-ex span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ai-ex:hover{ border-color:var(--ui-accent); background:var(--ui-hover); } .ai-ex:hover svg{ color:var(--ui-accent-hover); } /* composer — textarea and send are the same 40px height, aligned */ .ai-inrow{ display:flex; gap:9px; align-items:flex-end; flex:0 0 auto; padding:12px 14px; border-top:1px solid var(--ui-border); background:var(--ui-panel-2); } .ai-inrow textarea{ flex:1 1 auto; resize:none; min-height:40px; max-height:140px; background:var(--ui-panel); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:10px; padding:10px 12px; font:inherit; font-size:13px; line-height:1.45; outline:none; transition:border-color .12s var(--ease), box-shadow .12s var(--ease); } .ai-inrow textarea::placeholder{ color:var(--ui-faint); } .ai-inrow textarea:focus{ border-color:var(--ui-accent); box-shadow:0 0 0 3px var(--ui-accent-soft); } .ai-send{ flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center; border:none; border-radius:10px; background:var(--ui-accent); color:var(--ui-on-accent); cursor:pointer; transition:background .12s var(--ease), transform .1s var(--ease); } .ai-send:hover{ background:var(--ui-accent-hover); } .ai-send:active{ transform:scale(.94); } .ai-send.is-busy, .ai-send:disabled{ opacity:.5; cursor:progress; } #tbAI svg{ color:var(--ui-accent-hover); } #tbAI.is-on{ background:var(--ui-accent-soft); border-color:color-mix(in srgb, var(--ui-accent) 40%, transparent); } #tbAI.needs-acct{ color:var(--ui-warn); } /* ------------------------------- settings ------------------------------- */ .set-overlay{ position:fixed; inset:0; z-index:150; display:none; } .set-overlay.is-open{ display:block; } .set-scrim{ position:absolute; inset:0; background:color-mix(in srgb, var(--ui-scrim) 60%, transparent); backdrop-filter:blur(2px); animation:fadeUp .2s ease both; } .set-modal{ position:absolute; inset:0; margin:auto; width:min(820px, 94vw); height:min(560px, 90vh); display:flex; background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:var(--ui-radius-lg); overflow:hidden; box-shadow:var(--ui-shadow-2); animation:aiIn .22s var(--ease) both; } .set-tree{ width:210px; flex:0 0 auto; background:var(--ui-panel-2); border-right:1px solid var(--ui-border); padding:12px 10px; } .set-tree-head{ font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--ui-faint); padding:4px 8px 10px; } .set-nav{ width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; margin-bottom:2px; background:transparent; border:1px solid transparent; border-radius:8px; color:var(--ui-muted); cursor:pointer; text-align:left; } .set-nav:hover{ background:var(--ui-hover); color:var(--ui-text); } .set-nav.is-on{ background:var(--ui-accent-soft); color:var(--ui-accent-hover); border-color:color-mix(in srgb, var(--ui-accent) 35%, transparent); } .set-nav svg{ flex:0 0 auto; } .set-main{ flex:1; display:flex; flex-direction:column; min-width:0; } .set-main-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px; border-bottom:1px solid var(--ui-border-soft); } .set-main-head h2{ margin:0; font-size:16px; font-weight:650; } .set-body{ flex:1; overflow-y:auto; padding:18px; } .set-field{ margin-bottom:20px; } .set-field > label{ display:block; font-size:12px; font-weight:600; color:var(--ui-text); margin-bottom:8px; } .set-hint{ display:block; color:var(--ui-faint); font-size:11.5px; margin-top:6px; line-height:1.5; } .set-note{ color:var(--ui-muted); font-size:12px; background:var(--ui-panel-2); border:1px solid var(--ui-border); border-radius:8px; padding:10px 12px; margin:0 0 18px; } .set-row{ display:flex; align-items:center; gap:12px; } /* local-model status line (Settings → AI assistant) */ .set-status{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ui-muted); line-height:1.5; } .set-status code{ font:11.5px var(--ui-mono); background:var(--ui-panel-2); border:1px solid var(--ui-border); border-radius:5px; padding:1px 5px; } .set-dot{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--ui-faint); } .set-dot.is-ok{ background:var(--ui-ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ui-ok) 18%, transparent); } .set-dot.is-off{ background:var(--ui-muted); } .set-dot.is-wait{ background:var(--ui-accent); animation:aiPulse 1.1s ease-in-out infinite; } @keyframes aiPulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } } .set-steps{ margin:8px 0 0; padding-left:18px; line-height:1.9; } .set-steps code{ font:11.5px var(--ui-mono); background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:5px; padding:1px 5px; } .set-swatches{ display:flex; gap:6px; flex-wrap:wrap; } .set-swatches.wide{ gap:8px; } .set-sw{ width:26px; height:26px; border-radius:7px; border:1px solid var(--ui-border); cursor:pointer; } .set-sw:hover{ transform:scale(1.08); } .set-pal{ width:40px; height:28px; border-radius:7px; border:1px solid var(--ui-border); cursor:pointer; position:relative; overflow:hidden; } .set-pal span{ position:absolute; inset:auto 0 0 0; height:9px; } .set-pal.is-on{ outline:2px solid var(--ui-accent); outline-offset:1px; } .set-field select, .set-field input[type=color]{ background:var(--ui-panel-2); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:8px; padding:7px 10px; } .set-field input[type=color]{ width:40px; height:30px; padding:2px; } .set-range{ display:flex; align-items:center; gap:12px; } .set-range input{ flex:1; } .set-range output{ font:12px var(--ui-mono); color:var(--ui-muted); min-width:32px; text-align:right; } .set-toggle{ position:relative; display:inline-block; width:40px; height:22px; cursor:pointer; } .set-toggle.is-locked{ opacity:.45; cursor:not-allowed; } /* an org feature-flag row in the account panel (toggle + name + explainer) */ .acc-flag-row{ display:flex; align-items:center; gap:12px; padding:6px 0 2px; } .acc-flag-row b{ font-size:13px; display:block; } .acc-flag-row small{ color:var(--ui-faint); font-size:11.5px; display:block; margin-top:1px; } .set-toggle input{ position:absolute; opacity:0; } .set-track{ position:absolute; inset:0; background:var(--ui-panel-2); border:1px solid var(--ui-border); border-radius:999px; transition:background .15s var(--ease); } .set-track::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--ui-muted); transition:transform .16s var(--ease), background .15s; } .set-toggle input:checked + .set-track{ background:var(--ui-accent); border-color:transparent; } .set-toggle input:checked + .set-track::after{ transform:translateX(18px); background:var(--ui-on-accent); } .set-about{ text-align:center; padding:20px; } .set-about-mark img{ width:72px; height:72px; border-radius:18px; border:1px solid var(--ui-border); } .set-about h3{ margin:14px 0 2px; } .set-about p{ color:var(--ui-muted); font-size:12.5px; max-width:400px; margin:8px auto; line-height:1.6; } body.no-grain::after{ display:none; } body.force-reduce-motion *{ animation-duration:.01s !important; transition-duration:.01s !important; } .swatch.is-custom{ outline:2px solid var(--ui-accent); outline-offset:1px; } .set-pal{ position:relative; } .set-pal-x{ position:absolute; top:-6px; right:-6px; width:15px; height:15px; display:grid; place-items:center; border-radius:50%; background:var(--ui-danger); color:#fff; font-size:11px; font-style:normal; line-height:1; } body.ui-compact .tb{ height:42px; } body.ui-compact .rail, body.ui-compact .insp{ font-size:12.5px; } body.ui-compact .mod{ padding:6px 9px; } body.ui-compact .insp-body{ padding:11px; } body.ui-compact .set-field{ margin-bottom:15px; } /* =================== project gallery =================== */ .gallery-wrap{ width:clamp(320px, 94vw, 1700px); padding:32px 0 60px; animation:fadeUp .5s ease both; } /* the desktop is used: the platform's cap, not a phone column */ .gallery-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; } .gh-brand{ display:flex; align-items:center; gap:12px; } .gh-brand img{ width:40px; height:40px; border-radius:11px; border:1px solid var(--ui-border); } .gh-brand b{ display:block; font-size:16px; } .gh-brand span{ color:var(--ui-faint); font-size:12px; } .gal-new h2, .gal-recent h2{ font-size:15px; font-weight:650; margin:0 0 12px; } .gal-recent{ margin-top:34px; } .gal-recent-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; } .gal-search{ margin-left:auto; width:200px; background:var(--ui-panel-2); border:1px solid var(--ui-border); border-radius:8px; color:var(--ui-text); font:inherit; font-size:12.5px; padding:6px 11px; } .gal-search::placeholder{ color:var(--ui-faint); } .gal-search:focus{ border-color:var(--ui-accent); outline:none; } .gal-recent-head:has(.gal-search) .btn.ghost{ margin-left:0; } .gal-recent-head h2{ margin:0; } .gal-count{ font:11px var(--ui-mono); color:var(--ui-faint); border:1px solid var(--ui-border); border-radius:999px; padding:1px 8px; margin-left:2px; } .gal-recent-head .btn.ghost{ margin-left:auto; } .proj-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:14px; } /* --- Home multi-select delete (projects + workspaces) --- */ .gal-recent-head .btn.ghost{ flex:0 0 auto; } .pc-check{ display:none; position:absolute; top:8px; left:8px; z-index:3; place-items:center; width:22px; height:22px; border-radius:6px; background:var(--ui-panel-2); border:1.5px solid var(--ui-border); color:transparent; pointer-events:none; } .gal-recent.is-selecting .pc-check, .gal-ws.is-selecting .pc-check{ display:grid; } .pc-check.is-on{ background:var(--ui-accent); border-color:var(--ui-accent); color:var(--ui-on-accent); } .gal-recent.is-selecting .pc-actions{ display:none; } .gal-recent.is-selecting .pc-open, .gal-ws.is-selecting .ws-home-card{ cursor:pointer; } .gal-recent.is-selecting .proj-card.is-sel, .gal-ws.is-selecting .ws-home-card.is-sel{ outline:2px solid var(--ui-accent); outline-offset:1px; border-color:var(--ui-accent); } .ws-home-card{ position:relative; } /* left:0/right:0 + margin auto centers without the 50%+translate that the body zoom warps */ .home-selbar{ position:fixed; left:0; right:0; bottom:20px; margin:0 auto; z-index:120; width:max-content; max-width:calc(100% - 32px); display:flex; align-items:center; gap:12px; padding:9px 12px 9px 16px; border-radius:12px; background:var(--ui-panel); border:1px solid var(--ui-border); box-shadow:var(--ui-shadow-2); font-size:13px; animation:fadeUp .25s ease both; } .home-selbar-n{ color:var(--ui-accent); } .home-selbar .btn.danger{ background:var(--ui-danger); border-color:transparent; color:#fff; } .home-selbar .btn.danger:hover:not(:disabled){ background:var(--ui-danger); filter:brightness(1.1); color:#fff; } .home-selbar .btn.danger:disabled{ opacity:.45; } .proj-card{ position:relative; display:flex; align-items:stretch; background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:var(--ui-radius-lg); overflow:hidden; transition:border-color .15s var(--ease), transform .15s var(--ease); } .proj-card:hover{ border-color:var(--ui-border-strong); transform:translateY(-2px); } .pc-open{ flex:1; display:flex; align-items:center; gap:12px; padding:14px; background:transparent; border:none; color:var(--ui-text); cursor:pointer; text-align:left; min-width:0; } .pc-thumb{ flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center; border-radius:10px; color:#fff; background:linear-gradient(135deg, var(--pc-accent), #1a1d24); border:1px solid var(--ui-border); } .pc-body{ min-width:0; } .pc-name{ display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pc-meta{ display:block; color:var(--ui-faint); font-size:11.5px; margin-top:2px; } .pc-actions{ display:flex; flex-direction:column; justify-content:center; gap:2px; padding:6px; border-left:1px solid var(--ui-border-soft); opacity:0; transition:opacity .15s; } .proj-card:hover .pc-actions{ opacity:1; } .gal-empty{ text-align:center; color:var(--ui-faint); padding:40px; border:1.5px dashed var(--ui-border); border-radius:12px; } .gal-empty svg{ opacity:.5; margin-bottom:8px; } .cc-flag.beta{ color:var(--ui-accent-hover); border-color:color-mix(in srgb, var(--ui-accent) 40%, transparent); background:var(--ui-accent-soft); } /* =================== add-page picker =================== */ .ap-modal{ position:absolute; inset:0; margin:auto; width:min(560px,92vw); max-height:88vh; background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:var(--ui-radius-lg); box-shadow:var(--ui-shadow-2); padding:18px; animation:aiIn .22s var(--ease) both; display:flex; flex-direction:column; min-height:0; } .ap-head{ display:flex; align-items:center; justify-content:space-between; flex:0 0 auto; } .ap-head h2{ margin:0; font-size:16px; } .ap-sub{ color:var(--ui-muted); font-size:12.5px; margin:6px 0 16px; flex:0 0 auto; } /* scroll the cards inside the capped modal — never let them spill out of the box */ .ap-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; overflow-y:auto; min-height:0; flex:1 1 auto; padding:2px; margin:-2px; } .ap-cat{ grid-column:1 / -1; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--ui-faint); margin:6px 0 -2px; display:flex; align-items:baseline; gap:8px; } .ap-cat small{ font-weight:500; letter-spacing:0; text-transform:none; font-size:11px; color:var(--ui-muted); } .ap-cat:first-child{ margin-top:0; } .ap-card{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:16px; background:var(--ui-panel-2); border:1px solid var(--ui-border); border-radius:10px; color:var(--ui-text); cursor:pointer; text-align:left; transition:border-color .15s, transform .15s; } .ap-card:hover{ border-color:var(--ui-accent); transform:translateY(-1px); } .ap-ic{ color:var(--ui-accent-hover); } .ap-card b{ font-size:13.5px; } .ap-card small{ color:var(--ui-faint); font-size:11.5px; } /* "Add linked data" source picker (reuses .ap-modal) */ .dep-modal .dep-list{ display:flex; flex-direction:column; gap:8px; overflow-y:auto; min-height:0; flex:1 1 auto; padding-right:2px; } .dep-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--ui-panel-2); border:1px solid var(--ui-border); border-radius:10px; } .dep-src{ display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto; } .dep-ic{ color:var(--ui-accent-hover); flex:0 0 auto; display:flex; } .dep-name{ font-size:13px; color:var(--ui-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .dep-src small{ color:var(--ui-faint); font-size:11px; flex:0 0 auto; } .dep-views{ display:flex; gap:6px; flex:0 0 auto; } .dep-add{ white-space:nowrap; } .dep-empty{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; padding:26px 16px; color:var(--ui-muted); } .dep-empty p{ margin:0; font-size:13px; max-width:340px; } .dep-empty svg{ color:var(--ui-faint); } /* =================== collapsible rails =================== */ .rail.is-collapsed{ width:38px; cursor:pointer; } .rail.is-collapsed .rail-head, .rail.is-collapsed .rail-list{ display:none; } .rail.is-collapsed::after{ content:"Architecture ▸"; display:block; writing-mode:vertical-rl; text-orientation:mixed; padding:14px 0; color:var(--ui-muted); font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; } .rail.is-collapsed:hover::after{ color:var(--ui-text); } .insp.is-collapsed{ width:38px; cursor:pointer; } .insp.is-collapsed .insp-tabs, .insp.is-collapsed .insp-body{ display:none; } .insp.is-collapsed::after{ content:"Inspector ▸"; display:block; writing-mode:vertical-rl; text-orientation:mixed; padding:14px 0; color:var(--ui-muted); font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; } .insp.is-collapsed:hover::after{ color:var(--ui-text); } /* =================== AI dock: float vs docked + resize =================== */ /* docked = a full-height side panel flush to the edge; float = the rounded card (its right/bottom/animation come from the base .ai-dock rule) */ .ai-dock.is-dock{ position:relative; right:auto; bottom:auto; flex:0 0 auto; height:auto; max-height:none; border-radius:0; border:none; border-left:1px solid var(--ui-border); box-shadow:none; animation:none; } .ai-dock.is-float{ max-height:min(80vh, 760px); } .ai-resize{ position:absolute; z-index:5; } .ai-dock.is-float .ai-resize{ top:0; left:0; width:16px; height:16px; cursor:nwse-resize; } .ai-dock.is-float .ai-resize::after{ content:""; position:absolute; top:5px; left:5px; width:7px; height:7px; border-top:2px solid var(--ui-faint); border-left:2px solid var(--ui-faint); border-radius:2px 0 0 0; } .ai-dock.is-dock .ai-resize{ top:0; left:-3px; width:6px; height:100%; cursor:ew-resize; } .ai-dock.is-dock .ai-resize:hover{ background:var(--ui-accent-soft); } /* The light theme is the platform's: [data-theme="light"] on re-values every token in app/css/tokens.css. Nothing here names a theme; code surfaces stay dark in both. */ /* =================== account button (topbar) =================== */ .acc-chip{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--ui-accent); color:var(--ui-on-accent); font-size:10px; font-weight:700; letter-spacing:.3px; } #tbAccount svg{ color:var(--ui-muted); } /* =================== login modal =================== */ .lm-overlay, .acc-overlay{ position:fixed; inset:0; z-index:160; display:none; } .lm-overlay.is-open, .acc-overlay.is-open{ display:block; } .lm-scrim{ position:absolute; inset:0; background:color-mix(in srgb, var(--ui-scrim) 62%, transparent); backdrop-filter:blur(2px); } .lm-modal{ position:absolute; inset:0; margin:auto; width:min(400px,92vw); height:max-content; max-height:90vh; overflow:auto; background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:var(--ui-radius-lg); box-shadow:var(--ui-shadow-2); padding:20px; animation:aiIn .2s var(--ease) both; } .lm-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; } .lm-head h2{ margin:0; font-size:16px; } .lm-stub{ display:flex; align-items:flex-start; gap:7px; font-size:11px; color:var(--ui-warn); background:color-mix(in srgb, var(--ui-warn) 8%, transparent); border:1px solid color-mix(in srgb, var(--ui-warn) 25%, transparent); border-radius:8px; padding:7px 10px; margin:8px 0 14px; } .lm-stub svg{ flex:0 0 auto; margin-top:1px; } .lm-stub span{ line-height:1.5; } .lm-stub code{ font-family:var(--ui-mono); } .lm-field{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; } .lm-field > span{ font-size:11px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; color:var(--ui-faint); } .lm-field input[type=email], .lm-field input[type=text], .lm-field input[type=tel], .lm-field input[type=password]{ width:100%; background:var(--ui-panel-2); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:8px; padding:9px 11px; outline:none; font:inherit; font-size:13px; color-scheme:dark; } .lm-field input:focus{ border-color:var(--ui-accent); } .lm-field input:disabled{ opacity:.5; } .lm-hint{ font-size:11px; color:var(--ui-faint); line-height:1.4; } /* password field + visibility toggle */ .lm-pw{ position:relative; display:flex; } .lm-pw input{ flex:1; padding-right:38px !important; } .lm-pw-eye{ position:absolute; right:5px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--ui-faint); cursor:pointer; padding:4px; display:flex; } .lm-pw-eye:hover{ color:var(--ui-text); } .lm-pw-eye[data-state=visible]{ color:var(--ui-accent-hover); } /* live strength meter */ .lm-strength{ height:5px; border-radius:999px; background:var(--ui-border); overflow:hidden; margin:-4px 0 10px; } .lm-strength-bar{ height:100%; width:0; border-radius:999px; transition:width .25s var(--ease), background .25s; } .lm-strength-bar[data-level=weak]{ background:var(--ui-danger); } .lm-strength-bar[data-level=medium]{ background:var(--ui-warn); } .lm-strength-bar[data-level=strong]{ background:#5a8dee; } .lm-strength-bar[data-level=valid]{ background:var(--ui-accent); } /* live rules */ .lm-rules{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:-2px 0 12px; padding:0; } .lm-rules li{ font-size:10.5px; color:var(--ui-faint); border:1px solid var(--ui-border); border-radius:999px; padding:2px 9px; transition:color .12s, border-color .12s, background .12s; } .lm-rules li.ok{ color:var(--ui-accent-hover); border-color:color-mix(in srgb, var(--ui-accent) 40%, transparent); background:var(--ui-accent-soft); } /* phone + SMS opt-in */ .lm-check{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ui-muted); text-transform:none; letter-spacing:0; font-weight:400; margin-top:3px; } .lm-check input{ accent-color:var(--ui-accent); } /* verification code + inline request button */ .lm-codewrap{ display:flex; gap:6px; } .lm-codewrap input{ flex:1; } .lm-codebtn{ flex:0 0 auto; background:var(--ui-hover); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:8px; padding:0 12px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; } .lm-codebtn:hover:not(:disabled){ border-color:var(--ui-accent); color:var(--ui-accent-hover); } .lm-codebtn:disabled{ opacity:.55; cursor:default; } /* actions */ .lm-submit{ width:100%; justify-content:center; margin-top:4px; } .lm-actions{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:12px; } .lm-link{ background:none; border:none; color:var(--ui-accent-hover); cursor:pointer; font-size:12px; padding:0; } .lm-link:hover{ text-decoration:underline; } .lm-err{ color:var(--ui-danger); font-size:12px; margin:8px 0 0; text-align:center; } /* =================== account modal =================== */ .acc-modal{ position:absolute; inset:0; margin:auto; width:min(560px,94vw); height:max-content; max-height:90vh; overflow:auto; background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:var(--ui-radius-lg); box-shadow:var(--ui-shadow-2); animation:aiIn .22s var(--ease) both; } /* platform tabs */ .acc-tabs{ display:flex; gap:2px; padding:0 16px; border-bottom:1px solid var(--ui-border); } .acc-tab{ border:none; background:transparent; color:var(--ui-muted); font:inherit; font-size:12.5px; padding:9px 12px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; } .acc-tab:hover{ color:var(--ui-text); } .acc-tab.is-on{ color:var(--ui-text); border-bottom-color:var(--ui-accent); } /* sites + provisioning */ .acc-sites{ display:flex; flex-direction:column; gap:8px; } .acc-site{ display:flex; align-items:center; gap:10px; padding:9px 11px; background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:9px; } .acc-site-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; } .acc-site-dot.is-ready{ background:var(--ui-accent); } .acc-site-dot.is-prov{ background:var(--ui-warn); animation:toastSpin 1.4s linear infinite; } .acc-site-id{ min-width:0; flex:1; } .acc-site-id b{ display:block; font-size:13px; } .acc-site-id a{ font-size:11.5px; color:var(--ui-accent-hover); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; } .acc-wiz-msg{ font-size:13px; color:var(--ui-text); margin:2px 0 12px; } .acc-wiz-form .field{ margin-bottom:12px; } .acc-wiz-input{ display:flex; align-items:stretch; } .acc-wiz-input input{ flex:1; background:var(--ui-panel); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:8px 0 0 8px; padding:7px 10px; font:inherit; font-size:12.5px; outline:none; color-scheme:dark; } .acc-wiz-input input:only-child{ border-radius:8px; } .acc-wiz-input input:focus{ border-color:var(--ui-accent); } .acc-wiz-suffix{ display:flex; align-items:center; padding:0 10px; background:var(--ui-hover); border:1px solid var(--ui-border); border-left:none; border-radius:0 8px 8px 0; font-size:12px; color:var(--ui-faint); } .acc-wiz-prog{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ui-muted); padding:8px 0; } .acc-wiz-done{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ui-accent-hover); padding:8px 0; } .acc-steps{ list-style:none; margin:2px 0 14px; padding:0; } .acc-steps li{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13px; color:var(--ui-muted); } .acc-step-n{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--ui-hover); border:1px solid var(--ui-border); color:var(--ui-faint); font-size:11px; font-weight:600; flex:0 0 auto; } .acc-env{ display:flex; flex-direction:column; gap:2px; margin:4px 0 10px; } .acc-env-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--ui-border); font-size:13px; min-height:38px; } .acc-env-row:last-child{ border-bottom:none; } .acc-env-row > span:first-child{ flex:0 0 130px; color:var(--ui-faint); } /* LABEL only — not the value spans/pills */ .acc-env-row b{ color:var(--ui-text); } .acc-env-row code{ font-size:12px; color:var(--ui-accent-hover); word-break:break-all; } .acc-env-empty{ color:var(--ui-faint); } .acc-env-pills{ display:inline-flex; flex-wrap:wrap; gap:5px; } /* team */ .acc-members, .acc-invites{ display:flex; flex-direction:column; gap:7px; } .acc-member, .acc-invite{ display:flex; align-items:center; gap:9px; padding:6px 8px; background:var(--ui-panel); border:1px solid var(--ui-border-soft); border-radius:8px; font-size:12.5px; } .acc-member-e{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .acc-avatar.sm{ width:26px; height:26px; font-size:10px; } .acc-invite.is-expired{ opacity:.55; } .acc-invite-exp{ font-size:11px; color:var(--ui-faint); } .acc-invite-row{ display:flex; gap:7px; } .acc-invite-row input{ flex:1; background:var(--ui-panel); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:8px; padding:7px 10px; font:inherit; font-size:12.5px; outline:none; } .acc-invite-row input:focus{ border-color:var(--ui-accent); } .acc-invite-row select{ background:var(--ui-panel); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:8px; padding:7px 8px; font:inherit; font-size:12px; outline:none; color-scheme:dark; } /* plan */ .acc-plan-grid{ display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:12px; } .acc-plan{ background:var(--ui-panel-2); border:1px solid var(--ui-border); border-radius:12px; padding:14px; } .acc-plan.is-current{ border-color:var(--ui-accent); box-shadow:0 0 0 1px var(--ui-accent-soft); } .acc-plan-h{ display:flex; align-items:center; justify-content:space-between; } .acc-plan-h b{ font-size:14.5px; } .acc-plan-price{ font-size:12px; color:var(--ui-accent-2-hover); margin:2px 0 8px; } .acc-plan-blurb{ font-size:12px; color:var(--ui-muted); margin:0 0 10px; line-height:1.5; } .acc-plan-caps{ list-style:none; margin:0 0 12px; padding:0; } .acc-plan-caps li{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ui-text); padding:3px 0; } .acc-plan-caps li svg{ color:var(--ui-accent-hover); flex:0 0 auto; } .acc-plan .btn{ width:100%; justify-content:center; } /* subscription onboarding */ .sub-cadence{ display:inline-flex; margin:0 0 12px; } .sub-cadence button{ position:relative; } .sub-save{ font-size:10px; color:var(--ui-accent-2-hover); margin-left:5px; } .sub-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } @media (max-width:520px){ .sub-grid{ grid-template-columns:1fr; } } .sub-plan{ text-align:left; background:var(--ui-panel-2); border:1px solid var(--ui-border); border-radius:12px; padding:12px; cursor:pointer; color:inherit; font:inherit; transition:border-color .12s, box-shadow .12s; } .sub-plan:hover{ border-color:var(--ui-border-strong); } .sub-plan.is-sel{ border-color:var(--ui-accent); box-shadow:0 0 0 1px var(--ui-accent-soft); } .sub-addons{ display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin:4px 0 12px; } @media (max-width:520px){ .sub-addons{ grid-template-columns:1fr; } } .sub-addon{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ui-text); cursor:pointer; } .sub-addon input{ accent-color:var(--ui-accent); } .sub-summary{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12.5px; padding:10px 0 4px; color:var(--ui-text); } .acc-head{ display:flex; align-items:center; gap:10px; padding:16px 18px 12px; border-bottom:1px solid var(--ui-border-soft); } .acc-head h2{ margin:0; font-size:16px; } .acc-body{ padding:18px; } .acc-hero{ text-align:center; padding:14px 6px; } .acc-mark{ display:inline-grid; place-items:center; width:56px; height:56px; border-radius:16px; background:var(--ui-accent-soft); color:var(--ui-accent-hover); margin-bottom:12px; } .acc-hero h3{ margin:0 0 8px; } .acc-hero p{ color:var(--ui-muted); font-size:13px; line-height:1.6; max-width:360px; margin:0 auto 18px; } .acc-cta{ display:flex; gap:10px; justify-content:center; } .acc-dev{ margin-top:16px; padding-top:14px; border-top:1px solid var(--ui-border-soft); } .acc-dev .acc-fine{ margin:8px auto 0; } .acc-fine{ color:var(--ui-faint); font-size:11px; margin:14px 0 0; } .acc-fine code, .acc-hint code{ font-family:var(--ui-mono); } .acc-id{ display:flex; align-items:center; gap:12px; margin-bottom:16px; } .acc-avatar{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--ui-accent); color:var(--ui-on-accent); font-weight:700; } .acc-email{ font-weight:650; } .acc-sub{ color:var(--ui-muted); font-size:12px; margin-top:2px; display:flex; align-items:center; gap:6px; } .acc-card{ background:var(--ui-panel-2); border:1px solid var(--ui-border); border-radius:12px; padding:14px; margin-bottom:12px; } .acc-card-h{ display:flex; align-items:center; justify-content:space-between; font-weight:600; margin-bottom:8px; } .acc-card-h svg{ vertical-align:-2px; margin-right:4px; color:var(--ui-accent-hover); } .acc-balance{ font-size:18px; } .acc-hint{ color:var(--ui-muted); font-size:12px; margin:0 0 10px; } .acc-packs{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; } .acc-pack{ display:flex; flex-direction:column; gap:2px; padding:10px; background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:9px; color:var(--ui-text); cursor:pointer; text-align:center; transition:border-color .15s, transform .15s; } .acc-pack:hover{ border-color:var(--ui-accent); transform:translateY(-1px); } .acc-pack b{ font-size:13px; } .acc-pack span{ font-size:10.5px; color:var(--ui-faint); } .acc-ladder{ list-style:none; margin:0 0 10px; padding:0; } .acc-ladder li{ display:flex; align-items:center; gap:8px; padding:5px 0; color:var(--ui-faint); font-size:13px; } .acc-ladder li svg{ opacity:.3; } .acc-ladder li.done{ color:var(--ui-text); } .acc-ladder li.done svg{ opacity:1; color:var(--ui-accent-hover); } .acc-actions{ display:flex; gap:8px; } /* gallery account chip */ .gh-account{ display:flex; align-items:center; gap:8px; } /* =================== API request builder (inspector) =================== */ .req-fields{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; } .req-field{ display:inline-flex; align-items:center; gap:4px; font:11.5px var(--ui-mono); padding:4px 9px; border-radius:999px; border:1px solid var(--ui-border); background:var(--ui-panel-2); color:var(--ui-muted); cursor:pointer; } .req-field:hover{ border-color:var(--ui-accent); color:var(--ui-text); } .req-field.on{ background:var(--ui-accent-soft); border-color:color-mix(in srgb, var(--ui-accent) 45%, transparent); color:var(--ui-accent-hover); } [data-reqk], [data-hk], [data-hv]{ background:var(--ui-panel-2); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:7px; padding:7px 9px; font:12px var(--ui-mono); } #reqHeaders .le-row input{ flex:1; min-width:0; } /* =================== notebook IDE (repo structure) =================== */ .nb-ide{ display:flex; height:calc(100% - 30px); min-height:0; } .nb-tree-pane{ width:220px; flex:0 0 auto; display:flex; flex-direction:column; background:var(--ui-panel); border-right:1px solid var(--ui-border); } .nb-tree-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 8px 8px 12px; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--ui-faint); } .nb-tree-acts{ display:flex; gap:2px; } .nb-tree{ flex:1; overflow-y:auto; padding:2px 4px 10px; } .nb-tree-foot{ padding:8px; border-top:1px solid var(--ui-border-soft); } .nb-tree-foot .btn{ width:100%; justify-content:center; } .nb-tf, .nb-tfile{ display:flex; align-items:center; gap:6px; padding:5px 6px; border-radius:6px; cursor:pointer; color:var(--ui-muted); font-size:12.5px; position:relative; } .nb-tf:hover, .nb-tfile:hover{ background:var(--ui-hover); color:var(--ui-text); } .nb-tfile.is-on{ background:var(--ui-accent-soft); color:var(--ui-accent-hover); } .nb-tf svg, .nb-tfile svg{ flex:0 0 auto; color:var(--ui-faint); } .nb-tfile.is-on svg{ color:var(--ui-accent-hover); } .nb-tname{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; } .nb-chev{ display:inline-grid; place-items:center; transition:transform .15s var(--ease); } .nb-chev.col{ transform:rotate(-90deg); } .nb-tdot{ width:6px; height:6px; border-radius:50%; background:var(--ui-accent-hover); flex:0 0 auto; } .nb-tacts{ display:none; gap:1px; margin-left:auto; } .nb-tf:hover .nb-tacts, .nb-tfile:hover .nb-tacts{ display:flex; } .nb-tacts button{ display:grid; place-items:center; width:20px; height:20px; border:none; background:transparent; color:var(--ui-faint); border-radius:5px; cursor:pointer; } .nb-tacts button:hover{ background:var(--ui-panel-2); color:var(--ui-text); } .nb-main{ flex:1; display:flex; flex-direction:column; min-width:0; } .nb-bar{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--ui-border-soft); background:var(--ui-panel); } .nb-fname{ display:flex; align-items:center; gap:6px; font:12.5px var(--ui-mono); color:var(--ui-text); min-width:0; overflow:hidden; white-space:nowrap; } /* a long filename shrinks/clips instead of pushing the Run button off the bar */ .nb-fname .pill{ font-size:10px; } .nb-editor{ flex:1; display:flex; min-height:0; } .nb-editor .cs{ flex:1; } .nb-empty2{ margin:auto; text-align:center; color:var(--ui-faint); } .nb-empty2 svg{ opacity:.5; margin-bottom:8px; } .nb-out-pane{ height:190px; flex:0 0 auto; display:flex; flex-direction:column; border-top:1px solid var(--ui-border); resize:vertical; overflow:hidden; background:var(--ui-code-bg); } .nb-out-head{ padding:6px 12px; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--ui-faint); border-bottom:1px solid var(--ui-border-soft); } .nb-out{ flex:1; overflow:auto; } .nb-live{ width:100%; height:100%; border:none; background:#fff; display:block; } .nb-out-head{ display:flex; align-items:center; justify-content:space-between; } .nb-out-head .icon-btn{ width:22px; height:22px; } /* collapsed notebook panels */ .nb-tree-pane.is-collapsed{ width:38px; cursor:pointer; overflow:hidden; } .nb-tree-pane.is-collapsed .nb-tree, .nb-tree-pane.is-collapsed .nb-tree-foot, .nb-tree-pane.is-collapsed .nb-tree-head span:first-child, .nb-tree-pane.is-collapsed .nb-tree-acts{ display:none; } .nb-tree-pane.is-collapsed::after{ content:"Files ▸"; display:block; writing-mode:vertical-rl; padding:14px 0; margin:0 auto; color:var(--ui-muted); font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; } .nb-tree-pane.is-collapsed:hover::after{ color:var(--ui-text); } .nb-out-pane.is-collapsed{ height:30px; resize:none; } .nb-out-pane.is-collapsed .nb-out{ display:none; } .nb-out-pane.is-collapsed .nb-out-head{ cursor:pointer; } .nb-out-pane.is-collapsed #nbOutCol{ transform:rotate(-90deg); } /* =================== tooltips + hint cards =================== */ .po-tip{ position:fixed; z-index:400; max-width:380px; pointer-events:none; display:flex; align-items:center; gap:8px; background:var(--ui-panel-2); border:1px solid var(--ui-border); border-radius:8px; padding:7px 11px; font-size:13px; line-height:1.5; color:var(--ui-text); box-shadow:var(--ui-shadow); opacity:0; transform:translateY(3px); transition:opacity .12s var(--ease), transform .12s var(--ease); } .po-tip.is-on{ opacity:1; transform:none; } .po-tip-key{ flex:0 0 auto; font:10.5px/1 ui-monospace,Consolas,monospace; color:var(--ui-text); background:var(--ui-hover); border:1px solid var(--ui-border); border-bottom-width:2px; border-radius:5px; padding:3px 6px; white-space:nowrap; } .po-hint{ position:fixed; left:16px; bottom:16px; z-index:190; max-width:460px; display:none; align-items:flex-start; gap:9px; background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:12px; padding:12px 12px 10px 14px; box-shadow:var(--ui-shadow-2); animation:aiIn .25s var(--ease) both; } .po-hint.is-on{ display:flex; } .po-hint-ic{ color:var(--ui-accent-hover); flex:0 0 auto; margin-top:1px; } .po-hint-t{ font-size:14px; line-height:1.55; color:var(--ui-text); } .po-hint-x{ flex:0 0 auto; display:grid; place-items:center; width:20px; height:20px; border:none; border-radius:6px; background:transparent; color:var(--ui-faint); cursor:pointer; } .po-hint-x:hover{ background:var(--ui-hover); color:var(--ui-text); } .po-hint-body{ display:flex; flex-direction:column; gap:5px; } .po-hint-off{ align-self:flex-start; border:none; background:none; color:var(--ui-faint); font-size:12px; cursor:pointer; padding:0; } .po-hint-off:hover{ color:var(--ui-muted); text-decoration:underline; } /* --------------------- polish: one dropdown language --------------------- */ /* Every select: rounded button AND rounded open list (Chromium base-select; other engines gracefully keep the native popup with the rounded button). */ select{ background:var(--ui-panel-2); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:8px; padding:6px 9px; font-size:12px; cursor:pointer; transition:border-color .14s var(--ease), background .14s var(--ease); } select:hover{ border-color:color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border)); } select:focus-visible{ outline:2px solid var(--ui-accent); outline-offset:1px; } select, select::picker(select){ appearance:base-select; } select::picker(select){ background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:10px; box-shadow:var(--ui-shadow-2); padding:4px; margin:4px 0; opacity:0; transform:translateY(-4px) scale(.98); transition:opacity .14s var(--ease), transform .14s var(--ease), display .14s allow-discrete, overlay .14s allow-discrete; } select:open::picker(select){ opacity:1; transform:none; } @starting-style{ select:open::picker(select){ opacity:0; transform:translateY(-4px) scale(.98); } } option{ border-radius:7px; padding:6px 10px; font-size:12px; color:var(--ui-text); cursor:pointer; } option:hover, option:focus{ background:var(--ui-hover); } option:checked{ background:var(--ui-hover); color:var(--ui-accent-hover); } optgroup{ font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--ui-faint); padding:6px 6px 2px; } /* --------------------------- polish: motion feel --------------------------- */ .btn, .icon-btn{ transition:background .12s ease, border-color .12s ease, color .12s ease, transform .09s ease; } .btn:active, .icon-btn:active, .mod:active{ transform:scale(.96); } .rail, .insp{ transition:width .18s var(--ease), margin-left .18s ease, margin-right .18s ease; } .devc{ transition:height .2s var(--ease); } .devc.is-resizing{ transition:none; } .devc-row{ transition:background .1s ease; } .insp-tabs button{ transition:background .12s ease, color .12s ease; } /* ---------------------------- table / data mode ---------------------------- */ .tbl-shell, .gal-shell{ flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; background:var(--ui-canvas); } .tbl-wrap, .gal-wrap{ display:flex; flex-direction:column; min-height:0; flex:1; } .tbl-bar, .gal-bar{ display:flex; align-items:center; gap:8px; padding:9px 14px; border-bottom:1px solid var(--ui-border); background:var(--ui-panel); flex:0 0 auto; flex-wrap:wrap; } .tbl-spacer{ flex:1; } .tbl-search{ display:flex; align-items:center; gap:6px; background:var(--ui-panel-2); border:1px solid var(--ui-border); border-radius:8px; padding:0 9px; color:var(--ui-faint); } .tbl-search input{ border:none; background:transparent; color:var(--ui-text); padding:6px 2px; font-size:12.5px; width:180px; outline:none; } .tbl-height button, .tbl-viewseg button, .gal-viewseg button{ font-size:11.5px; padding:5px 9px; } .tbl-count{ font-size:11.5px; color:var(--ui-faint); font-variant-numeric:tabular-nums; } .tbl-count.warn{ color:var(--ui-warn); } .tbl-count.danger{ color:var(--ui-danger); } .tbl-scroll, .gal-scroll{ flex:1; overflow:auto; min-height:0; } .tbl-scroll{ position:relative; } /* anchors the fill handle to grid coordinates */ /* the grid pans both ways constantly — its bars need to read against the dark canvas */ .tbl-scroll::-webkit-scrollbar{ width:12px; height:12px; } .tbl-scroll::-webkit-scrollbar-thumb{ background:var(--ui-border-strong); border:2px solid transparent; background-clip:content-box; border-radius:6px; } .tbl-scroll::-webkit-scrollbar-thumb:hover{ background:var(--ui-faint); background-clip:content-box; } .tbl-scroll::-webkit-scrollbar-track{ background:var(--ui-panel); } .tbl-scroll::-webkit-scrollbar-corner{ background:var(--ui-panel); } /* --- table IDE: tools rail · grid · inspector (same skeleton as the studio) --- */ .tbl-ide{ flex:1; display:flex; min-height:0; min-width:0; } .tbl-main{ flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; } .tbl-tools{ width:216px; flex:0 0 auto; display:flex; flex-direction:column; background:var(--ui-panel); border-right:1px solid var(--ui-border); overflow-y:auto; } .tbl-insp{ width:265px; flex:0 0 auto; display:flex; flex-direction:column; background:var(--ui-panel); border-left:1px solid var(--ui-border); overflow-y:auto; } .tbl-tools.is-collapsed, .tbl-insp.is-collapsed{ width:38px; cursor:pointer; overflow:hidden; } .tbl-tools.is-collapsed::after{ content:"Table tools ▸"; display:block; writing-mode:vertical-rl; padding:14px 0; color:var(--ui-muted); font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; text-align:center; } .tbl-insp.is-collapsed::after{ content:"Inspector ▸"; display:block; writing-mode:vertical-rl; padding:14px 0; color:var(--ui-muted); font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; text-align:center; } .tbl-tools .rail-head, .tbl-insp .insp-head{ display:flex; align-items:center; justify-content:space-between; } .tbl-tools .mod{ position:relative; } /* second accent on the build actions + category headers; firmer panel edges so * the rails read as panels instead of blending into the canvas */ .tbl-tools .mod[data-tool="addCol"] .mod-ic, .tbl-tools .mod[data-tool="addRow"] .mod-ic{ color:var(--ui-accent-2); } .rail-cat{ color:color-mix(in srgb, var(--ui-accent-2) 55%, var(--ui-muted)); } .tbl-tools{ border-right-color:var(--ui-border-strong); } .tbl-insp{ border-left-color:var(--ui-border-strong); } .tbl-badge{ position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:9.5px; font-weight:700; padding:2px 6px; border-radius:99px; background:color-mix(in srgb, var(--ui-accent) 25%, var(--ui-panel-2)); color:var(--ui-accent-hover); border:1px solid color-mix(in srgb, var(--ui-accent) 45%, transparent); } /* tab variant: INLINE in the tab button — must out-rank .tbl-badge's absolute * positioning or the count floats loose against the inspector pane */ .tbl-badge.tbl-badge-tab{ position:static; transform:none; margin-left:6px; display:inline-block; background:color-mix(in srgb, var(--ui-accent-2) 30%, var(--ui-panel-2)); color:var(--ui-accent-2-hover); border-color:color-mix(in srgb, var(--ui-accent-2) 45%, transparent); } .tbl-window{ display:flex; align-items:center; gap:10px; padding:7px 14px; flex:0 0 auto; border-top:1px solid var(--ui-border); background:var(--ui-panel); font-size:11.5px; color:var(--ui-faint); font-variant-numeric:tabular-nums; } .tbl-th.is-sel{ box-shadow:inset 0 -2px 0 var(--ui-accent); } .tbl-th-name{ cursor:pointer; } .tbl-cellimg-pending{ opacity:.45; cursor:help; } .tbl-stats{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; } .tbl-stats > div{ display:flex; flex-direction:column; padding:7px 10px; background:var(--ui-panel-2); border:1px solid var(--ui-border); border-radius:8px; min-width:64px; } .tbl-stats b{ font-size:13px; font-variant-numeric:tabular-nums; } .tbl-stats span{ font-size:10px; color:var(--ui-faint); text-transform:uppercase; letter-spacing:.4px; } .tbl-topvals{ display:flex; flex-wrap:wrap; gap:4px; } .tbl-colrow{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:4px 2px; font-size:12px; border-bottom:1px solid var(--ui-border-soft, var(--ui-border)); } .tbl-issue{ border:1px solid var(--ui-border); border-radius:9px; background:var(--ui-panel-2); padding:9px 10px; margin-bottom:8px; } .tbl-issue-t{ font-size:12px; font-weight:650; margin-bottom:2px; } .tbl-issue-d{ font-size:11px; color:var(--ui-faint); line-height:1.5; margin-bottom:7px; } .tbl-issue-a{ display:flex; flex-wrap:wrap; gap:5px; } .tbl-issue-a .btn{ font-size:11px; padding:4px 9px; } .tbl-skiplist{ display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; } .tbl-pop-check{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ui-muted); cursor:pointer; } /* repair-tab inline resolutions (decisions answered right here) */ .tbl-res{ display:flex; flex-direction:column; gap:1px; padding:7px 0; border-top:1px solid var(--ui-border-soft, var(--ui-border)); } .tbl-res:first-child{ border-top:none; } .tbl-res-t{ font-size:12px; font-weight:600; } .tbl-res-d{ font-size:11px; color:var(--ui-faint); line-height:1.45; } .tbl-branches{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; } .tbl-branches .btn{ font-size:11px; padding:4px 9px; } /* report canvas — multiple chart tiles over the current table view */ .chart-canvas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); gap:16px; padding:20px 24px; } .chart-canvas.is-single{ grid-template-columns:1fr; } /* one chart fills the width */ .chart-canvas .chart-add{ grid-column:1 / -1; min-height:56px; flex-direction:row; } /* slim full-width strip, not a big empty tile */ .chart-tile{ position:relative; background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:12px; padding:14px 16px; cursor:pointer; min-width:0; } .chart-tile.is-sel{ border-color:var(--ui-accent); box-shadow:0 0 0 1px var(--ui-accent-soft); } /* F4: cancel the whole-app body zoom for the chart subtree only. ECharts/zrender maps pointer events with the raw CSS-pixel offset and does NOT account for CSS `zoom`, so under body zoom the tooltip/axisPointer drifts from the cursor (the error grows with distance). Counter-zooming so the element's NET zoom is 1.0 makes zrender's pointer math exact again; it also keeps the on-screen size identical (bodyZoom × 1/bodyZoom = 1). The DPR compensation in mountEcharts drops its ×uiZoom in step, since the canvas now renders 1:1. calc() tracks the --ui-zoom breakpoints automatically. */ .echart-body{ width:100%; height:340px; zoom:calc(1 / var(--ui-zoom)); } /* no-unique-id recommendation (Repair tab) */ .tbl-keyrec{ border:1px solid color-mix(in srgb, var(--ui-accent-2) 40%, var(--ui-border)); background:var(--ui-accent-2-soft); border-radius:10px; padding:11px 12px; } .tbl-keyrec h4{ color:var(--ui-accent-2-hover); } .tbl-keyrec-acts{ display:flex; gap:6px; } /* redraws of a dialog (option toggles) must not replay the entrance animation */ .idlg-noanim{ animation:none !important; } /* =================== global history panel (all modes) =================== */ .hist-host{ position:fixed; inset:0; z-index:245; display:none; pointer-events:none; } .hist-host.is-on{ display:block; } .hist-panel{ position:fixed; pointer-events:auto; width:320px; max-height:70vh; display:flex; flex-direction:column; background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:var(--ui-radius-lg); box-shadow:var(--ui-shadow-2); animation:aiIn .14s var(--ease) both; } .hist-head{ display:flex; align-items:center; gap:8px; padding:11px 14px 8px; } .hist-head b{ font-size:13.5px; } .hist-nav{ display:flex; gap:6px; padding:0 14px 8px; border-bottom:1px solid var(--ui-border); } .hist-nav .btn{ flex:1; justify-content:center; font-size:11.5px; } .hist-list{ overflow:auto; padding:6px; display:flex; flex-direction:column; gap:1px; } .hist-row{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:7px 9px; border:none; background:transparent; color:var(--ui-text); border-radius:8px; cursor:pointer; font:inherit; } .hist-row:hover:not(:disabled){ background:var(--ui-hover); } .hist-row:disabled{ cursor:default; } .hist-dot{ width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:var(--ui-border); box-shadow:0 0 0 3px var(--ui-panel); } .hist-row.is-cur .hist-dot{ background:var(--ui-accent); } .hist-row.is-future{ opacity:.5; } .hist-b{ flex:1; min-width:0; display:flex; flex-direction:column; } .hist-t{ font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .hist-when{ font-size:10.5px; color:var(--ui-faint); } .hist-here{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--ui-accent-hover); } .hist-tag{ font-size:10px; color:var(--ui-faint); } .hist-foot{ margin:0; padding:8px 14px; border-top:1px solid var(--ui-border-soft); font-size:11px; color:var(--ui-faint); } .chart-tile-acts{ position:absolute; top:8px; right:8px; display:flex; gap:2px; opacity:0; transition:opacity .12s ease; z-index:2; background:color-mix(in srgb, var(--ui-panel) 88%, transparent); border-radius:7px; } .chart-tile:hover .chart-tile-acts{ opacity:1; } .chart-add{ min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:transparent; border:1.5px dashed color-mix(in srgb, var(--ui-accent-2) 45%, transparent); border-radius:12px; color:var(--ui-accent-2); cursor:pointer; font:inherit; font-size:12.5px; } .chart-add:hover{ border-color:var(--ui-accent-2); background:var(--ui-accent-2-soft); color:var(--ui-accent-2-hover); } /* recent-views popover rows */ .tbl-pop-view{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:7px 9px; border:none; background:transparent; color:var(--ui-text); border-radius:7px; cursor:pointer; font:inherit; font-size:12px; } .tbl-pop-view:hover{ background:var(--ui-hover); } .tbl-pop-view span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tbl-pop-view small{ color:var(--ui-faint); margin-left:auto; padding-left:12px; white-space:nowrap; } /* chart view — dependency-free data viz over the current table view */ .chart-bar{ display:flex; align-items:center; gap:7px; padding:8px 14px; border-bottom:1px solid var(--ui-border); background:var(--ui-panel); flex:0 0 auto; flex-wrap:wrap; } .chart-bar-l{ font-size:12px; color:var(--ui-faint); } .chart-bar select{ font-size:12px; } .chart-surface{ padding:20px 24px; min-height:100%; } .chart-fig{ margin:0; } .chart-title{ font-size:13.5px; font-weight:650; margin-bottom:12px; color:var(--ui-text); } .chart-svg{ width:100%; max-width:760px; height:auto; display:block; overflow:visible; } /* labels a hair outside the viewBox never slice */ .chart-bar select{ background:var(--ui-panel-2); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:7px; padding:4px 7px; outline:none; color-scheme:dark; } .chart-svg-pie{ width:300px; max-width:100%; height:auto; flex:0 0 auto; } .chart-grid{ stroke:var(--ui-border); stroke-width:1; } .chart-ax{ fill:var(--ui-faint); font-size:10px; } .chart-lab{ fill:var(--ui-muted); font-size:10.5px; } .chart-val{ fill:var(--ui-text); font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; } .chart-pie-wrap{ display:flex; gap:30px; align-items:center; flex-wrap:wrap; } .chart-legend{ display:flex; flex-direction:column; gap:6px; min-width:180px; } .chart-leg{ display:flex; align-items:center; gap:9px; font-size:12.5px; } .chart-swatch{ width:12px; height:12px; border-radius:3px; flex:0 0 auto; } .chart-leg-l{ color:var(--ui-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chart-leg-v{ color:var(--ui-faint); margin-left:auto; font-variant-numeric:tabular-nums; } .chart-donut-n{ fill:var(--ui-text); font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; } .chart-donut-l{ fill:var(--ui-faint); font-size:11px; } .chart-kpi{ text-align:center; padding:56px 20px; } .chart-kpi-n{ font-size:56px; font-weight:750; color:var(--ui-text); font-variant-numeric:tabular-nums; line-height:1; } .chart-kpi-l{ color:var(--ui-muted); margin-top:8px; font-size:14px; } .chart-kpi-sub{ color:var(--ui-faint); font-size:12px; margin-top:3px; } .chart-note{ color:var(--ui-faint); font-size:11px; margin-top:16px; } .chart-empty{ padding:50px; text-align:center; color:var(--ui-faint); } /* =================== history: inspect + revert-to-a-point =================== */ .tbl-histrow.is-live{ cursor:pointer; border-radius:7px; } .tbl-histrow.is-live:hover{ background:var(--ui-hover); } .tbl-histx{ margin:2px 0 8px 20px; padding:9px 11px; background:var(--ui-panel-2); border:1px solid var(--ui-border-soft); border-radius:9px; font-size:11.5px; color:var(--ui-muted); } .tbl-histx b{ font-size:10.5px; letter-spacing:.4px; text-transform:uppercase; color:var(--ui-faint); } .tbl-histx ul{ margin:4px 0 6px; padding-left:16px; } .tbl-histx li{ margin:1px 0; } .tbl-histx-warn{ margin:6px 0; padding:6px 8px; border-radius:7px; background:color-mix(in srgb, var(--ui-warn) 12%, transparent); color:var(--ui-warn); display:flex; gap:6px; align-items:flex-start; } .tbl-histx-btns{ display:flex; gap:6px; justify-content:flex-end; margin-top:6px; } .tbl-histx-btns .btn{ font-size:11px; padding:4px 10px; } .tbl-histx-confirm > b{ text-transform:none; letter-spacing:0; font-size:11.5px; color:var(--ui-text); } /* =================== duplicate review =================== */ .tbl-dupebar{ display:flex; align-items:center; gap:9px; padding:7px 14px; flex:0 0 auto; font-size:12px; background:color-mix(in srgb, var(--ui-accent-2) 10%, var(--ui-panel)); border-bottom:1px solid color-mix(in srgb, var(--ui-accent-2) 35%, var(--ui-border)); color:var(--ui-muted); } .tbl-dupebar b{ color:var(--ui-text); } .tbl-dupekey{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ui-faint); } .tbl-dupekey select{ background:var(--ui-panel-2); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:7px; padding:3px 6px; outline:none; color-scheme:dark; font-size:11.5px; } .tbl-dupe-head td{ background:color-mix(in srgb, var(--ui-accent-2) 8%, var(--ui-panel)) !important; border-top:2px solid color-mix(in srgb, var(--ui-accent-2) 40%, var(--ui-border)); padding:6px 10px; } .tbl-dupe-row{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ui-muted); position:sticky; left:10px; width:max-content; max-width:calc(100vw - 560px); } .tbl-dupe-kind{ font-size:9.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:2px 7px; border-radius:99px; } .tbl-dupe-kind.is-direct{ background:var(--ui-accent-soft); color:var(--ui-accent-hover); } .tbl-dupe-kind.is-assumed{ background:color-mix(in srgb, var(--ui-warn) 16%, transparent); color:var(--ui-warn); } .tbl-dupe-acts{ display:flex; gap:5px; margin-left:8px; } .tbl-dupe-acts .btn{ font-size:10.5px; padding:3px 8px; } tr.is-dupe .tbl-gutter{ box-shadow:inset 3px 0 0 var(--ui-accent-2); } /* =================== row card (expanded record) =================== */ .rcard-host{ position:fixed; inset:0; z-index:250; display:none; } .rcard-host.is-on{ display:block; } .rcard-scrim{ position:absolute; inset:0; background:color-mix(in srgb, var(--ui-scrim) 60%, transparent); backdrop-filter:blur(2px); animation:fadeUp .18s ease both; } .rcard{ position:absolute; inset:0; margin:auto; width:min(480px, 94vw); height:max-content; max-height:88vh; display:flex; flex-direction:column; background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:var(--ui-radius-lg); box-shadow:var(--ui-shadow-2); animation:aiIn .2s var(--ease) both; } .rcard-head{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--ui-border); } .rcard-head b{ flex:1; min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rcard-nav{ display:flex; align-items:center; gap:4px; } .rcard-count{ font-size:11px; color:var(--ui-faint); font-variant-numeric:tabular-nums; min-width:52px; text-align:center; } .rcard-body{ overflow:auto; padding:12px 16px; display:flex; flex-direction:column; gap:12px; } .rcard-field{ display:flex; flex-direction:column; gap:5px; } /* E4: the record's own numbers, visualized (donut / gauge) at the top of the card */ .rcard-viz{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center; padding:12px; border:1px solid var(--ui-border); border-radius:10px; background:var(--ui-panel-2); } .rcard-viz-chart{ flex:0 0 auto; width:128px; height:128px; } .rcard-viz-chart svg{ display:block; width:100%; height:100%; } .rcard-viz-side{ flex:1 1 180px; min-width:160px; display:flex; flex-direction:column; gap:6px; } .rcard-viz-legend{ display:flex; flex-direction:column; gap:4px; } .rcard-viz-row{ display:grid; grid-template-columns:12px minmax(0,1fr) auto auto; align-items:center; gap:8px; font-size:12px; } .rcard-viz-sw{ width:10px; height:10px; border-radius:3px; display:inline-block; } .rcard-viz-nm{ color:var(--ui-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rcard-viz-val{ color:var(--ui-text); font-weight:600; font-variant-numeric:tabular-nums; } .rcard-viz-pct{ color:var(--ui-faint); font-size:11px; font-variant-numeric:tabular-nums; min-width:34px; text-align:right; } .rcard-viz-note{ margin:0; } .rcard-lab{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .rcard-lab span{ font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--ui-faint); } .rcard-type{ font-size:10.5px; background:var(--ui-panel-2); color:var(--ui-muted); border:1px solid var(--ui-border-soft); border-radius:6px; padding:2px 5px; outline:none; color-scheme:dark; } .rcard-type:hover{ color:var(--ui-text); border-color:var(--ui-border); } .rcard input[type="number"], .rcard input[type="date"], .rcard select:not(.rcard-type), .rcard textarea{ background:var(--ui-panel-2); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:8px; padding:7px 10px; font:inherit; font-size:12.5px; outline:none; color-scheme:dark; resize:vertical; width:100%; } .rcard input:focus, .rcard select:focus, .rcard textarea:focus{ border-color:var(--ui-accent); } .rcard-check{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ui-text); } .rcard-check input{ accent-color:var(--ui-accent); } .rcard-multi{ display:flex; flex-wrap:wrap; gap:8px 14px; } .rcard-img{ max-width:100%; max-height:220px; border-radius:9px; cursor:zoom-in; display:block; } /* photo SET in the record card: a strip of thumbnails with per-photo controls + add */ .rcard-photoset{ display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; } .rcard-photo{ position:relative; width:96px; } .rcard-photo > img{ width:96px; height:96px; object-fit:cover; border-radius:9px; display:block; cursor:zoom-in; border:1px solid var(--ui-border); } .rcard-photo > .tbl-cellimg-empty{ width:96px; height:96px; margin:0; } .rcard-photo-ctl{ position:absolute; left:0; right:0; bottom:0; display:flex; gap:2px; justify-content:center; padding:3px; background:linear-gradient(to top, color-mix(in srgb, var(--ui-shade) 62%, transparent), color-mix(in srgb, var(--ui-shade) 0%, transparent)); border-radius:0 0 9px 9px; opacity:0; transition:opacity .12s; } .rcard-photo:hover .rcard-photo-ctl, .rcard-photo:focus-within .rcard-photo-ctl{ opacity:1; } .rcard-photo-ctl .icon-btn{ width:22px; height:22px; color:#fff; background:color-mix(in srgb, var(--ui-glint) 14%, transparent); border-radius:5px; } .rcard-photo-ctl .icon-btn:hover:not(:disabled){ background:color-mix(in srgb, var(--ui-glint) 30%, transparent); } .rcard-photo-ctl .icon-btn:disabled{ opacity:.35; cursor:default; } .rcard-photo-del:hover:not(:disabled){ background:var(--ui-warn); } .rcard-photo-add{ width:96px; height:96px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1.5px dashed var(--ui-border); border-radius:9px; background:var(--ui-panel-2); color:var(--ui-faint); font-size:11px; cursor:pointer; transition:border-color .12s, color .12s; } .rcard-photo-add:hover, .rcard-photo-add.is-drag{ border-color:var(--ui-accent); color:var(--ui-accent-hover); } /* row-to-row links surfaced in the record card */ .rcard-linked{ display:flex; flex-direction:column; gap:4px; } .rcard-linkrow{ display:flex; align-items:center; gap:6px; padding:5px 8px; background:var(--ui-panel-2); border:1px solid var(--ui-border); border-radius:8px; } .rcard-linkrow.is-broken{ border-color:color-mix(in srgb, var(--ui-warn) 40%, transparent); color:var(--ui-warn); font-size:12px; } .rcard-linkrow.is-broken span{ flex:1; display:flex; align-items:center; gap:5px; } .rcard-linkgo{ flex:1; min-width:0; display:flex; align-items:center; gap:6px; background:none; border:none; color:var(--ui-text); font-size:12.5px; cursor:pointer; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0; } .rcard-linkgo:hover{ color:var(--ui-accent); } .rcard-hint{ margin:0; padding:9px 16px; border-top:1px solid var(--ui-border-soft); } /* historian timeline */ .tbl-revert{ display:flex; gap:6px; flex-wrap:wrap; } .tbl-revert .btn{ flex:1; justify-content:center; font-size:12px; } .tbl-histlist{ display:flex; flex-direction:column; max-height:52vh; overflow:auto; border:1px solid var(--ui-border); border-radius:9px; } .tbl-histrow{ display:flex; align-items:center; gap:8px; padding:6px 9px; border-bottom:1px solid var(--ui-border-soft, var(--ui-border)); font-size:11.5px; } .tbl-histrow:last-child{ border-bottom:none; } .tbl-histrow.is-revert{ background:color-mix(in srgb, var(--ui-warn) 8%, transparent); } .tbl-histrow.is-import{ background:color-mix(in srgb, var(--ui-accent) 8%, transparent); } .tbl-hist-ic{ flex:0 0 auto; color:var(--ui-faint); display:grid; place-items:center; } .tbl-histrow.is-revert .tbl-hist-ic{ color:var(--ui-warn); } .tbl-histrow.is-import .tbl-hist-ic{ color:var(--ui-accent-hover); } .tbl-hist-b{ flex:1; min-width:0; display:flex; flex-direction:column; } .tbl-hist-t{ color:var(--ui-text); font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tbl-hist-d{ color:var(--ui-faint); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tbl-hist-time{ flex:0 0 auto; color:var(--ui-faint); font-size:10px; font-variant-numeric:tabular-nums; } /* --- import dialogs: intake (header choice) + summary (pop-out resolve) --- */ .idlg-host{ position:fixed; inset:0; z-index:240; display:none; } .idlg-host.is-on{ display:block; } .idlg-scrim{ position:absolute; inset:0; background:color-mix(in srgb, var(--ui-scrim) 62%, transparent); backdrop-filter:blur(2px); animation:fadeUp .18s ease both; } .idlg{ position:absolute; inset:0; margin:auto; /* margin-centering — aiIn's transform stays free */ width:min(760px,94vw); height:max-content; max-height:86vh; display:flex; flex-direction:column; background:var(--ui-panel); border:1px solid var(--ui-border); border-radius:var(--ui-radius-lg); box-shadow:var(--ui-shadow-2); overflow:hidden; animation:aiIn .2s var(--ease) both; } .idlg-head{ display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--ui-border); background:var(--ui-panel-2); } .idlg-head h2{ margin:0; font-size:14px; font-weight:650; display:flex; align-items:center; gap:8px; flex:1; } .idlg-viewseg button{ font-size:11.5px; padding:5px 11px; } .idlg-body{ padding:16px 18px; overflow:auto; } .idlg-foot{ display:flex; align-items:center; gap:8px; padding:12px 18px; border-top:1px solid var(--ui-border); background:var(--ui-panel-2); } /* photo library picker — browse gallery photos and drop them into a website block */ .idlg-photopick{ width:min(880px,94vw); height:82vh; } .pp-libbtn{ margin-top:7px; width:100%; justify-content:center; } .pp-searchbar{ padding:10px 18px 0; } .pp-searchbar input{ width:100%; background:var(--ui-panel-2); border:1px solid var(--ui-border); border-radius:8px; color:var(--ui-text); font:inherit; font-size:12.5px; padding:7px 11px; color-scheme:dark; } .pp-searchbar input:focus{ border-color:var(--ui-accent); outline:none; } .pp-section{ margin-bottom:16px; } .pp-section-h{ font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--ui-faint); display:flex; align-items:center; gap:6px; margin:0 0 9px; } .pp-gal{ margin-bottom:12px; } .pp-gal h4{ margin:2px 0 7px; font-size:12px; font-weight:600; display:flex; align-items:center; gap:6px; color:var(--ui-muted); } .pp-gal h4 small{ color:var(--ui-faint); font-weight:500; } .pp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:9px; } .pp-cell{ position:relative; margin:0; aspect-ratio:1; border-radius:9px; overflow:hidden; border:2px solid transparent; background:var(--ui-panel-2); cursor:pointer; transition:border-color .12s, transform .1s; } .pp-cell img{ width:100%; height:100%; object-fit:cover; display:block; } .pp-ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--ui-faint); background:repeating-linear-gradient(45deg,var(--ui-panel-2),var(--ui-panel-2) 6px,transparent 6px,transparent 12px); } .pp-cell:hover:not(.is-disabled){ border-color:var(--ui-border); transform:translateY(-1px); } .pp-cell.is-sel{ border-color:var(--ui-accent); } .pp-cell.is-disabled{ cursor:not-allowed; opacity:.5; filter:grayscale(.7); } .pp-cell figcaption{ position:absolute; left:0; right:0; bottom:0; padding:9px 6px 3px; font-size:10.5px; line-height:1.25; color:#fff; background:linear-gradient(transparent,color-mix(in srgb, var(--ui-shade) 74%, transparent)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pp-check{ position:absolute; top:5px; right:5px; width:20px; height:20px; border-radius:50%; background:var(--ui-accent); color:var(--ui-on-accent); display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px color-mix(in srgb, var(--ui-shade) 35%, transparent); } .pp-badge{ position:absolute; top:5px; left:5px; font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; background:color-mix(in srgb, var(--ui-shade) 66%, transparent); color:#fff; padding:2px 5px; border-radius:5px; } .pp-proj{ border-top:1px solid var(--ui-border-soft); } .pp-projhead{ display:flex; align-items:center; gap:8px; width:100%; background:none; border:0; color:var(--ui-text); font:inherit; font-size:12.5px; padding:9px 2px; cursor:pointer; text-align:left; } .pp-projhead b{ font-weight:600; } .pp-projhead small{ color:var(--ui-faint); font-weight:500; } .pp-projhead svg{ flex:0 0 auto; color:var(--ui-faint); transform:rotate(-90deg); transition:transform .14s; } .pp-projhead.is-open svg{ transform:rotate(0); } .pp-projbody{ padding:0 0 10px; } .pp-empty{ font-size:12px; color:var(--ui-faint); padding:10px 2px; margin:0; } .pp-hint{ font-size:11px; color:var(--ui-faint); display:flex; align-items:center; gap:6px; } /* import intake — editable headers, plain-language blocks, photo organize opt */ .idlg-hname{ width:100%; min-width:72px; background:transparent; border:1px solid transparent; border-radius:5px; color:var(--ui-text); font:inherit; font-size:12px; font-weight:600; padding:3px 6px; } .idlg-hname:hover{ border-color:var(--ui-border); } .idlg-hname:focus{ border-color:var(--ui-accent); outline:none; background:var(--ui-panel-2); } .idlg-regions select, .idlg-live input{ background:var(--ui-panel-2); border:1px solid var(--ui-border); border-radius:7px; color:var(--ui-text); font:inherit; font-size:12.5px; padding:5px 9px; color-scheme:dark; } .idlg-regions{ display:flex; align-items:center; gap:8px; padding:8px 18px 0; flex-wrap:wrap; } .idlg-photoq{ background:var(--ui-accent-soft); border-radius:10px; margin:8px 18px 0; } .idlg-org{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ui-text); cursor:pointer; white-space:nowrap; } .idlg-live .field{ display:flex; flex-direction:column; gap:5px; } .idlg-live .field span{ font-size:11px; color:var(--ui-faint); text-transform:uppercase; letter-spacing:.4px; } .idlg-rs-panel .field span{ font-size:11px; color:var(--ui-faint); text-transform:uppercase; letter-spacing:.4px; } /* the reshape panels use the same