/* * Composer design system — aligned with the mcp-broker shell. * Neutral hex palette, --radius 10px, font-weight 650 headings, sidebar app-shell. * The pre-paint script in index.html resolves the saved preference (light / dark / * auto-system) to a concrete value and sets it as `data-theme` on , so the * dark block only ever keys on the resolved value. */ :root { --background: #f5f5f5; --foreground: #0a0a0a; --card: #ffffff; --card-foreground: #0a0a0a; --muted: #f1f1f1; --muted-foreground: #737373; --border: #d7d7d7; --input: #e5e5e5; --primary: #171717; --primary-foreground: #fafafa; --accent: #ededed; --accent-foreground: #171717; --success: #047857; --success-surface: #d1fae5; --warning: #b45309; --warning-surface: #fef3c7; --destructive: #dc2626; --destructive-surface: #fee2e2; --info: #2563eb; --info-surface: #dbeafe; --ring: rgba(23, 23, 23, 0.18); --overlay: rgba(0, 0, 0, 0.45); --radius: 10px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } :root[data-theme="dark"] { --background: #0d0d0d; --foreground: #fafafa; --card: #171717; --card-foreground: #fafafa; --muted: #212121; --muted-foreground: #b3b3b3; --border: #ffffff1a; --input: #ffffff26; --primary: #e5e5e5; --primary-foreground: #171717; --accent: #262626; --accent-foreground: #fafafa; --success: #34d399; --success-surface: #064e3b66; --warning: #fbbf24; --warning-surface: #78350f66; --destructive: #f87171; --destructive-surface: #7f1d1d66; --info: #60a5fa; --info-surface: #1e3a8a66; --ring: rgba(229, 229, 229, 0.16); --overlay: rgba(0, 0, 0, 0.7); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; background: var(--background); color: var(--foreground); font-family: inherit; font-size: 14px; letter-spacing: 0; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; } /* ---- App shell ------------------------------------------------------- */ .app-shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 20px; height: 100vh; padding: 18px; overflow-y: auto; border-right: 1px solid var(--border); background: var(--background); } .brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 650; } .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); } .brand-mark img { width: 20px; height: 20px; display: block; } .brand-text { display: grid; min-width: 0; line-height: 1.2; } .brand-subtitle { margin-top: 2px; color: var(--muted-foreground); font-size: 12px; font-weight: 500; } .sidebar-section { display: grid; gap: 8px; } .sidebar-label { color: var(--muted-foreground); font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; } .nav { display: grid; gap: 6px; } .nav .button { width: 100%; justify-content: flex-start; } .sidebar-footer { margin-top: auto; display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); } .theme-panel { display: grid; gap: 8px; } .theme-label { color: var(--muted-foreground); font-size: 12px; font-weight: 650; } .theme-toggle, .theme-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); } .theme-option { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 8px; border: 0; border-radius: calc(var(--radius) - 3px); background: transparent; color: var(--muted-foreground); cursor: pointer; font-size: 12px; font-weight: 650; transition: background 0.15s ease, color 0.15s ease; } .theme-option:hover { background: var(--card); color: var(--foreground); } .theme-option[aria-pressed="true"] { background: var(--card); color: var(--foreground); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); } .theme-option svg { display: block; width: 15px; height: 15px; } /* ---- Content --------------------------------------------------------- */ .content { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 28px 28px 32px; } .page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .page-title { margin: 0; font-size: 28px; font-weight: 650; line-height: 1.15; } .page-description { margin: 8px 0 0; max-width: 640px; color: var(--muted-foreground); line-height: 1.45; } /* ---- Buttons --------------------------------------------------------- */ button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 40px; padding: 8px 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--foreground); cursor: pointer; font-size: 14px; font-weight: 500; line-height: 1.1; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease, opacity 0.15s ease; } button:hover, .button:hover { background: var(--accent); color: var(--accent-foreground); } button:active:hover, .button:active:hover { transform: scale(0.98); } button:focus-visible, .button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); } button:disabled, .button:disabled { pointer-events: none; opacity: 0.5; } button.primary, .button-primary { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); } button.primary:hover, .button-primary:hover { background: var(--primary); border-color: var(--primary); opacity: 0.9; } button.ghost, .button-ghost { border-color: transparent; background: transparent; color: var(--muted-foreground); } button.ghost:hover, .button-ghost:hover { background: var(--accent); color: var(--accent-foreground); } /* ---- Cards & badges -------------------------------------------------- */ .card, .accordions { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); } .badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--muted); color: var(--muted-foreground); font-size: 12px; font-weight: 600; white-space: nowrap; } .badge:empty { display: none; } .badge.ok, .status-saved { border-color: transparent; background: var(--success-surface); color: var(--success); } .badge.warn, .status-missing { border-color: transparent; background: var(--warning-surface); color: var(--warning); } .badge.err { border-color: transparent; background: var(--destructive-surface); color: var(--destructive); } /* ---- Accordions ------------------------------------------------------ */ .accordions { overflow: hidden; } .accordion { border-bottom: 1px solid var(--border); } .accordion:last-child { border-bottom: none; } .accordion-header { display: flex; justify-content: space-between; align-items: center; min-height: 46px; padding: 0 16px; cursor: pointer; user-select: none; transition: background 0.15s ease; } .accordion-header:hover { background: var(--accent); } .accordion-title { display: flex; align-items: center; color: var(--foreground); font-size: 14px; font-weight: 650; } .chevron { display: inline-block; width: 14px; margin-right: 8px; color: var(--muted-foreground); font-size: 10px; transition: transform 0.2s ease; } .accordion-title.expanded .chevron { transform: rotate(90deg); } .accordion-counter { color: var(--muted-foreground); font-size: 13px; font-weight: 500; } .accordion-body { padding: 0 16px 16px 38px; } .accordion-body.collapsed { display: none; } .rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 18px; } .accordion-placeholder { color: var(--muted-foreground); font-size: 13px; font-style: italic; padding: 8px 0; } .rule { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 2px 0; color: var(--foreground); cursor: pointer; font-size: 14px; } .rule input[type=checkbox] { width: 16px; height: 16px; margin-top: 2px; cursor: pointer; accent-color: var(--primary); } .rule span { display: grid; min-width: 0; gap: 2px; } .rule small { color: var(--muted-foreground); font-size: 12px; line-height: 1.4; } /* ---- Editor panels --------------------------------------------------- */ .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; flex: 1 1 auto; min-height: 560px; } .panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); } .editor-panel { gap: 0; } .editor-group { display: flex; flex-direction: column; min-height: 0; } .compose-group, .env-group { flex: 1 1 0; } .env-group { border-top: 1px solid var(--border); } .panel-header { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 16px; border-bottom: 1px solid var(--border); color: var(--foreground); font-size: 13px; font-weight: 650; } textarea { flex: 1; width: 100%; min-height: 0; padding: 14px 16px; border: none; background: var(--card); color: var(--foreground); font-family: var(--mono); font-size: 13px; line-height: 1.55; outline: none; resize: none; tab-size: 2; } textarea::placeholder { color: var(--muted-foreground); } /* ---- Messages -------------------------------------------------------- */ .messages-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; } .messages-list:empty { display: none; } .messages-list .msg { margin: 0; } .msg { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--foreground); font-size: 13px; } .msg.ok { border-left: 3px solid var(--success); } .msg.warn { border-left: 3px solid var(--warning); } .msg.err { border-left: 3px solid var(--destructive); } .msg.info { border-left: 3px solid var(--info); } .msg-icon { flex-shrink: 0; padding-top: 1px; color: var(--muted-foreground); font-size: 11px; font-weight: 700; } .msg.ok .msg-icon { color: var(--success); } .msg.warn .msg-icon { color: var(--warning); } .msg.err .msg-icon { color: var(--destructive); } .msg.info .msg-icon { color: var(--info); } /* ---- Modals ---------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--overlay); } .modal.hidden, .hidden { display: none; } .modal-content { display: flex; flex-direction: column; width: min(100%, 900px); max-height: 90vh; overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); background: var(--card); box-shadow: 0 20px 45px rgb(0 0 0 / 0.25); } .modal-content.format-messages-content { width: min(100%, 720px); } .modal-header { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 0 20px; border-bottom: 1px solid var(--border); } .modal-header h2 { margin: 0; color: var(--foreground); font-size: 18px; font-weight: 650; } .modal-close { width: 40px; min-height: 40px; padding: 0; border: none; background: transparent; color: var(--muted-foreground); font-size: 24px; } .modal-close:hover { background: var(--accent); color: var(--foreground); } .modal-body { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding: 18px 20px; } .modal-intro { margin: 0; color: var(--muted-foreground); font-size: 14px; line-height: 1.5; } .modal-actions { display: flex; flex-wrap: wrap; gap: 8px; } .modal-actions-end { justify-content: flex-end; } .upgrade-list { display: flex; flex-direction: column; gap: 12px; max-height: 50vh; overflow-y: auto; } .upgrade-card { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); } .upgrade-image-name { margin-bottom: 4px; color: var(--foreground); font-family: var(--mono); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; } .upgrade-services-line, .upgrade-loading, .upgrade-error { color: var(--muted-foreground); font-size: 12px; line-height: 1.45; } .upgrade-error { color: var(--destructive); } .upgrade-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 10px; } .upgrade-row label { color: var(--muted-foreground); font-size: 13px; font-weight: 600; } .upgrade-row select { width: 100%; min-width: 0; min-height: 40px; padding: 0 10px; border: 1px solid var(--input); border-radius: 8px; background: var(--card); color: var(--foreground); font-family: var(--mono); font-size: 13px; } /* ---- Scrollbars ------------------------------------------------------ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; } * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } /* ---- Responsive ------------------------------------------------------ */ @media (max-width: 860px) { .app-shell { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); } .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sidebar-footer { margin-top: 4px; } .content { padding: 24px 18px 32px; } .page-header { flex-direction: column; } .page-title { font-size: 22px; } .container { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); min-height: 900px; } .upgrade-row { grid-template-columns: minmax(0, 1fr); } }