@import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');

:root {
    --portal-bg: #000;
    --portal-text: #fff;
    --portal-muted: #fff;
    --portal-border: #fff;
    --portal-panel: #000;
    --portal-accent: #fff;
    --portal-danger: #fff;
}

[data-theme="light"] {
    --portal-bg: #fff;
    --portal-text: #000;
    --portal-muted: #000;
    --portal-border: #000;
    --portal-panel: #fff;
    --portal-accent: #000;
    --portal-danger: #000;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; font-weight: 300 !important; min-width: 0; }
html, body { width: 100%; height: 100%; min-height: 100%; margin: 0; background: var(--portal-bg); color: var(--portal-text); font-family: "Space Mono", "Courier New", monospace; font-size: 12px; font-weight: 300; font-synthesis: none; letter-spacing: 0; text-rendering: geometricPrecision; overflow-x: hidden; }
body.project-room-page { overflow: hidden; }
body.project-room-page .min-h-screen { height: 100dvh; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.project-room-page .min-h-screen > header { flex: 0 0 auto; }
body.project-room-page .min-h-screen > main { flex: 1 1 auto; min-height: 0; max-width: none; width: 100%; padding: 0; overflow: hidden; }
a { color: inherit; }
img, video, canvas, svg, iframe { max-width: 100%; display: block; }
input, select, textarea, button { font: inherit; border-radius: 0; max-width: 100%; }
table, pre, code { max-width: 100%; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
[x-cloak] { display: none !important; }

.portal-link { color: var(--portal-text); text-decoration: underline; text-underline-offset: 4px; }
.portal-panel { border: 1px solid var(--portal-border); background: var(--portal-panel); }
.portal-input { width: 100%; border: 1px solid var(--portal-border); background: var(--portal-bg); color: var(--portal-text); padding: .45rem .5rem; outline: none; }
.portal-input:focus { border-color: var(--portal-accent); outline: 1px solid var(--portal-border); outline-offset: 1px; }
.portal-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 1px solid var(--portal-border); padding: .45rem .7rem; line-height: 1; min-height: 2rem; text-decoration: none; background: var(--portal-bg); color: var(--portal-text); cursor: pointer; }
.portal-button-primary { background: var(--portal-text); color: var(--portal-bg); border-color: var(--portal-text); }
.portal-button-ghost { background: transparent; color: var(--portal-text); }
.portal-button:hover, .portal-button.is-active, .portal-badge:hover, .portal-badge.is-active { background: var(--portal-text); color: var(--portal-bg); }
.portal-button:disabled { opacity: .45; cursor: not-allowed; }
.portal-button:disabled:hover { background: var(--portal-bg); color: var(--portal-text); }
.portal-button[aria-disabled="true"] { opacity: .35; cursor: not-allowed; pointer-events: none; }
.portal-button[aria-disabled="true"]:hover { background: var(--portal-bg); color: var(--portal-text); }
.portal-badge { display: inline-flex; align-items: center; border: 1px solid var(--portal-border); padding: .2rem .4rem; background: var(--portal-bg); color: var(--portal-text); font-size: 10px; line-height: 1; }
.top-switches, .language-switch, .theme-switch { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.top-switches { justify-content: flex-end; margin-left: auto; }
.top-switches .language-switch { padding-right: 4px; border-right: 1px solid var(--portal-border); }
.language-switch .is-active { background: var(--portal-text); color: var(--portal-bg); text-decoration: underline; text-underline-offset: 2px; }
.pr-preview, .pr-sidebar, .kk-panel, .kk-stage, .overflow-auto, .overflow-x-auto { scrollbar-width: thin; scrollbar-color: var(--portal-text) var(--portal-bg); }
.pr-preview::-webkit-scrollbar, .pr-sidebar::-webkit-scrollbar, .kk-panel::-webkit-scrollbar, .kk-stage::-webkit-scrollbar, .overflow-auto::-webkit-scrollbar, .overflow-x-auto::-webkit-scrollbar { width: 6px; height: 6px; }
.pr-preview::-webkit-scrollbar-track, .pr-sidebar::-webkit-scrollbar-track, .kk-panel::-webkit-scrollbar-track, .kk-stage::-webkit-scrollbar-track, .overflow-auto::-webkit-scrollbar-track, .overflow-x-auto::-webkit-scrollbar-track { background: var(--portal-bg); border-radius: 0; }
.pr-preview::-webkit-scrollbar-thumb, .pr-sidebar::-webkit-scrollbar-thumb, .kk-panel::-webkit-scrollbar-thumb, .kk-stage::-webkit-scrollbar-thumb, .overflow-auto::-webkit-scrollbar-thumb, .overflow-x-auto::-webkit-scrollbar-thumb { background: var(--portal-text); border: 1px solid var(--portal-bg); border-radius: 0; }
.access-theme-switch { position: fixed; top: 8px; right: 28px; z-index: 20; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.access-gate-shell { width: min(936px, calc(100% - 32px)); margin: 58px auto 40px; }
.access-alert { border: 1px solid var(--portal-border); padding: 8px; margin-bottom: 8px; }
.access-alert ul { margin: 0; padding-left: 16px; }
.access-existing-panel p { margin: 0; }
.access-inline-form { display: inline-flex; margin: 0; }
.access-hero { padding: 30px; }
.access-copy { max-width: 760px; }
.access-copy h1 { margin: 14px 0 26px; font-size: clamp(38px, 5vw, 64px); line-height: .98; }
.access-copy p { max-width: 760px; margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--portal-text); }
.access-price-line { display: inline-block; border: 1px solid var(--portal-border); padding: 6px 8px; }
.access-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--portal-border); padding-top: 14px; margin-top: 18px; }
.access-terms { border: 1px solid var(--portal-border); padding: 12px; margin-top: 14px; display: grid; gap: 8px; }
.access-terms h2 { margin: 0 0 4px; font-size: 18px; line-height: 1.2; }
.access-terms p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--portal-muted); }
.access-get-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.access-get-list li { border: 1px solid var(--portal-border); padding: 6px; }
.access-order-summary { display: grid; gap: 0; margin-top: 14px; padding: 12px; }
.access-order-summary h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.2; }
.access-summary-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px; border-top: 1px solid var(--portal-border); padding: 8px 0; }
.access-summary-row span:first-child { color: var(--portal-muted); text-transform: uppercase; font-size: 10px; }
.access-legal-links { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--portal-border); padding-top: 8px; font-size: 11px; }
.access-check { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; align-items: center; margin-top: 4px; }
.access-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; margin: 0; border: 1px solid var(--portal-border); background: var(--portal-bg); }
.access-check input[type="checkbox"]:checked { background: var(--portal-text); }
.access-warning { margin: 0; color: var(--portal-text); }
.access-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 8px; }
.access-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.access-card { min-height: 196px; padding: 14px; }
.access-card h2 { margin: 16px 0 12px; font-size: 18px; line-height: 1.35; }
.access-card p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--portal-text); }
.access-microcopy { margin: 12px 0 0; font-size: 12px; color: var(--portal-muted); }
.ai-answer-block, .access-faq { display: grid; gap: 12px; margin-top: 24px; padding: 14px; }
.ai-answer-block article, .access-faq details { border: 1px solid var(--portal-border); padding: 10px; background: var(--portal-bg); }
.ai-answer-block h2, .access-faq h2 { margin: 0 0 6px; font-size: 18px; line-height: 1.25; }
.ai-answer-block p, .access-faq p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--portal-text); }
.access-faq summary { cursor: pointer; list-style-position: inside; }
.access-faq details[open] summary { border-bottom: 1px solid var(--portal-border); margin-bottom: 8px; padding-bottom: 8px; }
.public-footer { border-top: 1px solid var(--portal-border); margin-top: 24px; padding: 12px 0 0; display: grid; gap: 10px; }
.public-footer-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--portal-muted); font-size: 11px; }
.public-footer-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.public-footer-links a { border: 1px solid var(--portal-border); padding: 6px; color: var(--portal-text); text-decoration: none; min-height: 32px; display: flex; align-items: center; }
.public-footer-links a:hover { background: var(--portal-text); color: var(--portal-bg); }
.access-legal-footer { margin-top: 16px; padding: 10px; display: grid; gap: 8px; font-size: 11px; line-height: 1.55; }
.access-legal-footer p { margin: 0; }
.access-legal-link { color: #ed1c24; text-decoration: underline; text-underline-offset: 3px; }
.access-legal-link:hover, .access-legal-link:focus-visible { background: #ed1c24; color: #fff; outline: 0; }
.public-info-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 8px; border-top: 1px solid var(--portal-border); padding: 8px 0; }
.public-info-row span:first-child { color: var(--portal-muted); text-transform: uppercase; font-size: 10px; }
.control-room-page { width: 100%; min-height: 100dvh; padding: 8px; }
.control-room-hero { padding: 12px; }
.control-room-hero h1 { margin: 4px 0; }
.control-room-hero p { max-width: 980px; }
.control-room-workspace { width: 100%; margin-top: 8px; }
.control-room-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.control-room-hero .control-room-nav { position: sticky; top: 0; z-index: 5; background: var(--portal-bg); border-top: 1px solid var(--portal-border); padding-top: 6px; }
.control-room-preview-panel[hidden] { display: none !important; }
.control-room-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--portal-border); margin-top: 8px; }
.control-room-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.control-room-table th, .control-room-table td { border: 1px solid var(--portal-border); padding: 6px; text-align: left; vertical-align: top; }
.control-room-table th { font-size: 10px; text-transform: uppercase; color: var(--portal-muted); background: var(--portal-bg); }
.control-room-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.control-room-inline-form { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0; }
.control-room-inline-form .portal-input { min-width: 132px; width: auto; }
.control-room-note-list { display: grid; gap: 4px; margin-top: 8px; }
.control-room-pill-row { display: flex; flex-wrap: wrap; gap: 4px; }
.copy-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.copy-editor-form textarea.portal-input, .copy-question-form textarea.portal-input { resize: vertical; }
.copy-editor-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.copy-editor-header h2, .copy-editor-header h3 { margin: 6px 0 0; }
.copy-editor-header p { margin: 4px 0 0; color: var(--portal-muted); }
.copy-field-card, .copy-question-row { display: grid; gap: 8px; align-content: start; }
.copy-field-card h3, .copy-question-row h3 { margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.copy-question-list { display: grid; gap: 8px; }
.copy-question-head { display: grid; grid-template-columns: auto 1fr minmax(140px, 220px) minmax(88px, 120px); gap: 6px; align-items: end; }
.copy-question-head-wide { grid-template-columns: auto minmax(220px, 1fr) 160px 110px; }
.copy-question-meta-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.copy-question-bilingual { gap: 10px; }
.copy-bilingual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.copy-bilingual-column { border: 1px solid var(--portal-border); padding: 8px; display: grid; gap: 8px; align-content: start; }
.copy-checkbox-row { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; border: 1px solid var(--portal-border); padding: 4px 6px; }
.copy-preview { white-space: pre-wrap; border: 1px solid var(--portal-border); padding: 8px; margin-top: 6px; max-height: 220px; overflow: auto; }
.kk-question-description { margin: 10px 0 0; color: var(--portal-muted); line-height: 1.4; }
.copy-field-card { display: grid; gap: 8px; }
.copy-question-language-head { border-top: 1px solid var(--portal-border); padding-top: 10px; }
.copy-question-list { display: grid; gap: 8px; margin-top: 8px; }
.copy-question-row { display: grid; gap: 8px; }
.copy-question-head { display: grid; grid-template-columns: auto minmax(0, 1fr) 160px; gap: 6px; align-items: end; }
.payment-brand-panel { border: 1px solid var(--portal-border); padding: 12px; display: grid; gap: 8px; }
.payment-brand-panel p { margin: 0; }
.payment-brand-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.payment-brand-logo, .payment-card-mark { border: 1px solid var(--portal-border); padding: 6px 8px; line-height: 1; }
.payment-brand-logo { background: var(--portal-text); color: var(--portal-bg); }
.kk-shell { display: grid; min-height: 100vh; grid-template-columns: 236px 1fr; border: 1px solid var(--portal-border); background: var(--portal-bg); }
.kk-panel { display: flex; min-width: 0; flex-direction: column; gap: 3px; border-right: 1px solid var(--portal-border); background: var(--portal-bg); overflow-y: auto; padding: 6px; }
.kk-stage { min-width: 0; min-height: 0; background: var(--portal-bg); overflow-y: auto; padding: 6px; }
.kk-control { display: grid; gap: 3px; border: 1px solid var(--portal-border); padding: 3px 6px; background: var(--portal-bg); color: var(--portal-text); }
.kk-control:hover, .kk-control.is-active { background: var(--portal-text); color: var(--portal-bg); }
.kk-control-label { display: block; font-size: 10px; line-height: 1; }
.kk-readout { min-height: 42px; border: 1px solid var(--portal-border); padding: 6px; display: grid; align-content: center; gap: 4px; }
.pr-access-switcher { display: grid; gap: 4px; margin-bottom: 6px; }
.pr-access-compact { border: 1px solid var(--portal-border); padding: 6px; display: grid; gap: 4px; min-height: 44px; align-content: center; }
.pr-add-project { width: 100%; text-align: left; cursor: pointer; }
.pr-add-project:disabled { opacity: .55; cursor: not-allowed; }
.pr-add-project:disabled:hover { background: var(--portal-bg); color: var(--portal-text); }
.pr-project-list { display: grid; gap: 3px; }
.pr-project-card { display: grid; gap: 3px; border: 1px solid var(--portal-border); padding: 3px; }
.pr-project-card.is-active { border-style: dashed; }
.pr-project-item { width: 100%; text-align: left; cursor: pointer; position: relative; }
.pr-project-item:hover, .pr-project-item:focus-visible, .pr-project-item.is-active, .pr-project-item.is-active:hover, .pr-project-item.is-active:focus-visible { background: var(--portal-bg); color: var(--portal-text); outline: 1px dashed var(--portal-border); outline-offset: -3px; }
.pr-project-item.is-active { border-style: solid; }
.pr-project-item span { min-width: 0; overflow-wrap: anywhere; }
.pr-project-progress-line { display: block; height: 5px; border: 1px solid currentColor; margin: 2px 0; background: transparent; }
.pr-project-progress-line span { display: block; width: var(--project-progress, 0%); height: 100%; background: currentColor; }
.pr-project-action { opacity: 0; transition: opacity .12s linear; }
.pr-project-item:hover .pr-project-action, .pr-project-item:focus-visible .pr-project-action { opacity: 1; }
.pr-topbar-project-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-height: 22px; }
.pr-topbar-project-actions.is-confirming { border: 1px dashed var(--portal-border); padding: 2px; }
.pr-topbar-project-actions .portal-badge { justify-content: center; cursor: pointer; min-width: 72px; }
.pr-topbar-project-actions .portal-badge:disabled { opacity: .32; cursor: not-allowed; pointer-events: none; }
.pr-topbar-project-actions .portal-badge:disabled:hover { background: var(--portal-bg); color: var(--portal-text); }
.pr-project-progress { position: relative; width: 100%; min-height: 88px; border: 1px solid var(--portal-border); padding: 0; background: var(--portal-bg); color: var(--portal-text); overflow: hidden; display: grid; align-content: center; text-align: left; cursor: pointer; }
.pr-project-progress.is-incomplete { border-style: dashed; }
.pr-project-progress:hover, .pr-project-progress:focus-visible { outline: 1px dashed var(--portal-border); outline-offset: -4px; }
.pr-project-progress-fill { position: absolute; inset: 0 auto 0 0; width: var(--onboarding-progress, 0%); background: var(--portal-text); transition: width .22s linear; }
.pr-project-progress-text { position: relative; z-index: 1; display: grid; gap: 4px; padding: 6px; color: #fff; mix-blend-mode: difference; line-height: 1.25; }
.pr-project-progress-action { margin-top: 2px; }
.pr-project-progress.is-complete { min-height: 72px; }
.pr-project-progress.is-complete .pr-project-progress-text { align-content: center; }
.pr-incomplete-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px dashed var(--portal-border); padding: 10px; margin-bottom: 8px; }
.pr-incomplete-banner p, .pr-incomplete-banner small { margin: 4px 0 0; }
.pr-incomplete-banner small { display: block; color: var(--portal-muted); }
.kk-top-actions { display: flex; justify-content: flex-end; gap: 4px; margin-bottom: 6px; }
.kk-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.kk-topbar-left, .kk-topbar-right { display: flex; align-items: flex-start; gap: 4px; }
.kk-mini-button { min-height: 22px; padding: 2px 6px; font-size: 10px; }
.kk-mode-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
.kk-board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.kk-card { border: 1px solid var(--portal-border); background: var(--portal-panel); padding: 8px; min-width: 0; }
.kk-card-3 { grid-column: span 3 / span 3; }
.kk-card-4 { grid-column: span 4 / span 4; }
.kk-card-5 { grid-column: span 5 / span 5; }
.kk-card-6 { grid-column: span 6 / span 6; }
.kk-card-7 { grid-column: span 7 / span 7; }
.kk-card-8 { grid-column: span 8 / span 8; }
.kk-card-12 { grid-column: span 12 / span 12; }
.kk-flow { max-width: 920px; margin: 0 auto; }
.onboarding-process-shell { width: 100%; min-height: 100dvh; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--portal-bg); color: var(--portal-text); }
.onboarding-process-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; width: 100%; }
.onboarding-process-title { display: grid; gap: 4px; min-width: 0; }
.onboarding-process-title h1 { margin: 0; font-size: 28px; line-height: 1.1; overflow-wrap: anywhere; }
.onboarding-process-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.onboarding-process-layout { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(260px, 28vw) minmax(420px, 1.15fr) minmax(280px, 30vw); gap: 8px; align-items: stretch; width: 100%; }
.onboarding-side-panel, .onboarding-center-panel { min-height: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.onboarding-center-panel .kk-flow { width: 100%; max-width: none; margin: 0; display: flex; flex-direction: column; gap: 8px; min-height: 0; height: 100%; }
.onboarding-center-panel .kk-flow-frame { flex: 1 1 auto; min-height: 0; height: 100%; }
.onboarding-material-panel { padding: 10px; overflow: auto; }
.onboarding-material-panel .kk-material-head { display: grid; }
.onboarding-material-panel .kk-material-head h2 { font-size: 24px; }
.onboarding-material-panel .kk-material-controls { display: grid; grid-template-columns: 1fr; align-items: stretch; }
.onboarding-material-panel .kk-material-controls label { min-width: 0; }
.onboarding-material-panel .kk-material-forms { grid-template-columns: 1fr; }
.onboarding-material-panel .kk-material-list { grid-template-columns: 1fr; }
.onboarding-target-panel { padding: 10px; overflow: auto; }
.onboarding-target-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--portal-border); padding-bottom: 8px; margin-bottom: 8px; min-height: 64px; }
.onboarding-target-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.onboarding-target-grid .kk-readout { min-height: 82px; align-content: start; }
.onboarding-target-grid .kk-readout:hover { background: var(--portal-text); color: var(--portal-bg); }
.onboarding-target-grid .kk-readout.is-active { outline: 1px dashed var(--portal-border); outline-offset: -3px; }
.onboarding-target-value { margin-top: 6px; overflow-wrap: anywhere; color: inherit; }
.kk-flow-frame { min-height: 420px; display: flex; flex-direction: column; align-content: stretch; }
.kk-flow-header { min-height: 64px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--portal-border); padding-bottom: 8px; margin-bottom: 8px; }
.kk-flow-step-host { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.kk-flow-step { flex: 1 1 auto; min-height: 360px; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 18px 0; }
.kk-flow-step[hidden] { display: none !important; }
.kk-question-copy { display: grid; gap: 6px; }
.kk-flow-example { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; border: 1px solid var(--portal-border); padding: 8px; color: var(--portal-muted); }
.kk-flow-example span { color: var(--portal-text); text-transform: uppercase; white-space: nowrap; }
.kk-flow-example p { margin: 0; overflow-wrap: anywhere; }
.kk-answer-field { display: grid; gap: 6px; }
.kk-answer-field textarea.portal-input { min-height: clamp(190px, 30dvh, 380px); resize: vertical; }
.kk-answer-field input.portal-input { min-height: 46px; }
.kk-flow-progress { height: 1px; background: var(--portal-bg); border: 1px solid var(--portal-border); margin-bottom: 8px; }
.kk-flow-progress-bar { height: 100%; width: 0; background: var(--portal-text); transition: width .18s linear; }
.kk-flow-actions { display: flex; justify-content: space-between; align-items: center; gap: 6px; border-bottom: 1px solid var(--portal-border); padding-bottom: 8px; margin-top: auto; }
.kk-flow-actions .portal-button, .onboarding-form-actions .portal-button { width: auto; min-width: 128px; min-height: 32px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; }
.kk-flow-actions .portal-button:disabled, .onboarding-form-actions .portal-button[aria-disabled="true"] { opacity: 1; background: transparent; color: var(--portal-muted); border-color: var(--portal-muted); }
.onboarding-form-actions { display: flex; justify-content: flex-end; gap: 6px; align-items: center; margin-top: 8px; }
.kk-flow-targets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.kk-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; max-height: 320px; overflow: auto; border: 1px solid var(--portal-border); padding: 3px; scrollbar-width: thin; scrollbar-color: var(--portal-text) var(--portal-bg); }
.kk-choice-grid::-webkit-scrollbar { width: 6px; height: 6px; }
.kk-choice-grid::-webkit-scrollbar-track { background: var(--portal-bg); }
.kk-choice-grid::-webkit-scrollbar-thumb { background: var(--portal-text); border: 1px solid var(--portal-bg); }
.kk-choice-grid .kk-control { grid-template-columns: minmax(0, 1fr) 14px; align-items: center; min-height: 46px; }
.kk-choice-grid .kk-control input[type="checkbox"], .kk-choice-grid .kk-control input[type="radio"] { appearance: none; -webkit-appearance: none; grid-column: 2; grid-row: 1; justify-self: end; width: 12px; height: 12px; margin: 0; border: 1px solid currentColor; background: transparent; color: inherit; }
.kk-choice-grid .kk-control input[type="checkbox"]:checked, .kk-choice-grid .kk-control input[type="radio"]:checked { background: currentColor; }
.kk-choice-grid .kk-control input[type="checkbox"]:focus-visible, .kk-choice-grid .kk-control input[type="radio"]:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.kk-choice-grid .kk-control span { grid-column: 1; grid-row: 1; min-width: 0; }
.kk-materials { display: grid; gap: 10px; }
.kk-material-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--portal-border); padding-bottom: 8px; }
.kk-material-head h2 { margin: 8px 0 6px; font-size: 28px; line-height: 1.1; }
.kk-material-head p { margin: 0 0 6px; max-width: 820px; }
.kk-material-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 4px; }
.kk-material-controls label { min-width: 220px; }
.kk-material-drop { display: grid; gap: 4px; border: 1px dashed var(--portal-border); padding: 12px; min-height: 70px; place-items: center; text-align: center; }
.kk-material-drop.is-active { background: var(--portal-text); color: var(--portal-bg); }
.kk-material-forms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.kk-material-form { display: grid; gap: 4px; border: 1px solid var(--portal-border); padding: 6px; align-content: start; }
.kk-material-form textarea { min-height: 64px; resize: vertical; }
.kk-material-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.kk-material-card { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; border: 1px solid var(--portal-border); padding: 6px; min-width: 0; background: var(--portal-bg); }
.kk-material-card img, .kk-material-placeholder { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--portal-border); object-fit: cover; }
.kk-material-placeholder { display: grid; place-items: center; font-size: 18px; text-transform: uppercase; }
.kk-material-card-body { display: grid; gap: 4px; min-width: 0; }
.kk-material-card small { overflow-wrap: anywhere; }
.kk-material-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-top: 8px; }
.project-room-app { display: grid; height: 100dvh; min-height: 0; grid-template-columns: 238px minmax(0, 1fr); border: 1px solid var(--portal-border); background: var(--portal-bg); color: var(--portal-text); overflow: hidden; }
body.project-room-page .project-room-app { height: 100%; }
.pr-sidebar { display: grid; align-content: start; gap: 4px; height: 100%; min-height: 0; border-right: 1px solid var(--portal-border); padding: 6px; background: var(--portal-bg); min-width: 0; overflow-y: auto; }
.pr-mode-switch, .pr-theme-switch { display: flex; flex-wrap: wrap; gap: 4px; }
.pr-nav { display: grid; gap: 3px; margin-top: 4px; }
.pr-main { min-width: 0; height: 100%; min-height: 0; display: flex; flex-direction: column; background: var(--portal-bg); overflow: hidden; }
.pr-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--portal-border); padding: 8px; }
.pr-topbar-left { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.pr-topbar-right { display: flex; align-items: flex-start; justify-content: flex-end; gap: 8px; margin-left: auto; }
.pr-preview { flex: 1 1 auto; min-height: 0; padding: 8px; overflow: auto; background: var(--portal-bg); display: flex; flex-direction: column; }
.pr-preview-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--portal-border); padding-bottom: 8px; margin-bottom: 8px; }
.pr-preview-header h2 { margin: 6px 0 0; font-size: 28px; line-height: 1.12; }
.pr-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.pr-editor-row, .pr-upload-strip { margin-top: 8px; border: 1px solid var(--portal-border); padding: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pr-file-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.pr-file-card, .pr-work-card, .pr-thread-item, .pr-folder-panel { border: 1px solid var(--portal-border); padding: 6px; background: var(--portal-bg); min-width: 0; }
.pr-file-card img, .pr-work-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--portal-border); margin-bottom: 6px; }
.pr-file-placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--portal-border); margin-bottom: 6px; font-size: 22px; }
.pr-empty { border: 1px dashed var(--portal-border); padding: 10px; color: var(--portal-muted); }
.pr-brand-layout { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 8px; align-items: stretch; }
.pr-brand-controls { height: 100%; min-height: 0; display: grid; align-content: start; gap: 6px; border: 1px solid var(--portal-border); padding: 6px; overflow: auto; }
.pr-brand-book { height: 100%; min-height: 0; border: 1px solid var(--portal-border); background: var(--portal-bg); color: var(--portal-text); display: flex; flex-direction: column; overflow: hidden; }
.pr-brand-spread { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-bottom: 1px solid var(--portal-border); padding: 8px 12px; min-height: 82px; }
.pr-brand-spread:last-child { flex: 1 1 auto; border-bottom: 0; align-content: start; }
.pr-brand-cover h1 { font-size: 42px; line-height: 1.02; margin: 8px 0; }
.pr-logo-preview { max-height: 140px; max-width: 100%; border: 1px solid var(--portal-border); padding: 6px; object-fit: contain; }
.pr-font-upload-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(86px, auto); gap: 4px; align-items: stretch; }
.pr-font-upload-preview { min-height: 2.4rem; border: 1px solid var(--portal-border); display: flex; align-items: center; justify-content: flex-start; padding: 0 .5rem; background: var(--portal-bg); color: var(--portal-text); font-size: 24px; line-height: 1; overflow: hidden; }
.pr-font-upload-action, .pr-font-upload-name { min-height: 2.4rem; height: 100%; }
.pr-font-upload-name { display: flex; align-items: center; justify-content: flex-start; max-width: 132px; border: 1px solid var(--portal-border); padding: 0 .5rem; background: var(--portal-bg); color: var(--portal-muted); opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.pr-color-tool { display: grid; gap: 4px; }
.pr-color-control-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 4px; margin-top: 4px; align-items: stretch; }
.pr-color-picker { width: 100%; height: 2rem; min-height: 2rem; padding: 0; border: 1px solid var(--portal-border); background: var(--portal-bg); color: var(--portal-text); cursor: pointer; }
.pr-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.pr-color-picker::-webkit-color-swatch { border: 0; }
.pr-brand-typography { display: grid; gap: 8px; justify-items: start; }
.pr-font-aa { margin: 0; font-size: 48px; line-height: 1; text-align: left; }
.pr-swatch-row { display: grid; grid-template-columns: repeat(auto-fill, 46px); gap: 4px; align-items: start; margin-top: 8px; }
.pr-swatch { position: relative; display: block; width: 46px; height: 46px; min-width: 0; padding: 0; border: 1px solid var(--portal-border); background: var(--portal-bg); color: var(--portal-text); overflow: hidden; cursor: pointer; }
.pr-swatch.is-editing { outline: 1px dashed var(--portal-border); outline-offset: 2px; }
.pr-swatch-surface { position: absolute; inset: 0; display: block; border: 0; }
.pr-swatch-code { position: absolute; inset: 0; display: grid; place-items: center; padding: 2px; background: var(--portal-bg); color: var(--portal-text); font-size: 8px; line-height: 1; opacity: 0; pointer-events: none; }
.pr-swatch:hover .pr-swatch-code, .pr-swatch:focus-visible .pr-swatch-code { opacity: 1; }
.pr-swatch-editor { grid-column: 1 / -1; display: grid; grid-template-columns: 42px minmax(96px, 160px) auto auto; gap: 4px; align-items: stretch; width: fit-content; border: 1px dashed var(--portal-border); padding: 4px; margin-top: 2px; }
.pr-cover-panel { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; min-height: 92px; }
.pr-cover-surface { min-height: 70px; border: 1px solid var(--portal-border); display: grid; place-items: center; overflow: hidden; color: var(--portal-text); }
.pr-cover-surface img { width: 100%; height: 100%; min-height: 70px; object-fit: cover; }
.pr-cover-controls { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pr-cover-color-row { display: grid; grid-template-columns: 42px minmax(96px, 132px); gap: 4px; align-items: stretch; }
.pr-mini-image-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.pr-mini-image-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--portal-border); }
.pr-thread, .pr-work-grid, .pr-folder-grid { display: grid; gap: 6px; margin-top: 8px; }
.pr-work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-folder-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; border-bottom: 1px solid var(--portal-border); padding-bottom: 6px; margin-bottom: 6px; }
.pr-folder-head h3, .pr-work-card h3 { margin: 2px 0 6px; font-size: 18px; }
.pr-ycswu-license { border: 1px solid var(--portal-border); padding: 6px; margin-top: 8px; color: var(--portal-muted); }
.pr-ycswu-folder-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.pr-ycswu-folder, .pr-ycswu-file-card { display: grid; gap: 6px; text-align: left; border: 1px solid var(--portal-border); background: var(--portal-bg); color: var(--portal-text); padding: 8px; cursor: pointer; }
.pr-ycswu-folder:hover, .pr-ycswu-file-card:hover, .pr-ycswu-file-card.is-active { background: var(--portal-text); color: var(--portal-bg); }
.pr-ycswu-folder h3 { margin: 4px 0 0; font-size: 18px; line-height: 1.1; }
.pr-ycswu-folder p, .pr-ycswu-file-card small { margin: 0; color: inherit; }
.pr-ycswu-breadcrumb { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--portal-border); padding: 6px; margin-top: 8px; }
.pr-ycswu-browser { display: grid; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); gap: 8px; margin-top: 8px; align-items: start; }
.pr-ycswu-list, .pr-ycswu-preview { display: grid; gap: 6px; border: 1px solid var(--portal-border); padding: 6px; min-width: 0; }
.pr-ycswu-preview .pr-preview-header { margin-bottom: 0; }
.pr-ycswu-preview h3 { margin: 4px 0 0; font-size: 22px; line-height: 1.1; }
.pr-ycswu-preview-surface { min-height: 220px; border: 1px solid var(--portal-border); display: grid; place-items: center; padding: 12px; text-align: center; overflow: hidden; }
.pr-ycswu-preview-surface img, .pr-ycswu-preview-surface iframe { width: 100%; height: 100%; min-height: 220px; border: 0; object-fit: contain; }
.pr-font-sample { justify-items: start; text-align: left; font-size: 24px; line-height: 1.2; }
.pr-font-sample span { display: block; }
.pr-text-sample { justify-items: start; text-align: left; place-items: start; }
.pr-ycswu-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pr-tools-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-tools-header { flex: 0 0 auto; }
.pr-tool-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--portal-border); padding-bottom: 6px; }
.pr-tool-tabs .portal-badge { cursor: pointer; }
.pr-tool-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.pr-tool-card { display: grid; gap: 8px; min-height: 138px; text-align: left; border: 1px solid var(--portal-border); background: var(--portal-bg); color: var(--portal-text); padding: 8px; cursor: pointer; }
.pr-tool-card:hover, .pr-tool-card:focus-visible { background: var(--portal-text); color: var(--portal-bg); }
.pr-tool-card h3 { margin: 0; font-size: 20px; line-height: 1.1; }
.pr-tool-card p { margin: 0; color: inherit; }
.pr-tool-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--portal-border); }
.pr-tool-stage-head { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--portal-border); padding: 8px; }
.pr-tool-stage-head h3 { margin: 4px 0 0; font-size: 28px; line-height: 1.05; }
.pr-tool-link { display: inline-flex; align-items: center; margin-left: 10px; border: 1px solid currentColor; padding: 2px 5px; color: inherit; text-decoration: none; font-size: 11px; line-height: 1; vertical-align: middle; }
.pr-tool-link:hover, .pr-tool-link:focus-visible { background: var(--portal-text); color: var(--portal-bg); }
.pr-tool-frame-shell { flex: 1 1 auto; min-height: 0; display: flex; background: #000; overflow: hidden; }
.pr-tool-frame { width: 100%; height: 100%; min-height: 0; border: 0; background: #000; display: block; }
.pr-tool-surface { flex: 1 1 auto; min-height: 320px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 8px; padding: 8px; overflow: hidden; }
.pr-tool-surface aside { border-left: 1px solid var(--portal-border); padding-left: 8px; display: grid; align-content: start; gap: 10px; }
.pr-tool-meter { height: 10px; border: 1px solid var(--portal-border); }
.pr-tool-meter span { display: block; height: 100%; background: var(--portal-text); }
.pr-tool-pixel-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; min-height: 100%; }
.pr-tool-pixel-grid span { border: 1px solid var(--portal-border); background: var(--portal-bg); }
.pr-tool-pixel-grid span.is-on { background: var(--portal-text); }
.pr-tool-shape, .pr-tool-type-preview, .pr-tool-spark-grid, .pr-tool-lines, .pr-tool-frames { min-height: 100%; border: 1px solid var(--portal-border); }
.pr-tool-shape { display: grid; place-items: center; }
.pr-tool-shape span { width: min(46vw, 360px); aspect-ratio: 1; border: 1px solid var(--portal-border); clip-path: polygon(50% 0, 92% 24%, 82% 78%, 32% 100%, 0 52%); }
.pr-tool-type-preview { display: grid; place-items: center; font-size: clamp(80px, 16vw, 220px); line-height: 1; }
.pr-tool-spark-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 8px; }
.pr-tool-spark-grid span { display: grid; place-items: center; border: 1px solid var(--portal-border); font-size: 24px; opacity: .45; }
.pr-tool-spark-grid span.is-hot { background: var(--portal-text); color: var(--portal-bg); opacity: 1; }
.pr-tool-lines { position: relative; overflow: hidden; }
.pr-tool-lines span { position: absolute; top: -20%; bottom: -20%; width: 1px; background: var(--portal-text); transform: rotate(-16deg); transform-origin: center; }
.pr-tool-frames { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 8px; }
.pr-tool-frames span { display: grid; place-items: center; border: 1px solid var(--portal-border); min-height: 72px; }
.pr-question-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; align-items: stretch; margin-top: 8px; }
.pr-question-compose textarea { min-height: 96px; resize: vertical; }
.pr-question-compose .portal-button { min-width: 86px; align-self: stretch; }
.pr-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.pr-form-grid textarea { grid-column: span 2 / span 2; }
.pr-paint-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 4px; flex-wrap: wrap; width: 100%; }
.pr-paint-toolbar-left, .pr-paint-toolbar-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pr-paint-toolbar-actions { margin-left: auto; justify-content: flex-end; }
.pr-paint-toolbar .portal-input { width: auto; min-width: 64px; height: 2rem; min-height: 2rem; max-height: 2rem; padding: 0 .7rem; line-height: 1; appearance: none; -webkit-appearance: none; }
.pr-paint-image-button { min-height: 2rem; }
.pr-paint-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pr-paint-panel .pr-preview-header { flex: 0 0 auto; }
.pr-paint-canvas-wrap { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; border: 1px solid var(--portal-border); }
.pr-paint-canvas { display: block; width: 100%; height: 100%; background: var(--portal-bg); touch-action: none; image-rendering: pixelated; }
.pr-paint-image-layer { position: absolute; inset: 0; pointer-events: none; }
.pr-paint-image-item { position: absolute; pointer-events: auto; border: 1px solid transparent; cursor: move; user-select: none; touch-action: none; background: transparent; }
.pr-paint-image-item:hover { border-color: var(--portal-muted); }
.pr-paint-image-item.is-active { border-color: var(--portal-border); outline: 1px dashed var(--portal-text); outline-offset: 2px; }
.pr-paint-image-item img { width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.pr-paint-image-delete, .pr-paint-image-handle { opacity: 0; pointer-events: none; }
.pr-paint-image-item.is-active .pr-paint-image-delete, .pr-paint-image-item.is-active .pr-paint-image-handle { opacity: 1; pointer-events: auto; }
.pr-paint-image-delete { position: absolute; top: -1px; right: -1px; width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--portal-border); background: var(--portal-bg); color: var(--portal-text); font: inherit; line-height: 1; padding: 0; cursor: pointer; }
.pr-paint-image-handle { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border: 1px solid var(--portal-border); background: var(--portal-bg); cursor: nwse-resize; }
[data-dashboard-mode-section][hidden] { display: none !important; }

