@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#0a1220;
  --bg-2:#0f1829;
  --bg-3:#141f34;
  --bg-4:#1a2740;
  --panel:#0f1829;
  --panel-2:#111d30;
  --border:#223657;
  --border-soft:#1a2b45;
  --text:#d9e6f6;
  --text-soft:#8da6c4;
  --text-dim:#5f7897;
  --primary:#007acc;
  --primary-2:#2ea3f2;
  --primary-soft:rgba(0,122,204,.12);
  --danger:#ef4444;
  --danger-soft:rgba(239,68,68,.14);
  --warning:#f59e0b;
  --warning-soft:rgba(245,158,11,.14);
  --success:#22c55e;
  --success-soft:rgba(34,197,94,.14);
  --radius-sm:7px;
  --radius-md:10px;
  --radius-lg:14px;
  --sidebar-width:244px;
  --shadow:0 16px 40px rgba(0,0,0,.28);
  --shadow-lg:0 24px 80px rgba(0,0,0,.4);
  --font:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:linear-gradient(180deg,var(--main-bg, #07101d) 0%, color-mix(in srgb, var(--main-bg, #0b1322) 84%, #ffffff 16%) 100%);
  color:var(--text);
  overflow:hidden;
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
input,textarea,select{
  background:var(--input-bg, #0c1525);
  border:1px solid var(--border);
  color:var(--text);
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(0,122,204,.12);
}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--border, #223657) 92%, transparent);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

#app{height:100%}
.app-shell{
  display:grid;
  grid-template-columns:var(--sidebar-width) 1fr;
  height:100vh;
}
.app-sidebar{
  background:linear-gradient(180deg,var(--topbar-bg, #08101b) 0%, var(--topbar-bg-2, #0b1422) 100%);
  border-right:1px solid var(--border-soft);
  padding:16px 12px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.brand-panel{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px 16px;
  border-bottom:1px solid var(--border-soft);
}
.brand-logo{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,#007acc,#0a3a78);
  display:grid;place-items:center;
  font-weight:800;color:white;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 8px 24px rgba(0,122,204,.25);
}
.brand-logo-image{
  width:40px;
  height:40px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 6px 18px rgba(21,111,240,.18));
}
.brand-title{font-weight:700;font-size:14px}
.brand-subtitle{font-size:12px;color:var(--text-dim);margin-top:2px}

.main-nav{display:flex;flex-direction:column;gap:6px}
.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border-radius:10px;
  color:var(--text-soft);
  border:1px solid transparent;
  transition:.16s ease;
}
.nav-item:hover{
  background:var(--bg-3);
  color:var(--text);
}
.nav-item.active{
  background:var(--primary-soft);
  color:var(--primary-2);
  border-color:rgba(0,122,204,.24);
}
.nav-ico{width:18px;text-align:center}

.sidebar-footer{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footer-pill{
  padding:9px 10px;
  border-radius:999px;
  background:var(--input-bg, #0d1627);
  border:1px solid var(--border-soft);
  color:var(--text-dim);
  font-size:12px;
}

.app-main{
  overflow:auto;
  padding:18px;
  background:
    radial-gradient(circle at top right, var(--main-glow, rgba(46,163,242,.08)), transparent 28%),
    linear-gradient(180deg, var(--main-bg, #0b1322) 0%, color-mix(in srgb, var(--main-bg, #0d1524) 84%, #ffffff 16%) 100%);
}

.surface-panel,.surface-card,.surface-page,.hero-card{
  background:linear-gradient(180deg,var(--card-bg-1, rgba(17,29,48,.96)),var(--card-bg-2, rgba(14,24,40,.96)));
  border:1px solid var(--border-soft);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.hero-card{
  padding:28px;
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:22px;
  margin-bottom:24px;
}
.hero-card.ready{transform:translateY(0);opacity:1}
.eyebrow{
  font-size:11px;
  color:var(--primary-2);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  margin-bottom:10px;
}
.hero-card h1,.files-topbar h1,.builder-topbar h1{
  margin:0 0 12px;
  font-size:32px;
  line-height:1.1;
}
.hero-copy{max-width:760px;color:var(--text-soft);line-height:1.75}
.hero-actions{display:flex;gap:12px;margin-top:18px}
.hero-metrics{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.metric-card,.surface-card{
  padding:18px;
}
.metric-value{font-size:30px;font-weight:800;color:var(--primary-2)}
.metric-label{font-size:13px;color:var(--text-soft)}
.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.surface-card h3{margin:0 0 8px}
.surface-card p{margin:0;color:var(--text-soft);line-height:1.7}
.surface-icon{font-size:22px;margin-bottom:12px}

.btn{
  border:none;
  border-radius:10px;
  padding:10px 14px;
  font-weight:600;
  transition:.15s ease;
}
.btn-primary{
  background:linear-gradient(180deg,var(--primary),#0a6cb4);
  color:white;
}
.btn-primary:hover{filter:brightness(1.08)}
.btn-secondary{
  background:color-mix(in srgb, var(--panel, #132136) 86%, var(--surface, #12233a) 14%);
  color:var(--text);
  border:1px solid var(--border);
}
.btn-secondary:hover{background:#17263d}
.btn-danger{
  background:var(--danger-soft);
  color:#ff8f8f;
  border:1px solid rgba(239,68,68,.25);
}
.icon-btn{
  width:34px;height:34px;
  border-radius:9px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface, #122034) 90%, var(--panel, #0d1728) 10%);
  color:var(--text);
  display:grid;place-items:center;
}
.icon-btn.danger{
  background:var(--danger-soft);
  color:#ff9898;
  border-color:rgba(239,68,68,.22);
}
.input-control{
  width:100%;
  border-radius:10px;
  padding:11px 12px;
  background:var(--input-bg, #0d1627);
}
.textarea-control{min-height:110px;resize:vertical}
.field-label{
  display:block;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text-dim);
  margin:16px 0 8px;
}
.panel-heading{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-dim);
  font-weight:700;
  margin-bottom:14px;
}
.panel-heading.between{
  display:flex;align-items:center;justify-content:space-between;
}
.tag{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  background:#15253d;
  color:var(--text-soft);
  border:1px solid var(--border-soft);
  font-size:11px;
  margin-right:6px;
  margin-top:6px;
}

.files-shell,.builder-shell{display:flex;flex-direction:column;gap:18px}
.files-topbar,.builder-topbar{padding:20px 22px;display:flex;justify-content:space-between;align-items:center}
.toolbar-actions,.builder-top-actions{display:flex;gap:10px}
.files-layout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:18px;
  min-height:0;
}
.files-left,.files-right,.builder-left,.builder-right,.builder-page-head{
  padding:18px;
}
.files-right{display:flex;flex-direction:column;gap:18px}
.library-list{display:flex;flex-direction:column;gap:8px}
.library-item,.tree-node,.page-list-item{
  width:100%;
  border:none;
  background:color-mix(in srgb, var(--surface, #101b2d) 88%, var(--panel, #0d1728) 12%);
  color:var(--text-soft);
  padding:11px 12px;
  border-radius:10px;
  border:1px solid transparent;
  display:flex;align-items:center;gap:10px;
  text-align:left;
}
.library-item.active,.tree-node.selected,.page-list-item.active{
  border-color:rgba(0,122,204,.28);
  background:var(--primary-soft);
  color:var(--primary-2);
}
.tree-scroll{max-height:calc(100vh - 310px);overflow:auto}
.tree-list{list-style:none;padding-left:14px;margin:8px 0 0}
.with-space{margin-top:20px}
.explorer-controls{padding:18px}
.breadcrumb-row{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--border-soft);margin-bottom:14px;
}
.crumb{
  border:none;background:transparent;color:var(--text-soft);padding:0;
}
.crumb.active,.crumb:hover{color:var(--primary-2)}
.crumb-sep{color:var(--text-dim)}
.explorer-filters{display:grid;grid-template-columns:1fr 220px;gap:12px}
.table-panel{overflow:hidden}
.table-header,.file-row{
  display:grid;
  grid-template-columns:2.2fr 1.4fr 1fr 1.1fr .7fr;
  gap:14px;
  align-items:center;
}
.table-header{
  padding:14px 18px;
  background:color-mix(in srgb, var(--panel, #0f192b) 76%, var(--surface, #12233a) 24%);
  color:var(--text-dim);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  border-bottom:1px solid var(--border-soft);
}
.table-body{max-height:calc(100vh - 300px);overflow:auto}
.file-row{
  padding:16px 18px;
  border-bottom:1px solid var(--border-soft);
  color:var(--text-soft);
}
.file-row:hover{background:rgba(255,255,255,.02)}
.file-main{display:flex;align-items:flex-start;gap:12px}
.file-ico{font-size:18px;margin-top:2px}
.file-name{font-weight:600;color:var(--text)}
.empty-state,.empty-inline{
  padding:24px;
  color:var(--text-dim);
  text-align:center;
}

.builder-layout{
  display:grid;
  grid-template-columns:280px 1fr 340px;
  gap:18px;
  min-height:0;
}
.builder-left,.builder-right{
  max-height:calc(100vh - 140px);
  overflow:auto;
}
.page-list{display:flex;flex-direction:column;gap:8px}
.page-list-item{
  justify-content:space-between;
  align-items:flex-start;
}
.page-list-main{display:flex;flex-direction:column;gap:4px}
.page-name{font-weight:600;color:var(--text)}
.page-meta{font-size:12px;color:var(--text-dim)}
.status-chip{
  border-radius:999px;
  padding:5px 9px;
  font-size:11px;
  font-weight:700;
}
.status-chip.draft{
  color:#ffca74;background:var(--warning-soft)
}
.status-chip.published{
  color:#7ce5a0;background:var(--success-soft)
}
.builder-canvas-wrap{display:flex;flex-direction:column;gap:18px;min-width:0}
.builder-page-head{padding:18px}
.page-head-grid{
  display:grid;
  grid-template-columns:1fr .8fr .8fr;
  gap:12px;
}
.canvas-stage{
  min-height:calc(100vh - 260px);
  background:
    linear-gradient(rgba(34,54,87,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,54,87,.35) 1px, transparent 1px),
    #0a1220;
  background-size:24px 24px,24px 24px,auto;
  padding:24px;
  border-radius:18px;
  border:1px solid var(--border-soft);
}
.canvas-stage.preview{background:#0a1220}
.surface-page{
  max-width:980px;
  margin:0 auto;
  overflow:hidden;
}
.canvas-block{
  position:relative;
  border:1px solid transparent;
}
.canvas-block.selected{
  border-color:rgba(0,122,204,.25);
}
.canvas-block-toolbar{
  position:absolute;
  top:10px;right:10px;z-index:5;
}
.page-block{position:relative}
.hero-block{
  padding:56px 46px;
  color:white;
}
.hero-brand{
  background:linear-gradient(135deg,#0b4490 0%,#072f70 46%,#060e22 100%);
}
.hero-neutral{
  background:linear-gradient(135deg,#1e2d44 0%,#0f1829 100%);
}
.hero-eyebrow{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,.72);
  margin-bottom:12px;
}
.hero-block h1{margin:0 0 12px;font-size:38px;line-height:1.1}
.hero-block p{margin:0;max-width:760px;color:rgba(255,255,255,.78);line-height:1.8}
.prose-block,.links-block,.file-dir-block,.callout-block{
  border-top:1px solid var(--border-soft);
}
.page-block.spacing-sm{padding:18px 20px}
.page-block.spacing-md{padding:26px 28px}
.page-block.spacing-lg{padding:34px 38px}
.page-block.spacing-sm .section-title{margin-bottom:12px}
.page-block.spacing-md .section-title{margin-bottom:16px}
.page-block.spacing-lg .section-title{margin-bottom:18px}
.page-block.spacing-sm .section-title-row{margin-bottom:10px}
.page-block.spacing-md .section-title-row{margin-bottom:12px}
.page-block.spacing-lg .section-title-row{margin-bottom:14px}
.page-block.spacing-sm .callout-head{margin-bottom:8px}
.page-block.spacing-md .callout-head{margin-bottom:10px}
.page-block.spacing-lg .callout-head{margin-bottom:12px}
.page-block.spacing-sm .video-caption,.page-block.spacing-sm figcaption{padding-top:10px}
.page-block.spacing-md .video-caption,.page-block.spacing-md figcaption{padding-top:12px}
.page-block.spacing-lg .video-caption,.page-block.spacing-lg figcaption{padding-top:14px}
.section-title{font-size:22px;font-weight:700;margin-bottom:18px}
.prose-render{color:var(--text-soft);line-height:1.8}
.prose-render p{margin:0 0 12px}
.prose-render ul,.prose-render ol{padding-left:20px}
.callout-block.info{background:rgba(0,122,204,.07)}
.callout-block.warning{background:rgba(245,158,11,.07)}
.callout-block.success{background:rgba(34,197,94,.07)}
.callout-head{font-size:18px;font-weight:700;margin-bottom:10px}
.callout-content{color:var(--text-soft);line-height:1.8}
.quick-links-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.quick-link-card{
  background:color-mix(in srgb, var(--surface, #121f34) 90%, var(--panel, #0d1728) 10%);
  border:1px solid var(--border-soft);
  padding:16px;
  border-radius:14px;
  display:block;
}
.link-title{font-weight:700;color:var(--text);margin-bottom:6px}
.link-desc,.link-url{color:var(--text-soft);font-size:13px}
.link-url{margin-top:10px;color:var(--primary-2)}
.section-title-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px;
}
.section-meta{font-size:12px;color:var(--text-dim)}
.directory-list{display:flex;flex-direction:column;gap:10px}
.directory-row{
  display:flex;justify-content:space-between;gap:12px;
  padding:12px 14px;
  border:1px solid var(--border-soft);
  border-radius:12px;
  background:color-mix(in srgb, var(--panel, #111d30) 84%, var(--surface, #12233a) 16%);
}
.directory-name{font-weight:600}
.directory-path{color:var(--text-dim)}
.spacer-block{border-top:1px dashed var(--border-soft)}
.add-zone{
  display:flex;flex-wrap:wrap;gap:10px;
  padding:22px 24px;
  border-top:1px dashed var(--border-soft);
}
.add-zone-btn,.palette-card{
  border:none;
  border-radius:12px;
  background:color-mix(in srgb, var(--surface, #122034) 90%, var(--panel, #0d1728) 10%);
  color:var(--text);
  border:1px solid var(--border);
}
.add-zone-btn{padding:10px 14px}
.builder-palette{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.palette-card{
  padding:16px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.palette-icon{font-size:22px}
.prop-actions{display:flex;gap:10px;margin-top:18px}
.links-editor,.links-props{display:flex;flex-direction:column;gap:12px}
.link-editor-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in srgb, var(--surface, #fff) 94%, var(--panel, #f3f6fb) 6%);
}
.link-editor-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.link-editor-index{
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-soft);
}
.link-editor-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:8px 10px;
  align-items:center;
}
.compact-label{
  margin:0;
  font-size:11px;
  letter-spacing:.08em;
}
.input-control-sm{
  min-height:38px;
  padding:8px 10px;
  font-size:14px;
}
.link-editor-wide{
  grid-column:2;
}
.page-selection-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.page-selection-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in srgb, var(--surface, #fff) 95%, var(--panel, #f3f6fb) 5%);
}
.page-selection-main{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.page-selection-title{font-weight:600;color:var(--text)}
.page-selection-meta{font-size:12px;color:var(--text-soft)}
.quill-host{
  min-height:220px;
  background:#ffffff;
  color:#111827;
  border-radius:12px;
  overflow:hidden;
}
.ql-toolbar.ql-snow,
.ql-container.ql-snow{
  border-color:#d1d5db !important;
}
.file-upload-btn input{display:none}

@media (max-width: 1440px){
  .builder-layout{grid-template-columns:240px 1fr 320px}
  .quick-links-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 1180px){
  .dashboard-grid,
  .hero-card,
  .files-layout,
  .builder-layout,
  .page-head-grid,
  .explorer-filters{
    grid-template-columns:1fr;
  }
  .app-shell{grid-template-columns:1fr}
  .app-sidebar{display:none}
  .table-header,.file-row{grid-template-columns:1.8fr 1fr 1fr .9fr .7fr}
  .link-editor-grid{grid-template-columns:1fr}
  .link-editor-wide{grid-column:auto}
}

:root{
  --bg:#09111b;
  --bg-2:#0d1724;
  --bg-3:#132033;
  --bg-4:#18263b;
  --panel:#101a28;
  --panel-2:#132032;
  --border:#22344a;
  --border-soft:#1a2b3e;
  --text:#e6eef9;
  --text-soft:#9db1c8;
  --text-dim:#6e839d;
  --primary:#1683ff;
  --primary-2:#0d6dd9;
  --primary-soft:rgba(22,131,255,.12);
}
body{font-family:var(--sys-font, 'Inter', system-ui, sans-serif)}
.surface-panel,.surface-card,.surface-page,.hero-card,.metric-card,.btn,.icon-btn,.input-control,.tag,.nav-item,.footer-pill,.status-chip,.page-list-item,.palette-card,.builder-canvas-item,.block-chip,.library-card,.file-row,.tree-row,.section-card,.directory-row{border-radius:8px}
.surface-panel,.surface-card,.surface-page,.hero-card,.metric-card,.library-card,.section-card{border-radius:12px}
.btn{font-weight:600}
.btn-primary{background:linear-gradient(180deg,var(--primary),var(--primary-2))}
.brand-logo{border-radius:10px;box-shadow:none;background:linear-gradient(180deg,var(--primary),var(--primary-2))}
.nav-item.active{background:var(--primary-soft);color:#91c9ff;border-color:rgba(22,131,255,.24)}
.surface-panel,.surface-card,.surface-page,.hero-card{box-shadow:0 16px 36px rgba(0,0,0,.22)}
.main-nav .nav-ico svg,.surface-icon svg{width:18px;height:18px;display:block}

.builder-subtext{color:var(--text-soft);max-width:820px;line-height:1.6}
.v2-layout{grid-template-columns:280px minmax(720px,1fr) 360px;align-items:start}
.parent-selector-panel{padding:14px 16px;margin-bottom:14px}
.selector-row{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}
.selector-label{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}
.selector-value{font-size:12px;color:var(--primary-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.palette-inline{display:flex;flex-wrap:wrap;gap:8px}.page-create-actions{display:flex;gap:8px}
.version-list{display:flex;flex-direction:column;gap:8px}.version-item{background:color-mix(in srgb, var(--panel, #0f1a2b) 82%, var(--surface, #12233a) 18%);border:1px solid var(--border-soft);color:var(--text);padding:10px 12px;border-radius:10px;text-align:left}.version-meta{font-size:12px;color:var(--text-dim);margin-top:4px}
.inspector-meta{font-size:12px;color:var(--text-soft);margin-bottom:12px}.hint-card{padding:12px;border-radius:12px;background:color-mix(in srgb, var(--panel, #0f1a2b) 82%, var(--surface, #12233a) 18%);border:1px solid var(--border-soft);color:var(--text-soft);margin-bottom:14px}
.palette-group{margin-top:16px}.palette-group-title{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.editor-root{display:flex;flex-direction:column;gap:14px}.editor-node{position:relative;border:1px dashed rgba(141,166,196,.22);border-radius:14px;padding:12px;background:rgba(10,19,34,.35);margin-bottom:12px}.editor-node.selected{border-color:rgba(46,163,242,.6);box-shadow:0 0 0 1px rgba(46,163,242,.22) inset}.node-section>.node-body,.column-zone{display:flex;flex-direction:column;gap:12px;margin-top:12px}.node-hitbox{all:unset;display:block;width:100%;cursor:pointer}.node-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--primary-2);margin-bottom:6px}.node-caption{font-size:14px;font-weight:600}
.node-toolbar{position:absolute;top:8px;right:8px;display:flex;gap:6px;opacity:0;pointer-events:none;transition:.15s ease}.editor-node:hover .node-toolbar,.node-toolbar.visible{opacity:1;pointer-events:auto}
.mini-btn{border:1px solid var(--border);background:color-mix(in srgb, var(--panel, #132136) 86%, var(--surface, #12233a) 14%);color:var(--text);border-radius:8px;padding:4px 7px;font-size:12px}.mini-btn.danger{background:var(--danger-soft);color:#ff9898;border-color:rgba(239,68,68,.22)}
.drop-zone{display:block;width:100%;padding:10px 12px;border-radius:10px;border:1px dashed rgba(46,163,242,.35);background:rgba(0,122,204,.08);color:var(--primary-2);text-align:center}
.node-columns-grid{display:grid;gap:12px;margin-top:12px}.node-columns-grid.layout-6-6{grid-template-columns:repeat(2,1fr)}.node-columns-grid.layout-8-4{grid-template-columns:2fr 1fr}.node-columns-grid.layout-4-8{grid-template-columns:1fr 2fr}.node-columns-grid.layout-4-4-4{grid-template-columns:repeat(3,1fr)}
.column-drop{border:1px solid var(--border-soft);background:#0e1829;border-radius:12px;padding:10px}.column-title{font-size:12px;color:var(--text-dim);margin-bottom:10px}
.node-preview .page-block{margin:0}.node-preview .hero-block h1{font-size:20px}.node-preview .hero-block p{font-size:13px}.node-preview .quick-links-grid{grid-template-columns:1fr}.node-preview .quick-link-card{padding:10px}
.public-page-root{display:flex;flex-direction:column;gap:20px}.public-section{padding:20px;border-radius:18px}.public-section.container-boxed{max-width:1180px;margin:0 auto}.public-section.container-wide{max-width:none}.section-default{background:transparent}.section-muted{background:rgba(17,29,48,.86);border:1px solid var(--border-soft)}.section-brand-soft{background:rgba(0,122,204,.08);border:1px solid rgba(46,163,242,.2)}.pad-sm{padding-block:10px}.pad-md{padding-block:16px}.pad-lg{padding-block:24px}.pad-xl{padding-block:34px}.section-kicker{margin-bottom:14px;font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}
.public-columns{display:grid;gap:18px}.public-columns.layout-6-6{grid-template-columns:repeat(2,1fr)}.public-columns.layout-8-4{grid-template-columns:2fr 1fr}.public-columns.layout-4-8{grid-template-columns:1fr 2fr}.public-columns.layout-4-4-4{grid-template-columns:repeat(3,1fr)}
.image-block{display:flex;flex-direction:column;gap:10px;overflow:hidden}.image-block img{width:100%;max-height:320px;border-radius:14px;border:1px solid var(--border-soft);background:#09111d}.image-block.mode-cover img{object-fit:cover}.image-block.mode-contain img{object-fit:contain}.image-block figcaption{font-size:12px;color:var(--text-dim)}
.divider-block{display:flex;align-items:center;gap:12px;color:var(--text-dim);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.divider-block::before,.divider-block::after{content:'';height:1px;background:var(--border);flex:1}.divider-block.strong::before,.divider-block.strong::after{background:rgba(46,163,242,.4)}
.code-editor{min-height:180px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.links-props{display:flex;flex-direction:column;gap:10px}
.hero-block.align-center{text-align:center}
@media (max-width: 1400px){.v2-layout{grid-template-columns:260px 1fr 320px}}
@media (max-width: 1100px){.v2-layout{grid-template-columns:1fr}.builder-left,.builder-right{order:2}.builder-canvas-wrap{order:1}.public-columns,.node-columns-grid{grid-template-columns:1fr !important}}


/* V2 drag and image editor */
.builder-help-row{margin:8px 0 12px;color:var(--text-dim);font-size:12px}
.editor-node[draggable="true"]{cursor:grab}
.editor-node.drag-source{opacity:.45;transform:scale(.985)}
.page-canvas.is-dragging [data-drop-parent]{transition:background-color .15s,border-color .15s}
.page-canvas.is-dragging [data-drop-parent]{border:1px dashed rgba(120,154,255,.16);border-radius:16px}
.page-canvas .drag-over{background:rgba(74,114,255,.08)!important;border-color:rgba(120,154,255,.55)!important;box-shadow:0 0 0 2px rgba(74,114,255,.08) inset}
.drop-zone{width:100%;margin-top:10px;padding:10px 12px;border:1px dashed var(--border-soft);border-radius:12px;background:rgba(255,255,255,.02);color:var(--text-dim);font-size:12px;text-align:center}
.drop-zone:hover{border-color:var(--accent);color:var(--text-main)}
.column-zone,.node-body,.editor-root{min-height:24px}
.image-upload-field{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;border:1px dashed var(--border-soft);border-radius:12px;background:rgba(255,255,255,.02);cursor:pointer;color:var(--text-main);font-size:13px}
.image-upload-field input{display:none}
.range-prop-field{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.range-control{padding:0;height:10px;border:0;background:transparent;box-shadow:none}
.range-control::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:color-mix(in srgb, var(--primary) 14%, var(--panel) 86%)}
.range-control::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary);border:2px solid #fff;margin-top:-5px;box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer}
.range-control::-moz-range-track{height:6px;border-radius:999px;background:color-mix(in srgb, var(--primary) 14%, var(--panel) 86%)}
.range-control::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--primary);box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer}
.range-prop-meta{display:flex;align-items:center;gap:8px}
.range-number-input{width:84px;text-align:right}
.range-unit{min-width:24px;color:var(--text-dim);font-size:12px;font-weight:700}
.hint-card.compact{padding:10px 12px;font-size:12px}
.image-block{display:flex;flex-direction:column;gap:10px;overflow:hidden;max-width:var(--img-max-width,100%)}
.image-block img{width:100%;height:var(--img-height,320px);max-height:none;border-radius:var(--img-radius,14px);border:1px solid var(--border-soft);background:transparent;object-position:var(--img-position,center)}
.image-block.mode-cover img{object-fit:cover}.image-block.mode-contain img{object-fit:contain}.image-block figcaption{font-size:12px;color:var(--text-dim)}
.node-image .node-preview .image-block{pointer-events:none}


/* Top navigation and workspace maximization */
.app-shell.top-shell{display:flex;flex-direction:column;height:100vh}
.app-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 18px;border-bottom:1px solid var(--border-soft);background:linear-gradient(180deg,var(--topbar-bg, #08101b) 0%,var(--topbar-bg-2, #0b1422) 100%)}
.topbar-brand-panel{padding:0;border:0;background:transparent;display:flex;align-items:center;gap:12px}
.top-nav{display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap}
.top-nav .nav-item{padding:9px 12px}
.top-main{padding:18px;overflow:auto}

.topbar-tools{display:flex;align-items:center;gap:12px;margin-left:auto}
.topbar-theme-picker{display:flex;align-items:center;gap:10px;color:var(--text-soft);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.topbar-theme-select{min-width:190px;padding:8px 12px;border-radius:10px}
.published-pages-panel{margin-top:22px;padding:18px}
.published-pages-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.published-page-card{padding:16px;border:1px solid var(--border-soft);border-radius:14px;background:linear-gradient(180deg,var(--card-bg-1, rgba(17,29,48,.88)),var(--card-bg-2, rgba(14,24,40,.88)))}
.published-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.published-page-head h3{margin:0 0 6px;font-size:18px}
.published-page-slug,.published-page-meta,.published-page-desc{color:var(--text-soft)}
.published-page-desc{line-height:1.65;min-height:48px}
.published-page-actions{margin-top:14px;display:flex;gap:10px}
@media (max-width: 1200px){.published-pages-grid{grid-template-columns:1fr 1fr}}

.builder-layout.v2-layout{display:grid;grid-template-columns:250px 330px minmax(0,1fr);gap:14px;align-items:start}
.builder-left,.builder-toolbox{max-height:calc(100vh - 150px);overflow:auto}
.builder-toolbox{padding:16px;position:sticky;top:0}
.toolbox-parent-selector{padding:14px;margin-bottom:14px;background:transparent;border:0;box-shadow:none}
.toolbox-inline{max-height:320px;overflow:auto;padding-right:4px}
.toolbox-inspector{border-top:1px solid var(--border-soft);padding-top:14px}
.builder-canvas-wrap{min-width:0}
.builder-page-head{padding:14px 16px}
.canvas-stage{min-height:calc(100vh - 230px);padding:16px}
.surface-page{max-width:none;width:100%}
.page-list-item{padding:10px 11px}
.builder-topbar{padding:16px 18px}
.builder-topbar h1{font-size:26px}

@media (max-width: 1380px){
  .builder-layout.v2-layout{grid-template-columns:220px 300px minmax(0,1fr)}
}
@media (max-width: 1120px){
  .app-topbar{align-items:flex-start;flex-direction:column}
  .topbar-tools{width:100%;margin-left:0}
  .topbar-theme-picker{width:100%;justify-content:space-between}
  .topbar-theme-select{min-width:0;flex:1}
  .builder-layout.v2-layout{grid-template-columns:1fr}
  .builder-left,.builder-toolbox{max-height:none;position:static}
}

/* --- V2 editor upgrade: compact toolbox, insertion slots, inline editing --- */
.builder-layout.v2-layout{
  grid-template-columns:260px 300px minmax(0,1fr);
}
.builder-toolbox,
.builder-left,
.builder-canvas-wrap{min-width:0}
.builder-toolbox{
  padding:14px;
  max-height:calc(100vh - 140px);
  overflow:auto;
}
.toolbox-inspector .panel-heading:first-child{margin-top:0}
.toolbox-divider{height:1px;background:var(--border-soft);margin:14px 0}
.compact-group{margin-top:10px}
.compact-palette{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.compact-card{
  min-height:64px;
  padding:8px 9px;
  border-radius:10px;
  font-size:12px;
  line-height:1.2;
}
.compact-card .palette-icon{font-size:18px;margin-bottom:4px}
.compact-btn{
  padding:8px 10px;
  font-size:12px;
}
.parent-selector-panel.toolbox-parent-selector{
  padding:12px;
  margin-bottom:12px;
}
.builder-help-row{font-size:12px;line-height:1.45;color:var(--text-soft)}
.selector-row{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px}
.selector-label,.selector-value{font-size:12px}
.selector-value{color:var(--primary-2);font-weight:700;word-break:break-all}

.editor-root,.node-body,.column-zone{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.drop-slot{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:18px;
  padding:2px 6px;
  border-radius:8px;
  transition:.12s ease;
}
.drop-slot-line{
  flex:1;
  height:3px;
  border-radius:999px;
  background:rgba(46,163,242,.18);
  border:1px dashed rgba(46,163,242,.24);
}
.drop-slot-label{
  font-size:11px;
  color:var(--text-dim);
  white-space:nowrap;
}
.drop-slot.compact .drop-slot-label{display:none}
.drop-slot.drag-over{
  background:rgba(46,163,242,.10);
}
.drop-slot.drag-over .drop-slot-line{
  height:6px;
  background:rgba(46,163,242,.55);
  border-color:rgba(46,163,242,.6);
}
.node-hitbox-static{
  display:block;
  width:100%;
  cursor:default;
}
.node-hitbox-static [contenteditable="true"]{
  cursor:text;
}
.hero-inline-editor,
.rich-inline-editor,
.callout-inline-editor{
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:16px;
  background:#0d1727;
}
.hero-inline-editor.hero-brand{
  background:linear-gradient(180deg, rgba(0,122,204,.18), rgba(10,20,34,.92));
}
.hero-inline-editor.hero-neutral{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(10,20,34,.92));
}
.hero-inline-editor h2,
.inline-title{
  margin:0 0 8px;
  color:var(--text);
}
.inline-eyebrow{
  margin-bottom:10px;
  font-size:12px;
  font-weight:700;
  color:var(--primary-2);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.hero-inline-editor p{margin:0;color:var(--text-soft)}
.inline-rich-toolbar{
  display:flex;
  gap:6px;
  margin:4px 0 10px;
}
.inline-rich-surface{
  min-height:120px;
  color:var(--text-soft);
  line-height:1.65;
}
.inline-rich-surface:empty::before{
  content:'Écris ici';
  color:var(--text-dim);
}
.callout-inline-editor.info{border-color:rgba(46,163,242,.3);background:rgba(46,163,242,.08)}
.callout-inline-editor.success{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.08)}
.callout-inline-editor.warning{border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.08)}

[contenteditable="true"]:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(46,163,242,.25);
  border-radius:8px;
}
.advanced-source{
  border:1px solid var(--border-soft);
  border-radius:10px;
  padding:8px 10px;
  background:var(--input-bg, #0d1627);
}
.advanced-source summary{
  cursor:pointer;
  color:var(--text-soft);
  font-size:12px;
}

.palette-card[draggable="true"]{cursor:grab}
.palette-card[draggable="true"]:active{cursor:grabbing}
.drag-source{opacity:.45}
.page-canvas.is-dragging .drop-slot{opacity:1}

.mini-btn{
  width:28px;
  height:28px;
  border-radius:8px;
}
.node-toolbar{
  gap:6px;
}
.icon-btn{
  width:30px;
  height:30px;
}

@media (max-width: 1400px){
  .builder-layout.v2-layout{grid-template-columns:230px 270px minmax(0,1fr)}
}

/* --- Premium builder pass: outline, floating toolbar, image resize --- */
.premium-layout{grid-template-columns:260px 300px minmax(0,1fr)}
.outline-tree{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow:auto;padding-right:4px}
.outline-item{
  all:unset;
  display:grid;
  grid-template-columns:16px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--border-soft);
  border-radius:10px;
  background:var(--input-bg, #0d1627);
  cursor:pointer;
  margin-left:calc(var(--depth,0) * 10px);
}
.outline-item:hover{border-color:rgba(46,163,242,.35);background:#101b2d}
.outline-item.active{border-color:rgba(46,163,242,.55);background:rgba(46,163,242,.12);box-shadow:0 0 0 1px rgba(46,163,242,.18) inset}
.outline-item.is-column{background:#0b1422}
.outline-bullet{color:var(--primary-2);font-size:11px}
.outline-label{font-size:12px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.outline-meta{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}

.floating-selection-bar{
  position:sticky;
  top:0;
  z-index:12;
  margin-bottom:10px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.floating-selection-meta{min-width:0}
.floating-selection-type{text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--primary-2);font-weight:700}
.floating-selection-path{font-size:12px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:640px}
.floating-selection-actions{display:flex;gap:6px;flex-shrink:0}

.image-editor-shell{display:flex;flex-direction:column;gap:10px}
.image-preview-resizable{
  position:relative;
  width:100%;
  max-width:var(--img-max-width,100%);
}
.image-preview-resizable .image-block{max-width:none}
.image-preview-resizable.selected .image-block img{box-shadow:0 0 0 2px rgba(46,163,242,.3)}
.image-size-badge{
  position:absolute;
  top:10px;
  left:10px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(6,12,20,.78);
  border:1px solid rgba(46,163,242,.22);
  color:#d8e7f8;
  font-size:11px;
  pointer-events:none;
}
.image-resize-handle{
  position:absolute;
  border:none;
  background:linear-gradient(180deg,var(--primary-2),var(--primary));
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.image-resize-handle.east{
  top:50%;
  right:-7px;
  width:14px;
  height:62px;
  border-radius:999px;
  transform:translateY(-50%);
  cursor:ew-resize;
}
.image-resize-handle.south{
  left:50%;
  bottom:-7px;
  width:62px;
  height:14px;
  border-radius:999px;
  transform:translateX(-50%);
  cursor:ns-resize;
}
.image-resize-handle.corner{
  right:-6px;
  bottom:-6px;
  width:18px;
  height:18px;
  border-radius:6px;
  cursor:nwse-resize;
}
.image-preview-resizable.resizing{user-select:none}
.image-inline-caption{
  min-height:20px;
  font-size:12px;
  color:var(--text-dim);
  padding:4px 2px;
}
.image-inline-caption:focus{color:var(--text-soft)}

@media (max-width: 1400px){
  .floating-selection-path{max-width:360px}
}
@media (max-width: 1200px){
  .premium-layout{grid-template-columns:230px 280px minmax(0,1fr)}
}


/* Public site themes */
.page-head-grid-themed{grid-template-columns:1.1fr .8fr .8fr .8fr .8fr .9fr}
.field-help{margin-top:6px;font-size:12px;color:var(--text-dim);line-height:1.4}
.theme-badges{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.theme-badge{padding:10px 12px;border:1px solid var(--border-soft);border-radius:12px;background:color-mix(in srgb, var(--panel, #0f1a2b) 82%, var(--surface, #12233a) 18%);min-width:140px}
.theme-badge span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:6px}
.theme-badge strong{font-size:14px;color:var(--text)}
.theme-badge.preview{border-color:rgba(22,131,255,.3);background:rgba(22,131,255,.08)}
.preview-theme-header{display:none;align-items:center;justify-content:space-between;gap:16px;padding:0 4px 12px;color:var(--text-soft)}
.preview-theme-header.active{display:flex}
.preview-theme-title{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim)}
.preview-theme-meta{font-size:13px;color:var(--text-soft)}
.theme-preview-shell.preview{background:linear-gradient(180deg,#08101a 0%,#0b1220 100%)}

.site-theme{
  --site-bg:#09111b;
  --site-surface:#101a28;
  --site-surface-2:#122034;
  --site-border:#22344a;
  --site-text:#e6eef9;
  --site-text-soft:#9db1c8;
  --site-text-dim:#6e839d;
  --site-primary:#1683ff;
  --site-primary-strong:#0d6dd9;
  --site-link:#74b7ff;
  --site-callout-info:rgba(22,131,255,.08);
  --site-callout-warning:rgba(245,158,11,.08);
  --site-callout-success:rgba(34,197,94,.08);
  --site-section-muted:rgba(16,26,40,.88);
  --site-section-brand-soft:rgba(22,131,255,.08);
  --site-hero-brand:linear-gradient(135deg,#0b4490 0%,#072f70 46%,#060e22 100%);
  --site-hero-neutral:linear-gradient(135deg,#1e2d44 0%,#0f1829 100%);
  --site-canvas:linear-gradient(180deg,#08111d 0%,#0d1625 100%);
}
.site-theme.theme-sysimple-light{
  --site-bg:#f3f7fb;
  --site-surface:#ffffff;
  --site-surface-2:#f7fbff;
  --site-border:#d7e3f0;
  --site-text:#152235;
  --site-text-soft:#425972;
  --site-text-dim:#6f8398;
  --site-primary:#1668c7;
  --site-primary-strong:#0f4e96;
  --site-link:#1668c7;
  --site-callout-info:rgba(22,104,199,.08);
  --site-callout-warning:rgba(234,179,8,.10);
  --site-callout-success:rgba(34,197,94,.10);
  --site-section-muted:#eef4fa;
  --site-section-brand-soft:rgba(22,104,199,.06);
  --site-hero-brand:linear-gradient(135deg,#1d6fd3 0%,#124d96 55%,#0d2140 100%);
  --site-hero-neutral:linear-gradient(135deg,#dae5f1 0%,#edf3f9 100%);
  --site-canvas:linear-gradient(180deg,#eef4fa 0%,#f7fbff 100%);
}
.site-theme.theme-vs-dark{
  --site-bg:#11161d;
  --site-surface:#181f28;
  --site-surface-2:#202834;
  --site-border:#313f4f;
  --site-text:#edf2f8;
  --site-text-soft:#b5c1cf;
  --site-text-dim:#8593a4;
  --site-primary:#4f8fca;
  --site-primary-strong:#346790;
  --site-link:#8bbdf0;
  --site-callout-info:rgba(79,143,202,.10);
  --site-callout-warning:rgba(245,158,11,.10);
  --site-callout-success:rgba(16,185,129,.10);
  --site-section-muted:#161d26;
  --site-section-brand-soft:rgba(79,143,202,.08);
  --site-hero-brand:linear-gradient(135deg,#2c4f6a 0%,#20384e 48%,#141b24 100%);
  --site-hero-neutral:linear-gradient(135deg,#2b3440 0%,#181f28 100%);
  --site-canvas:linear-gradient(180deg,#0f141a 0%,#141b23 100%);
}
.site-theme.theme-forest-green{
  --site-bg:#0e1916;
  --site-surface:#13241f;
  --site-surface-2:#183029;
  --site-border:#2d4a42;
  --site-text:#edf7f1;
  --site-text-soft:#b4d0c4;
  --site-text-dim:#7f9d92;
  --site-primary:#2fb680;
  --site-primary-strong:#1c8d61;
  --site-link:#84e3ba;
  --site-callout-info:rgba(47,182,128,.10);
  --site-callout-warning:rgba(245,158,11,.10);
  --site-callout-success:rgba(16,185,129,.12);
  --site-section-muted:#12241f;
  --site-section-brand-soft:rgba(47,182,128,.08);
  --site-hero-brand:linear-gradient(135deg,#1b6b4d 0%,#174b3a 50%,#0d1714 100%);
  --site-hero-neutral:linear-gradient(135deg,#234036 0%,#162a24 100%);
  --site-canvas:linear-gradient(180deg,#0d1614 0%,#101d19 100%);
}
.site-theme.public-page-root{background:var(--site-canvas);padding:18px;border-radius:18px}
.site-theme.public-page-root.has-explicit-page-bg{background:none}
.site-theme .public-section{color:var(--site-text)}
.site-theme .section-default{background:transparent}
.site-theme .section-muted{background:var(--site-section-muted);border:1px solid var(--site-border)}
.site-theme .section-brand-soft{background:var(--site-section-brand-soft);border:1px solid color-mix(in srgb, var(--site-primary) 24%, transparent)}
.site-theme .section-kicker,.site-theme .directory-path,.site-theme .section-meta,.site-theme .image-block figcaption,.site-theme .divider-block,.site-theme .preview-theme-title{color:var(--site-text-dim)}
.site-theme .hero-brand{background:var(--site-hero-brand)}
.site-theme .hero-neutral{background:var(--site-hero-neutral);color:var(--site-text)}
.site-theme .hero-neutral .hero-eyebrow{color:color-mix(in srgb, var(--site-text) 68%, transparent)}
.site-theme .hero-neutral p{color:var(--site-text-soft)}
.site-theme .prose-block,.site-theme .links-block,.site-theme .file-dir-block,.site-theme .callout-block{background:var(--site-surface);border-top:1px solid var(--site-border);color:var(--site-text)}
.site-theme .callout-block.info{background:var(--site-callout-info)}
.site-theme .callout-block.warning{background:var(--site-callout-warning)}
.site-theme .callout-block.success{background:var(--site-callout-success)}
.site-theme .section-title,.site-theme .callout-head,.site-theme .directory-name,.site-theme .link-title{color:var(--site-text)}
.site-theme .prose-render,.site-theme .callout-content,.site-theme .link-desc,.site-theme .link-url{color:var(--site-text-soft)}
.site-theme .link-url{color:var(--site-link)}
.site-theme .quick-link-card,.site-theme .directory-row{background:var(--site-surface-2);border:1px solid var(--site-border)}
.site-theme .image-block img{border:1px solid var(--site-border);background:transparent}
.site-theme .divider-block::before,.site-theme .divider-block::after{background:var(--site-border)}
.site-theme .divider-block.strong::before,.site-theme .divider-block.strong::after{background:color-mix(in srgb, var(--site-primary) 35%, transparent)}
@media (max-width: 1500px){.page-head-grid-themed{grid-template-columns:1fr 1fr 1fr;}}
@media (max-width: 900px){.page-head-grid-themed{grid-template-columns:1fr;} .theme-badges{align-items:stretch}}

/* Theme manager + branding */
.checkbox-field{display:flex;align-items:center;gap:10px;color:var(--text-soft)}
.checkbox-field input{width:auto}
.theme-manager-card{padding:14px;border-radius:16px;margin-bottom:14px}
.theme-editor-topline{display:flex;align-items:end;justify-content:space-between;gap:10px}
.theme-token-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;align-items:end}
.color-control{padding:6px 8px;height:42px}
.theme-badges-stacked .theme-badge{min-width:110px}
.public-site-header{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 20px;border:1px solid var(--site-border);border-radius:var(--site-radius);background:var(--site-panel);margin-bottom:8px;color:var(--site-text)}
.public-site-brand{display:flex;align-items:center;gap:14px}
.public-site-logo-mark,.public-site-logo-image{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;object-fit:cover;overflow:hidden;border:1px solid var(--site-border);background:linear-gradient(135deg,var(--site-primary),var(--site-accent));color:#fff;font-weight:800}
.public-site-company{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--site-text-soft);margin-bottom:4px}
.public-site-name{font-size:22px;font-weight:800;color:var(--site-text)}
.public-site-tagline,.public-site-meta{color:var(--site-text-soft);font-size:13px}
.public-page-root{font-family:var(--site-font);border-radius:var(--site-radius)}
.public-page-body{display:flex;flex-direction:column;gap:20px}
.site-theme .public-section,.site-theme .prose-block,.site-theme .links-block,.site-theme .file-dir-block,.site-theme .callout-block,.site-theme .quick-link-card,.site-theme .directory-row,.site-theme .image-block img,.public-site-header{border-radius:var(--site-radius)}
@media (max-width: 1100px){.theme-token-grid{grid-template-columns:1fr}.public-site-header{flex-direction:column;align-items:flex-start}.public-site-meta{width:100%}}


/* --- Design manager module --- */
.design-page .top-main{padding-bottom:28px}
.design-hero{margin-bottom:18px}
.design-layout{
  display:grid;
  grid-template-columns:300px minmax(0,1fr) minmax(380px, 40%);
  gap:16px;
  align-items:start;
}
.design-sidebar,
.design-panel,
.design-preview-panel{
  padding:16px;
}
.design-sidebar,
.design-preview-panel{
  position:sticky;
  top:0;
  max-height:calc(100vh - 145px);
  overflow:auto;
}
.design-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.design-nav-item{
  border:1px solid var(--border-soft);
  background:var(--input-bg, #0d1627);
  color:var(--text-soft);
  padding:11px 12px;
  border-radius:12px;
  text-align:left;
  font-weight:600;
}
.design-nav-item:hover{border-color:rgba(46,163,242,.3);color:var(--text)}
.design-nav-item.active{
  background:rgba(46,163,242,.12);
  color:var(--primary-2);
  border-color:rgba(46,163,242,.38);
}
.theme-card-grid{
  display:grid;
  gap:10px;
}
.theme-card{
  all:unset;
  display:block;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border-soft);
  background:var(--input-bg, #0d1627);
  cursor:pointer;
}
.theme-card:hover{border-color:rgba(46,163,242,.28);background:#101b2d}
.theme-card.active{
  border-color:rgba(46,163,242,.55);
  background:rgba(46,163,242,.10);
  box-shadow:0 0 0 1px rgba(46,163,242,.18) inset;
}
.theme-card-swatches{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  margin-bottom:10px;
}
.theme-card-swatches span{
  height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
}
.theme-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.theme-card-head strong{
  font-size:13px;
  color:var(--text);
}
.theme-card-desc{
  font-size:12px;
  color:var(--text-soft);
  line-height:1.45;
}
.mini-tag{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:4px 6px;
  border-radius:999px;
  background:color-mix(in srgb, var(--panel, #132136) 86%, var(--surface, #12233a) 14%);
  color:var(--text-dim);
  border:1px solid var(--border-soft);
}
.mini-tag.custom{
  color:#97d4ff;
  border-color:rgba(46,163,242,.25);
}
.design-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.design-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px 14px;
}
.design-span-2{grid-column:1 / -1}
.design-switch-row{
  display:flex;
  flex-direction:column;
  justify-content:end;
}
.design-switch{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border-soft);
  background:var(--input-bg, #0d1627);
  color:var(--text-soft);
}
.design-switch input{width:auto}
.design-theme-grid{
  margin-top:10px;
}
.design-upload{
  justify-content:flex-start;
}
.design-preview-surface{
  margin-top:14px;
  padding:12px;
  border-radius:16px;
  background:#08111d;
  border:1px solid var(--border-soft);
}
.design-preview-surface .public-page-root{
  padding:14px;
}
@media (max-width: 1500px){
  .design-layout{
    grid-template-columns:280px minmax(0,1fr);
  }
  .design-preview-panel{
    grid-column:1 / -1;
    position:static;
    max-height:none;
  }
}
@media (max-width: 980px){
  .design-layout{
    grid-template-columns:1fr;
  }
  .design-sidebar{
    position:static;
    max-height:none;
  }
  .design-form-grid{
    grid-template-columns:1fr;
  }
}


/* --- Layout PRO builder --- */
.layout-pro-grid{
  display:grid;
  grid-template-columns:220px 240px minmax(0,1fr) 340px;
  gap:14px;
  align-items:start;
}
.builder-left,
.builder-toolbox,
.builder-right{
  min-width:0;
  max-height:calc(100vh - 220px);
  overflow:auto;
}
.builder-canvas-wrap{min-width:0}
.collapsible-panel .panel-content{display:block}
.panel-head-actions{display:flex;align-items:center;gap:8px}
.collapse-btn{
  width:28px;
  height:28px;
  border-radius:9px;
  border:1px solid var(--border-soft);
  background:#0e1a2b;
  color:var(--text-soft);
  font-weight:700;
}
.collapse-btn:hover{border-color:rgba(46,163,242,.35);color:var(--text)}
.panel-collapsed{
  overflow:hidden;
  padding:12px 10px;
}
.panel-collapsed .panel-content{display:none}
.layout-pro-grid.pages-collapsed{grid-template-columns:56px 240px minmax(0,1fr) 340px}
.layout-pro-grid.components-collapsed{grid-template-columns:220px 56px minmax(0,1fr) 340px}
.layout-pro-grid.right-collapsed{grid-template-columns:220px 240px minmax(0,1fr) 56px}
.layout-pro-grid.pages-collapsed.components-collapsed{grid-template-columns:56px 56px minmax(0,1fr) 340px}
.layout-pro-grid.pages-collapsed.right-collapsed{grid-template-columns:56px 240px minmax(0,1fr) 56px}
.layout-pro-grid.components-collapsed.right-collapsed{grid-template-columns:220px 56px minmax(0,1fr) 56px}
.layout-pro-grid.pages-collapsed.components-collapsed.right-collapsed{grid-template-columns:56px 56px minmax(0,1fr) 56px}

.compact-components-panel .panel-content{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.compact-insert-panel{
  padding:10px 12px;
}
.compact-toolbox-help{
  font-size:12px;
  color:var(--text-soft);
  margin-top:-2px;
}
.compact-palette-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.compact-palette-title{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-dim);
  font-weight:700;
}
.compact-palette-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.compact-tool-item{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:42px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border-soft);
  background:#0d1728;
  color:var(--text);
  font-size:12px;
  font-weight:600;
  text-align:left;
}
.compact-tool-item:hover{
  border-color:rgba(46,163,242,.3);
  background:#10203a;
}
.compact-tool-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  min-width:18px;
  font-size:13px;
  color:var(--primary-2);
}
.compact-tool-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.right-panel-scroll{
  display:flex;
  flex-direction:column;
  gap:0;
}
.builder-right .theme-manager-card,
.builder-right .toolbox-inspector,
.builder-right .outline-tree,
.builder-right .version-list{
  margin-bottom:0;
}
.builder-right .hint-card.compact,
.builder-right .builder-help-row{
  font-size:12px;
}
.builder-right .input-control,
.builder-right .field-label{
  font-size:12px;
}
.builder-right .panel-heading.with-space{
  margin-top:16px;
}
@media (max-width: 1500px){
  .layout-pro-grid,
  .layout-pro-grid.pages-collapsed,
  .layout-pro-grid.components-collapsed,
  .layout-pro-grid.right-collapsed,
  .layout-pro-grid.pages-collapsed.components-collapsed,
  .layout-pro-grid.pages-collapsed.right-collapsed,
  .layout-pro-grid.components-collapsed.right-collapsed,
  .layout-pro-grid.pages-collapsed.components-collapsed.right-collapsed{
    grid-template-columns:200px 220px minmax(0,1fr) 300px;
  }
}
@media (max-width: 1200px){
  .layout-pro-grid,
  .layout-pro-grid.pages-collapsed,
  .layout-pro-grid.components-collapsed,
  .layout-pro-grid.right-collapsed,
  .layout-pro-grid.pages-collapsed.components-collapsed,
  .layout-pro-grid.pages-collapsed.right-collapsed,
  .layout-pro-grid.components-collapsed.right-collapsed,
  .layout-pro-grid.pages-collapsed.components-collapsed.right-collapsed{
    grid-template-columns:1fr;
  }
  .builder-left,
  .builder-toolbox,
  .builder-right{
    max-height:none;
  }
}


/* --- UX fixes: collapsed useful modes + stable selection --- */
.panel-mini-content{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}
.collapsed-mini-stack{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mini-page-chip,
.mini-icon-chip,
.mini-right-chip{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  width:100%;
  border-radius:10px;
  border:1px solid var(--border-soft);
  background:#0d1728;
  color:var(--text);
  font-weight:700;
}
.mini-page-chip.active{
  border-color:rgba(46,163,242,.55);
  color:var(--primary-2);
}
.component-mini-stack{
  display:grid;
  grid-template-columns:1fr;
}
.mini-icon-chip{
  font-size:15px;
  padding:0;
}
.mini-right-chip{
  justify-content:flex-start;
  gap:8px;
  padding:8px;
  font-size:12px;
  font-weight:600;
}
.mini-right-icon{
  width:18px;
  text-align:center;
  color:var(--primary-2);
}
.panel-collapsed .panel-heading{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  min-height:120px;
  justify-content:flex-start;
  align-items:center;
  gap:8px;
}
.panel-collapsed .panel-head-actions{
  flex-direction:column;
}
.panel-collapsed#pages-panel .panel-heading,
.panel-collapsed#components-panel .panel-heading,
.panel-collapsed#settings-panel .panel-heading{
  writing-mode:horizontal-tb;
  transform:none;
  min-height:auto;
}
.panel-collapsed{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.panel-collapsed .panel-mini-content{
  display:flex;
}
.builder-canvas-wrap{
  min-height:0;
}
.builder-right .mini-section-ico{
  display:inline-flex;
  width:16px;
  margin-right:6px;
  color:var(--primary-2);
}


/* --- Stable inline editing and rich toolbar visibility --- */
.inline-rich-toolbar{
  display:none;
}
.editor-node.selected .inline-rich-toolbar,
.editor-node.inline-editing .inline-rich-toolbar,
.editor-node:focus-within .inline-rich-toolbar,
.inline-rich-toolbar.active{
  display:flex;
}
.editor-node.inline-editing{
  outline:1px solid rgba(46,163,242,.35);
  border-radius:14px;
}
[contenteditable="true"]{
  outline:none;
}
.inline-rich-surface:focus,
.inline-title:focus,
.inline-eyebrow:focus,
.image-inline-caption:focus{
  outline:1px dashed rgba(46,163,242,.45);
  border-radius:8px;
}


/* --- Visible expand controls for collapsed panels --- */
.mini-expand-chip{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:34px;
  border-radius:10px;
  border:1px solid rgba(46,163,242,.35);
  background:rgba(46,163,242,.14);
  color:var(--primary-2);
  font-weight:800;
  box-shadow:0 0 0 1px rgba(46,163,242,.12) inset;
}
.mini-expand-chip:hover{
  background:rgba(46,163,242,.22);
}
.panel-collapsed .panel-head-actions .collapse-btn{
  display:none;
}


/* --- Image advanced styling and handle visibility --- */
.image-block img{
  filter:var(--img-filter, none);
  transform:var(--img-transform, none);
}
.image-resize-handle{
  opacity:0;
  pointer-events:none;
}
.editor-node.selected .image-resize-handle,
.editor-node.inline-editing .image-resize-handle,
.image-preview-resizable:hover .image-resize-handle{
  opacity:1;
  pointer-events:auto;
}

.component-properties-panel{
  margin-top:12px;
}
.component-properties-panel .panel-heading{
  font-size:13px;
}


/* --- Compact top page info --- */
.compact-page-head{
  padding:10px 12px;
  margin-bottom:8px;
}
.compact-page-head-grid{
  display:grid;
  grid-template-columns:minmax(280px,1.2fr) repeat(2,minmax(180px,.55fr));
  gap:10px;
  align-items:end;
}
.compact-page-head .field-label{
  font-size:11px;
  margin-bottom:4px;
}
.compact-page-head .input-control{
  min-height:38px;
  padding:8px 10px;
}
@media (max-width: 1100px){
  .compact-page-head-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 760px){.published-pages-grid{grid-template-columns:1fr}}


.app-theme-shell .brand-logo,.app-theme-shell .brand-logo-image{
  background:linear-gradient(180deg,var(--primary),var(--primary-2));
  color:#fff;
}

.app-theme-shell .surface-panel,
.app-theme-shell .surface-card,
.app-theme-shell .surface-page,
.app-theme-shell .hero-card,
.app-theme-shell .published-page-card{
  background:linear-gradient(180deg,var(--card-bg-1, rgba(17,29,48,.96)),var(--card-bg-2, rgba(14,24,40,.96)));
}

.app-theme-shell .nav-item.active{
  color:var(--primary-2);
  border-color:color-mix(in srgb, var(--primary) 26%, transparent);
}

.app-theme-shell .btn-secondary,
.app-theme-shell .icon-btn,
.app-theme-shell .mini-btn,
.app-theme-shell .version-item,
.app-theme-shell .hint-card,
.app-theme-shell .theme-badge,
.app-theme-shell .column-drop,
.app-theme-shell .outline-item.is-column{
  background:color-mix(in srgb, var(--panel) 82%, var(--surface) 18%);
}

.app-theme-shell .page-list-item:hover,
.app-theme-shell .outline-item:hover,
.app-theme-shell .theme-card:hover,
.app-theme-shell .file-row:hover{
  background:color-mix(in srgb, var(--surface) 90%, transparent);
}

.app-theme-shell .input-control,
.app-theme-shell textarea,
.app-theme-shell select{
  background:var(--input-bg, var(--surface));
}

.app-theme-shell[data-theme-id='sysimple-light'],
.app-theme-shell[style*='--main-bg:#f3f7fb']{
  color-scheme:light;
}


/* --- Final theme system: 3 distinct presets --- */
.app-theme-shell .surface-panel,
.app-theme-shell .surface-card,
.app-theme-shell .surface-page,
.app-theme-shell .hero-card,
.app-theme-shell .published-page-card,
.app-theme-shell .files-left,
.app-theme-shell .files-right,
.app-theme-shell .builder-left,
.app-theme-shell .builder-toolbox,
.app-theme-shell .builder-right,
.app-theme-shell .builder-page-head{
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow);
}

.app-theme-shell .input-control,
.app-theme-shell textarea,
.app-theme-shell select,
.app-theme-shell .topbar-theme-select{
  color:var(--text);
  border-color:var(--border-soft);
}

.app-theme-shell .topbar-theme-picker span,
.app-theme-shell .field-label,
.app-theme-shell .panel-heading,
.app-theme-shell .selector-label,
.app-theme-shell .page-meta,
.app-theme-shell .metric-label,
.app-theme-shell .table-header,
.app-theme-shell .preview-theme-title,
.app-theme-shell .section-meta,
.app-theme-shell .brand-subtitle,
.app-theme-shell .builder-subtext,
.app-theme-shell .drop-slot-label,
.app-theme-shell .theme-card-desc{
  color:var(--text-dim);
}

.app-theme-shell .hero-copy,
.app-theme-shell .surface-card p,
.app-theme-shell .file-row,
.app-theme-shell .library-item,
.app-theme-shell .tree-node,
.app-theme-shell .page-list-item,
.app-theme-shell .hint-card,
.app-theme-shell .inline-rich-surface,
.app-theme-shell .prose-render,
.app-theme-shell .public-site-tagline,
.app-theme-shell .public-site-meta,
.app-theme-shell .theme-badge span{
  color:var(--text-soft);
}

.app-theme-shell .page-name,
.app-theme-shell .file-name,
.app-theme-shell .surface-card h3,
.app-theme-shell .brand-title,
.app-theme-shell .selector-value,
.app-theme-shell .theme-badge strong,
.app-theme-shell .node-caption,
.app-theme-shell .inline-title,
.app-theme-shell .section-title,
.app-theme-shell .callout-head,
.app-theme-shell .directory-name,
.app-theme-shell .link-title,
.app-theme-shell .public-site-name,
.app-theme-shell .metric-value{
  color:var(--text);
}

.app-theme-shell[data-theme-id='sysimple-dark'] .app-main{
  background:
    radial-gradient(circle at top right, rgba(73,194,255,.13), transparent 26%),
    linear-gradient(180deg,#081423 0%,#0c192a 100%);
}
.app-theme-shell[data-theme-id='sysimple-dark'] .app-topbar{
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
.app-theme-shell[data-theme-id='sysimple-dark'] .surface-panel,
.app-theme-shell[data-theme-id='sysimple-dark'] .surface-card,
.app-theme-shell[data-theme-id='sysimple-dark'] .surface-page,
.app-theme-shell[data-theme-id='sysimple-dark'] .hero-card,
.app-theme-shell[data-theme-id='sysimple-dark'] .published-page-card{
  background:linear-gradient(180deg,#0d1b2d 0%,#122742 100%);
}
.app-theme-shell[data-theme-id='sysimple-dark'] .table-header{
  background:#0f2137;
}
.app-theme-shell[data-theme-id='sysimple-dark'] .canvas-stage{
  background:
    linear-gradient(rgba(31,68,108,.36) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,68,108,.36) 1px, transparent 1px),
    linear-gradient(180deg,#081423 0%,#0c192a 100%);
  background-size:24px 24px,24px 24px,auto;
}
.app-theme-shell[data-theme-id='sysimple-dark'] .library-item,
.app-theme-shell[data-theme-id='sysimple-dark'] .tree-node,
.app-theme-shell[data-theme-id='sysimple-dark'] .page-list-item,
.app-theme-shell[data-theme-id='sysimple-dark'] .compact-card,
.app-theme-shell[data-theme-id='sysimple-dark'] .palette-card,
.app-theme-shell[data-theme-id='sysimple-dark'] .add-zone-btn,
.app-theme-shell[data-theme-id='sysimple-dark'] .theme-card,
.app-theme-shell[data-theme-id='sysimple-dark'] .outline-item,
.app-theme-shell[data-theme-id='sysimple-dark'] .column-drop,
.app-theme-shell[data-theme-id='sysimple-dark'] .editor-node,
.app-theme-shell[data-theme-id='sysimple-dark'] .hero-inline-editor,
.app-theme-shell[data-theme-id='sysimple-dark'] .rich-inline-editor,
.app-theme-shell[data-theme-id='sysimple-dark'] .directory-row{
  background:color-mix(in srgb, var(--surface) 86%, var(--panel) 14%);
  border-color:var(--border-soft);
}

.app-theme-shell[data-theme-id='sysimple-light']{
  color-scheme:light;
}
.app-theme-shell[data-theme-id='sysimple-light'] .app-topbar{
  background:linear-gradient(180deg,#ffffff 0%,#f7fafe 100%);
  border-bottom:1px solid #dbe5ef;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
}
.app-theme-shell[data-theme-id='sysimple-light'] .app-main{
  background:
    radial-gradient(circle at top right, rgba(54,163,255,.10), transparent 24%),
    linear-gradient(180deg,#f4f7fb 0%,#eef3f8 100%);
}
.app-theme-shell[data-theme-id='sysimple-light'] .surface-panel,
.app-theme-shell[data-theme-id='sysimple-light'] .surface-card,
.app-theme-shell[data-theme-id='sysimple-light'] .surface-page,
.app-theme-shell[data-theme-id='sysimple-light'] .hero-card,
.app-theme-shell[data-theme-id='sysimple-light'] .published-page-card,
.app-theme-shell[data-theme-id='sysimple-light'] .files-left,
.app-theme-shell[data-theme-id='sysimple-light'] .files-right,
.app-theme-shell[data-theme-id='sysimple-light'] .builder-left,
.app-theme-shell[data-theme-id='sysimple-light'] .builder-toolbox,
.app-theme-shell[data-theme-id='sysimple-light'] .builder-right,
.app-theme-shell[data-theme-id='sysimple-light'] .builder-page-head{
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  border-color:#dbe5ef;
  box-shadow:0 10px 28px rgba(15,23,42,.08);
}
.app-theme-shell[data-theme-id='sysimple-light'] .topbar-brand-panel,
.app-theme-shell[data-theme-id='sysimple-light'] .nav-item,
.app-theme-shell[data-theme-id='sysimple-light'] .crumb,
.app-theme-shell[data-theme-id='sysimple-light'] .page-meta,
.app-theme-shell[data-theme-id='sysimple-light'] .selector-label,
.app-theme-shell[data-theme-id='sysimple-light'] .panel-heading,
.app-theme-shell[data-theme-id='sysimple-light'] .field-label,
.app-theme-shell[data-theme-id='sysimple-light'] .metric-label,
.app-theme-shell[data-theme-id='sysimple-light'] .table-header,
.app-theme-shell[data-theme-id='sysimple-light'] .drop-slot-label,
.app-theme-shell[data-theme-id='sysimple-light'] .theme-card-desc,
.app-theme-shell[data-theme-id='sysimple-light'] .preview-theme-title,
.app-theme-shell[data-theme-id='sysimple-light'] .builder-subtext,
.app-theme-shell[data-theme-id='sysimple-light'] .theme-badge span,
.app-theme-shell[data-theme-id='sysimple-light'] .brand-subtitle{
  color:#718198;
}
.app-theme-shell[data-theme-id='sysimple-light'] .brand-title,
.app-theme-shell[data-theme-id='sysimple-light'] .page-name,
.app-theme-shell[data-theme-id='sysimple-light'] .file-name,
.app-theme-shell[data-theme-id='sysimple-light'] .surface-card h3,
.app-theme-shell[data-theme-id='sysimple-light'] .hero-card h1,
.app-theme-shell[data-theme-id='sysimple-light'] .builder-topbar h1,
.app-theme-shell[data-theme-id='sysimple-light'] .files-topbar h1,
.app-theme-shell[data-theme-id='sysimple-light'] .metric-value,
.app-theme-shell[data-theme-id='sysimple-light'] .theme-badge strong,
.app-theme-shell[data-theme-id='sysimple-light'] .selector-value,
.app-theme-shell[data-theme-id='sysimple-light'] .node-caption,
.app-theme-shell[data-theme-id='sysimple-light'] .inline-title,
.app-theme-shell[data-theme-id='sysimple-light'] .section-title,
.app-theme-shell[data-theme-id='sysimple-light'] .callout-head,
.app-theme-shell[data-theme-id='sysimple-light'] .directory-name,
.app-theme-shell[data-theme-id='sysimple-light'] .public-site-name,
.app-theme-shell[data-theme-id='sysimple-light'] .section-title,
.app-theme-shell[data-theme-id='sysimple-light'] .link-title{
  color:#0f172a;
}
.app-theme-shell[data-theme-id='sysimple-light'] .hero-copy,
.app-theme-shell[data-theme-id='sysimple-light'] .surface-card p,
.app-theme-shell[data-theme-id='sysimple-light'] .file-row,
.app-theme-shell[data-theme-id='sysimple-light'] .library-item,
.app-theme-shell[data-theme-id='sysimple-light'] .tree-node,
.app-theme-shell[data-theme-id='sysimple-light'] .page-list-item,
.app-theme-shell[data-theme-id='sysimple-light'] .hint-card,
.app-theme-shell[data-theme-id='sysimple-light'] .inline-rich-surface,
.app-theme-shell[data-theme-id='sysimple-light'] .prose-render,
.app-theme-shell[data-theme-id='sysimple-light'] .public-site-tagline,
.app-theme-shell[data-theme-id='sysimple-light'] .public-site-meta,
.app-theme-shell[data-theme-id='sysimple-light'] .callout-content,
.app-theme-shell[data-theme-id='sysimple-light'] .link-desc,
.app-theme-shell[data-theme-id='sysimple-light'] .link-url,
.app-theme-shell[data-theme-id='sysimple-light'] .directory-path{
  color:#526277;
}
.app-theme-shell[data-theme-id='sysimple-light'] .nav-item:hover,
.app-theme-shell[data-theme-id='sysimple-light'] .crumb:hover{
  color:#0f172a;
  background:#eff5fb;
}
.app-theme-shell[data-theme-id='sysimple-light'] .nav-item.active,
.app-theme-shell[data-theme-id='sysimple-light'] .library-item.active,
.app-theme-shell[data-theme-id='sysimple-light'] .tree-node.selected,
.app-theme-shell[data-theme-id='sysimple-light'] .page-list-item.active,
.app-theme-shell[data-theme-id='sysimple-light'] .outline-item.active,
.app-theme-shell[data-theme-id='sysimple-light'] .theme-card.active{
  background:#eaf3ff;
  color:#156ff0;
  border-color:#bfd6f6;
}
.app-theme-shell[data-theme-id='sysimple-light'] .btn-primary{
  background:linear-gradient(180deg,#1677ff 0%,#105fd5 100%);
  box-shadow:0 8px 18px rgba(21,111,240,.18);
}
.app-theme-shell[data-theme-id='sysimple-light'] .btn-secondary,
.app-theme-shell[data-theme-id='sysimple-light'] .icon-btn,
.app-theme-shell[data-theme-id='sysimple-light'] .mini-btn,
.app-theme-shell[data-theme-id='sysimple-light'] .version-item,
.app-theme-shell[data-theme-id='sysimple-light'] .hint-card,
.app-theme-shell[data-theme-id='sysimple-light'] .theme-badge,
.app-theme-shell[data-theme-id='sysimple-light'] .column-drop,
.app-theme-shell[data-theme-id='sysimple-light'] .outline-item.is-column,
.app-theme-shell[data-theme-id='sysimple-light'] .tag{
  background:#f8fbff;
  border-color:#d7e2ee;
  color:#415266;
}
.app-theme-shell[data-theme-id='sysimple-light'] .library-item,
.app-theme-shell[data-theme-id='sysimple-light'] .tree-node,
.app-theme-shell[data-theme-id='sysimple-light'] .page-list-item,
.app-theme-shell[data-theme-id='sysimple-light'] .compact-card,
.app-theme-shell[data-theme-id='sysimple-light'] .palette-card,
.app-theme-shell[data-theme-id='sysimple-light'] .add-zone-btn,
.app-theme-shell[data-theme-id='sysimple-light'] .theme-card,
.app-theme-shell[data-theme-id='sysimple-light'] .outline-item,
.app-theme-shell[data-theme-id='sysimple-light'] .column-drop,
.app-theme-shell[data-theme-id='sysimple-light'] .editor-node,
.app-theme-shell[data-theme-id='sysimple-light'] .rich-inline-editor,
.app-theme-shell[data-theme-id='sysimple-light'] .directory-row,
.app-theme-shell[data-theme-id='sysimple-light'] .quick-link-card,
.app-theme-shell[data-theme-id='sysimple-light'] .published-page-card,
.app-theme-shell[data-theme-id='sysimple-light'] .theme-manager-card{
  background:#ffffff;
  border:1px solid #d7e2ee;
}
.app-theme-shell[data-theme-id='sysimple-light'] .library-item:hover,
.app-theme-shell[data-theme-id='sysimple-light'] .tree-node:hover,
.app-theme-shell[data-theme-id='sysimple-light'] .page-list-item:hover,
.app-theme-shell[data-theme-id='sysimple-light'] .theme-card:hover,
.app-theme-shell[data-theme-id='sysimple-light'] .outline-item:hover,
.app-theme-shell[data-theme-id='sysimple-light'] .file-row:hover{
  background:#f6f9fc;
}
.app-theme-shell[data-theme-id='sysimple-light'] .input-control,
.app-theme-shell[data-theme-id='sysimple-light'] textarea,
.app-theme-shell[data-theme-id='sysimple-light'] select,
.app-theme-shell[data-theme-id='sysimple-light'] .topbar-theme-select{
  background:#ffffff;
  color:#0f172a;
  border-color:#d7e2ee;
}
.app-theme-shell[data-theme-id='sysimple-light'] input:focus,
.app-theme-shell[data-theme-id='sysimple-light'] textarea:focus,
.app-theme-shell[data-theme-id='sysimple-light'] select:focus{
  border-color:#86b9ff;
  box-shadow:0 0 0 3px rgba(21,111,240,.14);
}
.app-theme-shell[data-theme-id='sysimple-light'] .table-header{
  background:#f3f7fc;
  border-bottom:1px solid #dbe5ef;
}
.app-theme-shell[data-theme-id='sysimple-light'] .file-row{
  border-bottom:1px solid #e7eef5;
}
.app-theme-shell[data-theme-id='sysimple-light'] .canvas-stage{
  background:
    linear-gradient(rgba(214,225,238,.85) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,225,238,.85) 1px, transparent 1px),
    linear-gradient(180deg,#f1f5fa 0%,#f8fbff 100%);
  background-size:24px 24px,24px 24px,auto;
  border-color:#dbe5ef;
}
.app-theme-shell[data-theme-id='sysimple-light'] .theme-preview-shell.preview{
  background:linear-gradient(180deg,#eef3f9 0%,#f8fbff 100%);
}
.app-theme-shell[data-theme-id='sysimple-light'] .editor-node{
  background:rgba(255,255,255,.88);
  border:1px dashed #cbd8e6;
}
.app-theme-shell[data-theme-id='sysimple-light'] .editor-node.selected{
  border-color:#86b9ff;
  box-shadow:0 0 0 1px rgba(21,111,240,.16) inset;
}
.app-theme-shell[data-theme-id='sysimple-light'] .hero-inline-editor,
.app-theme-shell[data-theme-id='sysimple-light'] .rich-inline-editor,
.app-theme-shell[data-theme-id='sysimple-light'] .callout-inline-editor{
  background:#ffffff;
  border:1px solid #d7e2ee;
}
.app-theme-shell[data-theme-id='sysimple-light'] .hero-inline-editor.hero-brand{
  background:linear-gradient(180deg,#eff5ff 0%,#ffffff 100%);
}
.app-theme-shell[data-theme-id='sysimple-light'] .hero-inline-editor.hero-neutral{
  background:linear-gradient(180deg,#ffffff 0%,#f6f9fd 100%);
}
.app-theme-shell[data-theme-id='sysimple-light'] .inline-eyebrow,
.app-theme-shell[data-theme-id='sysimple-light'] .node-label,
.app-theme-shell[data-theme-id='sysimple-light'] .eyebrow{
  color:#156ff0;
}
.app-theme-shell[data-theme-id='sysimple-light'] .drop-slot-line{
  background:rgba(21,111,240,.14);
  border-color:rgba(21,111,240,.18);
}
.app-theme-shell[data-theme-id='sysimple-light'] .drop-slot.drag-over{
  background:rgba(21,111,240,.08);
}
.app-theme-shell[data-theme-id='sysimple-light'] .drop-slot.drag-over .drop-slot-line{
  background:rgba(21,111,240,.45);
  border-color:rgba(21,111,240,.52);
}
.app-theme-shell[data-theme-id='sysimple-light'] .brand-logo-image{
  box-shadow:0 8px 16px rgba(21,111,240,.16);
}
.app-theme-shell[data-theme-id='sysimple-light'] .public-site-header{
  background:#ffffff;
}

.app-theme-shell[data-theme-id='vs-dark']{
  color-scheme:dark;
  font-family:'Segoe UI', Inter, system-ui, sans-serif;
}
.app-theme-shell[data-theme-id='vs-dark'] .app-topbar{
  background:linear-gradient(180deg,#252526 0%,#1e1e1e 100%);
  border-bottom:1px solid #3c3c3c;
}
.app-theme-shell[data-theme-id='vs-dark'] .app-main{
  background:#1e1e1e;
}
.app-theme-shell[data-theme-id='vs-dark'] .surface-panel,
.app-theme-shell[data-theme-id='vs-dark'] .surface-card,
.app-theme-shell[data-theme-id='vs-dark'] .surface-page,
.app-theme-shell[data-theme-id='vs-dark'] .hero-card,
.app-theme-shell[data-theme-id='vs-dark'] .published-page-card,
.app-theme-shell[data-theme-id='vs-dark'] .files-left,
.app-theme-shell[data-theme-id='vs-dark'] .files-right,
.app-theme-shell[data-theme-id='vs-dark'] .builder-left,
.app-theme-shell[data-theme-id='vs-dark'] .builder-toolbox,
.app-theme-shell[data-theme-id='vs-dark'] .builder-right,
.app-theme-shell[data-theme-id='vs-dark'] .builder-page-head,
.app-theme-shell[data-theme-id='vs-dark'] .library-item,
.app-theme-shell[data-theme-id='vs-dark'] .tree-node,
.app-theme-shell[data-theme-id='vs-dark'] .page-list-item,
.app-theme-shell[data-theme-id='vs-dark'] .compact-card,
.app-theme-shell[data-theme-id='vs-dark'] .palette-card,
.app-theme-shell[data-theme-id='vs-dark'] .add-zone-btn,
.app-theme-shell[data-theme-id='vs-dark'] .theme-card,
.app-theme-shell[data-theme-id='vs-dark'] .outline-item,
.app-theme-shell[data-theme-id='vs-dark'] .column-drop,
.app-theme-shell[data-theme-id='vs-dark'] .editor-node,
.app-theme-shell[data-theme-id='vs-dark'] .hero-inline-editor,
.app-theme-shell[data-theme-id='vs-dark'] .rich-inline-editor,
.app-theme-shell[data-theme-id='vs-dark'] .directory-row,
.app-theme-shell[data-theme-id='vs-dark'] .quick-link-card,
.app-theme-shell[data-theme-id='vs-dark'] .theme-manager-card{
  background:#252526;
  border-color:#3c3c3c;
  box-shadow:none;
}
.app-theme-shell[data-theme-id='vs-dark'] .surface-panel,
.app-theme-shell[data-theme-id='vs-dark'] .surface-card,
.app-theme-shell[data-theme-id='vs-dark'] .surface-page,
.app-theme-shell[data-theme-id='vs-dark'] .hero-card,
.app-theme-shell[data-theme-id='vs-dark'] .published-page-card{
  border-radius:8px;
}
.app-theme-shell[data-theme-id='vs-dark'] .btn,
.app-theme-shell[data-theme-id='vs-dark'] .icon-btn,
.app-theme-shell[data-theme-id='vs-dark'] .input-control,
.app-theme-shell[data-theme-id='vs-dark'] .topbar-theme-select,
.app-theme-shell[data-theme-id='vs-dark'] .library-item,
.app-theme-shell[data-theme-id='vs-dark'] .tree-node,
.app-theme-shell[data-theme-id='vs-dark'] .page-list-item,
.app-theme-shell[data-theme-id='vs-dark'] .palette-card,
.app-theme-shell[data-theme-id='vs-dark'] .compact-card,
.app-theme-shell[data-theme-id='vs-dark'] .theme-card,
.app-theme-shell[data-theme-id='vs-dark'] .status-chip,
.app-theme-shell[data-theme-id='vs-dark'] .tag{
  border-radius:6px;
}
.app-theme-shell[data-theme-id='vs-dark'] .btn-primary{
  background:#0e639c;
}
.app-theme-shell[data-theme-id='vs-dark'] .btn-secondary,
.app-theme-shell[data-theme-id='vs-dark'] .icon-btn,
.app-theme-shell[data-theme-id='vs-dark'] .mini-btn,
.app-theme-shell[data-theme-id='vs-dark'] .version-item,
.app-theme-shell[data-theme-id='vs-dark'] .hint-card,
.app-theme-shell[data-theme-id='vs-dark'] .theme-badge,
.app-theme-shell[data-theme-id='vs-dark'] .column-drop,
.app-theme-shell[data-theme-id='vs-dark'] .outline-item.is-column,
.app-theme-shell[data-theme-id='vs-dark'] .tag{
  background:#2d2d30;
  border-color:#3c3c3c;
  color:#d4d4d4;
}
.app-theme-shell[data-theme-id='vs-dark'] .nav-item,
.app-theme-shell[data-theme-id='vs-dark'] .crumb,
.app-theme-shell[data-theme-id='vs-dark'] .field-label,
.app-theme-shell[data-theme-id='vs-dark'] .panel-heading,
.app-theme-shell[data-theme-id='vs-dark'] .metric-label,
.app-theme-shell[data-theme-id='vs-dark'] .table-header,
.app-theme-shell[data-theme-id='vs-dark'] .brand-subtitle,
.app-theme-shell[data-theme-id='vs-dark'] .page-meta,
.app-theme-shell[data-theme-id='vs-dark'] .preview-theme-title,
.app-theme-shell[data-theme-id='vs-dark'] .theme-badge span,
.app-theme-shell[data-theme-id='vs-dark'] .selector-label,
.app-theme-shell[data-theme-id='vs-dark'] .builder-subtext,
.app-theme-shell[data-theme-id='vs-dark'] .drop-slot-label,
.app-theme-shell[data-theme-id='vs-dark'] .theme-card-desc{
  color:#7d8590;
}
.app-theme-shell[data-theme-id='vs-dark'] .brand-title,
.app-theme-shell[data-theme-id='vs-dark'] .page-name,
.app-theme-shell[data-theme-id='vs-dark'] .file-name,
.app-theme-shell[data-theme-id='vs-dark'] .surface-card h3,
.app-theme-shell[data-theme-id='vs-dark'] .hero-card h1,
.app-theme-shell[data-theme-id='vs-dark'] .builder-topbar h1,
.app-theme-shell[data-theme-id='vs-dark'] .files-topbar h1,
.app-theme-shell[data-theme-id='vs-dark'] .metric-value,
.app-theme-shell[data-theme-id='vs-dark'] .selector-value,
.app-theme-shell[data-theme-id='vs-dark'] .theme-badge strong,
.app-theme-shell[data-theme-id='vs-dark'] .node-caption,
.app-theme-shell[data-theme-id='vs-dark'] .inline-title,
.app-theme-shell[data-theme-id='vs-dark'] .section-title,
.app-theme-shell[data-theme-id='vs-dark'] .callout-head,
.app-theme-shell[data-theme-id='vs-dark'] .directory-name,
.app-theme-shell[data-theme-id='vs-dark'] .public-site-name,
.app-theme-shell[data-theme-id='vs-dark'] .link-title{
  color:#d4d4d4;
}
.app-theme-shell[data-theme-id='vs-dark'] .hero-copy,
.app-theme-shell[data-theme-id='vs-dark'] .surface-card p,
.app-theme-shell[data-theme-id='vs-dark'] .file-row,
.app-theme-shell[data-theme-id='vs-dark'] .library-item,
.app-theme-shell[data-theme-id='vs-dark'] .tree-node,
.app-theme-shell[data-theme-id='vs-dark'] .page-list-item,
.app-theme-shell[data-theme-id='vs-dark'] .hint-card,
.app-theme-shell[data-theme-id='vs-dark'] .inline-rich-surface,
.app-theme-shell[data-theme-id='vs-dark'] .callout-content,
.app-theme-shell[data-theme-id='vs-dark'] .link-desc,
.app-theme-shell[data-theme-id='vs-dark'] .link-url,
.app-theme-shell[data-theme-id='vs-dark'] .directory-path,
.app-theme-shell[data-theme-id='vs-dark'] .public-site-tagline,
.app-theme-shell[data-theme-id='vs-dark'] .public-site-meta{
  color:#a7adb7;
}
.app-theme-shell[data-theme-id='vs-dark'] .nav-item:hover,
.app-theme-shell[data-theme-id='vs-dark'] .library-item:hover,
.app-theme-shell[data-theme-id='vs-dark'] .tree-node:hover,
.app-theme-shell[data-theme-id='vs-dark'] .page-list-item:hover,
.app-theme-shell[data-theme-id='vs-dark'] .theme-card:hover,
.app-theme-shell[data-theme-id='vs-dark'] .file-row:hover{
  background:#2a2d2e;
}
.app-theme-shell[data-theme-id='vs-dark'] .nav-item.active,
.app-theme-shell[data-theme-id='vs-dark'] .library-item.active,
.app-theme-shell[data-theme-id='vs-dark'] .tree-node.selected,
.app-theme-shell[data-theme-id='vs-dark'] .page-list-item.active,
.app-theme-shell[data-theme-id='vs-dark'] .theme-card.active,
.app-theme-shell[data-theme-id='vs-dark'] .outline-item.active{
  background:rgba(14,99,156,.18);
  color:#9cdcfe;
  border-color:#0e639c;
}
.app-theme-shell[data-theme-id='vs-dark'] .input-control,
.app-theme-shell[data-theme-id='vs-dark'] textarea,
.app-theme-shell[data-theme-id='vs-dark'] select,
.app-theme-shell[data-theme-id='vs-dark'] .topbar-theme-select{
  background:#1f1f1f;
  color:#d4d4d4;
  border-color:#3c3c3c;
  box-shadow:none;
}
.app-theme-shell[data-theme-id='vs-dark'] input:focus,
.app-theme-shell[data-theme-id='vs-dark'] textarea:focus,
.app-theme-shell[data-theme-id='vs-dark'] select:focus{
  border-color:#3794ff;
  box-shadow:0 0 0 1px #3794ff inset;
}
.app-theme-shell[data-theme-id='vs-dark'] .table-header{
  background:#252526;
  border-bottom:1px solid #3c3c3c;
}
.app-theme-shell[data-theme-id='vs-dark'] .file-row{
  border-bottom:1px solid #333337;
}
.app-theme-shell[data-theme-id='vs-dark'] .canvas-stage,
.app-theme-shell[data-theme-id='vs-dark'] .theme-preview-shell.preview{
  background:
    linear-gradient(rgba(60,60,60,.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60,60,60,.45) 1px, transparent 1px),
    #1e1e1e;
  background-size:20px 20px,20px 20px,auto;
  border-color:#3c3c3c;
}
.app-theme-shell[data-theme-id='vs-dark'] .editor-node{
  background:#252526;
  border:1px dashed #3c3c3c;
}
.app-theme-shell[data-theme-id='vs-dark'] .editor-node.selected{
  border-color:#3794ff;
  box-shadow:0 0 0 1px rgba(55,148,255,.32) inset;
}
.app-theme-shell[data-theme-id='vs-dark'] .hero-inline-editor.hero-brand{
  background:linear-gradient(180deg, rgba(14,99,156,.28), #252526);
}
.app-theme-shell[data-theme-id='vs-dark'] .hero-inline-editor.hero-neutral{
  background:#252526;
}
.app-theme-shell[data-theme-id='vs-dark'] .drop-slot-line{
  background:rgba(55,148,255,.14);
  border-color:rgba(55,148,255,.24);
}
.app-theme-shell[data-theme-id='vs-dark'] .drop-slot.drag-over{
  background:rgba(55,148,255,.10);
}
.app-theme-shell[data-theme-id='vs-dark'] .drop-slot.drag-over .drop-slot-line{
  background:rgba(55,148,255,.48);
  border-color:rgba(55,148,255,.64);
}

.site-theme.theme-sysimple-light .public-site-header,
.site-theme.theme-sysimple-light .quick-link-card,
.site-theme.theme-sysimple-light .directory-row,
.site-theme.theme-sysimple-light .prose-block,
.site-theme.theme-sysimple-light .links-block,
.site-theme.theme-sysimple-light .file-dir-block,
.site-theme.theme-sysimple-light .callout-block{
  box-shadow:0 10px 28px rgba(15,23,42,.08);
}
.site-theme.theme-sysimple-light .hero-neutral{
  box-shadow:inset 0 0 0 1px rgba(215,226,238,.9);
}
.site-theme.theme-vs-dark .public-site-header,
.site-theme.theme-vs-dark .quick-link-card,
.site-theme.theme-vs-dark .directory-row,
.site-theme.theme-vs-dark .prose-block,
.site-theme.theme-vs-dark .links-block,
.site-theme.theme-vs-dark .file-dir-block,
.site-theme.theme-vs-dark .callout-block{
  box-shadow:none;
}


.mode-switch-group{display:flex;gap:8px;margin-right:4px}
.page-runtime-url-row{margin-top:14px;display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:10px;align-items:center}
.runtime-url-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft)}
.runtime-url-input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.public-app-shell{padding:20px;display:flex;flex-direction:column;gap:18px;max-width:1440px;margin:0 auto}
.public-runtime-shell{padding-bottom:24px}
.public-site-meta-wrap{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.public-site-url{font-size:12px;color:var(--text-soft);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.nav-list{display:flex;flex-direction:column;gap:10px}
.nav-list-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--site-border);border-radius:14px;background:var(--site-panel);text-decoration:none;color:inherit}
.nav-list-row:hover{border-color:var(--site-primary);transform:translateY(-1px)}
.nav-list-title{font-weight:700}
.nav-list-desc{margin-top:4px;color:var(--site-text-soft)}
.nav-list-meta{font-size:12px;color:var(--site-text-soft);white-space:nowrap}
.production-mode .preview-theme-header{background:var(--panel-bg)}
@media (max-width: 900px){.page-runtime-url-row{grid-template-columns:1fr;}.public-site-meta-wrap{align-items:flex-start}.nav-list-row{flex-direction:column}}

.clickable-card{cursor:pointer}
.clickable-card:hover{transform:translateY(-1px);border-color:var(--border-strong)}


/* --- Production runtime + light theme refinements --- */
body.public-page-runtime{
  overflow:auto;
  min-height:100%;
}
body.public-page-runtime #app{
  min-height:100vh;
  height:auto;
}
body.public-page-runtime .public-app-shell{
  min-height:100vh;
}
body.public-page-runtime .public-runtime-shell{
  overflow:visible;
}
.public-app-shell.plain-runtime{
  max-width:none;
  padding:0;
}
.public-app-shell.plain-runtime .public-runtime-shell{
  padding:0;
}
.btn-open-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.app-theme-shell[data-theme-id='sysimple-light'] .compact-tool-item{
  background:#ffffff;
  border-color:#d7e2ee;
  color:#233246;
  box-shadow:0 1px 0 rgba(255,255,255,.8), 0 4px 12px rgba(15,23,42,.04);
}
.app-theme-shell[data-theme-id='sysimple-light'] .compact-tool-item:hover{
  background:#f4f8fd;
  border-color:#bfd6f6;
}
.app-theme-shell[data-theme-id='sysimple-light'] .compact-tool-icon{
  color:#156ff0;
}
.app-theme-shell[data-theme-id='sysimple-light'] .collapse-btn,
.app-theme-shell[data-theme-id='sysimple-light'] .panel-collapsed .panel-head-actions .collapse-btn{
  background:#ffffff;
  border:1px solid #cfdceb;
  color:#31445d;
  box-shadow:0 4px 12px rgba(15,23,42,.06);
}
.app-theme-shell[data-theme-id='sysimple-light'] .collapse-btn:hover,
.app-theme-shell[data-theme-id='sysimple-light'] .panel-collapsed .panel-head-actions .collapse-btn:hover{
  background:#eef5ff;
  border-color:#9ec2f6;
  color:#156ff0;
}
.app-theme-shell[data-theme-id='sysimple-light'] .builder-canvas-item,
.app-theme-shell[data-theme-id='sysimple-light'] .page-canvas,
.app-theme-shell[data-theme-id='sysimple-light'] .canvas-stage,
.app-theme-shell[data-theme-id='sysimple-light'] .theme-preview-shell,
.app-theme-shell[data-theme-id='sysimple-light'] .theme-preview-shell.preview,
.app-theme-shell[data-theme-id='sysimple-light'] .builder-canvas-wrap .surface-page{
  background:linear-gradient(180deg,#f4f8fc 0%,#fbfdff 100%);
}
.app-theme-shell[data-theme-id='sysimple-light'] .node-preview .page-block,
.app-theme-shell[data-theme-id='sysimple-light'] .node-preview .file-dir-block,
.app-theme-shell[data-theme-id='sysimple-light'] .node-preview .quick-link-card,
.app-theme-shell[data-theme-id='sysimple-light'] .node-preview .directory-row,
.app-theme-shell[data-theme-id='sysimple-light'] .node-preview .callout-block,
.app-theme-shell[data-theme-id='sysimple-light'] .node-preview .prose-block,
.app-theme-shell[data-theme-id='sysimple-light'] .node-preview .links-block{
  background:#ffffff;
  color:#233246;
  border-color:#d7e2ee;
  box-shadow:0 8px 22px rgba(15,23,42,.05);
}

.page-selection-list{
  display:grid;
  gap:8px;
  margin:8px 0 10px;
}
.page-selection-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border-subtle);
  border-radius:10px;
  background:var(--surface-2);
  cursor:pointer;
}
.page-selection-row input[type="checkbox"]{
  margin-top:2px;
}
.page-selection-main{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.page-selection-title{
  font-weight:600;
  color:var(--text-primary);
}
.page-selection-meta{
  font-size:.82rem;
  color:var(--text-muted);
}


/* Added: video component + directory access link */
.video-block .video-frame {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(15,23,42,.08);
  border: 1px solid var(--border-color, rgba(148,163,184,.28));
}
.video-block.ratio-16\:9 .video-frame { aspect-ratio: 16 / 9; }
.video-block.ratio-4\:3 .video-frame { aspect-ratio: 4 / 3; }
.video-block.ratio-1\:1 .video-frame { aspect-ratio: 1 / 1; }
.video-block iframe,
.video-block video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #000;
}
.video-caption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted-text, #64748b);
}
.directory-row.with-access {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.directory-main {
  min-width: 0;
}
.directory-access-link {
  flex: 0 0 auto;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-color, rgba(148,163,184,.28));
  text-decoration: none;
  color: var(--accent-color, #2563eb);
  background: rgba(255,255,255,.7);
}
.directory-access-link:hover {
  background: rgba(37,99,235,.08);
}


/* Drag handle refinement */
.node-head-hitbox,
.node-head-static{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
}
.node-head-main{
  flex:1;
  min-width:0;
}
.node-drag-handle{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(2,4px);
  gap:3px;
  align-content:center;
  justify-content:center;
  width:28px;
  min-width:28px;
  height:28px;
  margin-top:1px;
  border:1px solid var(--border-soft);
  border-radius:8px;
  background:color-mix(in srgb, var(--panel, #132136) 86%, var(--surface, #12233a) 14%);
  cursor:grab;
}
.node-drag-handle:active{cursor:grabbing}
.node-drag-handle:hover{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent)}
.grip-dot{
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--text-dim);
  display:block;
}
.node-head-hitbox .node-label,
.node-head-static .node-label{margin-bottom:4px}
.node-leaf > .node-preview{margin-top:10px}
.node-hitbox-static.image-editor-shell,
.node-hitbox-static.callout-inline-wrap{cursor:default}
.app-theme-shell[data-theme-id='sysimple-light'] .node-drag-handle,
.app-theme-shell[data-theme-id='clear'] .node-drag-handle,
.app-theme-shell[data-theme-id='clair'] .node-drag-handle,
.app-theme-shell[data-theme-id='sysimple-light'] .hero-inline-editor,
.app-theme-shell[data-theme-id='sysimple-light'] .rich-inline-editor,
.app-theme-shell[data-theme-id='sysimple-light'] .callout-inline-editor{background:#fff}
.app-theme-shell[data-theme-id='sysimple-light'] .grip-dot{background:#64748b}


.toolbox-template-actions { margin: 10px 0 14px; }
.btn-section-template { width: 100%; justify-content: center; }
.template-picker-overlay {
  position: fixed; inset: 0; background: rgba(7, 18, 34, 0.45); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 24px;
}
.template-picker-dialog {
  width: min(1080px, 96vw); max-height: min(80vh, 860px); overflow: auto; padding: 20px; border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.25);
}
.template-picker-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:16px; }
.template-picker-head h3 { margin: 4px 0 6px; }
.template-picker-head p { margin: 0; color: var(--text-soft, #6b7c93); }
.template-picker-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.template-card {
  display:flex; flex-direction:column; gap:10px; text-align:left; border:1px solid var(--border, #d9e3f0); border-radius:16px; background: var(--surface-1, #fff); padding:14px; cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.template-card:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.08); border-color: var(--primary, #2e8fff); }
.template-card-title { font-weight:700; color: var(--text, #1a2740); }
.template-card-desc { font-size:.92rem; color: var(--text-soft, #6b7c93); line-height:1.35; }
.template-mini { display:grid; gap:8px; min-height:120px; padding:12px; border-radius:14px; background: linear-gradient(180deg, rgba(46,143,255,.12), rgba(46,143,255,.04)); border:1px solid rgba(46,143,255,.16); }
.template-mini span { display:block; border-radius:10px; background: rgba(17, 34, 68, .12); }
.template-mini .mini-hero { height:34px; }
.template-mini .mini-col { height:58px; }
.template-mini .mini-col.wide { width:100%; }
.template-mini .mini-col.narrow { width:70%; }
.template-mini .mini-strip { height:20px; width:55%; }
.template-mini .mini-line { height:16px; width:100%; }
.template-mini .mini-line.short { width:74%; }
.template-mini .mini-card { height:36px; }
.template-mini .mini-card.wide { height:52px; }
.template-mini .mini-side { width:34%; height:92px; }
.template-mini .mini-main { width:100%; height:92px; }
.template-mini .mini-side-card { width:72%; height:72px; justify-self:end; }
.template-mini .mini-media { height:72px; }
.template-mini .mini-copy { height:38px; width:78%; }
.preview-landing { grid-template-columns: 1fr 0.9fr; grid-template-areas:'hero hero' 'wide narrow'; }
.preview-landing .mini-hero { grid-area: hero; }
.preview-landing .mini-col.wide { grid-area: wide; }
.preview-landing .mini-col.narrow { grid-area: narrow; }
.preview-news { grid-template-columns:1fr; align-content:start; }
.preview-dashboard { grid-template-columns:1fr 1fr; }
.preview-dashboard .wide { grid-column:1 / -1; }
.preview-directory, .preview-section-links { grid-template-columns:.42fr 1fr; align-items:stretch; }
.preview-section-hero { grid-template-columns:1fr .72fr; align-items:end; }
.preview-section-columns, .preview-section-media { grid-template-columns:1fr 1fr; }
.page-create-actions { display:flex; gap:8px; }
:root[data-theme-id="sysimple-light"] .template-mini,
:root[data-theme-id="clair"] .template-mini { background: linear-gradient(180deg, rgba(46,143,255,.10), rgba(46,143,255,.03)); }

/* Background editors */
.background-settings-card,.page-bg-settings{padding:14px;border:1px solid var(--border-soft);border-radius:14px;background:color-mix(in srgb,var(--panel,#111d30) 88%, transparent)}
.bg-mode-block.is-hidden{display:none}
.bg-preview{margin-top:10px;height:88px;border:1px solid var(--border-soft);border-radius:12px;background:color-mix(in srgb,var(--panel,#111d30) 86%, transparent);background-size:cover;background-position:center;overflow:hidden}
.bg-preview.has-image{box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.bg-image-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
.image-upload-field.compact{padding:10px 12px;font-size:12px}
.input-control-sm{padding:9px 10px;font-size:13px}
.field-label.compact-label{margin:10px 0 6px;font-size:10px}
.directory-upload-panel{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border-soft)}
.directory-upload-hint{margin-top:8px;font-size:12px;color:var(--text-dim);line-height:1.5}
.public-section.has-custom-bg{background-blend-mode:normal}
.page-bg-settings{margin-top:18px}

.app-theme-shell[data-theme-id='sysimple-light'] .background-settings-card,
.app-theme-shell[data-theme-id='sysimple-light'] .page-bg-settings{
  background:#ffffff;
  border-color:#d9e2ec;
  box-shadow:0 8px 22px rgba(15,23,42,.06);
}
.app-theme-shell[data-theme-id='sysimple-light'] .bg-preview{
  background-color:#f8fafc;
  border-color:#d9e2ec;
}
.app-theme-shell[data-theme-id='sysimple-light'] .directory-upload-panel{border-top-color:#d9e2ec}


.page-list-item{display:flex;width:100%;text-align:left;justify-content:flex-start;align-items:flex-start;gap:12px}
.page-list-main{min-width:0}
.page-list-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto}
.page-list-delete{display:grid;place-items:center;padding:0;border:1px solid var(--border);background:transparent;color:var(--text-dim);border-radius:999px;width:22px;height:22px;min-height:22px;font-size:11px;line-height:1;opacity:.82}
.page-list-delete:hover{color:#e11d48;border-color:#f2b8c5;background:rgba(225,29,72,.06);opacity:1}


.app-theme-shell[data-theme-id='sysimple-light'] .page-list-delete{background:#fff;color:#7e8da1;border-color:#d7e2ee}
.app-theme-shell[data-theme-id='sysimple-light'] .page-list-delete:hover{background:#fff1f2;color:#dc2626;border-color:#f3c2c7}
.app-theme-shell[data-theme-id='vs-dark'] .page-list-delete{background:#252526;color:#7d8590;border-color:#3c3c3c}
.app-theme-shell[data-theme-id='vs-dark'] .page-list-delete:hover{background:#3a2328;color:#f48771;border-color:#6b3b44}

body.public-page-runtime{background:#ffffff !important;color:var(--text)}
body.public-page-runtime .public-runtime-shell{min-height:100vh}
body.public-page-runtime .public-page-root{min-height:100vh;border-radius:0;box-shadow:none}
body.public-page-runtime .public-app-shell.plain-runtime .public-page-root{padding:18px 18px 28px}
body.public-page-runtime .public-app-shell.plain-runtime .public-runtime-shell{min-height:100vh}


/* Component frame style options */
.page-block.frame-card,
.quick-link-card.frame-card,
.directory-row.frame-card{
  border-radius:var(--site-radius,18px);
}
.page-block.frame-outline{
  background:transparent !important;
  border:1px solid var(--site-border) !important;
  box-shadow:none !important;
}
.page-block.frame-plain{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.page-block.frame-plain.spacing-sm{padding:12px 0}
.page-block.frame-plain.spacing-md{padding:18px 0}
.page-block.frame-plain.spacing-lg{padding:24px 0}
.page-block.frame-plain .section-title,
.page-block.frame-plain .section-title-row,
.page-block.frame-plain .video-caption,
.page-block.frame-plain figcaption,
.page-block.frame-plain .callout-head,
.page-block.frame-plain .callout-content{padding-left:0;padding-right:0}
.page-block.frame-plain .video-frame,
.page-block.frame-plain .directory-list,
.page-block.frame-plain .quick-links-grid,
.page-block.frame-plain .nav-list,
.page-block.frame-plain .prose-render{margin-top:0}
.page-block.frame-plain .directory-row,
.page-block.frame-plain .quick-link-card{
  background:transparent !important;
  box-shadow:none !important;
}
.page-block.frame-outline .directory-row,
.page-block.frame-outline .quick-link-card{box-shadow:none}
.page-block.frame-plain .quick-link-card,
.page-block.frame-plain .directory-row{padding-left:0;padding-right:0;border-left:none;border-right:none;border-radius:0}
.page-block.frame-outline .quick-link-card,
.page-block.frame-outline .directory-row{border-radius:12px}

/* Compact page list status + delete */
.page-list{display:flex;flex-direction:column;gap:8px}
.page-list-card{position:relative}
.page-list-item{width:100%;text-align:left;padding:12px 14px;min-height:88px;padding-right:92px}
.page-list-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.page-list-overlay{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2}
.page-list-card .status-chip{min-width:auto;padding:5px 10px;font-size:11px;line-height:1}
.page-list-delete{display:grid;place-items:center;padding:0;border:1px solid var(--border);background:transparent;color:var(--text-dim);border-radius:999px;width:22px;height:22px;min-height:22px;font-size:11px;line-height:1;opacity:.82}
.page-list-delete:hover{color:#e11d48;border-color:#f2b8c5;background:rgba(225,29,72,.06);opacity:1}
.page-list-card.active .page-list-delete{border-color:var(--border-strong)}
.page-list-row,.page-list-side,.page-list-delete-inline{all:unset}
.app-theme-shell[data-theme-id='sysimple-light'] .page-list-delete{background:#fff;color:#7e8da1;border-color:#d7e2ee}
.app-theme-shell[data-theme-id='sysimple-light'] .page-list-delete:hover{background:#fff1f2;color:#dc2626;border-color:#f3c2c7}
.app-theme-shell[data-theme-id='vs-dark'] .page-list-delete{background:#252526;color:#7d8590;border-color:#3c3c3c}
.app-theme-shell[data-theme-id='vs-dark'] .page-list-delete:hover{background:#3a2328;color:#f48771;border-color:#6b3b44}


.breadcrumb-block{display:block}
.breadcrumb-block .breadcrumb-items{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.breadcrumb-block .breadcrumb-item{display:inline-flex;align-items:center;gap:10px;min-width:0}
.breadcrumb-block .breadcrumb-link{color:var(--site-accent, var(--brand-500));text-decoration:none;font-weight:600}
.breadcrumb-block .breadcrumb-link:hover{text-decoration:underline}
.breadcrumb-block .breadcrumb-current{color:var(--site-text, var(--text-main));font-weight:700}
.breadcrumb-block .breadcrumb-separator{color:var(--site-text-dim, var(--text-dim));opacity:.8}

.page-header-block{position:relative;overflow:hidden;border:none !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);min-height:var(--header-min-height,320px);background:#12304d;color:#fff}
.page-header-block.height-screen{min-height:100vh}
.page-header-block.flush-to-browser-top{margin-top:calc(-1 * var(--header-top-offset,18px))}
.page-header-block .page-header-overlay{position:absolute;inset:0;background:linear-gradient(135deg, rgba(7,16,28,var(--header-overlay,0.38)), rgba(7,16,28,calc(var(--header-overlay,0.38) + .18)));pointer-events:none}
.page-header-block .page-header-inner{position:relative;z-index:1;min-height:inherit;display:flex;align-items:center;padding:var(--header-pad-top,46px) var(--header-pad-x,32px) var(--header-pad-bottom,46px)}
.page-header-block.content-y-top .page-header-inner{align-items:flex-start}
.page-header-block.content-y-center .page-header-inner{align-items:center}
.page-header-block.content-y-bottom .page-header-inner{align-items:flex-end}
.page-header-block .page-header-content{width:min(var(--header-content-max-width,1180px),100%);margin:0 auto 0 0}
.page-header-block.content-x-left .page-header-content{margin:0 auto 0 0;text-align:left}
.page-header-block.content-x-center .page-header-content{margin:0 auto;text-align:center}
.page-header-block.content-x-right .page-header-content{margin:0 0 0 auto;text-align:right}
.page-header-block.width-full .page-header-content{width:100%;max-width:none}
.page-header-block.width-wide .page-header-content{width:min(var(--header-content-max-width,1440px),100%)}
.page-header-block.width-boxed .page-header-content{width:min(var(--header-content-max-width,1180px),100%)}
.page-header-block.width-narrow .page-header-content{width:min(var(--header-content-max-width,860px),100%)}
.page-header-block.align-center .page-header-content{text-align:center}
.page-header-eyebrow{margin-bottom:12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:700}
.page-header-title{margin:0 0 14px;font-size:clamp(34px,5vw,64px);line-height:1.02;color:#fff}
.page-header-subtitle{margin:0;max-width:880px;font-size:clamp(15px,1.6vw,22px);line-height:1.55;color:rgba(255,255,255,.86)}
.page-header-block.content-x-center .page-header-subtitle,.page-header-block.align-center .page-header-subtitle{margin-left:auto;margin-right:auto}
.page-header-block.content-x-right .page-header-subtitle{margin-left:auto}
.node-preview .page-header-block{min-height:220px}
.node-preview .page-header-block .page-header-inner{padding:max(18px, calc(var(--header-pad-top,46px) * .7)) max(14px, calc(var(--header-pad-x,32px) * .7)) max(18px, calc(var(--header-pad-bottom,46px) * .7))}
.node-preview .page-header-title{font-size:28px}
.node-preview .page-header-subtitle{font-size:14px}
@media (max-width: 820px){
  .page-header-block .page-header-inner{padding:max(18px, calc(var(--header-pad-top,46px) * .75)) max(16px, calc(var(--header-pad-x,32px) * .65)) max(18px, calc(var(--header-pad-bottom,46px) * .75))}
  .page-header-block.flush-to-browser-top{margin-top:calc(-1 * min(var(--header-top-offset,18px), 18px))}
}
}


/* Files app PRO */
.files-v2-layout{grid-template-columns:300px minmax(640px,1fr) 340px;align-items:start}
.files-topbar-pro{gap:18px;flex-wrap:wrap}
.files-top-actions-wrap{align-items:center;flex-wrap:wrap}
.files-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.files-stat-card{padding:18px}
.files-stat-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:10px}
.files-stat-value{font-size:30px;font-weight:800;color:var(--text)}
.files-stat-meta{font-size:13px;color:var(--text-soft);margin-top:6px}
.files-stat-card-accent{background:linear-gradient(180deg,color-mix(in srgb, var(--primary) 20%, var(--card-bg-1, rgba(17,29,48,.96))),var(--card-bg-2, rgba(14,24,40,.96)))}
.files-pane{min-height:0}
.files-pane-left,.files-details-pane{position:sticky;top:18px}
.files-center-column{display:flex;flex-direction:column;gap:18px;min-width:0}
.library-item-main{display:flex;align-items:center;gap:10px;min-width:0}
.library-item-meta{margin-left:auto;color:var(--text-dim);font-size:12px}
.library-color-dot{width:10px;height:10px;border-radius:999px;background:var(--library-color,#0d6dd9);box-shadow:0 0 0 4px color-mix(in srgb, var(--library-color,#0d6dd9) 18%, transparent)}
.tree-node-ico,.quick-access-icon,.details-preview-icon,.file-card-icon,.file-ico svg{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}
.tree-node-ico svg,.quick-access-icon svg,.details-preview-icon svg,.file-card-icon svg{width:18px;height:18px;display:block}
.quick-access-list{display:flex;flex-direction:column;gap:8px}
.quick-access-item,.mini-list-item{width:100%;display:flex;gap:10px;align-items:center;border:1px solid var(--border-soft);background:color-mix(in srgb, var(--surface, #101b2d) 88%, var(--panel, #0d1728) 12%);color:var(--text);padding:10px 12px;text-align:left}
.quick-access-copy{display:flex;flex-direction:column;min-width:0}
.quick-access-copy strong,.mini-list-item span{font-size:13px}
.quick-access-copy small,.mini-list-item small{color:var(--text-dim);font-size:11px}
.files-tree-scroll{padding-right:4px}
.files-command-bar{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.files-view-switch{display:flex;gap:8px}
.files-view-switch .icon-btn.active{border-color:rgba(0,122,204,.28);background:var(--primary-soft);color:var(--primary-2)}
.files-explorer-filters-pro{grid-template-columns:minmax(260px,1fr) 220px}
.files-scope-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.files-panel-headline{margin-bottom:14px}
.files-inline-actions{display:flex;gap:8px}
.files-table-header-extended,.files-item-row{grid-template-columns:2.2fr .9fr 1.2fr 1fr 1fr .7fr}
.files-item-row{cursor:pointer;transition:.15s ease}
.files-item-row.selected{background:color-mix(in srgb, var(--primary) 10%, transparent)}
.files-item-row .file-ico.folder{color:#eab308}
.file-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;padding:4px}
.file-card{border:1px solid var(--border-soft);background:color-mix(in srgb, var(--surface, #101b2d) 88%, var(--panel, #0d1728) 12%);padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;color:var(--text);text-align:left;min-height:180px}
.file-card.selected{border-color:rgba(0,122,204,.28);background:var(--primary-soft)}
.file-card-title{font-weight:700;line-height:1.35}
.file-card-meta,.file-card-path{font-size:12px;color:var(--text-dim)}
.file-card-icon{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb, var(--panel,#0f192b) 80%, transparent);color:var(--primary-2);display:grid;place-items:center}
.file-card-icon.folder{color:#eab308}
.files-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.files-bottom-card{padding:18px}
.mini-list{display:flex;flex-direction:column;gap:8px}
.compatibility-list{display:flex;flex-direction:column;gap:10px}
.compatibility-item{display:grid;gap:4px;padding:12px;border:1px solid var(--border-soft);background:color-mix(in srgb, var(--surface, #101b2d) 88%, var(--panel, #0d1728) 12%)}
.compatibility-item strong{font-size:13px}
.compatibility-item span{font-size:12px;color:var(--text-dim)}
.files-details-pane{display:flex;flex-direction:column;gap:14px}
.details-preview-card{border:1px solid var(--border-soft);background:color-mix(in srgb, var(--surface, #101b2d) 88%, var(--panel, #0d1728) 12%);padding:18px;display:grid;justify-items:start;gap:8px}
.details-preview-card.folder .details-preview-icon{color:#eab308}
.details-preview-icon{width:48px;height:48px;border-radius:14px;background:color-mix(in srgb, var(--panel,#0f192b) 82%, transparent);display:grid;place-items:center;color:var(--primary-2)}
.details-preview-icon svg{width:22px;height:22px}
.details-preview-title{font-size:18px;font-weight:800;line-height:1.2}
.details-preview-subtitle{font-size:12px;color:var(--text-dim)}
.files-detail-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.detail-tab{border:1px solid var(--border-soft);background:transparent;color:var(--text-soft);padding:10px 8px}
.detail-tab.active{background:var(--primary-soft);color:var(--primary-2);border-color:rgba(0,122,204,.28)}
.files-detail-body{display:flex;flex-direction:column;gap:12px}
.details-grid{display:grid;gap:10px}
.details-grid.with-space{margin-top:12px}
.details-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border-soft);background:color-mix(in srgb, var(--surface, #101b2d) 88%, var(--panel, #0d1728) 12%)}
.details-row span{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}
.details-row strong{font-size:13px;color:var(--text);text-align:right}
.share-tag-list,.meta-chips{display:flex;flex-wrap:wrap;gap:8px}
.share-tag{background:color-mix(in srgb, var(--primary) 12%, transparent);border-color:color-mix(in srgb, var(--primary) 28%, transparent);color:var(--primary-2)}
.timeline-item{display:grid;grid-template-columns:16px 1fr;gap:12px;align-items:start}
.timeline-dot{width:10px;height:10px;border-radius:999px;background:var(--primary);margin-top:6px;box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent)}
.timeline-title,.activity-title{font-weight:700;font-size:13px}
.timeline-meta,.timeline-copy,.activity-meta,.details-section-copy{font-size:12px;color:var(--text-dim);line-height:1.55}
.activity-row{padding:12px;border:1px solid var(--border-soft);background:color-mix(in srgb, var(--surface, #101b2d) 88%, var(--panel, #0d1728) 12%);display:grid;gap:5px}

@media (max-width: 1400px){
  .files-v2-layout{grid-template-columns:280px minmax(560px,1fr) 320px}
  .files-stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 1180px){
  .files-v2-layout,.files-bottom-grid,.files-stats-grid,.files-detail-tabs{grid-template-columns:1fr}
  .files-pane-left,.files-details-pane{position:static}
}


/* Files UX refinements */
.surface-panel,.surface-card,.surface-page,.hero-card,.metric-card,.file-card,.file-row,.tree-node,.library-item,.details-preview-card{border-radius:6px}
.files-shell-pro .surface-panel{box-shadow:0 14px 34px rgba(3,10,20,.24)}
.files-topbar-pro.surface-panel,.files-bottom-card.surface-panel,.files-pane.surface-panel,.files-explorer-panel.surface-panel{border:1px solid color-mix(in srgb,var(--border) 76%, rgba(255,255,255,.04));background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 94%, white 2%),color-mix(in srgb,var(--surface) 92%, black 2%))}
.drop-hint{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:color-mix(in srgb,var(--primary) 12%, transparent);color:var(--text-soft);font-size:12px}
.file-drag-source[draggable='true']{cursor:grab}
.file-drag-source.drag-source{opacity:.46;transform:scale(.992)}
.file-drop-target,.files-current-drop-target,.files-drop-surface,.tree-drop-target{transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease}
.file-drop-target.drag-over,.files-current-drop-target.drag-over,.files-drop-surface.drag-over,.tree-drop-target.drag-over{background:color-mix(in srgb,var(--primary) 12%, transparent)!important;border-color:color-mix(in srgb,var(--primary) 54%, transparent)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 16%, transparent) inset}
.files-drop-surface{border-radius:10px}
.files-current-drop-target{position:relative}
.files-current-drop-target::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px dashed transparent;transition:border-color .16s ease}
.files-current-drop-target.drag-over::after{border-color:color-mix(in srgb,var(--primary) 55%, transparent)}
.file-card,.file-row{user-select:none}


.files-topbar-compact{padding:12px 16px;align-items:center;gap:12px}
.files-topbar-copy{display:flex;flex-direction:column;gap:2px}
.files-topbar-compact .eyebrow{margin-bottom:0;font-size:11px}
.files-topbar-compact h1{margin:0;font-size:24px;line-height:1.1}
.files-topbar-compact .builder-subtext{display:none}
.files-top-actions-compact{gap:10px;flex-wrap:wrap}
.files-top-actions-compact .btn{padding:10px 14px;min-height:auto}
.files-shell-pro .files-stats-grid{margin-top:12px}
.files-tree-scroll{max-height:none}
.mini-list-compact{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow:auto;padding-right:4px}
.mini-list-compact .mini-list-item{padding:10px 12px}
.files-pane-left{gap:0}
.files-pane-left .panel-heading.with-space{margin-top:18px}
@media (max-width: 1280px){.files-topbar-compact h1{font-size:22px}}


.files-details-pane .mini-list-compact{
  margin-bottom:6px;
  max-height:200px;
}
.files-details-pane .panel-heading.with-space.between{
  margin-top:18px;
}


/* Improve spacing for panel titles */
.panel-heading,
.files-panel-headline{
  padding:8px 4px 12px 4px;
  margin-bottom:8px;
}

.files-details-pane .panel-heading{
  padding:10px 6px 12px 6px;
}

/* Add inner spacing so titles are not glued to borders */
.surface-panel{
  padding-top:14px;
}

.files-explorer-panel .panel-heading{
  padding-left:8px;
  padding-right:8px;
}

/* Slight breathing room for right panel sections */
.files-details-pane{
  padding-top:12px;
}



/* Rebalance: less vertical, more horizontal breathing */
.panel-heading,
.files-panel-headline{
  padding:4px 12px 6px 12px;   /* less height, more horizontal */
  margin-bottom:6px;
}

/* Main content title */
.files-explorer-panel .panel-heading{
  padding:4px 14px 8px 14px;
}

/* Right panel sections */
.files-details-pane .panel-heading{
  padding:4px 14px 8px 14px;
}

/* Remove excessive top padding from panels */
.surface-panel{
  padding-top:8px;
}

/* Tighten vertical stacking globally */
.files-right,
.files-center-column{
  gap:12px;
}

/* Improve left/right spacing inside panels */
.files-pane,
.files-explorer-panel,
.files-details-pane{
  padding-left:14px;
  padding-right:14px;
}

/* Slightly reduce empty space in empty states */
.empty-inline,
.empty-state{
  padding:14px;
}



/* Direct drag & drop inside folder content */
.file-row-folder .file-main,
.file-card-main{
  cursor:pointer;
}

.file-size-cell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.folder-inline-dropzone{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:108px;
  min-height:34px;
  padding:6px 10px;
  border:1px dashed var(--border);
  border-radius:10px;
  color:var(--text-dim);
  background:color-mix(in srgb, var(--panel, #0f192b) 82%, transparent);
  transition:.16s ease;
  user-select:none;
}

.folder-inline-dropzone:hover{
  border-color:rgba(0,122,204,.36);
  color:var(--primary-2);
}

.folder-inline-dropzone.drag-over,
.file-row-folder.drag-over,
.file-card-folder.drag-over .folder-inline-dropzone{
  border-color:rgba(0,122,204,.55);
  background:var(--primary-soft);
  color:var(--primary-2);
}

.file-card{
  position:relative;
}

.file-card-main{
  border:none;
  background:transparent;
  padding:0;
  width:100%;
  color:inherit;
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}

.file-card-folder{
  border:1px solid var(--border-soft);
  background:color-mix(in srgb, var(--surface, #101b2d) 88%, var(--panel, #0d1728) 12%);
  padding:16px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  color:var(--text);
  text-align:left;
  min-height:180px;
}

.file-card-folder.selected{
  border-color:rgba(0,122,204,.28);
  background:var(--primary-soft);
}

.file-card-folder .folder-inline-dropzone{
  width:100%;
  min-height:40px;
}

.file-row-folder.drag-over{
  box-shadow:inset 0 0 0 1px rgba(0,122,204,.35);
}


/* Selection, rename and download actions */
.files-top-actions-compact .btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.files-top-actions-compact .btn svg,
.inline-rename-trigger svg{
  width:16px;
  height:16px;
}

.file-main{
  display:grid;
  grid-template-columns:24px 20px minmax(0,1fr);
  align-items:flex-start;
  gap:10px;
}

.select-cell{
  padding-top:2px;
}

.item-select-checkbox{
  width:16px;
  height:16px;
  accent-color: var(--primary);
  cursor:pointer;
}

.file-copy{
  min-width:0;
}

.file-name-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.file-name-row .file-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.inline-rename-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.inline-rename-input{
  min-width:0;
  width:100%;
  height:34px;
  border-radius:10px;
  padding:0 10px;
  background:var(--input-bg, #0c1525);
  border:1px solid var(--border);
  color:var(--text);
}

.inline-rename-trigger{
  width:28px;
  height:28px;
  min-width:28px;
}

.file-card-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.card-inline-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

.card-rename-wrap{
  width:100%;
}

.file-card-main{
  width:100%;
}

.file-card .item-select-checkbox{
  margin:0;
}

.file-card-title{
  width:100%;
}

.files-inline-actions{
  align-items:center;
}

.files-inline-actions .icon-btn svg{
  width:16px;
  height:16px;
}

.file-row .file-copy[data-open-folder="true"],
.file-card-main[data-open-folder="true"]{
  cursor:pointer;
}

.quick-access-copy small{
  line-height:1.35;
}

.mini-list-item{
  text-align:left;
}

.file-size-cell{
  align-items:center;
}

.file-row.selected,
.file-card.selected{
  box-shadow:inset 0 0 0 1px rgba(0,122,204,.28);
}

.files-table-header-extended,
.files-item-row{
  grid-template-columns:2.5fr .8fr 1.1fr .95fr .95fr 1.15fr;
}



/* compact top download and delete buttons */
.btn-download-compact{
  padding:8px 12px !important;
  min-height:36px;
}

.files-top-actions-compact .btn svg{
  width:16px;
  height:16px;
}

.files-top-actions-compact .btn-download-compact span{
  display:inline;
}

/* library can be drop target */
.library-item[data-drop-library-id]{
  position:relative;
}

/* list actions */
.inline-delete-trigger{
  margin-left:8px;
}

.icon-btn.danger{
  color:var(--danger);
}

.icon-btn.danger:hover{
  background:var(--danger-soft);
  border-color:color-mix(in srgb, var(--danger) 25%, transparent);
}

/* grid improvements */
.file-card-grid{
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}

.file-card,
.file-card-folder{
  min-height:240px;
}

.file-card-header-horizontal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.file-card-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

.file-card-main{
  gap:12px;
}

.file-card-title{
  font-weight:700;
  line-height:1.35;
}

.file-thumb{
  width:100%;
  height:132px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--border-soft);
  background:color-mix(in srgb, var(--panel,#0f192b) 78%, transparent);
}

.file-card-icon{
  width:100%;
  height:132px;
  border-radius:12px;
}

.file-card-icon svg{
  width:28px;
  height:28px;
}

.folder-inline-dropzone{
  margin-top:auto;
}

.file-main{
  grid-template-columns:24px 20px minmax(0,1fr) 28px;
}

.file-copy{
  cursor:default;
}

/* improve grid card density */
.card-inline-actions .icon-btn,
.file-card-actions .icon-btn{
  width:28px;
  height:28px;
  min-width:28px;
}

/* selection & delete multi button visual */
.files-top-actions-compact .btn[data-action="delete-selected"]{
  color:var(--danger);
  border-color:color-mix(in srgb, var(--danger) 26%, var(--border-soft));
  background:color-mix(in srgb, var(--danger-soft) 55%, transparent);
}


.file-thumb.panel{
  width:100%;
  height:180px;
}

.file-thumb-generic{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  padding:14px;
  color:#fff;
  overflow:hidden;
}

.file-thumb-generic .file-thumb-badge{
  display:inline-flex;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  margin-bottom:10px;
}

.file-thumb-generic .file-thumb-title{
  font-weight:700;
  line-height:1.35;
  margin-bottom:10px;
  max-width:100%;
  word-break:break-word;
}

.file-thumb-generic .file-thumb-lines{
  display:flex;
  flex-direction:column;
  gap:7px;
  width:100%;
}

.file-thumb-generic .file-thumb-lines span{
  display:block;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  text-indent:-9999px;
}

.file-thumb-generic.pdf{background:linear-gradient(135deg,#d9485f,#8b1e3f)}
.file-thumb-generic.doc{background:linear-gradient(135deg,#2f6df3,#1d3f8e)}
.file-thumb-generic.sheet{background:linear-gradient(135deg,#16a34a,#0f5f2f)}
.file-thumb-generic.file{background:linear-gradient(135deg,#64748b,#334155)}

.details-preview-media{
  width:100%;
  margin-bottom:12px;
}


/* Neutralize top header background */
.app-topbar{
  background:#ffffff !important;
  border-bottom:1px solid color-mix(in srgb, var(--border-soft) 72%, #dbe5f1 28%) !important;
}

.topbar-theme-picker,
.topbar-brand-panel .brand-subtitle,
.top-nav .nav-item{
  color:#4b5b73 !important;
}

.topbar-brand-panel .brand-title{
  color:#162235 !important;
}

.top-nav .nav-item:hover{
  background:#f3f7fc !important;
  color:#1f3f72 !important;
}

.top-nav .nav-item.active{
  background:#eef4ff !important;
  color:#2563eb !important;
  border-color:#cfe0ff !important;
}

.topbar-theme-select{
  background:#ffffff !important;
  color:#162235 !important;
  border-color:#d8e2ee !important;
  box-shadow:none !important;
}


/* Global neutral top shell for files, design, builder and home */
.app-shell.top-shell.app-theme-shell{
  --topbar-bg:#ffffff !important;
  --topbar-bg-2:#ffffff !important;
}

.app-shell.top-shell .app-topbar,
.app-shell.top-shell .topbar,
.app-shell.top-shell header.app-topbar{
  background:#ffffff !important;
  background-image:none !important;
  box-shadow:none !important;
  border-bottom:1px solid #d9e3ef !important;
}

.app-shell.top-shell .topbar-brand,
.app-shell.top-shell .topbar-brand-panel,
.app-shell.top-shell .top-nav,
.app-shell.top-shell .topbar-tools{
  background:transparent !important;
}

.app-shell.top-shell .topbar-brand-panel .brand-title,
.app-shell.top-shell .top-nav .nav-item,
.app-shell.top-shell .topbar-theme-picker,
.app-shell.top-shell .topbar-theme-picker span{
  color:#4b5b73 !important;
}

.app-shell.top-shell .topbar-brand-panel .brand-subtitle{
  color:#7a8ca5 !important;
}

.app-shell.top-shell .top-nav .nav-item:hover{
  background:#f3f7fc !important;
  color:#1f3f72 !important;
}

.app-shell.top-shell .top-nav .nav-item.active{
  background:#eef4ff !important;
  color:#2563eb !important;
  border-color:#cfe0ff !important;
}

.app-shell.top-shell .topbar-theme-select{
  background:#ffffff !important;
  color:#162235 !important;
  border-color:#d8e2ee !important;
}

.app-shell.top-shell .topbar-brand-panel{
  box-shadow:none !important;
}

/* Page width governs its section containers in editor and published rendering. */
.public-page-body, .editor-root, .public-section { box-sizing:border-box; min-width:0; }
.public-page-body > .public-section { width:100%; }
.public-page-body[data-page-layout="full"] > .public-section { max-width:none; margin-inline:0; }
.public-page-body[data-page-layout="boxed"] > .public-section { max-width:100%; }
.editor-root > .editor-node { width:100%; max-width:100%; box-sizing:border-box; }
.public-columns, .public-column { min-width:0; }

.public-tabs { min-width:0; border:1px solid var(--site-border,var(--border)); }
.public-tabs-items { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); }
.public-tab-choice { display:contents; }
.public-tab-choice > input { position:absolute; opacity:0; width:1px; height:1px; }
.public-tab-choice > span { grid-row:1; padding:12px; cursor:pointer; border-bottom:2px solid transparent; }
.public-tab-choice > input:checked + span { color:var(--site-primary); border-color:var(--site-primary); background:var(--site-surface); }
.public-tab-choice > input:focus-visible + span { outline:2px solid var(--site-primary); outline-offset:-2px; }
.public-tab-panel { display:none; grid-column:1/-1; grid-row:2; padding:16px; min-width:0; overflow-wrap:anywhere; }
.public-tab-choice:has(> input:checked) > .public-tab-panel { display:block; }

/* A hero's explicit text colour applies consistently in editing and publication. */
.hero-block[style*="--hero-custom-text"],.hero-inline-editor[style*="--hero-custom-text"],
.hero-block[style*="--hero-custom-text"] h1,.hero-block[style*="--hero-custom-text"] p,.hero-block[style*="--hero-custom-text"] .hero-eyebrow,
.hero-inline-editor[style*="--hero-custom-text"] h2,.hero-inline-editor[style*="--hero-custom-text"] p,.hero-inline-editor[style*="--hero-custom-text"] .inline-eyebrow{color:var(--hero-custom-text)!important}
/* Explicit announcement colours take precedence only on customised blocks. */
:is(.callout-block,.callout-inline-editor)[style*="--announcement-background"]{background:var(--announcement-background)!important}
:is(.callout-block,.callout-inline-editor)[style*="--announcement-border"]{border:1px solid var(--announcement-border)!important;border-left-width:4px!important}
:is(.callout-block,.callout-inline-editor)[style*="--announcement-text"],
:is(.callout-block,.callout-inline-editor)[style*="--announcement-text"] :is(.callout-head,.callout-content,h1,h2,h3,p,li,div,a){color:var(--announcement-text)!important}
/* Hero illustration layout shared by the editor and published pages. */
.hero-with-image{display:flex!important;align-items:center;gap:24px;flex-wrap:nowrap}
.hero-with-image>.hero-text-content{flex:1;min-width:0}
.hero-content-image{flex:0 0 var(--hero-image-width,40%);min-width:0}
.hero-content-image img{display:block;width:100%;max-width:100%;background:transparent}
.hero-image-right>.hero-content-image,.hero-image-bottom>.hero-content-image{order:2}
.hero-image-top,.hero-image-bottom{flex-direction:column}
:is(.hero-image-top,.hero-image-bottom)>.hero-content-image{flex-basis:auto;width:var(--hero-image-width,40%)}
:is(.hero-image-top,.hero-image-bottom)>.hero-text-content{width:100%}
@media(max-width:700px){.hero-with-image{flex-direction:column}.hero-with-image>.hero-content-image{flex-basis:auto;width:100%}.hero-content-image img{max-height:320px}}

/* Selected intranet module shortcuts, shared by editor and published page. */
.module-access-buttons { display:flex; flex-wrap:wrap; gap:10px; }
.module-access-buttons .module-access-button { display:inline-flex; align-items:center; justify-content:space-between; gap:16px; min-height:36px; padding:8px 14px; border:1px solid #008548; border-radius:4px; background:#008548; color:#fff; text-decoration:none; font-size:13px; font-weight:600; }
.module-access-buttons .module-access-button:hover { background:#006d3b; border-color:#006d3b; color:#fff; }
.module-access-buttons .module-access-button:focus-visible { outline:3px solid #3c8dbc; outline-offset:3px; }
@media(max-width:600px) { .module-access-buttons .module-access-button { width:100%; } }

/* Module picker uses the application theme; published shortcuts use the page theme. */
.module-choice-list { display:grid; gap:6px; margin:8px 0 12px; }
body .module-choice-list .module-choice-row {
  --module-accent:#3c8dbc;
  display:flex; align-items:center; justify-content:flex-start; gap:10px;
  min-height:40px; margin:0; padding:9px 10px; border:1px solid var(--ux-border,#d9e3ef);
  border-left:3px solid var(--module-accent); border-radius:4px;
  background:var(--ux-surface,#fff); color:var(--ux-text,#263238); cursor:pointer;
  font-size:12px; line-height:1.4; text-align:left;
}
body .module-choice-list .module-choice-row input[type="checkbox"] {
  appearance:auto; flex:0 0 16px; width:16px; height:16px; min-height:0;
  padding:0; margin:0; accent-color:var(--module-accent);
}
body .module-choice-list .module-choice-row span { color:inherit; min-width:0; }
body .module-choice-list .module-choice-row:hover,
body .module-choice-list .module-choice-row:has(input:checked) {
  background:color-mix(in srgb,var(--module-accent) 12%,var(--ux-surface,#fff));
  border-color:var(--module-accent);
}
body .module-choice-list .module-choice-row:focus-within { outline:2px solid var(--module-accent); outline-offset:2px; }
body .module-choice-list [data-module-category="technical"],
.module-access-buttons [data-module-category="technical"] { --module-accent:#9778ca; }
body .module-choice-list [data-module-category="management"],
.module-access-buttons [data-module-category="management"] { --module-accent:#28999c; }
.module-access-buttons { --module-accent:#3c8dbc; }
.module-access-buttons a.module-access-button {
  background:color-mix(in srgb,var(--module-accent) 12%,var(--site-surface,var(--ux-surface,#fff)));
  color:var(--site-text,var(--ux-text,#263238)); border:1px solid var(--site-border,var(--ux-border,#d9e3ef));
  border-left:3px solid var(--module-accent); border-radius:5px;
}
.module-access-buttons a.module-access-button span { color:var(--module-accent); }
.module-access-buttons a.module-access-button:hover { background:#287caf; border-color:#287caf; color:#fff; }
.module-access-buttons a.module-access-button:hover span { color:#fff; }

/* Respect header appearance controls in both editor and publication. */
body .page-header-block .page-header-overlay { background:rgba(7,16,28,var(--header-overlay,0)); }
body .page-header-block .page-header-content :is(.page-header-title,.page-header-subtitle,.page-header-eyebrow) {
  color:var(--header-text-color,#ffffff)!important;
  -webkit-text-fill-color:var(--header-text-color,#ffffff);
}
body .editor-node .page-header-block {
  width:100%; max-width:100%; margin-left:0; margin-right:0;
}

/* Optional page setting: keep the first section flush with intranet navigation. */
body .public-page-root.flush-to-menu { padding-top:0!important; }
body .public-page-root.flush-to-menu > .public-page-body { padding-top:0!important; }
body .public-page-root.flush-to-menu > .public-page-body > .public-section:first-child { padding-top:0!important; margin-top:0; }
body .public-app-shell.plain-runtime:has(> .public-runtime-shell > .flush-to-menu) { gap:0; }
.quick-link-card .navigation-link-action,.nav-list-row .navigation-link-action { display:inline-flex; align-items:center; gap:10px; align-self:flex-start; width:fit-content; padding:8px 12px; margin-top:12px; border:1px solid var(--border,#d9e3ef); border-left:3px solid var(--primary,#3c8dbc); border-radius:4px; background:var(--primary-soft,rgba(60,141,188,.12)); color:inherit; font-size:13px; font-weight:600; }
.quick-link-card:hover .navigation-link-action,.quick-link-card:focus-visible .navigation-link-action,.nav-list-row:hover .navigation-link-action { border-color:var(--primary,#3c8dbc); }
.file-dir-block .directory-row { display:flex; align-items:center; gap:12px; }
.file-dir-block .directory-main { flex:1; min-width:0; }
.file-dir-block .directory-name { overflow-wrap:anywhere; }
.file-dir-block .directory-file-visual { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; flex:0 0 64px; width:64px; height:60px; overflow:hidden; border:1px solid var(--border,#d9e3ef); border-radius:4px; font-size:26px; background:var(--surface-2,#f9fafb); }
.file-dir-block .directory-file-visual small { font-size:10px; color:var(--text-soft,#607d8b); }
.file-dir-block .directory-file-visual img { display:block; width:100%; height:100%; object-fit:contain; }
/* Mirror only the chosen background layer; keep headings and controls readable. */
:is(.public-page-root,.public-section,.page-header-block,.hero-block)[style*="--bank-background-image:"]::before {
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--bank-background-image);background-size:inherit;
  background-position:inherit;background-repeat:inherit;transform:scaleX(-1);border-radius:inherit;
}