@charset "UTF-8"; /* ========================================================================== KUZE kit — the shared look of every KUZE Creation tool (Lampforge, Potforge…) Source of truth: kuzecreation/kuze-kit/kuze.css. Each project gets a copy (lamp-generator/kuze/kuze.css, pot-generator/webapp/public/kuze/kuze.css) written by `node kuze-kit/sync.mjs`. Edit THIS file, then run the sync; an edit made to a copy is overwritten on the next sync. Load it BEFORE the product's own stylesheet, which may override anything. Markup contract, breakpoints and the full component list: STANDARD.md. Sections (rules keep the order they had in Lampforge, where the cascade depends on it; do not sort them) 1 Tokens 8 Inspector, status bar, toast 2 Base elements 9 Dialogs 3 Top bar 10 Responsive layout, folds, language switch 4 Buttons 11 Account: sign-in, plans, "My designs" 5 Workspace layout 12 Toolbar folding (☰ menu), wide dialogs, 6 Editor panel design cards, first-visit hints 7 Stage (3D preview) 13 Admin ========================================================================== */ /* 1 Tokens ---------------------------------------------------------------- */ :root{ color-scheme:dark; /* Surfaces, lines and text */ --bg:#1b1917;--panel:#211e1b;--raised:#29251f;--line:#39332c; --text:#e9e2d6;--muted:#a29788; /* Brand accent: warm brass. A product may re-accent by overriding these two. */ --accent:#d2aa72;--accent-hi:#e8c592; /* Type: system fonts only, nothing to download */ --sans:"Segoe UI","Microsoft JhengHei",sans-serif;--serif:Georgia,"Times New Roman",serif;--mono:Consolas,monospace; /* Regions */ --topbar-bg:#201c18;--stage-bg:#242019;--inspector-bg:#211d19;--statusbar-bg:#1b1815; /* Fields: --field for compact controls (numbers, selects), --input for text entry */ --field:#1c1916;--input:#191713;--input-line:#544532; /* Cards (plans, designs, stats) and dialogs */ --card:#30281f;--card-line:#51412e;--chip-line:#6d5638;--dialog-bg:#26211b;--dialog-line:#695438; /* Selected state inside segmented controls (language, view tabs) */ --selected-bg:#463a2b;--selected-text:#ebd7b7; /* Text on the accent, and the light toast */ --on-accent:#251d14;--toast-bg:#ead3ae;--toast-text:#302419; /* Status */ --ok:#abbd9c;--warn:#e4ab69;--danger:#d0735a;--danger-bg:#34211b;--danger-text:#e6a38f; --fine:#8e8171; } /* 2 Base elements --------------------------------------------------------- */ *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font:14px/1.55 var(--sans);height:100dvh;display:flex;flex-direction:column;overflow:hidden} button,input,select{font:inherit} button,a,input,select{touch-action:manipulation} button{cursor:pointer;color:inherit;border:0;transition:background .16s,color .16s,border-color .16s} button:hover{color:var(--accent-hi)} button:disabled{opacity:.4;cursor:not-allowed} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px} /* Line icons from the sprite (icons.svg): */ svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} .icon-defs{position:absolute;width:0;height:0;overflow:hidden} a{color:inherit} h1,h2,h3,p{margin:0} h3{font-size:14px;font-weight:500} /* 3 Top bar: brand | browse | tools, account, language, feedback | ☰ ------ */ .topbar{height:var(--topbar-h,83px);flex-shrink:0;display:flex;align-items:center;padding:0 27px;border-bottom:1px solid var(--line);gap:34px;background:var(--topbar-bg)} .brand{display:flex;gap:13px;align-items:center;text-decoration:none;min-width:265px} .brand-mark{display:grid;place-items:center;width:36px;height:43px;border:1px solid #665239;border-radius:16px 16px 6px 6px;color:var(--accent)} .brand-mark svg{width:24px;height:24px} .brand-name{display:block;font:29px/.95 var(--serif);letter-spacing:-1px} .brand-dot{color:var(--accent)} .brand-by{display:block;margin-top:7px;font:9px var(--mono);letter-spacing:2px;color:var(--muted)} .header-actions{margin-left:auto;display:flex;align-items:center;gap:10px} #save-status{font-size:12px;color:var(--muted);margin-right:10px} /* 4 Buttons --------------------------------------------------------------- */ .button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line);border-radius:5px;padding:10px 16px;min-height:41px} .button svg{width:17px;height:17px} .primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600} .primary:hover{background:var(--accent-hi);color:var(--on-accent)} .secondary{background:transparent} .secondary:hover{background:var(--raised);border-color:#6c5941} /* 5 Workspace: editor | stage | inspector --------------------------------- */ .workspace{display:grid;grid-template-columns:310px minmax(300px,1fr) 252px;flex:1;min-height:0} /* 6 Editor panel (left) --------------------------------------------------- */ .editor{position:relative;background:var(--panel);border-right:1px solid var(--line);overflow:auto;scrollbar-width:thin;scrollbar-color:#554739 transparent} .editor-heading{padding:26px 22px 21px;display:flex;align-items:center;justify-content:space-between} .eyebrow{display:block;font:10px var(--mono);letter-spacing:1.8px;color:var(--muted)} h1{font-size:20px;font-weight:400;letter-spacing:2px;margin-top:11px} .icon-button{width:33px;height:33px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:4px;color:var(--muted)} .icon-button:hover{background:var(--raised)} /* Tabs for a multi-part product (a lamp's shade / LED / base). Set the column count per product. */ .part-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);padding:0 22px;gap:18px} .part-tabs button{background:none;padding:13px 0;color:var(--muted);border-bottom:2px solid transparent} .part-tabs button[aria-selected=true]{color:var(--accent-hi);border-bottom-color:var(--accent)} .part-tabs .tab-num{font:11px var(--mono);margin-right:8px;opacity:.7} .control-section{padding:20px 22px;border-bottom:1px solid var(--line)} /* Shape presets: icon tiles */ .preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px} .preset{background:#27231e;border:1px solid var(--line);border-radius:5px;padding:8px 2px;color:var(--muted);font-size:12px} .preset svg{height:49px;width:44px;display:block;margin:0 auto 6px;stroke-width:1.15} .preset.active{border-color:var(--accent);background:#382e21;color:var(--accent-hi)} .inline-actions{display:flex;gap:8px;margin-top:12px} .inline-actions button{flex:1;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:7px;font-size:12px;display:flex;align-items:center;justify-content:center;gap:8px} .inline-actions svg{width:15px;height:15px} /* A slider field: label + number/unit on one row, the range below it. Keep --fill (0–100%) on the range in step with its value; the track paints it. */ .field{margin-top:17px} .field-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .field label{font-size:13px;color:#c5bcaf} .number-unit{display:flex;align-items:center;gap:5px;color:var(--muted);font:11px var(--mono)} input[type=number]{width:57px;background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:3px 4px;text-align:center;font:12px var(--mono);appearance:textfield} input[type=number]::-webkit-inner-spin-button{appearance:none} input[type=range]{appearance:none;display:block;width:100%;height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--fill),#453c31 var(--fill),#453c31 100%);outline-offset:7px;cursor:pointer;margin:13px 0} input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:#ebcda3;border:2px solid #2c251d;box-shadow:0 0 0 1px #c5a16d} input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:#ebcda3;border:2px solid #2c251d} .field-extents{display:flex;justify-content:space-between;font:10px var(--mono);color:#85796b;margin-top:-4px} .choice-row{display:flex;gap:6px} .choice{flex:1;padding:8px 4px;background:transparent;border:1px solid var(--line);border-radius:4px;font-size:12px;color:var(--muted)} .choice.active{color:var(--accent-hi);border-color:#8c704b;background:#332a20} .swatches{display:flex;gap:10px} .swatch{height:25px;width:25px;position:relative;background:var(--swatch);border:3px solid var(--panel);border-radius:50%;outline:1px solid transparent} .swatch.active{outline-color:var(--accent)} .swatch.active:after{content:"";position:absolute;inset:7px;border-radius:50%;background:#1e1a17} .color-label{margin-left:auto;align-self:center;color:var(--muted);font-size:12px} .hint{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.8} .editor-foot{padding:20px 22px;display:flex;gap:10px;font-size:11px;color:#938575} .editor-foot svg{width:15px;height:15px;margin-top:3px} /* 7 Stage: the 3D preview and what floats over it ------------------------- */ .stage{position:relative;min-width:0;overflow:hidden;background:var(--stage-bg)} .stage:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 130px #100f0c45} #viewport{position:absolute;inset:0} #viewport canvas{display:block;width:100%;height:100%;touch-action:none} #loading{position:absolute;top:45%;left:0;right:0;text-align:center;color:var(--muted)} .stage-heading{position:absolute;left:30px;top:29px;pointer-events:none} .stage-heading .eyebrow{font-size:9px;letter-spacing:2px;color:#a49680} .stage-heading h2{font-size:23px;font-weight:300;letter-spacing:3px;margin-top:10px} .stage-heading h2 span{font:italic 23px var(--serif);letter-spacing:0;color:#9e8e77;margin-left:6px} .stage-heading p{font-size:12px;color:#9e917e;margin-top:8px;letter-spacing:.5px} .view-tabs{position:absolute;top:138px;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:4px;background:#1c1915c9;border:1px solid #453c30;border-radius:6px;backdrop-filter:blur(10px)} .view-tabs button{background:transparent;color:var(--muted);padding:6px 14px;border-radius:3px;font-size:12px;white-space:nowrap} .view-tabs button.active{color:var(--selected-text);background:var(--selected-bg)} .view-tools{position:absolute;right:18px;top:50%;transform:translateY(-50%);padding:5px;display:flex;flex-direction:column;gap:4px;background:#211c1699;border:1px solid #473b2c;border-radius:5px} .view-tools>span{border-top:1px solid var(--line);margin:1px 3px} .view-tools .icon-button{color:#b0a28b} .view-tools button[aria-pressed=true]{background:#574329;color:#efd1a1} .preview-bottom{position:absolute;bottom:62px;left:26px;right:26px;display:flex;align-items:center;justify-content:space-between;gap:10px} /* On/off switch: */ .switch{background:#574d40;border:1px solid #6f5d44;width:31px;height:18px;border-radius:20px;padding:2px;display:flex;align-items:center} .switch>span{width:12px;height:12px;border-radius:50%;background:#cbc0af;transition:transform .2s} .switch.on{background:var(--accent);border-color:var(--accent)} .switch.on>span{background:#362617;transform:translateX(12px)} .orbit-hint{font-size:11px;color:#9a8971} .stage-meta{position:absolute;bottom:0;left:0;right:0;height:41px;border-top:1px solid #453b2c88;display:flex;align-items:center;justify-content:space-between;padding:0 26px;color:#a4947e;font:10px var(--mono)} /* 8 Inspector (right), status bar, toast ---------------------------------- */ .inspector{background:var(--inspector-bg);border-left:1px solid var(--line);overflow:auto;scrollbar-width:thin;scrollbar-color:#554739 transparent} .inspector>section{padding:22px 21px;border-bottom:1px solid var(--line)} .part-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:#29231d;border:1px solid #40362a;border-radius:5px;padding:12px 10px;margin-bottom:8px} .part-item.active{border-color:#8b6b46;background:#31271d} .part-number{font:15px var(--serif);color:#ae8b5d} .part-item strong{display:block;font-weight:400;font-size:13px} .part-item small{display:block;color:#aa9780;font:10px var(--mono);margin-top:3px} .part-item>svg{width:13px;height:13px;margin-left:auto;color:#9b805d} .checks-section h3{margin-bottom:15px} .spec-row{display:flex;justify-content:space-between;gap:5px;font-size:11px;color:var(--muted);margin-bottom:10px} .spec-row strong{font:11px var(--mono);color:#c9baa3} .printer-fit{display:flex;flex-direction:column;gap:6px;margin-top:15px} .printer-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--ok)} .printer-row.warn{color:var(--warn)} .printer-row span:first-child{color:var(--muted)} .fine-print{font-size:10px;line-height:1.8;color:var(--fine);margin-top:13px} .text-button{display:flex;align-items:center;gap:8px;padding:0;background:none;color:var(--accent);font-size:12px;margin-top:12px} .text-button svg{width:14px;height:14px} .statusbar{height:30px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 20px;font:10px var(--mono);color:#938674;border-top:1px solid var(--line);background:var(--statusbar-bg)} .statusbar>span:first-child{display:flex;align-items:center;gap:7px} .status-dot{width:5px;height:5px;background:#a2b092;border-radius:50%} .statusbar b{font-weight:400;color:#5d5141;margin:0 9px} #toast{position:fixed;bottom:55px;left:50%;transform:translateX(-50%);z-index:50;background:var(--toast-bg);color:var(--toast-text);padding:12px 22px;border-radius:6px;box-shadow:0 8px 32px #0006;font-size:13px;max-width:90vw} /* 9 Dialogs: one with eyebrow + title + close --------- */ dialog{background:var(--dialog-bg);color:var(--text);border:1px solid var(--dialog-line);border-radius:12px;width:min(580px,calc(100vw - 32px));max-height:88dvh;padding:28px;box-shadow:0 30px 120px #0008} dialog::backdrop{background:#080706b8;backdrop-filter:blur(5px)} .modal-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:23px} .modal-heading h2{font-size:24px;font-weight:400;margin-top:8px} .modal-heading .eyebrow{color:var(--accent)} .modal-intro{color:#b6a994;font-size:13px;line-height:1.9} .export-options{display:flex;flex-direction:column;gap:8px;margin:18px 0} .export-option{display:flex;align-items:center;gap:13px;padding:13px 15px;background:var(--card);border:1px solid var(--card-line);border-radius:5px;cursor:pointer} .export-option:has(input:checked){border-color:var(--accent)} .export-option input{accent-color:var(--accent)} .export-option strong{display:block;font-size:14px;font-weight:500} .export-option small{display:block;font-size:11px;color:var(--muted);margin-top:3px} .notice{border-left:2px solid #b4905c;padding:10px 13px;background:#30281c;color:#c3af8f;font-size:12px;line-height:1.85;margin:18px 0} .modal-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:22px} .guide-step{display:flex;gap:17px;padding:18px 0;border-bottom:1px solid var(--line)} .guide-step>span{font:23px var(--serif);color:var(--accent)} .guide-step h3{font-size:15px;margin-bottom:5px} .guide-step p{font-size:13px;color:#b2a28b;line-height:1.8} .help-link{font-size:11px;color:var(--accent);background:none;padding:0;text-decoration:underline;text-underline-offset:3px} .load-error{position:absolute;inset:35% 10% auto;text-align:center;background:#211c16;padding:30px;border:1px solid var(--line);z-index:10} .load-error p{margin:10px 0;color:var(--muted)} /* 10 Responsive layout ----------------------------------------------------- */ @media(min-width:1550px){.workspace{grid-template-columns:340px minmax(300px,1fr) 280px}.editor-heading,.control-section{padding-left:27px;padding-right:27px}.part-tabs{padding-left:27px;padding-right:27px}.inspector>section{padding:26px}.stage-heading{left:40px;top:35px}.view-tabs{top:145px}} @media(max-width:1180px){.workspace{grid-template-columns:285px minmax(280px,1fr) 225px}.topbar{padding:0 20px;gap:16px}.brand{min-width:245px}.inspector>section{padding:20px 16px}.editor-heading,.control-section{padding-left:18px;padding-right:18px}.orbit-hint{display:none}.stage-heading{left:23px}#save-status{display:none}} @media(max-width:980px){.workspace{grid-template-columns:280px minmax(280px,1fr)}.inspector{display:none}.brand{min-width:220px}.topbar{gap:12px}.button{padding:9px 12px}.stage-heading h2{font-size:21px}} /* Phone: the page scrolls, the 3D preview comes first, the editor follows. */ @media(max-width:700px){body{height:auto;min-height:100dvh;overflow:auto}.topbar{height:69px;padding:0 15px;gap:8px;position:sticky;top:0;z-index:20}.brand{min-width:0;gap:9px}.brand-name{font-size:24px}.brand-by{font-size:7px;letter-spacing:1.7px}.brand-mark{height:33px;width:28px}.brand-mark svg{width:21px}.header-actions{margin-left:auto;gap:6px}.header-actions .button{padding:8px 10px;min-height:36px;font-size:12px}.header-actions .secondary span{display:none}.header-actions .secondary{padding:8px}:root{--phone-stage:clamp(320px,50svh,460px)}html:has(.workspace>.stage){scroll-padding-top:calc(120px + var(--phone-stage))}.workspace{display:flex;flex-direction:column;min-height:0}.stage{order:-1;position:sticky;top:69px;z-index:15;flex:none;height:var(--phone-stage);min-height:0;width:100%;border-bottom:1px solid var(--line)}.stage-heading{top:12px;left:12px;right:150px}.stage-heading .eyebrow,.stage-heading p{display:none}.stage-heading h2{font-size:16px;letter-spacing:1.5px;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stage-heading h2 span{font-size:17px}.view-tabs{top:44px;left:12px;transform:none;max-width:calc(100% - 24px)}.view-tabs button{padding:5px 10px}.stage .view-tools{right:10px;top:88px;transform:none;padding:3px;gap:0}.stage .view-tools .icon-button{width:30px;height:30px}.preview-bottom{left:12px;right:12px;bottom:10px}.stage-meta{top:12px;bottom:auto;left:auto;height:22px;border:0;padding:0 14px;font-size:9px}.editor{overflow:visible;border-top:1px solid var(--line);border-right:0}.editor-heading{padding:22px}.editor-heading h1{font-size:19px}.part-tabs{position:sticky;top:calc(69px + var(--phone-stage));background:var(--panel);z-index:10;padding:0 22px}.control-section{padding:23px}.preset svg{height:58px;width:54px}.preset{font-size:13px}.field label{font-size:14px}.field{margin-top:22px}input[type=range]{height:6px;margin:19px 0}input[type=range]::-webkit-slider-thumb{width:17px;height:17px}.inspector{display:block;border:0}.inspector>section{padding:23px}.checks-section .spec-row{font-size:13px}.fine-print{font-size:12px}.statusbar{font-size:9px;min-height:33px;padding:0 13px}.statusbar>span:nth-child(2){display:none}.part-item small{font-size:12px}.stage:after{box-shadow:inset 0 0 70px #100f0c45}} @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}} .part-tabs{position:sticky;top:0;z-index:10;background:var(--panel)}@media(max-width:700px){.part-tabs{top:calc(69px + var(--phone-stage))}} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} .preview-check{display:flex;align-items:center;gap:9px;font-size:12px;margin:17px 0;color:var(--text)}.preview-check input{accent-color:#cda36d} .part-tabs button{white-space:nowrap}.part-tabs .tab-num{margin-right:4px}.part-tabs button{min-width:0;padding-left:6px;padding-right:6px} @media(min-width:701px){html{height:100%;overflow:clip}} /* Tablet: one page scroll. Editor then inspector in the left column; the 3D preview stays pinned on the right. */ @media(min-width:701px) and (max-width:980px){html{height:auto;overflow:visible}body{height:auto;min-height:100dvh;overflow:visible}.topbar{position:sticky;top:0;z-index:20}.workspace{grid-template-rows:auto 1fr;align-items:start}.editor{grid-column:1;grid-row:1;overflow:visible}.part-tabs{top:83px}.inspector{display:block;grid-column:1;grid-row:2;align-self:stretch;overflow:visible;border-left:0;border-right:1px solid var(--line);border-top:1px solid var(--line)}.stage{grid-column:2;grid-row:1/3;position:sticky;top:83px;height:calc(100dvh - 83px)}#controls{scroll-margin-top:130px}} /* Mobile: scrollIntoView lands the panel below the sticky topbar (69px) and part tabs (~51px). */ @media(max-width:700px){#controls{scroll-margin-top:calc(120px + var(--phone-stage))}} /* Section titles; advanced editors fold away so the default panel stays short.

…

…
*/ .section-title{font-size:14px;font-weight:500;margin:0 0 15px} .fold{padding-top:0;padding-bottom:0} .fold[open]{padding-bottom:22px} .fold>summary{display:flex;align-items:center;gap:10px;padding:18px 0;cursor:pointer;list-style:none} .fold>summary::-webkit-details-marker{display:none} .fold>summary .section-title{margin:0} .fold>summary:hover .section-title{color:var(--accent-hi)} .fold>summary:after{content:"";width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform .16s} .fold[open]>summary:after{transform:translateY(2px) rotate(225deg)} .fold-note{margin-left:auto;font:11px var(--mono);color:var(--accent)} /* Language switch:
*/ .lang-switch{display:flex;gap:2px} .lang-switch{border:1px solid var(--line);border-radius:5px;padding:2px} .lang-switch button{background:transparent;color:var(--muted);font-size:12px;border-radius:3px} .lang-switch button{padding:6px 9px;min-width:34px} .lang-switch button.active{background:var(--selected-bg);color:var(--selected-text)} .editor-foot .text-button{margin-top:8px} @media(max-width:700px){.lang-switch button{padding:6px 7px;min-width:30px}} .button{white-space:nowrap} @media(max-width:420px){.brand-mark,.header-actions .primary svg{display:none}.brand-name{font-size:21px}.brand-by{font-size:6.5px}} .preview-bottom{pointer-events:none} .preview-bottom>*{pointer-events:auto} .sub-label{font-size:12px;color:var(--muted);margin:16px 0 8px} .spec-row strong.warn{color:var(--warn)} .overhang-note{font-size:11px;line-height:1.7;color:var(--warn);margin:-4px 0 10px} .part-grams{display:block;margin-top:2px;color:#c9a36e} /* Five presets in one row; a long name may break at its soft hyphen */ .preset-grid.five{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px} .preset-grid.five .preset{font-size:11px;padding:6px 1px;line-height:1.25;hyphens:manual} .preset-grid.five .preset svg{width:34px;height:40px} /* 11 Account: sign-in, plans, "My designs" -------------------------------- */ /* Classes below set display, which would otherwise override the hidden attribute. */ [hidden]{display:none!important} #account .account-label{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:700px){#account .account-label{display:none}#account{padding:8px}} .account-form{display:flex;flex-direction:column;gap:9px;margin:16px 0} .account-form label{font-size:12px;color:var(--muted)} .account-form input{width:100%;padding:10px 11px;background:var(--input);color:var(--text);border:1px solid var(--input-line);border-radius:5px;font-size:15px} .account-form input:focus{outline:1px solid var(--accent);border-color:var(--accent)} .account-form .help-link{align-self:flex-start} #signin-code{font:20px var(--mono);letter-spacing:.3em} .account-error{border-left:2px solid var(--danger);padding:9px 12px;background:var(--danger-bg);color:var(--danger-text);font-size:12px;line-height:1.7;margin:14px 0 0} .account-error[hidden]{display:none} .plan-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:16px 0} .plan-card{position:relative;display:flex;flex-direction:column;padding:16px 16px 15px;background:var(--card);border:1px solid var(--card-line);border-radius:8px} .plan-card.current{border-color:var(--accent)} .plan-card.picked{border-color:var(--accent-hi);box-shadow:inset 0 0 0 1px var(--accent-hi)} .plan-card.pass{background:linear-gradient(135deg,#3a2e20,#2c2419)} .plan-card strong{display:block;font-size:15px;font-weight:600} .plan-card small{display:block;font-size:11px;color:var(--muted);margin-top:2px} .plan-card p{margin:6px 0 0;font-size:12px;line-height:1.65;color:#c3b39b} .plan-badge{position:absolute;top:15px;right:14px;font-style:normal;font-size:10px;color:var(--accent-hi);border:1px solid var(--chip-line);border-radius:10px;padding:2px 8px} .plan-amount{display:flex;align-items:baseline;gap:4px;margin:14px 0 12px} .plan-amount b{font:400 30px/1 var(--serif);color:var(--accent-hi);white-space:nowrap} .plan-amount span{font-size:12px;color:var(--muted)} .plan-card ul{list-style:none;display:grid;gap:7px;margin:0 0 16px;padding:12px 0 0;border-top:1px solid var(--card-line);font-size:12px;line-height:1.5;color:#c3b39b} .plan-card li{position:relative;padding-left:14px} .plan-card li::before{content:"";position:absolute;left:0;top:.75em;width:7px;height:1px;background:var(--accent)} .plan-card li.limit{color:var(--muted)} .plan-card p.plan-retired{margin:0 0 14px;font-size:11px;color:var(--muted)} .plan-action{margin-top:auto} .plan-action .button{width:100%;min-height:36px;font-size:13px} .plan-state{display:block;padding:8px;text-align:center;font-size:12px;color:var(--accent);border:1px solid var(--chip-line);border-radius:6px} .plan-state.muted{color:var(--muted);border-color:var(--card-line)} .plan-foot{font-size:12px} .vault-list{display:flex;flex-direction:column;gap:7px;margin:14px 0} .vault-row{display:flex;align-items:center;gap:12px;padding:8px;background:var(--card);border:1px solid var(--card-line);border-radius:6px} .vault-row img,.vault-thumb{width:54px;height:54px;border-radius:4px;object-fit:cover;background:var(--field);flex-shrink:0} .vault-name{flex:1;min-width:0} .vault-name strong{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vault-name small{display:block;font-size:11px;color:var(--muted)} .vault-actions{display:flex;align-items:center;gap:10px;flex-shrink:0} .vault-actions .button{min-height:32px;padding:5px 12px;font-size:12px} .vault-actions .help-link{margin-left:0} .vault-rename{width:100%;padding:4px 7px;background:var(--input);color:var(--text);border:1px solid var(--accent);border-radius:4px;font-size:14px} @media(max-width:520px){.vault-row{flex-wrap:wrap}.vault-actions{width:100%;justify-content:flex-end}} /* 12 Toolbar: browse | tools | account | language | feedback -------------- Order and ids: STANDARD.md → "Top bar". Buttons are ; the label hides first (≤1480px), then everything marked .more folds under ☰ (≤1100px). */ .brand{min-width:0;flex-shrink:0} .browse-nav{display:flex;gap:4px;padding-left:14px;border-left:1px solid var(--line)} .tool-button{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 11px;background:transparent;border:1px solid transparent;border-radius:5px;color:#d7c8b0;font-size:13px;white-space:nowrap} .tool-button:hover{background:var(--raised);border-color:var(--line)} .tool-button svg{width:16px;height:16px} .header-actions .tool-button#save,.header-actions .tool-button#vault-btn{border-color:var(--line)} .account-area{display:inline-flex;align-items:center;gap:4px;padding-left:10px;border-left:1px solid var(--line)} #account-name{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--muted)} .plan-chip{border-color:var(--chip-line)!important;color:var(--accent-hi)} .menu-btn{display:none} @media(max-width:1600px){#save-status{display:none}} @media(max-width:1480px){.header-actions .tool-button svg+span{display:none}.header-actions .tool-button{padding:0 9px}.topbar{gap:18px}} @media(max-width:1240px){#account-name{display:none}.browse-nav{padding-left:8px}.browse-nav .tool-button svg+span{display:none}} /* Folded: brand, Random, Export and the menu button; everything marked .more drops below the bar when the menu is open. */ @media(max-width:1100px){ .topbar{flex-wrap:wrap;height:auto;min-height:69px;row-gap:8px;padding-top:12px;padding-bottom:12px} .menu-btn{display:inline-flex;order:3} .topbar .more{display:none} .topbar .header-actions{order:2;margin-left:auto;flex-wrap:wrap;justify-content:flex-end} .topbar.menu-open .more{display:inline-flex} .topbar.menu-open .menu-btn{margin-left:auto} /* The open menu is one plain list in columns (browse, then tools), then a row for the account, then language on the left and Export on the right. */ .topbar.menu-open .browse-nav,.topbar.menu-open .header-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 8px;width:100%;margin:0;border-left:0;padding-left:0} .topbar.menu-open .browse-nav{order:4;padding-top:10px;border-top:1px solid var(--line)} .topbar.menu-open .header-actions{order:5;margin-top:-6px} .topbar.menu-open .tool-button{width:100%;height:44px;padding:0 12px;gap:12px;justify-content:flex-start;font-size:14px} .topbar.menu-open .tool-button:not(.plan-chip),.topbar.menu-open .header-actions .tool-button#save,.topbar.menu-open .header-actions .tool-button#vault-btn{border-color:transparent} .topbar.menu-open .tool-button svg{color:var(--muted)} .topbar.menu-open .tool-button svg+span{display:inline} .topbar.menu-open .header-actions>*{order:1} .topbar.menu-open .account-area{order:2;grid-column:1/-1;display:flex;align-items:center;gap:8px;margin-top:8px;padding:10px 0 0;border-left:0;border-top:1px solid var(--line)} .topbar.menu-open #account-name{display:inline;flex:1;min-width:0;max-width:none;padding-left:12px;font-size:13px} .topbar.menu-open .account-area .tool-button{width:auto;height:36px;font-size:13px} .topbar.menu-open .lang-switch{order:3;grid-column:1;justify-self:start;align-self:center;margin-top:8px} .topbar.menu-open #export{order:4;grid-column:-2;justify-self:end;margin-top:8px} } @media(max-width:700px){.topbar{gap:8px}.topbar.menu-open .browse-nav,.topbar.menu-open .header-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-button{height:36px}} /* Wide dialogs: vault, plans, gallery, ready to print, admin */ dialog.wide{width:min(920px,calc(100vw - 32px))} .modal-list{margin:0 0 6px 18px;padding:0;color:#b6a994;font-size:13px;line-height:1.9} .plan-links{font-size:11px;color:var(--muted);margin:6px 0 0}.plan-links a{color:var(--muted)} .badge{font-style:normal;font-size:10px;color:var(--accent);border:1px solid var(--chip-line);border-radius:9px;padding:1px 7px;margin-left:5px;vertical-align:middle} .button.small{min-height:30px;padding:4px 11px;font-size:12px} .account-form textarea{width:100%;padding:10px 11px;background:var(--input);color:var(--text);border:1px solid var(--input-line);border-radius:5px;font:14px/1.5 var(--sans);resize:vertical} .vault-quota{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;font-size:12px;color:var(--muted)} .vault-quota em{font-style:normal;color:var(--accent);margin-left:7px} .vault-bar{height:6px;border-radius:3px;background:#3a3129;overflow:hidden}.vault-bar i{display:block;height:100%;background:var(--accent)}.vault-bar.full i{background:var(--danger)} .vault-row.locked img{opacity:.55}.vault-row .lock{font-size:12px} .vault-foot{justify-content:space-between} /* Design cards: ready to print, gallery, admin lists */ .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:14px 0} .card-grid.gallery{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))} .design-card{display:flex;flex-direction:column;gap:9px;padding:9px;background:var(--card);border:1px solid var(--card-line);border-radius:7px} .design-card img,.design-thumb{width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px;background:var(--field);display:block} .design-card img[data-act]{cursor:pointer} .design-card strong{display:block;font-weight:500;font-size:14px} .design-card small{display:block;font-size:11px;color:var(--muted);line-height:1.5;margin-top:3px} .design-card>.button{align-self:flex-start} .card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.card-actions .help-link{margin-left:0} /* First-visit hints: a bar in the stage corner, and a callout under 🎲 Random */ .starter-bar{position:absolute;right:16px;bottom:78px;z-index:6;display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;background:#2b241cf0;border:1px solid var(--chip-line);border-radius:8px;box-shadow:0 10px 30px #0006;font-size:13px;max-width:calc(100% - 32px)} .starter-bar b,.random-hint b{color:var(--accent-hi);font-weight:600} .random-hint{position:absolute;z-index:60;display:flex;align-items:center;gap:10px;max-width:min(380px,calc(100vw - 24px));padding:10px 10px 10px 14px;background:var(--toast-bg);color:var(--toast-text);border-radius:8px;box-shadow:0 12px 36px #0007;font-size:13px} .random-hint::before{content:"";position:absolute;top:-6px;left:calc(var(--arrow-x,50%) - 6px);width:12px;height:12px;background:var(--toast-bg);transform:rotate(45deg)} .random-hint b{color:#7a4a24}.random-hint .icon-button{color:#6a5540} @media(max-width:700px){.starter-bar{bottom:12px;left:12px;right:12px;flex-wrap:wrap;font-size:12px}} /* 13 Admin (English only; for the owner) ----------------------------------- */ .admin-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px} .admin-tabs button{background:none;color:var(--muted);padding:8px 12px;border-bottom:2px solid transparent;font-size:13px} .admin-tabs button[aria-selected=true]{color:var(--accent-hi);border-bottom-color:var(--accent)} .admin-body{padding-right:2px} .admin-body h4{font:15px var(--serif);color:var(--text);margin:22px 0 8px} .admin-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:8px 0} .admin-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:12px} .admin-stat{padding:10px 12px;background:var(--card);border:1px solid var(--card-line);border-radius:6px} .admin-stat b{display:block;font:24px var(--serif);color:var(--accent-hi)}.admin-stat span{display:block;font-size:12px}.admin-stat small{font-size:10px;color:var(--muted)} .admin-chart{width:100%;height:auto;display:block}.admin-chart .grid{stroke:#3a3129}.admin-chart text{font:10px var(--mono);fill:var(--muted)} .chart-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:11px;color:var(--muted);margin:6px 0 0}.chart-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px} .admin-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:4px 24px} .admin-bars div{display:grid;grid-template-columns:minmax(80px,38%) 1fr auto;align-items:center;gap:8px;font-size:12px;margin:3px 0} .admin-bars span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)} .admin-bars b{display:block;height:9px;width:var(--w);background:var(--c);border-radius:2px;min-width:2px}.admin-bars em{font-style:normal;font:11px var(--mono)} .admin-table-wrap{overflow-x:auto} .admin-table{width:100%;border-collapse:collapse;font-size:12px} .admin-table th{text-align:left;color:var(--muted);font-weight:500;padding:6px 8px;border-bottom:1px solid var(--line)} .admin-table td{padding:7px 8px;border-bottom:1px solid #2f2923;vertical-align:top}.admin-table small{color:var(--muted);font-size:11px} .admin-new{padding:12px;border:1px dashed var(--chip-line);border-radius:7px} /* Catalogue: admin-curated list of options (textures, rim styles) */ .catalogue{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:5px;margin-top:10px} .catalogue label{display:flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid var(--line);border-radius:5px;font-size:12px;cursor:pointer} .catalogue label.off{opacity:.45}.catalogue span{flex:1}.catalogue code{font-size:10px;color:var(--muted)} .catalogue input{accent-color:var(--accent)} /* Admin dashboard (kuze-kit/admin.js): sections, notes, backup box, the account filters and the tool flags on each account. */ .admin-section{margin-top:22px;border-top:1px solid var(--line)} .admin-section>h4:first-child,.admin-section>div>h4:first-child{margin-top:18px} .admin-note{font-size:12px;line-height:1.7;color:var(--muted);margin:2px 0 10px} .admin-note b{color:var(--text);font-weight:600} .admin-dim{color:var(--fine)} .admin-ranges{display:flex;flex-wrap:wrap;gap:6px} .admin-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding:12px 14px;border:1px solid var(--line);border-radius:7px} .admin-box strong{display:block;font-size:13px;font-weight:600} .admin-box .admin-note{margin:3px 0 0} .admin-box-actions{display:flex;flex-wrap:wrap;gap:6px} .admin-bars-head{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:4px} .admin-chart{stroke:none;stroke-linecap:butt;stroke-linejoin:miter} .admin-table th.num,.admin-table td.num{text-align:right;font-variant-numeric:tabular-nums} .admin-acct{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .admin-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 8px} .admin-seg{display:flex;flex-wrap:wrap;gap:2px;padding:2px;border:1px solid var(--line);border-radius:5px} .admin-seg button{background:transparent;color:var(--muted);font-size:12px;padding:5px 10px;border-radius:3px;white-space:nowrap} .admin-seg button[aria-pressed=true]{background:var(--selected-bg);color:var(--selected-text)} .admin-seg em{font:10px var(--mono);font-style:normal;margin-left:6px;opacity:.75} .admin-filter select,.admin-filter input{background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:6px 8px;font-size:12px} .admin-filter input{flex:1;min-width:170px} .admin-filter input:focus,.admin-filter select:focus{border-color:var(--accent)} .tool-chip{display:inline-block;margin:1px 4px 1px 0;padding:1px 8px;border:1px solid var(--line);border-radius:9px;font-size:11px;color:#c9baa3;white-space:nowrap} .tool-chip.first{border-color:var(--chip-line);color:var(--accent-hi)} .admin-dash .admin-cols{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:4px 28px} .admin-filter select{width:auto;min-width:0}