:root { --design-green: #00645e; --design-green-2: #08796f; --design-soft: #e8f3f0; --design-ink: #1d3436; --design-muted: #738184; --design-line: #dce8e5; --design-page: #f4f7f6; }
.design-page { background: #eef5f7; color: var(--design-ink); }
.design-page .topbar { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(255,255,255,.9); background: rgba(250,253,254,.78); box-shadow: 0 10px 30px rgba(54,91,103,.06); backdrop-filter: blur(24px) saturate(150%); }
.design-page .design-nav-link { color: var(--design-green) !important; font-weight: 700; }
.design-canvas-shell { width: 100%; min-height: calc(100vh - 64px); background: linear-gradient(135deg, #e9f3f5, #f7fafc 46%, #eaf2f8); }
.design-canvas-shell iframe { display: block; width: 100%; height: calc(100vh - 64px); min-height: 760px; border: 0; background: transparent; }
.design-studio { display: grid; grid-template-columns: 218px minmax(0, 1fr); min-height: calc(100vh - 64px); }
.design-sidebar { display: flex; flex-direction: column; gap: 14px; padding: 26px 16px 16px; border-right: 1px solid var(--design-line); background: #fff; }
.design-sidebar-title { display: flex; align-items: center; gap: 9px; padding: 0 8px 12px; font-weight: 700; color: #254447; }
.design-side-link { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid #b8d9d2; border-radius: 5px; color: var(--design-green); background: #f2faf7; font-weight: 700; text-decoration: none; }
.design-sidebar .lucide { width: 18px; height: 18px; stroke-width: 1.8; }
.design-side-nav, .design-template-list { display: grid; gap: 5px; }
.design-side-nav button, .design-template-list button, .design-material-entry { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 10px 12px; border: 0; border-radius: 6px; background: transparent; color: #4e6265; text-align: left; font: inherit; cursor: pointer; }
.design-side-nav button:hover, .design-template-list button:hover, .design-material-entry:hover { background: #f0f7f5; color: var(--design-green); }
.design-side-nav button.active { background: var(--design-green); color: #fff; box-shadow: 0 5px 14px rgba(0,100,94,.16); }
.design-side-divider { height: 1px; margin: 4px 8px; background: var(--design-line); }
.design-side-label { padding: 3px 8px; color: #879497; font-size: 12px; font-weight: 700; }
.design-help-card { display: grid; gap: 7px; margin-top: auto; padding: 15px; border: 1px solid #cfe5df; border-radius: 7px; background: #f5faf8; color: #4b6668; }
.design-help-card .lucide { color: var(--design-green); }.design-help-card strong { color: #214c4c; }.design-help-card span { font-size: 12px; line-height: 1.55; }
.design-workspace { min-width: 0; padding: 26px clamp(18px, 3vw, 44px) 38px; }
#design-create-view[hidden], .infinite-canvas-view[hidden] { display: none; }
.infinite-canvas-view { min-height: calc(100vh - 130px); overflow: hidden; border: 1px solid var(--design-line); border-radius: 7px; background: #fff; box-shadow: 0 8px 22px rgba(24,72,68,.06); }
.infinite-canvas-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; padding: 14px 18px; border-bottom: 1px solid var(--design-line); }
.infinite-canvas-head h1 { margin: 0; font-size: 21px; }.infinite-canvas-head p { margin: 5px 0 0; color: var(--design-muted); font-size: 12px; }.infinite-canvas-head a { flex: 0 0 auto; padding: 8px 11px; border: 1px solid #b8d9d2; border-radius: 5px; color: var(--design-green); font-size: 12px; font-weight: 700; text-decoration: none; }.infinite-canvas-head a:hover { background: #f0f8f6; }
.infinite-canvas-view iframe { display: block; width: 100%; height: calc(100vh - 202px); min-height: 620px; border: 0; background: #fff; }
.design-workspace-head, .design-prompt-label, .design-reference-row, .design-control-row, .designs-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.design-workspace-head { margin-bottom: 16px; }.design-workspace-head h1 { margin: 0; font-size: 22px; }.design-workspace-head p { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--design-muted); font-size: 13px; }.design-workspace-head p .lucide { width: 15px; color: var(--design-green); }
.design-head-actions { display: flex; gap: 8px; }.studio-icon-button, .drawer-close { display: inline-grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--design-line); border-radius: 5px; background: #fff; color: #466164; cursor: pointer; }.studio-icon-button:hover, .drawer-close:hover { border-color: #9bc9c2; color: var(--design-green); }.studio-icon-button .lucide, .drawer-close .lucide { width: 17px; }
.design-canvas { display: grid; min-height: clamp(300px, 48vh, 580px); place-items: center; overflow: hidden; border: 1px solid #d8e5e1; border-radius: 7px; background: #fbfdfc; }
.design-empty-state { max-width: 470px; padding: 32px; text-align: center; }.design-empty-state img { display: block; width: min(100%, 380px); margin: 0 auto 8px; mix-blend-mode: multiply; }.design-empty-state h2 { margin: 0 0 8px; font-size: 19px; }.design-empty-state p { margin: 0; color: var(--design-muted); font-size: 14px; line-height: 1.7; }
.design-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; height: 100%; gap: 12px; padding: 16px; align-content: center; }.design-generated-image { position: relative; min-width: 0; margin: 0; overflow: hidden; border: 1px solid #dce9e6; border-radius: 6px; background: #fff; }.design-generated-image img { display: block; width: 100%; height: min(38vh, 400px); object-fit: cover; }.design-generated-image figcaption { position: absolute; bottom: 8px; left: 8px; padding: 5px 9px; border-radius: 3px; background: rgba(18,60,57,.8); color: #fff; font-size: 12px; }.design-image-delete { position: absolute; top: 9px; right: 9px; display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 5px; background: rgba(18,60,57,.82); color: #fff; cursor: pointer; }.design-image-delete:hover { background: #a63c35; }.design-image-delete .lucide { width: 16px; }
.design-composer { margin-top: 14px; padding: 15px; border: 1px solid var(--design-line); border-radius: 7px; background: #fff; box-shadow: 0 8px 22px rgba(24,72,68,.06); }.design-prompt-row { position: relative; }.design-prompt-label { margin-bottom: 8px; }.design-prompt-label label, .design-control-row legend { color: #38585b; font-size: 13px; font-weight: 700; }.text-tool-button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--design-green); font: inherit; font-size: 13px; cursor: pointer; }.text-tool-button .lucide { width: 15px; height: 15px; }.design-prompt-row textarea { width: 100%; min-height: 82px; padding: 12px 14px 24px; resize: vertical; border: 1px solid #cbdeda; border-radius: 6px; font: inherit; line-height: 1.65; }.design-counter { position: absolute; right: 12px; bottom: 8px; color: #99a6a8; font-size: 11px; }
.design-reference-row { justify-content: flex-start; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid #ebf0ee; }.reference-upload-card { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 12px; border: 1px solid #d6e5e1; border-radius: 6px; background: #f9fcfb; color: var(--design-green); text-align: left; cursor: pointer; }.reference-upload-card:hover { border-color: #85bcb4; background: #f0f8f6; }.reference-upload-card .lucide { width: 21px; }.reference-upload-card span { display: grid; gap: 3px; }.reference-upload-card b { font-size: 13px; }.reference-upload-card small { color: #829295; font-size: 11px; }.design-reference-list { display: flex; flex-wrap: wrap; gap: 8px; }.reference-thumb { position: relative; width: 54px; height: 54px; overflow: hidden; border: 1px solid var(--design-line); border-radius: 5px; }.reference-thumb img { width: 100%; height: 100%; object-fit: cover; }.reference-thumb button { position: absolute; top: 2px; right: 2px; display: grid; width: 18px; height: 18px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(22,45,45,.8); color: #fff; cursor: pointer; }.reference-thumb .lucide { width: 12px; }
.design-control-row { align-items: end; flex-wrap: wrap; margin-top: 14px; }.design-control-row fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }.design-control-row legend { margin-bottom: 8px; }.segmented { display: flex; overflow: hidden; border: 1px solid #d4e1de; border-radius: 5px; }.segmented button { min-width: 48px; height: 36px; padding: 0 11px; border: 0; border-right: 1px solid #e0ebe8; background: #fff; color: #597073; font: inherit; font-size: 13px; cursor: pointer; }.segmented button:last-child { border-right: 0; }.segmented button:hover { background: #f2f9f6; }.segmented button.active { background: var(--design-soft); color: var(--design-green); font-weight: 700; box-shadow: inset 0 0 0 1px #6caf9f; }.segmented.compact button { min-width: 52px; }.design-generate-button { margin-left: auto; }
.design-generate-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 166px; height: 48px; border: 1px solid var(--design-green); border-radius: 6px; background: var(--design-green); color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 7px 16px rgba(0,100,94,.17); }.design-generate-button:hover { background: #00564f; }.design-generate-button:disabled { cursor: wait; opacity: .72; }.design-generate-button .lucide { width: 18px; }.design-generate-button.is-loading .lucide { animation: design-spin 1s linear infinite; } @keyframes design-spin { to { transform: rotate(360deg); } }
.my-designs-strip { margin-top: 26px; padding-top: 20px; border-top: 1px solid #dce8e5; }.designs-strip-head { margin-bottom: 13px; }.designs-strip-head h2 { margin: 0; font-size: 18px; }.designs-strip-head p { margin: 4px 0 0; color: var(--design-muted); font-size: 12px; }.design-history-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }.design-history-item { position: relative; overflow: hidden; border: 1px solid var(--design-line); border-radius: 6px; background: #fff; }.history-preview { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }.history-preview-grid { display: grid; width: 100%; aspect-ratio: 1.55; overflow: hidden; background: #edf4f2; }.history-preview-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }.history-preview-count-1 { grid-template-columns: 1fr; }.history-preview-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }.history-preview-count-3, .history-preview-count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }.history-preview-count-3 img:first-child { grid-row: span 2; }.history-image-count { position: absolute; top: 7px; left: 7px; padding: 4px 7px; border-radius: 4px; background: rgba(24,47,47,.78); color: #fff; font-size: 11px; font-weight: 700; }.design-history-item > div { display: grid; gap: 4px; padding: 8px; }.design-history-item strong { overflow: hidden; color: #315055; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.design-history-item small { color: #879598; font-size: 11px; }.history-delete { position: absolute; top: 7px; right: 7px; display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 4px; background: rgba(24,47,47,.8); color: #fff; cursor: pointer; }.history-delete:hover { background: #a63c35; }.history-delete .lucide { width: 15px; }.design-history-empty { grid-column: 1 / -1; padding: 20px; border: 1px dashed #bfd7d1; border-radius: 6px; color: #819193; text-align: center; }
.prompt-drawer { position: fixed; z-index: 60; top: 0; right: 0; display: flex; flex-direction: column; width: min(390px, 100vw); height: 100vh; padding: 24px; transform: translateX(100%); border-left: 1px solid #ceded9; background: #fff; box-shadow: -12px 0 28px rgba(17,56,52,.15); transition: transform .22s ease; }.prompt-drawer.open { transform: translateX(0); }.prompt-drawer-head { display: flex; justify-content: space-between; gap: 10px; }.prompt-drawer-head h2 { margin: 0; font-size: 20px; }.prompt-drawer-head p { margin: 5px 0 0; color: var(--design-muted); font-size: 12px; }.prompt-presets { display: flex; flex-wrap: wrap; gap: 7px; padding: 18px 0; }.prompt-presets button { padding: 7px 10px; border: 1px solid #d6e6e1; border-radius: 999px; background: #f7fbfa; color: #45666a; font: inherit; font-size: 12px; cursor: pointer; }.prompt-presets button:hover { border-color: #8dbeb5; color: var(--design-green); }.prompt-drawer-form { display: grid; gap: 13px; overflow: auto; padding-right: 3px; }.prompt-drawer-form label { display: grid; gap: 6px; color: #486467; font-size: 13px; font-weight: 700; }.prompt-drawer-form input, .prompt-drawer-form textarea { width: 100%; padding: 10px; border: 1px solid #d7e3e0; border-radius: 5px; color: #2d494c; font: inherit; font-size: 13px; font-weight: 400; resize: vertical; }.drawer-apply { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; min-height: 46px; border: 1px solid var(--design-green); border-radius: 6px; background: var(--design-green); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }.drawer-apply:hover { background: #00564f; }.drawer-apply .lucide { width: 16px; }.drawer-scrim { position: fixed; z-index: 55; inset: 0; background: rgba(17,43,40,.2); }
@media (max-width: 1020px) { .design-studio { grid-template-columns: 72px minmax(0, 1fr); }.design-sidebar { padding: 22px 10px; }.design-sidebar-title span, .design-side-label, .design-side-nav button:not(.active)::after, .design-template-list button:not(.active)::after, .design-side-nav button:not(.active), .design-template-list button, .design-material-entry { font-size: 0; justify-content: center; }.design-side-nav button, .design-template-list button, .design-material-entry { padding: 10px; }.design-help-card { display: none; }.design-control-row { flex-wrap: wrap; }.design-generate-button { margin-left: auto; } }
@media (max-width: 720px) { .design-studio { display: block; }.design-sidebar { display: none; }.design-workspace { padding: 18px 14px 28px; }.design-result-grid { grid-template-columns: 1fr; }.design-generated-image img { height: 260px; }.design-control-row { align-items: flex-start; }.design-control-row fieldset:first-child { flex-basis: 100%; }.design-control-row .segmented { overflow-x: auto; }.design-generate-button { width: 100%; margin-left: 0; }.design-history-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.design-reference-row { align-items: stretch; }.reference-upload-card { flex: 1 1 180px; }.infinite-canvas-head { align-items: flex-start; }.infinite-canvas-view iframe { height: calc(100vh - 180px); min-height: 540px; }.design-canvas-shell iframe { height: calc(100vh - 58px); min-height: 620px; }.design-page .topbar .nav { display: none; } }