:root {
  color-scheme: light;
  --ink: #172e35;
  --muted: #6c7d82;
  --line: #dbe5e5;
  --paper: #ffffff;
  --canvas: #f3f7f6;
  --nav: #103b45;
  --nav-muted: #9db8bb;
  --primary: #0e756d;
  --primary-dark: #095b55;
  --accent: #ed8b4b;
  --success: #287a55;
  --warning: #a96822;
  --danger: #b84242;
  --tech-cyan: #6ee7d8;
  --tech-blue: #5ea7ff;
  --shadow: 0 10px 28px rgba(18, 55, 61, .07);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 78% -12%, rgba(94,167,255,.11), transparent 28%), radial-gradient(circle at 18% 0%, rgba(110,231,216,.1), transparent 25%), var(--canvas); font-size: 14px; line-height: 1.5; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow, .view-kicker { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.auth-view { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; position: relative; background: #edf4f2; }
.auth-brand { position: absolute; top: 34px; left: 42px; display: flex; gap: 12px; align-items: center; color: var(--nav); }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: var(--nav); color: #fff; font-weight: 850; letter-spacing: -.05em; }
.brand-mark.small { width: 32px; height: 32px; font-size: 11px; border-radius: 6px; }
.brand-title { font-weight: 800; font-size: 16px; }
.brand-caption { color: var(--muted); font-size: 12px; margin-top: 2px; }
.auth-card { width: min(420px, 100%); padding: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: var(--shadow); }
.auth-card h1 { margin: 8px 0 7px; font-size: 30px; letter-spacing: -.02em; }
.auth-footnote { position: absolute; bottom: 28px; color: var(--muted); font-size: 12px; }
.stack-form { display: grid; gap: 15px; }
label { display: grid; gap: 7px; color: #365159; font-size: 13px; font-weight: 650; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; padding: 10px 12px; outline: none; transition: border-color .18s ease, box-shadow .18s ease; }
textarea { resize: vertical; min-height: 90px; }
input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14, 117, 109, .12); }
.primary-button, .secondary-button, .text-button, .icon-button { border: 0; border-radius: 5px; min-height: 38px; padding: 9px 15px; font-weight: 750; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.primary-button { background: var(--primary); color: #fff; }
.primary-button:hover { background: var(--primary-dark); box-shadow: 0 8px 18px rgba(14,117,109,.2); transform: translateY(-1px); }
.secondary-button { background: #fff; color: var(--primary-dark); border: 1px solid #c9dcda; }
.secondary-button:hover { border-color: var(--primary); background: #f2fbf9; box-shadow: 0 6px 15px rgba(14,117,109,.1); transform: translateY(-1px); }
.text-button { min-height: auto; padding: 5px 0; background: transparent; color: var(--muted); }
.text-button:hover { color: var(--danger); }
.icon-button { padding: 7px 10px; background: transparent; color: var(--muted); font-size: 18px; }
.icon-button:hover { background: #edf4f2; color: var(--ink); }
.wide { width: 100%; min-height: 46px; font-size: 15px; }
.form-error { min-height: 22px; color: var(--danger); margin-top: 13px; font-size: 13px; }
.form-message { min-height: 22px; color: var(--success); margin-top: 13px; font-size: 13px; }

.dashboard { min-height: 100vh; display: flex; position: relative; isolation: isolate; }
.dashboard::before { position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(rgba(14,117,109,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(14,117,109,.035) 1px, transparent 1px); background-size: 32px 32px; content: ''; pointer-events: none; }
.sidebar { width: 240px; flex: 0 0 240px; min-height: 100vh; display: flex; flex-direction: column; padding: 22px 14px; position: relative; overflow: hidden; background: linear-gradient(160deg, #0d3440 0%, #103b45 56%, #0c2c36 100%); color: #fff; box-shadow: 12px 0 35px rgba(16,59,69,.1); }
.sidebar::after { position: absolute; right: -80px; bottom: 90px; width: 210px; height: 210px; border: 1px solid rgba(110,231,216,.13); border-radius: 50%; box-shadow: 0 0 0 22px rgba(110,231,216,.025), 0 0 0 44px rgba(110,231,216,.018); content: ''; pointer-events: none; }
.sidebar-brand { display: flex; gap: 10px; align-items: center; padding: 0 10px 30px; }
.sidebar-brand strong { display: block; font-size: 14px; }
.sidebar-brand span { display: block; color: var(--nav-muted); margin-top: 2px; font-size: 11px; }
.main-nav { display: grid; gap: 5px; }
.nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 12px; position: relative; overflow: hidden; border: 0; border-radius: 5px; background: transparent; color: #b8ccce; text-align: left; font-weight: 650; transition: background .2s ease, color .2s ease, transform .2s ease; }
.nav-item::after { position: absolute; top: 0; bottom: 0; left: -45%; width: 28%; background: linear-gradient(90deg, transparent, rgba(110,231,216,.28), transparent); content: ''; transform: skewX(-20deg); transition: left .5s ease; }
.nav-item:hover, .nav-item.active { color: #fff; background: rgba(255,255,255,.11); transform: translateX(2px); }
.nav-item:hover::after, .nav-item.active::after { left: 120%; }
.nav-item.active { box-shadow: inset 3px 0 0 var(--accent), 0 0 22px rgba(110,231,216,.08); }
.nav-icon { width: 19px; color: var(--accent); font-size: 17px; text-align: center; }
.sidebar-note { display: flex; gap: 8px; align-items: center; margin-top: auto; padding: 16px 10px 4px; color: var(--nav-muted); font-size: 11px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #6ed29f; box-shadow: 0 0 0 3px rgba(110,210,159,.13); animation: status-pulse 2.2s ease-in-out infinite; }
.main-content { min-width: 0; flex: 1; }
.topbar { height: 78px; display: flex; align-items: center; gap: 14px; padding: 0 34px; position: sticky; top: 0; z-index: 10; border-bottom: 1px solid rgba(219,229,229,.86); background: rgba(255,255,255,.82); box-shadow: 0 8px 24px rgba(18,55,61,.035); backdrop-filter: blur(14px); }
.topbar h2 { margin: 1px 0 0; font-size: 18px; letter-spacing: -.01em; }
.topbar .icon-button { display: none; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.user-chip { color: var(--muted); font-size: 13px; }
.toast { position: fixed; top: 92px; right: 32px; z-index: 20; max-width: 380px; padding: 12px 15px; border: 1px solid #c5ded8; border-radius: 5px; background: #f1fbf8; color: var(--success); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: #f0caca; background: #fff3f3; color: var(--danger); }
.view-panel { padding: 32px 34px 56px; max-width: 1600px; margin: 0 auto; animation: view-enter .35s ease both; }
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.page-intro h1 { margin: 5px 0 8px; font-size: 31px; letter-spacing: -.03em; text-shadow: 0 4px 24px rgba(14,117,109,.12); }
.page-intro p { margin: 0; color: var(--muted); }
.content-grid, .settings-grid { display: grid; gap: 18px; }
.two-columns { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); }
.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel-card { padding: 23px; position: relative; overflow: hidden; border: 1px solid rgba(203,222,222,.9); border-radius: 9px; background: rgba(255,255,255,.9); box-shadow: 0 3px 11px rgba(18,55,61,.025); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.panel-card::before { position: absolute; top: 0; right: 12%; left: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(110,231,216,.75), transparent); content: ''; opacity: .65; }
.panel-card:hover { border-color: #b8d8d4; box-shadow: 0 14px 32px rgba(18,55,61,.08), 0 0 0 1px rgba(110,231,216,.06); transform: translateY(-2px); }
.quiet-card { background: #f8fbfa; }
.card-heading, .panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.card-heading h3, .panel-heading h3 { margin: 0; font-size: 16px; }
.card-heading p, .panel-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.metric-label { color: var(--muted); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .09em; }
.metric-value { margin: 10px 0 8px; font-size: 42px; line-height: 1; font-weight: 800; color: var(--primary-dark); text-shadow: 0 0 24px rgba(14,117,109,.16); }
.mini-rule { height: 1px; margin: 28px 0 20px; background: var(--line); }
.table-card { margin-top: 18px; padding-bottom: 12px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 14px 12px; border-bottom: 1px solid #edf1f1; text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
td { color: #304b52; }
tbody tr { transition: background .18s ease, box-shadow .18s ease; }
tbody tr:hover { background: linear-gradient(90deg, rgba(234,245,242,.62), rgba(255,255,255,.2)); box-shadow: inset 3px 0 0 var(--tech-cyan); }
.domain-name, .site-name { color: var(--ink); font-weight: 750; }
.subtext { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.site-note-editor { min-width: 190px; max-width: 280px; display: grid; gap: 6px; }
.site-note-editor textarea { min-height: 50px; padding: 7px 8px; font-size: 12px; resize: vertical; }
.site-note-actions { display: flex; gap: 5px; }
.site-note-actions .small-button { min-height: 26px; padding: 4px 8px; font-size: 11px; }
.site-note-actions .small-button:disabled { opacity: .42; cursor: not-allowed; }
.nameservers { max-width: 360px; color: var(--muted); font-size: 12px; line-height: 1.6; word-break: break-word; }
.table-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.small-button { padding: 6px 9px; min-height: 30px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--primary-dark); font-size: 12px; font-weight: 750; }
.small-button:hover { border-color: var(--primary); background: #f1faf8; }
.small-button.danger:hover { border-color: #e5b2b2; background: #fff4f4; color: var(--danger); }
.status-badge { display: inline-flex; align-items: center; width: fit-content; min-height: 24px; padding: 3px 8px; border-radius: 4px; background: #eef3f3; color: #607579; font-size: 11px; font-weight: 800; white-space: nowrap; }
.status-badge.active, .status-badge.published { background: #e9f7ef; color: var(--success); }
.status-badge.pending { background: #fff5e8; color: var(--warning); }
.status-badge.error, .status-badge.draft { background: #fff1f1; color: var(--danger); }
.empty-state { padding: 35px 15px; color: var(--muted); text-align: center; }
.result-box { margin-top: 15px; padding: 11px 13px; border-radius: 5px; background: #f5faf8; color: var(--success); font-size: 12px; }

.page-form { display: grid; gap: 18px; }
.form-section-title { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 3px; border-bottom: 1px solid var(--line); }
.form-section-title > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 5px; background: #e8f3f1; color: var(--primary); font-size: 11px; font-weight: 850; }
.form-section-title h3 { margin: 0; font-size: 16px; }
.form-section-title p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.form-section-title.compact { margin-top: 8px; }
.form-grid { display: grid; gap: 15px; }
.toggle-row { display: flex; gap: 25px; flex-wrap: wrap; }
.toggle-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle-label input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-control { width: 34px; height: 20px; position: relative; border-radius: 20px; background: #c8d6d6; transition: .18s; }
.toggle-control::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: .18s; }
.toggle-label input:checked + .toggle-control { background: var(--primary); }
.toggle-label input:checked + .toggle-control::after { transform: translateX(14px); }
.form-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }

.editor-shell { margin-top: 20px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); overflow: hidden; }
.editor-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: #fbfdfd; }
.editor-toolbar strong { margin-right: 10px; }
.toolbar-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.editor-pagebar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fff; }
.editor-pagebar > label, .child-page-fields label { display: grid; gap: 5px; min-width: 170px; color: #496168; font-size: 12px; font-weight: 700; }
.editor-pagebar select, .editor-pagebar input { width: 100%; min-height: 36px; padding: 7px 9px; }
.child-page-fields { display: flex; flex: 1 1 440px; flex-wrap: wrap; align-items: flex-end; gap: 9px; }
.child-page-fields label { flex: 1 1 170px; }
.child-page-fields .muted { padding: 0 2px 9px; font-size: 12px; }
.editor-pagebar button { min-height: 36px; }
.job-progress { display: flex; gap: 13px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--line); background: #f4faf8; color: var(--primary-dark); font-size: 12px; }
.progress-track { height: 6px; flex: 1; min-width: 100px; border-radius: 6px; overflow: hidden; background: #dcebe8; }
.progress-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--primary); transition: width .3s ease; }
.generation-error { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; padding: 13px 16px; border: 1px solid #f0caca; border-radius: 6px; background: #fff6f5; color: #7d3333; }
.generation-error > div { display: grid; gap: 3px; }
.generation-error span { color: #8b5555; font-size: 12px; }
.generation-error button:disabled { opacity: .6; cursor: wait; }
.editor-layout { min-height: 760px; display: block; }
.block-sidebar, .block-editor { padding: 16px; background: #fbfdfd; }
.block-sidebar { border-right: 1px solid var(--line); }
.block-editor { border-left: 1px solid var(--line); }
.block-list { display: grid; gap: 6px; }
.block-row { display: flex; align-items: center; gap: 7px; padding: 9px 8px; border: 1px solid transparent; border-radius: 5px; color: #3d5960; cursor: grab; }
.block-row:hover { background: #f0f7f5; }
.block-row.selected { border-color: #acd1cc; background: #eaf5f2; color: var(--primary-dark); }
.block-row .drag-handle { color: #9cb0b1; }
.block-row .block-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.block-row button { padding: 0 3px; border: 0; background: transparent; color: #a0b2b3; }
.block-row button:hover { color: var(--danger); }
.add-block-row { display: flex; gap: 5px; margin-top: 15px; }
.add-block-row select { min-width: 0; padding: 7px 5px; font-size: 11px; }
.add-block-row .secondary-button { padding: 6px 7px; font-size: 11px; }
.preview-pane { min-width: 0; min-height: 760px; background: #e9efee; }
.preview-toolbar { min-height: 50px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 13px; border-bottom: 1px solid var(--line); background: #fff; color: #4d6469; font-size: 12px; font-weight: 750; }
.preview-toolbar-title, .preview-toolbar-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.preview-toolbar-title .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-toolbar-actions { flex-shrink: 0; }
.preview-mode-button { min-height: 30px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: #4d6469; font-size: 11px; font-weight: 750; cursor: pointer; }
.preview-mode-button:hover { border-color: #8fbdb7; color: var(--primary-dark); }
.preview-mode-button.active { border-color: var(--primary); background: #eaf5f2; color: var(--primary-dark); }
.fullscreen-only-control { display: none; }
.preview-workspace { min-width: 0; min-height: 710px; }
#preview-frame { width: 100%; height: 710px; min-height: 710px; display: block; border: 0; background: #fff; }
.preview-pane.mobile-preview { background: #dfe9e7; }
.preview-pane.mobile-preview #preview-frame { width: min(390px, calc(100% - 30px)); height: calc(100% - 74px); min-height: 680px; margin: 12px auto; border: 9px solid #173137; border-radius: 24px; box-shadow: 0 12px 28px rgba(17, 48, 55, .2); }
.preview-pane.is-fullscreen, .preview-pane:fullscreen { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; min-height: 0; border-radius: 0; }
.preview-pane.is-fullscreen .preview-workspace, .preview-pane:fullscreen .preview-workspace { position: relative; display: flex; flex: 1; min-height: 0; overflow: hidden; }
.preview-pane.is-fullscreen #preview-frame, .preview-pane:fullscreen #preview-frame { flex: 1 1 auto; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.preview-pane.is-fullscreen .fullscreen-only-control, .preview-pane:fullscreen .fullscreen-only-control { display: inline-flex; }
.preview-pane.is-fullscreen .canvas-editor-sidebar.is-open, .preview-pane:fullscreen .canvas-editor-sidebar.is-open { display: flex; }
.preview-pane.is-fullscreen.mobile-preview #preview-frame, .preview-pane:fullscreen.mobile-preview #preview-frame { flex: 0 1 390px; width: min(390px, 100%); height: 100%; max-height: 900px; min-height: 0; align-self: center; margin: auto; border: 9px solid #173137; border-radius: 24px; box-shadow: 0 12px 28px rgba(17, 48, 55, .2); }
.canvas-editor-sidebar { display: none; flex: 0 0 352px; width: 352px; min-width: 300px; max-width: 42vw; flex-direction: column; border-left: 1px solid var(--line); background: #fff; color: var(--ink); box-shadow: -6px 0 22px rgba(23, 46, 53, .06); }
.canvas-sidebar-header { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.canvas-sidebar-header > div { display: grid; gap: 2px; }
.canvas-sidebar-header .eyebrow { font-size: 9px; }
.canvas-sidebar-header strong { font-size: 15px; }
.canvas-sidebar-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.canvas-tab { position: relative; min-height: 44px; border: 0; background: #fff; color: var(--muted); font-size: 13px; font-weight: 700; }
.canvas-tab:hover { color: var(--primary-dark); background: #f7faf9; }
.canvas-tab.active { color: var(--primary-dark); }
.canvas-tab.active::after { position: absolute; right: 14px; bottom: 0; left: 14px; height: 2px; background: var(--primary); content: ''; }
.canvas-sidebar-panel { min-height: 0; flex: 1; overflow: auto; padding: 14px; }
.canvas-sidebar-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; }
.canvas-sidebar-footer button { min-height: 38px; padding: 7px 10px; font-size: 12px; }
.canvas-insert-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.canvas-insert-button { min-width: 0; min-height: 76px; display: grid; align-content: center; justify-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: #3a555c; font-size: 11px; font-weight: 700; }
.canvas-insert-button:hover { border-color: #9ac9c3; background: #f3faf8; color: var(--primary-dark); }
.canvas-insert-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 4px; background: #eaf5f2; color: var(--primary); font-size: 16px; font-weight: 800; }
.canvas-page-picker { margin-bottom: 12px; }
.canvas-page-picker select { padding: 8px 10px; font-size: 12px; }
.canvas-content-list { display: grid; gap: 5px; }
.canvas-content-row { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px; border: 1px solid transparent; border-radius: 5px; }
.canvas-content-row:hover { background: #f6faf9; }
.canvas-content-row.selected { border-color: #acd1cc; background: #eaf5f2; }
.canvas-content-row.dragging { opacity: .5; }
.editor-mode .preview-content-block.drop-before::before, .editor-mode .preview-content-block.drop-after::after { position: absolute; right: 8px; left: 8px; z-index: 5; height: 3px; border-radius: 3px; background: var(--p); content: ''; pointer-events: none; }
.editor-mode .preview-content-block.drop-before::before { top: 0; }
.editor-mode .preview-content-block.drop-after::after { bottom: 0; }
.canvas-drag-handle { flex: 0 0 18px; color: #91a4a5; font-size: 16px; cursor: grab; }
.canvas-content-select { min-width: 0; flex: 1; display: grid; grid-template-columns: 22px minmax(70px, auto) minmax(0, 1fr); align-items: center; gap: 6px; padding: 5px 2px; border: 0; background: transparent; color: inherit; text-align: left; }
.canvas-content-number { color: var(--muted); font-size: 10px; }
.canvas-content-label { font-size: 11px; font-weight: 750; white-space: nowrap; }
.canvas-content-summary { min-width: 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.canvas-delete-button { width: 26px; height: 26px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 17px; }
.canvas-delete-button:hover { background: #fff0f0; color: var(--danger); }
.canvas-empty-state { padding: 28px 12px; color: var(--muted); font-size: 12px; text-align: center; }
.canvas-edit-actions { display: flex; justify-content: flex-end; gap: 7px; margin-bottom: 13px; }
.canvas-edit-actions .small-button { font-size: 11px; }
.canvas-replace-notice { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; padding: 9px 10px; border-left: 3px solid var(--primary); background: #f2f8f7; color: #34545a; font-size: 11px; }
.canvas-replace-notice button { border: 0; background: transparent; color: var(--primary-dark); font-weight: 750; }
.block-fields { display: grid; gap: 13px; }
.block-fields label { font-size: 12px; }
.block-fields textarea { min-height: 72px; }
.block-fields .field-note { color: var(--muted); font-size: 11px; font-weight: 500; }
.canvas-alignment-control { display: grid; gap: 8px; margin-bottom: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: #f8fbfa; }
.canvas-alignment-control label { font-size: 11px; }
.canvas-alignment-control select { padding: 7px 9px; font-size: 12px; }
.canvas-align-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.canvas-align-buttons button { min-height: 28px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--muted); font-size: 11px; font-weight: 750; }
.canvas-align-buttons button.active { border-color: var(--primary); background: #eaf5f2; color: var(--primary-dark); }
.canvas-size-control { display: grid; gap: 8px; margin-bottom: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: #f8fbfa; }
.canvas-size-control label { font-size: 11px; }
.canvas-size-control select { padding: 7px 9px; font-size: 12px; }
.canvas-size-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.canvas-size-buttons button { min-height: 28px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--muted); font-size: 11px; font-weight: 750; }
.canvas-size-buttons button.active { border-color: var(--primary); background: #eaf5f2; color: var(--primary-dark); }
.canvas-upload-field { display: grid; gap: 6px; padding: 10px; border: 1px dashed #acd1cc; border-radius: 5px; background: #f7fbfa; color: var(--primary-dark); font-size: 11px; font-weight: 700; }
.canvas-upload-field input[type="file"] { width: 100%; font-size: 11px; font-weight: 500; }
.canvas-upload-field small { color: var(--muted); font-size: 10px; font-weight: 500; }
.canvas-image-scale-field { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.canvas-image-scale-field input[type="range"] { grid-column: 1 / -1; padding: 0; accent-color: var(--primary); }
.canvas-image-scale-field output { color: var(--primary-dark); font-size: 11px; font-weight: 800; }
.has-alerts { border-color: var(--danger); color: var(--danger); background: #fff4f4; }
#security-panel { scroll-margin-top: 90px; }
#security-panel .form-actions { margin-bottom: 12px; }
.security-event-id { max-width: 260px; overflow-wrap: anywhere; }
.task-busy .preview-workspace, .task-busy .editor-pagebar { pointer-events: none; opacity: .7; }
button:disabled { cursor: not-allowed; opacity: .55; }

@media (max-width: 1100px) {
  .editor-layout { grid-template-columns: 190px minmax(0, 1fr); }
  .block-editor { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0; }
  .block-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .sidebar { position: fixed; z-index: 15; left: -250px; transition: left .2s ease; box-shadow: var(--shadow); }
  .sidebar.open { left: 0; }
  .topbar { padding: 0 18px; }
  .topbar .icon-button { display: inline-block; }
  .view-panel { padding: 24px 18px 45px; }
  .two-columns, .settings-grid { grid-template-columns: 1fr; }
  .three-columns { grid-template-columns: 1fr; }
  .page-intro { align-items: flex-start; flex-direction: column; }
  .page-intro .secondary-button { align-self: flex-start; }
  .editor-toolbar { align-items: flex-start; flex-direction: column; }
  .toolbar-actions { justify-content: flex-start; }
  .editor-pagebar { align-items: stretch; }
  .editor-pagebar > label, .child-page-fields label { min-width: min(100%, 200px); }
  .child-page-fields { flex-basis: 100%; }
  .preview-pane.is-fullscreen .preview-toolbar, .preview-pane:fullscreen .preview-toolbar { flex-wrap: wrap; }
  .preview-pane.is-fullscreen .preview-toolbar-title, .preview-pane:fullscreen .preview-toolbar-title { flex: 1 1 100%; }
  .preview-pane.is-fullscreen .preview-toolbar-actions, .preview-pane:fullscreen .preview-toolbar-actions { margin-left: auto; }
  .preview-pane.is-fullscreen .preview-workspace, .preview-pane:fullscreen .preview-workspace { display: block; }
  .preview-pane.is-fullscreen .canvas-editor-sidebar.is-open, .preview-pane:fullscreen .canvas-editor-sidebar.is-open { position: absolute; top: 0; right: 0; bottom: 0; z-index: 4; width: min(352px, 88vw); min-width: min(300px, 80vw); max-width: none; }
  .preview-pane.is-fullscreen.mobile-preview #preview-frame, .preview-pane:fullscreen.mobile-preview #preview-frame { width: min(390px, calc(100% - 24px)); height: 100%; max-height: none; margin: 0 auto; }
}
@media (max-width: 560px) {
  .generation-error { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  .auth-brand { position: static; margin-bottom: 24px; }
  .auth-view { display: flex; flex-direction: column; justify-content: center; }
  .auth-card { padding: 25px 20px; }
  .auth-footnote { position: static; margin-top: 22px; }
  .topbar-actions .user-chip { display: none; }
  .panel-card { padding: 17px; }
  .editor-layout { display: block; }
  .block-sidebar, .block-editor { border: 0; border-bottom: 1px solid var(--line); }
  .block-fields { grid-template-columns: 1fr; }
  #preview-frame { min-height: 620px; }
}
.account-plan { margin: 16px 30px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.8); font-size: 13px; line-height: 1.7; }
.account-plan:empty { display: none; }
.member-layout { display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: 22px; align-items: start; }
.member-layout .table-card { min-width: 0; }
.member-detail { margin-top: 24px; }
.member-detail > h3 { margin-top: 30px; }
.member-detail .settings-grid { margin-bottom: 28px; align-items: start; }
.member-detail .stack-form { align-content: start; }
.member-delete { margin: 24px 0; padding: 20px; border: 1px solid #e5b9b9; border-radius: 10px; background: #fff8f8; }
.member-delete button { justify-self: start; color: var(--danger); }
.admin-api-settings { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
@media (max-width: 900px) { .admin-api-settings { grid-template-columns: 1fr; } }
.member-detail .form-actions { margin: 18px 0; align-items: end; }
.checkbox-label { display: flex; flex-direction: row; align-items: center; gap: 9px; }
.checkbox-label input { width: auto; }
@media (max-width: 1050px) { .member-layout { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .account-plan { margin: 12px 16px 0; } }
@keyframes view-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes status-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(110,210,159,.13), 0 0 0 rgba(110,210,159,0); } 50% { box-shadow: 0 0 0 4px rgba(110,210,159,.08), 0 0 13px rgba(110,210,159,.32); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}