.min-h-screen { min-height: 100vh; }
.min-h-32 { min-height: 8rem; }
.h-3 { height: .75rem; }
.h-fit { height: fit-content; }
.w-3 { width: .75rem; }
.w-full { width: 100%; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-md { max-width: 28rem; }
.max-w-full { max-width: 100%; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.place-items-center { place-items: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.space-y-1 > * + * { margin-top: .25rem; }
.space-y-2 > * + * { margin-top: .5rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.border { border: 1px solid var(--portal-border); }
.border-b { border-bottom: 1px solid var(--portal-border); }
.border-t { border-top: 1px solid var(--portal-border); }
.border-dashed { border-style: dashed; }
.p-2 { padding: .5rem; }
.p-3 { padding: .75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pb-2 { padding-bottom: .5rem; }
.pb-3 { padding-bottom: .75rem; }
.pt-2 { padding-top: .5rem; }
.pt-4 { padding-top: 1rem; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-xs { font-size: .75rem; line-height: 1rem; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.uppercase { text-transform: uppercase; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { inset: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.z-50 { z-index: 50; }
.aspect-\[16\/7\] { aspect-ratio: 16 / 7; }
.object-cover { object-fit: cover; }
.h-full { height: 100%; }
.max-h-\[720px\] { max-height: 720px; }
.bg-black\/70 { background: rgba(0, 0, 0, .7); }
.text-white { color: #fff; }
.divide-y > * + * { border-top: 1px solid var(--portal-border); }
.min-w-full { min-width: 100%; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.ycswu-folder-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 4px;
}
.ycswu-folder-tabs .portal-badge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 38px;
}
.ycswu-files-admin-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}
.ycswu-form-wide {
    grid-column: 1 / -1;
}
.ycswu-checkbox-line {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 34px;
    border: 1px solid var(--portal-border);
    padding: 6px 8px;
    text-transform: uppercase;
    font-size: 11px;
}
.ycswu-admin-assets {
    display: grid;
    gap: 8px;
}
.ycswu-admin-asset {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 10px;
    border: 1px solid var(--portal-border);
    padding: 8px;
}
.ycswu-admin-thumb {
    min-height: 112px;
    border: 1px solid var(--portal-border);
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--portal-bg);
}
.ycswu-admin-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ycswu-admin-asset-main {
    min-width: 0;
}
.ycswu-edit-form {
    margin-top: 8px;
}

@media (min-width: 768px) {
    .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
    .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
    .md\:col-span-6 { grid-column: span 6 / span 6; }
    .md\:p-10 { padding: 2.5rem; }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-\[1fr_320px\] { grid-template-columns: 1fr 320px; }
    .lg\:grid-cols-\[1fr_360px\] { grid-template-columns: 1fr 360px; }
    .lg\:grid-cols-\[1fr_420px\] { grid-template-columns: 1fr 420px; }
    .lg\:grid-cols-\[1\.2fr_0\.8fr\] { grid-template-columns: 1.2fr .8fr; }
    .lg\:grid-cols-\[360px_1fr\] { grid-template-columns: 360px 1fr; }
}

@media (max-width: 720px) {
    .access-gate-shell { width: calc(100% - 16px); margin-top: 48px; }
    .portal-header-inner { align-items: flex-start; }
    .portal-main-nav { width: 100%; }
    .top-switches { width: 100%; justify-content: flex-end; }
    .access-hero { padding: 18px; }
    .access-form-grid, .access-card-grid, .access-get-list, .public-footer-links, .public-info-row, .access-summary-row { grid-template-columns: 1fr; }
    .copy-editor-grid, .copy-question-head, .copy-question-head-wide, .copy-question-meta-grid, .copy-bilingual-grid { grid-template-columns: 1fr; }
    .copy-editor-header { display: grid; }
    .kk-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .kk-panel { min-height: auto; flex-direction: row; align-items: stretch; border-right: 0; border-bottom: 1px solid var(--portal-border); overflow-x: auto; overflow-y: hidden; }
    .kk-control, .kk-readout, .portal-button { min-width: 148px; }
    .kk-topbar { align-items: stretch; }
    .kk-topbar-left, .kk-topbar-right { flex-wrap: wrap; }
    .kk-mode-row { min-width: 300px; }
    .kk-board { grid-template-columns: 1fr; }
    .kk-card, .kk-card-3, .kk-card-4, .kk-card-5, .kk-card-6, .kk-card-7, .kk-card-8, .kk-card-12 { grid-column: auto; }
    .kk-flow { max-width: none; }
    .kk-flow-frame { min-height: 520px; }
    .kk-flow-targets { grid-template-columns: 1fr; }
    .kk-choice-grid { grid-template-columns: 1fr; max-height: 340px; }
    .kk-material-forms, .kk-material-list { grid-template-columns: 1fr; }
    .project-room-app { grid-template-columns: 1fr; }
    .pr-sidebar { border-right: 0; border-bottom: 1px solid var(--portal-border); }
    .pr-incomplete-banner { grid-template-columns: 1fr; }
    .pr-topbar, .pr-preview-header { flex-direction: column; }
    .pr-summary-grid, .pr-file-grid, .pr-brand-layout, .pr-brand-spread, .pr-work-grid, .pr-folder-grid, .pr-form-grid, .pr-ycswu-folder-grid, .pr-ycswu-browser, .pr-tool-overview, .pr-tool-surface { grid-template-columns: 1fr; }
    .pr-tool-surface aside { border-left: 0; border-top: 1px solid var(--portal-border); padding-left: 0; padding-top: 8px; }
    .pr-form-grid textarea { grid-column: auto; }
    .pr-preview { min-height: 0; }
}

@media (max-width: 1024px) {
    .access-card-grid, .public-footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .onboarding-process-layout { grid-template-columns: 1fr; min-height: auto; }
    .onboarding-side-panel, .onboarding-center-panel { height: auto; min-height: auto; overflow: visible; }
    .onboarding-center-panel .kk-flow { height: auto; }
    .onboarding-center-panel .kk-flow-frame { min-height: 420px; }
    .onboarding-target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kk-board { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .kk-card-3, .kk-card-4 { grid-column: span 3 / span 3; }
    .kk-card-5, .kk-card-6, .kk-card-7, .kk-card-8, .kk-card-12 { grid-column: span 6 / span 6; }
    .kk-material-forms, .kk-material-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .project-room-app { grid-template-columns: 220px minmax(0, 1fr); }
    .pr-summary-grid, .pr-file-grid, .pr-work-grid, .pr-tool-overview, .pr-ycswu-folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pr-brand-layout { grid-template-columns: 280px minmax(0, 1fr); }
    .pr-tool-surface { grid-template-columns: minmax(0, 1fr); overflow: auto; }
    .pr-tool-surface aside { border-left: 0; border-top: 1px solid var(--portal-border); padding-left: 0; padding-top: 8px; }
    .pr-tool-frame-shell, .pr-tool-frame { min-height: 56dvh; }
    .ycswu-files-admin-grid { grid-template-columns: 1fr; }
    .ycswu-admin-asset { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    body:not(.project-room-page) .min-h-screen { min-height: 100dvh; }
    body.project-room-page .min-h-screen { height: 100dvh; min-height: 100dvh; }
    .onboarding-process-shell { padding: 8px; }
    .onboarding-process-topbar { flex-direction: column; }
    .onboarding-process-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
    .onboarding-process-title h1 { font-size: 24px; }
    .onboarding-target-grid { grid-template-columns: 1fr; }
    .access-theme-switch { top: 4px; right: 14px; max-width: calc(100% - 28px); flex-wrap: wrap; justify-content: flex-end; }
    .access-theme-switch .language-switch { border-right: 1px solid var(--portal-border); padding-right: 4px; }
    .access-gate-shell { width: 100%; margin: 44px 0 24px; padding: 0 8px; }
    .access-hero, .portal-panel.p-4 { padding: 12px; }
    .access-copy h1 { font-size: 34px; line-height: 1; overflow-wrap: anywhere; }
    .access-copy p, .access-card p, .ai-answer-block p, .access-faq p { font-size: 12px; line-height: 1.45; }
    .access-actions, .kk-material-controls, .pr-cover-controls, .payment-brand-row { display: grid; grid-template-columns: 1fr; width: 100%; align-items: stretch; }
    .portal-button, .portal-badge, .kk-mini-button { min-height: 44px; min-width: 0; width: 100%; }
    .access-form-grid, .access-card-grid, .access-get-list, .public-footer-links, .public-info-row, .access-summary-row, .payment-brand-row, .kk-board, .kk-material-forms, .kk-material-list { grid-template-columns: 1fr; }
    .copy-editor-grid, .copy-question-head, .copy-question-head-wide, .copy-question-meta-grid, .copy-bilingual-grid { grid-template-columns: 1fr; }
    .kk-card, .kk-card-3, .kk-card-4, .kk-card-5, .kk-card-6, .kk-card-7, .kk-card-8, .kk-card-12 { grid-column: 1 / -1; }
    .kk-shell { min-height: 100dvh; }
    .kk-panel { max-width: 100%; }
    .kk-control, .kk-readout { min-width: 148px; }
    .kk-flow-frame { min-height: calc(100dvh - 160px); }
    .kk-flow-step { min-height: 280px; }
    .kk-flow-actions, .onboarding-form-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
    .kk-flow-actions .portal-button, .onboarding-form-actions .portal-button { width: 100%; min-width: 0; min-height: 44px; }
    .kk-choice-grid { grid-template-columns: 1fr; max-height: 42dvh; }
    .kk-choice-grid .kk-control { min-height: 52px; }
    .project-room-app { display: flex; flex-direction: column; height: 100dvh; width: 100%; overflow: hidden; border-left: 0; border-right: 0; }
    .pr-sidebar { width: 100%; height: auto; max-height: 42dvh; min-height: 0; overflow: auto; border-right: 0; border-bottom: 1px solid var(--portal-border); display: grid; gap: 6px; padding: 4px; align-content: start; }
    .pr-access-switcher { display: grid; gap: 4px; }
    .pr-project-list { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
    .pr-project-card { min-width: 220px; }
    .pr-project-progress { min-height: 74px; }
    .pr-nav { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; margin-top: 2px; }
    .pr-nav .kk-control { min-width: 150px; min-height: 54px; }
    .pr-main { flex: 1 1 auto; height: auto; min-height: 0; width: 100%; }
    .pr-topbar { flex: 0 0 auto; padding: 6px; gap: 6px; }
    .pr-topbar-left, .pr-topbar-right, .pr-mode-switch, .pr-theme-switch, .pr-topbar-project-actions { width: 100%; flex-wrap: wrap; }
    .pr-topbar h1 { font-size: 22px; line-height: 1.1; overflow-wrap: anywhere; }
    .pr-mode-switch .portal-button, .pr-theme-switch .portal-badge, .pr-topbar-project-actions .portal-badge { flex: 1 1 0; width: auto; min-width: 0; }
    .pr-preview { padding: 6px; overflow: auto; width: 100%; }
    .pr-preview-header { gap: 6px; }
    .pr-preview-header h2 { font-size: 22px; }
    .pr-incomplete-banner, .pr-summary-grid, .pr-file-grid, .pr-brand-layout, .pr-brand-spread, .pr-work-grid, .pr-folder-grid, .pr-form-grid, .pr-ycswu-folder-grid, .pr-ycswu-browser, .pr-tool-overview, .pr-tool-surface { grid-template-columns: 1fr; }
    .pr-form-grid textarea { grid-column: auto; }
    .pr-brand-controls, .pr-brand-book { height: auto; overflow: visible; }
    .pr-brand-cover h1 { font-size: 32px; overflow-wrap: anywhere; }
    .pr-font-upload-row { grid-template-columns: minmax(0, 1fr); }
    .pr-font-upload-name { max-width: none; }
    .pr-color-control-row, .pr-cover-color-row { grid-template-columns: 42px minmax(0, 1fr); width: 100%; }
    .pr-color-control-row .portal-button, .pr-cover-controls .portal-button { grid-column: 1 / -1; }
    .pr-swatch-row { grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); }
    .pr-swatch { width: 100%; height: 44px; }
    .pr-swatch-editor { grid-template-columns: 42px minmax(0, 1fr); width: 100%; }
    .pr-swatch-editor .portal-button { grid-column: 1 / -1; }
    .pr-question-compose { grid-template-columns: 1fr; }
    .pr-question-compose .portal-button { width: 100%; }
    .pr-paint-toolbar { align-items: stretch; }
    .pr-paint-toolbar-left, .pr-paint-toolbar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-left: 0; }
    .pr-paint-toolbar .portal-input, .pr-paint-toolbar .portal-button { width: 100%; min-height: 44px; height: 44px; max-height: none; }
    .pr-paint-canvas-wrap { min-height: 44dvh; }
    .pr-tool-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
    .pr-tool-tabs .portal-badge { width: auto; flex: 0 0 auto; min-width: 132px; }
    .pr-tool-stage-head { flex-direction: column; }
    .pr-tool-frame-shell, .pr-tool-frame { min-height: 58dvh; }
    .pr-ycswu-breadcrumb { flex-direction: column; align-items: stretch; }
    .pr-ycswu-preview-surface { min-height: 180px; }
    .pr-ycswu-preview-surface img, .pr-ycswu-preview-surface iframe { min-height: 180px; }
}

@media (max-width: 480px) {
    html, body { font-size: 13px; }
    .access-copy h1 { font-size: 30px; }
    .text-3xl { font-size: 1.5rem; line-height: 1.9rem; }
    .pr-project-card { min-width: 190px; }
    .pr-nav .kk-control { min-width: 132px; }
    .pr-paint-toolbar-left, .pr-paint-toolbar-actions { grid-template-columns: 1fr; }
    .pr-tool-frame-shell, .pr-tool-frame { min-height: 52dvh; }
}

@media (min-width: 1440px) {
    .max-w-7xl { max-width: 96rem; }
    .access-gate-shell { width: min(1100px, calc(100% - 48px)); }
    .project-room-app { grid-template-columns: 238px minmax(0, 1fr); }
}