:root { --editor-width: 45%; --ink: #171719; --muted: #6a6a70; --line: #e7e7ea; --panel: #ffffff; --soft: #f6f6f7; --blue: #a7a7ad; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--soft); color: var(--ink); font: 13px/1.4 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button { font: inherit; cursor: pointer; }
.app-shell { min-height: 100vh; padding: 18px; }
.workspace { display: grid; grid-template-columns: 45% 55%; min-height: calc(100vh - 36px); overflow: hidden; border: 1px solid #dfdfe3; border-radius: 12px; background: var(--panel); box-shadow: 0 12px 32px rgba(26, 26, 31, .06); }
.editor-panel { min-width: 0; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; background: #1e1f22; color: #e6e7eb; }
.topbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 18px; border-bottom: 1px solid #303136; }
.brand-lockup { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 29px; height: 22px; border-radius: 5px; background: #f2f2f3; color: #18181a; font-size: 9px; font-weight: 800; letter-spacing: .03em; }
.mode-toggle { display: flex; padding: 3px; border: 1px solid #38393f; border-radius: 7px; background: #292a2e; }
.mode-button { border: 0; border-radius: 4px; padding: 5px 9px; color: #a8a9b0; background: transparent; font-size: 11px; font-weight: 600; }
.mode-button.active { color: #f5f5f6; background: #414249; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.helper-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 0 18px; border-bottom: 1px solid #303136; color: #a8a9b0; font-size: 11px; }
.actions { display: flex; flex-shrink: 0; gap: 12px; }
.text-button { border: 0; padding: 0; background: transparent; color: #c7c8ce; font-size: 11px; text-decoration: underline; text-underline-offset: 2px; }
.text-button:hover { color: var(--blue); }
.tabs { display: flex; height: 37px; padding-left: 9px; border-bottom: 1px solid #303136; background: #25262a; }
.tab { position: relative; border: 0; padding: 0 13px; background: transparent; color: #9a9ba2; font-size: 11px; }
.tab.active { color: #f4f4f5; font-weight: 600; background: #1e1f22; }
.tab.active::after { content: ""; position: absolute; right: 10px; bottom: -1px; left: 10px; height: 2px; background: var(--blue); }
#editor { min-height: 320px; }
.status { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 15px; border-top: 1px solid #303136; color: #a8a9b0; font-size: 11px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #a7a7ad; }
.status-error { color: #a23e3e; background: #fffafa; }.status-error .status-dot { background: #d44b4b; }
.divider { display: none; }
.preview-panel { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #fafafa; }
.preview-header { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 0 22px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 650; }.card-size { color: var(--muted); font-size: 11px; font-weight: 500; }
.card-stage { display: grid; place-items: center; min-height: 0; padding: 35px; background-image: radial-gradient(#dedee1 .7px, transparent .7px); background-size: 12px 12px; }
#preview-frame { width: min(100%, 680px); aspect-ratio: 1.586 / 1; border: 0; background: #fff; box-shadow: 0 13px 30px rgba(0,0,0,.13); }
.preview-note { margin: 0; padding: 12px 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.guided-edit { background: rgba(255, 211, 99, .20); border-bottom: 1px solid rgba(185, 132, 0, .55); }
@media (max-width: 780px) { .app-shell { padding: 0; }.workspace { grid-template-columns: 1fr; grid-template-rows: minmax(430px, 58vh) 1fr; min-height: 100vh; border: 0; border-radius: 0; }.topbar { padding: 0 14px; }.helper-row { align-items: flex-start; flex-direction: column; padding: 8px 14px; gap: 5px; }.preview-header { min-height: 48px; padding: 0 14px; }.card-stage { padding: 25px 18px; }.preview-note { padding: 10px 14px; } }
@media (max-width: 470px) { .mode-button { padding: 5px 6px; }.brand-lockup { gap: 6px; }.actions { gap: 9px; } }