3216 lines
54 KiB
CSS
3216 lines
54 KiB
CSS
:root {
|
|
color-scheme: light dark;
|
|
--bg: #e8ebe8;
|
|
--surface: #f5f6f3;
|
|
--surface-raised: #fbfcf9;
|
|
--surface-muted: #e1e5e1;
|
|
--canvas: #d7dbd6;
|
|
--text: #1e2521;
|
|
--text-soft: #66706a;
|
|
--text-faint: #8b948e;
|
|
--line: #cdd3ce;
|
|
--line-strong: #b9c1bb;
|
|
--accent: #3f6757;
|
|
--accent-strong: #2f5244;
|
|
--accent-soft: #d9e6df;
|
|
--warning: #9a682d;
|
|
--warning-soft: #f0e5d2;
|
|
--shadow: 0 18px 55px rgb(49 67 58 / 0.1);
|
|
--radius-surface: 14px;
|
|
--radius-control: 10px;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #1b211e;
|
|
--surface: #222a26;
|
|
--surface-raised: #29312d;
|
|
--surface-muted: #303934;
|
|
--canvas: #171c19;
|
|
--text: #edf0ec;
|
|
--text-soft: #b1bab4;
|
|
--text-faint: #87918b;
|
|
--line: #3a443e;
|
|
--line-strong: #4b5750;
|
|
--accent: #82ac99;
|
|
--accent-strong: #9abbaa;
|
|
--accent-soft: #31483d;
|
|
--warning: #d5a05d;
|
|
--warning-soft: #443726;
|
|
--shadow: 0 20px 60px rgb(7 11 8 / 0.28);
|
|
}
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
min-height: 100%;
|
|
background: var(--bg);
|
|
}
|
|
|
|
body,
|
|
button,
|
|
input,
|
|
textarea {
|
|
font-family: "Segoe UI Variable", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
|
|
}
|
|
|
|
select {
|
|
font-family: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea {
|
|
color: inherit;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.48;
|
|
}
|
|
|
|
button:focus-visible,
|
|
input:focus-visible,
|
|
textarea:focus-visible,
|
|
[role="tab"]:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.studio-shell {
|
|
min-height: 100dvh;
|
|
color: var(--text);
|
|
background:
|
|
radial-gradient(circle at 14% -10%, rgb(109 142 124 / 0.12), transparent 32%),
|
|
var(--bg);
|
|
}
|
|
|
|
.topbar {
|
|
height: 70px;
|
|
padding: 0 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid var(--line);
|
|
background: color-mix(in srgb, var(--surface) 88%, transparent);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.brand-block,
|
|
.topbar-actions,
|
|
.canvas-actions,
|
|
.save-state,
|
|
.button,
|
|
.tab-trigger,
|
|
.canvas-status,
|
|
.lock-label,
|
|
.inspector-footer > div {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.brand-block {
|
|
gap: 11px;
|
|
}
|
|
|
|
.brand-mark {
|
|
width: 38px;
|
|
height: 38px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: var(--radius-control);
|
|
color: #eef3ef;
|
|
background: var(--accent-strong);
|
|
}
|
|
|
|
.brand-name,
|
|
.brand-subtitle,
|
|
.rail-heading p,
|
|
.panel-title,
|
|
.panel-caption,
|
|
.helper-text,
|
|
.style-label,
|
|
.constraint-section p {
|
|
margin: 0;
|
|
}
|
|
|
|
.brand-name {
|
|
font-size: 14px;
|
|
font-weight: 680;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.brand-subtitle {
|
|
margin-top: 3px;
|
|
color: var(--text-soft);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.topbar-actions {
|
|
gap: 9px;
|
|
}
|
|
|
|
.settings-alert-dot {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--warning);
|
|
box-shadow: 0 0 0 3px var(--warning-soft);
|
|
}
|
|
|
|
.save-state {
|
|
gap: 5px;
|
|
margin-right: 6px;
|
|
color: var(--text-soft);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.button,
|
|
.icon-button,
|
|
.send-button {
|
|
min-height: 36px;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-control);
|
|
font-size: 13px;
|
|
font-weight: 620;
|
|
transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease;
|
|
}
|
|
|
|
.button {
|
|
justify-content: center;
|
|
gap: 7px;
|
|
padding: 0 13px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.button:active,
|
|
.icon-button:active,
|
|
.send-button:active,
|
|
.stage-item:active,
|
|
.layer-row:active,
|
|
.direction-option:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.button-primary {
|
|
color: #f1f5f2;
|
|
background: var(--accent-strong);
|
|
border-color: var(--accent-strong);
|
|
}
|
|
|
|
.button-primary:hover {
|
|
background: var(--accent);
|
|
}
|
|
|
|
.button-secondary {
|
|
color: var(--text);
|
|
background: var(--surface-raised);
|
|
border-color: var(--line);
|
|
}
|
|
|
|
.button-secondary:hover,
|
|
.icon-button:hover {
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.button.compact {
|
|
min-height: 34px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.button.full {
|
|
width: 100%;
|
|
}
|
|
|
|
.studio-grid {
|
|
min-height: calc(100dvh - 70px);
|
|
display: grid;
|
|
grid-template-columns: 210px minmax(560px, 1fr) 330px;
|
|
}
|
|
|
|
.workflow-rail,
|
|
.style-inspector {
|
|
background: var(--surface);
|
|
}
|
|
|
|
.workflow-rail {
|
|
padding: 22px 14px;
|
|
border-right: 1px solid var(--line);
|
|
}
|
|
|
|
.rail-heading {
|
|
padding: 0 8px 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
color: var(--text-soft);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.rail-heading p {
|
|
color: var(--text);
|
|
font-size: 13px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.stage-list {
|
|
display: grid;
|
|
gap: 3px;
|
|
}
|
|
|
|
.stage-item {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 52px;
|
|
padding: 7px 8px;
|
|
display: grid;
|
|
grid-template-columns: 24px 1fr;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-control);
|
|
color: var(--text-soft);
|
|
text-align: left;
|
|
background: transparent;
|
|
}
|
|
|
|
.stage-item:hover {
|
|
background: var(--surface-raised);
|
|
}
|
|
|
|
.stage-active {
|
|
color: var(--text);
|
|
background: var(--accent-soft);
|
|
border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
|
|
}
|
|
|
|
.stage-index {
|
|
width: 21px;
|
|
height: 21px;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 50%;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.stage-complete .stage-index {
|
|
color: #edf4ef;
|
|
border-color: var(--accent);
|
|
background: var(--accent);
|
|
}
|
|
|
|
.stage-active .stage-index {
|
|
border: 6px solid var(--accent);
|
|
background: var(--surface-raised);
|
|
}
|
|
|
|
.stage-copy {
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.stage-copy strong {
|
|
font-size: 12px;
|
|
font-weight: 630;
|
|
}
|
|
|
|
.stage-copy small {
|
|
color: var(--text-faint);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.rail-note {
|
|
margin: 24px 4px 0;
|
|
padding: 12px;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 8px;
|
|
color: var(--warning);
|
|
border-radius: var(--radius-control);
|
|
background: var(--warning-soft);
|
|
}
|
|
|
|
.rail-note p {
|
|
margin: 0;
|
|
font-size: 11px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.workspace {
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-rows: minmax(540px, 1fr) auto;
|
|
background: var(--canvas);
|
|
}
|
|
|
|
.workspace-tabs,
|
|
.tab-content {
|
|
min-height: 0;
|
|
}
|
|
|
|
.workspace-toolbar {
|
|
height: 54px;
|
|
padding: 0 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid var(--line);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.tab-list {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.tab-trigger {
|
|
min-height: 34px;
|
|
gap: 6px;
|
|
padding: 0 11px;
|
|
border: 0;
|
|
border-radius: var(--radius-control);
|
|
color: var(--text-soft);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
background: transparent;
|
|
}
|
|
|
|
.tab-trigger[data-state="active"] {
|
|
color: var(--text);
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.canvas-actions {
|
|
gap: 8px;
|
|
}
|
|
|
|
.icon-button,
|
|
.send-button {
|
|
width: 36px;
|
|
padding: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
color: var(--text-soft);
|
|
border-color: var(--line);
|
|
background: var(--surface-raised);
|
|
}
|
|
|
|
.icon-button.small {
|
|
width: 30px;
|
|
min-height: 30px;
|
|
}
|
|
|
|
.tooltip {
|
|
z-index: 20;
|
|
padding: 7px 9px;
|
|
border-radius: 7px;
|
|
color: var(--surface-raised);
|
|
background: var(--text);
|
|
font-size: 11px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.plan-workspace {
|
|
height: calc(100% - 54px);
|
|
min-height: 486px;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 210px;
|
|
}
|
|
|
|
.plan-canvas {
|
|
min-width: 0;
|
|
padding: 18px;
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr) auto;
|
|
gap: 12px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.canvas-labels,
|
|
.canvas-status {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
color: var(--text-soft);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.canvas-labels span:first-child {
|
|
color: var(--text);
|
|
font-weight: 650;
|
|
}
|
|
|
|
.plan-image-frame {
|
|
position: relative;
|
|
min-height: 405px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: var(--radius-surface);
|
|
background: #f1f2ee;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.plan-image {
|
|
object-fit: contain;
|
|
padding: 12px;
|
|
filter: contrast(1.02) saturate(0.72);
|
|
}
|
|
|
|
.plan-upload-empty {
|
|
min-height: 486px;
|
|
padding: 40px;
|
|
display: grid;
|
|
place-content: center;
|
|
justify-items: center;
|
|
gap: 14px;
|
|
text-align: center;
|
|
background:
|
|
radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 38%),
|
|
var(--surface-muted);
|
|
}
|
|
|
|
.plan-upload-empty h2 {
|
|
font-size: 20px;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.plan-upload-empty > p {
|
|
max-width: 530px;
|
|
color: var(--text-soft);
|
|
font-size: 12px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.upload-emblem {
|
|
width: 62px;
|
|
height: 62px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: var(--accent-strong);
|
|
border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
|
|
border-radius: 18px;
|
|
background: color-mix(in srgb, var(--accent) 9%, var(--surface-raised));
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.plan-document-frame {
|
|
position: relative;
|
|
width: min(100%, 720px);
|
|
margin: 0 auto;
|
|
align-self: start;
|
|
overflow: hidden;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: var(--radius-surface);
|
|
background: #fff;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.plan-document-image {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
filter: contrast(1.02) saturate(0.75);
|
|
}
|
|
|
|
.region-layer {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
.detected-region {
|
|
position: absolute;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
padding: 8px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
color: var(--accent-strong);
|
|
border: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
|
|
border-radius: 8px;
|
|
background: color-mix(in srgb, var(--accent) 8%, transparent);
|
|
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.48);
|
|
text-align: left;
|
|
}
|
|
|
|
.detected-region > span {
|
|
width: 22px;
|
|
height: 22px;
|
|
flex: 0 0 22px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: white;
|
|
border-radius: 50%;
|
|
background: var(--accent-strong);
|
|
font-size: 10px;
|
|
font-weight: 750;
|
|
}
|
|
|
|
.detected-region strong,
|
|
.detected-region small {
|
|
padding: 4px 6px;
|
|
border-radius: 5px;
|
|
background: rgb(255 255 255 / 0.9);
|
|
font-size: 10px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.detected-region small {
|
|
margin-left: auto;
|
|
color: var(--text-soft);
|
|
}
|
|
|
|
.detected-region:hover,
|
|
.detected-region.recommended {
|
|
background: color-mix(in srgb, var(--accent) 14%, transparent);
|
|
}
|
|
|
|
.detected-region.selected {
|
|
border-color: var(--accent-strong);
|
|
background: color-mix(in srgb, var(--accent) 20%, transparent);
|
|
}
|
|
|
|
.detected-region:disabled {
|
|
cursor: default;
|
|
opacity: 0.78;
|
|
}
|
|
|
|
.ingestion-facts {
|
|
margin-top: 12px;
|
|
display: grid;
|
|
gap: 8px;
|
|
color: var(--text-soft);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.ingestion-facts span,
|
|
.workflow-error {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.workflow-error {
|
|
color: var(--warning) !important;
|
|
font-size: 11px !important;
|
|
}
|
|
|
|
.visually-hidden {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
padding: 0 !important;
|
|
overflow: hidden !important;
|
|
clip: rect(0, 0, 0, 0) !important;
|
|
white-space: nowrap !important;
|
|
border: 0 !important;
|
|
}
|
|
|
|
.region-outline {
|
|
position: absolute;
|
|
inset: 8% 10% 9% 9%;
|
|
border: 2px solid color-mix(in srgb, var(--accent) 78%, transparent);
|
|
border-radius: 9px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.issue-marker {
|
|
position: absolute;
|
|
width: 25px;
|
|
height: 25px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #fff9ef;
|
|
border: 2px solid #f7ead5;
|
|
border-radius: 50%;
|
|
background: var(--warning);
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
box-shadow: 0 5px 18px rgb(104 71 32 / 0.22);
|
|
}
|
|
|
|
.issue-one {
|
|
left: 31%;
|
|
top: 24%;
|
|
}
|
|
|
|
.issue-two {
|
|
right: 26%;
|
|
bottom: 23%;
|
|
}
|
|
|
|
.canvas-status {
|
|
align-items: center;
|
|
}
|
|
|
|
.canvas-status span:first-child {
|
|
gap: 5px;
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.canvas-status span:last-child {
|
|
color: var(--warning);
|
|
}
|
|
|
|
.layer-panel {
|
|
padding: 18px 14px;
|
|
border-left: 1px solid var(--line);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.panel-title-row,
|
|
.inspector-heading {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.panel-title {
|
|
font-size: 13px;
|
|
font-weight: 680;
|
|
}
|
|
|
|
.panel-caption {
|
|
margin-top: 4px;
|
|
color: var(--text-faint);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.layer-list {
|
|
margin-top: 15px;
|
|
display: grid;
|
|
gap: 3px;
|
|
}
|
|
|
|
.layer-row {
|
|
min-height: 37px;
|
|
padding: 0 9px;
|
|
display: grid;
|
|
grid-template-columns: 20px 1fr auto;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--text-faint);
|
|
border: 0;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
text-align: left;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.layer-row:hover {
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.layer-row.is-visible {
|
|
color: var(--text);
|
|
}
|
|
|
|
.layer-row small {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.panel-divider {
|
|
height: 1px;
|
|
margin: 18px 0;
|
|
background: var(--line);
|
|
}
|
|
|
|
.segmented-control {
|
|
margin-top: 10px;
|
|
padding: 3px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
border-radius: var(--radius-control);
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.segmented-control button {
|
|
min-height: 30px;
|
|
padding: 0 5px;
|
|
border: 0;
|
|
border-radius: 7px;
|
|
color: var(--text-soft);
|
|
background: transparent;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.segmented-control button.active {
|
|
color: var(--text);
|
|
background: var(--surface-raised);
|
|
box-shadow: 0 2px 7px rgb(49 67 58 / 0.1);
|
|
}
|
|
|
|
.helper-text {
|
|
margin-top: 10px;
|
|
color: var(--text-faint);
|
|
font-size: 10px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.empty-workspace {
|
|
min-height: 486px;
|
|
padding: 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-faint);
|
|
text-align: center;
|
|
}
|
|
|
|
.empty-workspace h2 {
|
|
margin: 14px 0 6px;
|
|
color: var(--text);
|
|
font-size: 17px;
|
|
}
|
|
|
|
.empty-workspace p {
|
|
max-width: 360px;
|
|
margin: 0;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.conversation {
|
|
min-height: 210px;
|
|
padding: 14px 18px 16px;
|
|
border-top: 1px solid var(--line);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.message-stream {
|
|
max-height: 132px;
|
|
overflow-y: auto;
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.message {
|
|
max-width: 84%;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 8px;
|
|
}
|
|
|
|
.message-user {
|
|
justify-self: end;
|
|
grid-template-columns: 1fr;
|
|
padding: 9px 11px;
|
|
border-radius: var(--radius-control);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.assistant-icon {
|
|
width: 25px;
|
|
height: 25px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: var(--accent-strong);
|
|
border-radius: 8px;
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.message p {
|
|
margin: 2px 0 0;
|
|
color: var(--text-soft);
|
|
font-size: 11px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.message small {
|
|
color: var(--text);
|
|
font-size: 10px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.composer {
|
|
margin-top: 12px;
|
|
padding: 9px 10px 8px 12px;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: var(--radius-surface);
|
|
background: var(--surface-raised);
|
|
}
|
|
|
|
.composer label {
|
|
display: block;
|
|
color: var(--text-faint);
|
|
font-size: 9px;
|
|
}
|
|
|
|
.composer-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.composer input {
|
|
min-width: 0;
|
|
height: 30px;
|
|
padding: 0;
|
|
border: 0;
|
|
color: var(--text);
|
|
background: transparent;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.composer input::placeholder {
|
|
color: var(--text-faint);
|
|
opacity: 1;
|
|
}
|
|
|
|
.composer input:focus-visible {
|
|
outline: 0;
|
|
}
|
|
|
|
.send-button {
|
|
width: 32px;
|
|
min-height: 32px;
|
|
color: #f2f6f3;
|
|
border: 0;
|
|
background: var(--accent-strong);
|
|
}
|
|
|
|
.style-inspector {
|
|
min-width: 0;
|
|
padding: 20px 18px;
|
|
border-left: 1px solid var(--line);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.lock-label {
|
|
gap: 4px;
|
|
padding: 5px 7px;
|
|
color: var(--accent-strong);
|
|
border-radius: 7px;
|
|
background: var(--accent-soft);
|
|
font-size: 9px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.style-section {
|
|
margin-top: 21px;
|
|
}
|
|
|
|
.style-section label,
|
|
.style-label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: var(--text-soft);
|
|
font-size: 10px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.style-section textarea {
|
|
width: 100%;
|
|
min-height: 75px;
|
|
padding: 10px;
|
|
resize: vertical;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-control);
|
|
color: var(--text);
|
|
background: var(--surface-raised);
|
|
font-size: 11px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.direction-list {
|
|
display: grid;
|
|
gap: 7px;
|
|
}
|
|
|
|
.direction-option {
|
|
width: 100%;
|
|
min-height: 75px;
|
|
padding: 9px;
|
|
display: grid;
|
|
grid-template-columns: 38px 1fr 16px;
|
|
align-items: center;
|
|
gap: 9px;
|
|
color: var(--text);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-control);
|
|
background: var(--surface-raised);
|
|
text-align: left;
|
|
}
|
|
|
|
.direction-option:hover {
|
|
border-color: var(--line-strong);
|
|
}
|
|
|
|
.direction-option.selected {
|
|
border-color: var(--accent);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.direction-colors {
|
|
height: 49px;
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-template-rows: repeat(3, 1fr);
|
|
border-radius: 7px;
|
|
border: 1px solid rgb(71 84 76 / 0.16);
|
|
}
|
|
|
|
.direction-option > span:nth-child(2) {
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.direction-option strong {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.direction-option small {
|
|
color: var(--text-soft);
|
|
font-size: 9px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.tag-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.tag-list span,
|
|
.tag-list button {
|
|
min-height: 28px;
|
|
padding: 0 8px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
color: var(--text-soft);
|
|
background: var(--surface-raised);
|
|
font-size: 9px;
|
|
}
|
|
|
|
.constraint-section {
|
|
padding: 11px;
|
|
border-radius: var(--radius-control);
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.constraint-section p:last-child {
|
|
color: var(--text-soft);
|
|
font-size: 10px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.inspector-footer {
|
|
margin-top: 24px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.inspector-footer > div {
|
|
gap: 6px;
|
|
margin-bottom: 10px;
|
|
color: var(--text-faint);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.settings-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 100;
|
|
padding: 24px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: rgb(18 24 20 / 0.56);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.settings-dialog {
|
|
width: min(1120px, 100%);
|
|
height: min(820px, calc(100dvh - 48px));
|
|
display: grid;
|
|
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
|
overflow: hidden;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: var(--radius-surface);
|
|
background: var(--surface);
|
|
box-shadow: 0 34px 100px rgb(7 13 9 / 0.34);
|
|
}
|
|
|
|
.settings-header {
|
|
padding: 20px 22px 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: var(--surface-raised);
|
|
}
|
|
|
|
.settings-header h1,
|
|
.settings-header p,
|
|
.settings-section-heading h2,
|
|
.settings-section-heading p,
|
|
.settings-readiness p,
|
|
.setting-status-row p,
|
|
.setting-toggle-row p,
|
|
.deployment-note p {
|
|
margin: 0;
|
|
}
|
|
|
|
.settings-header h1 {
|
|
margin-top: 3px;
|
|
font-size: 21px;
|
|
font-weight: 690;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.settings-header > div > p:last-child {
|
|
margin-top: 5px;
|
|
color: var(--text-soft);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.settings-kicker {
|
|
color: var(--accent-strong);
|
|
font-size: 9px;
|
|
font-weight: 720;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
.settings-readiness {
|
|
min-height: 70px;
|
|
padding: 11px 22px;
|
|
display: grid;
|
|
grid-template-columns: auto minmax(220px, auto) minmax(180px, 1fr);
|
|
align-items: center;
|
|
gap: 12px;
|
|
border-bottom: 1px solid var(--line);
|
|
background: color-mix(in srgb, var(--accent-soft) 68%, var(--surface));
|
|
}
|
|
|
|
.readiness-orb {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 50%;
|
|
color: var(--warning);
|
|
background: var(--warning-soft);
|
|
}
|
|
|
|
.readiness-orb.ready {
|
|
color: var(--accent-strong);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.settings-readiness strong {
|
|
display: block;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.settings-readiness p {
|
|
margin-top: 4px;
|
|
color: var(--text-soft);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.readiness-meter {
|
|
height: 5px;
|
|
overflow: hidden;
|
|
border-radius: 5px;
|
|
background: var(--line);
|
|
}
|
|
|
|
.readiness-meter span {
|
|
height: 100%;
|
|
display: block;
|
|
border-radius: inherit;
|
|
background: var(--accent);
|
|
transition: width 240ms ease;
|
|
}
|
|
|
|
.settings-layout {
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: 190px minmax(0, 1fr);
|
|
}
|
|
|
|
.settings-nav {
|
|
padding: 14px 10px;
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 3px;
|
|
border-right: 1px solid var(--line);
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.settings-nav button {
|
|
min-height: 43px;
|
|
padding: 0 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
color: var(--text-soft);
|
|
background: transparent;
|
|
text-align: left;
|
|
font-size: 11px;
|
|
font-weight: 620;
|
|
}
|
|
|
|
.settings-nav button:hover {
|
|
background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
|
|
}
|
|
|
|
.settings-nav button.active {
|
|
color: var(--text);
|
|
border-color: var(--line);
|
|
background: var(--surface-raised);
|
|
}
|
|
|
|
.settings-nav small {
|
|
color: var(--text-faint);
|
|
font-size: 8px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.settings-nav small.required {
|
|
color: var(--warning);
|
|
}
|
|
|
|
.settings-nav small.done {
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.settings-content {
|
|
min-width: 0;
|
|
overflow-y: auto;
|
|
padding: 22px 26px 30px;
|
|
}
|
|
|
|
.settings-loading {
|
|
min-height: 300px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
color: var(--text-soft);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.settings-section-heading {
|
|
padding-bottom: 16px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.settings-section-heading h2 {
|
|
font-size: 16px;
|
|
font-weight: 690;
|
|
}
|
|
|
|
.settings-section-heading p {
|
|
max-width: 620px;
|
|
margin-top: 5px;
|
|
color: var(--text-soft);
|
|
font-size: 10px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.advanced-toggle {
|
|
min-width: 86px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 6px;
|
|
color: var(--text-soft);
|
|
font-size: 9px;
|
|
}
|
|
|
|
.advanced-toggle input {
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
.settings-fields {
|
|
display: grid;
|
|
}
|
|
|
|
.setting-field,
|
|
.setting-toggle-row,
|
|
.setting-status-row {
|
|
padding: 15px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.setting-field {
|
|
display: grid;
|
|
grid-template-columns: minmax(160px, 0.36fr) minmax(260px, 0.64fr);
|
|
gap: 4px 22px;
|
|
}
|
|
|
|
.setting-field-label {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 6px;
|
|
}
|
|
|
|
.setting-field-label strong,
|
|
.setting-toggle-row strong,
|
|
.setting-status-row strong {
|
|
font-size: 11px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.setting-field-label small {
|
|
color: var(--warning);
|
|
font-size: 8px;
|
|
}
|
|
|
|
.setting-description {
|
|
grid-column: 1;
|
|
color: var(--text-faint);
|
|
font-size: 9px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.setting-control-wrap {
|
|
grid-column: 2;
|
|
grid-row: 1 / span 2;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
|
|
.setting-control-wrap input,
|
|
.setting-control-wrap select {
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 38px;
|
|
padding: 0 10px;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 8px;
|
|
color: var(--text);
|
|
background: var(--surface-raised);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.setting-control-wrap input::placeholder {
|
|
color: var(--text-faint);
|
|
opacity: 1;
|
|
}
|
|
|
|
.generate-button {
|
|
min-width: 88px;
|
|
height: 36px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
color: var(--accent-strong);
|
|
background: var(--accent-soft);
|
|
font-size: 9px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.option-help {
|
|
grid-column: 2;
|
|
color: var(--accent-strong);
|
|
font-size: 9px;
|
|
}
|
|
|
|
.setting-toggle-row,
|
|
.setting-status-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.setting-toggle-row p,
|
|
.setting-status-row p {
|
|
margin-top: 4px;
|
|
color: var(--text-faint);
|
|
font-size: 9px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.setting-toggle-row input {
|
|
width: 35px;
|
|
height: 19px;
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
.setting-status-row {
|
|
grid-template-columns: auto 1fr auto;
|
|
}
|
|
|
|
.setting-status-row > span {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.setting-status-row > span.configured {
|
|
color: var(--accent-strong);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.setting-status-row > span.missing {
|
|
color: var(--warning);
|
|
background: var(--warning-soft);
|
|
}
|
|
|
|
.setting-status-row > small {
|
|
color: var(--text-soft);
|
|
font-size: 9px;
|
|
}
|
|
|
|
.deployment-note {
|
|
margin-top: 16px;
|
|
padding: 12px;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 9px;
|
|
color: var(--text-soft);
|
|
border-left: 3px solid var(--accent);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.deployment-note p {
|
|
font-size: 9px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.deployment-note code {
|
|
color: var(--text);
|
|
font-family: "Cascadia Code", monospace;
|
|
}
|
|
|
|
.settings-test-actions {
|
|
margin-top: 18px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.settings-test-actions .button svg:last-child {
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.model-pool {
|
|
display: grid;
|
|
gap: 18px;
|
|
padding-top: 18px;
|
|
}
|
|
|
|
.model-pool h3,
|
|
.model-pool p {
|
|
margin: 0;
|
|
}
|
|
|
|
.model-pool-intro {
|
|
padding: 12px 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
border-left: 3px solid var(--accent);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.model-pool-intro strong,
|
|
.model-group-heading h3,
|
|
.model-editor-heading h3,
|
|
.model-routing-heading h3 {
|
|
font-size: 11px;
|
|
font-weight: 680;
|
|
}
|
|
|
|
.model-pool-intro p,
|
|
.model-group-heading p,
|
|
.model-editor-heading p,
|
|
.model-routing-heading p,
|
|
.routing-row p {
|
|
margin-top: 4px;
|
|
color: var(--text-soft);
|
|
font-size: 9px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.model-pool-summary {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 6px;
|
|
}
|
|
|
|
.model-pool-summary span,
|
|
.model-capability-list span {
|
|
padding: 4px 7px;
|
|
border-radius: 7px;
|
|
color: var(--accent-strong);
|
|
background: color-mix(in srgb, var(--surface-raised) 74%, transparent);
|
|
font-size: 8px;
|
|
font-weight: 650;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.model-editor {
|
|
padding: 15px;
|
|
border: 1px solid var(--accent);
|
|
border-radius: var(--radius-control);
|
|
background: var(--surface-raised);
|
|
box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 12%, transparent);
|
|
}
|
|
|
|
.model-editor-heading,
|
|
.model-group-heading,
|
|
.model-routing-heading {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
}
|
|
|
|
.model-editor-heading {
|
|
justify-content: space-between;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.model-editor-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 11px 14px;
|
|
}
|
|
|
|
.model-input {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
.model-input-wide {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.model-input > span,
|
|
.model-capabilities legend {
|
|
color: var(--text-soft);
|
|
font-size: 9px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.model-input > small {
|
|
color: var(--text-faint);
|
|
font-size: 8px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.model-input input,
|
|
.model-input select,
|
|
.routing-row select {
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 38px;
|
|
padding: 0 10px;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 8px;
|
|
color: var(--text);
|
|
background: var(--surface);
|
|
font-size: 10px;
|
|
}
|
|
|
|
.model-input input::placeholder {
|
|
color: var(--text-faint);
|
|
opacity: 1;
|
|
}
|
|
|
|
.model-input input:focus-visible,
|
|
.model-input select:focus-visible,
|
|
.routing-row select:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.model-capabilities {
|
|
margin: 13px 0 0;
|
|
padding: 10px 0 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 9px 16px;
|
|
border: 0;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.model-capabilities legend {
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.model-capabilities label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: var(--text-soft);
|
|
font-size: 9px;
|
|
}
|
|
|
|
.model-capabilities input,
|
|
.model-enabled-row input {
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
.model-enabled-row {
|
|
margin-top: 12px;
|
|
padding: 10px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
border-top: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.model-enabled-row span {
|
|
display: grid;
|
|
gap: 3px;
|
|
}
|
|
|
|
.model-enabled-row strong {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.model-enabled-row small {
|
|
color: var(--text-faint);
|
|
font-size: 8px;
|
|
}
|
|
|
|
.model-enabled-row input {
|
|
width: 35px;
|
|
height: 19px;
|
|
}
|
|
|
|
.model-advanced-trigger {
|
|
margin-top: 10px;
|
|
padding: 0;
|
|
border: 0;
|
|
color: var(--accent-strong);
|
|
background: transparent;
|
|
font-size: 9px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.model-path-grid {
|
|
margin-top: 11px;
|
|
}
|
|
|
|
.model-editor-error {
|
|
margin-top: 11px !important;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
color: var(--warning);
|
|
font-size: 9px;
|
|
}
|
|
|
|
.model-editor-actions {
|
|
margin-top: 14px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.model-group {
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.model-group-heading {
|
|
min-height: 64px;
|
|
align-items: center;
|
|
}
|
|
|
|
.model-group-heading > div:nth-child(2) {
|
|
flex: 1;
|
|
}
|
|
|
|
.model-group-icon {
|
|
width: 34px;
|
|
height: 34px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 9px;
|
|
color: var(--accent-strong);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.model-empty {
|
|
width: 100%;
|
|
min-height: 74px;
|
|
padding: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 9px;
|
|
border: 1px dashed var(--line-strong);
|
|
border-radius: var(--radius-control);
|
|
color: var(--text-soft);
|
|
background: var(--surface-muted);
|
|
text-align: left;
|
|
}
|
|
|
|
.model-empty:hover {
|
|
color: var(--text);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.model-empty span {
|
|
display: grid;
|
|
gap: 3px;
|
|
}
|
|
|
|
.model-empty strong {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.model-empty small {
|
|
color: var(--text-faint);
|
|
font-size: 8px;
|
|
}
|
|
|
|
.model-list {
|
|
display: grid;
|
|
gap: 7px;
|
|
}
|
|
|
|
.model-row {
|
|
padding: 10px 11px;
|
|
display: grid;
|
|
grid-template-columns: 30px minmax(170px, 1fr) minmax(120px, auto) auto;
|
|
align-items: center;
|
|
gap: 9px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-control);
|
|
background: var(--surface-raised);
|
|
}
|
|
|
|
.model-row.disabled {
|
|
opacity: 0.66;
|
|
}
|
|
|
|
.model-state {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.model-state.ok {
|
|
color: var(--accent-strong);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.model-state.failed {
|
|
color: var(--warning);
|
|
background: var(--warning-soft);
|
|
}
|
|
|
|
.model-state.untested {
|
|
color: var(--text-faint);
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.model-identity {
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 3px 7px;
|
|
align-items: center;
|
|
}
|
|
|
|
.model-identity > div {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.model-identity strong {
|
|
overflow: hidden;
|
|
font-size: 10px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.model-identity small {
|
|
color: var(--warning);
|
|
font-size: 8px;
|
|
}
|
|
|
|
.model-identity code {
|
|
overflow: hidden;
|
|
grid-column: 1 / -1;
|
|
color: var(--text-soft);
|
|
font-family: "Cascadia Code", monospace;
|
|
font-size: 9px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.model-identity > span {
|
|
grid-column: 1 / -1;
|
|
color: var(--text-faint);
|
|
font-size: 8px;
|
|
}
|
|
|
|
.model-capability-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 4px;
|
|
}
|
|
|
|
.model-row-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 5px;
|
|
}
|
|
|
|
.icon-button.danger {
|
|
color: var(--warning);
|
|
}
|
|
|
|
.model-test-message {
|
|
grid-column: 2 / -1;
|
|
color: var(--text-faint) !important;
|
|
font-size: 8px !important;
|
|
line-height: 1.45 !important;
|
|
}
|
|
|
|
.model-test-message.ok {
|
|
color: var(--accent-strong) !important;
|
|
}
|
|
|
|
.model-test-message.failed {
|
|
color: var(--warning) !important;
|
|
}
|
|
|
|
.model-generation-result {
|
|
grid-column: 2 / -1;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
}
|
|
|
|
.model-generation-result .model-test-message {
|
|
grid-column: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.model-generation-result a {
|
|
display: block;
|
|
flex: 0 0 96px;
|
|
}
|
|
|
|
.model-generation-result img {
|
|
display: block;
|
|
width: 96px;
|
|
height: 72px;
|
|
object-fit: cover;
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.model-routing {
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.model-routing-heading {
|
|
padding: 15px 0 12px;
|
|
}
|
|
|
|
.model-routing-heading > svg {
|
|
flex: 0 0 auto;
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.routing-row {
|
|
min-height: 66px;
|
|
padding: 11px 0;
|
|
display: grid;
|
|
grid-template-columns: minmax(180px, 1fr) minmax(210px, 0.82fr);
|
|
align-items: center;
|
|
gap: 10px 18px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.routing-row strong {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.routing-row-adaptive {
|
|
grid-template-columns: minmax(180px, 1fr) minmax(165px, 0.54fr) minmax(210px, 0.72fr);
|
|
}
|
|
|
|
.routing-auto-note {
|
|
margin: 0 !important;
|
|
padding: 9px 10px;
|
|
border-radius: 8px;
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.spin {
|
|
animation: settings-spin 900ms linear infinite;
|
|
}
|
|
|
|
@keyframes settings-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.settings-footer {
|
|
min-height: 68px;
|
|
padding: 12px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
border-top: 1px solid var(--line);
|
|
background: var(--surface-raised);
|
|
}
|
|
|
|
.settings-notice,
|
|
.settings-footer-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.settings-notice {
|
|
min-width: 0;
|
|
gap: 6px;
|
|
color: var(--text-soft);
|
|
font-size: 9px;
|
|
}
|
|
|
|
.settings-notice span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.settings-notice.error {
|
|
color: var(--warning);
|
|
}
|
|
|
|
.settings-notice.success {
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.settings-footer-actions {
|
|
gap: 8px;
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
.studio-grid {
|
|
grid-template-columns: 190px minmax(520px, 1fr);
|
|
}
|
|
|
|
.style-inspector {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.topbar {
|
|
height: auto;
|
|
min-height: 66px;
|
|
padding: 10px 14px;
|
|
}
|
|
|
|
.save-state,
|
|
.topbar-actions .button-secondary:not(.settings-button),
|
|
.brand-subtitle {
|
|
display: none;
|
|
}
|
|
|
|
.studio-grid {
|
|
min-height: calc(100dvh - 66px);
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.workflow-rail {
|
|
padding: 9px 12px;
|
|
overflow-x: auto;
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.rail-heading,
|
|
.rail-note,
|
|
.stage-copy small {
|
|
display: none;
|
|
}
|
|
|
|
.stage-list {
|
|
display: flex;
|
|
gap: 5px;
|
|
}
|
|
|
|
.stage-item {
|
|
min-width: 104px;
|
|
min-height: 40px;
|
|
}
|
|
|
|
.workspace {
|
|
grid-template-rows: auto auto;
|
|
}
|
|
|
|
.plan-workspace {
|
|
height: auto;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.plan-canvas {
|
|
padding: 12px;
|
|
}
|
|
|
|
.plan-image-frame {
|
|
min-height: 360px;
|
|
}
|
|
|
|
.layer-panel {
|
|
border-top: 1px solid var(--line);
|
|
border-left: 0;
|
|
}
|
|
|
|
.layer-list {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.conversation {
|
|
min-height: 230px;
|
|
}
|
|
|
|
.settings-backdrop {
|
|
padding: 0;
|
|
}
|
|
|
|
.settings-dialog {
|
|
height: 100dvh;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.settings-header {
|
|
padding: 14px;
|
|
}
|
|
|
|
.settings-readiness {
|
|
padding: 10px 14px;
|
|
grid-template-columns: auto 1fr;
|
|
}
|
|
|
|
.readiness-meter {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.settings-layout {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
}
|
|
|
|
.settings-nav {
|
|
padding: 8px;
|
|
display: flex;
|
|
overflow-x: auto;
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.settings-nav button {
|
|
min-width: 108px;
|
|
}
|
|
|
|
.settings-content {
|
|
padding: 18px 15px 24px;
|
|
}
|
|
|
|
.setting-field {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.setting-control-wrap,
|
|
.option-help {
|
|
grid-column: 1;
|
|
grid-row: auto;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.model-pool-intro {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.model-pool-summary {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.model-editor-grid,
|
|
.routing-row,
|
|
.routing-row-adaptive {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.model-input-wide {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.model-group-heading {
|
|
align-items: flex-start;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.model-group-heading .button {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.model-row {
|
|
grid-template-columns: 30px minmax(0, 1fr) auto;
|
|
}
|
|
|
|
.model-capability-list {
|
|
grid-column: 2 / -1;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.model-row-actions {
|
|
grid-column: 3;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.model-test-message {
|
|
grid-column: 2 / -1;
|
|
}
|
|
|
|
.settings-footer {
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.settings-notice {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* Product workspace */
|
|
.product-shell {
|
|
min-height: 100dvh;
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
}
|
|
|
|
.product-topbar {
|
|
height: 66px;
|
|
padding: 0 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid var(--line);
|
|
background: color-mix(in srgb, var(--surface-raised) 94%, transparent);
|
|
}
|
|
|
|
.product-brand,
|
|
.product-top-actions,
|
|
.product-button,
|
|
.agent-heading,
|
|
.busy-banner,
|
|
.error-banner,
|
|
.render-meta,
|
|
.generation-note {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.product-brand {
|
|
gap: 10px;
|
|
}
|
|
|
|
.product-brand > span,
|
|
.agent-heading > span {
|
|
width: 34px;
|
|
height: 34px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 9px;
|
|
color: #f2f5f2;
|
|
background: var(--accent-strong);
|
|
}
|
|
|
|
.product-brand div,
|
|
.agent-heading div {
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.product-brand strong {
|
|
font-size: 13px;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.product-brand small,
|
|
.agent-heading small {
|
|
color: var(--text-soft);
|
|
font-size: 9px;
|
|
}
|
|
|
|
.product-top-actions {
|
|
gap: 8px;
|
|
}
|
|
|
|
.product-button {
|
|
min-height: 36px;
|
|
padding: 0 13px;
|
|
justify-content: center;
|
|
gap: 7px;
|
|
border: 1px solid transparent;
|
|
border-radius: 9px;
|
|
font-size: 10px;
|
|
font-weight: 660;
|
|
white-space: nowrap;
|
|
transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
|
|
}
|
|
|
|
.product-button:active:not(:disabled) {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.product-button.primary {
|
|
color: #f5f8f6;
|
|
background: var(--accent-strong);
|
|
}
|
|
|
|
.product-button.primary:hover:not(:disabled) {
|
|
background: color-mix(in srgb, var(--accent-strong) 88%, #101713);
|
|
}
|
|
|
|
.product-button.secondary {
|
|
border-color: var(--line);
|
|
background: var(--surface-raised);
|
|
}
|
|
|
|
.product-button.ghost {
|
|
color: var(--text-soft);
|
|
background: transparent;
|
|
}
|
|
|
|
.product-button.wide {
|
|
width: 100%;
|
|
}
|
|
|
|
.product-body {
|
|
min-height: calc(100dvh - 66px);
|
|
display: grid;
|
|
grid-template-columns: 178px minmax(0, 1fr) 292px;
|
|
}
|
|
|
|
.product-rail {
|
|
min-width: 0;
|
|
padding: 18px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-right: 1px solid var(--line);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.rail-progress {
|
|
padding: 0 8px 15px;
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.rail-progress strong {
|
|
color: var(--text);
|
|
font-size: 22px;
|
|
font-weight: 620;
|
|
}
|
|
|
|
.rail-progress span {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.product-rail nav {
|
|
display: grid;
|
|
gap: 3px;
|
|
}
|
|
|
|
.product-rail nav > div {
|
|
min-height: 51px;
|
|
padding: 7px;
|
|
display: grid;
|
|
grid-template-columns: 25px 1fr;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border-radius: 9px;
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.product-rail nav > div > span {
|
|
width: 23px;
|
|
height: 23px;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 1px solid var(--line);
|
|
border-radius: 7px;
|
|
font-size: 9px;
|
|
}
|
|
|
|
.product-rail nav p {
|
|
margin: 0;
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.product-rail nav strong {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.product-rail nav small {
|
|
font-size: 8px;
|
|
}
|
|
|
|
.product-rail nav > div.complete {
|
|
color: var(--text-soft);
|
|
}
|
|
|
|
.product-rail nav > div.complete > span {
|
|
color: var(--accent-strong);
|
|
border-color: var(--accent-soft);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.product-rail nav > div.active {
|
|
color: var(--text);
|
|
background: var(--surface-raised);
|
|
box-shadow: inset 0 0 0 1px var(--line);
|
|
}
|
|
|
|
.product-rail nav > div.active > span {
|
|
color: #f5f8f6;
|
|
border-color: var(--accent-strong);
|
|
background: var(--accent-strong);
|
|
}
|
|
|
|
.change-plan {
|
|
min-height: 38px;
|
|
margin-top: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 9px;
|
|
color: var(--text-soft);
|
|
background: transparent;
|
|
font-size: 9px;
|
|
}
|
|
|
|
.product-center {
|
|
min-width: 0;
|
|
height: calc(100dvh - 66px);
|
|
overflow: auto;
|
|
position: relative;
|
|
background:
|
|
radial-gradient(circle at 86% 0%, color-mix(in srgb, var(--accent-soft) 62%, transparent), transparent 30%),
|
|
var(--bg);
|
|
}
|
|
|
|
.busy-banner,
|
|
.error-banner {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 4;
|
|
min-height: 42px;
|
|
padding: 0 18px;
|
|
gap: 8px;
|
|
border-bottom: 1px solid var(--line);
|
|
font-size: 10px;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.busy-banner {
|
|
color: var(--accent-strong);
|
|
background: color-mix(in srgb, var(--accent-soft) 90%, transparent);
|
|
}
|
|
|
|
.error-banner {
|
|
color: var(--warning);
|
|
background: color-mix(in srgb, var(--warning-soft) 92%, transparent);
|
|
}
|
|
|
|
.error-banner button {
|
|
margin-left: auto;
|
|
border: 0;
|
|
color: inherit;
|
|
background: transparent;
|
|
font-size: 9px;
|
|
}
|
|
|
|
.product-stage {
|
|
width: min(1180px, 100%);
|
|
min-height: 100%;
|
|
margin: 0 auto;
|
|
padding: 28px 30px 44px;
|
|
}
|
|
|
|
.stage-header {
|
|
margin-bottom: 22px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
}
|
|
|
|
.stage-header p,
|
|
.stage-header h1 {
|
|
margin: 0;
|
|
}
|
|
|
|
.stage-header p,
|
|
.product-kicker {
|
|
margin-bottom: 5px;
|
|
color: var(--accent-strong);
|
|
font-size: 9px;
|
|
font-weight: 720;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.stage-header h1 {
|
|
font-size: clamp(21px, 2.1vw, 31px);
|
|
font-weight: 630;
|
|
letter-spacing: -0.035em;
|
|
}
|
|
|
|
.stage-header > span {
|
|
max-width: 230px;
|
|
color: var(--text-soft);
|
|
font-size: 9px;
|
|
text-align: right;
|
|
}
|
|
|
|
.product-empty {
|
|
min-height: 70vh;
|
|
padding: 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-soft);
|
|
text-align: center;
|
|
}
|
|
|
|
.product-empty h1,
|
|
.product-empty h2,
|
|
.product-empty p {
|
|
margin: 0;
|
|
}
|
|
|
|
.product-onboarding h1 {
|
|
max-width: 700px;
|
|
color: var(--text);
|
|
font-size: clamp(30px, 4vw, 54px);
|
|
font-weight: 610;
|
|
line-height: 1.08;
|
|
letter-spacing: -0.05em;
|
|
}
|
|
|
|
.product-onboarding > p:not(.product-kicker) {
|
|
max-width: 520px;
|
|
margin: 15px 0 22px;
|
|
font-size: 12px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.onboarding-art {
|
|
width: 110px;
|
|
height: 110px;
|
|
margin-bottom: 25px;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 1px solid var(--line);
|
|
border-radius: 16px;
|
|
color: var(--accent-strong);
|
|
background: var(--surface-raised);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.region-stage,
|
|
.structure-layout,
|
|
.render-setup-grid,
|
|
.render-workspace {
|
|
display: grid;
|
|
gap: 18px;
|
|
}
|
|
|
|
.region-stage {
|
|
grid-template-columns: minmax(0, 1fr) 210px;
|
|
}
|
|
|
|
.region-stage > aside,
|
|
.structure-review,
|
|
.render-controls,
|
|
.selected-direction-panel,
|
|
.render-sidebar {
|
|
padding: 18px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: var(--surface-raised);
|
|
}
|
|
|
|
.region-stage aside h2,
|
|
.region-stage aside p {
|
|
margin: 0;
|
|
}
|
|
|
|
.region-stage aside h2 {
|
|
margin-bottom: 17px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.region-stage aside > strong {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.region-stage aside p {
|
|
margin-top: 12px;
|
|
color: var(--text-soft);
|
|
font-size: 9px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.product-plan-frame {
|
|
position: relative;
|
|
min-height: 420px;
|
|
overflow: hidden;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: var(--canvas);
|
|
}
|
|
|
|
.product-plan-frame > img {
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 68vh;
|
|
display: block;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.product-region-layer {
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
.product-region-layer button {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
gap: 3px;
|
|
padding: 9px;
|
|
border: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
|
|
border-radius: 7px;
|
|
color: var(--accent-strong);
|
|
background: color-mix(in srgb, var(--accent-soft) 18%, transparent);
|
|
}
|
|
|
|
.product-region-layer button:hover,
|
|
.product-region-layer button.recommended {
|
|
border-color: var(--accent-strong);
|
|
background: color-mix(in srgb, var(--accent-soft) 32%, transparent);
|
|
}
|
|
|
|
.product-region-layer strong,
|
|
.product-region-layer span {
|
|
padding: 3px 5px;
|
|
border-radius: 5px;
|
|
background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
|
|
font-size: 8px;
|
|
}
|
|
|
|
.structure-layout {
|
|
grid-template-columns: minmax(380px, 1.1fr) minmax(330px, 0.9fr);
|
|
align-items: start;
|
|
}
|
|
|
|
.structure-review {
|
|
display: grid;
|
|
gap: 15px;
|
|
}
|
|
|
|
.analysis-callout {
|
|
min-height: 390px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
}
|
|
|
|
.analysis-callout > svg {
|
|
margin-bottom: 18px;
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.analysis-callout h2,
|
|
.analysis-callout p {
|
|
margin: 0;
|
|
}
|
|
|
|
.analysis-callout h2 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.analysis-callout p {
|
|
margin: 8px 0 19px;
|
|
color: var(--text-soft);
|
|
font-size: 10px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.analysis-callout label {
|
|
width: 100%;
|
|
margin-bottom: 12px;
|
|
display: grid;
|
|
gap: 6px;
|
|
color: var(--text-soft);
|
|
font-size: 9px;
|
|
}
|
|
|
|
.analysis-callout input,
|
|
.product-field input,
|
|
.product-field select,
|
|
.product-field textarea,
|
|
.edit-form textarea {
|
|
width: 100%;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 9px;
|
|
color: var(--text);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.analysis-callout input,
|
|
.product-field input,
|
|
.product-field select {
|
|
height: 40px;
|
|
padding: 0 11px;
|
|
}
|
|
|
|
.analysis-summary {
|
|
padding: 13px;
|
|
border-left: 3px solid var(--accent);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.analysis-summary.warning {
|
|
border-left-color: var(--warning);
|
|
background: var(--warning-soft);
|
|
}
|
|
|
|
.analysis-summary strong {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.analysis-summary p {
|
|
margin: 5px 0 0;
|
|
color: var(--text-soft);
|
|
font-size: 9px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.product-field {
|
|
display: grid;
|
|
gap: 6px;
|
|
color: var(--text-soft);
|
|
font-size: 9px;
|
|
font-weight: 640;
|
|
}
|
|
|
|
.product-field small {
|
|
color: var(--text-faint);
|
|
font-size: 8px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.product-field textarea {
|
|
min-height: 92px;
|
|
padding: 10px 11px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.two-fields,
|
|
.brief-grid,
|
|
.insight-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.insight-grid > div {
|
|
padding: 11px;
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.insight-grid h3 {
|
|
margin: 0 0 8px;
|
|
font-size: 9px;
|
|
}
|
|
|
|
.insight-grid p {
|
|
margin: 6px 0 0;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 5px;
|
|
color: var(--text-soft);
|
|
font-size: 8px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.insight-grid svg {
|
|
flex: 0 0 auto;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.brief-form {
|
|
max-width: 820px;
|
|
display: grid;
|
|
gap: 20px;
|
|
}
|
|
|
|
.wide-field {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.choice-group {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.choice-group legend {
|
|
margin-bottom: 9px;
|
|
color: var(--text-soft);
|
|
font-size: 9px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.choice-group > div {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 7px;
|
|
}
|
|
|
|
.choice-group button {
|
|
min-height: 35px;
|
|
padding: 0 11px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 9px;
|
|
color: var(--text-soft);
|
|
background: var(--surface-raised);
|
|
font-size: 9px;
|
|
}
|
|
|
|
.choice-group button.selected {
|
|
color: var(--accent-strong);
|
|
border-color: var(--accent);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.form-submit {
|
|
width: fit-content;
|
|
min-width: 190px;
|
|
}
|
|
|
|
.direction-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.direction-card {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: var(--surface-raised);
|
|
}
|
|
|
|
.palette-strip {
|
|
height: 82px;
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 1fr;
|
|
}
|
|
|
|
.direction-body {
|
|
padding: 17px;
|
|
}
|
|
|
|
.direction-body h2,
|
|
.direction-body p,
|
|
.direction-body dl {
|
|
margin: 0;
|
|
}
|
|
|
|
.direction-body h2 {
|
|
font-size: 18px;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.direction-body > p {
|
|
min-height: 72px;
|
|
margin-top: 8px;
|
|
color: var(--text-soft);
|
|
font-size: 9px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.keyword-row {
|
|
margin: 12px 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
}
|
|
|
|
.keyword-row span {
|
|
padding: 4px 6px;
|
|
border-radius: 6px;
|
|
color: var(--accent-strong);
|
|
background: var(--accent-soft);
|
|
font-size: 8px;
|
|
}
|
|
|
|
.direction-body dl {
|
|
min-height: 110px;
|
|
display: grid;
|
|
grid-template-columns: 38px 1fr;
|
|
align-content: start;
|
|
gap: 7px;
|
|
font-size: 8px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.direction-body dt {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.direction-body dd {
|
|
margin: 0;
|
|
color: var(--text-soft);
|
|
}
|
|
|
|
.direction-body > small {
|
|
min-height: 30px;
|
|
display: block;
|
|
color: var(--text-faint);
|
|
font-size: 7px;
|
|
}
|
|
|
|
.render-setup-grid {
|
|
grid-template-columns: minmax(320px, 1fr) minmax(300px, 0.75fr);
|
|
align-items: stretch;
|
|
}
|
|
|
|
.selected-direction-panel {
|
|
overflow: hidden;
|
|
padding: 0;
|
|
}
|
|
|
|
.selected-direction-panel .palette-strip {
|
|
height: 150px;
|
|
}
|
|
|
|
.selected-direction-panel h2,
|
|
.selected-direction-panel p,
|
|
.selected-direction-panel > strong {
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.selected-direction-panel h2 {
|
|
margin-top: 18px;
|
|
margin-bottom: 0;
|
|
font-size: 23px;
|
|
}
|
|
|
|
.selected-direction-panel p {
|
|
color: var(--text-soft);
|
|
font-size: 10px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.selected-direction-panel > strong {
|
|
display: block;
|
|
margin-bottom: 20px;
|
|
color: var(--text-soft);
|
|
font-size: 9px;
|
|
}
|
|
|
|
.render-controls {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 15px;
|
|
}
|
|
|
|
.generation-note {
|
|
padding: 11px;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
color: var(--text-soft);
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.generation-note svg {
|
|
flex: 0 0 auto;
|
|
color: var(--accent-strong);
|
|
}
|
|
|
|
.generation-note p {
|
|
margin: 0;
|
|
font-size: 8px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.render-workspace {
|
|
grid-template-columns: minmax(0, 1fr) 255px;
|
|
align-items: start;
|
|
}
|
|
|
|
.render-main {
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: var(--canvas);
|
|
}
|
|
|
|
.render-main > img {
|
|
width: 100%;
|
|
max-height: 68vh;
|
|
display: block;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.render-meta {
|
|
min-height: 38px;
|
|
padding: 0 11px;
|
|
justify-content: space-between;
|
|
color: var(--text-faint);
|
|
background: var(--surface-raised);
|
|
font-size: 8px;
|
|
}
|
|
|
|
.render-sidebar h2 {
|
|
margin: 0 0 10px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.version-list {
|
|
max-height: 230px;
|
|
overflow-y: auto;
|
|
display: grid;
|
|
gap: 5px;
|
|
}
|
|
|
|
.version-list button {
|
|
min-height: 47px;
|
|
padding: 7px;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border: 1px solid transparent;
|
|
border-radius: 8px;
|
|
color: var(--text-soft);
|
|
background: var(--surface-muted);
|
|
text-align: left;
|
|
}
|
|
|
|
.version-list button.active {
|
|
color: var(--text);
|
|
border-color: var(--accent);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.version-list button span {
|
|
min-width: 0;
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.version-list strong,
|
|
.version-list small {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.version-list strong {
|
|
font-size: 9px;
|
|
}
|
|
|
|
.version-list small {
|
|
font-size: 7px;
|
|
}
|
|
|
|
.edit-form {
|
|
margin-top: 15px;
|
|
padding-top: 14px;
|
|
display: grid;
|
|
gap: 8px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.edit-form label {
|
|
display: grid;
|
|
gap: 7px;
|
|
color: var(--text-soft);
|
|
font-size: 9px;
|
|
font-weight: 650;
|
|
}
|
|
|
|
.edit-form textarea {
|
|
min-height: 100px;
|
|
padding: 9px;
|
|
resize: vertical;
|
|
font-size: 9px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.agent-panel {
|
|
min-width: 0;
|
|
height: calc(100dvh - 66px);
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr) auto;
|
|
border-left: 1px solid var(--line);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.agent-heading {
|
|
min-height: 62px;
|
|
padding: 11px 13px;
|
|
gap: 9px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.agent-heading > span {
|
|
width: 31px;
|
|
height: 31px;
|
|
color: var(--accent-strong);
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
.agent-heading strong {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.agent-stream {
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: 13px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.agent-message {
|
|
max-width: 92%;
|
|
padding: 9px 10px;
|
|
align-self: flex-start;
|
|
border-radius: 10px 10px 10px 3px;
|
|
color: var(--text-soft);
|
|
background: var(--surface-raised);
|
|
box-shadow: inset 0 0 0 1px var(--line);
|
|
}
|
|
|
|
.agent-message.user {
|
|
align-self: flex-end;
|
|
border-radius: 10px 10px 3px 10px;
|
|
color: var(--accent-strong);
|
|
background: var(--accent-soft);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.agent-message small,
|
|
.agent-message p {
|
|
margin: 0;
|
|
}
|
|
|
|
.agent-message small {
|
|
display: block;
|
|
margin-bottom: 3px;
|
|
color: var(--text-faint);
|
|
font-size: 7px;
|
|
}
|
|
|
|
.agent-message p {
|
|
font-size: 9px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.agent-input {
|
|
padding: 10px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 32px;
|
|
align-items: end;
|
|
gap: 6px;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.agent-input textarea {
|
|
min-height: 60px;
|
|
max-height: 130px;
|
|
padding: 9px;
|
|
resize: none;
|
|
border: 1px solid var(--line-strong);
|
|
border-radius: 9px;
|
|
color: var(--text);
|
|
background: var(--surface-raised);
|
|
font-size: 9px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.agent-input button {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
color: #f5f8f6;
|
|
background: var(--accent-strong);
|
|
}
|
|
|
|
@media (max-width: 1120px) {
|
|
.product-body {
|
|
grid-template-columns: 156px minmax(0, 1fr);
|
|
}
|
|
|
|
.agent-panel {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.product-topbar {
|
|
padding: 0 12px;
|
|
}
|
|
|
|
.product-button.ghost,
|
|
.product-brand small {
|
|
display: none;
|
|
}
|
|
|
|
.product-body {
|
|
display: block;
|
|
}
|
|
|
|
.product-rail {
|
|
padding: 7px 10px;
|
|
overflow-x: auto;
|
|
flex-direction: row;
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.rail-progress,
|
|
.change-plan,
|
|
.product-rail nav small {
|
|
display: none;
|
|
}
|
|
|
|
.product-rail nav {
|
|
display: flex;
|
|
}
|
|
|
|
.product-rail nav > div {
|
|
min-width: 88px;
|
|
min-height: 38px;
|
|
grid-template-columns: 20px 1fr;
|
|
}
|
|
|
|
.product-rail nav > div > span {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.product-center {
|
|
height: auto;
|
|
min-height: calc(100dvh - 120px);
|
|
}
|
|
|
|
.product-stage {
|
|
padding: 22px 14px 38px;
|
|
}
|
|
|
|
.stage-header {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.stage-header > span {
|
|
text-align: left;
|
|
}
|
|
|
|
.region-stage,
|
|
.structure-layout,
|
|
.render-setup-grid,
|
|
.render-workspace,
|
|
.direction-grid,
|
|
.brief-grid,
|
|
.two-fields,
|
|
.insight-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.product-plan-frame {
|
|
min-height: 300px;
|
|
}
|
|
|
|
.direction-body > p,
|
|
.direction-body dl {
|
|
min-height: auto;
|
|
}
|
|
|
|
.render-main > img {
|
|
max-height: none;
|
|
}
|
|
}
|