/* V4.6.9 UI polish — premium surface differentiation without changing functionality */
:root{
  --surface-canvas: color-mix(in srgb, var(--secondbackground) 88%, var(--background));
  --surface-panel: color-mix(in srgb, var(--background) 84%, var(--secondbackground));
  --surface-panel-2: color-mix(in srgb, var(--background) 72%, var(--secondbackground));
  --surface-soft: color-mix(in srgb, var(--secondbackground) 94%, var(--background));
  --premium-shadow: 0 10px 28px rgba(15,23,42,.045), 0 2px 8px rgba(15,23,42,.03);
  --premium-shadow-lg: 0 18px 46px rgba(15,23,42,.075), 0 4px 14px rgba(15,23,42,.04);
}
html.dark{
  --surface-canvas: color-mix(in srgb, var(--secondbackground) 84%, var(--background));
  --surface-panel: color-mix(in srgb, var(--card) 78%, var(--secondbackground));
  --surface-panel-2: color-mix(in srgb, var(--card) 68%, var(--secondbackground));
  --surface-soft: color-mix(in srgb, var(--secondbackground) 92%, var(--background));
  --premium-shadow: 0 16px 34px rgba(0,0,0,.26), 0 3px 10px rgba(0,0,0,.14);
  --premium-shadow-lg: 0 26px 60px rgba(0,0,0,.34), 0 8px 18px rgba(0,0,0,.18);
}

/* Canvas and major layout surfaces */
html,body,.app-shell{background:var(--surface-canvas)!important}
.main{background:transparent!important}
.sidebar{
  border-right:none!important;
  background:var(--surface-panel)!important;
  box-shadow:0 0 0 rgba(0,0,0,0), 14px 0 36px rgba(15,23,42,.035)!important;
}
html.dark .sidebar{box-shadow:14px 0 36px rgba(0,0,0,.18)!important}

.topbar,
.segment-bar,
.bottom-nav,
.modal-head{
  border:none!important;
}

.topbar{
  background:color-mix(in srgb, var(--surface-panel) 90%, transparent)!important;
  box-shadow:0 10px 28px rgba(15,23,42,.04)!important;
}
html.dark .topbar{box-shadow:0 10px 28px rgba(0,0,0,.18)!important}

.segment-bar{
  background:transparent!important;
}

.bottom-nav{
  background:color-mix(in srgb, var(--surface-panel) 92%, transparent)!important;
  box-shadow:0 -10px 30px rgba(15,23,42,.05)!important;
}
html.dark .bottom-nav{box-shadow:0 -10px 30px rgba(0,0,0,.22)!important}

/* Core content blocks — remove hard borders, separate by subtle surface shifts */
.note-card,
.panel,
.detail-card,
.desktop-composer,
.review-card,
.stream-card,
.metric,
.section-card,
.row,
.resource-preview,
.qa-row,
.result-item,
.comment-item,
.history-item,
.ref-item,
.attachment-card,
.filter-panel,
.menu-panel,
.modal,
.drawer-pane,
.command-item,
.command-input-wrap,
.file-fallback,
.upload-drop-hint,
.attachment-card,
.constellation-stat,
.atlas-stat,
.synapse-kpi,
.synapse-scale-item,
.mobile-menu-sheet .modal-body,
.drawer-pane .editor-input,
.drawer-pane .rich-editor,
.editor-shell.fullscreen .rich-editor{
  border:none!important;
  box-shadow:var(--premium-shadow)!important;
}

.note-card,
.panel,
.detail-card,
.desktop-composer,
.review-card,
.stream-card,
.metric,
.row,
.modal,
.drawer-pane,
.command-item{
  background:var(--surface-panel)!important;
}

.section-card,
.resource-preview,
.qa-row,
.result-item,
.comment-item,
.history-item,
.ref-item,
.filter-panel,
.menu-panel,
.command-input-wrap,
.file-fallback,
.upload-drop-hint,
.attachment-card,
.constellation-stat,
.atlas-stat,
.synapse-kpi,
.synapse-scale-item,
.mobile-menu-sheet .modal-body,
.drawer-pane .editor-input,
.drawer-pane .rich-editor,
.editor-shell.fullscreen .rich-editor{
  background:var(--surface-soft)!important;
}

.modal,
.drawer-pane,
.filter-panel,
.menu-panel{
  box-shadow:var(--premium-shadow-lg)!important;
}

/* Remove divider lines and replace them with spacing / soft surfaces */
.form-row{
  border-bottom:none!important;
  background:var(--surface-soft)!important;
  border-radius:16px!important;
  padding:14px!important;
  margin-bottom:10px!important;
}
.form-row:last-child{margin-bottom:0!important}

.rich-toolbar .tool-sep{display:none!important}

/* Chips, segmented controls, quiet controls */
.segment-chip,
.chip,
.file-inline-badge,
.search-btn .kbd,
.type-switch,
.secondary-btn,
.input,
.select,
.input-tagbox{
  border:none!important;
  background:var(--surface-soft)!important;
}

.segment-chip,
.chip,
.file-inline-badge,
.search-btn .kbd,
.secondary-btn{
  box-shadow:0 1px 0 rgba(255,255,255,.04), 0 8px 20px rgba(15,23,42,.03)!important;
}
html.dark .segment-chip,
html.dark .chip,
html.dark .file-inline-badge,
html.dark .search-btn .kbd,
html.dark .secondary-btn{
  box-shadow:0 8px 20px rgba(0,0,0,.18)!important;
}

.segment-chip.active,
.nav-item.active{
  box-shadow:var(--premium-shadow)!important;
}

.input,
.select,
.input-tagbox,
.command-input-wrap,
.type-switch{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 8px 22px rgba(15,23,42,.025)!important;
}
html.dark .input,
html.dark .select,
html.dark .input-tagbox,
html.dark .command-input-wrap,
html.dark .type-switch{
  box-shadow:0 8px 22px rgba(0,0,0,.16)!important;
}

/* Progress / bars / helper rows */
.review-progress,
.bar-track{
  border:none!important;
  background:color-mix(in srgb, var(--surface-soft) 82%, var(--background))!important;
}

.timeline::before{
  background:color-mix(in srgb, var(--foreground) 8%, transparent)!important;
}

/* Make page sections feel differentiated by tone rather than borders */
.sidebar-section-title,
.detail-title{
  opacity:.88;
}

/* Modal body / overlay polish */
.modal,
.drawer-pane{
  backdrop-filter:saturate(1.05);
}

/* Synapse stage keeps its own visual identity but loses the explicit outline */
.synapse-stage{
  border:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 20px 50px rgba(15,23,42,.08)!important;
}
html.dark .synapse-stage{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 22px 52px rgba(0,0,0,.34)!important;
}

/* Remove hard separator feeling from sticky shells */
.topbar,
.bottom-nav{
  backdrop-filter:blur(18px) saturate(1.06)!important;
}

/* Keep hover feedback premium and soft */
.note-card:hover,
.command-item:hover,
.row:hover,
.attachment-card:hover,
.result-item:hover,
.qa-row:hover{
  transform:translateY(-1px);
  box-shadow:var(--premium-shadow-lg)!important;
}