:root {
  color-scheme: light;
  --bg: #f3f8fc;
  --panel: #ffffff;
  --panel-2: #f7fafc;
  --line: #e5e9f0;
  --text: #111827;
  --muted: #7a8495;
  --accent: #3f98b3;
  --accent-2: #6ed6c5;
  --danger: #ef4444;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none; }

.login-page { display: grid; place-items: center; min-height: 100vh; background: linear-gradient(120deg, #eefaff, #fff8ec); }
.login-card { width: min(420px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px; box-shadow: 0 20px 50px rgba(15,23,42,.12); }
.login-brand { font-size: 28px; font-weight: 900; }
.login-subtitle { color: var(--muted); margin: 8px 0 24px; }
.login-form { display: grid; gap: 14px; }
.login-form label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
.login-form input { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.login-form button, .action-button { background: var(--accent); color: #041016; border: 0; border-radius: 10px; padding: 11px 14px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.app-shell { height: 100vh; display: grid; grid-template-columns: 250px 1fr; overflow: hidden; background: linear-gradient(115deg, #eaf8ff 0 38%, #f7fbff 38% 70%, #fff8ec 100%); transition: grid-template-columns .18s ease; }
.app-shell.is-collapsed { grid-template-columns: 82px minmax(0, 1fr); }
.sidebar { border-right: 1px solid var(--line); padding: 24px 16px; background: rgba(255,255,255,.82); display: flex; flex-direction: column; min-width: 0; backdrop-filter: blur(18px); }
.brand-row { display: grid; grid-template-columns: 1fr 38px; gap: 10px; align-items: center; margin-bottom: 34px; }
.brand-mark, .icon-button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--text); box-shadow: 0 6px 20px rgba(15,23,42,.05); }
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font-size: 22px; letter-spacing: -.03em; }
.brand-copy span, .muted { color: var(--muted); font-size: 12px; line-height: 1.45; }
.tool-nav { display: grid; gap: 10px; }
.nav-button { width: 100%; background: transparent; color: #4b5563; border: 1px solid transparent; border-radius: 9px; padding: 12px; display: flex; align-items: center; gap: 12px; text-align: left; font-weight: 750; }
.nav-button svg { color: #9aa3b2; }
.nav-button.active { background: #f1f3f6; color: #2f7f9b; border-color: transparent; }
.nav-button.active svg { color: #2f7f9b; }
.sidebar-footer { margin-top: auto; display: grid; gap: 10px; }
.user-pill { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; gap: 3px; background: #fff; }
.user-pill small { color: var(--muted); }
.logout-link { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.app-shell.is-collapsed .sidebar { padding: 24px 12px; }
.app-shell.is-collapsed .brand-row { grid-template-columns: 1fr; justify-items: center; }
.app-shell.is-collapsed .brand-copy, .app-shell.is-collapsed .nav-button span, .app-shell.is-collapsed .sidebar-footer { display: none; }
.app-shell.is-collapsed .nav-button { justify-content: center; padding: 12px; }

.workspace { min-width: 0; height: 100vh; display: grid; grid-template-rows: minmax(0, 1fr); }
.badge { border: 1px solid var(--line); background: rgba(255,255,255,.7); color: var(--muted); border-radius: 999px; padding: 5px 9px; font-size: 12px; }
.tool-surface { min-height: 0; padding: 18px; overflow: hidden; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; min-width: 0; min-height: 0; overflow: hidden; box-shadow: 0 12px 36px rgba(15,23,42,.08); position: relative; }
.panel::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, #65c7eb, #7dddbf, #f2b34d); }
.panel-title { font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #667085; font-size: 12px; margin-bottom: 12px; }
.tool-grid { height: 100%; display: grid; grid-template-columns: 330px 1fr; gap: 14px; }
.main-panel { display: grid; grid-template-rows: auto 1fr; }
.scanner-grid, .merger-grid, .editor-grid { min-height: 0; }

.field { display: grid; gap: 6px; color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.field input, .field textarea, .field select, .toolbar input, .toolbar select, td textarea { width: 100%; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 9px; }
.slider-field { grid-template-columns: 1fr 76px; align-items: center; }
.slider-field span { grid-column: 1 / -1; }
.slider-field input[type="range"] { padding: 0; }
.slider-value-input { width: 52px; min-width: 52px; max-width: 52px; text-align: center; font-variant-numeric: tabular-nums; appearance: textfield; }
.slider-value-input::-webkit-outer-spin-button, .slider-value-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field textarea, td textarea { min-height: 62px; resize: vertical; }
.action-button { width: 100%; margin: 5px 0; }
.action-button.secondary { background: #eef8fb; color: #2f7f9b; border: 1px solid #caedf4; }
.action-button.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.action-button:disabled, .compact-button:disabled { opacity: .45; cursor: not-allowed; }
.compact-button { background: #eef8fb; color: #2f7f9b; border: 1px solid #caedf4; border-radius: 9px; padding: 9px 11px; display: inline-flex; align-items: center; gap: 7px; font-weight: 850; }
.upload-button { width: 100%; margin: 5px 0 10px; border: 1px dashed rgba(53,183,200,.45); border-radius: 10px; color: var(--text); background: rgba(53,183,200,.08); padding: 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.upload-button input { display: none; }
.upload-box { width: 100%; margin: 8px 0 10px; border: 1px dashed #b7dbe6; border-radius: 12px; color: var(--text); background: linear-gradient(180deg, #f8fdff, #eef9fc); padding: 14px; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; cursor: pointer; align-items: center; }
.upload-box svg { grid-row: span 2; color: #3f98b3; }
.upload-box span { color: var(--muted); font-size: 12px; }
.upload-box input { display: none; }
.inline-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.inline-row input { min-width: 0; flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 9px; }
.mini-button { border: 0; border-radius: 9px; background: #e6f8fb; color: #2f7f9b; padding: 9px 12px; font-weight: 900; }
.mini-button.wide { width: 100%; }
.subpanel { border: 1px solid var(--line); border-radius: 12px; background: #fbfdff; padding: 12px; margin-top: 12px; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.compact-toolbar { margin: 8px 0; }
.button-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.button-row .compact-button { flex: 1; justify-content: center; }
.check-row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; margin: 8px 0 10px; }
.check-row input { width: 16px; height: 16px; accent-color: var(--accent); }
.search-box { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; }
.search-box input { border: 0; background: transparent; }
.data-table { min-height: 0; overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--line); padding: 9px; vertical-align: top; text-align: left; }
th { position: sticky; top: 0; background: #f5f8fb; z-index: 1; color: #475467; font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.metric-row div { border: 1px solid var(--line); border-radius: 10px; padding: 9px; display: grid; gap: 3px; }
.metric-row strong { font-size: 20px; }
.metric-row span { color: var(--muted); font-size: 11px; }
.error-text { color: #dc2626; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-height: 0; }
.token-list { display: flex; flex-wrap: wrap; gap: 8px; max-height: 520px; overflow: auto; }
.token-list button { border: 1px solid #d9e3ec; border-radius: 999px; background: #fff; color: #526073; padding: 7px 10px; font-size: 12px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #dbe6ee; border-radius: 9px; overflow: hidden; margin-bottom: 10px; background: #fff; }
.segmented.compact { display: flex; margin: 0; }
.segmented button { background: #fff; color: #667085; border: 0; padding: 11px 12px; font-weight: 850; }
.segmented button.active { background: #3f98b3; color: #fff; }
.segmented button:disabled { opacity: .45; cursor: not-allowed; }

.atlas-layout, .composer-layout { height: 100%; display: grid; grid-template-columns: 340px 1fr; gap: 14px; min-height: 0; }
.composer-layout { grid-template-columns: 310px 1fr 300px; }
.atlas-left, .composer-left, .composer-right { overflow: auto; }
.atlas-stage, .composer-stage { display: grid; grid-template-rows: 1fr auto; }
.object-list { max-height: 210px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); margin: 10px 0; }
.object-list button { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); padding: 9px; display: flex; justify-content: space-between; gap: 8px; text-align: left; }
.object-list button:last-child { border-bottom: 0; }
.object-list button.active { background: rgba(53,183,200,.18); }
.object-list em { color: #67e8f9; font-size: 10px; font-style: normal; text-transform: uppercase; }
.canvas-wrap { height: 100%; overflow: auto; background-color: #151a22; background-image: linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.05) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.05) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.05) 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; display: grid; place-items: center; }
.canvas-wrap canvas { max-width: 100%; max-height: 100%; object-fit: contain; cursor: crosshair; }
.empty-state { color: var(--muted); font-weight: 700; }
.composer-nav { justify-content: center; }
.composer-nav .compact-button { flex: 0 0 auto; }
.object-strip { display: flex; gap: 8px; overflow-x: auto; padding-top: 10px; }
.object-card { position: relative; width: 92px; height: 112px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); padding: 6px; cursor: pointer; }
.object-card.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.object-card.edited::after { content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 999px; background: #f59e0b; box-shadow: 0 0 0 2px var(--panel-2); }
.object-card img { width: 100%; height: 76px; object-fit: contain; margin-top: 18px; }
.object-card span { position: absolute; left: 5px; bottom: 5px; min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; background: rgba(15,23,42,.85); color: #fff; font-size: 11px; font-weight: 800; }
.object-card-actions { position: absolute; left: 6px; top: 6px; display: flex; gap: 4px; z-index: 2; }
.object-card-actions button { width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 6px; background: rgba(15,23,42,.88); color: #fff; font-weight: 900; line-height: 1; }
.object-card-actions button:hover { background: var(--accent); }

.atlas-workbench { height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(260px, 320px) minmax(420px, 1fr) minmax(300px, 330px); background: #ffffff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 50px rgba(15,23,42,.10); }
.atlas-workbench-fullscreen { position: fixed; inset: 12px; z-index: 50; height: auto; border-radius: 18px; box-shadow: 0 34px 110px rgba(15,23,42,.30); }
.atlas-left-rail, .atlas-right-rail { min-height: 0; overflow: auto; overflow-x: hidden; background: #ffffff; border-right: 1px solid var(--line); padding: 12px; }
.atlas-right-rail { border-right: 0; border-left: 1px solid var(--line); }
.atlas-rail-title, .right-title { height: 36px; display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 900; color: var(--text); margin: -2px -2px 10px; }
.drag-mark, .right-title span { color: #5cc7e8; font-weight: 900; }
.atlas-upload-stack { display: grid; gap: 8px; margin-bottom: 9px; }
.atlas-upload-stack .upload-button { background: linear-gradient(180deg, #f8fdff, #edf9fc); border-color: #b7dbe6; border-style: dashed; border-radius: 9px; font-weight: 800; margin: 0; min-height: 42px; padding: 9px 11px; font-size: 14px; }
.atlas-normalize { border: 1px dashed #d8e5ee; border-radius: 10px; padding: 9px; background: #fbfdff; display: grid; gap: 7px; margin-bottom: 8px; overflow: hidden; }
.atlas-normalize select, .atlas-normalize input:not([type="checkbox"]), .size-inline input { width: 100%; min-width: 0; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; }
.atlas-normalize input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; }
.size-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; min-width: 0; }
.button-row.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.button-row.three .compact-button { min-height: 36px; padding: 7px 8px; font-size: 12px; line-height: 1.15; }
.compact-button.danger, .action-button.orange { background: #b43b32; color: white; }
.action-button.violet { background: #8738dc; color: white; }
.action-button.blue { background: #355ce8; color: white; }
.template-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin: 10px 0; background: #fbfdff; display: grid; gap: 8px; }
.template-card strong { color: var(--text); }
.atlas-warning { border: 1px solid rgba(245,158,11,.45); background: rgba(245,158,11,.12); color: #fbbf24; border-radius: 7px; padding: 10px 12px; font-size: 12px; line-height: 1.4; font-weight: 700; margin: 12px 0; }
.hotkeys-button { width: 100%; padding: 9px 11px; background: #eef8fb; color: #2f7f9b; border: 1px solid #caedf4; border-radius: 9px; font-weight: 800; }
.template-card button { border: 0; border-radius: 7px; background: #2e7c58; color: #fff; padding: 8px 10px; font-weight: 800; }
.atlas-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 10px 0; }
.atlas-actions-grid .action-button { min-height: 40px; margin: 0; padding: 8px 9px; border-radius: 9px; font-size: 14px; line-height: 1.15; }
.atlas-actions-grid .span-2 { grid-column: 1 / -1; }
.atlas-status-note { margin: 8px 0 10px; border: 1px solid #d8eaf0; background: #f5fbfd; color: #526073; border-radius: 9px; padding: 8px 10px; font-size: 12px; line-height: 1.35; }
.object-section { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.object-section-head { display: flex; align-items: center; justify-content: space-between; color: #273142; margin-bottom: 10px; }
.object-section-head span { color: var(--muted); font-size: 12px; }
.atlas-object-list { height: 420px; max-height: 42vh; border: 0; background: transparent; overflow-y: auto; }
.atlas-object-list button { border-bottom: 0; color: #526073; padding: 8px 10px; }
.atlas-object-list button.active { color: #2f7f9b; background: rgba(53,183,200,.14); border-radius: 8px; }

.atlas-stage-work { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #090909; }
.atlas-fullscreen-toggle { position: absolute; top: 18px; right: 18px; z-index: 5; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(37,37,37,.96); color: #e5e7eb; box-shadow: 0 16px 50px rgba(0,0,0,.28); }
.atlas-fullscreen-toggle:hover { background: #3a3a3a; }
.atlas-toolbar { position: absolute; top: 18px; left: 22px; z-index: 4; max-width: calc(100% - 84px); overflow-x: auto; scrollbar-width: none; display: flex; align-items: center; gap: 7px; background: rgba(37,37,37,.95); border: 1px solid rgba(255,255,255,.15); border-radius: 9px; padding: 7px; box-shadow: 0 16px 50px rgba(0,0,0,.28); }
.atlas-toolbar::-webkit-scrollbar { display: none; }
.atlas-toolbar button { background: #444; color: #e5e7eb; border: 0; border-radius: 5px; padding: 7px 10px; font-weight: 800; white-space: nowrap; }
.atlas-toolbar button.active { background: #2f8fb4; color: #fff; }
.atlas-toolbar strong { min-width: 52px; text-align: center; color: #e5e7eb; }
.atlas-toolbar span { color: #a3a3a3; white-space: nowrap; }
.toolbar-sep { width: 1px; height: 26px; background: rgba(255,255,255,.18); display: inline-block; }
.zoom-icon { width: 34px; height: 34px; display: grid; place-items: center; padding: 0 !important; font-size: 18px; }
.atlas-canvas-wrap { height: 100%; display: block; overflow: auto; overscroll-behavior: contain; touch-action: none; background-color: #171717; background-image: url("data:image/svg+xml,%3Csvg width='120' height='104' viewBox='0 0 120 104' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23313438' stroke-width='2'%3E%3Cpath d='M60 0 120 34.65 60 69.3 0 34.65 60 0Z'/%3E%3Cpath d='M0 34.65v69.3M120 34.65v69.3M60 69.3v34.65'/%3E%3Cpath d='M0 103.95 60 69.3 120 103.95'/%3E%3C/g%3E%3C/svg%3E"); background-size: 120px 104px; background-position: 0 0; padding: 94px 34px 60px; }
.atlas-canvas-wrap canvas { display: block; max-width: none; max-height: none; image-rendering: auto; box-shadow: 0 0 0 1px rgba(255,255,255,.10); }
.atlas-canvas-wrap.panning, .atlas-canvas-wrap.panning canvas { cursor: grabbing !important; }
.atlas-minimap { position: absolute; right: 24px; bottom: 34px; width: 230px; background: rgba(0,0,0,.86); border: 1px solid rgba(255,255,255,.18); border-radius: 9px; padding: 10px; z-index: 3; }
.atlas-minimap strong { color: #bdbdbd; font-size: 13px; letter-spacing: .05em; }
.atlas-minimap svg { margin-top: 8px; width: 100%; height: 150px; border: 2px solid #d6a525; background: #050505; }
.atlas-minimap rect { fill: #777568; stroke: rgba(0,0,0,.55); stroke-width: .5; }
.atlas-minimap rect.selected { fill: #68d7e8; }
.atlas-minimap rect.viewport { fill: rgba(104,215,232,.16); stroke: #68d7e8; stroke-width: 1.5; pointer-events: none; }
.atlas-canvas-wrap.panning, .atlas-canvas-wrap.panning canvas { cursor: grabbing; }
.atlas-modal-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(5,9,22,.54); backdrop-filter: blur(8px); padding: 24px; }
.atlas-modal { width: min(560px, 100%); background: #fff; border: 1px solid #d9e3ec; border-radius: 14px; box-shadow: 0 28px 80px rgba(15,23,42,.28); overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid #edf1f5; }
.modal-head strong { font-size: 18px; color: #111827; }
.modal-head button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1f3f6; color: #111827; font-size: 22px; line-height: 1; }
.hotkey-grid { display: grid; grid-template-columns: 170px 1fr; gap: 0; padding: 8px 18px 18px; }
.hotkey-grid span, .hotkey-grid em { padding: 10px 0; border-bottom: 1px solid #eef2f6; font-style: normal; }
.hotkey-grid span { color: #2f7f9b; font-weight: 900; }
.hotkey-grid em { color: #475467; }
.hotkey-grid span:nth-last-child(-n+2), .hotkey-grid em:nth-last-child(-n+2) { border-bottom: 0; }

.right-title { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 12px; }
.empty-editor { min-height: 420px; display: grid; place-items: center; color: var(--muted); text-align: center; }
.object-meta { display: grid; gap: 8px; margin-bottom: 10px; }
.object-meta input, .object-meta span, .template-card select, .template-card input, .field select, .text-area-field textarea { background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.object-meta div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.id-edit-field { display: grid; grid-template-columns: 42px 1fr; gap: 8px; align-items: center; }
.id-edit-field span { text-align: center; font-weight: 900; color: #2f7f9b; background: #eef8fb; border-color: #caedf4; }
.id-edit-field input { min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.object-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 8px 0; }
.object-action-grid .compact-button { justify-content: center; min-height: 38px; padding: 8px 9px; font-size: 13px; line-height: 1.15; }
.object-action-grid .span-2 { grid-column: 1 / -1; }
.atlas-export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 10px 0 2px; }
.atlas-export-grid .action-button { min-height: 38px; margin: 0; padding: 8px 9px; border-radius: 9px; font-size: 13px; line-height: 1.15; }
.atlas-export-grid .action-button:first-child { grid-column: 1 / -1; }
.compact-button.primary { background: #3463e6; color: #fff; }
.template-card .button-row { display: grid; grid-template-columns: 1fr auto; }
.template-card .button-row:last-child { grid-template-columns: 1fr 1fr; }
.inline-file { background: #eef8fb; color: #2f7f9b; border: 1px solid #caedf4; border-radius: 8px; padding: 9px 12px; font-weight: 800; text-align: center; cursor: pointer; }
.inline-file input { display: none; }
.text-area-field textarea { min-height: 70px; }
.right-section { border: 1px solid var(--line); border-radius: 10px; background: #fbfdff; margin: 10px 0; overflow: hidden; }
.right-section-head { width: 100%; min-height: 42px; border: 0; background: transparent; color: var(--text); padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 900; text-align: left; }
.right-section-head svg { color: #2f7f9b; flex: 0 0 auto; }
.right-section-body { display: grid; gap: 9px; padding: 0 10px 10px; }
.right-section-body select, .right-section-body input, .right-section-body textarea { width: 100%; min-width: 0; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 9px; }
.right-section-body input[type="range"] { border: 0; border-radius: 0; background: transparent; padding: 0; }
.nudge-grid { display: grid; grid-template-columns: repeat(3, 36px); justify-content: center; gap: 6px; margin: 8px 0 10px; }
.nudge-grid button { width: 36px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #2f7f9b; font-weight: 900; }
.atlas-workbench .segmented { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 10px; background: #fff; }
.atlas-workbench .segmented button { background: #fff; color: #667085; border: 0; padding: 12px; font-weight: 800; }
.atlas-workbench .segmented button.active { background: #357f9c; color: #fff; }
.atlas-workbench .action-button.secondary { background: #eef8fb; color: #2f7f9b; border-color: #caedf4; }
.atlas-workbench .compact-button { background: #eef8fb; color: #2f7f9b; border-color: #caedf4; }
.slider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.atlas-slider { display: grid; gap: 7px; color: #667085; font-size: 12px; min-width: 0; }
.atlas-slider-head { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 6px; align-items: center; font-weight: 800; }
.atlas-slider-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atlas-slider > div { display: grid; grid-template-columns: 18px minmax(0, 1fr) 18px; gap: 7px; align-items: center; }
.atlas-slider button { width: 18px; height: 28px; border: 0; border-radius: 6px; background: #dff6fb; color: #2f7f9b; font-weight: 900; }
.atlas-slider input[type="range"] { width: 100%; min-width: 0; accent-color: #5fc8e5; }
.atlas-slider .slider-value-input { justify-self: end; height: 30px; width: 52px; min-width: 52px; max-width: 52px; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 5px 4px; text-align: center; font-variant-numeric: tabular-nums; appearance: textfield; }
.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.color-grid label { display: grid; gap: 6px; color: #667085; font-size: 12px; }
.color-grid input { width: 100%; height: 36px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 3px; }
.admin-grid { height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(220px, 1fr) 1fr; gap: 14px; }
.admin-grid .main-panel { grid-column: 1 / -1; }
.permission-list { display: flex; flex-wrap: wrap; gap: 8px; overflow: auto; }
.permission-editor { min-height: 0; display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdff; padding: 12px; }
.permission-editor .admin-head { align-items: center; }
.permission-editor select { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.permission-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #d9e3ec; background: #fff; color: #526073; border-radius: 999px; padding: 8px 11px; font-size: 12px; font-weight: 750; cursor: pointer; }
.permission-chip input { accent-color: #3f98b3; }
.permission-chip.active { border-color: #9fe3ef; background: #e8fbff; color: #2f7f9b; }
.admin-console { height: 100%; min-height: 0; display: grid; grid-template-columns: 260px 1fr; gap: 18px; }
.admin-tabs { display: flex; flex-direction: column; gap: 8px; }
.admin-tabs button { border: 1px solid transparent; background: transparent; color: #596273; border-radius: 10px; padding: 12px; text-align: left; font-weight: 800; }
.admin-tabs button.active { background: #f1f3f6; color: #2f7f9b; }
.admin-content { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 14px; }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.admin-head h2 { margin: 0; font-size: 24px; letter-spacing: -.035em; }
.admin-head span { color: var(--muted); }
.admin-form-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.admin-form-row input, .admin-form-row select { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.admin-form-row button, .admin-upload, .row-actions button { border: 0; background: #dff9fb; color: #2f7f9b; border-radius: 10px; padding: 10px 12px; font-weight: 900; text-align: center; }
.admin-upload { cursor: pointer; }
.admin-upload input { display: none; }
.admin-table { min-height: 0; }
.admin-table table { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.admin-table th { background: #f5f8fb; color: #1f2937; }
.admin-table td { color: #273142; }
.row-actions { white-space: nowrap; display: flex; gap: 6px; }
.row-actions button:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 82px 1fr; }
  .brand-copy, .nav-button span, .sidebar-footer { display: none; }
  .tool-grid, .atlas-layout, .composer-layout, .admin-grid { grid-template-columns: 1fr; overflow: auto; }
}