:root { color: #151515; background: #ececec; --bg: #ececec; --bg-soft: #f4f4f4; --panel: rgba(250, 250, 250, 0.86); --panel-strong: rgba(255, 255, 255, 0.94); --ink: #151515; --muted: #6a6a6a; --line: rgba(0, 0, 0, 0.12); --line-strong: rgba(0, 0, 0, 0.22); --dark: #111111; --dark-soft: #1d1d1d; --accent: #2b2b2b; --accent-soft: rgba(0, 0, 0, 0.08); --warning-bg: #e8e8e8; --danger-bg: #d8d8d8; --nodedc-glass-panel-bg: rgba(255, 255, 255, 0.48); --nodedc-glass-panel-bg-strong: rgba(255, 255, 255, 0.66); --nodedc-glass-panel-bg-soft: rgba(255, 255, 255, 0.34); --nodedc-glass-panel-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.22) 100%), var(--nodedc-glass-panel-bg); --nodedc-glass-panel-surface-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.34) 100%), var(--nodedc-glass-panel-bg-strong); --nodedc-glass-section-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.18) 100%), rgba(255, 255, 255, 0.3); --nodedc-glass-control-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.54) 0%, rgba(255, 255, 255, 0.22) 100%), rgba(255, 255, 255, 0.38); --nodedc-glass-control-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.3) 100%), rgba(255, 255, 255, 0.5); --nodedc-glass-control-active: linear-gradient(180deg, rgba(32, 32, 34, 0.98), rgba(20, 20, 22, 0.96)); --nodedc-glass-outline: rgba(24, 32, 29, 0.12); --nodedc-glass-outline-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.38) 24%, rgba(24, 32, 29, 0.1) 100%); --nodedc-glass-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 22px 76px rgba(24, 32, 29, 0.16); --nodedc-glass-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56); --nodedc-glass-blur: blur(24px) saturate(128%) brightness(1.05); --nodedc-glass-panel-blur: blur(44px) saturate(1.12) brightness(1.04); --nodedc-header-dropdown-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.18)), rgba(255, 255, 255, 0.42); --nodedc-header-dropdown-item-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.16)), rgba(255, 255, 255, 0.28); --nodedc-header-dropdown-item-hover-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.24)), rgba(255, 255, 255, 0.38); --nodedc-header-dropdown-item-active-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.28)), rgba(255, 255, 255, 0.46); --nodedc-header-dropdown-item-active-color: rgba(10, 12, 14, 0.94); --nodedc-layer-base: 0; --nodedc-layer-panel: 100; --nodedc-layer-panel-raised: 200; --nodedc-layer-header: 400; --nodedc-layer-modal: 800; --nodedc-layer-popover: 900; --nodedc-layer-toast: 950; font-family: "Aptos", "Segoe UI", sans-serif; font-synthesis: none; text-rendering: optimizeLegibility; } * { box-sizing: border-box; } body { margin: 0; min-width: 320px; min-height: 100vh; background: linear-gradient(90deg, rgba(0, 0, 0, 0.045) 0 1px, transparent 1px 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0 1px, transparent 1px 100%), var(--bg); background-size: 44px 44px; } button { font: inherit; } input { font: inherit; } .app-shell { display: flex; flex-direction: column; min-height: 100vh; } .app-header { position: sticky; top: 0; z-index: var(--nodedc-layer-header); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px 22px; color: #f4f4f4; background: var(--dark); border-bottom: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); } .brand-block { display: flex; align-items: center; gap: 10px; min-width: 188px; } .brand-mark { display: grid; width: 38px; height: 38px; place-items: center; color: #111; font-weight: 800; background: #f0f0f0; border-radius: 6px; } .brand-block h1, .brand-block p, .topbar h2, .topbar p, .status-card h3, .status-card p, .section-heading h3, .task-row p, .footer-line { margin: 0; } .brand-block h1 { font-size: 18px; line-height: 1.1; } .brand-block p, .eyebrow { color: #8d8d8d; font-size: 13px; } .nav-list { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: thin; } .nav-item { position: relative; display: inline-flex; align-items: center; gap: 7px; min-width: 38px; min-height: 38px; padding: 0; color: #d8d8d8; white-space: nowrap; background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: default; } .nav-item span { display: grid; width: 32px; height: 32px; place-items: center; color: #cfcfcf; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; font-size: 11px; font-weight: 900; } .nav-item strong { display: none; padding-right: 12px; font-size: 13px; font-weight: 850; } .nav-item.active { color: #fff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.32); } .nav-item.active span { color: #111; background: #f0f0f0; border-color: #f0f0f0; } .nav-item.active strong { display: inline; } .workspace { display: flex; flex-direction: column; gap: 26px; width: min(1500px, 100%); margin: 0 auto; padding: 24px; } .topbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); } .topbar h2 { margin-top: 4px; font-size: 28px; line-height: 1.15; } .system-status-menu { position: relative; justify-self: end; } .system-status-menu > summary { display: grid; width: 42px; height: 42px; place-items: center; color: #f2f2f2; list-style: none; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; cursor: pointer; } .system-status-menu > summary::-webkit-details-marker { display: none; } .system-status-menu[open] > summary { color: #111; background: #f0f0f0; border-color: #f0f0f0; } .system-status-popover { position: absolute; top: calc(100% + 10px); right: 0; z-index: var(--nodedc-layer-popover); display: grid; gap: 8px; width: min(460px, calc(100vw - 48px)); padding: 10px; color: var(--ink); background: rgba(250, 250, 250, 0.98); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18); } .system-status-popover h3, .system-status-popover p, .system-status-popover span { color: inherit; } .system-settings-action { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 38px; width: 100%; padding: 0 12px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-weight: 850; } .service-modal-backdrop { position: fixed; inset: 0; z-index: var(--nodedc-layer-modal); display: grid; place-items: center; padding: 22px; background: rgba(0, 0, 0, 0.42); } .service-modal { display: grid; gap: 12px; width: min(1040px, 100%); max-height: min(860px, calc(100vh - 44px)); overflow: auto; padding: 14px; color: var(--ink); background: #f8f8f8; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 8px; box-shadow: 0 24px 72px rgba(0, 0, 0, 0.24); } .service-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .service-modal-header > div { display: grid; gap: 5px; } .service-modal-header span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 850; text-transform: uppercase; } .service-modal-header h2, .service-modal-header p { margin: 0; } .service-modal-header h2 { font-size: 22px; } .service-modal-header p { color: var(--muted); font-size: 13px; font-weight: 680; } .service-modal-close { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; } .external-service-list { display: grid; gap: 10px; } .external-service-card { display: grid; gap: 10px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .external-service-card-head, .service-card-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .external-service-card-head > div { display: grid; gap: 4px; min-width: 0; } .external-service-card-head strong { color: var(--ink); font-size: 15px; } .external-service-card-head small, .service-card-footer small, .service-field small { color: var(--muted); font-size: 12px; font-weight: 680; line-height: 1.35; } .external-service-card-head span { width: fit-content; padding: 3px 7px; color: #70521f; background: rgba(112, 82, 31, 0.07); border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 900; } .external-service-card.configured .external-service-card-head span { color: #2f6b4f; background: rgba(47, 107, 79, 0.06); } .external-service-card.missing_required .external-service-card-head span, .external-service-card.not_implemented .external-service-card-head span { color: #8b2f2f; background: rgba(139, 47, 47, 0.06); } .service-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 12px; font-weight: 850; white-space: nowrap; } .external-service-docs { display: flex; flex-wrap: wrap; gap: 6px; } .external-service-docs a { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 8px; color: #2e4960; background: rgba(46, 73, 96, 0.06); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 850; text-decoration: none; } .service-dependency { width: fit-content; margin: 0; padding: 6px 9px; color: #2e4960; background: rgba(46, 73, 96, 0.06); border: 1px solid var(--line); border-radius: 7px; font-size: 12px; font-weight: 780; } .service-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .service-field { display: grid; gap: 5px; min-width: 0; color: var(--ink); font-size: 12px; font-weight: 850; } .service-field-full { width: min(420px, 100%); } .service-field input, .service-field select { width: 100%; min-height: 36px; padding: 0 10px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 7px; outline: none; font: inherit; font-size: 13px; } .service-field input:focus, .service-field select:focus { border-color: rgba(0, 0, 0, 0.28); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06); } .service-warning { margin: 0; padding: 8px 10px; color: #8b2f2f; background: rgba(139, 47, 47, 0.06); border: 1px solid rgba(139, 47, 47, 0.14); border-radius: 7px; font-size: 12px; font-weight: 780; } .service-command-panel { display: grid; gap: 8px; padding: 10px; background: rgba(30, 30, 30, 0.04); border: 1px solid var(--line); border-radius: 8px; } .service-command-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .service-command-head strong { color: var(--ink); font-size: 12px; font-weight: 900; } .service-command-head span { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; color: #70521f; background: rgba(112, 82, 31, 0.07); border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 900; } .service-command-head span.ok { color: #2f6b4f; background: rgba(47, 107, 79, 0.08); } .service-command-panel pre { max-height: 118px; margin: 0; overflow: auto; padding: 9px; color: #f5f5f5; background: #1f2428; border-radius: 7px; font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .service-command-panel small { color: var(--muted); font-size: 12px; font-weight: 680; line-height: 1.35; } .service-card-footer { align-items: center; padding-top: 2px; flex-wrap: wrap; } .service-probe-result { display: grid; gap: 8px; padding: 10px; background: rgba(46, 73, 96, 0.04); border: 1px solid var(--line); border-radius: 8px; } .service-probe-result > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .service-probe-result strong, .service-probe-result span { color: var(--ink); font-size: 12px; font-weight: 900; } .service-probe-result span { color: var(--muted); } .service-probe-result ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .service-probe-result li { display: grid; gap: 2px; padding: 7px 8px; background: #fff; border: 1px solid var(--line); border-radius: 7px; } .service-probe-result li span { color: var(--ink); } .service-probe-result li small { color: var(--muted); font-size: 11px; font-weight: 760; line-height: 1.35; } .service-probe-result li.ok { border-color: rgba(47, 107, 79, 0.2); } .service-probe-result li.error { border-color: rgba(139, 47, 47, 0.2); } .status-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 1px solid; border-radius: 6px; } .status-pill.ok { color: #151515; background: #ededed; border-color: #bdbdbd; } .status-pill.warning { color: #151515; background: #dedede; border-color: #9c9c9c; } .status-card { display: flex; align-items: flex-start; gap: 14px; min-height: 128px; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; } .status-card.compact { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 12px; min-height: 0; padding: 14px; background: var(--panel-strong); } .system-subsection { display: grid; gap: 8px; padding: 8px; color: var(--ink); background: #f4f4f4; border: 1px solid var(--line); border-radius: 10px; } .system-subsection summary { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; width: 100%; min-height: 34px; padding: 0; gap: 8px; color: var(--ink); list-style: none; background: transparent; border: 0; border-radius: 0; font-weight: 800; line-height: 1.1; cursor: pointer; } .system-subsection summary::-webkit-details-marker { display: none; } .system-subsection summary::after { margin-left: auto; color: var(--muted); content: "+"; } .system-subsection summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .system-subsection[open] summary::after { content: "−"; } .status-card svg, .section-heading svg, .footer-line svg { flex: 0 0 auto; color: #303030; } .status-card.compact svg { margin-top: 1px; } .status-card h3 { margin-bottom: 8px; font-size: 16px; line-height: 1.15; } .status-card p, .task-row p, .footer-line { color: var(--muted); line-height: 1.45; } .work-band { display: grid; gap: 16px; } .section-heading { display: flex; align-items: flex-start; gap: 10px; } .section-heading h3 { font-size: 18px; } .section-heading p, .list-heading p, .field-hint { margin: 4px 0 0; color: #66736d; line-height: 1.45; } .project-setup { display: grid; gap: 16px; } .project-grid { display: grid; gap: 16px; } .project-form, .project-list-card { padding: 18px; background: rgba(255, 252, 244, 0.82); border: 1px solid rgba(24, 32, 29, 0.12); border-radius: 10px; box-shadow: 0 18px 44px rgba(24, 32, 29, 0.06); } .project-form { display: grid; align-content: start; gap: 14px; } .field { display: grid; gap: 7px; color: #24302b; font-weight: 700; } .field input { width: 100%; min-height: 44px; padding: 0 12px; color: #18201d; background: #fffaf0; border: 1px solid rgba(24, 32, 29, 0.18); border-radius: 7px; outline: none; transition: border-color 160ms ease, box-shadow 160ms ease; } .field input:focus { border-color: #2e6f64; box-shadow: 0 0 0 3px rgba(46, 111, 100, 0.14); } .folder-picker-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 10px; color: #5b6862; font-weight: 500; background: linear-gradient(135deg, rgba(46, 111, 100, 0.08), transparent 54%), rgba(255, 250, 240, 0.9); border: 1px dashed rgba(46, 111, 100, 0.35); border-radius: 8px; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; } .folder-picker-panel.active { background: linear-gradient(135deg, rgba(228, 199, 102, 0.24), transparent 54%), #fffaf0; border-color: #2e6f64; transform: translateY(-1px); } .folder-picker-input { display: none; } .folder-pick-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; min-height: 34px; padding: 0 12px; color: #fff8e7; background: #2e6f64; border: 1px solid #24584f; border-radius: 7px; cursor: pointer; } .folder-pick-action:disabled { cursor: wait; opacity: 0.72; } .folder-picker-message { color: var(--ink); font-size: 13px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.38; } .folder-picker-message-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; margin-top: 2px; } .folder-upload-status { justify-content: flex-start; } .loading-dots::after { display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom; content: "..."; animation: loading-dots 1.15s steps(4, end) infinite; } @keyframes loading-dots { 0% { width: 0; } 100% { width: 1.2em; } } .folder-picker-clear { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; padding: 0; color: var(--accent); background: transparent; border: 0; border-radius: 999px; cursor: pointer; font-size: 24px; font-weight: 600; line-height: 1; } .folder-picker-clear:hover { color: var(--accent-hover); background: rgba(242, 122, 26, 0.08); } .input-hint-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; color: #66736d; font-weight: 400; line-height: 1.4; } .link-action { padding: 0; color: #2e6f64; white-space: nowrap; background: transparent; border: 0; border-bottom: 1px solid rgba(46, 111, 100, 0.35); cursor: pointer; } .link-action:hover { border-bottom-color: #2e6f64; } .field-hint { font-size: 14px; } .field-warning { color: #8f2d1f; font-weight: 600; line-height: 1.4; } .form-message, .empty-state { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 7px; line-height: 1.45; } .form-message.success { color: #153f35; background: #dcece2; } .form-message.error, .empty-state.error { color: #6d2f21; background: #f4ded7; } .primary-action, .ghost-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border-radius: 7px; cursor: pointer; } .primary-action { color: #fff8e7; background: #2e6f64; border: 1px solid #24584f; } .primary-action:disabled, .ghost-action:disabled { cursor: not-allowed; opacity: 0.58; } .ghost-action { padding: 0 12px; color: #2e6f64; background: rgba(46, 111, 100, 0.08); border: 1px solid rgba(46, 111, 100, 0.22); } .list-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .list-heading h3, .project-row h4 { margin: 0; } .project-list { display: grid; gap: 10px; } .project-row { display: grid; gap: 14px; padding: 14px; background: linear-gradient(135deg, rgba(228, 199, 102, 0.14), transparent 42%), #fffaf0; border: 1px solid rgba(24, 32, 29, 0.1); border-radius: 8px; } .project-row p { margin: 7px 0 0; color: #5b6862; overflow-wrap: anywhere; } .project-source { display: grid; gap: 5px; } .project-source p { margin: 0; } .project-title { display: inline; cursor: text; text-decoration-color: rgba(46, 111, 100, 0.35); text-decoration-line: underline; text-decoration-style: dotted; text-underline-offset: 4px; } .project-title:hover { color: #2e6f64; } .project-title-row { display: flex; align-items: center; gap: 8px; min-height: 32px; } .project-title-input { width: min(100%, 420px); min-height: 32px; padding: 0 10px; color: var(--ink); background: rgba(255, 255, 255, 0.82); border: 1px solid var(--line); border-radius: 12px; outline: none; font: inherit; font-weight: 720; letter-spacing: -0.02em; } .project-title-input:focus { border-color: rgba(0, 0, 0, 0.2); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.055); } .project-title-loader { color: var(--muted); flex: 0 0 auto; } .section-project-title-row { display: inline-flex; align-items: baseline; gap: 8px; max-width: min(720px, 100%); margin: 0 0 0 10px; vertical-align: baseline; } .project-setup > .section-heading h3 { display: inline; } .section-project-title-row::before { content: "·"; color: var(--muted); font-weight: 650; } .section-project-title { max-width: min(720px, 100%); padding: 0; color: var(--ink); background: transparent; border: 0; font: inherit; font-size: 16px; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; text-align: left; } .section-project-title-input { width: min(100%, 520px); } .section-title-warning { display: block; width: fit-content; margin-top: 8px; } .section-project-title.project-title { display: inline-block !important; max-width: min(720px, 100%) !important; white-space: normal; overflow-wrap: anywhere; font-weight: 650 !important; letter-spacing: -0.01em; } .inline-title-warning { display: block; margin-top: -10px; } .scan-summary { display: grid; gap: 8px; margin-top: 12px; padding: 10px; color: #31423b; background: rgba(46, 111, 100, 0.07); border: 1px solid rgba(46, 111, 100, 0.16); border-radius: 7px; } .scan-summary.muted { display: inline-flex; align-items: center; gap: 6px; color: #6d7c76; background: rgba(255, 252, 244, 0.86); border-style: dashed; } .project-scan-status { box-sizing: border-box; width: 100%; margin-top: 14px !important; padding: 12px 14px !important; background: rgba(255, 255, 255, 0.72) !important; border-style: solid !important; border-radius: 18px !important; } .scan-metrics { display: flex; flex-wrap: wrap; gap: 8px; } .scan-metrics span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; color: #2e6f64; background: rgba(255, 253, 247, 0.78); border-radius: 999px; font-size: 12px; font-weight: 800; } .scan-status-note { margin: 0; color: #31423b; font-size: 13px; font-weight: 700; } .scan-artifact-note { margin: 0; color: #6b5a1e; font-size: 12px; font-weight: 800; } .scan-help, .audit-help, .workspace-help { display: grid; gap: 8px; color: #31423b; background: rgba(255, 253, 247, 0.72); border: 1px dashed rgba(46, 111, 100, 0.22); border-radius: 7px; padding: 9px; } .scan-help summary, .audit-help summary, .workspace-help summary { color: #2e6f64; cursor: pointer; font-size: 13px; font-weight: 900; } .scan-help p, .audit-help p, .workspace-help p { margin: 0; color: #43514c; font-size: 13px; font-weight: 650; } .page-workspace-panel { display: grid; gap: 10px; padding: 10px; background: linear-gradient(135deg, rgba(46, 111, 100, 0.08), rgba(251, 244, 224, 0.76)), rgba(255, 253, 247, 0.82); border: 1px solid rgba(46, 111, 100, 0.2); border-radius: 10px; } .page-workspace-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .page-workspace-heading div { display: grid; gap: 3px; } .page-workspace-heading strong { color: #18201d; font-size: 15px; } .page-workspace-heading small, .workspace-empty { color: #6d7c76; font-size: 12px; font-weight: 800; } .page-workspace-heading span { white-space: nowrap; padding: 4px 8px; color: #2e6f64; background: rgba(46, 111, 100, 0.1); border-radius: 999px; font-size: 11px; font-weight: 900; } .workspace-page-tabs { display: flex; flex-wrap: wrap; gap: 7px; } .workspace-page-tabs button { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 34px; padding: 0 10px; color: #2e6f64; background: #fffdf7; border: 1px solid rgba(46, 111, 100, 0.2); border-radius: 999px; cursor: pointer; font-weight: 900; } .workspace-page-tabs button.active { color: #fffdf7; background: #2e6f64; border-color: #2e6f64; } .workspace-page-tabs button:disabled { cursor: wait; opacity: 0.7; } .workspace-page-tabs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .workspace-editor-stack { display: grid; gap: 10px; } .workspace-meta { display: grid; gap: 3px; padding: 8px; background: rgba(255, 253, 247, 0.76); border: 1px solid rgba(24, 32, 29, 0.08); border-radius: 8px; } .workspace-meta strong { color: #18201d; overflow-wrap: anywhere; } .workspace-meta small { color: #6d7c76; font-weight: 800; overflow-wrap: anywhere; } .workspace-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .seed-help, .workspace-raw-draft { display: grid; gap: 8px; padding: 9px; background: rgba(255, 253, 247, 0.7); border: 1px dashed rgba(46, 111, 100, 0.24); border-radius: 8px; } .seed-help summary, .workspace-raw-draft summary { color: #2e6f64; cursor: pointer; font-size: 13px; font-weight: 900; } .seed-help p { margin: 0; color: #43514c; font-size: 13px; font-weight: 700; } .workspace-preview-layout { display: grid; gap: 10px; } .workspace-preview-panel, .workspace-page-issues, .workspace-section-workbench, .section-editor-card { display: grid; gap: 10px; padding: 10px; background: rgba(255, 253, 247, 0.76); border: 1px solid rgba(24, 32, 29, 0.08); border-radius: 10px; } .workspace-preview-panel iframe { width: 100%; min-height: 520px; background: #fff; border: 1px solid rgba(24, 32, 29, 0.14); border-radius: 10px; } .workspace-preview-frame { position: relative; overflow: hidden; border-radius: 16px; } .workspace-preview-mode-switch { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; width: fit-content; padding: 4px; background: #f2f2f4; border: 1px solid var(--line); border-radius: 999px; } .workspace-preview-mode-switch button { min-height: 30px; padding: 0 12px; color: var(--muted); background: transparent; border: 0; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 520; } .workspace-preview-mode-switch button.active { color: #fff; background: var(--ink); } .workspace-preview-frame iframe { display: block; } .workspace-preview-markers { position: absolute; inset: 0; pointer-events: none; } .workspace-preview-markers button { position: absolute; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; color: #fff; background: #ff4fb8; border: 2px solid rgba(255, 255, 255, 0.92); border-radius: 999px; box-shadow: 0 8px 18px rgba(255, 79, 184, 0.3); cursor: pointer; font-size: 12px; font-weight: 750; line-height: 1; pointer-events: auto; } .workspace-preview-markers button.active { background: #d81b7d; box-shadow: 0 0 0 4px rgba(255, 79, 184, 0.18); } .workspace-subheading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; } .workspace-subheading strong { color: #18201d; font-size: 14px; overflow-wrap: anywhere; } .workspace-subheading small { color: #6d7c76; font-size: 12px; font-weight: 800; overflow-wrap: anywhere; } .workspace-issue-list { display: grid; gap: 7px; } .workspace-issue-list button { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; width: 100%; padding: 8px; text-align: left; background: rgba(255, 252, 244, 0.82); border: 1px solid rgba(24, 32, 29, 0.08); border-radius: 8px; cursor: pointer; } .workspace-issue-list button:disabled { cursor: default; opacity: 0.78; } .workspace-issue-list span { align-self: start; padding: 3px 7px; color: #7f5200; background: #fff0c2; border-radius: 999px; font-size: 11px; font-weight: 900; } .workspace-issue-list strong { color: #18201d; font-size: 13px; overflow-wrap: anywhere; } .workspace-issue-list small { grid-column: 2; color: #6d7c76; font-size: 12px; font-weight: 800; } .section-workbench-grid { display: grid; gap: 10px; } .section-map-list { display: grid; gap: 7px; max-height: 440px; overflow: auto; } .section-map-card { display: grid; gap: 6px; width: 100%; padding: 8px; text-align: left; background: rgba(255, 252, 244, 0.82); border: 1px solid rgba(24, 32, 29, 0.08); border-radius: 8px; cursor: pointer; } .section-map-card.active, .section-map-card:hover { background: rgba(46, 111, 100, 0.1); border-color: rgba(46, 111, 100, 0.36); } .section-map-card div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; } .section-map-card strong { color: #18201d; overflow-wrap: anywhere; } .section-map-card small { color: #6d7c76; font-weight: 800; } .section-map-card em { justify-self: start; padding: 3px 7px; color: #7f5200; background: #fff0c2; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 900; } .section-map-card p { display: -webkit-box; margin: 0; color: #31423b; font-size: 12px; font-weight: 700; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .section-map-card span { padding: 3px 7px; color: #2e6f64; background: rgba(46, 111, 100, 0.1); border-radius: 999px; font-size: 11px; font-weight: 900; } .workspace-target-card div span { width: 26px; height: 26px; display: inline-grid; place-items: center; padding: 0; color: #fff; background: var(--ink); } .workspace-target-card.active div span { color: var(--ink); background: #fff; } .workspace-target-issues { display: grid; gap: 6px; padding: 10px 12px; color: var(--muted); background: rgba(242, 122, 26, 0.08); border: 1px solid rgba(242, 122, 26, 0.16); border-radius: 14px; } .section-editor-card label { display: grid; gap: 6px; } .section-editor-card label span { color: #2e6f64; font-size: 12px; font-weight: 900; } .section-editor-card pre, .section-editor-card textarea, .workspace-raw-draft pre { width: 100%; margin: 0; padding: 12px; color: #18201d; background: rgba(255, 253, 247, 0.9); border: 1px solid rgba(24, 32, 29, 0.12); border-radius: 9px; font: 700 13px/1.55 "JetBrains Mono", "Cascadia Code", monospace; overflow: auto; white-space: pre-wrap; } .section-editor-card pre { max-height: 220px; } .section-editor-card textarea { min-height: 240px; resize: vertical; } .section-editor-card textarea:focus { outline: 3px solid rgba(46, 111, 100, 0.16); border-color: rgba(46, 111, 100, 0.42); } .workspace-raw-draft pre { max-height: 260px; } @media (min-width: 1180px) { .workspace-preview-layout, .section-workbench-grid { grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); align-items: start; } } .audit-summary { display: grid; gap: 8px; padding: 10px; background: rgba(255, 253, 247, 0.82); border: 1px solid rgba(24, 32, 29, 0.08); border-radius: 7px; } .audit-heading { display: grid; gap: 3px; } .audit-heading strong { color: #18201d; font-size: 13px; } .audit-heading span { color: #6d7c76; font-size: 12px; font-weight: 700; } .audit-heading small { color: #8a968f; font-size: 12px; font-weight: 700; } .audit-toolbar { display: flex; flex-wrap: wrap; gap: 6px; } .audit-toolbar button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; color: #2e6f64; background: #fffdf7; border: 1px solid rgba(46, 111, 100, 0.22); border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 900; } .audit-toolbar button.active { color: #fffdf7; background: #2e6f64; border-color: #2e6f64; } .audit-toolbar button:disabled { cursor: not-allowed; opacity: 0.5; } .audit-toolbar button span { min-width: 20px; padding: 2px 6px; color: inherit; background: rgba(24, 32, 29, 0.08); border-radius: 999px; } .semantic-panel { display: grid; gap: 12px; padding: 12px; background: rgba(247, 249, 248, 0.9); border: 1px solid rgba(24, 32, 29, 0.1); border-radius: 8px; } .semantic-heading, .semantic-metric-row, .semantic-clean, .semantic-gap-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .semantic-heading > div { display: grid; gap: 3px; } .semantic-heading-actions, .semantic-export-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .semantic-heading strong, .semantic-gap-panel > strong, .semantic-seeds > strong, .semantic-warning-list > strong { color: #18201d; font-size: 13px; } .semantic-heading small, .semantic-cluster small, .semantic-gap-row small, .semantic-ai-contract small, .semantic-warning-row small { color: #6d7c76; font-size: 12px; font-weight: 750; } .semantic-review-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .semantic-review-card { display: grid; align-content: start; gap: 5px; min-height: 112px; padding: 10px; background: #fff; border: 1px solid rgba(24, 32, 29, 0.1); border-radius: 8px; } .semantic-review-card.semantic-context-card { grid-column: span 2; } .semantic-context-summary { display: grid; grid-template-columns: minmax(220px, 0.5fr) minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; background: #fff; border: 1px solid rgba(24, 32, 29, 0.1); border-radius: 18px; } .semantic-context-summary > div:first-child { display: grid; gap: 5px; min-width: 0; } .semantic-context-summary strong { color: var(--ink); font-size: 14px; } .semantic-context-summary small { color: var(--muted); font-size: 12px; font-weight: 740; line-height: 1.38; } .semantic-context-tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } .semantic-context-tags span { display: inline-flex; max-width: 100%; min-height: 26px; align-items: center; padding: 0 9px; color: #33413c; background: rgba(24, 32, 29, 0.055); border: 1px solid rgba(24, 32, 29, 0.08); border-radius: 999px; font-size: 11px; font-weight: 850; line-height: 1.15; } .seo-context-review-card, .market-context-gate { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .seo-context-review-card.warning, .market-context-gate { border-color: rgba(178, 119, 31, 0.32); background: rgba(178, 119, 31, 0.055); } .seo-context-review-card.ready { border-color: rgba(47, 107, 79, 0.24); } .seo-context-review-card.stale, .seo-context-review-card.missing { border-color: rgba(139, 47, 47, 0.24); } .seo-context-review-card > div:first-child, .market-context-gate > div:first-child { display: grid; gap: 4px; min-width: 0; } .seo-context-review-card span, .market-context-gate span { color: #2e5a67; font-size: 11px; font-weight: 900; text-transform: uppercase; } .seo-context-review-card strong, .market-context-gate strong { color: var(--ink); font-size: 13px; } .seo-context-review-card small, .market-context-gate small { color: var(--muted); font-size: 12px; font-weight: 740; line-height: 1.38; } .seo-context-review-metrics { display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 160px; } .seo-context-review-metrics span { display: inline-flex; min-height: 22px; align-items: center; padding: 0 8px; background: rgba(46, 90, 103, 0.08); border: 1px solid rgba(46, 90, 103, 0.12); border-radius: 999px; color: #2e5a67; font-size: 11px; font-weight: 900; text-transform: none; white-space: nowrap; } .model-provider-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 0.38fr) auto; gap: 10px; align-items: center; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .model-provider-panel.not_configured, .model-provider-panel.planned, .model-provider-panel.missing { border-color: rgba(178, 119, 31, 0.26); background: rgba(178, 119, 31, 0.045); } .model-provider-panel > div:first-child, .model-provider-run { display: grid; gap: 4px; min-width: 0; } .model-provider-panel span { color: #2e5a67; font-size: 11px; font-weight: 900; text-transform: uppercase; } .model-provider-panel strong { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 13px; } .model-provider-panel small { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 12px; font-weight: 740; line-height: 1.38; } .model-provider-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } @media (max-width: 980px) { .model-provider-panel { grid-template-columns: 1fr; } .model-provider-actions { justify-content: flex-start; } } .semantic-review-card.ok { border-color: rgba(47, 107, 79, 0.18); } .semantic-review-card.warning { border-color: rgba(155, 111, 39, 0.22); } .semantic-review-card.problem { border-color: rgba(139, 47, 47, 0.22); } .semantic-review-card span, .semantic-review-next span, .semantic-dev-details summary > span { width: fit-content; padding: 3px 7px; color: #2e5a67; background: rgba(46, 90, 103, 0.08); border: 1px solid rgba(24, 32, 29, 0.1); border-radius: 999px; font-size: 10px; font-weight: 900; text-transform: uppercase; } .semantic-review-card strong, .semantic-review-next strong, .semantic-dev-details summary strong { min-width: 0; color: #18201d; font-size: 13px; overflow-wrap: anywhere; } .semantic-review-card small, .semantic-review-next small, .semantic-dev-details summary small { min-width: 0; color: #6d7c76; font-size: 12px; font-weight: 740; line-height: 1.38; overflow-wrap: anywhere; } .semantic-review-next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 0.9fr); gap: 10px; align-items: center; padding: 10px; background: #fff; border: 1px solid rgba(24, 32, 29, 0.1); border-radius: 8px; } .semantic-review-next > div { display: grid; gap: 5px; min-width: 0; } .semantic-review-next > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .semantic-dev-details { display: grid; gap: 10px; padding: 12px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(24, 32, 29, 0.1); border-radius: 18px; } .semantic-dev-details summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 5px 10px; align-items: center; cursor: pointer; list-style: none; } .semantic-dev-details summary::after { content: "+"; display: grid; width: 24px; height: 24px; place-items: center; color: var(--muted); background: rgba(24, 32, 29, 0.06); border-radius: 999px; font-size: 15px; font-weight: 900; line-height: 1; } .semantic-dev-details[open] summary::after { content: "-"; } .semantic-dev-details summary::-webkit-details-marker { display: none; } .semantic-dev-details summary small { grid-column: 2; } .semantic-dev-details-body { display: grid; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(24, 32, 29, 0.08); } .semantic-score-grid { display: grid; grid-template-columns: minmax(120px, 0.28fr) minmax(0, 1fr); gap: 10px; } .semantic-score-main { display: grid; gap: 2px; min-height: 96px; padding: 12px; align-content: center; background: #18201d; border-radius: 7px; color: #fffdf7; } .semantic-score-main span { font-size: 34px; font-weight: 900; line-height: 1; } .semantic-score-main strong { font-size: 13px; } .semantic-score-main small { color: rgba(255, 253, 247, 0.68); font-size: 11px; } .semantic-metric-row { flex-wrap: wrap; align-content: center; justify-content: flex-start; padding: 10px; background: rgba(255, 253, 247, 0.78); border: 1px solid rgba(24, 32, 29, 0.08); border-radius: 7px; } .semantic-metric-row span, .semantic-gap-row span, .semantic-cluster div span, .semantic-cluster div em, .semantic-warning-row span, .semantic-seeds span { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 900; } .semantic-metric-row span { color: #2e5a67; background: rgba(46, 90, 103, 0.1); } .semantic-metric-row span.ok, .semantic-clean { color: #2e6f64; } .semantic-metric-row span.danger { color: #8f2d1f; background: rgba(143, 45, 31, 0.1); } .semantic-scope-grid { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(4, auto); gap: 8px; align-items: center; padding: 10px; background: rgba(255, 253, 247, 0.72); border: 1px solid rgba(24, 32, 29, 0.08); border-radius: 7px; } .semantic-scope-grid > div { display: grid; gap: 2px; } .semantic-scope-grid strong, .semantic-style-panel strong, .semantic-action-list strong { color: #18201d; font-size: 13px; } .semantic-scope-grid small, .semantic-style-panel small, .semantic-action-list p { color: #6d7c76; font-size: 12px; font-weight: 750; } .semantic-scope-grid > span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px; color: #2e5a67; background: rgba(46, 90, 103, 0.1); border-radius: 999px; font-size: 11px; font-weight: 900; } .semantic-quality-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; } .semantic-chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .semantic-chip-list span { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; color: #2e5a67; background: rgba(46, 90, 103, 0.1); border-radius: 999px; font-size: 11px; font-weight: 900; } .semantic-quality { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 10px; background: rgba(255, 253, 247, 0.72); border: 1px solid rgba(24, 32, 29, 0.08); border-radius: 7px; } .semantic-quality > span { display: inline-flex; min-height: 24px; align-items: center; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 900; } .semantic-quality.ok > span { color: #2e6f64; background: rgba(46, 111, 100, 0.1); } .semantic-quality.warning > span { color: #8a6424; background: rgba(155, 111, 39, 0.12); } .semantic-quality.problem > span { color: #8f2d1f; background: rgba(143, 45, 31, 0.1); } .semantic-quality div, .semantic-style-panel { display: grid; gap: 4px; } .semantic-quality strong { color: #18201d; font-size: 13px; } .semantic-verdict-panel { display: grid; gap: 10px; padding: 12px; background: rgba(255, 253, 247, 0.78); border: 1px solid rgba(46, 90, 103, 0.16); border-radius: 7px; } .semantic-verdict-panel.low { border-color: rgba(143, 45, 31, 0.24); } .semantic-verdict-panel.medium { border-color: rgba(155, 111, 39, 0.24); } .semantic-verdict-panel.high { border-color: rgba(46, 111, 100, 0.24); } .semantic-verdict-panel.muted { color: #6d7c76; background: rgba(24, 32, 29, 0.04); } .semantic-verdict-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .semantic-verdict-heading > div { display: grid; gap: 4px; } .semantic-verdict-heading > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; } .semantic-verdict-panel strong, .semantic-verdict-heading strong, .semantic-verdict-columns strong, .semantic-verdict-clusters > strong, .semantic-verdict-next strong { color: #18201d; font-size: 13px; } .semantic-verdict-panel p { margin: 0; color: #3f4b45; font-size: 12px; font-weight: 800; line-height: 1.45; } .semantic-verdict-panel small, .semantic-verdict-columns small, .semantic-verdict-risk-list small, .semantic-verdict-clusters small, .semantic-verdict-next small { color: #6d7c76; font-size: 12px; font-weight: 750; line-height: 1.35; } .semantic-verdict-heading span, .semantic-verdict-risk-list span, .semantic-verdict-clusters span { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 900; } .semantic-verdict-heading span { color: #8a6424; background: rgba(155, 111, 39, 0.12); } .semantic-verdict-panel.low .semantic-verdict-heading span { color: #8f2d1f; background: rgba(143, 45, 31, 0.1); } .semantic-verdict-panel.high .semantic-verdict-heading span { color: #2e6f64; background: rgba(46, 111, 100, 0.1); } .semantic-verdict-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; } .semantic-verdict-columns section { display: grid; gap: 6px; align-content: start; padding: 10px; background: rgba(255, 255, 255, 0.54); border: 1px solid rgba(24, 32, 29, 0.07); border-radius: 7px; } .semantic-verdict-risk-list, .semantic-verdict-clusters { display: grid; gap: 7px; } .semantic-verdict-risk-list article, .semantic-verdict-clusters > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 8px; align-items: start; padding: 8px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(24, 32, 29, 0.07); border-radius: 7px; } .semantic-verdict-risk-list article > div, .semantic-verdict-clusters > div > div, .semantic-verdict-next { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; } .semantic-verdict-risk-list span { color: #8a6424; background: rgba(155, 111, 39, 0.12); } .semantic-verdict-risk-list article.problem span { color: #8f2d1f; background: rgba(143, 45, 31, 0.1); } .semantic-verdict-clusters span { color: #2e5a67; background: rgba(46, 90, 103, 0.1); } .semantic-verdict-next { padding: 9px; background: rgba(46, 90, 103, 0.07); border-radius: 7px; } .semantic-warning-list, .semantic-gap-panel, .semantic-seeds, .semantic-ai-contract, .semantic-style-panel, .semantic-action-list { display: grid; gap: 8px; padding: 10px; background: rgba(255, 253, 247, 0.72); border: 1px solid rgba(24, 32, 29, 0.08); border-radius: 7px; } .semantic-warning-row { display: grid; gap: 3px; padding: 8px; background: rgba(143, 45, 31, 0.08); border: 1px solid rgba(143, 45, 31, 0.14); border-radius: 7px; } .semantic-warning-row span { justify-self: start; color: #8f2d1f; background: rgba(143, 45, 31, 0.12); } .semantic-warning-row p { margin: 0; color: #18201d; font-size: 12px; font-weight: 850; } .semantic-clean { justify-content: flex-start; min-height: 42px; padding: 0 10px; background: rgba(46, 111, 100, 0.08); border: 1px solid rgba(46, 111, 100, 0.16); border-radius: 7px; font-size: 12px; font-weight: 850; } .market-panel { display: grid; gap: 10px; padding: 12px; background: #fff !important; border: 1px solid var(--line) !important; border-radius: 8px; } .market-heading, .market-state-card, .market-wordstat-card, .market-provider, .market-normalization-card { display: flex; justify-content: space-between; gap: 10px; } .market-heading, .market-normalization-card { align-items: flex-start; } .stage-decision-frame { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(180px, 0.7fr); gap: 10px; align-items: center; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .stage-decision-frame > span { justify-self: start; padding: 4px 8px; color: #2e5a67; background: rgba(46, 90, 103, 0.08); border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 900; white-space: nowrap; } .stage-decision-frame div { display: grid; gap: 4px; min-width: 0; } .stage-decision-frame strong, .stage-decision-frame small, .stage-decision-frame p { min-width: 0; margin: 0; overflow-wrap: anywhere; } .stage-decision-frame strong { color: var(--ink); font-size: 13px; } .stage-decision-frame small, .stage-decision-frame p { color: var(--muted); font-size: 12px; font-weight: 740; line-height: 1.38; } @media (max-width: 760px) { .stage-decision-frame { grid-template-columns: 1fr; align-items: start; } } .market-heading > div, .market-state-card > div, .market-wordstat-card > div, .market-provider > div, .market-normalization-card > div:first-child, .market-columns section, .market-next-actions { display: grid; gap: 5px; min-width: 0; } .market-heading strong, .market-state-card strong, .market-wordstat-card strong, .market-provider strong, .market-normalization-card strong, .market-columns strong, .market-next-actions strong { color: var(--ink); font-size: 13px; } .market-heading small, .market-state-card small, .market-wordstat-card small, .market-wordstat-card p, .market-provider small, .market-provider p, .market-normalization-card small, .market-normalization-card p, .market-columns small, .market-next-actions p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 740; line-height: 1.38; } .stage-6 .scan-summary { gap: 10px; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .stage-6 .scan-summary::after { content: none !important; } .stage-6 .market-heading { align-items: center; min-height: 74px; padding: 18px 20px !important; border-radius: 18px !important; } .stage-6 .market-heading > div { gap: 5px; } .stage-6 .market-heading strong { font-size: 17px; line-height: 1.18; } .stage-6 .market-heading small { max-width: 840px; font-size: 13px; line-height: 1.38; } .stage-6 .market-heading > svg { flex: 0 0 auto; width: 22px; height: 22px; padding: 8px; color: #1f5f43; background: rgba(47, 107, 79, 0.08); border: 1px solid rgba(47, 107, 79, 0.14); border-radius: 999px; box-sizing: content-box; } .market-state-card { align-items: center; padding: 10px; background: #fafafa; border: 1px solid var(--line); border-radius: 8px; } .market-normalization-card { flex-wrap: wrap; padding: 10px; background: rgba(255, 255, 255, 0.88); border: 1px solid var(--line); border-radius: 8px; } .market-normalization-card > div:first-child { flex: 1 1 360px; } .market-normalization-card > p { flex-basis: 100%; } .market-normalization-card > div:first-child > span { justify-self: start; min-height: 22px; display: inline-flex; align-items: center; padding: 0 9px; color: #2e5a67; background: rgba(46, 90, 103, 0.08); border: 1px solid rgba(46, 90, 103, 0.14); border-radius: 999px; font-size: 11px; font-weight: 900; } .market-normalization-stats { display: flex; flex-wrap: wrap; gap: 6px; } .market-normalization-stats span { min-height: 24px; display: inline-flex; align-items: center; padding: 0 8px; color: #2e4960; background: rgba(46, 73, 96, 0.06); border: 1px solid rgba(46, 73, 96, 0.08); border-radius: 999px; font-size: 11px; font-weight: 900; white-space: nowrap; } .market-normalization-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: min(560px, 48%); min-width: 360px; } .market-normalization-groups article { display: grid; gap: 4px; min-width: 0; padding: 9px; background: rgba(24, 32, 29, 0.035); border: 1px solid rgba(24, 32, 29, 0.06); border-radius: 8px; } .market-normalization-groups span { justify-self: start; min-height: 18px; display: inline-flex; align-items: center; padding: 0 7px; color: var(--muted); background: rgba(24, 32, 29, 0.055); border-radius: 999px; font-size: 10px; font-weight: 860; } .market-normalization-review { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .stage-content-body { display: grid; gap: 10px; min-width: 0; } .anchor-review-card, .keyword-cleaning-card { align-items: center; } .anchor-review-card > button, .keyword-cleaning-card > button { flex: 0 0 auto; } .keyword-stage-section { display: grid; gap: 12px; min-width: 0; padding: 1rem; background: #fff; border: 0; border-radius: var(--launcher-radius-card, 1.35rem); box-shadow: 0 14px 42px rgba(24, 32, 29, 0.055); } .keyword-stage-heading { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .keyword-stage-heading > svg { flex: 0 0 auto; margin-top: 2px; color: var(--ink); } .keyword-stage-heading > div { display: grid; gap: 5px; min-width: 0; } .keyword-stage-heading strong { min-width: 0; color: var(--ink); font-size: 18px; font-weight: 920; line-height: 1.08; overflow-wrap: anywhere; } .keyword-stage-heading small { min-width: 0; color: var(--muted); font-size: 12px; font-weight: 740; line-height: 1.38; overflow-wrap: anywhere; } .anchor-review-workspace { background: #fff; } .anchor-review-row > div:first-child span { justify-self: start; min-height: 22px; display: inline-flex; align-items: center; padding: 0 9px; color: #2e5a67; background: rgba(46, 90, 103, 0.08); border: 1px solid rgba(46, 90, 103, 0.14); border-radius: 999px; font-size: 11px; font-weight: 900; } .anchor-review-row strong, .anchor-review-empty strong { min-width: 0; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; } .anchor-review-row small, .anchor-review-row p, .anchor-review-empty small { min-width: 0; margin: 0; color: var(--muted); font-size: 12px; font-weight: 740; line-height: 1.38; overflow-wrap: anywhere; } .keyword-curation-board { display: grid; gap: 12px; min-width: 0; padding: 1rem; background: #fff; border: 0; border-radius: var(--launcher-radius-card, 1.35rem); box-shadow: 0 14px 42px rgba(24, 32, 29, 0.055); } .keyword-curation-board-head, .keyword-curation-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; } .keyword-curation-board-head > .keyword-stage-heading { flex: 1 1 auto; } .keyword-curation-card > span { justify-self: start; min-height: 22px; display: inline-flex; align-items: center; padding: 0 9px; color: #2e5a67; background: rgba(46, 90, 103, 0.08); border: 1px solid rgba(46, 90, 103, 0.14); border-radius: 999px; font-size: 11px; font-weight: 900; } .keyword-curation-column-head strong, .keyword-curation-card strong { min-width: 0; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; } .keyword-curation-column-head small, .keyword-curation-card small, .keyword-curation-card p, .keyword-curation-footer small { min-width: 0; margin: 0; color: var(--muted); font-size: 12px; font-weight: 740; line-height: 1.38; overflow-wrap: anywhere; } .keyword-curation-columns { display: grid; grid-auto-columns: minmax(280px, 1fr); grid-auto-flow: column; gap: 8px; min-width: 0; overflow-x: auto; padding-bottom: 2px; } .keyword-curation-column { display: grid; grid-template-rows: auto minmax(180px, 1fr); gap: 8px; min-width: 280px; max-height: min(640px, 58vh); padding: 8px; background: rgba(24, 32, 29, 0.035); border: 1px solid rgba(24, 32, 29, 0.07); border-radius: 8px; transition: background-color 140ms ease, border-color 140ms ease; } .keyword-curation-column.over { background: rgba(46, 90, 103, 0.07); border-color: rgba(46, 90, 103, 0.22); } .keyword-curation-column-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; } .keyword-curation-column-head > div { display: grid; gap: 4px; min-width: 0; } .keyword-curation-column-head > span { flex: 0 0 auto; min-width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(24, 32, 29, 0.08); border-radius: 999px; font-size: 12px; font-weight: 900; } .keyword-curation-stack { display: grid; align-content: start; gap: 8px; min-width: 0; overflow: auto; padding-right: 2px; } .keyword-curation-draggable { cursor: grab; touch-action: none; user-select: none; } .keyword-curation-draggable.dragging { cursor: grabbing; opacity: 0.28; position: relative; z-index: 3; } .keyword-curation-card { display: grid; gap: 5px; min-width: 0; padding: 10px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(24, 32, 29, 0.08); border-radius: 8px; box-shadow: 0 10px 24px rgba(24, 32, 29, 0.08); user-select: none; } .keyword-curation-drag-preview { position: fixed; left: var(--keyword-drag-x); top: var(--keyword-drag-y); width: 260px; pointer-events: none; transform: translate(-50%, -24px) rotate(-0.6deg); z-index: 9999; } .keyword-curation-drag-preview .keyword-curation-card { background: #fff; border-color: rgba(232, 62, 140, 0.28); box-shadow: 0 24px 54px rgba(24, 32, 29, 0.22); } .keyword-curation-empty { min-height: 88px; display: grid; place-items: center; padding: 10px; color: var(--muted); background: rgba(255, 255, 255, 0.52); border: 1px dashed rgba(24, 32, 29, 0.14); border-radius: 8px; font-size: 12px; font-weight: 820; text-align: center; } .keyword-curation-footer { align-items: center; padding-top: 2px; } .anchor-review-filterbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .anchor-review-filterbar button { min-width: 0; min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; color: var(--muted); background: rgba(24, 32, 29, 0.035); border: 1px solid rgba(24, 32, 29, 0.07); border-radius: 999px; font: inherit; cursor: pointer; } .anchor-review-filterbar button.active { color: #fff; background: #202124; border-color: #202124; } .anchor-review-filterbar button span { min-width: 0; overflow: hidden; font-size: 12px; font-weight: 880; text-overflow: ellipsis; white-space: nowrap; } .anchor-review-filterbar button strong { flex: 0 0 auto; color: inherit; font-size: 12px; font-weight: 900; } .anchor-review-workspace-list { display: grid; gap: 8px; max-height: min(560px, 52vh); min-width: 0; overflow: auto; padding-right: 2px; } .anchor-review-row { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(180px, 0.4fr) auto; gap: 10px; align-items: center; min-width: 0; padding: 10px; background: rgba(24, 32, 29, 0.032); border: 1px solid rgba(24, 32, 29, 0.055); border-left: 4px solid rgba(46, 90, 103, 0.18); border-radius: 8px; } .anchor-review-row.approved { border-left-color: #2f6b4f; } .anchor-review-row.disabled { border-left-color: #9b3b3b; opacity: 0.72; } .anchor-review-row.pending { border-left-color: #b27a16; } .anchor-review-row > div:first-child { display: grid; gap: 4px; min-width: 0; } .anchor-review-row-meta, .anchor-review-row-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } .anchor-review-row-meta span { min-height: 24px; display: inline-flex; align-items: center; max-width: 100%; padding: 0 8px; color: #2e4960; background: rgba(46, 73, 96, 0.06); border: 1px solid rgba(46, 73, 96, 0.08); border-radius: 999px; font-size: 11px; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .anchor-review-row-actions { justify-content: flex-end; } .anchor-review-row-actions .tiny-action { flex: 0 0 auto; width: 36px; min-width: 36px; height: 36px; min-height: 36px; justify-content: center; padding: 0; border-radius: 999px; white-space: nowrap; } .anchor-review-row-actions .anchor-action-button.active, .anchor-review-row-actions .anchor-action-button.active:disabled { color: #fff; background: #e83e8c; border-color: #e83e8c; opacity: 1 !important; box-shadow: 0 12px 28px rgba(232, 62, 140, 0.22); } .anchor-review-empty { display: grid; gap: 4px; min-width: 0; padding: 16px; background: rgba(24, 32, 29, 0.032); border: 1px dashed rgba(24, 32, 29, 0.14); border-radius: 8px; } .keyword-cleaning-review { grid-template-columns: repeat(4, minmax(0, 1fr)); } .market-normalization-review-queue { display: grid; gap: 8px; min-width: 0; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .market-normalization-review-queue > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .market-normalization-review-queue > div:first-child span { min-width: 0; color: var(--ink); font-size: 12px; font-weight: 900; overflow-wrap: anywhere; } .market-normalization-review-queue > div:first-child strong { min-width: 28px; color: #2e5a67; text-align: right; } .market-normalization-review-queue > small, .market-normalization-review-queue p small { color: var(--muted); font-size: 12px; font-weight: 720; line-height: 1.35; } .market-normalization-review-queue > div:last-child { display: grid; gap: 6px; } .market-normalization-review-queue p { display: grid; gap: 3px; min-width: 0; margin: 0; padding: 8px; background: rgba(24, 32, 29, 0.032); border: 1px solid rgba(24, 32, 29, 0.055); border-radius: 8px; } .market-normalization-review-queue p strong { min-width: 0; color: var(--ink); font-size: 12px; overflow-wrap: anywhere; } .market-wordstat-card { align-items: center; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .market-decision-board { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr); gap: 10px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .market-decision-verdict { display: grid; align-content: start; gap: 6px; min-width: 0; } .market-decision-verdict > span { justify-self: start; min-height: 24px; display: inline-flex; align-items: center; padding: 0 9px; color: #2e5a67; background: rgba(46, 90, 103, 0.08); border: 1px solid rgba(46, 90, 103, 0.14); border-radius: 999px; font-size: 11px; font-weight: 900; } .market-decision-board.problem .market-decision-verdict > span { color: #8b2f2f; background: rgba(139, 47, 47, 0.07); border-color: rgba(139, 47, 47, 0.12); } .market-decision-board.warning .market-decision-verdict > span { color: #70521f; background: rgba(112, 82, 31, 0.08); border-color: rgba(112, 82, 31, 0.12); } .market-decision-board.good .market-decision-verdict > span { color: #2f6b4f; background: rgba(47, 107, 79, 0.07); border-color: rgba(47, 107, 79, 0.12); } .market-decision-verdict strong { min-width: 0; color: var(--ink); font-size: 16px; line-height: 1.22; overflow-wrap: anywhere; } .market-decision-verdict p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 720; line-height: 1.42; overflow-wrap: anywhere; } .market-decision-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; min-width: 0; } .market-decision-metrics article { display: grid; gap: 4px; min-width: 0; padding: 9px; background: rgba(24, 32, 29, 0.032); border: 1px solid rgba(24, 32, 29, 0.055); border-radius: 12px; } .market-decision-metrics article span, .market-decision-metrics article small { min-width: 0; color: var(--muted); font-size: 11px; font-weight: 760; overflow-wrap: anywhere; } .market-decision-metrics article strong { color: var(--ink); font-size: 20px; line-height: 1; } .market-decision-metrics article.tone-good strong { color: #2f6b4f; } .market-decision-metrics article.tone-warning strong { color: #9a681b; } .market-decision-metrics article.tone-problem strong { color: #8b2f2f; } .market-wordstat-card > div:last-of-type { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .market-wordstat-card > div:last-of-type span { min-height: 24px; padding: 4px 8px; color: #2e4960; background: rgba(46, 73, 96, 0.06); border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 900; } .market-wordstat-card p { flex-basis: 100%; margin: 0; color: #8b2f2f; } .market-state-card > div > span, .market-provider > span, .market-seed-list span, .market-brief-list span, .market-next-actions span { justify-self: start; padding: 4px 8px; color: #70521f; background: rgba(112, 82, 31, 0.07); border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 900; white-space: nowrap; } .market-state-card.not_collected > div > span, .market-state-card.partial_ready > div > span, .market-provider.connected > span, .market-provider.connected_partial > span, .market-seed-list span.collected, .market-seed-list span.collected_related_only, .market-brief-list span.collected, .market-seed-list span.ready_for_collection, .market-brief-list span.ready_for_collection { color: #2f6b4f; background: rgba(47, 107, 79, 0.06); } .market-seed-list span.collected_no_signal { color: #6d7c76; background: rgba(109, 124, 118, 0.08); } .market-state-card.not_configured > div > span, .market-provider.not_configured > span, .market-provider.not_implemented > span, .market-seed-list span.collection_failed, .market-brief-list span.collection_failed, .market-seed-list span.not_configured, .market-brief-list span.not_configured { color: #8b2f2f; background: rgba(139, 47, 47, 0.06); } .market-state-card p { max-width: 420px; margin: 0; color: var(--muted); font-size: 12px; font-weight: 780; line-height: 1.4; } .market-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .market-provider { align-items: flex-start; padding: 9px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .market-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .market-columns section, .market-next-actions { align-content: start; padding: 10px; background: #fafafa; border: 1px solid var(--line); border-radius: 8px; } .market-seed-list, .market-brief-list { display: grid; gap: 6px; } .market-seed-list div, .market-brief-list div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: start; padding: 7px; background: #fff; border: 1px solid var(--line); border-radius: 7px; } .market-seed-list strong, .market-brief-list strong { min-width: 0; overflow-wrap: anywhere; } .market-seed-list small, .market-brief-list small { grid-column: 2; overflow-wrap: anywhere; } .keyword-plan-board .market-decision-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } .keyword-plan-board .market-decision-verdict small { margin: 0; color: var(--muted); font-size: 11px; font-weight: 780; line-height: 1.35; overflow-wrap: anywhere; } .keyword-page-plan { display: grid; gap: 10px; } .keyword-page-plan-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .keyword-page-plan-heading > div { display: grid; gap: 4px; min-width: 0; } .keyword-page-plan-heading strong, .keyword-page-plan-card strong, .keyword-review-queue strong, .keyword-next-actions strong { min-width: 0; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; } .keyword-page-plan-heading small, .keyword-page-plan-card small, .keyword-page-plan-card p, .keyword-review-queue small, .keyword-next-actions small, .keyword-next-action-list p { min-width: 0; margin: 0; color: var(--muted); font-size: 12px; font-weight: 740; line-height: 1.38; overflow-wrap: anywhere; } .keyword-page-plan-heading > span { flex: 0 0 auto; min-height: 24px; display: inline-flex; align-items: center; padding: 0 9px; color: #2e5a67; background: rgba(46, 90, 103, 0.08); border-radius: 999px; font-size: 11px; font-weight: 900; white-space: nowrap; } .keyword-page-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .keyword-page-plan-card { display: grid; align-content: start; gap: 9px; min-width: 0; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .keyword-page-plan-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; } .keyword-page-plan-head > span, .keyword-page-plan-stats span, .keyword-page-phrase-list span { justify-self: start; min-height: 22px; display: inline-flex; align-items: center; padding: 0 8px; color: var(--muted); background: rgba(24, 32, 29, 0.06); border-radius: 999px; font-size: 11px; font-weight: 900; line-height: 1; white-space: nowrap; } .keyword-page-plan-card.ready .keyword-page-plan-head > span, .keyword-page-phrase-list .safe span { color: #2f6b4f; background: rgba(47, 107, 79, 0.08); } .keyword-page-plan-card.review .keyword-page-plan-head > span, .keyword-page-phrase-list .review span { color: #70521f; background: rgba(112, 82, 31, 0.09); } .keyword-page-plan-card.blocked .keyword-page-plan-head > span { color: #8b2f2f; background: rgba(139, 47, 47, 0.07); } .keyword-page-plan-head > div { display: grid; gap: 4px; min-width: 0; } .keyword-page-plan-stats { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 6px; } .keyword-page-plan-stats span { flex: 0 0 auto; height: 22px; } .keyword-page-phrase-list { display: grid; gap: 6px; } .keyword-page-phrase-list > div, .keyword-raw-grid > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: start; min-width: 0; padding: 9px; background: rgba(24, 32, 29, 0.032); border: 1px solid rgba(24, 32, 29, 0.055); border-radius: 8px; } .keyword-page-phrase-list strong, .keyword-page-phrase-list small, .keyword-raw-grid strong, .keyword-raw-grid small { min-width: 0; overflow-wrap: anywhere; } .keyword-page-phrase-list small, .keyword-raw-grid small { grid-column: 2; } .keyword-plan-support-grid { align-items: start; } .keyword-review-queue, .keyword-next-actions { min-width: 0; } .keyword-next-action-list { display: grid; gap: 7px; } .keyword-next-action-list p { padding: 9px; background: rgba(24, 32, 29, 0.032); border: 1px solid rgba(24, 32, 29, 0.055); border-radius: 8px; } .keyword-raw-details { margin-top: 0; } .keyword-raw-grid { display: grid; gap: 6px; } .keyword-raw-grid span { justify-self: start; min-height: 22px; display: inline-flex; align-items: center; padding: 0 8px; color: var(--muted); background: rgba(24, 32, 29, 0.06); border-radius: 999px; font-size: 11px; font-weight: 900; line-height: 1; white-space: nowrap; } .materialization-target-list { display: grid; gap: 8px; } .materialization-target { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px; background: #fff; border: 1px solid var(--line); border-radius: 7px; } .materialization-target > div:first-child { display: grid; gap: 4px; min-width: 0; } .materialization-target span { width: fit-content; padding: 2px 7px; color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; background: #f5f5f5; border: 1px solid var(--line); border-radius: 999px; } .materialization-target strong, .materialization-target small { min-width: 0; overflow-wrap: anywhere; } .materialization-target-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 360px; } .market-wordstat-results > div { display: grid; gap: 5px; } .market-wordstat-results p { display: grid; grid-template-columns: minmax(72px, auto) minmax(0, 1fr); gap: 8px; margin: 0; } .market-wordstat-results p span { color: var(--ink); font-weight: 900; } .seo-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; } .seo-chart-grid-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } .seo-chart-grid-market { grid-template-columns: repeat(2, minmax(0, 1fr)); } .seo-chart-grid-keyword-cleaning { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .seo-chart { display: grid; gap: 10px; min-width: 0; padding: 10px; background: rgba(255, 255, 255, 0.86); border: 1px solid var(--line); border-radius: 8px; } .seo-bklit-chart { --background: #fff; --foreground: #202124; --muted-foreground: #686d70; --border: rgba(24, 32, 29, 0.12); --color-muted: rgba(24, 32, 29, 0.045); --chart-background: rgba(255, 255, 255, 0); --chart-foreground: #202124; --chart-foreground-muted: #68757a; --chart-label: #697174; --chart-grid: rgba(24, 32, 29, 0.14); --chart-1: #2f6b4f; --chart-2: #b9821f; --chart-3: #536879; --chart-4: #8b2f2f; --chart-5: #6f5d8f; --chart-line-primary: #2f6b4f; --chart-line-secondary: #536879; --color-red-500: #8b2f2f; --color-emerald-500: #2f6b4f; } .seo-bklit-native { min-width: 0; color: var(--foreground); } .seo-bklit-native svg { max-width: 100%; } .seo-bklit-native .relative, .seo-bklit-chart .relative { position: relative; } .seo-bklit-native .absolute, .seo-bklit-chart .absolute { position: absolute; } .seo-bklit-native .inset-0, .seo-bklit-chart .inset-0 { inset: 0; } .seo-bklit-native .flex, .seo-bklit-chart .flex { display: flex; } .seo-bklit-native .grid, .seo-bklit-chart .grid { display: grid; } .seo-bklit-native .flex-row, .seo-bklit-chart .flex-row { flex-direction: row; } .seo-bklit-native .flex-col, .seo-bklit-chart .flex-col { flex-direction: column; } .seo-bklit-native .flex-1, .seo-bklit-chart .flex-1 { flex: 1 1 0%; } .seo-bklit-native .shrink-0, .seo-bklit-chart .shrink-0 { flex-shrink: 0; } .seo-bklit-native .items-center, .seo-bklit-chart .items-center { align-items: center; } .seo-bklit-native .items-start, .seo-bklit-chart .items-start { align-items: flex-start; } .seo-bklit-native .items-end, .seo-bklit-chart .items-end { align-items: flex-end; } .seo-bklit-native .justify-center, .seo-bklit-chart .justify-center { justify-content: center; } .seo-bklit-native .justify-start, .seo-bklit-chart .justify-start { justify-content: flex-start; } .seo-bklit-native .justify-end, .seo-bklit-chart .justify-end { justify-content: flex-end; } .seo-bklit-native .w-full, .seo-bklit-chart .w-full { width: 100%; } .seo-bklit-native .h-full, .seo-bklit-chart .h-full { height: 100%; } .seo-bklit-native .size-full, .seo-bklit-chart .size-full { width: 100%; height: 100%; } .seo-bklit-native .min-w-0, .seo-bklit-chart .min-w-0 { min-width: 0; } .seo-bklit-native .min-h-0, .seo-bklit-chart .min-h-0 { min-height: 0; } .seo-bklit-native .overflow-visible, .seo-bklit-chart .overflow-visible { overflow: visible; } .seo-bklit-native .overflow-hidden, .seo-bklit-chart .overflow-hidden { overflow: hidden; } .seo-bklit-native .pointer-events-none, .seo-bklit-chart .pointer-events-none { pointer-events: none; } .seo-bklit-native .cursor-pointer, .seo-bklit-chart .cursor-pointer { cursor: pointer; } .seo-bklit-native .select-none, .seo-bklit-chart .select-none { user-select: none; } .seo-bklit-native .whitespace-nowrap, .seo-bklit-chart .whitespace-nowrap { white-space: nowrap; } .seo-bklit-native .text-center, .seo-bklit-chart .text-center { text-align: center; } .seo-bklit-native .font-bold, .seo-bklit-chart .font-bold { font-weight: 900; } .seo-bklit-native .font-semibold, .seo-bklit-chart .font-semibold { font-weight: 820; } .seo-bklit-native .font-medium, .seo-bklit-chart .font-medium { font-weight: 720; } .seo-bklit-native .tabular-nums, .seo-bklit-chart .tabular-nums { font-variant-numeric: tabular-nums; } .seo-bklit-native .leading-none, .seo-bklit-chart .leading-none { line-height: 1; } .seo-bklit-native .leading-tight, .seo-bklit-chart .leading-tight { line-height: 1.15; } .seo-bklit-native .truncate, .seo-bklit-chart .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seo-bklit-native .text-foreground, .seo-bklit-chart .text-foreground { color: var(--foreground); } .seo-bklit-native .text-background, .seo-bklit-chart .text-background { color: var(--background); } .seo-bklit-native .text-muted-foreground, .seo-bklit-chart .text-muted-foreground, .seo-bklit-native .text-chart-label, .seo-bklit-chart .text-chart-label { color: var(--chart-label); } .seo-bklit-native .bg-foreground, .seo-bklit-chart .bg-foreground { background: var(--foreground); } .seo-bklit-native .rounded-full, .seo-bklit-chart .rounded-full { border-radius: 999px; } .seo-bklit-native .shadow-sm, .seo-bklit-chart .shadow-sm { box-shadow: 0 4px 10px rgba(24, 32, 29, 0.1); } .seo-bklit-native .text-xs, .seo-bklit-chart .text-xs { font-size: 10px; line-height: 1.2; } .seo-bklit-native .text-sm, .seo-bklit-chart .text-sm { font-size: 11px; line-height: 1.2; } .seo-bklit-native .text-2xl, .seo-bklit-chart .text-2xl { font-size: 20px; line-height: 1; } .seo-bklit-native .px-3, .seo-bklit-chart .px-3 { padding-right: 10px; padding-left: 10px; } .seo-bklit-native .py-1, .seo-bklit-chart .py-1 { padding-top: 3px; padding-bottom: 3px; } .seo-bklit-native .pb-1, .seo-bklit-chart .pb-1 { padding-bottom: 4px; } .seo-bklit-native .pt-1, .seo-bklit-chart .pt-1 { padding-top: 4px; } .seo-bklit-native .pr-2, .seo-bklit-chart .pr-2 { padding-right: 8px; } .seo-bklit-native .pl-2, .seo-bklit-chart .pl-2 { padding-left: 8px; } .seo-bklit-native .mt-0\.5, .seo-bklit-chart .mt-0\.5 { margin-top: 2px; } .seo-bklit-native .mb-2, .seo-bklit-chart .mb-2 { margin-bottom: 8px; } .seo-bklit-native .h-\[16\%\], .seo-bklit-chart .h-\[16\%\] { height: 16%; } .seo-bklit-native .w-\[16\%\], .seo-bklit-chart .w-\[16\%\] { width: 16%; } .seo-bklit-funnel-native { min-height: 158px; padding-top: 8px; padding-right: 22px; padding-left: 22px; } .seo-bklit-funnel-native > div { min-height: 158px; } .seo-bklit-ring-native { display: flex; justify-content: center; } .seo-bklit-radar-native { display: flex; justify-content: center; min-height: 190px; } .seo-bklit-scatter-native { background: rgba(250, 250, 250, 0.78); } .seo-chart-heading { display: grid; gap: 3px; min-width: 0; } .seo-chart-heading strong { min-width: 0; color: var(--ink); font-size: 13px; line-height: 1.2; overflow-wrap: anywhere; } .seo-chart-heading small, .seo-chart-empty { margin: 0; color: var(--muted); font-size: 12px; font-weight: 720; line-height: 1.35; } .seo-funnel-rows, .seo-bar-rows { display: grid; gap: 7px; min-width: 0; } .seo-funnel-row, .seo-bar-row { display: grid; grid-template-columns: minmax(106px, 0.52fr) minmax(0, 1fr); gap: 4px 8px; align-items: center; min-width: 0; } .seo-funnel-row > div:first-child, .seo-bar-row > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; } .seo-funnel-row span, .seo-bar-row span { min-width: 0; color: #343434; font-size: 11px; font-weight: 840; line-height: 1.2; overflow-wrap: anywhere; } .seo-funnel-row strong, .seo-bar-row strong { color: var(--ink); font-size: 12px; font-weight: 920; line-height: 1.1; white-space: nowrap; } .seo-funnel-row small, .seo-bar-row small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; } .seo-funnel-track, .seo-bar-track { position: relative; height: 10px; overflow: hidden; background: rgba(24, 32, 29, 0.06); border: 1px solid rgba(24, 32, 29, 0.06); border-radius: 999px; } .seo-funnel-track span, .seo-bar-track span { display: block; height: 100%; min-width: 0; background: #7a8080; border-radius: inherit; } .seo-funnel-track span { width: var(--seo-funnel-width); } .seo-bar-track span { width: var(--seo-bar-width); } .seo-funnel-row.tone-good .seo-funnel-track span, .seo-bar-row.tone-good .seo-bar-track span, .seo-scatter-chart circle.tone-good, .seo-scatter-legend .tone-good { background: #2f6b4f; fill: #2f6b4f; } .seo-funnel-row.tone-warning .seo-funnel-track span, .seo-bar-row.tone-warning .seo-bar-track span, .seo-scatter-chart circle.tone-warning, .seo-scatter-legend .tone-warning { background: #b2771f; fill: #b2771f; } .seo-funnel-row.tone-problem .seo-funnel-track span, .seo-bar-row.tone-problem .seo-bar-track span, .seo-scatter-chart circle.tone-problem, .seo-scatter-legend .tone-problem { background: #8b2f2f; fill: #8b2f2f; } .seo-funnel-row.tone-neutral .seo-funnel-track span, .seo-bar-row.tone-neutral .seo-bar-track span, .seo-scatter-chart circle.tone-neutral, .seo-scatter-legend .tone-neutral { background: #536879; fill: #536879; } .seo-shape-funnel-body, .seo-ring-body, .seo-radar-body { display: grid; grid-template-columns: minmax(150px, 0.95fr) minmax(0, 1fr); gap: 10px; align-items: center; min-width: 0; } .seo-shape-funnel-svg, .seo-ring-svg, .seo-radar-svg { display: block; width: 100%; min-width: 0; } .seo-shape-funnel-svg { min-height: 166px; filter: drop-shadow(0 14px 20px rgba(24, 32, 29, 0.08)); } .seo-shape-funnel-band { fill: var(--seo-chart-fill); opacity: 0.9; stroke: rgba(255, 255, 255, 0.82); stroke-width: 2; } .seo-chart-legend, .seo-radar-legend { display: grid; gap: 7px; min-width: 0; } .seo-chart-legend div, .seo-radar-legend div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline; min-width: 0; padding-bottom: 6px; border-bottom: 1px solid rgba(24, 32, 29, 0.07); } .seo-chart-legend div:last-child, .seo-radar-legend div:last-child { padding-bottom: 0; border-bottom: 0; } .seo-chart-legend span, .seo-radar-legend span { display: inline-flex; align-items: center; min-width: 0; color: #343434; font-size: 11px; font-weight: 860; line-height: 1.2; overflow-wrap: anywhere; } .seo-chart-legend i { width: 8px; height: 8px; flex: 0 0 auto; margin-right: 6px; background: var(--seo-chart-fill); border-radius: 999px; } .seo-chart-legend strong, .seo-radar-legend strong { color: var(--ink); font-size: 12px; font-weight: 920; line-height: 1.1; white-space: nowrap; } .seo-chart-legend small, .seo-radar-legend small { grid-column: 1 / -1; color: var(--muted); font-size: 10.5px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; } .seo-ring-svg { max-width: 168px; justify-self: center; } .seo-ring-base { fill: none; stroke: rgba(24, 32, 29, 0.08); stroke-width: 15; } .seo-ring-segment { fill: none; stroke: var(--seo-chart-fill); stroke-linecap: round; stroke-width: 15; } .seo-ring-value { fill: var(--ink); font-size: 19px; font-weight: 930; } .seo-ring-label { fill: var(--muted); font-size: 9px; font-weight: 860; text-transform: uppercase; } .seo-radar-svg { min-height: 180px; overflow: visible; } .seo-radar-ring { fill: none; stroke: rgba(24, 32, 29, 0.1); stroke-width: 0.8; } .seo-radar-axis { stroke: rgba(24, 32, 29, 0.14); stroke-width: 0.8; } .seo-radar-area { fill: rgba(47, 107, 79, 0.18); stroke: #2f6b4f; stroke-linejoin: round; stroke-width: 2.2; } .seo-radar-dot { fill: var(--seo-chart-fill); stroke: #fff; stroke-width: 1.4; } .seo-heatmap-table { display: grid; gap: 6px; min-width: 0; overflow-x: auto; padding-bottom: 2px; } .seo-heatmap-header, .seo-heatmap-row { display: grid; gap: 6px; min-width: 360px; align-items: center; } .seo-heatmap-header span { color: var(--muted); font-size: 10px; font-weight: 880; line-height: 1.1; text-transform: uppercase; } .seo-heatmap-row strong { min-width: 0; color: var(--ink); font-size: 11px; font-weight: 900; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seo-heatmap-row span { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; color: rgba(24, 32, 29, 0.52); background: rgba(24, 32, 29, 0.05); border: 1px solid rgba(24, 32, 29, 0.07); border-radius: 8px; font-size: 11px; font-weight: 900; line-height: 1; } .seo-heatmap-row span.active { color: #193126; background: rgba(47, 107, 79, var(--seo-cell-alpha)); border-color: rgba(47, 107, 79, 0.14); } .seo-heatmap-native-layout { display: grid; gap: 7px; min-width: 0; } .seo-heatmap-native-columns { display: grid; grid-template-columns: 96px repeat(4, minmax(42px, 1fr)); gap: 6px; min-width: 0; } .seo-heatmap-native-columns span { min-width: 0; color: var(--muted); font-size: 10px; font-weight: 880; line-height: 1.1; text-align: center; text-transform: uppercase; } .seo-heatmap-native-main { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px; min-width: 0; } .seo-heatmap-native-rows { display: grid; gap: 6px; min-width: 0; } .seo-heatmap-native-rows strong { min-height: 30px; display: flex; align-items: center; min-width: 0; color: var(--ink); font-size: 11px; font-weight: 900; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seo-bklit-heatmap-native { min-width: 0; } .seo-bklit-heatmap-chart { min-height: 138px; } .seo-bklit-heatmap-chart svg { display: block; } .seo-scatter-frame { position: relative; min-height: 176px; padding: 10px 8px 24px 26px; background: rgba(250, 250, 250, 0.78); border: 1px solid var(--line); border-radius: 8px; } .seo-scatter-frame svg { display: block; width: 100%; height: 136px; overflow: visible; } .seo-scatter-axis { stroke: rgba(24, 32, 29, 0.34); stroke-width: 0.7; } .seo-scatter-guide { stroke: rgba(24, 32, 29, 0.13); stroke-dasharray: 3 3; stroke-width: 0.6; } .seo-scatter-chart circle { opacity: 0.84; stroke: #fff; stroke-width: 1.2; } .seo-scatter-frame > span, .seo-scatter-frame > small { position: absolute; color: var(--muted); font-size: 10px; font-weight: 850; line-height: 1; text-transform: uppercase; } .seo-scatter-frame > span { top: 12px; left: 8px; writing-mode: vertical-rl; transform: rotate(180deg); } .seo-scatter-frame > small { right: 10px; bottom: 8px; } .seo-scatter-legend { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; } .seo-scatter-legend span { display: inline-flex; max-width: 100%; min-height: 22px; align-items: center; padding: 0 7px; color: #fff; border-radius: 999px; font-size: 10px; font-weight: 850; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .semantic-term-cloud { display: flex; flex-wrap: wrap; gap: 6px; } .semantic-term-cloud span { display: inline-flex; min-height: 24px; align-items: center; padding: 0 8px; color: #3f4b45; background: rgba(24, 32, 29, 0.07); border-radius: 999px; font-size: 11px; font-weight: 850; } .semantic-cluster-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; } .semantic-cluster { display: grid; gap: 7px; min-height: 148px; padding: 10px; text-align: left; background: rgba(255, 253, 247, 0.76); border: 1px solid rgba(24, 32, 29, 0.1); border-radius: 7px; cursor: pointer; } .semantic-cluster.covered { border-color: rgba(46, 111, 100, 0.22); } .semantic-cluster.weak { border-color: rgba(155, 111, 39, 0.28); } .semantic-cluster.missing { border-color: rgba(143, 45, 31, 0.22); } .semantic-cluster.active, .semantic-cluster:hover { background: #fffdf7; border-color: rgba(24, 32, 29, 0.28); box-shadow: 0 10px 24px rgba(24, 32, 29, 0.08); } .semantic-cluster.active { outline: 2px solid rgba(46, 90, 103, 0.16); } .semantic-cluster div { display: flex; flex-wrap: wrap; gap: 5px; } .semantic-cluster div span { color: #2e5a67; background: rgba(46, 90, 103, 0.1); } .semantic-cluster.missing div span { color: #8f2d1f; background: rgba(143, 45, 31, 0.1); } .semantic-cluster div em { color: #6d7c76; background: rgba(24, 32, 29, 0.08); } .semantic-cluster strong { color: #18201d; font-size: 13px; } .semantic-cluster p { margin: 0; color: #3f4b45; font-size: 12px; line-height: 1.35; } .semantic-cluster blockquote { display: grid; gap: 5px; margin: 0; padding: 8px; color: #18201d; background: rgba(46, 90, 103, 0.07); border-left: 3px solid rgba(46, 90, 103, 0.28); border-radius: 6px; font-size: 12px; line-height: 1.35; } .semantic-cluster blockquote small { color: #6d7c76; font-size: 11px; font-weight: 800; } .semantic-cluster-detail { display: grid; gap: 12px; padding: 12px; background: rgba(255, 253, 247, 0.82); border: 1px solid rgba(24, 32, 29, 0.12); border-radius: 8px; } .semantic-cluster-detail.covered { border-color: rgba(46, 111, 100, 0.22); } .semantic-cluster-detail.weak { border-color: rgba(155, 111, 39, 0.28); } .semantic-cluster-detail.missing { border-color: rgba(143, 45, 31, 0.22); } .semantic-detail-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; } .semantic-detail-heading > div { display: grid; gap: 5px; } .semantic-detail-heading > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; } .semantic-detail-heading span, .semantic-detail-heading em, .semantic-token-list span, .semantic-source-list span { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 900; } .semantic-detail-heading span { justify-self: start; color: #2e5a67; background: rgba(46, 90, 103, 0.1); } .semantic-detail-heading em { color: #6d7c76; background: rgba(24, 32, 29, 0.07); } .semantic-detail-heading strong, .semantic-detail-grid strong, .semantic-evidence-panel > strong { color: #18201d; font-size: 13px; } .semantic-detail-heading small, .semantic-detail-grid small, .semantic-evidence-panel small, .semantic-source-list small { color: #6d7c76; font-size: 12px; font-weight: 750; } .semantic-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; } .semantic-detail-grid section, .semantic-evidence-panel { display: grid; gap: 8px; padding: 10px; background: rgba(255, 255, 255, 0.56); border: 1px solid rgba(24, 32, 29, 0.08); border-radius: 7px; } .semantic-token-list { display: flex; flex-wrap: wrap; gap: 6px; } .semantic-token-list span { color: #2e5a67; background: rgba(46, 90, 103, 0.1); } .semantic-token-list.muted span { color: #6d7c76; background: rgba(24, 32, 29, 0.07); } .semantic-evidence-panel blockquote { display: grid; gap: 6px; margin: 0; padding: 10px; color: #18201d; background: rgba(46, 90, 103, 0.06); border-left: 3px solid rgba(46, 90, 103, 0.28); border-radius: 7px; font-size: 12px; line-height: 1.4; } .semantic-source-list { display: grid; gap: 6px; } .semantic-source-list div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: center; padding: 8px; background: rgba(24, 32, 29, 0.04); border-radius: 7px; } .semantic-source-list span { grid-row: span 2; color: #2e5a67; background: rgba(46, 90, 103, 0.1); } .semantic-source-list strong, .semantic-source-list small { min-width: 0; overflow-wrap: anywhere; } .semantic-gap-panel { gap: 6px; } .semantic-gap-row { justify-content: flex-start; padding: 7px 8px; background: rgba(255, 255, 255, 0.54); border-radius: 7px; } .semantic-gap-row span { min-width: 58px; justify-content: center; color: #8f2d1f; background: rgba(143, 45, 31, 0.1); } .semantic-gap-row div { display: grid; gap: 2px; } .semantic-seeds div { display: flex; flex-wrap: wrap; gap: 6px; } .semantic-seeds.compact { padding: 0; background: transparent; border: 0; } .semantic-seeds span { color: #2e5a67; background: rgba(46, 90, 103, 0.1); } .semantic-ai-contract summary { cursor: pointer; color: #18201d; font-size: 12px; font-weight: 900; } .semantic-ai-contract p { margin: 8px 0 4px; color: #3f4b45; font-size: 12px; font-weight: 800; } .semantic-action-list p { margin: 0; padding: 7px 8px; background: rgba(255, 255, 255, 0.52); border-radius: 6px; } .semantic-empty { min-height: 120px; } .audit-help-grid { display: grid; gap: 8px; } .audit-help-grid p { padding: 8px; background: rgba(255, 252, 244, 0.72); border-radius: 7px; } .audit-issue-list { display: grid; gap: 6px; } .audit-filter-note, .audit-empty-section { color: #6d7c76; font-size: 12px; font-weight: 800; } .audit-page-group { display: grid; gap: 6px; padding: 8px; background: rgba(255, 252, 244, 0.58); border: 1px solid rgba(46, 111, 100, 0.12); border-radius: 8px; } .audit-page-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px; padding-bottom: 4px; } .audit-page-heading div { display: grid; gap: 2px; min-width: 0; } .audit-page-heading strong { color: #18201d; font-size: 14px; overflow-wrap: anywhere; } .audit-page-heading small { color: #6d7c76; font-weight: 800; overflow-wrap: anywhere; } .audit-page-tag { padding: 3px 7px; color: #2e6f64; background: rgba(46, 111, 100, 0.1); border-radius: 999px; font-size: 11px; font-weight: 900; } .media-issue-panel { display: grid; gap: 8px; padding: 9px; background: rgba(46, 111, 100, 0.06); border: 1px dashed rgba(46, 111, 100, 0.24); border-radius: 8px; } .media-issue-panel summary { color: #2e6f64; cursor: pointer; font-size: 13px; font-weight: 900; } .media-issue-panel > small { color: #6d7c76; font-weight: 800; } .media-issue-list { display: grid; gap: 6px; margin-top: 8px; } .media-issue-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; padding: 7px; background: rgba(255, 252, 244, 0.78); border: 1px solid rgba(24, 32, 29, 0.08); border-radius: 7px; } .media-issue-row span { align-self: start; padding: 3px 6px; color: #7f5200; background: #fff0c2; border-radius: 999px; font-size: 11px; font-weight: 900; } .media-issue-row strong { color: #18201d; font-size: 13px; overflow-wrap: anywhere; } .media-issue-row small { grid-column: 2; color: #6d7c76; font-weight: 800; overflow-wrap: anywhere; } .audit-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; } .audit-pagination div { display: flex; flex-wrap: wrap; gap: 6px; } .audit-pagination button { min-height: 28px; padding: 0 10px; color: #2e6f64; background: #fffdf7; border: 1px solid rgba(46, 111, 100, 0.22); border-radius: 999px; cursor: pointer; } .audit-pagination button:hover { background: #edf7f1; } .audit-issue { padding: 8px; background: rgba(255, 252, 244, 0.78); border: 1px solid rgba(24, 32, 29, 0.08); border-radius: 7px; } .audit-issue summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: flex-start; cursor: pointer; } .audit-issue summary > span { padding: 3px 6px; border-radius: 999px; font-size: 11px; font-weight: 900; } .audit-issue.warning summary > span { color: #7f5200; background: #fff0c2; } .audit-issue.info summary > span { color: #2e6f64; background: rgba(46, 111, 100, 0.12); } .audit-issue.error summary > span { color: #8f2d1f; background: #f4ded7; } .audit-issue summary strong { color: #18201d; font-size: 13px; overflow-wrap: anywhere; } .audit-issue-body { display: grid; gap: 7px; margin-top: 8px; padding-left: 4px; } .audit-issue-body p { margin: 0; color: #31423b; font-size: 13px; font-weight: 650; } .audit-issue-body small { color: #6d7c76; font-weight: 800; } .scan-selection { display: grid; gap: 8px; } .scan-selection-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .scan-selection-bar > div:first-child { display: grid; gap: 3px; min-width: 0; } .scan-selection-bar strong { color: #18201d; font-size: 13px; } .scan-selection-bar small { color: #6d7c76; font-size: 12px; font-weight: 650; overflow-wrap: anywhere; } .scan-selection-actions { display: flex; flex-wrap: wrap; gap: 6px; } .scan-selection-actions button { min-height: 28px; padding: 0 8px; color: #2e6f64; background: #fffdf7; border: 1px solid rgba(46, 111, 100, 0.22); border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 800; } .scan-selection-actions button:disabled { cursor: not-allowed; opacity: 0.5; } .scan-page-list { display: grid; gap: 6px; } .scan-page-tree { display: grid; gap: 8px; } .scan-page-tree.scrollable { max-height: min(72vh, 980px); overflow: auto; padding-right: 4px; } .scan-page-tree-group { display: grid; gap: 6px; padding: 8px; background: rgba(255, 252, 244, 0.5); border: 1px solid rgba(46, 111, 100, 0.12); border-radius: 8px; } .scan-page-tree-group[open] { background: rgba(255, 252, 244, 0.68); } .scan-page-tree-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; } .scan-page-tree-heading::-webkit-details-marker { display: none; } .scan-page-tree-heading > span { display: grid; gap: 2px; min-width: 0; } .scan-page-tree-heading strong { color: #2e6f64; font-size: 13px; } .scan-page-tree-heading small { color: #6d7c76; font-weight: 900; overflow-wrap: anywhere; } .scan-page-tree-heading em { flex: 0 0 auto; color: #6d7c76; font-size: 12px; font-style: normal; font-weight: 900; } .scan-page-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: flex-start; padding: 8px; background: rgba(255, 253, 247, 0.82); border: 1px solid rgba(24, 32, 29, 0.08); border-radius: 7px; } .scan-page-option.excluded-from-coverage { background: rgba(248, 249, 247, 0.82); } .scan-page-option.template_block, .scan-page-option.admin_page, .scan-page-option.technical_page { border-color: rgba(109, 124, 118, 0.18); } .scan-page-option input { width: 16px; height: 16px; margin-top: 2px; accent-color: #2e6f64; } .scan-page-option span { display: grid; gap: 2px; min-width: 0; } .scan-page-option strong { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: #18201d; font-size: 13px; overflow-wrap: anywhere; } .scan-page-option strong em { color: #6d7c76; background: rgba(109, 124, 118, 0.1); border: 1px solid rgba(109, 124, 118, 0.16); border-radius: 999px; padding: 2px 6px; font-size: 11px; font-style: normal; font-weight: 850; } .scan-page-option.used-for-coverage strong em { color: #2e6f64; background: rgba(46, 111, 100, 0.08); border-color: rgba(46, 111, 100, 0.16); } .scan-preview-list { display: grid; gap: 6px; } .scan-preview-list > span { display: grid; gap: 2px; color: #18201d; font-size: 13px; font-weight: 800; } .scan-page-option small, .scan-preview-list small, .scan-summary small { color: #6d7c76; font-weight: 600; overflow-wrap: anywhere; } .project-edit-form { display: grid; gap: 10px; } .project-edit-form label { display: grid; gap: 6px; color: #66736d; font-size: 13px; font-weight: 700; } .project-edit-form input { width: 100%; min-height: 38px; padding: 0 10px; color: #18201d; background: #fffdf7; border: 1px solid rgba(24, 32, 29, 0.18); border-radius: 7px; outline: none; } .project-edit-form input:focus { border-color: #2e6f64; box-shadow: 0 0 0 3px rgba(46, 111, 100, 0.12); } .project-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: space-between; color: #7a8a84; font-size: 13px; white-space: normal; } .project-meta span:first-child { color: #2e6f64; font-weight: 700; } .project-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; } .tiny-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; padding: 0 9px; color: #2e6f64; background: rgba(46, 111, 100, 0.08); border: 1px solid rgba(46, 111, 100, 0.22); border-radius: 6px; cursor: pointer; } .tiny-action.primary { color: #fff8e7; background: #2e6f64; border-color: #24584f; } .tiny-action.danger { color: #8f2d1f; background: #f4ded7; border-color: #dfb3a7; } .tiny-action.icon-only { width: 32px; padding: 0; } .tiny-action:disabled { cursor: not-allowed; opacity: 0.58; } .empty-state { min-height: 86px; justify-content: center; color: #5b6862; background: rgba(46, 111, 100, 0.07); border: 1px dashed rgba(46, 111, 100, 0.28); } .spin { animation: spin 900ms linear infinite; } .task-table { display: grid; overflow: hidden; border: 1px solid rgba(24, 32, 29, 0.12); border-radius: 8px; background: rgba(255, 252, 244, 0.74); } .task-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 54px; padding: 0 16px; border-bottom: 1px solid rgba(24, 32, 29, 0.1); } .task-row:last-child { border-bottom: 0; } .task-row span { color: #7a8a84; font-variant-numeric: tabular-nums; } .task-row.done span, .task-row.active span { color: #2e6f64; font-weight: 700; } .system-task-table { max-height: 260px; margin-top: 8px; overflow: auto; background: #fff !important; } .system-task-table .task-row { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; min-height: 44px; padding: 8px 10px; } .system-task-table .task-row p { font-size: 13px; } .footer-line { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 10px; } /* Monochrome UI pass: keep the layout, remove decorative color noise. */ .project-setup, .project-list, .project-form, .project-row, .scan-summary, .audit-summary, .page-workspace-panel, .workspace-preview-panel, .workspace-page-issues, .workspace-section-workbench, .section-editor-card, .task-table, .status-card, .scan-page-tree-group, .scan-page-option, .audit-page-group, .audit-issue, .media-issue-panel, .media-issue-row, .seed-help, .workspace-help, .scan-help, .audit-help, .workspace-raw-draft { background: var(--panel) !important; border-color: var(--line) !important; box-shadow: none; } .project-form input, .project-edit-form input, .field input, .section-editor-card pre, .section-editor-card textarea, .workspace-raw-draft pre, .workspace-preview-panel iframe { color: var(--ink) !important; background: #fff !important; border-color: var(--line-strong) !important; } .primary, .tiny-action.primary, .ghost-action.primary, .project-form button[type="submit"] { color: #fff !important; background: #151515 !important; border-color: #151515 !important; } .tiny-action, .tiny-action.danger, .ghost-action, .ghost-action.danger, .scan-selection-actions button, .audit-toolbar button, .audit-pagination button, .workspace-page-tabs button { color: var(--ink) !important; background: #f7f7f7 !important; border-color: var(--line-strong) !important; } .audit-toolbar button.active, .workspace-page-tabs button.active, .section-map-card.active { color: #fff !important; background: #151515 !important; border-color: #151515 !important; } .audit-toolbar button.active span, .workspace-page-tabs button.active span, .section-map-card.active span, .section-map-card.active small, .section-map-card.active p, .section-map-card.active strong, .section-map-card.active em { color: #fff !important; } .status-card svg, .system-subsection svg, .section-heading svg, .footer-line svg, .scan-metrics svg, .system-status-popover svg { color: #303030 !important; } .system-status-popover, .system-status-popover .status-card, .system-status-popover .status-card h3, .system-status-popover .system-subsection summary { color: var(--ink) !important; } .eyebrow, .status-card p, .system-status-popover .status-card p, .section-heading p, .scan-status-note, .workspace-subheading small, .workspace-meta small, .audit-heading span, .audit-heading small, .media-issue-row small, .workspace-issue-list small, .scan-page-option small, .project-row p, .project-meta, .task-row p, .footer-line, .input-hint-row small, .field-warning, .workspace-empty { color: var(--muted) !important; } .scan-metrics span, .page-workspace-heading span, .audit-page-tag, .section-map-card span, .section-map-card em, .media-issue-row span, .workspace-issue-list span, .audit-issue summary > span { color: #151515 !important; background: #e2e2e2 !important; border-color: #c9c9c9 !important; } .audit-issue.warning summary > span, .audit-issue.info summary > span, .audit-issue.error summary > span { color: #151515 !important; background: #e2e2e2 !important; } .success-banner, .error-banner { color: #151515 !important; background: #e8e8e8 !important; } .error-banner { border-color: #a8a8a8 !important; } .success-banner { border-color: #bdbdbd !important; } .folder-picker-panel, .folder-picker-panel.active, .empty-state, .workspace-preview-empty, .page-workspace-empty { color: var(--ink) !important; background: var(--panel) !important; border-color: var(--line-strong) !important; box-shadow: none !important; } .folder-pick-action, .folder-picker-panel button { color: #fff !important; background: #151515 !important; border-color: #151515 !important; } .folder-picker-message, .scan-help summary, .workspace-help summary, .audit-help summary, .seed-help summary, .workspace-raw-draft summary, .media-issue-panel summary, .project-title, .link-action, .scan-page-tree-heading strong, .workspace-subheading strong, .page-workspace-heading strong, .audit-heading strong, .section-editor-card label, .field label { color: var(--ink) !important; } .project-title:hover, .project-meta span:first-child, .task-row span, .task-row.done span, .task-row.active span { color: var(--ink) !important; } .link-action { border-bottom-color: var(--line-strong) !important; } .link-action:hover { border-bottom-color: #151515 !important; } .scan-page-option input, input[type="checkbox"] { accent-color: #151515; } input:focus, textarea:focus { border-color: #151515 !important; outline: none; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important; } .section-map-card.active, .section-map-card:hover, .workspace-page-tabs button.active, .audit-toolbar button.active { box-shadow: none !important; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 880px) { .app-header { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } .brand-block { min-width: 0; } .nav-list { grid-column: 1 / -1; order: 3; } .system-status-menu { justify-self: end; } .project-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .app-header { padding: 12px; } .workspace { padding: 16px; } .topbar { align-items: flex-start; flex-direction: column; } .nav-item.active strong { max-width: 170px; overflow: hidden; text-overflow: ellipsis; } .list-heading, .project-row { grid-template-columns: 1fr; } .list-heading { display: grid; } .ghost-action, .project-meta { justify-self: start; } .project-meta { justify-items: start; white-space: normal; } .project-actions { justify-content: flex-start; } .folder-picker-panel { align-items: stretch; display: grid; } .input-hint-row { display: grid; } } /* Apple-inspired system pass: one calm hierarchy, material surfaces, consistent controls. */ :root { --bg: #f5f5f7; --bg-soft: #fbfbfd; --panel: rgba(255, 255, 255, 0.74); --panel-strong: rgba(255, 255, 255, 0.92); --ink: #1d1d1f; --muted: #6e6e73; --muted-soft: #86868b; --line: rgba(0, 0, 0, 0.08); --line-strong: rgba(0, 0, 0, 0.14); --accent: #0071e3; --accent-hover: #0077ed; --accent-soft: rgba(0, 113, 227, 0.1); --danger: #d70015; --danger-soft: rgba(215, 0, 21, 0.1); --warning: #b26a00; --warning-soft: rgba(178, 106, 0, 0.12); --glass: rgba(255, 255, 255, 0.68); --glass-solid: rgba(255, 255, 255, 0.92); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 28px rgba(0, 0, 0, 0.06); --shadow-md: 0 18px 60px rgba(0, 0, 0, 0.1); --radius-xs: 10px; --radius-sm: 14px; --radius-md: 18px; --radius-lg: 24px; --radius-xl: 30px; color: var(--ink); background: var(--bg); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif; } body { color: var(--ink); background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.95), transparent 34%), linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 38%, #eeeeef 100%) !important; background-attachment: fixed; } button, input, textarea { font: inherit; } .app-shell { min-height: 100vh; } .app-header { position: sticky !important; top: 0; z-index: 30; grid-template-columns: minmax(172px, auto) minmax(0, 1fr) auto !important; gap: 22px !important; min-height: 76px; padding: 14px max(24px, calc((100vw - 1180px) / 2 + 24px)) !important; color: var(--ink) !important; background: rgba(251, 251, 253, 0.78) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: none !important; backdrop-filter: blur(24px) saturate(180%); } .brand-block { min-width: 0 !important; gap: 12px !important; } .brand-mark { width: 38px !important; height: 38px !important; display: inline-grid !important; place-items: center !important; color: #fff !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.28), transparent 42%), linear-gradient(145deg, #1d1d1f, #515154) !important; border-radius: 12px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 10px 24px rgba(0, 0, 0, 0.14); font-size: 13px; letter-spacing: -0.02em; line-height: 1 !important; text-align: center; } .brand-mark span { display: block; line-height: 1; transform: translateY(-1px); } .brand-block h1 { color: var(--ink); font-size: 17px !important; font-weight: 700; letter-spacing: -0.03em; } .brand-block p, .eyebrow { color: var(--muted) !important; font-size: 12px !important; font-weight: 500; } .nav-list { justify-content: center; gap: 6px !important; padding: 5px !important; background: rgba(0, 0, 0, 0.045); border: 1px solid rgba(0, 0, 0, 0.055); border-radius: 999px; scrollbar-width: none; } .nav-list::-webkit-scrollbar { display: none; } .nav-item { min-width: 36px !important; min-height: 36px !important; gap: 8px !important; padding: 0 10px !important; color: var(--muted) !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease; } .nav-item span { width: auto !important; height: auto !important; min-width: 18px; color: inherit !important; background: transparent !important; border: 0 !important; font-size: 12px !important; font-weight: 650 !important; } .nav-item strong { padding-right: 2px !important; font-size: 13px !important; font-weight: 650 !important; letter-spacing: -0.01em; } .nav-item:not(.active) span { font-weight: 400 !important; } .nav-item.active { color: var(--ink) !important; background: var(--glass-solid) !important; border: 0 !important; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.08); } .nav-item.active span { color: var(--ink) !important; background: transparent !important; } .workspace { width: min(1180px, 100%) !important; gap: 22px !important; padding: 28px 24px 64px !important; } .topbar { min-height: 132px; align-items: end !important; padding: 30px !important; overflow: hidden; background: radial-gradient(circle at 88% 16%, rgba(255, 255, 255, 0.95), transparent 30%), linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(242, 242, 247, 0.72)) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-sm); } .topbar::after { position: absolute; right: -70px; bottom: -120px; width: 260px; height: 260px; content: ""; background: radial-gradient(circle, rgba(0, 113, 227, 0.1), transparent 65%); pointer-events: none; } .topbar h2 { max-width: 900px; margin-top: 8px !important; color: var(--ink); font-size: clamp(30px, 4vw, 44px) !important; font-weight: 720; letter-spacing: -0.05em; line-height: 1.04 !important; text-wrap: balance; } .section-heading, .list-heading, .page-workspace-heading, .audit-heading, .workspace-subheading, .scan-selection-bar, .audit-page-heading { align-items: center !important; gap: 12px !important; } .section-heading h3, .list-heading h3, .page-workspace-heading strong, .audit-heading strong, .workspace-subheading strong, .scan-selection-bar strong, .audit-page-heading strong { color: var(--ink) !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.032em; line-height: 1.12; } .section-heading p, .list-heading p, .page-workspace-heading small, .audit-heading small, .workspace-subheading small, .audit-page-heading small, .field-hint, .input-hint-row, .project-row p, .scan-status-note, .scan-summary small, .workspace-empty, .audit-empty-section, .audit-filter-note { color: var(--muted) !important; font-size: 14px !important; font-weight: 450 !important; line-height: 1.45 !important; } .project-setup, .project-list, .project-form, .project-list-card, .project-row, .scan-summary, .audit-summary, .page-workspace-panel, .workspace-preview-panel, .workspace-page-issues, .workspace-section-workbench, .section-editor-card, .scan-selection, .task-table, .status-card, .scan-page-tree-group, .scan-page-option, .audit-page-group, .audit-issue, .media-issue-panel, .media-issue-row, .seed-help, .workspace-help, .scan-help, .audit-help, .workspace-raw-draft, .folder-picker-panel, .empty-state, .workspace-preview-empty, .page-workspace-empty { color: var(--ink) !important; background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; backdrop-filter: blur(20px) saturate(160%); } .project-setup, .project-list { padding: 24px !important; } .project-form, .project-list-card, .audit-summary, .page-workspace-panel, .scan-selection { padding: 22px !important; } .project-grid { gap: 18px !important; } .project-grid > *, .project-list-card, .project-row, .project-row > *, .scan-summary, .scan-summary > *, .scan-selection, .scan-selection > *, .scan-page-tree, .scan-page-tree-group, .scan-page-option, .audit-summary, .page-workspace-panel, .workspace-preview-layout, .workspace-preview-layout > *, .workspace-editor-stack, .workspace-editor-stack > * { min-width: 0 !important; } .project-row, .scan-summary, .scan-selection, .scan-page-option, .audit-summary, .page-workspace-panel { overflow-wrap: anywhere; } .project-form { gap: 18px !important; } .field { gap: 8px !important; color: var(--ink) !important; font-size: 13px !important; font-weight: 650 !important; letter-spacing: -0.01em; } .field input, .project-edit-form input, .section-editor-card textarea, .section-editor-card pre, .workspace-raw-draft pre, .workspace-preview-panel iframe { min-height: 44px; color: var(--ink) !important; background: rgba(255, 255, 255, 0.86) !important; border: 1px solid var(--line-strong) !important; border-radius: var(--radius-sm) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62); outline: none; } .field input, .project-edit-form input { padding: 0 14px !important; } .section-editor-card textarea, .section-editor-card pre, .workspace-raw-draft pre { padding: 14px !important; } .field input:focus, .project-edit-form input:focus, .section-editor-card textarea:focus, input:focus, textarea:focus { border-color: rgba(0, 113, 227, 0.42) !important; box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.14) !important; } .folder-picker-panel { min-height: 72px !important; padding: 14px !important; background: rgba(255, 255, 255, 0.72) !important; border: 1.5px dashed var(--line) !important; border-radius: var(--radius-md) !important; } .folder-picker-panel.active { background: rgba(0, 113, 227, 0.08) !important; border-color: rgba(0, 113, 227, 0.38) !important; transform: none !important; } .primary-action, .primary, .tiny-action.primary, .ghost-action.primary, .project-form button[type="submit"], .folder-pick-action { min-height: 40px; color: #fff !important; background: var(--accent) !important; border: 1px solid rgba(0, 0, 0, 0.04) !important; border-radius: 999px !important; box-shadow: 0 10px 24px rgba(0, 113, 227, 0.18); font-weight: 650 !important; transition: background 160ms ease, opacity 160ms ease, transform 160ms ease, box-shadow 160ms ease; } .primary-action:hover, .primary:hover, .tiny-action.primary:hover, .ghost-action.primary:hover, .project-form button[type="submit"]:hover, .folder-pick-action:hover { background: var(--accent-hover) !important; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0, 113, 227, 0.22); } .ghost-action, .tiny-action, .tiny-action.danger, .ghost-action.danger, .scan-selection-actions button, .audit-toolbar button, .audit-pagination button, .workspace-page-tabs button, .link-action { min-height: 36px; color: var(--ink) !important; background: rgba(255, 255, 255, 0.72) !important; border: 1px solid var(--line) !important; border-radius: 999px !important; box-shadow: none !important; font-weight: 600 !important; } .tiny-action.danger, .ghost-action.danger { color: var(--danger) !important; background: var(--danger-soft) !important; } .link-action { padding: 0 12px !important; text-decoration: none !important; border-bottom: 0 !important; } .primary-action:disabled, .ghost-action:disabled, .tiny-action:disabled, .folder-pick-action:disabled, .audit-toolbar button:disabled, .workspace-page-tabs button:disabled { cursor: not-allowed; opacity: 0.42 !important; transform: none; box-shadow: none; } .project-row { gap: 16px !important; padding: 18px !important; } .project-title { color: var(--ink) !important; text-decoration-color: rgba(0, 0, 0, 0.18) !important; text-decoration-thickness: 1px; font-weight: 720; letter-spacing: -0.02em; } .project-meta { gap: 12px !important; color: var(--muted) !important; } .project-meta span:first-child { color: var(--muted) !important; font-weight: 600 !important; } .project-actions { gap: 8px !important; } .scan-summary { gap: 12px !important; margin-top: 14px !important; padding: 16px !important; } .scan-metrics span, .page-workspace-heading span, .audit-page-tag, .section-map-card span, .section-map-card em, .media-issue-row span, .workspace-issue-list span, .audit-issue summary > span, .status-pill { color: var(--ink) !important; background: rgba(0, 0, 0, 0.055) !important; border: 1px solid rgba(0, 0, 0, 0.045) !important; border-radius: 999px !important; font-weight: 650 !important; } .audit-issue.error summary > span { color: var(--danger) !important; background: var(--danger-soft) !important; } .audit-issue.warning summary > span { color: var(--warning) !important; background: var(--warning-soft) !important; } .audit-issue.info summary > span { color: var(--accent) !important; background: var(--accent-soft) !important; } .success-banner, .form-message.success { color: #006c3d !important; background: rgba(0, 122, 61, 0.1) !important; border: 1px solid rgba(0, 122, 61, 0.14) !important; border-radius: var(--radius-md) !important; } .create-project-message { align-items: flex-start !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: -0.01em; line-height: 1.4 !important; } .create-project-message > svg { flex: 0 0 auto; margin-top: 2px; } .create-project-message > span { display: block; white-space: pre-line; } .error-banner, .form-message.error, .empty-state.error, .field-warning { color: var(--danger) !important; background: var(--danger-soft) !important; border-color: rgba(215, 0, 21, 0.14) !important; } .workspace-editor-stack, .workspace-preview-layout, .section-workbench-grid, .audit-issue-list, .media-issue-list, .scan-page-list, .scan-page-tree, .scan-preview-list, .project-list { gap: 12px !important; } .workspace-preview-layout { align-items: start; grid-template-columns: minmax(0, 1fr) !important; } .section-workbench-grid { grid-template-columns: minmax(0, 1fr) !important; } .workspace-preview-panel, .workspace-page-issues, .workspace-section-workbench, .section-editor-card { padding: 18px !important; } .workspace-preview-panel iframe { min-height: 720px; overflow: hidden; background: #fff !important; border-radius: var(--radius-md) !important; } .workspace-page-tabs { gap: 8px !important; min-width: 0 !important; } .workspace-page-tabs button, .audit-toolbar button { padding: 0 13px !important; min-width: 0 !important; overflow: hidden; text-overflow: ellipsis; } .workspace-page-tabs button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .workspace-page-tabs button.active, .audit-toolbar button.active, .section-map-card.active { color: #fff !important; background: var(--ink) !important; border-color: var(--ink) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14) !important; } .section-map-card, .workspace-issue-list button, .media-issue-row, .scan-page-option, .audit-issue { background: rgba(255, 255, 255, 0.68) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-md) !important; } .section-map-card, .workspace-issue-list button, .scan-page-option { transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; } .section-map-card:hover, .workspace-issue-list button:hover, .scan-page-option:hover { background: rgba(255, 255, 255, 0.92) !important; border-color: rgba(0, 113, 227, 0.22) !important; transform: translateY(-1px); } .section-map-card.active:hover { background: var(--ink) !important; border-color: var(--ink) !important; transform: none; } .section-map-list, .workspace-issue-list, .scan-page-list { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.18) transparent; } .audit-issue summary, .media-issue-panel summary, .scan-help summary, .workspace-help summary, .audit-help summary, .seed-help summary, .workspace-raw-draft summary { min-height: 38px; color: var(--ink) !important; font-weight: 650 !important; } .audit-issue-body { color: var(--muted) !important; } .scan-selection-bar { margin-bottom: 12px; } .scan-page-tree-group { padding: 14px !important; } .scan-page-tree-heading { padding: 0 2px 8px !important; } .scan-page-option { padding: 12px !important; } input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); } .system-status-menu { position: relative; } .system-status-menu > summary { width: 42px !important; height: 42px !important; color: var(--ink) !important; background: rgba(255, 255, 255, 0.72) !important; border: 1px solid var(--line) !important; border-radius: 999px !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08) !important; backdrop-filter: blur(16px) saturate(160%); } .system-status-menu[open] > summary { color: #fff !important; background: var(--ink) !important; border-color: var(--ink) !important; } .system-status-popover { top: calc(100% + 12px) !important; width: min(420px, calc(100vw - 32px)) !important; padding: 10px !important; color: var(--ink) !important; background: rgba(246, 246, 248, 0.86) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-md) !important; backdrop-filter: blur(28px) saturate(180%); } .status-card.compact, .system-subsection { background: rgba(255, 255, 255, 0.72) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-md) !important; box-shadow: none !important; } .status-card.compact { grid-template-columns: 30px minmax(0, 1fr) !important; min-height: 0 !important; padding: 14px !important; } .status-card.compact h3 { margin-bottom: 5px !important; color: var(--ink) !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: -0.025em; } .status-card.compact p { color: var(--muted) !important; font-size: 14px !important; } .system-subsection { padding: 12px !important; } .system-subsection summary { grid-template-columns: 30px minmax(0, 1fr) auto !important; color: var(--ink) !important; font-size: 15px; } .system-task-table { max-height: 260px; margin-top: 10px !important; background: rgba(255, 255, 255, 0.66) !important; border-radius: var(--radius-md) !important; box-shadow: none !important; } .task-row { border-bottom-color: var(--line) !important; } .task-row span, .task-row.done span, .task-row.active span { color: var(--muted) !important; font-weight: 650 !important; } .task-row.active span { color: var(--accent) !important; } .footer-line { justify-content: center; color: var(--muted) !important; font-size: 13px; } @media (min-width: 980px) { .project-grid { grid-template-columns: minmax(320px, 0.82fr) minmax(420px, 1.18fr); align-items: start; } } @media (max-width: 880px) { .app-header { grid-template-columns: minmax(0, 1fr) auto !important; padding: 12px 16px !important; } .nav-list { grid-column: 1 / -1; order: 3; justify-content: flex-start; } .workspace { padding: 18px 14px 44px !important; } .topbar { min-height: 132px; padding: 24px !important; } .semantic-score-grid, .semantic-review-summary, .semantic-review-next, .semantic-scope-grid { grid-template-columns: 1fr; } .semantic-review-card.semantic-context-card { grid-column: auto; } .semantic-verdict-heading, .semantic-detail-heading { display: grid; } .semantic-verdict-heading > div:last-child, .semantic-detail-heading > div:last-child { justify-content: flex-start; } } @media (max-width: 560px) { .app-header { gap: 10px !important; } .brand-block p { display: none; } .topbar h2 { font-size: 34px !important; } .project-setup, .project-list, .project-form, .project-list-card, .audit-summary, .page-workspace-panel, .scan-selection { padding: 16px !important; border-radius: var(--radius-lg) !important; } .system-status-popover { right: -6px; } .semantic-verdict-risk-list article, .semantic-verdict-clusters > div { grid-template-columns: 1fr; } .semantic-verdict-risk-list span, .semantic-verdict-clusters span { justify-self: start; } } /* Layout rescue pass: restore working width and remove the nested-card matryoshka. */ .app-header { padding: 14px max(24px, calc((100vw - 1500px) / 2 + 14px)) !important; } .workspace { width: min(1500px, 100%) !important; gap: 24px !important; padding: 28px 24px 64px !important; } .project-setup { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; } .project-setup > .section-heading { padding: 0 4px; } .project-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; } .project-form, .project-list-card { background: rgba(255, 255, 255, 0.82) !important; border: 1px solid var(--line) !important; border-radius: 24px !important; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.055) !important; } .project-list-card { display: grid; gap: 18px; } .project-row { gap: 18px !important; padding: 22px !important; position: relative; background: rgba(0, 0, 0, 0.045) !important; border: 1px solid rgba(0, 0, 0, 0.075) !important; border-radius: 22px !important; box-shadow: none !important; backdrop-filter: none !important; } .project-row-openable { cursor: pointer; transition: background 160ms ease, border-color 160ms ease; } .project-row-openable:hover, .project-row-openable:focus-visible { background: rgba(242, 122, 26, 0.065) !important; border-color: rgba(242, 122, 26, 0.34) !important; outline: none; } .project-open-arrow { position: absolute; top: 22px; right: 24px; color: rgba(31, 31, 33, 0.44); font-size: 26px; font-weight: 400; line-height: 1; transition: color 160ms ease, transform 160ms ease; } .project-row-openable:hover .project-open-arrow, .project-row-openable:focus-visible .project-open-arrow { color: var(--accent); transform: translateX(3px); } .project-row > div:first-child { display: grid; gap: 16px; } .project-row-openable .project-title-row { padding-right: 44px; } .project-row p { margin: 0 !important; } .stage-2 .project-meta { display: none !important; } .page-audit-overview { display: grid; gap: 14px; } .project-scope-flow-panel { display: grid; gap: 12px; padding: 14px; background: rgba(255, 255, 255, 0.82); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 42px rgba(18, 24, 22, 0.08); } .project-scope-flow-head { display: block; align-items: center; min-width: 0; } .project-scope-flow-head strong { color: var(--ink); font-size: 17px; font-weight: 780; } .project-scope-flow-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .project-scope-flow-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .project-scope-flow-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 13px; color: var(--ink); background: #ffffff; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; } .project-scope-flow-actions button:hover:not(:disabled) { border-color: rgba(24, 32, 29, 0.2); background: #fafafa; } .project-scope-flow-actions button.active { color: #ffffff; background: var(--ink); border-color: var(--ink); } .project-scope-flow-actions button:disabled { cursor: not-allowed; color: var(--muted); background: #f6f6f7; opacity: 1; } .project-scope-flow-legend { display: flex; flex-wrap: wrap; gap: 8px; } .scope-legend-item { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 13px; color: var(--muted); background: #f6f6f7; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; } .scope-legend-item.indexable_page { color: var(--muted); border-color: var(--line); } .project-scope-flow-canvas { position: relative; height: min(82vh, 920px); min-height: 680px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 251, 250, 0.96)), #ffffff; border: 1px solid rgba(31, 42, 37, 0.12); border-radius: 14px; } .project-scope-flow-canvas .react-flow { background: #ffffff; } .project-scope-flow-canvas .react-flow__pane { cursor: grab; } .project-scope-flow-canvas .react-flow__pane:active { cursor: grabbing; } .project-scope-flow-canvas .react-flow__node { overflow: visible; border-radius: 18px; } .project-scope-flow-canvas .react-flow__controls { overflow: hidden; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 10px; box-shadow: 0 12px 30px rgba(18, 24, 22, 0.1); } .project-scope-flow-canvas .react-flow__controls button { border-bottom-color: rgba(0, 0, 0, 0.08); } .project-scope-flow-canvas .react-flow__minimap { overflow: hidden; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 12px; box-shadow: 0 12px 30px rgba(18, 24, 22, 0.1); } .scope-flow-toolbar { position: absolute; top: 50%; left: 16px; z-index: 12; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 87px; padding: 10px 0; pointer-events: auto; transform: translateY(-50%); transform-origin: left center; } .scope-flow-toolbar-button { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; color: #202522; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(31, 42, 37, 0.14); border-radius: 8px; box-shadow: 0 10px 24px rgba(18, 24, 22, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.92); cursor: pointer; line-height: 1; outline: none; transform: translateY(var(--tb-shift-y, 0px)) scale(var(--tb-scale, 1)) !important; transform-origin: left center; transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease; user-select: none; will-change: transform; } .scope-flow-toolbar-button:hover, .scope-flow-toolbar-button:focus-visible { background: #ffffff; border-color: rgba(31, 42, 37, 0.24); box-shadow: 0 14px 28px rgba(18, 24, 22, 0.14), 0 0 0 3px rgba(255, 255, 255, 0.68), inset 0 1px 0 rgba(255, 255, 255, 0.96); } .scope-flow-toolbar-button[aria-pressed="true"] { color: #ffffff; background: #202522; border-color: #202522; } .scope-flow-toolbar-button svg { display: block; width: 18px; height: 18px; margin: auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } .scope-flow-node { position: relative; display: flex; gap: 18px; align-items: stretch; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; color: #151a17; background: transparent; border: 0; border-radius: 20px; box-shadow: none; cursor: grab; } .scope-flow-node:active { cursor: grabbing; } .scope-flow-card { position: relative; display: flex; flex: 0 0 430px; flex-direction: column; gap: 12px; height: 100%; min-width: 0; min-height: 0; padding: 18px; overflow: hidden; color: #171c19; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 250, 0.96)), #ffffff; border: 1px solid rgba(19, 27, 24, 0.16); border-radius: 18px; box-shadow: 0 22px 50px rgba(19, 27, 24, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.88); } .scope-flow-node.preview-none .scope-flow-card, .scope-flow-node.project.no-preview .scope-flow-card { flex-basis: 100%; } .scope-flow-card::before { position: absolute; inset: 0; pointer-events: none; content: ""; background: radial-gradient(circle at 12% 95%, rgba(34, 197, 94, 0.05), transparent 42%), linear-gradient(90deg, rgba(15, 23, 42, 0.025), transparent 40%); } .scope-flow-node.coverage.seo-selected .scope-flow-card { color: #171c19; background: #ffffff; border-color: rgba(31, 42, 37, 0.16); box-shadow: 0 20px 48px rgba(19, 27, 24, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.88); } .scope-flow-node.coverage.seo-selected .scope-flow-card::before { background: radial-gradient(circle at 18% 100%, rgba(34, 197, 94, 0.07), transparent 48%), linear-gradient(90deg, rgba(34, 197, 94, 0.045), transparent 62%); } .scope-flow-node.excluded .scope-flow-card, .scope-flow-node.seo-not-selected .scope-flow-card { color: #242a27; background: #ffffff; border-color: rgba(31, 42, 37, 0.14); box-shadow: 0 18px 42px rgba(19, 27, 24, 0.1); } .scope-flow-node.project .scope-flow-card { background: linear-gradient(180deg, rgba(250, 253, 251, 0.98), rgba(244, 249, 246, 0.98)), #f7faf8; border-color: rgba(46, 111, 100, 0.36); } .scope-flow-node-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } .scope-flow-title-group { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; } .scope-flow-node-icon { display: grid; width: 38px; height: 38px; place-items: center; color: #23443d; background: #eef4f1; border: 1px solid rgba(46, 111, 100, 0.16); border-radius: 12px; } .scope-flow-node.seo-selected .scope-flow-card .scope-flow-node-icon { color: #23443d; background: #eef4f1; border-color: rgba(46, 111, 100, 0.16); } .scope-flow-title-group strong { display: block; overflow: hidden; color: inherit; font-size: 16px; font-weight: 620; line-height: 1.18; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .scope-flow-title-group small { display: block; min-width: 0; overflow: hidden; margin-top: 2px; color: rgba(86, 97, 92, 0.88); font-size: 11px; font-weight: 680; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; } .scope-flow-node.seo-selected .scope-flow-card .scope-flow-title-group small { color: rgba(86, 97, 92, 0.88); } .scope-flow-check { display: grid; flex: 0 0 auto; width: 28px; height: 28px; place-items: center; cursor: pointer; } .scope-flow-check input { position: absolute; width: 1px; height: 1px; opacity: 0; } .scope-flow-check span { display: block; width: 19px; height: 19px; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.28); border-radius: 5px; } .scope-flow-check input:checked + span { background: #4ade80; border-color: #4ade80; box-shadow: inset 0 0 0 4px rgba(8, 37, 21, 0.92), 0 0 18px rgba(74, 222, 128, 0.42); } .scope-flow-check input:disabled + span { opacity: 0.44; } .scope-flow-preview-wing { position: relative; flex: 1 1 auto; display: flex; min-width: 620px; min-height: 0; padding: 0; } .scope-flow-preview-wing::before { position: absolute; top: 22px; bottom: 22px; left: -18px; width: 1px; pointer-events: none; content: ""; background: linear-gradient(180deg, transparent, rgba(150, 164, 158, 0.28), transparent); box-shadow: 0 0 20px rgba(150, 164, 158, 0.16); } .scope-flow-preview-empty .scope-flow-preview-frame { display: grid; place-items: center; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 248, 0.96)), #ffffff; } .scope-flow-preview-empty-copy { display: grid; max-width: 280px; gap: 7px; padding: 22px; color: #65716b; text-align: center; } .scope-flow-preview-empty-copy strong { color: #252c29; font-size: 14px; font-weight: 760; } .scope-flow-preview-empty-copy span { font-size: 12px; line-height: 1.42; } .scope-flow-preview-frame { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; background: #ffffff; border: 1px solid rgba(20, 29, 25, 0.14); border-radius: 18px; box-shadow: 0 20px 52px rgba(8, 15, 12, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8); } .scope-flow-node.seo-selected .scope-flow-preview-frame { background: #ffffff; border-color: rgba(20, 29, 25, 0.14); box-shadow: 0 20px 52px rgba(8, 15, 12, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8); } .scope-flow-preview-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; pointer-events: none; background: #ffffff; border: 0; opacity: 0; transition: opacity 160ms ease; } .scope-flow-preview-frame.is-loaded img { opacity: 1; } .scope-flow-preview-loader { position: absolute; inset: 0; z-index: 1; display: grid; gap: 7px; place-content: center; color: #65716b; text-align: center; background: linear-gradient(90deg, rgba(31, 42, 37, 0.05) 0 16%, transparent 16% 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 248, 0.96)), #ffffff; background-size: 100% 32px, 100% 100%; } .scope-flow-preview-loader strong { color: #252c29; font-size: 14px; font-weight: 760; } .scope-flow-preview-loader span { font-size: 12px; line-height: 1.42; } .scope-flow-preview-frame.is-failed .scope-flow-preview-loader span { color: #9a3412; } .scope-flow-preview-frame::after { position: absolute; inset: 0; pointer-events: none; content: ""; background: linear-gradient(180deg, transparent 68%, rgba(0, 0, 0, 0.08)), radial-gradient(circle at 12% 100%, rgba(34, 197, 94, 0.06), transparent 44%); } .scope-flow-node-copy { position: relative; z-index: 1; display: grid; flex: 0 0 auto; gap: 7px; min-width: 0; padding: 12px 14px; background: rgba(247, 249, 248, 0.86); border: 1px solid rgba(31, 42, 37, 0.08); border-radius: 13px; } .scope-flow-node.seo-selected .scope-flow-card .scope-flow-node-copy { background: rgba(247, 249, 248, 0.86); border-color: rgba(31, 42, 37, 0.08); } .scope-flow-node-copy small, .scope-flow-node-copy p { overflow: hidden; margin: 0; color: #5f6b66; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .scope-flow-node-copy p { color: #252c29; font-size: 13px; font-weight: 520; display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .scope-flow-node.seo-selected .scope-flow-card .scope-flow-node-copy small, .scope-flow-node.seo-selected .scope-flow-card .scope-flow-node-copy p { color: #5f6b66; } .scope-flow-heading-strip { position: relative; z-index: 1; display: flex; flex: 0 0 auto; gap: 5px; min-width: 0; overflow: hidden; } .scope-flow-heading-strip span { overflow: hidden; max-width: 160px; padding: 4px 8px; color: #5e6a65; background: #f2f5f3; border-radius: 999px; font-size: 10px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; } .scope-flow-preview-note { position: relative; z-index: 1; overflow: hidden; color: #66736d; font-size: 11px; font-weight: 620; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .scope-flow-node.seo-selected .scope-flow-heading-strip span { color: #5e6a65; background: #f2f5f3; } .scope-flow-handle { z-index: 3; width: 15px; height: 15px; background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(150, 164, 158, 0.72); border-radius: 999px; box-shadow: 0 0 0 8px rgba(150, 164, 158, 0.08), 0 0 20px rgba(150, 164, 158, 0.22); } .scope-flow-handle::after { position: absolute; inset: 5px; content: ""; background: #9aa7a1; border-radius: inherit; } .scope-flow-node.coverage.seo-selected .scope-flow-handle { border-color: rgba(34, 197, 94, 0.78); box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.08), 0 0 26px rgba(34, 197, 94, 0.34); } .scope-flow-node.coverage.seo-selected .scope-flow-handle::after { background: #22c55e; } .scope-flow-handle-left { left: -20px !important; } .scope-flow-handle-right { right: -20px !important; } .scope-flow-resize-line { border-color: transparent !important; opacity: 0 !important; } .scope-flow-resize-handle { width: 22px !important; height: 22px !important; background: transparent !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; opacity: 0 !important; } .scope-flow-edge { pointer-events: none; } .scope-flow-edge .react-flow__edge-path { stroke-width: 2.2; filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.28)); } .scope-flow-edge.coverage .react-flow__edge-path { stroke: rgba(34, 197, 94, 0.72); } .scope-flow-edge.muted .react-flow__edge-path { stroke: rgba(98, 112, 106, 0.36); filter: none; } .engineering-page-list { display: grid; gap: 12px; padding: 12px; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); border-radius: 14px; } .engineering-page-list > summary { cursor: pointer; color: #3d4743; font-size: 13px; font-weight: 780; list-style: none; } .engineering-page-list > summary::-webkit-details-marker { display: none; } .engineering-page-list > summary::before { content: "+"; display: inline-grid; width: 18px; height: 18px; margin-right: 7px; place-items: center; color: #ffffff; background: #202522; border-radius: 5px; font-size: 12px; } .engineering-page-list[open] > summary::before { content: "-"; } .page-audit-summary { display: flex; flex-wrap: wrap; gap: 8px; } .page-audit-summary span { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 13px; color: var(--muted); background: #f6f6f7; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; } .page-audit-list { display: grid; gap: 10px; } .page-audit-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; width: 100%; padding: 18px 22px; color: var(--ink); text-align: left; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); border-radius: 20px; cursor: pointer; transition: background 160ms ease, border-color 160ms ease; } .page-audit-card:hover, .page-audit-card:focus-visible { background: rgba(242, 122, 26, 0.065); border-color: rgba(242, 122, 26, 0.34); outline: none; } .page-audit-card:disabled { cursor: wait; opacity: 0.72; } .page-audit-card-main { display: grid; gap: 8px; min-width: 0; } .page-audit-card-main > div { display: grid; gap: 4px; } .page-audit-card strong { overflow-wrap: anywhere; font-size: 16px; font-weight: 650; letter-spacing: -0.02em; } .page-audit-card small, .page-audit-card p { color: var(--muted); font-size: 13px; line-height: 1.4; } .page-audit-card p { color: var(--ink); font-weight: 500; } .page-audit-details { display: grid; gap: 10px; } .page-audit-toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; width: fit-content; min-height: 0; padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; font-size: 13px; font-weight: 400; line-height: 1.4; text-align: left; } .page-audit-toggle::before { content: ""; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid currentColor; opacity: 0.78; transform: translateY(0.5px); transition: transform 160ms ease; } .page-audit-toggle:hover, .page-audit-toggle:focus-visible { color: var(--accent); outline: none; } .page-audit-toggle[aria-expanded="true"] { color: var(--ink); font-weight: 500; } .page-audit-toggle[aria-expanded="true"]::before { transform: rotate(90deg) translateX(1px); } .page-audit-issue-list { display: grid; gap: 8px; margin-top: 8px; } .page-audit-issue { display: grid; gap: 5px; padding: 12px; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); border-radius: 14px; } .page-audit-issue > span { width: fit-content; padding: 3px 8px; color: #8a5a00; background: rgba(255, 204, 0, 0.18); border-radius: 999px; font-size: 11px; font-weight: 650; } .page-audit-issue.error > span { color: var(--danger); background: var(--danger-soft); } .page-audit-issue.info > span { color: var(--muted); background: rgba(0, 0, 0, 0.055); } .page-audit-issue strong { font-size: 13px; font-weight: 650; letter-spacing: 0; } .page-audit-issue p, .page-audit-issue small { color: var(--muted); font-size: 12px; line-height: 1.42; } .page-audit-issue p b { color: var(--ink); font-weight: 650; } .page-audit-card-arrow { color: rgba(31, 31, 33, 0.44); font-size: 24px; line-height: 1; transition: color 160ms ease, transform 160ms ease; } .page-audit-card:hover .page-audit-card-arrow, .page-audit-card:focus-visible .page-audit-card-arrow { color: var(--accent); transform: translateX(3px); } .page-audit-loading { justify-content: flex-start !important; } .scan-summary:not(.muted) { gap: 16px !important; margin-top: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; } .scan-selection, .page-workspace-panel, .audit-summary { padding: 18px !important; background: #f8f8fa !important; border: 1px solid rgba(0, 0, 0, 0.07) !important; border-radius: 20px !important; box-shadow: none !important; backdrop-filter: none !important; } .scan-help, .workspace-help, .audit-help, .seed-help, .workspace-raw-draft, .media-issue-panel, .workspace-preview-panel, .workspace-page-issues, .workspace-section-workbench, .section-editor-card, .scan-page-tree-group, .scan-page-option, .audit-page-group, .audit-issue, .media-issue-row, .section-map-card, .workspace-issue-list button { background: #fff !important; border: 1px solid rgba(0, 0, 0, 0.065) !important; border-radius: 16px !important; box-shadow: none !important; backdrop-filter: none !important; } .scan-page-tree-group, .audit-page-group { padding: 14px !important; } .page-workspace-heading, .scan-selection-bar, .audit-heading, .workspace-subheading, .audit-page-heading { align-items: flex-start !important; } .workspace-preview-layout, .section-workbench-grid { grid-template-columns: minmax(0, 1fr) !important; } .workspace-preview-panel iframe { min-height: 640px !important; border-radius: 16px !important; } .project-meta { padding-top: 14px; border-top: 1px solid var(--line); } .project-site-title { max-width: min(680px, 100%); overflow-wrap: anywhere; } @media (min-width: 980px) { .project-form { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; } .project-form .form-message, .project-form .primary-action { grid-column: auto; } } @media (min-width: 1500px) { .project-grid { grid-template-columns: minmax(360px, 430px) minmax(0, 1fr) !important; align-items: start; } .project-form { grid-template-columns: minmax(0, 1fr) !important; } .project-form .form-message, .project-form .primary-action { grid-column: auto; } } /* Stage navigation pass: neutral accent and one logical screen per step. */ :root { --accent: #202124; --accent-hover: #111113; --accent-soft: rgba(24, 32, 29, 0.08); --accent-ring: rgba(24, 32, 29, 0.14); --accent-shadow: rgba(24, 32, 29, 0.18); } .nav-item { cursor: pointer !important; } .nav-item:hover { color: var(--ink) !important; background: rgba(255, 255, 255, 0.6) !important; } .nav-item.active { color: #fff !important; background: linear-gradient(135deg, #1f1f21, #29292c) !important; } .nav-item.active span, .nav-item.active strong { color: #fff !important; } .brand-mark { background: linear-gradient(145deg, rgba(255, 255, 255, 0.24), transparent 42%), linear-gradient(145deg, #1d1d1f, #2b2b2e) !important; } .nav-item.locked { cursor: not-allowed !important; opacity: 0.42; } .nav-item.locked:hover { color: var(--muted) !important; background: transparent !important; } .flow-status-strip { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-sm); } .flow-status-strip > div:first-child { display: grid; min-width: 0; gap: 4px; } .flow-status-strip span { color: #4e6976; font-size: 11px; font-weight: 900; text-transform: uppercase; } .flow-status-strip strong { color: var(--ink); overflow-wrap: anywhere; } .flow-status-strip small { color: var(--muted); font-weight: 760; line-height: 1.35; } .flow-status-strip.locked { background: rgba(250, 250, 250, 0.72); } .flow-status-strip.locked span { color: #8b2f2f; } .flow-status-metrics { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } .flow-status-metrics span { padding: 5px 8px; color: #2f6b4f; background: rgba(47, 107, 79, 0.07); border: 1px solid rgba(47, 107, 79, 0.12); border-radius: 999px; text-transform: none; } .project-flow-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .configuration-confirm-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px; background: #f8faf8; border: 1px solid var(--line); border-radius: 8px; } .configuration-confirm-bar > div { display: grid; min-width: 0; gap: 4px; } .configuration-confirm-bar span, .strategy-phase-heading span, .strategy-phase-detail span, .strategy-phase-detail-grid span { color: #4e6976; font-size: 11px; font-weight: 900; text-transform: uppercase; } .configuration-confirm-bar strong, .strategy-phase-heading strong, .strategy-phase-detail strong { color: var(--ink); } .configuration-confirm-bar small { color: var(--muted); font-weight: 760; } .strategy-cockpit { display: grid; gap: 12px; } .strategy-decision-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.92fr); gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--line); border-left: 4px solid #2f6b4f; border-radius: 8px; } .strategy-decision-toolbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding-bottom: 10px; border-bottom: 1px solid rgba(24, 32, 29, 0.08); } .strategy-decision-toolbar > span { flex: 0 0 auto; color: #4e6976; font-size: 11px; font-weight: 900; text-transform: uppercase; } .strategy-decision-main, .strategy-decision-side, .strategy-section, .strategy-section-heading, .strategy-landing-card, .strategy-plan-grid article, .strategy-blocked-grid article { display: grid; min-width: 0; } .strategy-decision-main { align-content: start; gap: 8px; } .strategy-decision-side { align-content: space-between; gap: 10px; } .strategy-decision-main > span, .strategy-section-heading span, .strategy-coverage-strip span, .strategy-data-table span, .strategy-landing-head span, .strategy-chip-list span, .strategy-required-list span, .strategy-plan-grid span, .strategy-choice-grid span { color: #4e6976; font-size: 11px; font-weight: 900; text-transform: uppercase; } .strategy-decision-main strong { color: var(--ink); font-size: 26px; line-height: 1.08; overflow-wrap: anywhere; } .strategy-decision-main p, .strategy-landing-card p, .strategy-choice-grid p { margin: 0; color: var(--ink); font-size: 14px; font-weight: 780; line-height: 1.42; } .strategy-decision-main small, .strategy-section-heading small, .strategy-coverage-strip small, .strategy-data-table small, .strategy-landing-card small, .strategy-landing-meta span, .strategy-plan-grid small, .strategy-blocked-grid small, .strategy-choice-grid small { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 760; line-height: 1.38; overflow-wrap: anywhere; } .strategy-coverage-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; } .strategy-coverage-strip article { display: grid; align-content: start; gap: 4px; min-width: 0; min-height: 86px; padding: 9px; background: #f8faf8; border: 1px solid rgba(47, 107, 79, 0.14); border-radius: 8px; } .strategy-coverage-strip strong, .strategy-section-heading strong, .strategy-data-table strong, .strategy-landing-card strong, .strategy-plan-grid strong, .strategy-blocked-grid strong { color: var(--ink); font-size: 14px; line-height: 1.24; overflow-wrap: anywhere; } .strategy-section { gap: 10px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .strategy-decision-rule { padding: 7px 9px; color: #1f5f43 !important; background: rgba(47, 107, 79, 0.065); border: 1px solid rgba(47, 107, 79, 0.14); border-radius: 7px; } .strategy-lock-summary-compact { display: grid; gap: 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .strategy-lock-summary-compact summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: start; cursor: pointer; list-style: none; } .strategy-lock-summary-compact summary::-webkit-details-marker { display: none; } .strategy-lock-summary-compact summary span { grid-row: span 2; color: #4e6976; font-size: 11px; font-weight: 900; text-transform: uppercase; } .strategy-lock-summary-compact summary strong { color: var(--ink); font-size: 13px; line-height: 1.25; } .strategy-lock-summary-compact summary small { color: var(--muted); font-size: 12px; font-weight: 760; line-height: 1.35; } .strategy-lock-summary-compact[open] .strategy-lock-grid { margin-top: 10px; } .strategy-decision-confirm-backdrop { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 18px; background: rgba(10, 12, 14, 0.28); backdrop-filter: var(--nodedc-glass-panel-blur); -webkit-backdrop-filter: var(--nodedc-glass-panel-blur); } .strategy-decision-confirm { display: grid; gap: 12px; width: min(760px, 100%); max-height: min(86vh, 760px); overflow: auto; padding: 14px; background: var(--nodedc-glass-panel-surface-strong); border: 1px solid var(--nodedc-glass-outline); border-radius: 12px; box-shadow: var(--nodedc-glass-panel-shadow), 0 30px 120px rgba(0, 0, 0, 0.22); backdrop-filter: var(--nodedc-glass-panel-blur); -webkit-backdrop-filter: var(--nodedc-glass-panel-blur); } .strategy-decision-confirm header, .strategy-decision-confirm footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .strategy-decision-confirm header > div { display: grid; gap: 4px; } .strategy-decision-confirm header span, .strategy-confirm-grid span { color: #4e6976; font-size: 11px; font-weight: 900; text-transform: uppercase; } .strategy-decision-confirm header strong { color: var(--ink); font-size: 18px; line-height: 1.18; } .strategy-decision-confirm header button { display: grid; width: 34px; height: 34px; place-items: center; color: var(--ink); background: rgba(24, 32, 29, 0.055); border: 0; border-radius: 999px; cursor: pointer; } .strategy-confirm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .strategy-confirm-grid article { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 10px; background: #fafafa; border: 1px solid var(--line); border-radius: 8px; } .strategy-confirm-grid strong { color: var(--ink); font-size: 14px; line-height: 1.24; overflow-wrap: anywhere; } .strategy-confirm-grid small { color: var(--muted); font-size: 12px; font-weight: 760; line-height: 1.35; overflow-wrap: anywhere; } .strategy-decision-confirm footer { justify-content: flex-end; } .strategy-stage-input-contract { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 10px; padding: 12px; background: rgba(47, 107, 79, 0.055); border: 1px solid rgba(47, 107, 79, 0.16); border-radius: 8px; } .strategy-stage-input-contract > div { display: grid; align-content: start; gap: 5px; min-width: 0; } .strategy-stage-input-contract span { color: #2f6b4f; font-size: 11px; font-weight: 900; text-transform: uppercase; } .strategy-stage-input-contract strong { color: var(--ink); font-size: 14px; line-height: 1.24; overflow-wrap: anywhere; } .strategy-stage-input-contract small { color: var(--muted); font-size: 12px; font-weight: 760; line-height: 1.35; overflow-wrap: anywhere; } .strategy-section-heading { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; } .strategy-section-heading > div { display: grid; gap: 3px; } .strategy-table-wrap { overflow-x: auto; border: 1px solid rgba(24, 32, 29, 0.08); border-radius: 8px; } .strategy-data-table { width: 100%; min-width: 860px; border-collapse: collapse; background: #fff; } .strategy-data-table th, .strategy-data-table td { padding: 10px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(24, 32, 29, 0.07); } .strategy-data-table th { color: #4e6976; background: #f8faf8; font-size: 11px; font-weight: 900; text-transform: uppercase; } .strategy-data-table td { color: var(--ink); font-size: 12px; font-weight: 760; line-height: 1.38; } .strategy-data-table td > small, .strategy-data-table td > strong { display: block; } .strategy-data-table tr:last-child td { border-bottom: 0; } .strategy-keyword-group-row td { padding-top: 12px; padding-bottom: 8px; background: rgba(83, 104, 121, 0.055); } .strategy-keyword-group-row strong, .strategy-keyword-group-row small { display: inline-flex; margin-right: 8px; } .strategy-row-details { margin-top: 4px; } .strategy-row-details summary { display: inline-flex; align-items: center; min-height: 22px; padding: 0; color: #4e6976; background: transparent; border-radius: 0; font-size: 11px; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .strategy-row-details small { margin-top: 5px; } .strategy-keyword-more-row td { background: rgba(83, 104, 121, 0.035); } .strategy-keyword-more-row td { display: flex; align-items: center; gap: 8px; } .strategy-keyword-more-row small { color: var(--muted); font-size: 12px; font-weight: 760; } .strategy-data-table .collected, .strategy-data-table .ready_for_collection, .strategy-data-table .partial_ready, .strategy-data-table .not_configured, .strategy-landing-head .collected, .strategy-landing-head .ready_for_collection, .strategy-landing-head .partial_ready, .strategy-landing-head .not_configured { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; text-transform: uppercase; } .strategy-data-table .collected, .strategy-landing-head .collected { color: #2f6b4f; background: rgba(47, 107, 79, 0.08); } .strategy-data-table .ready_for_collection, .strategy-landing-head .ready_for_collection, .strategy-data-table .partial_ready, .strategy-landing-head .partial_ready { color: #8a5a14; background: rgba(178, 119, 31, 0.08); } .strategy-data-table .not_configured, .strategy-landing-head .not_configured { color: #8b2f2f; background: rgba(139, 47, 47, 0.07); } .strategy-landing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .strategy-scenario-decision-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .strategy-scenario-decision-grid article { display: grid; align-content: start; gap: 9px; min-width: 0; padding: 10px; background: #fafafa; border: 1px solid var(--line); border-radius: 8px; } .strategy-scenario-decision-grid article.selected { background: rgba(47, 107, 79, 0.075); border-color: rgba(47, 107, 79, 0.28); box-shadow: inset 0 0 0 1px rgba(47, 107, 79, 0.14); } .strategy-scenario-card-head, .strategy-scenario-card-metrics, .strategy-scenario-card-tags { display: flex; flex-wrap: wrap; gap: 6px; } .strategy-scenario-card-head { align-items: flex-start; flex-direction: column; } .strategy-scenario-card-head span, .strategy-scenario-card-metrics span, .strategy-scenario-card-tags span, .strategy-landing-lanes > section > span, .strategy-control-grid span, .strategy-ledger-grid span, .strategy-lock-grid span, .strategy-scorecard-grid span, .strategy-positioning-grid span, .strategy-serp-grid span, .strategy-serp-summary-grid span, .strategy-serp-type-grid span, .strategy-cluster-phrase-split span, .strategy-diff-grid span, .strategy-content-gap-list span, .strategy-forecast-formula span { color: #4e6976; font-size: 11px; font-weight: 900; text-transform: uppercase; } .strategy-scenario-card-head strong, .strategy-ledger-grid strong, .strategy-lock-grid strong, .strategy-scorecard-grid strong, .strategy-positioning-grid strong, .strategy-serp-grid strong, .strategy-serp-summary-grid strong, .strategy-serp-type-grid strong, .strategy-cluster-phrase-split strong, .strategy-diff-grid strong, .strategy-content-gap-list strong, .strategy-forecast-formula strong { color: var(--ink); font-size: 14px; line-height: 1.22; overflow-wrap: anywhere; } .strategy-scenario-decision-grid p { margin: 0; color: var(--ink); font-size: 12px; font-weight: 760; line-height: 1.38; } .strategy-scenario-decision-grid small, .strategy-ledger-grid small, .strategy-lock-grid small, .strategy-scorecard-grid small, .strategy-positioning-grid small, .strategy-serp-grid small, .strategy-serp-summary-grid small, .strategy-serp-type-grid small, .strategy-cluster-phrase-split small, .strategy-diff-grid small, .strategy-content-gap-list small, .strategy-forecast-formula small, .strategy-scenario-comparison small { color: var(--muted); font-size: 12px; font-weight: 760; line-height: 1.35; } .strategy-scenario-card-metrics span, .strategy-scenario-card-tags span { padding: 5px 7px; color: var(--ink); background: rgba(24, 32, 29, 0.04); border: 1px solid rgba(24, 32, 29, 0.06); border-radius: 7px; text-transform: none; } .strategy-forecast-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 8px; } .strategy-ledger-grid, .strategy-lock-grid, .strategy-scorecard-grid, .strategy-positioning-grid, .strategy-serp-grid, .strategy-serp-summary-grid, .strategy-serp-type-grid, .strategy-cluster-phrase-split, .strategy-diff-grid { display: grid; gap: 8px; } .strategy-ledger-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .strategy-lock-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } .strategy-scorecard-grid { grid-column: 1 / -1; grid-template-columns: repeat(6, minmax(0, 1fr)); } .strategy-positioning-grid, .strategy-serp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .strategy-serp-summary-grid, .strategy-serp-type-grid, .strategy-diff-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .strategy-cluster-phrase-split { grid-template-columns: repeat(3, minmax(0, 1fr)); } .strategy-ledger-grid article, .strategy-lock-grid article, .strategy-scorecard-grid article, .strategy-positioning-grid article, .strategy-serp-grid article, .strategy-serp-summary-grid article, .strategy-serp-type-grid article, .strategy-cluster-phrase-split article, .strategy-diff-grid article, .strategy-content-gap-list article, .strategy-forecast-formula { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 10px; background: #fafafa; border: 1px solid var(--line); border-radius: 8px; } .strategy-ledger-grid article.tone-good, .strategy-lock-grid article.tone-good, .strategy-scorecard-grid article.tone-good, .strategy-serp-summary-grid article.tone-good, .strategy-serp-type-grid article.tone-good, .strategy-cluster-phrase-split article.tone-good, .strategy-diff-grid article.tone-good { background: rgba(47, 107, 79, 0.055); border-color: rgba(47, 107, 79, 0.18); } .strategy-ledger-grid article.tone-warning, .strategy-lock-grid article.tone-warning, .strategy-scorecard-grid article.tone-warning, .strategy-serp-summary-grid article.tone-warning, .strategy-serp-type-grid article.tone-warning, .strategy-cluster-phrase-split article.tone-warning, .strategy-diff-grid article.tone-warning { background: rgba(178, 119, 31, 0.055); border-color: rgba(178, 119, 31, 0.18); } .strategy-ledger-grid article.tone-problem, .strategy-lock-grid article.tone-problem, .strategy-scorecard-grid article.tone-problem, .strategy-serp-summary-grid article.tone-problem, .strategy-serp-type-grid article.tone-problem, .strategy-cluster-phrase-split article.tone-problem, .strategy-diff-grid article.tone-problem { background: rgba(139, 47, 47, 0.045); border-color: rgba(139, 47, 47, 0.14); } .strategy-forecast-formula { grid-column: 1 / -1; } .strategy-forecast-formula strong { padding: 7px 9px; background: rgba(47, 107, 79, 0.055); border: 1px solid rgba(47, 107, 79, 0.12); border-radius: 7px; font-size: 13px; } .strategy-scenario-comparison { display: grid; gap: 8px; margin-top: 8px; padding: 10px; background: rgba(83, 104, 121, 0.05); border: 1px solid rgba(83, 104, 121, 0.12); border-radius: 8px; } .strategy-scenario-comparison > div:first-child { display: grid; gap: 3px; } .strategy-scenario-comparison .selected-scenario-cell { color: #1f5f43; background: rgba(47, 107, 79, 0.075); font-weight: 900; } .strategy-scenario-diff { display: grid; gap: 8px; } .strategy-scenario-diff > strong, .strategy-content-gap-list > strong { color: var(--ink); font-size: 13px; font-weight: 900; } .strategy-serp-summary-grid, .strategy-serp-type-grid, .strategy-cluster-phrase-split { margin-top: 8px; } .strategy-content-gap-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } .strategy-content-gap-list > strong { grid-column: 1 / -1; } .strategy-control-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .strategy-control-grid > div { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px; min-width: 0; padding: 10px; background: #fafafa; border: 1px solid var(--line); border-radius: 8px; } .strategy-control-grid span { flex: 0 0 100%; } .strategy-control-grid button { min-height: 30px; padding: 5px 9px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; font-weight: 820; cursor: pointer; } .strategy-control-grid button.active { color: #fff; background: #2f6b4f; border-color: #2f6b4f; } .strategy-landing-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .strategy-site-portfolio .strategy-landing-lanes { grid-template-columns: 1fr; } .strategy-landing-lanes > section { display: grid; align-content: start; gap: 8px; min-width: 0; } .strategy-site-portfolio .strategy-landing-lanes > section { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .strategy-site-portfolio .strategy-landing-lanes > section > span { grid-column: 1 / -1; } .strategy-landing-card { align-content: start; gap: 9px; padding: 10px; background: #fafafa; border: 1px solid var(--line); border-radius: 8px; } .strategy-landing-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 8px; align-items: start; } .strategy-landing-head span { grid-row: span 2; } .strategy-landing-meta, .strategy-chip-list, .strategy-required-list { display: flex; flex-wrap: wrap; gap: 6px; } .strategy-landing-meta span { padding: 5px 7px; background: rgba(24, 32, 29, 0.04); border: 1px solid rgba(24, 32, 29, 0.06); border-radius: 7px; } .strategy-chip-list span, .strategy-required-list span { padding: 5px 7px; background: rgba(83, 104, 121, 0.07); border-radius: 7px; text-transform: none; } .strategy-required-list span { color: var(--ink); background: rgba(47, 107, 79, 0.06); font-weight: 780; } .strategy-landing-actions { display: flex; flex-wrap: wrap; gap: 6px; } .strategy-landing-actions .tiny-action { min-height: 28px; padding: 4px 8px; font-size: 11px; } .strategy-plan-grid, .strategy-blocked-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .strategy-plan-grid article, .strategy-blocked-grid article { align-content: start; gap: 6px; min-height: 112px; padding: 10px; background: #fafafa; border: 1px solid var(--line); border-radius: 8px; } .strategy-blocked-grid article { background: rgba(139, 47, 47, 0.045); border-color: rgba(139, 47, 47, 0.14); } .strategy-blocked-grid strong { color: #7a2a2a; } .strategy-dev-details-body { display: grid; gap: 12px; } .strategy-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr); gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--line); border-left: 4px solid #536879; border-radius: 8px; } .strategy-hero.tone-good { border-left-color: #2f6b4f; } .strategy-hero.tone-warning { border-left-color: #b2771f; } .strategy-hero.tone-problem { border-left-color: #8b2f2f; } .strategy-hero-main, .strategy-hero-side, .strategy-hero-side > div:first-child, .strategy-action-grid section, .strategy-route-board, .strategy-choice-panel { display: grid; align-content: start; gap: 8px; min-width: 0; } .strategy-hero-main > span, .strategy-hero-side span, .strategy-action-grid span, .strategy-evidence-grid span, .strategy-route-heading span, .strategy-route-grid span, .strategy-choice-grid span, .strategy-gate-grid span { color: #4e6976; font-size: 11px; font-weight: 900; text-transform: uppercase; } .strategy-hero-main strong { color: var(--ink); font-size: 28px; line-height: 1.05; } .strategy-hero-side strong, .strategy-route-heading strong { color: var(--ink); font-size: 16px; line-height: 1.22; } .strategy-hero-main p, .strategy-choice-grid p { margin: 0; color: var(--ink); font-size: 14px; font-weight: 780; line-height: 1.42; overflow-wrap: anywhere; } .strategy-hero-main small, .strategy-hero-side small, .strategy-action-grid strong, .strategy-evidence-grid small, .strategy-route-grid small, .strategy-route-grid em, .strategy-choice-grid small { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 760; line-height: 1.38; overflow-wrap: anywhere; } .strategy-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; } .strategy-gate-grid, .strategy-action-grid, .strategy-evidence-grid, .strategy-route-grid, .strategy-choice-grid { display: grid; gap: 8px; } .strategy-gate-grid, .strategy-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .strategy-evidence-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .strategy-gate-grid article, .strategy-action-grid section, .strategy-evidence-grid article, .strategy-route-board, .strategy-choice-panel, .strategy-choice-grid article { min-width: 0; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .strategy-gate-grid article { display: grid; gap: 5px; min-height: 112px; } .strategy-gate-grid article.ready { background: rgba(47, 107, 79, 0.065); border-color: rgba(47, 107, 79, 0.2); } .strategy-gate-grid article.locked { background: rgba(139, 47, 47, 0.045); border-color: rgba(139, 47, 47, 0.14); } .strategy-gate-grid article.ready span, .strategy-evidence-grid article.tone-good span { color: #2f6b4f; } .strategy-gate-grid article.locked span, .strategy-evidence-grid article.tone-problem span { color: #8b2f2f; } .strategy-gate-grid strong, .strategy-evidence-grid strong, .strategy-choice-grid strong { color: var(--ink); font-size: 14px; line-height: 1.22; } .strategy-gate-grid small { color: var(--muted); font-size: 12px; font-weight: 760; line-height: 1.35; } .strategy-action-grid section > div { display: grid; gap: 6px; } .strategy-action-grid strong { padding: 7px 8px; background: rgba(24, 32, 29, 0.035); border: 1px solid rgba(24, 32, 29, 0.06); border-radius: 7px; } .strategy-evidence-grid article { display: grid; gap: 5px; min-height: 104px; } .strategy-evidence-grid article.tone-good { background: rgba(47, 107, 79, 0.055); border-color: rgba(47, 107, 79, 0.18); } .strategy-evidence-grid article.tone-warning { background: rgba(178, 119, 31, 0.06); border-color: rgba(178, 119, 31, 0.18); } .strategy-evidence-grid article.tone-warning span { color: #8a5a14; } .strategy-route-board, .strategy-choice-panel { gap: 10px; } .strategy-route-heading { display: grid; gap: 4px; } .strategy-route-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .strategy-route-grid button { display: grid; align-content: start; gap: 7px; min-height: 168px; padding: 10px; text-align: left; background: #fafafa; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; } .strategy-route-grid button.current { background: rgba(47, 107, 79, 0.075); border-color: rgba(47, 107, 79, 0.28); box-shadow: inset 0 0 0 1px rgba(47, 107, 79, 0.2); } .strategy-route-grid button.locked { background: rgba(24, 32, 29, 0.026); } .strategy-route-grid strong { color: var(--ink); font-size: 14px; line-height: 1.2; } .strategy-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .strategy-choice-grid article { display: grid; gap: 7px; } .strategy-phase-selector { display: grid; gap: 10px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .strategy-phase-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .strategy-phase-heading > div { display: grid; gap: 4px; } .strategy-phase-heading small, .strategy-phase-detail p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 760; line-height: 1.4; } .strategy-phase-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .strategy-phase-tabs button { display: grid; min-height: 112px; gap: 6px; align-content: start; padding: 10px; text-align: left; background: #fafafa; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; } .strategy-phase-tabs button.active { background: rgba(47, 107, 79, 0.08); border-color: rgba(47, 107, 79, 0.28); } .strategy-phase-tabs button.recommended { box-shadow: inset 0 0 0 1px rgba(47, 107, 79, 0.22); } .strategy-phase-tabs button span { justify-self: start; padding: 4px 8px; color: #2f6b4f; background: rgba(47, 107, 79, 0.07); border-radius: 999px; font-size: 11px; font-weight: 900; } .strategy-phase-tabs button strong { color: var(--ink); font-size: 14px; line-height: 1.2; } .strategy-phase-tabs button small { color: var(--muted); font-size: 12px; font-weight: 760; line-height: 1.35; } .strategy-phase-detail { display: grid; gap: 10px; padding: 12px; background: #f8faf8; border: 1px solid rgba(47, 107, 79, 0.14); border-radius: 8px; } .strategy-phase-detail > div:first-child { display: grid; gap: 4px; } .strategy-phase-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .strategy-phase-detail-grid article { display: grid; align-content: start; gap: 6px; padding: 10px; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); border-radius: 8px; } .strategy-phase-detail-grid article strong { color: var(--ink); font-size: 12px; line-height: 1.35; } @media (max-width: 900px) { .flow-status-strip, .configuration-confirm-bar { align-items: stretch; flex-direction: column; } .flow-status-metrics { justify-content: flex-start; } .strategy-decision-hero, .strategy-coverage-strip, .strategy-ledger-grid, .strategy-lock-grid, .strategy-scenario-decision-grid, .strategy-forecast-layout, .strategy-scorecard-grid, .strategy-positioning-grid, .strategy-serp-grid, .strategy-serp-summary-grid, .strategy-serp-type-grid, .strategy-cluster-phrase-split, .strategy-diff-grid, .strategy-confirm-grid, .strategy-stage-input-contract, .strategy-content-gap-list, .strategy-control-grid, .strategy-landing-lanes, .strategy-landing-grid, .strategy-plan-grid, .strategy-blocked-grid, .strategy-hero, .strategy-gate-grid, .strategy-action-grid, .strategy-evidence-grid, .strategy-route-grid, .strategy-choice-grid, .strategy-phase-tabs, .strategy-phase-detail-grid { grid-template-columns: 1fr; } .strategy-decision-main strong { font-size: 22px; } .strategy-decision-toolbar, .stage-6 .market-heading { align-items: stretch; flex-direction: column; } .strategy-hero-actions { justify-content: flex-start; } .strategy-section-heading { grid-template-columns: 1fr; } .strategy-lock-summary-compact summary, .strategy-decision-confirm header, .strategy-decision-confirm footer { grid-template-columns: 1fr; align-items: stretch; flex-direction: column; } .strategy-hero-main strong { font-size: 22px; } } .topbar { color: #fff !important; background: radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.08), transparent 28%), radial-gradient(circle at 12% 96%, rgba(255, 255, 255, 0.08), transparent 28%), linear-gradient(135deg, #111113 0%, #1d1d20 52%, #242426 100%) !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 22px 52px rgba(18, 16, 14, 0.18) !important; } .topbar::after { background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 65%) !important; } .topbar h2 { color: #fff !important; } .topbar .eyebrow { color: rgba(255, 255, 255, 0.62) !important; } .primary-action, .primary, .tiny-action.primary, .ghost-action.primary, .project-form button[type="submit"], .folder-picker-panel .folder-pick-action, .folder-picker-panel button.folder-pick-action, .folder-pick-action { background: var(--accent) !important; box-shadow: 0 10px 24px var(--accent-shadow) !important; } .primary-action:hover, .primary:hover, .tiny-action.primary:hover, .ghost-action.primary:hover, .project-form button[type="submit"]:hover, .folder-picker-panel .folder-pick-action:hover, .folder-picker-panel button.folder-pick-action:hover, .folder-pick-action:hover { background: var(--accent-hover) !important; box-shadow: 0 14px 30px rgba(242, 122, 26, 0.3) !important; } .semantic-page-plan-panel { display: grid; gap: 8px; padding: 10px; background: #fff !important; border: 1px solid var(--line) !important; border-radius: 8px; } .semantic-page-plan-panel > div:first-child { display: grid; gap: 3px; } .semantic-page-plan-panel strong, .semantic-page-plan-row strong { color: var(--ink); font-size: 13px; } .semantic-page-plan-panel small, .semantic-page-plan-panel p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 720; line-height: 1.38; } .semantic-page-plan-row { display: grid; grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .semantic-page-plan-row > div { display: grid; gap: 5px; min-width: 0; } .semantic-page-plan-row > div:first-child span { justify-self: start; padding: 4px 8px; color: #343434; background: #f5f5f5; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 900; } .semantic-page-plan-row.create > div:first-child span { color: #8b2f2f; background: rgba(139, 47, 47, 0.06); } .semantic-page-plan-row.strengthen > div:first-child span { color: #70521f; background: rgba(112, 82, 31, 0.07); } .semantic-brief-panel { display: grid; gap: 8px; padding: 10px; background: #fff !important; border: 1px solid var(--line) !important; border-radius: 8px; } .semantic-brief-panel > div:first-child { display: grid; gap: 3px; } .semantic-brief-panel strong, .semantic-brief-row strong { color: var(--ink); font-size: 13px; } .semantic-brief-panel small, .semantic-brief-panel p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 720; line-height: 1.38; } .semantic-brief-row { padding: 9px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .semantic-brief-row summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: start; cursor: pointer; list-style: none; } .semantic-brief-row summary::-webkit-details-marker { display: none; } .semantic-brief-row summary > span { justify-self: start; padding: 4px 8px; color: #343434; background: #f5f5f5; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 900; } .semantic-brief-row summary > .semantic-brief-quality { justify-self: end; color: #2f6b4f; background: rgba(47, 107, 79, 0.06); white-space: nowrap; } .semantic-brief-row summary > .semantic-brief-quality.needs_work { color: #70521f; background: rgba(112, 82, 31, 0.07); } .semantic-brief-row summary > .semantic-brief-quality.blocked { color: #8b2f2f; background: rgba(139, 47, 47, 0.06); } .semantic-brief-row summary > .semantic-brief-quality.legacy { color: #6d7c76; background: rgba(24, 32, 29, 0.06); } .semantic-brief-row.create summary > span { color: #8b2f2f; background: rgba(139, 47, 47, 0.06); } .semantic-brief-row.create summary > .semantic-brief-quality.ready { color: #2f6b4f; background: rgba(47, 107, 79, 0.06); } .semantic-brief-row.create summary > .semantic-brief-quality.needs_work { color: #70521f; background: rgba(112, 82, 31, 0.07); } .semantic-brief-row.create summary > .semantic-brief-quality.blocked { color: #8b2f2f; background: rgba(139, 47, 47, 0.06); } .semantic-brief-row.create summary > .semantic-brief-quality.legacy { color: #6d7c76; background: rgba(24, 32, 29, 0.06); } .semantic-brief-row summary > div, .semantic-brief-body, .semantic-brief-body section, .semantic-brief-section { display: grid; gap: 5px; min-width: 0; } .semantic-brief-body { padding-top: 9px; } .semantic-brief-section { padding: 7px; background: #fafafa; border: 1px solid var(--line); border-radius: 7px; } .semantic-brief-section span { color: var(--ink); font-size: 12px; font-weight: 900; } .semantic-brief-quality-card { padding: 8px; background: #fafafa; border: 1px solid var(--line); border-radius: 7px; } .semantic-brief-quality-card > div:first-child { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .semantic-brief-quality-card > div:first-child span { color: #2f6b4f; font-size: 12px; font-weight: 900; } .semantic-brief-checks { display: flex; flex-wrap: wrap; gap: 5px; } .semantic-brief-checks span { padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 900; } .semantic-brief-checks .done { color: #2f6b4f; background: rgba(47, 107, 79, 0.06); } .semantic-brief-checks .pass { color: #2f6b4f; background: rgba(47, 107, 79, 0.06); } .semantic-brief-checks .pending { color: #70521f; background: rgba(112, 82, 31, 0.07); } .semantic-brief-checks .warn { color: #70521f; background: rgba(112, 82, 31, 0.07); } .semantic-brief-checks .fail { color: #8b2f2f; background: rgba(139, 47, 47, 0.06); } .semantic-token-list.muted span.warning { color: #70521f; background: rgba(112, 82, 31, 0.07); } .semantic-token-list.muted span.problem { color: #8b2f2f; background: rgba(139, 47, 47, 0.06); } .semantic-landing-panel { display: grid; gap: 8px; padding: 10px; background: #fff !important; border: 1px solid var(--line) !important; border-radius: 8px; } .semantic-landing-panel > div:first-child { display: grid; gap: 3px; } .semantic-landing-panel strong { color: var(--ink); font-size: 13px; } .semantic-landing-panel small, .semantic-landing-panel p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 720; line-height: 1.38; } .semantic-landing-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 9px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .semantic-landing-row > span { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: 0 8px; color: #343434; background: #f5f5f5; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 900; } .semantic-landing-row.create_target_page > span { color: #8b2f2f; background: rgba(139, 47, 47, 0.06); } .semantic-landing-row > div { display: grid; gap: 5px; min-width: 0; } @media (max-width: 560px) { .semantic-page-plan-row { grid-template-columns: 1fr; } .semantic-brief-row summary { grid-template-columns: 1fr; } .semantic-landing-row { grid-template-columns: 1fr; } .semantic-landing-row > span { justify-self: start; } } /* Final clean pass: keep the working surface white, quiet, and readable. */ .topbar { min-height: auto !important; padding: 22px 24px !important; color: var(--ink) !important; background: rgba(255, 255, 255, 0.9) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.045) !important; } .topbar::after { display: none !important; } .topbar h2 { color: var(--ink) !important; font-size: 28px !important; letter-spacing: 0 !important; } .topbar .eyebrow { color: var(--muted) !important; } @media (max-width: 560px) { .topbar { padding: 18px !important; } .topbar h2 { font-size: 28px !important; } } /* Dev/Auto UX split. Keep the production path calm; Auto is only the target shell for now. */ .workspace-mode-switch { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; padding: 3px; background: rgba(255, 255, 255, 0.82); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04); } .workspace-mode-switch button { min-height: 34px; padding: 0 13px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 850; white-space: nowrap; } .workspace-mode-switch button:hover { color: var(--ink); background: rgba(0, 0, 0, 0.035); } .workspace-mode-switch button.active { color: #fff; background: #181818; border-color: #181818; } .mode-hidden { display: none !important; } .auto-mode-shell { display: grid; gap: 18px; padding: 22px; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.045); } .auto-mode-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; } .auto-mode-heading > span, .auto-mode-flow article > span, .auto-variant-board article > span { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 9px; color: #262626; background: #f3f3f3; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 900; } .auto-mode-heading h3, .auto-mode-heading p, .auto-mode-flow strong, .auto-mode-flow small, .auto-variant-board strong, .auto-variant-board small { margin: 0; } .auto-mode-heading h3 { color: var(--ink); font-size: 22px; line-height: 1.1; } .auto-mode-heading p, .auto-mode-flow small, .auto-variant-board small { color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.4; } .auto-mode-flow, .auto-variant-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .auto-mode-flow article, .auto-variant-board article { display: grid; gap: 8px; align-content: start; min-height: 128px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px; } .auto-mode-flow strong, .auto-variant-board strong { color: var(--ink); font-size: 14px; line-height: 1.2; } /* Keep semantic verdict useful for Dev Mode without putting the raw report in the main flow. */ .semantic-verdict-panel, .semantic-verdict-panel.low, .semantic-verdict-panel.medium, .semantic-verdict-panel.high, .semantic-verdict-panel.muted { gap: 11px !important; background: rgba(255, 255, 255, 0.9) !important; border-color: var(--line) !important; box-shadow: none !important; } .semantic-verdict-panel p { color: #363636 !important; font-size: 12px !important; font-weight: 760 !important; } .semantic-verdict-brief { display: flex; flex-wrap: wrap; gap: 6px; } .semantic-verdict-brief span { display: inline-flex; align-items: center; min-height: 24px; max-width: 100%; padding: 0 8px; color: #343434; background: #f5f5f5; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 850; line-height: 1.2; } .semantic-verdict-brief span.problem { color: #8b2f2f; background: rgba(139, 47, 47, 0.06); } .semantic-verdict-details { border-top: 1px solid var(--line); } .semantic-verdict-details summary { display: flex; align-items: center; justify-content: space-between; min-height: 38px; color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 900; list-style: none; } .semantic-verdict-details summary::-webkit-details-marker { display: none; } .semantic-verdict-details summary::after { content: "+"; display: grid; width: 22px; height: 22px; place-items: center; color: var(--muted); background: #f5f5f5; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; line-height: 1; } .semantic-verdict-details[open] summary::after { content: "-"; } .semantic-verdict-detail-body { display: grid; gap: 10px; padding-top: 6px; } .semantic-verdict-columns section, .semantic-verdict-risk-list article, .semantic-verdict-clusters > div, .semantic-verdict-next { background: #fff !important; border-color: var(--line) !important; } @media (max-width: 900px) { .auto-mode-flow, .auto-variant-board, .market-provider-grid, .market-columns, .seo-chart-grid, .seo-chart-grid-market, .seo-chart-grid-wide { grid-template-columns: 1fr; } .market-heading, .market-state-card { display: grid; } .service-modal-backdrop { padding: 12px; } .service-modal { max-height: calc(100vh - 24px); } .service-field-grid { grid-template-columns: 1fr; } .external-service-card-head, .service-card-footer, .service-modal-header { align-items: stretch; flex-direction: column; } .service-modal-close { align-self: flex-end; } } @media (max-width: 560px) { .workspace-mode-switch { width: 100%; } .workspace-mode-switch button { flex: 1 1 0; } .auto-mode-shell { padding: 16px; } .auto-mode-heading { grid-template-columns: 1fr; } } /* Stage 3: page workspace cockpit. The selected page is the object now, so project/list scaffolding stays out of the visual hierarchy. */ .stage-3 .project-row { padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .stage-3 .project-setup { gap: 0 !important; } .stage-3 .project-setup > .section-heading { display: none !important; } .stage-3 .project-list-card { padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .stage-3 .project-list { gap: 0 !important; } .stage-3 .project-row > div > .project-title-row, .stage-3 .project-row > div > .project-source, .stage-3 .page-workspace-heading, .stage-3 .workspace-page-tabs { display: none !important; } .stage-3 .page-workspace-panel { padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; } .stage-3 .workspace-editor-stack { gap: 14px !important; } .workspace-current-page { display: grid; gap: 4px; padding: 0 4px; } .workspace-current-page > div { display: grid; gap: 4px; min-width: 0; } .workspace-current-page span { color: var(--muted); font-size: 13px; font-weight: 450; } .workspace-current-page strong { color: var(--ink); font-size: clamp(24px, 2.2vw, 34px); font-weight: 760; letter-spacing: 0; line-height: 1.05; max-width: 100%; overflow-wrap: normal; word-break: normal; } .workspace-current-page small { color: var(--muted); font-size: 15px; font-weight: 450; overflow-wrap: anywhere; } .workspace-cockpit-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 0 2px; } .workspace-current-page-actions { position: relative; z-index: 10; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .workspace-current-page-actions > button, .workspace-page-control-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 13px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; } .workspace-current-page-actions > button:hover, .workspace-page-control-trigger:hover { border-color: rgba(24, 32, 29, 0.2); background: #fafafa; } .workspace-current-page-actions > button.active, .workspace-page-control.open .workspace-page-control-trigger { color: #fff; background: var(--ink); border-color: var(--ink); } .workspace-current-page-actions > button em, .workspace-page-control-trigger em { flex: 0 0 auto; min-width: 23px; height: 23px; display: inline-grid; place-items: center; padding: 0 7px; color: currentColor; background: rgba(24, 32, 29, 0.06); border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 800; } .workspace-current-page-actions > button.active em, .workspace-page-control.open .workspace-page-control-trigger em { background: rgba(255, 255, 255, 0.16); } .workspace-page-control { position: relative; flex: 0 0 auto; } .workspace-page-control-trigger svg:last-child { transition: transform 160ms ease; } .workspace-page-control.open .workspace-page-control-trigger svg:last-child { transform: rotate(180deg); } .workspace-page-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; width: min(380px, calc(100vw - 48px)); max-height: min(480px, calc(100vh - 180px)); padding: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.97); border: 1px solid rgba(24, 32, 29, 0.1); border-radius: 20px; box-shadow: 0 22px 70px rgba(24, 32, 29, 0.16); backdrop-filter: blur(30px) saturate(1.08); -webkit-backdrop-filter: blur(30px) saturate(1.08); } .workspace-page-menu-head { display: grid; gap: 3px; padding: 2px 2px 0; } .workspace-page-menu-head strong { color: var(--ink); font-size: 14px; font-weight: 780; line-height: 1.1; } .workspace-page-menu-head small, .workspace-page-menu-empty { color: var(--muted); font-size: 12px; font-weight: 520; line-height: 1.35; } .workspace-page-menu-list { display: grid; gap: 7px; min-height: 0; max-height: min(360px, calc(100vh - 260px)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; scrollbar-gutter: stable; } .workspace-page-menu-list button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 3px 9px; width: 100%; padding: 10px; text-align: left; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; } .workspace-page-menu-list button:hover, .workspace-page-menu-list button.active { background: #f6f6f7; border-color: rgba(24, 32, 29, 0.16); } .workspace-page-menu-list button.active { color: #ffffff; background: var(--ink); border-color: var(--ink); } .workspace-page-menu-list button span { grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; color: #ffffff; background: var(--ink); border-radius: 999px; font-size: 12px; font-weight: 850; } .workspace-page-menu-list button strong, .workspace-page-menu-list button small { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .workspace-page-menu-list button strong { color: var(--ink); font-size: 13px; font-weight: 760; line-height: 1.15; white-space: nowrap; } .workspace-page-menu-list button small { color: var(--muted); font-size: 12px; font-weight: 520; line-height: 1.3; white-space: nowrap; } .workspace-page-menu-list button em { grid-row: span 2; align-self: center; padding: 4px 8px; color: var(--muted); background: #f6f6f7; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 760; white-space: nowrap; } .workspace-page-menu-list button.active span { color: var(--ink); background: #ffffff; } .workspace-page-menu-list button.active strong, .workspace-page-menu-list button.active small { color: #ffffff; } .workspace-page-menu-list button.active em { color: #ffffff; background: rgba(255, 255, 255, 0.16); } .workspace-current-page-actions .workspace-preview-mode-switch { min-height: 38px; background: #fff !important; } .stage-3 .workspace-preview-panel, .stage-3 .workspace-page-issues, .stage-3 .workspace-section-workbench, .stage-3 .section-editor-card { padding: 22px !important; background: #fff !important; border: 1px solid var(--line) !important; border-radius: 26px !important; box-shadow: none !important; } .stage-3 .workspace-cockpit-panel { position: relative; gap: 10px !important; padding: 12px !important; overflow: hidden; border-radius: 22px !important; } .workspace-preview-status { display: flex; flex: 1 1 360px; flex-wrap: wrap; gap: 7px; padding: 0 2px 2px; } .workspace-preview-status span { min-height: 26px; display: inline-flex; align-items: center; padding: 0 9px; color: var(--muted); background: #f6f6f7; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 650; } .workspace-preview-shell { position: relative; min-height: clamp(620px, 68vh, 840px); background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; } .stage-3 .workspace-subheading { align-items: baseline !important; padding: 0 2px; } .stage-3 .workspace-subheading strong { font-size: 22px !important; font-weight: 740 !important; letter-spacing: -0.035em; } .stage-3 .workspace-subheading small { color: var(--muted) !important; font-size: 13px !important; font-weight: 450 !important; } .stage-3 .workspace-preview-frame { overflow: auto !important; background: #fff !important; border: 1px solid var(--line) !important; border-radius: 22px !important; } .stage-3 .workspace-cockpit-panel .workspace-preview-frame { position: absolute !important; inset: 0; border: 0 !important; border-radius: 0 !important; } .stage-3 .workspace-preview-panel iframe { width: 100% !important; max-width: none !important; height: 100% !important; min-height: clamp(620px, 68vh, 840px) !important; background: #fff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .stage-3 .workspace-preview-frame.mobile-preview { display: grid !important; justify-content: center; padding: 18px !important; background: #f2f2f4 !important; } .stage-3 .workspace-preview-frame.mobile-preview iframe { width: min(390px, 100%) !important; min-width: 320px !important; height: 760px !important; min-height: 760px !important; border: 1px solid var(--line) !important; border-radius: 28px !important; box-shadow: 0 18px 46px rgba(24, 32, 29, 0.12) !important; } .stage-3 .workspace-preview-frame.desktop-preview iframe { width: 100% !important; } .workspace-drawer-stack { position: absolute; inset: 12px; z-index: 5; display: flex; flex-direction: row-reverse; align-items: stretch; justify-content: flex-start; gap: 12px; pointer-events: none; } .workspace-drawer { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); flex: 0 0 calc((100% - 24px) / 3); min-width: 0; overflow: hidden; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(24, 32, 29, 0.12); border-radius: 18px; box-shadow: 0 22px 68px rgba(24, 32, 29, 0.14); pointer-events: auto; animation: workspaceDrawerIn 180ms cubic-bezier(0.2, 0.82, 0.2, 1); } .workspace-drawer > * { position: relative; z-index: 3; } .workspace-drawer.open { opacity: 1; pointer-events: auto; transform: translateX(0); } @keyframes workspaceDrawerIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } } .workspace-drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid var(--line); } .workspace-drawer-header > div { display: grid; gap: 4px; min-width: 0; } .workspace-drawer-header span { color: var(--muted); font-size: 12px; font-weight: 700; } .workspace-drawer-header strong { color: var(--ink); font-size: 22px; font-weight: 760; letter-spacing: -0.03em; line-height: 1; } .workspace-drawer-header small { color: var(--muted); font-size: 12px; font-weight: 520; line-height: 1.35; } .workspace-drawer-close { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; padding: 0; color: var(--ink); background: #f7f7f8; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; } .workspace-drawer-close:hover { background: #efeff1; } .workspace-scope-list, .workspace-fields-drawer, .workspace-drawer > .workspace-issue-list { min-height: 0; overflow: auto; padding: 12px; } .workspace-scope-list { display: grid; gap: 8px; } .workspace-scope-list button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 9px; align-items: start; width: 100%; padding: 11px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; } .workspace-scope-list button:hover, .workspace-scope-list button.active { background: #fffaf5; border-color: rgba(242, 122, 26, 0.34); } .workspace-scope-list button span { grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; color: var(--ink); background: #f3f3f4; border-radius: 999px; font-size: 12px; font-weight: 850; } .workspace-scope-list button.active span { color: #fff; background: var(--accent); } .workspace-scope-list strong, .workspace-scope-list small { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .workspace-scope-list strong { color: var(--ink); font-size: 13px; font-weight: 760; white-space: nowrap; } .workspace-scope-list small { color: var(--muted); font-size: 12px; font-weight: 520; white-space: nowrap; } .workspace-scope-list em { grid-row: span 2; align-self: center; padding: 4px 8px; color: var(--muted); background: #f6f6f7; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 760; white-space: nowrap; } .workspace-fields-drawer { display: grid; gap: 12px; } .workspace-fields-drawer .section-editor-card { padding: 14px !important; border-radius: 16px !important; } .workspace-fields-drawer .workspace-field-card.active { background: #fffaf5 !important; border-color: rgba(242, 122, 26, 0.36) !important; } .workspace-field-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .workspace-field-meta span, .workspace-field-meta em { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; color: var(--muted); background: #f5f5f6; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 760; line-height: 1; } .workspace-draft-status { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; padding: 10px; color: var(--ink); background: var(--nodedc-glass-control-bg); border: 0; border-radius: 14px; box-shadow: var(--nodedc-glass-control-shadow); } .workspace-draft-status span { grid-row: 1 / span 2; align-self: start; display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 760; line-height: 1; white-space: nowrap; } .workspace-draft-status.clean span { color: #2e6f64; background: rgba(46, 111, 100, 0.12); } .workspace-draft-status.changed span { color: #805600; background: rgba(201, 145, 34, 0.16); } .workspace-draft-status.dirty span { color: #8b3f00; background: rgba(242, 122, 26, 0.18); } .workspace-draft-status strong, .workspace-draft-status small { grid-column: 2; min-width: 0; } .workspace-draft-status strong { color: var(--ink); font-size: 12px; font-weight: 760; line-height: 1.22; } .workspace-draft-status small { color: var(--muted); font-size: 12px; font-weight: 520; line-height: 1.35; } .workspace-fields-drawer .section-editor-card pre { max-height: 140px; overflow: auto; } .workspace-fields-drawer .section-editor-card textarea { min-height: 170px; } .stage-3 .workspace-page-issues { gap: 14px !important; } .stage-3 .workspace-issue-list { gap: 8px !important; } .stage-3 .workspace-issue-list button, .stage-3 .section-map-card { background: #fff !important; border-color: var(--line) !important; border-radius: 18px !important; transform: none !important; } .stage-3 .workspace-issue-list button:hover, .stage-3 .section-map-card:hover { background: #fffaf5 !important; border-color: rgba(242, 122, 26, 0.34) !important; transform: none !important; } .stage-3 .workspace-issue-list button { grid-template-columns: auto minmax(0, 1fr) !important; padding: 11px !important; border-radius: 14px !important; } .stage-3 .workspace-issue-list button p { grid-column: 2; margin: 0; color: var(--muted); font-size: 12px; font-weight: 520; line-height: 1.35; } .stage-3 .section-map-card.active, .stage-3 .section-map-card.active:hover { color: var(--ink) !important; background: #fff7ef !important; border-color: rgba(242, 122, 26, 0.42) !important; box-shadow: none !important; transform: none !important; } .stage-3 .section-map-card.active span { color: #fff !important; background: var(--accent) !important; } .stage-3 .section-map-card.active small, .stage-3 .section-map-card.active p, .stage-3 .section-map-card.active strong, .stage-3 .section-map-card.active em { color: var(--ink) !important; } .stage-3 .section-map-card.active em { background: #f2f2f4 !important; } .stage-3 .workspace-target-issues { color: var(--muted) !important; background: #fff7ef !important; border-color: rgba(242, 122, 26, 0.18) !important; } @media (min-width: 1180px) { .stage-3 .section-workbench-grid { grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr) !important; align-items: start; } } @media (max-width: 760px) { .workspace-cockpit-toolbar, .workspace-current-page-actions { align-items: flex-start; flex-direction: column; justify-content: flex-start; } .workspace-current-page-actions, .workspace-current-page-actions > button, .workspace-page-control, .workspace-page-control-trigger, .workspace-preview-mode-switch { width: 100%; } .workspace-preview-shell { min-height: 720px; } .workspace-drawer-stack { inset: 8px; flex-direction: column-reverse; justify-content: flex-start; } .workspace-drawer { flex: 0 0 min(76%, 620px); } } /* Keep hover states calm: color may change, but controls should not jump. */ button:hover, .link-action:hover, .scan-page-option:hover, .section-map-card:hover, .workspace-issue-list button:hover { transform: none !important; } /* Project row actions should stay clean without the dark floating shadow. */ .project-meta .project-actions .tiny-action.primary, .project-meta .project-actions .tiny-action.primary:hover, .project-meta .project-actions .tiny-action.icon-only, .project-meta .project-actions .tiny-action.icon-only:hover { box-shadow: none !important; } .project-action-message { align-items: flex-start !important; } .project-action-message > svg { flex: 0 0 auto; margin-top: 4px; } .project-action-message > span { display: block; white-space: pre-line; } .project-row-action-message { box-sizing: border-box; width: 100%; } .project-delete-confirmation { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 14px 16px; color: #3a1512; background: #fff2ef; border: 1px solid rgba(215, 0, 21, 0.18); border-radius: 18px; } .project-delete-confirmation > div:first-child { display: grid; gap: 4px; min-width: 0; } .project-delete-confirmation strong { color: #1f1f21; font-size: inherit; font-weight: 500; letter-spacing: 0; } .project-delete-confirmation span { color: #7b4a43; font-size: 13px; line-height: 1.38; } .project-delete-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .project-delete-actions .tiny-action { min-height: 38px !important; padding: 0 14px !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: -0.01em; } .project-delete-actions .confirm-delete-action { color: #fff !important; background: #d70015 !important; border-color: #d70015 !important; } .project-delete-actions .confirm-delete-action:hover { background: #b80012 !important; border-color: #b80012 !important; } /* Section icons align with the title line, not with the whole title+description block. */ .section-heading { align-items: flex-start !important; } .section-heading > svg { margin-top: 2px !important; } .refresh-projects-action { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; padding: 0 !important; border-radius: 999px !important; box-shadow: none !important; font-size: 13px !important; font-weight: 650 !important; letter-spacing: -0.01em; } .project-form > .primary-action { font-size: 13px !important; font-weight: 650 !important; letter-spacing: -0.01em; } .project-list { padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; } /* Design-system cleanup: helper copy, placeholders, and neutral icon buttons. */ .project-form .field-hint, .project-form .input-hint-row small { color: var(--muted) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: -0.015em; line-height: 1.38 !important; } .field input::placeholder, .project-edit-form input::placeholder, textarea::placeholder { color: var(--muted) !important; font-weight: 400 !important; opacity: 0.82; } .project-actions .tiny-action.icon-only { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; padding: 0 !important; color: var(--ink) !important; background: rgba(255, 255, 255, 0.72) !important; border: 1px solid var(--line) !important; border-radius: 999px !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08) !important; backdrop-filter: blur(16px) saturate(160%); } .project-actions .tiny-action.icon-only:hover { color: #fff !important; background: var(--ink) !important; border-color: var(--ink) !important; transform: translateY(-1px); } .project-actions .tiny-action.danger.icon-only { color: #d70015 !important; background: rgba(255, 255, 255, 0.72) !important; border-color: var(--line) !important; } .project-actions .tiny-action.danger.icon-only:hover { color: #fff !important; background: #d70015 !important; border-color: #d70015 !important; } .field input:focus, .project-edit-form input:focus, .section-editor-card textarea:focus, input:focus, textarea:focus { border-color: rgba(242, 122, 26, 0.48) !important; box-shadow: 0 0 0 4px var(--accent-ring) !important; } .folder-picker-panel.active { background: rgba(242, 122, 26, 0.08) !important; border-color: rgba(242, 122, 26, 0.38) !important; } input[type="checkbox"] { accent-color: var(--accent) !important; } .audit-issue.info summary > span, .task-row.active span { color: var(--accent) !important; } .workspace-page-tabs button.active, .audit-toolbar button.active, .section-map-card.active { background: linear-gradient(135deg, #1f1f21, #3a332e) !important; border-color: #1f1f21 !important; } .section-map-card:hover, .workspace-issue-list button:hover, .scan-page-option:hover { border-color: rgba(242, 122, 26, 0.26) !important; } .stage-placeholder { display: none; gap: 16px; padding: 22px; background: rgba(255, 255, 255, 0.82); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.055); } .stage-1 .scan-summary:not(.muted) { display: none !important; } .stage-2 .scan-summary:not(.muted) { display: none !important; } .stage-1 .project-form { display: grid !important; } .stage-2 .project-form, .stage-3 .project-form, .stage-4 .project-form, .stage-5 .project-form, .stage-6 .project-form, .stage-7 .project-form { display: none !important; } .stage-2 .project-grid, .stage-3 .project-grid, .stage-4 .project-grid, .stage-5 .project-grid, .stage-6 .project-grid, .stage-7 .project-grid { grid-template-columns: minmax(0, 1fr) !important; } .stage-2 .page-workspace-panel, .stage-2 .audit-summary { display: none !important; } .stage-3 .project-scan-status, .stage-4 .project-scan-status, .stage-5 .project-scan-status, .stage-6 .project-scan-status, .stage-7 .project-scan-status { display: none !important; } .stage-3 .workspace-help, .stage-4 .workspace-help, .stage-4 .scan-help { display: none !important; } .stage-4 .scan-selection { max-height: 280px; overflow: auto; } .stage-3 .scan-selection-bar, .stage-3 .scan-page-tree, .stage-3 .workspace-help, .stage-3 .audit-summary, .stage-3 .scan-help, .stage-3 .scan-metrics, .stage-3 .scan-status-note { display: none !important; } .stage-3 .scan-selection { display: contents !important; } .stage-3 .scan-page-list, .stage-4 .scan-page-list { max-height: 180px; overflow: auto; } .stage-4 .page-workspace-panel, .stage-4 .audit-summary, .stage-4 .audit-toolbar, .stage-4 .audit-help, .stage-4 .media-issue-panel, .stage-4 .audit-issue-list, .stage-5 .scan-selection, .stage-5 .page-workspace-panel, .stage-5 .audit-summary, .stage-5 .audit-toolbar, .stage-5 .audit-help, .stage-5 .media-issue-panel, .stage-5 .audit-issue-list, .stage-6 .scan-selection, .stage-6 .page-workspace-panel, .stage-6 .audit-summary, .stage-6 .audit-toolbar, .stage-6 .audit-help, .stage-6 .media-issue-panel, .stage-6 .audit-issue-list, .stage-7 .scan-selection, .stage-7 .page-workspace-panel, .stage-7 .audit-summary, .stage-7 .audit-toolbar, .stage-7 .audit-help, .stage-7 .media-issue-panel, .stage-7 .audit-issue-list { display: none !important; } .stage-3 .page-workspace-panel { display: grid !important; } .stage-3 .workspace-preview-frame { border-radius: 18px !important; } .stage-3 .workspace-preview-markers button { background: #ff4fb8 !important; box-shadow: 0 8px 18px rgba(255, 79, 184, 0.3) !important; transform: none !important; } .stage-3 .workspace-preview-markers button.active { background: #d81b7d !important; box-shadow: 0 0 0 4px rgba(255, 79, 184, 0.18) !important; } .stage-8 .project-setup, .stage-9 .project-setup { display: none !important; } .stage-8 .stage-placeholder, .stage-9 .stage-placeholder { display: grid; } @media (min-width: 1500px) { .stage-1 .project-grid { grid-template-columns: minmax(360px, 430px) minmax(0, 1fr) !important; } .stage-2 .project-grid, .stage-3 .project-grid, .stage-4 .project-grid, .stage-5 .project-grid, .stage-6 .project-grid, .stage-7 .project-grid { grid-template-columns: minmax(0, 1fr) !important; } } /* Primary submit actions use the same dark emphasis as the active stage pill. */ .primary-action, .project-form button[type="submit"], .tiny-action.primary { color: #fff !important; background: linear-gradient(135deg, #1f1f21, #3a332e) !important; border-color: #1f1f21 !important; box-shadow: 0 12px 28px rgba(31, 31, 33, 0.18) !important; } .primary-action:hover, .project-form button[type="submit"]:hover, .tiny-action.primary:hover { background: linear-gradient(135deg, #29292c, #493b32) !important; box-shadow: 0 16px 34px rgba(31, 31, 33, 0.22) !important; } .primary-action:disabled, .project-form button[type="submit"]:disabled, .tiny-action.primary:disabled { opacity: 0.48 !important; transform: none !important; box-shadow: 0 8px 18px rgba(31, 31, 33, 0.1) !important; } .folder-picker-panel .folder-pick-action, .folder-picker-panel button.folder-pick-action, .folder-pick-action { color: #fff !important; background: var(--accent) !important; border-color: var(--accent-hover) !important; box-shadow: 0 10px 24px var(--accent-shadow) !important; } .folder-picker-panel .folder-pick-action:hover, .folder-picker-panel button.folder-pick-action:hover, .folder-pick-action:hover { background: var(--accent-hover) !important; box-shadow: 0 14px 30px rgba(242, 122, 26, 0.3) !important; } /* Stage 4 page selector: grow naturally, scroll only after roughly 15 page rows. */ .stage-4 .scan-selection { max-height: none !important; overflow: visible !important; } .stage-4 .scan-page-tree { max-height: calc((64px + 6px) * 15) !important; overflow-y: auto !important; padding-right: 4px !important; } .stage-4 .scan-page-list { max-height: none !important; overflow: visible !important; padding-right: 0 !important; } .stage-2 .scope-flow-toolbar .scope-flow-toolbar-button, .project-scope-flow-canvas .scope-flow-toolbar .scope-flow-toolbar-button { transform: translateY(var(--tb-shift-y, 0px)) scale(var(--tb-scale, 1)) !important; } /* Canonical white glass pass: shared Engine/BIM-style surfaces and controls. */ .workspace-page-menu, .workspace-drawer, .semantic-panel, .semantic-page-plan-panel, .semantic-brief-panel, .semantic-landing-panel, .semantic-verdict-panel, .semantic-warning-list, .semantic-gap-panel, .semantic-seeds, .semantic-ai-contract, .semantic-style-panel, .semantic-action-list, .semantic-cluster-detail, .market-panel, .market-heading, .market-state-card, .market-decision-board, .market-wordstat-card, .market-provider, .market-normalization-card, .market-normalization-review-queue, .keyword-page-plan-card, .market-columns section, .market-next-actions { background: var(--nodedc-glass-panel-surface-strong) !important; border: 0 !important; border-radius: 22px !important; box-shadow: var(--nodedc-glass-panel-shadow) !important; backdrop-filter: var(--nodedc-glass-panel-blur) !important; -webkit-backdrop-filter: var(--nodedc-glass-panel-blur) !important; isolation: isolate; } .workspace-page-menu, .workspace-drawer, .semantic-panel, .semantic-page-plan-panel, .semantic-brief-panel, .semantic-landing-panel, .semantic-verdict-panel, .semantic-warning-list, .semantic-gap-panel, .semantic-seeds, .semantic-ai-contract, .semantic-style-panel, .semantic-action-list, .semantic-cluster-detail, .market-panel, .market-heading, .market-state-card, .market-decision-board, .market-wordstat-card, .market-provider, .market-normalization-card, .market-normalization-review-queue, .keyword-page-plan-card, .market-columns section, .market-next-actions { overflow: hidden !important; } .semantic-panel, .semantic-page-plan-panel, .semantic-brief-panel, .semantic-landing-panel, .semantic-verdict-panel, .semantic-warning-list, .semantic-gap-panel, .semantic-seeds, .semantic-ai-contract, .semantic-style-panel, .semantic-action-list, .semantic-cluster-detail, .market-panel, .market-heading, .market-state-card, .market-decision-board, .market-wordstat-card, .market-provider, .market-normalization-card, .market-normalization-review-queue, .keyword-page-plan-card, .market-columns section, .market-next-actions { position: relative; } .workspace-page-menu::after, .workspace-drawer::after, .semantic-panel::after, .semantic-page-plan-panel::after, .semantic-brief-panel::after, .semantic-landing-panel::after, .semantic-verdict-panel::after, .semantic-warning-list::after, .semantic-gap-panel::after, .semantic-seeds::after, .semantic-ai-contract::after, .semantic-style-panel::after, .semantic-action-list::after, .semantic-cluster-detail::after, .market-panel::after, .market-heading::after, .market-state-card::after, .market-decision-board::after, .market-wordstat-card::after, .market-provider::after, .market-normalization-card::after, .market-normalization-review-queue::after, .keyword-page-plan-card::after, .market-columns section::after, .market-next-actions::after { content: ""; position: absolute; inset: 0; z-index: 2; padding: 1px; pointer-events: none; border-radius: inherit; background: var(--nodedc-glass-outline-gradient); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .workspace-drawer-header, .workspace-page-menu-head { border-color: rgba(24, 32, 29, 0.08) !important; } .workspace-page-menu-list button, .workspace-scope-list button, .workspace-fields-drawer .section-editor-card, .stage-3 .workspace-issue-list button, .stage-3 .section-map-card, .stage-3 .workspace-target-issues, .semantic-metric-row, .semantic-gap-row, .semantic-scope-grid, .semantic-scope-grid > div, .semantic-quality, .semantic-verdict-columns section, .semantic-verdict-risk-list article, .semantic-verdict-clusters > div, .semantic-verdict-next, .semantic-warning-row, .semantic-page-plan-row, .semantic-brief-row, .semantic-brief-body section, .semantic-brief-section, .semantic-brief-quality-card, .semantic-landing-row, .market-wordstat-card > div:last-of-type, .market-seed-list div, .market-brief-list div, .keyword-page-phrase-list > div, .keyword-next-action-list p, .keyword-raw-grid > div, .market-wordstat-results > div, .semantic-cluster, .semantic-detail-grid section, .semantic-evidence-panel, .semantic-source-list div { background: var(--nodedc-glass-control-bg) !important; border: 0 !important; border-radius: 16px !important; box-shadow: var(--nodedc-glass-control-shadow) !important; backdrop-filter: var(--nodedc-glass-blur) !important; -webkit-backdrop-filter: var(--nodedc-glass-blur) !important; } .workspace-page-menu-list button:hover, .workspace-scope-list button:hover, .stage-3 .workspace-issue-list button:hover, .stage-3 .section-map-card:hover, .semantic-cluster:hover, .semantic-cluster.active { background: var(--nodedc-glass-control-hover) !important; border: 0 !important; box-shadow: var(--nodedc-glass-control-shadow), 0 0 0 1px rgba(24, 32, 29, 0.08) inset !important; transform: none !important; } .workspace-page-menu-list button.active, .workspace-scope-list button.active, .stage-3 .section-map-card.active, .stage-3 .section-map-card.active:hover, .workspace-fields-drawer .workspace-field-card.active { color: var(--ink) !important; background: var(--nodedc-header-dropdown-item-active-bg) !important; border: 0 !important; box-shadow: var(--nodedc-glass-control-shadow), 0 0 0 1px rgba(24, 32, 29, 0.12) inset !important; } .workspace-page-menu-list button.active strong, .workspace-page-menu-list button.active small, .workspace-page-menu-list button.active em, .workspace-scope-list button.active strong, .workspace-scope-list button.active small, .workspace-scope-list button.active em, .stage-3 .section-map-card.active small, .stage-3 .section-map-card.active p, .stage-3 .section-map-card.active strong, .stage-3 .section-map-card.active em { color: var(--ink) !important; } .workspace-page-menu-list button span, .workspace-scope-list button span, .stage-3 .section-map-card span, .stage-3 .workspace-issue-list span, .workspace-field-meta span, .workspace-field-meta em, .semantic-metric-row span, .semantic-gap-row span, .semantic-cluster div span, .semantic-cluster div em, .semantic-warning-row span, .semantic-seeds span, .semantic-scope-grid > span, .semantic-quality > span, .semantic-verdict-heading span, .semantic-verdict-risk-list span, .semantic-verdict-clusters span, .semantic-token-list span, .semantic-source-list span, .semantic-page-plan-row > div:first-child span, .semantic-brief-row summary > span, .semantic-brief-row summary > .semantic-brief-quality, .semantic-brief-section span, .semantic-brief-quality-card > div:first-child span, .semantic-brief-checks span, .semantic-landing-row > span, .market-wordstat-card > div:last-of-type span, .market-state-card > div > span, .market-provider > span, .market-seed-list span, .market-brief-list span, .keyword-page-plan-heading > span, .keyword-page-plan-head > span, .keyword-page-plan-stats span, .keyword-page-phrase-list span, .keyword-raw-grid span, .market-wordstat-results p span, .semantic-term-cloud span { color: var(--muted) !important; background: rgba(24, 32, 29, 0.06) !important; border: 0 !important; box-shadow: var(--nodedc-glass-control-shadow) !important; } .workspace-page-menu-list button.active span, .workspace-scope-list button.active span, .stage-3 .section-map-card.active span { color: #fff !important; background: var(--ink) !important; } .workspace-page-menu-list button em, .workspace-scope-list em, .stage-3 .section-map-card em, .workspace-field-meta span, .workspace-field-meta em { border-radius: 999px !important; } .section-editor-card label span { color: var(--muted) !important; font-weight: 760 !important; } .workspace-drawer-close, .workspace-current-page-actions > button, .workspace-current-page-actions .workspace-preview-mode-switch, .scan-selection-bar button, .scan-summary, .scan-metric, .audit-toolbar button, .workspace-page-tabs button { background: var(--nodedc-glass-control-bg) !important; border: 0 !important; box-shadow: var(--nodedc-glass-control-shadow) !important; backdrop-filter: var(--nodedc-glass-blur) !important; -webkit-backdrop-filter: var(--nodedc-glass-blur) !important; } .workspace-drawer-close:hover, .workspace-current-page-actions > button:hover, .scan-selection-bar button:hover, .audit-toolbar button:hover, .workspace-page-tabs button:hover { background: var(--nodedc-glass-control-hover) !important; color: var(--ink) !important; } .workspace-current-page-actions > button.active, .workspace-page-control.open .workspace-page-control-trigger, .audit-toolbar button.active, .workspace-page-tabs button.active { color: #fff !important; background: var(--nodedc-glass-control-active) !important; } .workspace-current-page-actions > button.active svg, .workspace-page-control.open .workspace-page-control-trigger svg, .audit-toolbar button.active svg, .workspace-page-tabs button.active svg { color: #fff !important; } .workspace-fields-drawer .section-editor-card textarea, .workspace-fields-drawer .section-editor-card pre, .section-editor-card textarea, .field input, .project-edit-form input, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea { background: var(--nodedc-glass-control-bg) !important; border-color: transparent !important; box-shadow: var(--nodedc-glass-control-shadow) !important; } .field input:focus, .project-edit-form input:focus, .section-editor-card textarea:focus, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, textarea:focus { border-color: transparent !important; box-shadow: var(--nodedc-glass-control-shadow), 0 0 0 3px rgba(24, 32, 29, 0.1) !important; } .folder-picker-panel.active { background: var(--nodedc-header-dropdown-item-active-bg) !important; border-color: transparent !important; } .folder-picker-panel .folder-pick-action, .folder-picker-panel button.folder-pick-action, .folder-pick-action { color: #fff !important; background: var(--nodedc-glass-control-active) !important; border-color: transparent !important; box-shadow: 0 12px 28px rgba(31, 31, 33, 0.18) !important; } .folder-picker-panel .folder-pick-action:hover, .folder-picker-panel button.folder-pick-action:hover, .folder-pick-action:hover { background: linear-gradient(135deg, #29292c, #343437) !important; box-shadow: 0 16px 34px rgba(31, 31, 33, 0.22) !important; } .semantic-metric-row span.ok, .semantic-clean, .semantic-metric-row span.danger, .semantic-quality.ok > span, .semantic-quality.warning > span, .semantic-quality.problem > span, .semantic-verdict-panel.low .semantic-verdict-heading span, .semantic-verdict-panel.high .semantic-verdict-heading span, .semantic-verdict-risk-list article.problem span, .semantic-cluster.missing div span, .semantic-page-plan-row.create > div:first-child span, .semantic-page-plan-row.strengthen > div:first-child span, .semantic-brief-row summary > .semantic-brief-quality.needs_work, .semantic-brief-row summary > .semantic-brief-quality.blocked, .semantic-brief-row summary > .semantic-brief-quality.legacy, .semantic-brief-row.create summary > span, .semantic-brief-row.create summary > .semantic-brief-quality.ready, .semantic-brief-row.create summary > .semantic-brief-quality.needs_work, .semantic-brief-row.create summary > .semantic-brief-quality.blocked, .semantic-brief-row.create summary > .semantic-brief-quality.legacy, .semantic-brief-checks .done, .semantic-brief-checks .pass, .semantic-brief-checks .pending, .semantic-brief-checks .warn, .semantic-brief-checks .fail, .semantic-token-list.muted span.warning, .semantic-token-list.muted span.problem, .semantic-landing-row.create_target_page > span, .market-state-card.not_collected > div > span, .market-state-card.partial_ready > div > span, .market-provider.connected > span, .market-provider.connected_partial > span, .market-seed-list span.collected, .market-seed-list span.collected_related_only, .market-brief-list span.collected, .market-seed-list span.ready_for_collection, .market-brief-list span.ready_for_collection, .market-seed-list span.collected_no_signal, .keyword-page-plan-card.ready .keyword-page-plan-head > span, .keyword-page-plan-card.review .keyword-page-plan-head > span, .keyword-page-plan-card.blocked .keyword-page-plan-head > span, .keyword-page-phrase-list .safe span, .keyword-page-phrase-list .review span, .market-state-card.not_configured > div > span, .market-provider.not_configured > span, .market-provider.not_implemented > span, .market-seed-list span.collection_failed, .market-brief-list span.collection_failed, .market-seed-list span.not_configured, .market-brief-list span.not_configured { color: var(--muted) !important; background: rgba(24, 32, 29, 0.06) !important; } .workspace-target-issues, .stage-3 .workspace-target-issues { color: var(--muted) !important; background: var(--nodedc-glass-control-bg) !important; border: 0 !important; } .stage-3 .workspace-drawer-page-list { min-height: 0; max-height: none; overflow: auto; padding: 12px; } .stage-3 .workspace-page-menu-list button, .stage-3 .workspace-drawer-page-list button { grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 4px 10px; min-height: 68px; padding: 10px 12px; } .stage-3 .workspace-page-menu-list button span, .stage-3 .workspace-drawer-page-list button span { grid-column: 1; grid-row: 1 / span 3; align-self: center; width: 26px; min-width: 26px; height: 26px; } .stage-3 .workspace-page-menu-list button strong, .stage-3 .workspace-page-menu-list button small, .stage-3 .workspace-page-menu-list button em, .stage-3 .workspace-drawer-page-list button strong, .stage-3 .workspace-drawer-page-list button small, .stage-3 .workspace-drawer-page-list button em { grid-column: 2; min-width: 0; } .stage-3 .workspace-page-menu-list button em, .stage-3 .workspace-drawer-page-list button em { grid-row: auto; justify-self: start; align-self: start; min-width: max-content; min-height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0 9px; line-height: 1; } .stage-3 .workspace-page-menu-list button.active, .stage-3 .workspace-drawer-page-list button.active, .workspace-fields-drawer .workspace-field-card.active { background: var(--nodedc-header-dropdown-item-active-bg) !important; box-shadow: var(--nodedc-glass-control-shadow), 0 0 0 1px rgba(24, 32, 29, 0.12) inset !important; } .stage-3 .workspace-page-menu-list button.active span, .stage-3 .workspace-drawer-page-list button.active span { color: #fff !important; background: var(--ink) !important; } .stage-3 .workspace-page-menu-list button.active strong, .stage-3 .workspace-page-menu-list button.active small, .stage-3 .workspace-page-menu-list button.active em, .stage-3 .workspace-drawer-page-list button.active strong, .stage-3 .workspace-drawer-page-list button.active small, .stage-3 .workspace-drawer-page-list button.active em { color: var(--ink) !important; } .stage-3 .workspace-target-issues { display: grid; gap: 8px; padding: 0; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .workspace-target-issue { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; padding: 10px; color: var(--ink); background: var(--nodedc-glass-control-bg); border: 0; border-radius: 14px; box-shadow: var(--nodedc-glass-control-shadow); backdrop-filter: var(--nodedc-glass-blur); -webkit-backdrop-filter: var(--nodedc-glass-blur); } .workspace-target-issue span { grid-row: 1 / span 3; align-self: start; min-height: 22px; display: inline-flex; align-items: center; padding: 0 8px; color: var(--muted) !important; background: rgba(24, 32, 29, 0.06) !important; border-radius: 999px; font-size: 11px; font-weight: 760; line-height: 1; } .workspace-target-issue strong, .workspace-target-issue small, .workspace-target-issue p { grid-column: 2; min-width: 0; } .workspace-target-issue strong { color: var(--ink); font-size: 13px; font-weight: 760; line-height: 1.22; } .workspace-target-issue small, .workspace-target-issue p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 520; line-height: 1.35; } /* SEO module polish pass: softer controls, no clipped analytical panels. */ .workspace-mode-switch { padding: 4px !important; border-radius: 999px !important; } .workspace-mode-switch button { min-height: 36px !important; padding: 0 16px !important; border-radius: 999px !important; } .topbar, .stage-decision-frame, .semantic-review-card, .semantic-context-summary, .semantic-dev-details, .seo-chart, .market-panel, .market-heading, .market-state-card, .market-decision-board, .market-wordstat-card, .market-provider, .market-normalization-card, .market-normalization-review-queue, .keyword-page-plan-card, .market-columns section, .market-next-actions, .market-seed-list div, .market-brief-list div, .keyword-page-phrase-list > div, .keyword-next-action-list p, .keyword-raw-grid > div, .materialization-target { border-radius: 22px !important; } .stage-decision-frame { padding: 14px !important; background: rgba(255, 255, 255, 0.92) !important; box-shadow: var(--nodedc-glass-panel-shadow) !important; } .project-list-card, .project-row, .scan-summary, .semantic-panel, .market-panel, .market-heading, .market-state-card, .market-decision-board, .market-wordstat-card, .market-provider, .market-normalization-card, .market-normalization-review-queue, .keyword-page-plan-card, .market-columns section, .market-next-actions, .semantic-dev-details, .semantic-context-summary { overflow: visible !important; } .semantic-review-card.semantic-context-card { color: var(--ink) !important; background: rgba(255, 255, 255, 0.94) !important; border: 0 !important; box-shadow: var(--nodedc-glass-control-shadow) !important; } .semantic-context-summary { background: rgba(255, 255, 255, 0.92) !important; border: 0 !important; box-shadow: var(--nodedc-glass-panel-shadow) !important; } .semantic-dev-details summary { min-height: 42px; } .seo-chart { background: rgba(255, 255, 255, 0.9) !important; border: 0 !important; box-shadow: var(--nodedc-glass-control-shadow) !important; } .market-columns section > div:first-child, .market-heading > div, .semantic-context-summary > div:first-child { min-width: 0; } .market-columns section > div:first-child strong, .market-columns section > div:first-child small { display: block; } .market-seed-list div, .market-brief-list div { padding: 10px !important; } @media (max-width: 760px) { .seo-shape-funnel-body, .seo-ring-body, .seo-radar-body { grid-template-columns: 1fr; } .market-normalization-card { flex-direction: column; } .market-normalization-groups { grid-template-columns: 1fr; width: 100%; min-width: 0; } .market-normalization-review { grid-template-columns: 1fr; } .keyword-curation-board-head, .keyword-curation-footer { flex-direction: column; } .keyword-curation-columns { grid-auto-columns: minmax(260px, 86vw); } .anchor-review-filterbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .anchor-review-row { grid-template-columns: 1fr; align-items: start; } .anchor-review-row-actions { justify-content: flex-start; } .market-decision-board, .market-decision-metrics { grid-template-columns: 1fr; } .semantic-context-summary { grid-template-columns: 1fr; } } /* Hub/Launcher shell adaptation for SEO Mode. */ .seo-launcher-shell { --nodedc-accent-rgb: 24 24 24; --nodedc-on-accent-rgb: 247 248 244; --nodedc-shell-padding-x: 1.25rem; --nodedc-shell-padding-top: 1rem; --nodedc-shell-padding-bottom: 0.75rem; --nodedc-shell-frame-gutter-x: 18px; --nodedc-shell-height: 4.25rem; --nodedc-shell-row-height: 3rem; --nodedc-shell-logo-width: 7.25rem; --nodedc-shell-logo-height: 1.79rem; --nodedc-shell-pill-height: 3.45rem; --nodedc-shell-pill-padding: 0.32rem; --nodedc-shell-control-height: 2.78rem; --launcher-page-pad: 1.25rem; --launcher-radius-card: 1.35rem; --launcher-radius-control: 1.25rem; --seo-shell-stage-bg: radial-gradient(circle at 54% 34%, rgba(255, 255, 255, 0.9), rgba(229, 229, 229, 0.86) 58%, rgba(206, 206, 206, 0.92) 100%); --seo-shell-text: rgba(10, 12, 14, 0.94); --seo-shell-muted: rgba(10, 12, 14, 0.56); min-height: 100vh; overflow-x: hidden; background: var(--seo-shell-stage-bg); } .seo-launcher-shell .app-header { position: sticky !important; top: 0; z-index: var(--nodedc-layer-header); display: block !important; width: min(100%, calc(100vw - var(--nodedc-shell-frame-gutter-x))) !important; margin-inline: auto !important; padding: var(--nodedc-shell-padding-top) var(--nodedc-shell-padding-x) var(--nodedc-shell-padding-bottom) !important; color: var(--seo-shell-text) !important; background: var(--seo-shell-stage-bg) !important; border: 0 !important; box-shadow: none !important; } .seo-launcher-shell .nodedc-expanded-toolbar { display: flex; min-height: var(--nodedc-shell-height); width: 100%; flex-direction: column; } .seo-launcher-shell .nodedc-expanded-toolbar-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); min-height: var(--nodedc-shell-row-height); width: 100%; align-items: center; gap: 1rem; } .seo-launcher-shell .nodedc-expanded-toolbar-left, .seo-launcher-shell .nodedc-expanded-toolbar-center, .seo-launcher-shell .nodedc-expanded-toolbar-right { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .seo-launcher-shell .nodedc-expanded-toolbar-left { justify-content: flex-start; } .seo-launcher-shell .nodedc-expanded-toolbar-center { justify-content: center; } .seo-launcher-shell .nodedc-expanded-toolbar-right { justify-content: flex-end; } .seo-launcher-shell .nodedc-expanded-brand-link { display: inline-flex; width: var(--nodedc-shell-logo-width); height: var(--nodedc-shell-logo-height); align-items: center; justify-content: flex-start; line-height: 0; } .seo-launcher-shell .nodedc-expanded-brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; filter: invert(1); } .seo-launcher-shell .nodedc-expanded-nav-group, .seo-launcher-shell .nodedc-expanded-user-group, .seo-project-menu { position: relative; display: inline-flex; min-height: var(--nodedc-shell-pill-height); align-items: center; gap: 0.18rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.7); padding: var(--nodedc-shell-pill-padding); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 52px rgba(24, 32, 29, 0.12); backdrop-filter: blur(24px) saturate(1.18); -webkit-backdrop-filter: blur(24px) saturate(1.18); } .seo-launcher-shell .nodedc-expanded-user-group { gap: 0.22rem; } .seo-launcher-shell .nodedc-expanded-nav-button, .seo-launcher-shell .nodedc-toolbar-icon-button { position: relative; display: inline-flex; min-height: var(--nodedc-shell-control-height); align-items: center; justify-content: center; gap: 0.34rem; border: 0; border-radius: 999px; background: transparent; color: rgba(10, 12, 14, 0.62); padding: 0.2rem 1.22rem; font-size: 0.74rem; font-weight: 760; line-height: 1; white-space: nowrap; box-shadow: none; transition: background-color 160ms ease, color 160ms ease, transform 160ms ease; } .seo-launcher-shell .nodedc-expanded-nav-button:hover, .seo-launcher-shell .nodedc-toolbar-icon-button:hover { background: rgba(10, 12, 14, 0.06); color: rgba(10, 12, 14, 0.94); } .seo-launcher-shell .nodedc-expanded-nav-button[data-active="true"] { background: rgba(24, 24, 24, 0.94); color: rgba(247, 248, 244, 0.96); } .seo-launcher-shell .nodedc-expanded-notification-button { width: var(--nodedc-shell-control-height); padding: 0; } .seo-launcher-shell .nodedc-toolbar-icon-active-dot { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 999px; } .seo-launcher-shell .nodedc-toolbar-icon-button[data-active="true"] .nodedc-toolbar-icon-active-dot { background: rgba(24, 24, 24, 0.94); color: rgba(247, 248, 244, 0.96); } .seo-launcher-shell .nodedc-expanded-profile-trigger { display: inline-flex; align-items: center; gap: 0.22rem; border-radius: 999px; } .seo-launcher-shell .nodedc-expanded-user-avatar-button { display: flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; overflow: hidden; border-radius: 999px; background: transparent; } .seo-launcher-shell .nodedc-expanded-user-avatar { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 999px; background: radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.72), transparent 24%), linear-gradient(135deg, rgb(226, 229, 218), rgb(168, 174, 164)); color: rgba(8, 8, 10, 0.96); font-size: 0.78rem; font-weight: 800; } .seo-project-menu-trigger svg { transition: transform 160ms ease; } .seo-project-menu:has(.seo-project-menu-popover) .seo-project-menu-trigger svg { transform: rotate(180deg); } .seo-project-menu-popover { position: absolute; z-index: var(--nodedc-layer-popover); top: calc(100% + 0.7rem); left: 50%; display: grid; width: min(27rem, calc(100vw - 2rem)); gap: 0.7rem; padding: 0.8rem; border-radius: 1.35rem; background: rgba(255, 255, 255, 0.92); color: var(--seo-shell-text); box-shadow: 0 28px 90px rgba(24, 32, 29, 0.24); transform: translateX(-50%); backdrop-filter: blur(28px) saturate(1.16); -webkit-backdrop-filter: blur(28px) saturate(1.16); } .seo-project-menu-head { display: grid; gap: 0.2rem; padding: 0.55rem 0.65rem; } .seo-project-menu-head span, .seo-project-menu-empty, .seo-project-menu-list button small { color: var(--seo-shell-muted); font-size: 0.74rem; font-weight: 650; } .seo-project-menu-head strong { color: var(--seo-shell-text); font-size: 0.98rem; line-height: 1.16; } .seo-project-menu-list { display: grid; max-height: min(22rem, 58vh); gap: 0.38rem; overflow: auto; padding-right: 0.12rem; } .seo-project-menu-list button { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: 0.12rem 0.58rem; min-height: 4rem; align-items: center; padding: 0.7rem; border: 0; border-radius: 1rem; background: rgba(10, 12, 14, 0.045); color: var(--seo-shell-text); text-align: left; } .seo-project-menu-list button:hover, .seo-project-menu-list button.active { background: rgba(10, 12, 14, 0.08); } .seo-project-menu-list button > span { grid-row: 1 / span 2; display: grid; width: 1.9rem; height: 1.9rem; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.78); color: rgba(10, 12, 14, 0.82); } .seo-project-menu-list button.active > span { background: rgba(24, 24, 24, 0.94); color: #fff; } .seo-project-menu-list button strong, .seo-project-menu-list button small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seo-project-menu-add { display: inline-flex; min-height: 2.65rem; align-items: center; justify-content: center; gap: 0.45rem; border: 0; border-radius: 999px; background: rgba(24, 24, 24, 0.94); color: #fff; font-weight: 760; } .seo-project-menu-empty { display: inline-flex; min-height: 3.2rem; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 1rem; background: rgba(10, 12, 14, 0.045); } .seo-launcher-shell .workspace { position: relative; display: grid; width: 100% !important; min-height: calc(100vh - 6rem); margin: 0 !important; padding: 0 var(--launcher-page-pad) var(--launcher-page-pad) !important; gap: 0 !important; overflow: hidden; background: var(--seo-shell-stage-bg) !important; } .seo-launcher-shell.zero-state .workspace { min-height: calc(100vh - 6rem); } .seo-zero-stage { position: absolute; inset: 0 var(--launcher-page-pad) var(--launcher-page-pad); z-index: 0; min-height: 0; } .seo-launcher-shell .stage-video-shell { position: relative; z-index: 2; width: 100%; height: 100%; min-height: 0; overflow: hidden; border: 0; border-radius: var(--launcher-radius-card); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)), rgba(20, 20, 25, 0.64); box-shadow: 0 44px 150px rgba(24, 32, 29, 0.17); isolation: isolate; } .seo-launcher-shell .stage-video-stream { position: absolute; inset: 0; overflow: hidden; background: #050506; } .seo-launcher-shell .stage-video-gif { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; } .seo-launcher-shell .stage-video-stream::before { position: absolute; inset: -20%; z-index: 1; background: linear-gradient(90deg, transparent 0 12%, rgba(255, 255, 255, 0.07) 12% 13%, transparent 13% 27%), linear-gradient(180deg, transparent 0 18%, rgba(255, 255, 255, 0.05) 18% 19%, transparent 19% 32%); background-size: 7rem 7rem; content: ""; opacity: 0.34; transform: rotate(-2deg); mix-blend-mode: screen; } .seo-launcher-shell .stage-video-stream::after { position: absolute; inset: 0; z-index: 2; background: radial-gradient(circle at 50% 50%, transparent 0 52%, rgba(0, 0, 0, 0.28) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 18% 78%, rgba(0, 0, 0, 0.22)); content: ""; } .seo-launcher-shell .stage-empty-title { position: absolute; z-index: 4; top: 5.76rem; left: 5.76rem; display: grid; gap: 0.22rem; color: rgba(255, 255, 255, 0.94); text-transform: uppercase; pointer-events: none; } .seo-launcher-shell .stage-empty-title span, .seo-launcher-shell .stage-empty-title strong { font-size: clamp(1.82rem, 2.3vw, 2.52rem); font-weight: 350; line-height: 1; } .seo-launcher-shell .stage-empty-title span { color: rgba(64, 64, 64, 0.92); } .seo-launcher-shell .stage-empty-title strong { color: rgba(255, 255, 255, 0.94); } .seo-launcher-shell.zero-state .topbar, .seo-launcher-shell.zero-state .flow-status-strip, .seo-launcher-shell.zero-state .project-setup > .section-heading, .seo-launcher-shell.zero-state .project-list-card { display: none !important; } .seo-launcher-shell.zero-state .project-setup { position: relative; z-index: 3; display: grid; min-height: calc(100vh - 7.25rem); place-items: center; padding: 0 !important; pointer-events: none; } .seo-launcher-shell.zero-state .project-grid { display: grid; width: min(28rem, calc(100vw - 3rem)); grid-template-columns: 1fr !important; pointer-events: auto; } .seo-launcher-shell.zero-state .project-form { display: grid !important; gap: 1rem !important; padding: 1rem !important; border: 1px solid var(--nodedc-glass-outline) !important; border-radius: 1.35rem !important; background: var(--nodedc-glass-panel-surface-strong) !important; box-shadow: var(--nodedc-glass-panel-shadow), 0 28px 88px rgba(0, 0, 0, 0.24) !important; backdrop-filter: var(--nodedc-glass-panel-blur); -webkit-backdrop-filter: var(--nodedc-glass-panel-blur); } .seo-launcher-shell.zero-state .project-form .field > span { display: none; } .seo-launcher-shell.zero-state .folder-picker-panel { display: grid !important; min-height: 14rem !important; place-items: center !important; align-content: center !important; gap: 0.95rem !important; border: 1px dashed rgba(255, 255, 255, 0.52) !important; border-radius: 1.15rem !important; background: rgba(255, 255, 255, 0.14) !important; color: rgba(255, 255, 255, 0.86) !important; } .seo-launcher-shell.zero-state .folder-picker-panel::before { display: grid; width: 3.4rem; height: 3.4rem; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.86); color: rgba(10, 12, 14, 0.94); content: "+"; font-size: 2rem; font-weight: 360; line-height: 1; } .seo-launcher-shell.zero-state .folder-picker-panel .folder-pick-action { min-height: 2.8rem !important; padding: 0 1.2rem !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.92) !important; color: rgba(10, 12, 14, 0.94) !important; box-shadow: none !important; } .seo-launcher-shell.zero-state .folder-picker-panel > span { max-width: 15rem; color: rgba(255, 255, 255, 0.78) !important; font-size: 0.88rem; line-height: 1.22; text-align: center; } .seo-launcher-shell.zero-state .project-form > .primary-action { display: none !important; } .seo-launcher-shell.project-open .workspace { grid-template-columns: clamp(17rem, 18vw, 21rem) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); column-gap: 1rem !important; row-gap: 1rem !important; align-items: start; overflow: visible; } .seo-launcher-shell.project-open.work-fullscreen .workspace { grid-template-columns: minmax(0, 1fr); } .seo-stage-rail { position: sticky; top: calc(var(--nodedc-shell-height) + 1.5rem); z-index: 4; grid-column: 1; grid-row: 1 / 4; display: grid; max-height: calc(100vh - 7.4rem); gap: 0.75rem; overflow: hidden; padding: 1rem; border-radius: var(--launcher-radius-card); background: rgba(255, 255, 255, 0.68); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 24px 80px rgba(24, 32, 29, 0.1); backdrop-filter: blur(24px) saturate(1.12); -webkit-backdrop-filter: blur(24px) saturate(1.12); } .seo-launcher-shell.work-fullscreen .seo-stage-rail { display: none; } .seo-stage-rail-head { display: grid; gap: 0.24rem; padding: 0.35rem 0.45rem 0.7rem; } .seo-stage-rail-head span { color: var(--seo-shell-muted); font-size: 0.72rem; font-weight: 760; text-transform: uppercase; } .seo-stage-rail-head strong { overflow: hidden; color: var(--seo-shell-text); font-size: 1.02rem; line-height: 1.12; text-overflow: ellipsis; white-space: nowrap; } .seo-stage-rail-head small { color: var(--seo-shell-muted); font-size: 0.78rem; } .seo-stage-rail-list { display: grid; gap: 0.36rem; overflow: auto; padding-right: 0.12rem; } .seo-stage-rail-list button { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.16rem 0.65rem; min-height: 4rem; align-items: center; padding: 0.58rem; border: 0; border-radius: 1rem; background: rgba(10, 12, 14, 0.045); color: var(--seo-shell-text); text-align: left; } .seo-stage-rail-list button:hover:not(:disabled), .seo-stage-rail-list button.active { background: rgba(10, 12, 14, 0.08); } .seo-stage-rail-list button.active { box-shadow: inset 0 0 0 1px rgba(24, 24, 24, 0.12); } .seo-stage-rail-list button:disabled { opacity: 0.46; } .seo-stage-rail-list button > span { grid-row: 1 / span 2; display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.78); color: rgba(10, 12, 14, 0.66); font-size: 0.72rem; font-weight: 850; } .seo-stage-rail-list button.active > span { background: rgba(24, 24, 24, 0.94); color: #fff; } .seo-stage-rail-list button strong, .seo-stage-rail-list button small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seo-stage-rail-list button strong { font-size: 0.88rem; line-height: 1.12; } .seo-stage-rail-list button small { color: var(--seo-shell-muted); font-size: 0.72rem; line-height: 1.18; } .seo-launcher-shell.project-open .topbar, .seo-launcher-shell.project-open .flow-status-strip, .seo-launcher-shell.project-open .project-setup { grid-column: 2; min-width: 0; } .seo-launcher-shell.project-open .topbar { grid-row: 1; } .seo-launcher-shell.project-open .flow-status-strip { grid-row: 2; } .seo-launcher-shell.project-open .project-setup { grid-row: 3; } .seo-launcher-shell.project-open.work-fullscreen .topbar, .seo-launcher-shell.project-open.work-fullscreen .flow-status-strip, .seo-launcher-shell.project-open.work-fullscreen .project-setup { grid-column: 1; } .seo-launcher-shell.project-open .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding: 0.95rem 1rem; border: 0; border-radius: var(--launcher-radius-card); background: rgba(255, 255, 255, 0.74); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 24px 80px rgba(24, 32, 29, 0.09); backdrop-filter: blur(24px) saturate(1.12); -webkit-backdrop-filter: blur(24px) saturate(1.12); } .seo-launcher-shell.project-open .topbar::after { display: none !important; } .seo-launcher-shell.project-open .topbar h2 { font-size: 1.4rem !important; } .seo-launcher-shell.seo-stage-7.project-open .topbar { min-height: 3.7rem; margin-bottom: 0.55rem; padding: 0.66rem 0.78rem; } .seo-launcher-shell.seo-stage-7.project-open .topbar h2 { font-size: 1.22rem !important; line-height: 1.04; } .seo-launcher-shell.seo-stage-7.project-open .topbar p { font-size: 0.76rem !important; line-height: 1.1; } .seo-work-panel-actions { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.18rem; border-radius: 999px; background: rgba(10, 12, 14, 0.06); } .seo-work-panel-actions button { display: grid; width: 2.42rem; height: 2.42rem; place-items: center; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.8); color: rgba(10, 12, 14, 0.74); } .seo-work-panel-actions button:hover { background: rgba(24, 24, 24, 0.94); color: #fff; } .seo-work-panel-actions button:focus, .seo-work-panel-actions button:focus-visible, .seo-stage-rail-list button:focus, .seo-stage-rail-list button:focus-visible { outline: none; } .seo-work-panel-actions button:focus-visible { box-shadow: inset 0 0 0 1px rgba(10, 12, 14, 0.16), 0 10px 30px rgba(24, 32, 29, 0.08); } .seo-launcher-shell.project-open .project-setup { padding: 1rem !important; border-radius: var(--launcher-radius-card); background: rgba(255, 255, 255, 0.74) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 24px 80px rgba(24, 32, 29, 0.09) !important; backdrop-filter: blur(24px) saturate(1.08); -webkit-backdrop-filter: blur(24px) saturate(1.08); } .seo-launcher-shell.project-open .project-setup > .section-heading { padding: 0.15rem 0.15rem 0.85rem !important; } .seo-launcher-shell.project-open .project-grid { gap: 1rem !important; } .seo-launcher-shell.project-open .project-form { display: none !important; } .seo-launcher-shell.project-open .project-list-card { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .seo-project-name-modal-backdrop { position: fixed; inset: 0; z-index: var(--nodedc-layer-modal); display: grid; place-items: center; padding: 1rem; background: rgba(10, 12, 14, 0.28); backdrop-filter: var(--nodedc-glass-panel-blur); -webkit-backdrop-filter: var(--nodedc-glass-panel-blur); } .seo-project-name-modal { display: grid; width: min(30rem, 100%); gap: 1rem; padding: 1rem; border: 1px solid var(--nodedc-glass-outline); border-radius: 1.35rem; background: var(--nodedc-glass-panel-surface-strong); box-shadow: var(--nodedc-glass-panel-shadow), 0 30px 110px rgba(0, 0, 0, 0.24); backdrop-filter: var(--nodedc-glass-panel-blur); -webkit-backdrop-filter: var(--nodedc-glass-panel-blur); } .seo-project-name-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; } .seo-project-name-modal-head span { color: var(--seo-shell-muted); font-size: 0.76rem; font-weight: 760; text-transform: uppercase; } .seo-project-name-modal-head button { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border: 0; border-radius: 999px; background: rgba(10, 12, 14, 0.06); color: rgba(10, 12, 14, 0.78); } .seo-project-name-modal .service-field input { min-height: 3rem; border-radius: 1rem; } .seo-project-name-modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; } .seo-project-name-modal-actions .primary-action { width: auto; min-height: 2.65rem; padding-inline: 1.25rem; } @media (max-width: 980px) { .seo-launcher-shell.project-open .workspace { grid-template-columns: 1fr; } .seo-stage-rail { position: relative; top: auto; max-height: none; } .seo-launcher-shell.project-open .topbar, .seo-launcher-shell.project-open .flow-status-strip, .seo-launcher-shell.project-open .project-setup { grid-column: 1; } } @media (max-width: 720px) { .seo-launcher-shell .nodedc-expanded-toolbar-top { grid-template-columns: 1fr; justify-items: center; } .seo-launcher-shell .nodedc-expanded-toolbar-left, .seo-launcher-shell .nodedc-expanded-toolbar-center, .seo-launcher-shell .nodedc-expanded-toolbar-right { justify-content: center; } .seo-launcher-shell .stage-empty-title { top: 2rem; left: 2rem; } .seo-launcher-shell.zero-state .project-setup { min-height: calc(100vh - 12rem); } .seo-launcher-shell.project-open .topbar { grid-template-columns: 1fr; } } /* Launcher geometry correction: viewport is fixed; only inner panels scroll. */ html:has(.seo-launcher-shell), body:has(.seo-launcher-shell), #root:has(.seo-launcher-shell) { height: 100%; overflow: hidden; } body:has(.seo-launcher-shell) { background: #f2f2f2; } .seo-launcher-shell { --seo-shell-occupied-top: calc( var(--nodedc-shell-height) + var(--nodedc-shell-padding-top) + var(--nodedc-shell-padding-bottom) ); --seo-work-nav-width: clamp(20.75rem, 19.5vw, 22rem); --seo-work-panel-gap: 1.2rem; --seo-admin-nav-pad: 1.1rem; --seo-admin-control-ring: 2.92rem; --seo-admin-control-inset: 5px; height: 100vh; min-height: 0; overflow: hidden; } .seo-launcher-shell .workspace { position: relative !important; display: block !important; width: 100% !important; height: calc(100vh - var(--seo-shell-occupied-top)) !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .seo-launcher-shell .footer-line { display: none !important; } .seo-zero-stage { inset: 0 var(--launcher-page-pad) var(--launcher-page-pad) !important; } .seo-work-panel { position: absolute; z-index: 5; top: 0; right: var(--launcher-page-pad); bottom: var(--launcher-page-pad); left: calc(var(--launcher-page-pad) + var(--seo-work-nav-width) + var(--seo-work-panel-gap)); display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; overflow: hidden; border: 0; border-radius: var(--launcher-radius-card); background: rgba(255, 255, 255, 0.76); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 34px 110px rgba(24, 32, 29, 0.12); backdrop-filter: blur(28px) saturate(1.12); -webkit-backdrop-filter: blur(28px) saturate(1.12); animation: seoPanelSlide 460ms cubic-bezier(0.22, 1, 0.36, 1) both; } .seo-launcher-shell.work-fullscreen .seo-work-panel { left: var(--launcher-page-pad); } .seo-launcher-shell.zero-state .seo-work-panel { inset: 0 var(--launcher-page-pad) var(--launcher-page-pad); display: grid; grid-template-rows: 1fr !important; place-items: center; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; animation: none; } .seo-launcher-shell.zero-state .seo-work-panel .project-setup { pointer-events: none; } .seo-launcher-shell.zero-state .project-grid { pointer-events: auto; } .seo-launcher-shell.zero-state .project-setup { align-self: center !important; justify-self: center !important; width: min(28rem, calc(100vw - 3rem)) !important; min-height: 0 !important; height: auto !important; place-items: center !important; } .seo-launcher-shell.project-open .seo-stage-rail { position: absolute !important; z-index: 6; top: 0; bottom: var(--launcher-page-pad); left: var(--launcher-page-pad); width: var(--seo-work-nav-width); max-height: none; min-height: 0; grid-row: auto; grid-column: auto; grid-template-rows: auto minmax(0, 1fr); animation: seoPanelSlide 420ms cubic-bezier(0.22, 1, 0.36, 1) both; } .seo-launcher-shell.work-fullscreen .seo-stage-rail { display: none !important; } .seo-stage-rail { padding: var(--seo-admin-nav-pad); } .seo-stage-rail-head { padding: 0.55rem 0.55rem 0.9rem; } .seo-stage-rail-list { width: calc(100% + (var(--seo-admin-nav-pad) * 2)); margin-inline: calc(var(--seo-admin-nav-pad) * -1); min-height: 0; overflow: auto; scrollbar-width: none; } .seo-stage-rail-list::-webkit-scrollbar { display: none; } .seo-stage-rail-list button { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(var(--seo-admin-control-ring) + (var(--seo-admin-control-inset) * 2)); align-content: center; padding: var(--seo-admin-control-inset) 0.9rem var(--seo-admin-control-inset) calc(var(--seo-admin-control-inset) + var(--seo-admin-control-ring) + 0.86rem); border-radius: 999px; background: rgba(10, 12, 14, 0.045); color: rgba(10, 12, 14, 0.72); box-shadow: none; opacity: 0.9; transition: background 160ms ease, color 160ms ease, opacity 160ms ease, transform 160ms ease, box-shadow 160ms ease; } .seo-stage-rail-list button:hover:not(:disabled) { background: rgba(10, 12, 14, 0.075); color: rgba(8, 8, 10, 0.95); opacity: 1; transform: translateY(-1px); } .seo-stage-rail-list button.active { background: rgba(10, 12, 14, 0.095); color: rgba(8, 8, 10, 0.98); box-shadow: inset 0 0 0 1px rgba(24, 24, 24, 0.12); opacity: 1; } .seo-stage-rail-list button > span { position: absolute; top: 50%; left: var(--seo-admin-control-inset); width: var(--seo-admin-control-ring); height: var(--seo-admin-control-ring); transform: translateY(-50%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 8px 20px rgba(20, 24, 22, 0.08); } .seo-stage-rail-list button strong, .seo-stage-rail-list button small { grid-column: 1; } .seo-launcher-shell.project-open .topbar { position: relative; z-index: var(--nodedc-layer-panel-raised); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-row: auto; grid-column: auto; align-items: center; gap: 1rem; min-height: 5.6rem; margin: 0; padding: 1.15rem 1.15rem 0.75rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .seo-launcher-shell.project-open .topbar h2 { max-width: 56rem; font-size: 1.42rem !important; line-height: 1.1; } .seo-launcher-shell.project-open .topbar .eyebrow { color: var(--seo-shell-muted); } .seo-launcher-shell.project-open .flow-status-strip { display: none !important; } .seo-work-panel-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 0; border-radius: 999px; background: transparent; } .seo-work-panel-actions button { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.9); color: rgba(10, 12, 14, 0.84); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 10px 30px rgba(24, 32, 29, 0.08); } .seo-work-panel-actions button:last-child { background: rgba(255, 255, 255, 0.42); box-shadow: inset 0 0 0 1px rgba(10, 12, 14, 0.08); } .seo-work-panel-actions button:hover { background: rgba(24, 24, 24, 0.94); color: #fff; } .seo-work-panel-export { position: relative; display: grid; } .seo-work-panel-export-menu { position: fixed; isolation: isolate; z-index: var(--nodedc-layer-popover); display: grid; min-width: 13.75rem; gap: 0.36rem; padding: 0.56rem; border: 0; border-radius: 1.28rem; background: var(--nodedc-header-dropdown-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 24px 70px rgba(24, 28, 26, 0.16); backdrop-filter: var(--nodedc-glass-panel-blur); -webkit-backdrop-filter: var(--nodedc-glass-panel-blur); } .seo-work-panel-export-menu::after { pointer-events: none; content: none; } .seo-work-panel-export-menu button, .seo-work-panel-export-menu button:last-child, .seo-work-panel-actions .seo-work-panel-export-menu button, .seo-work-panel-actions .seo-work-panel-export-menu button:last-child { position: relative; z-index: 3; display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.5rem; width: 100%; height: auto; min-height: 2.55rem; padding: 0 0.7rem; border: 0; border-radius: 0.95rem; background: var(--nodedc-header-dropdown-item-bg); box-shadow: var(--nodedc-glass-control-shadow); color: rgba(10, 12, 14, 0.88); font-size: 0.84rem; font-weight: 800; text-align: left; line-height: 1; backdrop-filter: var(--nodedc-glass-blur); -webkit-backdrop-filter: var(--nodedc-glass-blur); } .seo-work-panel-export-menu button:hover, .seo-work-panel-actions .seo-work-panel-export-menu button:hover { background: var(--nodedc-header-dropdown-item-hover-bg); color: rgba(10, 12, 14, 0.96); transform: none; } .seo-work-panel-export-menu button svg { flex: 0 0 auto; } .seo-work-panel-export-menu button:disabled, .seo-work-panel-actions button:disabled, .seo-work-panel-actions .seo-work-panel-export-menu button:disabled { cursor: not-allowed; opacity: 0.55; } .seo-strategy-pdf-render-root { position: absolute; top: 0; left: -200vw; z-index: -1; display: grid; gap: 12px; padding: 18px; background: #fff; color: var(--ink); pointer-events: none; } .seo-strategy-pdf-render-root, .seo-strategy-pdf-render-root * { box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; } .seo-strategy-pdf-render-root *::before, .seo-strategy-pdf-render-root *::after { box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; } .seo-strategy-pdf-render-root *::after { content: none !important; } .seo-strategy-pdf-render-root .market-panel, .seo-strategy-pdf-render-root .market-heading, .seo-strategy-pdf-render-root .strategy-cockpit, .seo-strategy-pdf-render-root .strategy-decision-hero, .seo-strategy-pdf-render-root .strategy-decision-main, .seo-strategy-pdf-render-root .strategy-decision-side, .seo-strategy-pdf-render-root .strategy-scenario-decision-grid article, .seo-strategy-pdf-render-root .strategy-scorecard-grid article, .seo-strategy-pdf-render-root .strategy-landing-card, .seo-strategy-pdf-render-root .strategy-landing-lanes > section, .seo-strategy-pdf-render-root .strategy-route-board, .seo-strategy-pdf-render-root .strategy-evidence-grid article, .seo-strategy-pdf-render-root .strategy-phase-selector, .seo-strategy-pdf-render-root .strategy-phase-detail, .seo-strategy-pdf-render-root .strategy-phase-detail-grid article, .seo-strategy-pdf-render-root .seo-chart, .seo-strategy-pdf-render-root .market-wordstat-card, .seo-strategy-pdf-render-root .market-decision-board, .seo-strategy-pdf-render-root .market-columns section, .seo-strategy-pdf-render-root .market-next-actions, .seo-strategy-pdf-render-root .market-seed-list div, .seo-strategy-pdf-render-root .market-brief-list div, .seo-strategy-pdf-render-root .keyword-page-plan-card, .seo-strategy-pdf-render-root .keyword-page-phrase-list > div, .seo-strategy-pdf-render-root .keyword-next-action-list p, .seo-strategy-pdf-render-root .strategy-dev-details { border: 1px solid rgba(24, 32, 29, 0.1) !important; background: #fff !important; } .seo-strategy-pdf-render-root .market-panel, .seo-strategy-pdf-render-root .strategy-cockpit, .seo-strategy-pdf-render-root .strategy-dev-details { border: 0 !important; background: #fff !important; } .seo-strategy-pdf-render-root .strategy-coverage-strip article, .seo-strategy-pdf-render-root .market-decision-metrics article, .seo-strategy-pdf-render-root .strategy-confirm-grid article, .seo-strategy-pdf-render-root .keyword-raw-grid > div, .seo-strategy-pdf-render-root .market-wordstat-card > div:last-of-type, .seo-strategy-pdf-render-root .strategy-route-grid button { border: 1px solid rgba(24, 32, 29, 0.08) !important; background: #f8f8f7 !important; } .seo-strategy-pdf-render-root .strategy-decision-toolbar, .seo-strategy-pdf-render-root .seo-work-panel-actions, .seo-strategy-pdf-render-root .strategy-landing-actions { display: none !important; } .seo-strategy-pdf-render-root details, .seo-strategy-pdf-render-root details[open] { border: 1px solid rgba(24, 32, 29, 0.1) !important; background: #fff !important; } .seo-strategy-pdf-render-root summary { background: #f8f8f7 !important; } .seo-strategy-pdf-render-root .strategy-decision-hero, .seo-strategy-pdf-render-root .strategy-scenario-decision-grid article.selected, .seo-strategy-pdf-render-root .strategy-route-grid button.current { border-color: rgba(47, 107, 79, 0.28) !important; background: #f6faf7 !important; } .seo-strategy-pdf-render-root .tone-good, .seo-strategy-pdf-render-root .collected, .seo-strategy-pdf-render-root .ready_for_collection, .seo-strategy-pdf-render-root .partial_ready { background-image: none !important; } .seo-strategy-pdf-title { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; } .seo-strategy-pdf-title img, .seo-strategy-pdf-title svg { display: block; width: 88px; height: auto; } .seo-strategy-pdf-title svg { color: var(--ink); } .seo-strategy-pdf-title div { display: grid; gap: 4px; } .seo-strategy-pdf-title strong { color: var(--ink); font-size: 24px; line-height: 1.08; } .seo-strategy-pdf-title span { color: var(--muted); font-size: 13px; font-weight: 760; } .seo-launcher-shell.project-open .project-setup { grid-row: auto; grid-column: auto; min-height: 0; overflow: auto; padding: 0 1.15rem 1.15rem !important; border-radius: 0; background: transparent !important; box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; scrollbar-width: thin; } .seo-launcher-shell.project-open .project-setup > .section-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.8rem; margin: 0 0 1rem; padding: 0.55rem 0.15rem 0.9rem !important; border-bottom: 1px solid rgba(10, 12, 14, 0.08); } .seo-launcher-shell.project-open .project-setup > .section-heading h3 { font-size: 1.2rem; line-height: 1.12; } .seo-launcher-shell.project-open .project-setup > .section-heading p { max-width: 62rem; margin-top: 0.28rem; } .seo-stage-summary-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.7rem; } .seo-stage-summary-row span { display: inline-flex; min-height: 1.6rem; align-items: center; padding: 0 0.62rem; border-radius: 999px; background: rgba(38, 104, 74, 0.09); color: #2c6a51; font-size: 0.72rem; font-weight: 850; line-height: 1; white-space: nowrap; } .seo-launcher-shell.project-open .project-grid { min-height: 0; gap: 0 !important; } .seo-launcher-shell.project-open .project-list-card { min-height: 0; overflow: visible !important; } .seo-launcher-shell.project-open .project-row { min-height: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .seo-launcher-shell.project-open .project-row > div:first-child > .project-title-row, .seo-launcher-shell.project-open .project-row > div:first-child > .project-source, .seo-launcher-shell.project-open .project-row > div:first-child > .project-scan-status { display: none !important; } .seo-header-mode-switch { min-height: var(--nodedc-shell-pill-height) !important; padding: var(--nodedc-shell-pill-padding) !important; border: 0 !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.7) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 52px rgba(24, 32, 29, 0.12) !important; backdrop-filter: blur(24px) saturate(1.18); -webkit-backdrop-filter: blur(24px) saturate(1.18); } .seo-header-mode-switch button { min-height: var(--nodedc-shell-control-height) !important; padding: 0.2rem 1.22rem !important; border-radius: 999px !important; border: 0 !important; background: transparent !important; color: rgba(10, 12, 14, 0.62) !important; box-shadow: none !important; font-size: 0.74rem !important; font-weight: 760 !important; } .seo-header-mode-switch button.active { background: rgba(255, 255, 255, 0.96) !important; color: rgba(8, 8, 10, 0.96) !important; } .seo-launcher-shell .nodedc-expanded-toolbar-center { gap: 0.65rem; } @keyframes seoPanelSlide { from { opacity: 0; transform: translateX(-1.25rem); } to { opacity: 1; transform: translateX(0); } } @media (max-width: 980px) { .seo-work-panel, .seo-launcher-shell.work-fullscreen .seo-work-panel { left: var(--launcher-page-pad); } .seo-launcher-shell.project-open .seo-stage-rail { display: none; } } /* Launcher panel model: video stage is persistent; nav/content panels slide over it. */ .seo-launcher-shell { --seo-work-content-width: calc( 100vw - (var(--launcher-page-pad) * 2) - var(--seo-work-panel-gap) - var(--seo-work-nav-width) ); } .seo-zero-stage { position: absolute !important; z-index: 1; inset: 0 !important; display: grid; min-width: 0; min-height: 0; overflow: hidden; padding: 0 var(--launcher-page-pad) var(--launcher-page-pad); transition: padding-left 440ms cubic-bezier(0.22, 1, 0.36, 1), transform 440ms cubic-bezier(0.22, 1, 0.36, 1); } .seo-zero-stage .stage-video-shell { width: 100%; height: 100%; min-width: 0; min-height: 0; } .seo-launcher-shell.project-open .seo-zero-stage { padding-left: calc(var(--launcher-page-pad) + var(--seo-work-nav-width) + var(--seo-work-panel-gap)); } .seo-launcher-shell.project-open.content-open .seo-zero-stage { padding-left: calc( var(--launcher-page-pad) + var(--seo-work-nav-width) + var(--seo-work-panel-gap) + var(--seo-work-content-width) + var(--seo-work-panel-gap) ); } .seo-launcher-shell.project-open.work-fullscreen .seo-zero-stage { transform: translateX(calc(100vw + var(--launcher-page-pad))); pointer-events: none; } .seo-launcher-shell.zero-state .seo-zero-stage { padding-left: var(--launcher-page-pad); } .seo-launcher-shell.project-open .seo-stage-rail { position: absolute !important; z-index: 8; top: 0; bottom: var(--launcher-page-pad); left: var(--launcher-page-pad); display: grid; width: var(--seo-work-nav-width); min-width: var(--seo-work-nav-width); grid-template-rows: auto minmax(0, 1fr); gap: 1.05rem; padding: var(--seo-admin-nav-pad); border-radius: var(--launcher-radius-card); background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.54)), rgba(255, 255, 255, 0.72); box-shadow: 0 34px 110px rgba(24, 32, 29, 0.14); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); animation: seoPanelSlide 420ms cubic-bezier(0.22, 1, 0.36, 1) both; } .seo-stage-rail-list { display: grid !important; width: calc(100% + (var(--seo-admin-nav-pad) * 2)) !important; margin-inline: calc(var(--seo-admin-nav-pad) * -1) !important; align-content: start !important; align-items: start !important; grid-auto-rows: max-content !important; gap: 0.22rem !important; overflow-x: visible !important; overflow-y: auto !important; } .seo-stage-rail-list button { width: 100% !important; min-height: calc(var(--seo-admin-control-ring) + (var(--seo-admin-control-inset) * 2)) !important; height: auto !important; max-height: calc(var(--seo-admin-control-ring) + (var(--seo-admin-control-inset) * 2)) !important; align-content: center !important; justify-content: start !important; border-radius: 999px !important; overflow: hidden; } .seo-stage-rail-list button > span { display: grid !important; place-items: center !important; width: var(--seo-admin-control-ring) !important; height: var(--seo-admin-control-ring) !important; } .seo-stage-rail-list button strong { font-size: 0.91rem !important; line-height: 1.08 !important; } .seo-stage-rail-list button small { font-size: 0.72rem !important; line-height: 1.05 !important; } .seo-launcher-shell.content-open .seo-work-panel { position: absolute; z-index: 9; top: 0; right: auto; bottom: var(--launcher-page-pad); left: calc(var(--launcher-page-pad) + var(--seo-work-nav-width) + var(--seo-work-panel-gap)); display: grid; width: var(--seo-work-content-width); min-width: 0; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; padding: 0; border-radius: var(--launcher-radius-card); background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.66)), rgba(255, 255, 255, 0.76); box-shadow: none; backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); animation: seoPanelSlide 460ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both; } .seo-launcher-shell.work-fullscreen.content-open .seo-work-panel { right: var(--launcher-page-pad); left: var(--launcher-page-pad); width: auto; animation-delay: 0ms; } .seo-launcher-shell.work-fullscreen .seo-stage-rail { display: none !important; } .seo-launcher-shell.zero-state .seo-work-panel { z-index: 5; } .seo-launcher-shell.project-open:not(.content-open) .seo-work-panel { display: none !important; } @media (max-width: 980px) { .seo-launcher-shell.project-open .seo-zero-stage, .seo-launcher-shell.project-open.content-open .seo-zero-stage { padding-left: var(--launcher-page-pad); } .seo-launcher-shell.content-open .seo-work-panel, .seo-launcher-shell.work-fullscreen.content-open .seo-work-panel { right: var(--launcher-page-pad); left: var(--launcher-page-pad); width: auto; } } /* Launcher UX pass: glass controls, hidden right video tail, compact stage 2 editor. */ .seo-launcher-shell.zero-state .project-grid { width: min(29rem, calc(100vw - 3rem)) !important; } .seo-launcher-shell.zero-state .project-form { width: 100% !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .seo-launcher-shell.zero-state .project-form .field { margin: 0 !important; } .seo-launcher-shell.zero-state .folder-picker-panel { width: 100% !important; min-height: 13.9rem !important; padding: 1.05rem !important; place-items: center !important; align-content: center !important; justify-content: center !important; gap: 0.78rem !important; border: 1px solid var(--nodedc-glass-outline) !important; border-radius: 1.22rem !important; background: var(--nodedc-glass-panel-surface-strong) !important; box-shadow: var(--nodedc-glass-panel-shadow), 0 28px 88px rgba(24, 28, 26, 0.2) !important; backdrop-filter: var(--nodedc-glass-panel-blur) !important; -webkit-backdrop-filter: var(--nodedc-glass-panel-blur) !important; } .seo-launcher-shell.zero-state .folder-picker-panel::before { order: 1; margin: 0 auto !important; } .seo-launcher-shell.zero-state .folder-picker-panel > span { order: 2; margin: 0 auto !important; } .seo-launcher-shell.zero-state .folder-picker-panel .folder-pick-action { order: 3; margin: 0 auto !important; } .seo-project-menu-trigger svg { display: none !important; } .seo-project-menu-popover { left: var(--nodedc-shell-pill-padding) !important; right: auto !important; top: calc(100% + 0.65rem) !important; transform: none !important; width: min(27rem, calc(100vw - 3rem)) !important; border: 1px solid var(--nodedc-glass-outline) !important; background: var(--nodedc-glass-panel-surface-strong) !important; box-shadow: var(--nodedc-glass-panel-shadow), 0 30px 90px rgba(24, 28, 26, 0.16) !important; backdrop-filter: var(--nodedc-glass-panel-blur) !important; -webkit-backdrop-filter: var(--nodedc-glass-panel-blur) !important; } .seo-project-menu-list button { background: var(--nodedc-glass-control-bg) !important; box-shadow: var(--nodedc-glass-control-shadow) !important; backdrop-filter: var(--nodedc-glass-blur) !important; -webkit-backdrop-filter: var(--nodedc-glass-blur) !important; } .seo-project-menu-list button:hover, .seo-project-menu-list button.active { background: var(--nodedc-glass-control-hover) !important; } .seo-project-menu-add { background: rgba(24, 24, 24, 0.94) !important; } .seo-header-mode-switch button.active { background: rgba(24, 24, 24, 0.94) !important; color: #ffffff !important; } .seo-launcher-shell.project-open.content-open .seo-zero-stage { transform: translateX(calc(100vw + var(--launcher-page-pad))); pointer-events: none; } .seo-launcher-shell.project-open.content-open .seo-work-panel { right: var(--launcher-page-pad) !important; width: auto !important; } .seo-launcher-shell .workspace.stage-2 .project-setup { display: grid !important; height: 100% !important; min-height: 0 !important; grid-template-rows: minmax(0, 1fr); overflow: hidden !important; padding: 0 1rem 1rem !important; } .seo-launcher-shell .workspace.stage-2 .project-grid, .seo-launcher-shell .workspace.stage-2 .project-list-card, .seo-launcher-shell .workspace.stage-2 .project-list, .seo-launcher-shell .workspace.stage-2 .project-row, .seo-launcher-shell .workspace.stage-2 .project-row > div:first-child, .seo-launcher-shell .workspace.stage-2 .page-audit-overview { display: grid !important; height: 100% !important; min-height: 0 !important; grid-template-rows: minmax(0, 1fr); overflow: hidden !important; } .seo-launcher-shell .workspace.stage-2 .page-audit-summary, .seo-launcher-shell .workspace.stage-2 .configuration-confirm-bar, .seo-launcher-shell .workspace.stage-2 .engineering-page-list { display: none !important; } .seo-launcher-shell .workspace.stage-2 .project-scope-flow-panel { display: grid !important; height: 100% !important; min-height: 0 !important; grid-template-rows: minmax(0, 1fr) !important; gap: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } .seo-launcher-shell .workspace.stage-2 .project-scope-flow-controls { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 1rem !important; min-height: 4.25rem; padding: 0.78rem 0.85rem !important; border: 1px solid rgba(31, 42, 37, 0.08); border-radius: 1rem; background: rgba(255, 255, 255, 0.64); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); backdrop-filter: blur(18px) saturate(1.08); -webkit-backdrop-filter: blur(18px) saturate(1.08); } .project-scope-flow-confirm-copy { display: grid; min-width: 0; gap: 0.12rem; } .project-scope-flow-confirm-copy span { color: #3b6470; font-size: 0.68rem; font-weight: 860; letter-spacing: 0; text-transform: uppercase; } .project-scope-flow-confirm-copy strong { color: rgba(8, 8, 10, 0.96); font-size: 0.98rem; line-height: 1.08; } .project-scope-flow-confirm-copy small { overflow: hidden; color: rgba(8, 8, 10, 0.56); font-size: 0.76rem; line-height: 1.16; text-overflow: ellipsis; white-space: nowrap; } .project-scope-flow-confirm-action { display: inline-flex; min-height: 2.65rem; align-items: center; justify-content: center; gap: 0.45rem; padding: 0 1.15rem; border: 0; border-radius: 999px; background: rgba(24, 24, 24, 0.94); color: #fff; font-size: 0.86rem; font-weight: 820; white-space: nowrap; } .project-scope-flow-confirm-action:disabled { cursor: not-allowed; background: rgba(10, 12, 14, 0.12); color: rgba(10, 12, 14, 0.42); } .seo-launcher-shell .workspace.stage-2 .project-scope-flow-canvas { height: 100% !important; min-height: 0 !important; border-radius: 1rem !important; } .project-scope-flow-stats { position: absolute; z-index: 12; top: 0.78rem; left: 0.78rem; display: flex; max-width: calc(100% - 1.56rem); flex-wrap: wrap; gap: 0.42rem; pointer-events: none; } .project-scope-flow-stats span { display: inline-flex; min-height: 2.2rem; align-items: center; gap: 0.42rem; padding: 0 0.74rem; border: 1px solid rgba(31, 42, 37, 0.08); border-radius: 999px; background: rgba(255, 255, 255, 0.78); color: rgba(10, 12, 14, 0.64); box-shadow: 0 10px 30px rgba(24, 32, 29, 0.08); font-size: 0.75rem; font-weight: 800; line-height: 1; white-space: nowrap; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* Work panels: the header is part of the same surface, not a separate card. */ .seo-launcher-shell.project-open .topbar { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 1rem !important; min-height: 5.45rem !important; padding: 1.05rem 1.15rem 0.85rem !important; border: 0 !important; border-radius: var(--launcher-radius-card) var(--launcher-radius-card) 0 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .seo-launcher-shell.project-open .topbar::after { display: none !important; } .seo-launcher-shell.project-open .topbar > div:first-child { visibility: visible !important; pointer-events: auto !important; } .seo-work-panel-heading { display: grid; min-width: 0; gap: 0.18rem; } .seo-work-panel-heading h2 { margin: 0 !important; color: rgba(8, 8, 10, 0.96) !important; font-size: 1.04rem !important; font-weight: 850 !important; letter-spacing: 0 !important; line-height: 1.06 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seo-work-panel-heading p { margin: 0 !important; color: rgba(8, 8, 10, 0.56) !important; font-size: 0.78rem !important; font-weight: 620 !important; line-height: 1.16 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seo-work-panel-toolbar { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 0.6rem; } .seo-topbar-primary-action { display: inline-flex; min-height: 2.65rem; align-items: center; justify-content: center; gap: 0.45rem; padding: 0 1.15rem; border: 0; border-radius: 999px; background: rgba(24, 24, 24, 0.94); color: #fff; font-size: 0.86rem; font-weight: 820; white-space: nowrap; } .seo-topbar-primary-action:disabled { cursor: not-allowed; background: rgba(10, 12, 14, 0.12); color: rgba(10, 12, 14, 0.42); } .seo-topbar-workspace-actions { display: inline-flex; min-width: 0; align-items: center; gap: 0.42rem; } .seo-topbar-workspace-actions > button, .seo-topbar-preview-mode-switch > button { display: inline-flex; min-height: 2.34rem; align-items: center; justify-content: center; gap: 0.38rem; padding: 0 0.86rem; border: 0; border-radius: 999px; background: rgba(10, 12, 14, 0.06); color: rgba(8, 8, 10, 0.58); font-size: 0.8rem; font-weight: 800; letter-spacing: 0; white-space: nowrap; } .seo-topbar-workspace-actions > button.active, .seo-topbar-preview-mode-switch > button.active { background: rgba(24, 24, 24, 0.94); color: #fff; } .seo-topbar-workspace-actions em { display: inline-flex; min-width: 1.34rem; min-height: 1.34rem; align-items: center; justify-content: center; padding: 0 0.32rem; border-radius: 999px; background: rgba(255, 255, 255, 0.72); color: rgba(8, 8, 10, 0.68); font-style: normal; line-height: 1; } .seo-topbar-workspace-actions > button.active em { background: rgba(255, 255, 255, 0.2); color: #fff; } .seo-topbar-visual-actions { gap: 0.34rem; padding: 0.18rem; border-radius: 999px; background: rgba(10, 12, 14, 0.06); } .seo-topbar-visual-actions > button { position: relative; width: 2.42rem; min-width: 2.42rem; height: 2.42rem; min-height: 2.42rem; padding: 0; border: 0; background: rgba(255, 255, 255, 0.8); color: rgba(10, 12, 14, 0.74); } .seo-topbar-visual-actions > button:hover:not(:disabled), .seo-topbar-visual-actions > button.active { background: rgba(24, 24, 24, 0.94); color: #fff; } .seo-topbar-visual-actions > button:disabled { cursor: not-allowed; opacity: 0.46; } .seo-topbar-visual-actions > button.needs-regeneration { color: #ffffff; background: #e82d86; animation: semantic-generation-pulse 1.35s ease-out infinite; } .seo-topbar-visual-actions > button em { position: absolute; top: -0.28rem; right: -0.26rem; min-width: 1.08rem; min-height: 1.08rem; padding: 0 0.28rem; border: 1px solid rgba(255, 255, 255, 0.88); background: #e82d86; color: #ffffff; font-size: 0.62rem; font-weight: 900; box-shadow: 0 8px 18px rgba(232, 45, 134, 0.22); } .seo-topbar-preview-mode-switch { display: inline-flex; align-items: center; gap: 0.12rem; min-height: 2.5rem; padding: 0.18rem; border-radius: 999px; background: rgba(255, 255, 255, 0.56); } .seo-launcher-shell.project-open .seo-work-panel { background: linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.46)), rgba(255, 255, 255, 0.58) !important; } .seo-launcher-shell.project-open .workspace.stage-5 .market-panel { padding: 1rem !important; background: #fff !important; border: 0 !important; border-radius: var(--launcher-radius-card) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .seo-launcher-shell .workspace.stage-2 .project-scope-flow-controls { justify-content: flex-end !important; } .seo-launcher-shell .workspace.stage-2 .project-scope-flow-confirm-copy { max-width: min(38rem, calc(100% - 11rem)); text-align: right; } /* Stage 3: clean preview-first workspace, no secondary document chrome. */ .seo-launcher-shell .workspace.stage-3 .project-setup { display: grid !important; height: 100% !important; min-height: 0 !important; grid-template-rows: minmax(0, 1fr); overflow: hidden !important; padding: 0 1rem 1rem !important; } .seo-launcher-shell .workspace.stage-3 .project-grid, .seo-launcher-shell .workspace.stage-3 .project-list-card, .seo-launcher-shell .workspace.stage-3 .project-list, .seo-launcher-shell .workspace.stage-3 .project-row, .seo-launcher-shell .workspace.stage-3 .project-row > div:first-child, .seo-launcher-shell .workspace.stage-3 .scan-summary, .seo-launcher-shell .workspace.stage-3 .scan-selection, .seo-launcher-shell .workspace.stage-3 .page-workspace-panel, .seo-launcher-shell .workspace.stage-3 .workspace-editor-stack, .seo-launcher-shell .workspace.stage-3 .workspace-preview-panel, .seo-launcher-shell .workspace.stage-3 .workspace-preview-shell { display: grid !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; } .seo-launcher-shell .workspace.stage-3 .project-grid, .seo-launcher-shell .workspace.stage-3 .project-list-card, .seo-launcher-shell .workspace.stage-3 .project-list, .seo-launcher-shell .workspace.stage-3 .project-row, .seo-launcher-shell .workspace.stage-3 .project-row > div:first-child, .seo-launcher-shell .workspace.stage-3 .scan-summary, .seo-launcher-shell .workspace.stage-3 .scan-selection, .seo-launcher-shell .workspace.stage-3 .page-workspace-panel { grid-template-rows: minmax(0, 1fr); } .seo-launcher-shell .workspace.stage-3 .project-row { grid-template-rows: minmax(0, 1fr) !important; } .seo-launcher-shell .workspace.stage-3 .project-row > div:first-child { grid-row: 1 / -1 !important; height: 100% !important; } .seo-launcher-shell .workspace.stage-3 .project-row > :not(div:first-child) { display: none !important; } .seo-launcher-shell .workspace.stage-3 .scan-selection { padding: 0 !important; } .seo-launcher-shell .workspace.stage-3 .workspace-editor-stack { grid-template-rows: minmax(0, 1fr) !important; gap: 0 !important; } .seo-launcher-shell .workspace.stage-3 .workspace-current-page { display: none !important; padding: 0 !important; } .seo-launcher-shell .workspace.stage-3 .workspace-current-page > div { gap: 0.18rem !important; } .seo-launcher-shell .workspace.stage-3 .workspace-current-page small { color: rgba(10, 12, 14, 0.56) !important; font-size: 0.78rem !important; font-weight: 620 !important; line-height: 1.16 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seo-launcher-shell .workspace.stage-3 .workspace-current-page strong { color: rgba(8, 8, 10, 0.96) !important; font-size: clamp(1.12rem, 1.35vw, 1.52rem) !important; font-weight: 820 !important; letter-spacing: 0 !important; line-height: 1.08 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seo-launcher-shell .workspace.stage-3 .workspace-cockpit-toolbar, .seo-launcher-shell .workspace.stage-3 .workspace-preview-status, .seo-launcher-shell .workspace.stage-3 .workspace-current-page-actions, .seo-launcher-shell .workspace.stage-3 .workspace-raw-draft { display: none !important; } .seo-launcher-shell .workspace.stage-3 .workspace-preview-panel { gap: 0 !important; padding: 0 !important; border: 1px solid rgba(31, 42, 37, 0.1) !important; border-radius: 1rem !important; background: #ffffff !important; } .seo-launcher-shell .workspace.stage-3 .workspace-preview-shell { min-height: 0 !important; border: 0 !important; border-radius: 1rem !important; } .seo-launcher-shell .workspace.stage-3 .workspace-preview-frame { height: 100% !important; min-height: 0 !important; overflow: auto !important; border: 0 !important; border-radius: 0 !important; } .seo-launcher-shell .workspace.stage-3 .workspace-preview-frame iframe { height: 100% !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; } .seo-launcher-shell .workspace.stage-3 .workspace-preview-frame.mobile-preview { display: block !important; overflow: auto !important; padding: 0 !important; background: #ffffff !important; } .seo-launcher-shell .workspace.stage-3 .workspace-preview-frame.mobile-preview iframe { width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Stage 7: visual composer reuses the page workspace cockpit after strategy. */ .stage-7 .scan-selection, .stage-7 .page-workspace-panel { display: grid !important; } .stage-7 .scan-selection { display: contents !important; } .seo-launcher-shell .workspace.stage-7 .scan-stage-body > :not(.scan-selection) { display: none !important; } .stage-7 .scan-selection-bar, .stage-7 .scan-page-tree, .stage-7 .workspace-help, .stage-7 .scan-help, .stage-7 .scan-metrics, .stage-7 .scan-status-note, .stage-7 .audit-summary, .stage-7 .audit-toolbar, .stage-7 .audit-help, .stage-7 .media-issue-panel, .stage-7 .audit-issue-list, .stage-7 .project-row > div > .project-title-row, .stage-7 .project-row > div > .project-source, .stage-7 .page-workspace-heading, .stage-7 .workspace-page-tabs, .stage-7 .workspace-current-page, .stage-7 .workspace-preview-status, .stage-7 .workspace-raw-draft { display: none !important; } .stage-7 .project-row { padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .stage-7 .project-setup { gap: 0 !important; } .stage-7 .project-setup > .section-heading { display: none !important; } .stage-7 .project-list-card { padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .stage-7 .project-list { gap: 0 !important; } .stage-7 .page-workspace-panel { padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; } .seo-launcher-shell .workspace.stage-7 .project-setup { display: grid !important; height: 100% !important; min-height: 0 !important; grid-template-rows: minmax(0, 1fr); overflow: hidden !important; padding: 0 1rem 1rem !important; } .seo-launcher-shell .workspace.stage-7 .project-grid, .seo-launcher-shell .workspace.stage-7 .project-list-card, .seo-launcher-shell .workspace.stage-7 .project-list, .seo-launcher-shell .workspace.stage-7 .project-row, .seo-launcher-shell .workspace.stage-7 .project-row > div:first-child, .seo-launcher-shell .workspace.stage-7 .scan-summary, .seo-launcher-shell .workspace.stage-7 .scan-selection, .seo-launcher-shell .workspace.stage-7 .page-workspace-panel, .seo-launcher-shell .workspace.stage-7 .workspace-editor-stack, .seo-launcher-shell .workspace.stage-7 .workspace-preview-panel, .seo-launcher-shell .workspace.stage-7 .workspace-preview-shell { display: grid !important; height: 100% !important; min-height: 0 !important; overflow: hidden !important; } .seo-launcher-shell .workspace.stage-7 .project-grid, .seo-launcher-shell .workspace.stage-7 .project-list-card, .seo-launcher-shell .workspace.stage-7 .project-list, .seo-launcher-shell .workspace.stage-7 .project-row, .seo-launcher-shell .workspace.stage-7 .project-row > div:first-child, .seo-launcher-shell .workspace.stage-7 .scan-summary, .seo-launcher-shell .workspace.stage-7 .scan-selection { grid-template-rows: minmax(0, 1fr); } .seo-launcher-shell .workspace.stage-7 .page-workspace-panel { grid-template-rows: auto minmax(0, 1fr); gap: 0.42rem; } .seo-launcher-shell .workspace.stage-7 .project-row { grid-template-rows: minmax(0, 1fr) !important; } .seo-launcher-shell .workspace.stage-7 .project-row > div:first-child { grid-row: 1 / -1 !important; height: 100% !important; } .seo-launcher-shell .workspace.stage-7 .project-row > :not(div:first-child) { display: none !important; } .seo-launcher-shell .workspace.stage-7 .workspace-editor-stack { grid-template-rows: minmax(0, 1fr) !important; gap: 0 !important; } .seo-launcher-shell .workspace.stage-7 .workspace-preview-panel { grid-template-rows: auto minmax(0, 1fr); gap: 0 !important; padding: 0 !important; border: 1px solid rgba(31, 42, 37, 0.1) !important; border-radius: 1rem !important; background: #ffffff !important; } .seo-launcher-shell .workspace.stage-7 .workspace-cockpit-toolbar { padding: 0.42rem 0.58rem; background: #ffffff; border-bottom: 1px solid var(--line); } .seo-launcher-shell .workspace.stage-7 .workspace-preview-shell { min-height: 0 !important; border: 0 !important; border-radius: 0 0 1rem 1rem !important; } .seo-launcher-shell .workspace.stage-7 .workspace-preview-frame { height: 100% !important; min-height: 0 !important; overflow: auto !important; border: 0 !important; border-radius: 0 !important; } .seo-launcher-shell .workspace.stage-7 .workspace-preview-frame iframe { height: 100% !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; } .seo-launcher-shell .workspace.stage-7 .workspace-preview-frame.mobile-preview { display: block !important; overflow: auto !important; padding: 0 !important; background: #ffffff !important; } .seo-launcher-shell .workspace.stage-7 .workspace-preview-frame.mobile-preview iframe { width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .visual-composer-shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.42rem; align-items: center; padding: 0.42rem; background: #ffffff; border: 1px solid rgba(31, 42, 37, 0.1); border-radius: 8px; } .visual-composer-metrics { display: grid; grid-template-columns: repeat(6, minmax(5.6rem, 1fr)); gap: 0.32rem; min-width: 0; } .visual-composer-metrics article { display: grid; gap: 0.04rem; min-width: 0; padding: 0.32rem 0.42rem; background: #f7f7f8; border: 1px solid var(--line); border-radius: 7px; } .visual-composer-metrics article.tone-good { border-color: rgba(46, 111, 100, 0.24); background: rgba(46, 111, 100, 0.08); } .visual-composer-metrics article.tone-warning { border-color: rgba(178, 119, 31, 0.24); background: rgba(178, 119, 31, 0.1); } .visual-composer-metrics article.tone-problem { border-color: rgba(150, 52, 42, 0.22); background: rgba(150, 52, 42, 0.08); } .visual-composer-metrics span, .visual-composer-metrics small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 0.62rem; font-weight: 700; line-height: 1.08; text-overflow: ellipsis; white-space: nowrap; } .visual-composer-metrics strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 0.94rem; font-weight: 820; letter-spacing: 0; line-height: 0.98; text-overflow: ellipsis; white-space: nowrap; } .visual-composer-controls { display: flex; flex-wrap: wrap; gap: 0.32rem; align-items: center; justify-content: flex-end; min-width: 12rem; } .visual-composer-controls label { min-height: 26px; display: inline-flex; align-items: center; gap: 0.32rem; max-width: 13.5rem; padding: 0 0.48rem; color: var(--muted); background: #ffffff; border: 1px solid var(--line); border-radius: 7px; font-size: 0.68rem; font-weight: 760; } .visual-composer-controls select { min-width: 0; max-width: 10rem; color: var(--ink); background: transparent; border: 0; outline: none; font: inherit; font-weight: 760; } .tiny-action.active { color: #ffffff; background: var(--ink); border-color: var(--ink); } .anchor-review-row-actions .tiny-action.anchor-action-button.active, .anchor-review-row-actions .tiny-action.anchor-action-button.active:disabled { color: #ffffff !important; background: #e83e8c !important; border-color: #e83e8c !important; opacity: 1 !important; box-shadow: 0 12px 28px rgba(232, 62, 140, 0.22) !important; } @keyframes semantic-generation-pulse { 0% { box-shadow: 0 0 0 0 rgba(232, 45, 134, 0.36); } 70% { box-shadow: 0 0 0 9px rgba(232, 45, 134, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 45, 134, 0); } } .tiny-action.needs-regeneration { color: #ffffff; background: #e82d86; border-color: #d51f76; animation: semantic-generation-pulse 1.35s ease-out infinite; } .semantic-block-edit-controls { display: inline-flex; align-items: center; gap: 0.42rem; margin-left: 0.2rem; } .stage-7 .workspace-current-page-actions { flex: 1 1 100%; width: 100%; gap: 0.38rem; align-items: center; } .stage-7 .semantic-block-edit-controls { margin-left: auto; } .stage-7 .workspace-current-page-actions > button { min-height: 30px; gap: 0.32rem; padding: 0 0.62rem; font-size: 0.74rem; } .stage-7 .workspace-current-page-actions > button em { min-width: 1.32rem; height: 1.32rem; padding: 0 0.28rem; font-size: 0.68rem; } .stage-7 .workspace-current-page-actions .workspace-preview-mode-switch { min-height: 30px; padding: 0.12rem; } .stage-7 .workspace-current-page-actions .workspace-preview-mode-switch button { min-height: 26px; padding: 0 0.58rem; font-size: 0.72rem; } .semantic-block-edit-controls .icon-action { display: inline-grid; width: 38px; height: 38px; place-items: center; padding: 0; color: #5a7f2b; background: #ffffff; border: 2px solid #5a7f2b; border-radius: 999px; cursor: pointer; } .stage-7 .semantic-block-edit-controls .icon-action { width: 32px; height: 32px; border-width: 1.5px; } .semantic-block-edit-controls .icon-action:disabled { cursor: not-allowed; opacity: 0.5; } .semantic-block-edit-controls .semantic-block-toggle { color: #e82d86; border-color: #e82d86; } .semantic-block-edit-controls .semantic-block-toggle.active { color: #ffffff; background: #e82d86; border-color: #e82d86; } .semantic-block-edit-controls .semantic-block-apply { color: #5a7f2b; border-color: #5a7f2b; } .semantic-block-edit-controls .semantic-block-add { color: #e82d86; border-color: #e82d86; } .semantic-block-edit-controls .semantic-block-delete { color: #a4332c; border-color: rgba(164, 51, 44, 0.54); } .semantic-block-edit-controls .semantic-block-cancel { color: #5a7f2b; border-color: #5a7f2b; } .visual-page-settings { display: grid; gap: 0.55rem; padding: 0 0 0.65rem; border-bottom: 1px solid var(--line); } .visual-page-settings > div:first-child { display: grid; gap: 0.16rem; min-width: 0; } .visual-page-settings span, .visual-page-settings small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 0.72rem; font-weight: 740; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .visual-page-settings strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 0.92rem; font-weight: 820; line-height: 1.12; text-overflow: ellipsis; white-space: nowrap; } .visual-page-settings-list { display: flex; flex-wrap: wrap; gap: 0.35rem; } .visual-page-settings-list button { display: inline-flex; min-height: 28px; align-items: center; gap: 0.34rem; max-width: 100%; padding: 0 0.54rem; color: var(--ink); background: #f7f7f8; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 0.72rem; font-weight: 800; } .visual-page-settings-list button.active { color: #ffffff; background: var(--ink); border-color: var(--ink); } .visual-page-settings-list button span, .visual-page-settings-list button strong { font-size: inherit; line-height: 1; } .workspace-preview-markers button.composer-marker { color: #ffffff; background: #2e6f64; box-shadow: 0 8px 18px rgba(46, 111, 100, 0.25); } .workspace-preview-markers button.composer-marker.active { background: #244f48; box-shadow: 0 0 0 4px rgba(46, 111, 100, 0.16); } .visual-block-menu { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.65rem; align-items: center; padding: 0.62rem; background: #f7f7f8; border: 1px solid var(--line); border-radius: 8px; } .visual-block-menu > div:first-child { display: grid; gap: 0.18rem; min-width: 0; } .visual-block-menu span, .visual-block-menu small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 0.74rem; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; } .visual-block-menu span { font-weight: 780; white-space: nowrap; } .visual-block-menu strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 0.9rem; font-weight: 800; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .visual-block-menu .workspace-actions { justify-content: flex-end; margin-top: 0; } @media (max-width: 1120px) { .visual-composer-shell { grid-template-columns: minmax(0, 1fr); } .visual-composer-metrics { grid-template-columns: repeat(auto-fit, minmax(5.6rem, 1fr)); } .visual-composer-controls { justify-content: flex-start; min-width: 0; } } @media (max-width: 760px) { .visual-composer-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .visual-block-menu { grid-template-columns: minmax(0, 1fr); } } /* Engine GLS material port: white variant for SEO project popovers, export menus, uploads and strategy cards. */ .strategy-decision-confirm, .seo-project-name-modal, .seo-launcher-shell.zero-state .folder-picker-panel { position: relative; } .seo-project-menu-popover, .seo-project-name-modal, .strategy-decision-confirm, .seo-work-panel-export-menu, .seo-launcher-shell.zero-state .folder-picker-panel { overflow: hidden !important; border: 1px solid var(--nodedc-glass-outline) !important; background: var(--nodedc-glass-panel-surface-strong) !important; box-shadow: var(--nodedc-glass-panel-shadow), 0 30px 92px rgba(24, 28, 26, 0.16) !important; backdrop-filter: var(--nodedc-glass-panel-blur) !important; -webkit-backdrop-filter: var(--nodedc-glass-panel-blur) !important; isolation: isolate; } .seo-project-menu-popover::after, .seo-project-name-modal::after, .strategy-decision-confirm::after, .seo-work-panel-export-menu::after, .seo-launcher-shell.zero-state .folder-picker-panel::after { position: absolute; inset: 0; z-index: 2; padding: 1px; pointer-events: none; border-radius: inherit; background: var(--nodedc-glass-outline-gradient); content: ""; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .seo-project-menu-popover > *, .seo-project-name-modal > *, .strategy-decision-confirm > *, .seo-work-panel-export-menu > *, .seo-launcher-shell.zero-state .folder-picker-panel > * { position: relative; z-index: 3; } .seo-project-menu-list button, .seo-work-panel-export-menu button, .seo-work-panel-actions .seo-work-panel-export-menu button { border: 0 !important; background: var(--nodedc-header-dropdown-item-bg) !important; box-shadow: var(--nodedc-glass-control-shadow) !important; backdrop-filter: var(--nodedc-glass-blur) !important; -webkit-backdrop-filter: var(--nodedc-glass-blur) !important; } .seo-project-menu-list button:hover, .seo-project-menu-list button.active, .seo-work-panel-export-menu button:hover, .seo-work-panel-actions .seo-work-panel-export-menu button:hover { background: var(--nodedc-header-dropdown-item-hover-bg) !important; } .strategy-site-portfolio { background: var(--nodedc-glass-section-bg) !important; border: 1px solid var(--nodedc-glass-outline) !important; box-shadow: var(--nodedc-glass-control-shadow) !important; backdrop-filter: var(--nodedc-glass-panel-blur) !important; -webkit-backdrop-filter: var(--nodedc-glass-panel-blur) !important; } .strategy-site-portfolio .strategy-landing-lanes > section { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; } .strategy-site-portfolio .strategy-landing-card { min-height: 432px; gap: 10px !important; padding: 14px !important; border: 1px solid rgba(24, 32, 29, 0.12) !important; border-radius: 12px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.22)), rgba(246, 247, 246, 0.5) !important; box-shadow: var(--nodedc-glass-control-shadow), 0 14px 38px rgba(24, 28, 26, 0.1) !important; backdrop-filter: var(--nodedc-glass-blur) !important; -webkit-backdrop-filter: var(--nodedc-glass-blur) !important; } .strategy-site-portfolio .strategy-landing-head { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; } .strategy-site-portfolio .strategy-landing-head span { grid-row: auto !important; justify-self: start; max-width: 100%; } .strategy-site-portfolio .strategy-landing-head strong { display: -webkit-box; overflow: hidden; color: var(--ink); font-size: 13px; line-height: 1.22; hyphens: none; overflow-wrap: normal !important; word-break: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .strategy-site-portfolio .strategy-landing-head small { display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .strategy-site-portfolio .strategy-landing-card p { display: -webkit-box; overflow: hidden; min-height: 74px; font-size: 13px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .strategy-site-portfolio .strategy-chip-list { max-height: 60px; overflow: hidden; } .strategy-site-portfolio .strategy-portfolio-signal-group { display: grid; gap: 5px; min-width: 0; } .strategy-site-portfolio .strategy-portfolio-signal-group > span { color: rgba(78, 96, 105, 0.9); font-size: 10px; font-weight: 850; letter-spacing: 0; text-transform: uppercase; } .strategy-site-portfolio .strategy-token-list { display: flex; max-height: 74px; flex-wrap: wrap; gap: 5px; overflow-x: hidden; overflow-y: auto; padding-right: 4px; scrollbar-color: rgba(78, 96, 105, 0.28) rgba(255, 255, 255, 0.18); scrollbar-width: thin; } .strategy-site-portfolio .strategy-token-list::-webkit-scrollbar { width: 5px; } .strategy-site-portfolio .strategy-token-list::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.18); border-radius: 999px; } .strategy-site-portfolio .strategy-token-list::-webkit-scrollbar-thumb { background: rgba(78, 96, 105, 0.28); border-radius: 999px; } .strategy-site-portfolio .strategy-token-list span { min-width: 0; max-width: 100%; overflow: hidden; padding: 4px 7px; border-radius: 7px; background: rgba(47, 107, 79, 0.075); color: rgba(54, 83, 70, 0.94); font-size: 11px; font-weight: 780; line-height: 1.12; text-overflow: ellipsis; white-space: nowrap; } .strategy-site-portfolio .strategy-token-list.query span { background: rgba(83, 104, 121, 0.085); color: rgba(61, 83, 94, 0.96); } .strategy-site-portfolio .strategy-portfolio-source-signals { display: -webkit-box; overflow: hidden; color: rgba(10, 12, 14, 0.48); font-size: 11px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } @media (max-width: 1280px) { .strategy-site-portfolio .strategy-landing-lanes > section { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 760px) { .strategy-site-portfolio .strategy-landing-lanes > section { grid-template-columns: 1fr !important; } } .seo-launcher-shell.project-open .seo-stage-rail { overflow: hidden !important; border: 1px solid var(--nodedc-glass-outline) !important; background: var(--nodedc-glass-panel-surface-strong) !important; box-shadow: var(--nodedc-glass-panel-shadow), 0 30px 92px rgba(24, 28, 26, 0.14) !important; backdrop-filter: var(--nodedc-glass-panel-blur) !important; -webkit-backdrop-filter: var(--nodedc-glass-panel-blur) !important; isolation: isolate; } .seo-launcher-shell.project-open .seo-stage-rail::after { position: absolute; inset: 0; z-index: 2; padding: 1px; pointer-events: none; border-radius: inherit; background: var(--nodedc-glass-outline-gradient); content: ""; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .seo-stage-rail > * { position: relative; z-index: 3; } .seo-stage-rail-head { display: grid !important; grid-template-columns: minmax(0, 1fr) 2.38rem; gap: 0.7rem; align-items: start; padding: 0.62rem 0.56rem 0.9rem !important; } .seo-stage-rail-head > div { display: grid; min-width: 0; gap: 0.16rem; } .seo-stage-rail-head span, .seo-stage-rail-head small { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .seo-stage-rail-head strong { display: -webkit-box !important; min-width: 0; overflow: hidden; color: rgba(8, 8, 10, 0.96); line-height: 1.1 !important; white-space: normal !important; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .seo-stage-rail-close { display: inline-grid; min-width: 0; place-items: center; border: 0; color: rgba(10, 12, 14, 0.86); background: var(--nodedc-glass-control-bg); box-shadow: var(--nodedc-glass-control-shadow), 0 10px 26px rgba(24, 28, 26, 0.1); backdrop-filter: var(--nodedc-glass-blur); -webkit-backdrop-filter: var(--nodedc-glass-blur); } .seo-stage-rail-close { width: 2.38rem; height: 2.38rem; border-radius: 999px; } .seo-stage-rail-close:hover { background: var(--nodedc-glass-control-hover); color: rgba(8, 8, 10, 0.98); } .seo-launcher-shell.project-open.nav-closed .seo-stage-rail { display: none !important; } .seo-launcher-shell.project-open.nav-closed .seo-zero-stage, .seo-launcher-shell.project-open.nav-closed.content-open .seo-zero-stage { padding-left: var(--launcher-page-pad) !important; } .seo-launcher-shell.project-open.nav-closed.content-open .seo-work-panel { right: var(--launcher-page-pad) !important; left: var(--launcher-page-pad) !important; width: auto !important; } .seo-zero-upload { position: absolute; top: 0; right: var(--launcher-page-pad); bottom: var(--launcher-page-pad); left: var(--launcher-page-pad); z-index: 4; display: grid; place-items: center; padding: 1.25rem; pointer-events: none; } .seo-launcher-shell.project-open.nav-open:not(.content-open) .seo-zero-upload { left: calc(var(--launcher-page-pad) + var(--seo-work-nav-width) + var(--seo-work-panel-gap)); } .seo-launcher-shell.project-open.nav-closed:not(.content-open) .seo-zero-upload { left: var(--launcher-page-pad); } .seo-launcher-shell.project-open .seo-zero-upload-form, .stage-2 .seo-zero-upload-form, .stage-3 .seo-zero-upload-form, .stage-4 .seo-zero-upload-form, .stage-5 .seo-zero-upload-form, .stage-6 .seo-zero-upload-form, .stage-7 .seo-zero-upload-form, .seo-zero-upload-form { display: grid !important; align-content: start !important; gap: 14px !important; width: min(29rem, calc(100vw - 3rem)) !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; pointer-events: auto; } .seo-zero-upload-form .field { margin: 0 !important; } .seo-zero-upload-form .field > span { display: none !important; } .seo-zero-upload-form .folder-picker-panel { position: relative; display: grid !important; min-height: 13.9rem !important; place-items: center !important; align-content: center !important; justify-content: center !important; gap: 0.78rem !important; padding: 1.05rem !important; border: 1px solid var(--nodedc-glass-outline) !important; border-radius: 1.22rem !important; background: var(--nodedc-glass-panel-surface-strong) !important; box-shadow: var(--nodedc-glass-panel-shadow), 0 28px 88px rgba(24, 28, 26, 0.18) !important; color: rgba(10, 12, 14, 0.76) !important; backdrop-filter: var(--nodedc-glass-panel-blur) !important; -webkit-backdrop-filter: var(--nodedc-glass-panel-blur) !important; isolation: isolate; overflow: hidden; } .seo-zero-upload-form .folder-picker-panel::before { position: relative; z-index: 3; display: grid; width: 3.4rem; height: 3.4rem; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.84); color: rgba(10, 12, 14, 0.94); content: "+"; font-size: 2rem; font-weight: 360; line-height: 1; } .seo-zero-upload-form .folder-picker-panel::after { position: absolute; inset: 0; z-index: 2; padding: 1px; pointer-events: none; border-radius: inherit; background: var(--nodedc-glass-outline-gradient); content: ""; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .seo-zero-upload-form .folder-picker-panel > * { position: relative; z-index: 3; } .seo-zero-upload-form .folder-pick-action { min-height: 2.8rem !important; padding: 0 1.2rem !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.9) !important; color: rgba(10, 12, 14, 0.94) !important; box-shadow: var(--nodedc-glass-control-shadow) !important; }