/* ═══════════════════════════════════════════════════════════════ SewLab v3.6 — Stylesheet Offline static app, FreeSewing-style pattern editor ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Platform theme bridge (2026-07-16, owner feedback) ───────────────────── SewLab's palette doubles as the platform-wide "sewlab" theme, and sewlab now honors the shared `theme` cookie (written domain=itsoh.info by the app.itsoh.info switcher) via data-theme on — see the inline script in index.html. Default = sewlab. Each block defines the SAME variable set; component rules below reference only these vars (header/hairline hardcodes were replaced). */ :root, [data-theme="sewlab"] { --bg: #f6f3ed; --surface: #fffefb; --surface2: #f0ece3; --surface3: #e8e3d8; --hairline: #ede9e0; --border: #d8d0c0; --border-strong: #b8ac98; --ink: #1a1714; --ink2: #5a5248; --ink3: #9a8f82; --accent: #c4440a; --accent-hover: #a83808; --accent-light: #fdf0ea; --green: #2d6b27; --green-light: #e8f5e7; --red: #b83030; --red-light: #fdf0f0; --header-bg: #1a1714; --header-fg: #f6f3ed; --header-muted: #8a7d6e; --header-hover: #c8bdb0; --header-border: #3a352e; --header-dim: #6a5f52; --logo-em: #e8a070; } /* the three platform themes (values matched to apps/apphtmx/theme.css) */ [data-theme="aurora"] { --bg: #0b0d14; --surface: #151823; --surface2: #1b1f2c; --surface3: #212637; --hairline: #1e2333; --border: #242a3a; --border-strong: #39425c; --ink: #f5f7fb; --ink2: #a6adc2; --ink3: #6b7490; --accent: #6366f1; --accent-hover: #818cf8; --accent-light: #1d2040; --green: #37d67a; --green-light: #12301e; --red: #ff6b6b; --red-light: #38191c; --header-bg: #151823; --header-fg: #f5f7fb; --header-muted: #8a92a8; --header-hover: #c9d0e4; --header-border: #2c3450; --header-dim: #5b6475; --logo-em: #22d3ee; } [data-theme="light"] { --bg: #f6f6f4; --surface: #ffffff; --surface2: #efeff0; --surface3: #e6e6e8; --hairline: #ececee; --border: #e4e4e7; --border-strong: #c8c8cd; --ink: #18181b; --ink2: #52525b; --ink3: #a1a1aa; --accent: #4f46e5; --accent-hover: #4338ca; --accent-light: #eef0fd; --green: #16a34a; --green-light: #e8f6ed; --red: #dc2626; --red-light: #fdeaea; --header-bg: #18181b; --header-fg: #fafafa; --header-muted: #a1a1aa; --header-hover: #d4d4d8; --header-border: #3f3f46; --header-dim: #71717a; --logo-em: #818cf8; } [data-theme="console"] { --bg: #0a0a0a; --surface: #101214; --surface2: #17191d; --surface3: #1e2126; --hairline: #1c1f23; --border: #26292e; --border-strong: #41454d; --ink: #d6d3d1; --ink2: #a8a29e; --ink3: #78716c; --accent: #10b981; --accent-hover: #34d399; --accent-light: #0d271d; --green: #34d399; --green-light: #0d271d; --red: #f87171; --red-light: #2f1414; --header-bg: #101214; --header-fg: #d6d3d1; --header-muted: #78716c; --header-hover: #d6d3d1; --header-border: #3d4148; --header-dim: #57534e; --logo-em: #34d399; } /* theme-independent metrics & type */ :root { --header-h: 52px; --footer-h: 28px; --sidebar-w: 320px; --toolbar-h: 38px; --radius: 6px; --radius-sm: 4px; --font: 'DM Sans', system-ui, sans-serif; --mono: 'DM Mono', 'SF Mono', monospace; --serif: 'Instrument Serif', Georgia, serif; } html, body { height: 100%; overflow: hidden; } body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 13px; line-height: 1.5; } /* ═══ HEADER ═══ */ #header { height: var(--header-h); background: var(--header-bg); display: flex; align-items: center; padding: 0 16px; gap: 12px; position: relative; z-index: 100; } #header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 40%, transparent 100%); opacity: .5; } .logo { font-family: var(--serif); font-size: 22px; color: var(--header-fg); letter-spacing: -.02em; flex-shrink: 0; user-select: none; } .logo em { font-style: italic; color: var(--logo-em); } .logo-v { font-family: var(--mono); font-size: 9px; color: var(--header-dim); vertical-align: super; margin-left: 2px; } /* Navigation */ #nav-views { display: flex; gap: 2px; margin-left: 16px; } .nav-btn { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); font-family: var(--font); font-size: 12px; font-weight: 500; color: var(--header-muted); cursor: pointer; transition: all .15s; white-space: nowrap; } .nav-btn:hover { color: var(--header-hover); border-color: var(--header-border); } .nav-btn.active { color: var(--header-fg); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); } .nav-btn svg { opacity: .7; } .nav-btn.active svg { opacity: 1; } .hdr-spacer { flex: 1; } .hdr-select { height: 28px; padding: 0 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 11px; color: var(--header-hover); cursor: pointer; outline: none; min-width: 140px; } .hdr-select:hover { border-color: rgba(255,255,255,.25); color: var(--header-fg); } .hdr-select option { background: var(--header-bg); color: var(--header-fg); } .hdr-btn { height: 28px; padding: 0 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 11px; color: var(--header-hover); cursor: pointer; transition: all .12s; min-width: 40px; text-align: center; } .hdr-btn:hover { border-color: rgba(255,255,255,.25); color: var(--header-fg); } .hdr-count { font-family: var(--mono); font-size: 10px; color: var(--header-dim); background: rgba(255,255,255,.06); padding: 2px 8px; border-radius: 8px; } /* ═══ VIEWS ═══ */ #app { height: calc(100vh - var(--header-h) - var(--footer-h)); overflow: hidden; } .view { display: none; height: 100%; } .view.active { display: flex; } /* ═══ FOOTER (status bar) ═══ */ #footer { height: var(--footer-h); background: var(--surface2); border-top: 1px solid var(--border); display: flex; align-items: center; padding: 0 16px; gap: 16px; font-family: var(--mono); font-size: 10px; color: var(--ink3); } .pipeline-summary { color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; } .footer-spacer { flex: 1; } #status-bar { max-width: 500px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #status-bar.error { color: var(--red); } /* ═══ DESIGNS VIEW ═══ */ #view-designs { flex-direction: column; overflow: hidden; } .designs-header { padding: 24px 32px 16px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .view-title { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--ink); } .designs-toolbar { display: flex; gap: 8px; align-items: center; } #design-search { width: 240px; height: 34px; padding: 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--mono); font-size: 12px; color: var(--ink); outline: none; transition: border-color .15s; } #design-search:focus { border-color: var(--accent); } #design-search::placeholder { color: var(--ink3); } .tool-btn { width: 34px; height: 34px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 18px; color: var(--ink3); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .12s; } .tool-btn:hover { border-color: var(--accent); color: var(--accent); } /* Add design drawer */ .drawer { display: none; padding: 0 32px 16px; gap: 16px; flex-shrink: 0; } .drawer.open { display: flex; } .drawer-section { flex: 1; display: flex; flex-direction: column; gap: 6px; } .drawer-label { font-family: var(--mono); font-size: 10px; color: var(--ink3); text-transform: uppercase; letter-spacing: .08em; } .drop-zone { border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 14px; text-align: center; cursor: pointer; transition: all .15s; background: var(--surface2); } .drop-zone:hover, .drop-zone.dragover { border-color: var(--accent); background: var(--accent-light); } .drop-text { font-family: var(--mono); font-size: 11px; color: var(--ink3); } .browse-link { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; } .pkg-row { display: flex; gap: 6px; } .pkg-row input { flex: 1; height: 32px; padding: 0 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 12px; color: var(--ink); outline: none; } .pkg-row input:focus { border-color: var(--accent); } .hint { font-family: var(--mono); font-size: 9px; color: var(--ink3); } /* Design grid */ .design-grid { flex: 1; overflow-y: auto; padding: 0 32px 32px; } .design-grid::-webkit-scrollbar { width: 4px; } .design-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .design-category { margin-bottom: 24px; } .cat-label { font-family: var(--mono); font-size: 10px; color: var(--ink3); text-transform: uppercase; letter-spacing: .1em; padding: 0 0 10px; display: flex; align-items: center; gap: 8px; } .cat-label::after { content: ''; flex: 1; height: 1px; background: var(--border); } .cat-count { opacity: .6; } .cat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .design-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all .12s; text-align: left; width: 100%; } .design-card:hover { border-color: var(--border-strong); background: var(--surface2); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.04); } .design-card.active { border-color: var(--accent); background: var(--accent-light); } .design-card.custom { border-style: dashed; } .card-emoji { font-size: 20px; flex-shrink: 0; } .card-info { min-width: 0; } .card-name { font-size: 13px; font-weight: 500; color: var(--ink); display: block; } .card-desc { font-size: 10px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } /* ═══ DRAFT VIEW ═══ */ #view-draft { flex-direction: row; } .draft-layout { display: flex; width: 100%; height: 100%; } /* Sidebar */ #draft-sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; } .sidebar-scroll { flex: 1; overflow-y: auto; } .sidebar-scroll::-webkit-scrollbar { width: 3px; } .sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } /* Sidebar sections */ .sb-section { border-bottom: 1px solid var(--border); } .sb-header { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--ink); transition: background .1s; } .sb-header:hover { background: var(--surface2); } .sb-icon { font-size: 14px; } .sb-chevron { margin-left: auto; transition: transform .2s; } .sb-section.open .sb-chevron { transform: rotate(180deg); } .sb-body { display: none; padding: 0 14px 14px; } .sb-section.open .sb-body { display: block; } .sb-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; } .sb-label { font-family: var(--mono); font-size: 11px; color: var(--ink3); } .sa-wrap { display: flex; align-items: center; gap: 3px; } .sa-wrap input[type="number"] { width: 50px; height: 26px; padding: 0 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 12px; color: var(--ink); text-align: right; outline: none; } .sa-wrap input:focus { border-color: var(--accent); } .sa-unit { font-family: var(--mono); font-size: 10px; color: var(--ink3); } #ease-select { height: 26px; padding: 0 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 11px; color: var(--ink); cursor: pointer; outline: none; } #ease-select:focus { border-color: var(--accent); } /* Mini toggle (live redraft) */ .mini-toggle { width: 32px; height: 26px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--ink3); transition: all .12s; } .mini-toggle.active { background: var(--accent); color: white; border-color: var(--accent); } .mini-toggle:hover { border-color: var(--border-strong); } .mini-toggle.active:hover { border-color: var(--accent); } /* Profile / Bundle bar */ .profile-bar, .bundle-bar { display: flex; gap: 4px; align-items: center; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } #sb-profile-select, #bundle-select { flex: 1; height: 26px; padding: 0 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 10px; color: var(--ink); cursor: pointer; outline: none; max-width: none; } .profile-btn { height: 26px; padding: 0 8px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 9px; color: var(--ink2); cursor: pointer; transition: all .12s; white-space: nowrap; } .profile-btn:hover { border-color: var(--border-strong); color: var(--ink); } .profile-btn.save { border-color: var(--green); color: var(--green); } .profile-btn.save:hover { background: var(--green-light); } .profile-btn.del { border-color: var(--red); color: var(--red); } .profile-btn.del:hover { background: var(--red-light); } /* Measurement inputs */ .meas-grid { display: flex; flex-direction: column; gap: 1px; } .meas-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--hairline); } .meas-row:last-child { border-bottom: none; } .meas-row label { font-size: 11px; color: var(--ink2); } .meas-row label.optional { color: var(--ink3); } .opt-tag { font-family: var(--mono); font-size: 9px; color: var(--ink3); background: var(--surface2); padding: 1px 4px; border-radius: 2px; margin-left: 4px; } .input-wrap { display: flex; align-items: center; gap: 4px; } .input-wrap input[type="number"] { width: 56px; height: 24px; padding: 0 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 11px; color: var(--ink); text-align: right; outline: none; transition: border-color .12s; } .input-wrap input[type="number"]:focus { border-color: var(--accent); background: var(--surface); } .unit { font-family: var(--mono); font-size: 10px; color: var(--ink3); width: 16px; } .section-divider { font-family: var(--mono); font-size: 9px; color: var(--ink3); letter-spacing: .1em; text-transform: uppercase; padding: 12px 0 6px; border-top: 1px solid var(--border); margin-top: 8px; } .no-meas { font-family: var(--mono); font-size: 11px; color: var(--ink3); padding: 16px 0; text-align: center; } /* Options */ .opt-section { margin-bottom: 10px; } .opt-section-title { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); padding: 4px 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .opt-row { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; gap: 8px; } .opt-row label { font-size: 11px; color: var(--ink2); flex: 1; min-width: 0; } .slider-wrap { display: flex; align-items: center; gap: 6px; } .slider-wrap input[type="range"] { width: 80px; accent-color: var(--accent); cursor: pointer; } .slider-val { font-family: var(--mono); font-size: 10px; color: var(--ink2); width: 32px; text-align: right; } select { height: 26px; padding: 0 6px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 11px; color: var(--ink); cursor: pointer; outline: none; max-width: 110px; } .toggle { position: relative; display: inline-flex; cursor: pointer; } .toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-track { width: 34px; height: 18px; background: var(--border); border-radius: 9px; transition: background .2s; position: relative; } .toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: white; border-radius: 50%; transition: transform .2s; } .toggle input:checked + .toggle-track { background: var(--accent); } .toggle input:checked + .toggle-track::after { transform: translateX(16px); } .toggle-inline { display: inline-flex; position: relative; cursor: pointer; flex-shrink: 0; } .toggle-inline input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-inline .toggle-track { width: 26px; height: 14px; border-radius: 7px; } .toggle-inline .toggle-track::after { width: 10px; height: 10px; } .toggle-inline input:checked + .toggle-track::after { transform: translateX(12px); } /* Mod inputs */ .mod-row { padding: 6px 0; border-bottom: 1px solid var(--hairline); } .mod-row:last-child { border-bottom: none; } .mod-label { font-size: 11px; color: var(--ink2); display: block; margin-bottom: 3px; } .mod-hint { font-family: var(--mono); font-size: 9px; color: var(--ink3); display: block; margin-top: 2px; } /* Parts list */ .parts-list { display: flex; flex-direction: column; gap: 2px; } .part-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--hairline); } .part-row:last-child { border-bottom: none; } .part-name { font-family: var(--mono); font-size: 11px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Export */ .export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .export-btn { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--mono); font-size: 11px; color: var(--ink2); cursor: pointer; transition: all .12s; } .export-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } .export-btn:disabled { opacity: .35; pointer-events: none; } .export-icon { font-size: 14px; } /* Canvas area */ #canvas-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); } #canvas-toolbar { height: var(--toolbar-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 12px; gap: 8px; flex-shrink: 0; } .badge { font-family: var(--mono); font-size: 11px; color: var(--ink); background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 8px; } .badge.dim { color: var(--ink3); display: none; } .canvas-spacer { flex: 1; } .zoom-btn { width: 26px; height: 26px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ink2); font-family: monospace; transition: all .1s; } .zoom-btn:hover { border-color: var(--border-strong); color: var(--ink); } #zoom-level { font-family: var(--mono); font-size: 10px; color: var(--ink3); width: 40px; text-align: center; } #pattern-viewport { flex: 1; overflow: hidden; position: relative; cursor: grab; } #pattern-viewport:active { cursor: grabbing; } #pattern-viewport.empty { display: flex; align-items: center; justify-content: center; } #pattern-canvas { transform-origin: 0 0; position: absolute; top: 0; left: 0; } #pattern-canvas svg { display: block; overflow: visible; } .empty-state { text-align: center; color: var(--ink3); pointer-events: none; } .empty-state .big { font-size: 48px; margin-bottom: 8px; opacity: .25; } .empty-state p { font-size: 12px; font-family: var(--mono); margin-top: 4px; } .shortcuts-hint { font-size: 10px !important; opacity: .7; } /* ═══ BUTTONS ═══ */ .btn-primary { height: 36px; padding: 0 20px; background: var(--accent); color: white; border: none; border-radius: var(--radius); font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, transform .1s; } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:active { transform: scale(.97); } .btn-primary.full { width: 100%; margin-top: 8px; } .btn-primary.loading { opacity: .6; pointer-events: none; } .btn-sm { height: 32px; padding: 0 14px; background: var(--accent); color: white; border: none; border-radius: var(--radius-sm); font-family: var(--mono); font-size: 11px; cursor: pointer; white-space: nowrap; transition: background .12s; } .btn-sm:hover { background: var(--accent-hover); } .btn-sm:disabled { opacity: .5; pointer-events: none; } /* ═══ PDF OVERLAY ═══ */ #pdf-overlay { position: fixed; inset: 0; background: rgba(26,23,20,.6); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 1000; } #pdf-overlay.show { display: flex; } .pdf-modal { background: var(--surface); border-radius: 12px; padding: 32px 40px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,.15); } .pdf-modal p { font-family: var(--mono); font-size: 12px; color: var(--ink2); margin-top: 16px; } /* Spinners */ .spinner-lg { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; margin: 0 auto; } @keyframes spin { to { transform: rotate(360deg); } } /* ═══ ANALYZE VIEW ═══ */ #view-analyze { justify-content: center; overflow-y: auto; background: var(--bg); } .analyze-layout { width: 100%; max-width: 900px; margin: 0 auto; padding: 32px 24px; display: flex; flex-direction: column; gap: 24px; } .analyze-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 28px; } .analyze-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .analyze-hint { font-size: 13px; color: var(--ink2); margin-bottom: 16px; line-height: 1.5; } /* LLM settings drawer (also used for legacy name api-key-drawer) */ .api-key-drawer { display: none; flex-direction: column; gap: 6px; padding: 12px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px; } .api-key-drawer.open { display: flex; } .api-key-drawer input[type="password"], .api-key-drawer input[type="text"], .api-key-drawer input[type="number"] { flex: 1; height: 32px; padding: 0 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 12px; color: var(--ink); outline: none; } .api-key-drawer input:focus { border-color: var(--accent); } .settings-row-pair { display: flex; gap: 10px; } .settings-row-pair .pair-col { flex: 1; display: flex; flex-direction: column; gap: 4px; } .hint.ok { color: var(--green); } .hint.err { color: var(--red); } /* Upload zone */ .analyze-drop-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 32px 20px; text-align: center; cursor: pointer; transition: all .15s; background: var(--surface2); display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 12px; } .analyze-drop-zone:hover, .analyze-drop-zone.dragover { border-color: var(--accent); background: var(--accent-light); } .drop-icon { font-size: 32px; opacity: .5; } /* Thumbnails */ .analyze-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .analyze-thumbs:empty { display: none; } .thumb-item { position: relative; width: 72px; height: 72px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } .thumb-item img { width: 100%; height: 100%; object-fit: cover; } .thumb-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; background: rgba(0,0,0,.6); color: white; border: none; border-radius: 50%; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; } /* Progress */ .analyze-progress { display: none; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0; } .analyze-progress.active { display: flex; } .analyze-progress p { font-family: var(--mono); font-size: 12px; color: var(--ink2); } /* Results */ .analyze-results { display: none; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 28px; } .analyze-results.active { display: block; } .result-split { display: grid; grid-template-columns: 240px 1fr; gap: 28px; } .result-section-label { font-family: var(--mono); font-size: 10px; color: var(--ink3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; } .flat-sketch { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; align-items: center; justify-content: center; min-height: 280px; } .flat-sketch svg { max-width: 100%; max-height: 260px; } .result-title { font-family: var(--serif); font-size: 22px; color: var(--ink); margin-bottom: 6px; } .result-confidence { font-family: var(--mono); font-size: 11px; margin-bottom: 12px; } .result-confidence.high { color: var(--green); } .result-confidence.medium { color: #b8860b; } .result-confidence.low { color: var(--red); } .result-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; } .result-tag { font-family: var(--mono); font-size: 10px; padding: 3px 8px; border-radius: 4px; background: var(--surface2); border: 1px solid var(--border); color: var(--ink2); } .result-tag.accent { background: var(--accent-light); border-color: var(--accent); color: var(--accent); } .result-fabric { font-size: 12px; color: var(--ink2); margin-bottom: 8px; } .result-notes { font-size: 12px; color: var(--ink3); font-style: italic; line-height: 1.5; } .result-divider { height: 1px; background: var(--border); margin: 16px 0; } .design-name-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .design-name-row input { height: 34px; padding: 0 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--mono); font-size: 13px; color: var(--ink); outline: none; } .design-name-row input:focus { border-color: var(--accent); } .result-btn-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .result-code-info { font-family: var(--mono); font-size: 11px; color: var(--ink3); line-height: 1.6; margin-bottom: 4px; } .code-viewer { display: none; margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; } .code-viewer.open { display: block; } .code-content { background: #1a1714; color: #d4c8b8; padding: 16px; border-radius: var(--radius); font-family: var(--mono); font-size: 11px; line-height: 1.6; overflow-x: auto; max-height: 400px; overflow-y: auto; white-space: pre; tab-size: 2; } .result-suggestion { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--accent-light); border: 1px solid var(--accent); border-radius: var(--radius); margin-bottom: 10px; } .suggestion-emoji { font-size: 24px; } .suggestion-info { flex: 1; } .suggestion-name { font-size: 14px; font-weight: 500; color: var(--accent); display: block; } .suggestion-desc { font-size: 11px; color: var(--ink2); } .suggestion-ease { font-family: var(--mono); font-size: 10px; color: var(--ink3); background: var(--surface2); padding: 2px 8px; border-radius: 4px; } /* ═══ SCROLLBAR ═══ */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } /* ═══ RESPONSIVE ═══ */ @media (max-width: 768px) { :root { --sidebar-w: 240px; } .designs-header { padding: 16px; } .design-grid { padding: 0 16px 16px; } .cat-cards { grid-template-columns: 1fr; } #design-search { width: 160px; } .hdr-select { min-width: 100px; } .pipeline-summary { max-width: 50%; } }