:root {
  --ws-brand: #2563EB;
  --ws-brand-hover: #1D4ED8;
  --ws-brand-secondary: #06B6D4;
  --ws-brand-accent: #F9735B;
  --ws-bg: #F7F8FA;
  --ws-bg-secondary: #F1F3F6;
  --ws-surface: #FFFFFF;
  --ws-surface-hover: #F1F3F6;
  --ws-surface-active: #E8F0FE;
  --ws-cream: #F1F3F6;
  --ws-cream-deep: #E2E5EA;
  --ws-primary: #2563EB;
  --ws-primary-hover: #1D4ED8;
  --ws-primary-light: #EFF6FF;
  --ws-primary-medium: rgba(37, 99, 235, 0.12);
  --ws-advanced: #7C3AED;
  --ws-advanced-light: #F5F3FF;
  --ws-success: #16A34A;
  --ws-success-light: #F0FDF4;
  --ws-warning: #D97706;
  --ws-warning-light: #FFFBEB;
  --ws-error: #DC2626;
  --ws-error-light: #FEF2F2;
  --ws-info: #2563EB;
  --ws-info-light: #EFF6FF;
  --ws-text: #171A1F;
  --ws-text-secondary: #5F6672;
  --ws-text-tertiary: #9AA1AB;
  --ws-border: #E2E5EA;
  --ws-border-light: #ECEEF2;
  --ws-shadow-sm: 0 1px 2px rgba(23,26,31,.05);
  --ws-shadow-md: 0 4px 12px rgba(23,26,31,.08);
  --ws-shadow-lg: 0 12px 32px rgba(23,26,31,.10);
  --ws-shadow-xl: 0 20px 48px rgba(23,26,31,.14);
  --ws-radius-sm: 4px;
  --ws-radius-md: 6px;
  --ws-radius-lg: 8px;
  --ws-radius-xl: 12px;
  --ws-radius: 6px;
  --ws-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ws-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ws-sidebar-width: 232px;
  --ws-sidebar-collapsed: 64px;
  --ws-topbar-height: 48px;
  --ws-statusbar-height: 28px;
  --ws-context-panel-width: 320px;
  --ws-density-scale: 1;
  --ws-z-sidebar: 100;
  --ws-z-topbar: 90;
  --ws-z-modal: 200;
  --ws-z-toast: 300;
  --ws-z-context-menu: 250;
  --ws-z-palette: 210;
}

html.theme-dark {
  --ws-brand: #60A5FA;
  --ws-brand-hover: #93BBFD;
  --ws-brand-secondary: #22D3EE;
  --ws-brand-accent: #FB923C;
  --ws-bg: #0F1117;
  --ws-bg-secondary: #181B23;
  --ws-surface: #1C1F2B;
  --ws-surface-hover: #252836;
  --ws-surface-active: #1E3A5F;
  --ws-cream: #1C1F2B;
  --ws-cream-deep: #252836;
  --ws-primary: #60A5FA;
  --ws-primary-hover: #93BBFD;
  --ws-primary-light: rgba(96, 165, 250, 0.12);
  --ws-primary-medium: rgba(96, 165, 250, 0.20);
  --ws-advanced: #A78BFA;
  --ws-advanced-light: rgba(167, 139, 250, 0.14);
  --ws-success: #4ADE80;
  --ws-success-light: rgba(74, 222, 128, 0.12);
  --ws-warning: #FBBF24;
  --ws-warning-light: rgba(251, 191, 36, 0.12);
  --ws-error: #F87171;
  --ws-error-light: rgba(248, 113, 113, 0.12);
  --ws-info: #60A5FA;
  --ws-info-light: rgba(96, 165, 250, 0.12);
  --ws-text: #F1F5F9;
  --ws-text-secondary: #94A3B8;
  --ws-text-tertiary: #64748B;
  --ws-border: #2D3348;
  --ws-border-light: #232839;
  --ws-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --ws-shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --ws-shadow-lg: 0 12px 32px rgba(0,0,0,0.4);
  --ws-shadow-xl: 0 20px 48px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --ws-brand: #60A5FA;
    --ws-brand-hover: #93BBFD;
    --ws-brand-secondary: #22D3EE;
    --ws-brand-accent: #FB923C;
    --ws-bg: #0F1117;
    --ws-bg-secondary: #181B23;
    --ws-surface: #1C1F2B;
    --ws-surface-hover: #252836;
    --ws-surface-active: #1E3A5F;
    --ws-cream: #1C1F2B;
    --ws-cream-deep: #252836;
    --ws-primary: #60A5FA;
    --ws-primary-hover: #93BBFD;
    --ws-primary-light: rgba(96, 165, 250, 0.12);
    --ws-primary-medium: rgba(96, 165, 250, 0.20);
    --ws-advanced: #A78BFA;
    --ws-advanced-light: rgba(167, 139, 250, 0.14);
    --ws-success: #4ADE80;
    --ws-success-light: rgba(74, 222, 128, 0.12);
    --ws-warning: #FBBF24;
    --ws-warning-light: rgba(251, 191, 36, 0.12);
    --ws-error: #F87171;
    --ws-error-light: rgba(248, 113, 113, 0.12);
    --ws-info: #60A5FA;
    --ws-info-light: rgba(96, 165, 250, 0.12);
    --ws-text: #F1F5F9;
    --ws-text-secondary: #94A3B8;
    --ws-text-tertiary: #64748B;
    --ws-border: #2D3348;
    --ws-border-light: #232839;
    --ws-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --ws-shadow-md: 0 4px 12px rgba(0,0,0,0.35);
    --ws-shadow-lg: 0 12px 32px rgba(0,0,0,0.4);
    --ws-shadow-xl: 0 20px 48px rgba(0,0,0,0.5);
  }
}

.density-airada {
  --ws-density-scale: 1.2;
}

.density-equilibrada {
  --ws-density-scale: 1;
}

.density-compacta {
  --ws-density-scale: 0.8;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--ws-font);
  color: var(--ws-text);
  background: var(--ws-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  height: 100vh;
}

a { color: var(--ws-primary); text-decoration: none; }
a:hover { color: var(--ws-primary-hover); text-decoration: underline; }

::selection {
  background: var(--ws-primary-medium);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--ws-primary);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--ws-radius-md);
  z-index: 9999;
  font-weight: 500;
}

.skip-link:focus {
  top: 8px;
}

:focus-visible {
  outline: 2px solid var(--ws-primary);
  outline-offset: 2px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Final surface overrides: these rules intentionally sit after the legacy module styles. */
@media(max-width:840px){.ws-flow-layout{grid-template-columns:minmax(0,1fr) 260px}.ws-flow-node{min-width:185px;max-width:220px}}
@media(max-width:700px){.ws-data-toolbar-top{flex-wrap:wrap}.ws-data-name-input{width:min(100%,240px);flex:1}.ws-data-toolbar-context{width:100%;margin-left:0}.ws-data-ribbon-kicker{display:none}.ws-data-ribbon-tabs{overflow-x:auto}.ws-data-ribbon-panel{max-height:120px}.ws-data-tool-group{padding-inline:5px}.ws-data-ribbon-panel>.ws-table-capacity{display:none}.ws-doc-ribbon-panel{max-height:144px!important}.ws-doc-toolbar{margin-inline:-2px!important}.ws-doc-tool{min-width:43px;min-height:44px;padding-inline:3px}.ws-doc-tool-label{max-width:56px;font-size:9px}.ws-doc-font-family{min-width:96px}.ws-doc-font-size{min-width:62px}.ws-flow-layout{grid-template-columns:1fr}.ws-flow-inspector{max-height:390px;border-top:1px solid #cfd4db;border-left:0;order:2}.ws-flow-canvas{min-height:380px;order:1}.ws-flow-toolbar{position:static}.ws-flow-status{font-size:9px}}

/* Tabla: cada pestaña presenta solo sus acciones y evita una cinta cortada. */
.ws-data-ribbon-panel{flex-wrap:wrap;align-content:center;overflow-x:hidden;overflow-y:auto}
.ws-data-tool-group[hidden]{display:none!important}
.ws-data-tool-group-items{flex-wrap:wrap}
@media(max-width:700px){.ws-data-ribbon-panel{overflow-y:auto}}

/* UX final: keep the work surface dense, readable and recoverable at once. */
.ws-doc-ribbon-tabs,
.ws-doc-ribbon-panel,
.ws-query-ribbon-panel {
  scrollbar-width: thin;
  scrollbar-color: var(--ws-border) transparent;
}
.ws-doc-ribbon-tabs { overflow-x: auto; }
.ws-doc-ribbon-panel { max-width: 100%; }
.ws-doc-toolbar { contain: layout paint; }
.ws-doc-tool { white-space: nowrap; }
.ws-data-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ws-data-toolbar > input { flex: 1 1 170px; min-width: 120px; }
.ws-data-toolbar > .ws-btn { white-space: nowrap; }
.ws-data-command { border: 1px solid transparent; }
.ws-data-command:hover, .ws-data-command:focus-visible { border-color: var(--ws-primary); }
.ws-query-studio { gap: 9px; }
.ws-query-studio-header { padding-bottom: 10px; }
.ws-query-title-block h1 { font-size: clamp(25px, 3vw, 34px); }
.ws-query-title-block p { max-width: 620px; font-size: 12px; }
.ws-query-sheetbar { gap: 7px; padding-top: 8px; }
.ws-query-ribbon-panel { max-height: 96px; overflow-x: auto; }
.ws-query-ribbon-command { min-width: 54px; min-height: 36px; padding: 3px 4px; }
.ws-query-ribbon-group { padding-inline: 6px; }
.ws-query-workbench { min-height: min(620px, calc(100vh - 390px)); }
@media (max-width: 900px) {
  .ws-query-studio-header { align-items: flex-start; flex-direction: column; }
  .ws-query-header-actions { width: 100%; }
  .ws-query-workbench { min-height: 520px; }
}
@media (max-width: 600px) {
  .ws-data-toolbar > input { flex-basis: 100%; }
  .ws-doc-ribbon-panel { max-height: 92px; }
  .ws-query-ribbon-panel { max-height: 110px; }
}

/* Public gate: Workspace remains private until the product is ready. */
html[data-workspace-locked="true"] body { min-height:100vh; background:#eef1f5; }
html[data-workspace-locked="true"] #ws-app { display:none !important; }
html[data-workspace-locked="true"] .skip-link { display:none; }
html[data-workspace-preview="true"] #ws-access-gate { display:none; }
.ws-access-gate { min-height:100vh; display:grid; place-items:center; padding:28px; background:radial-gradient(circle at 84% 12%,rgba(81,103,232,.12),transparent 30%),#eef1f5; color:#192033; }
.ws-access-gate-card { width:min(100%,620px); padding:42px; border:1px solid var(--ws-border); border-radius:18px; background:var(--ws-surface); box-shadow:var(--ws-shadow-md),0 24px 70px rgba(25,32,51,.12); }
.ws-access-gate-mark { display:grid; place-items:center; width:64px; height:64px; margin-bottom:22px; border-radius:16px; background:#edf0ff; }
.ws-access-gate-kicker { color:#5167e8; font:800 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em; }
.ws-access-gate h1 { max-width:500px; margin:14px 0 12px; font-size:clamp(2rem,5vw,3.4rem); line-height:1.02; letter-spacing:-.06em; }
.ws-access-gate p { max-width:540px; margin:0; color:#626b7c; font-size:15px; line-height:1.65; }
.ws-access-gate-list { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 28px; }
.ws-access-gate-list span { padding:8px 11px; border:1px solid #d9deea; border-radius:999px; background:#f8f9fc; color:#566074; font-size:12px; font-weight:700; }
@media (max-width:560px) { .ws-access-gate { padding:16px; }.ws-access-gate-card { padding:28px 22px; border-radius:14px; } }

/* Workspace command center: hierarchy, context and high-signal actions */
.ws-studio-command{display:flex;align-items:center;gap:10px;width:min(100%,420px);margin-top:20px;padding:11px 13px;border:1px solid rgba(31,47,82,.15);border-radius:12px;background:rgba(255,255,255,.56);color:var(--ws-text-secondary);font:500 12px/1.2 inherit;text-align:left;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.ws-studio-command:hover,.ws-studio-command:focus-visible{background:var(--ws-surface);border-color:var(--ws-primary);transform:translateY(-1px);outline:none}
.ws-studio-command span{flex:1}.ws-studio-command kbd{padding:4px 7px;border:1px solid var(--ws-border);border-radius:6px;background:var(--ws-surface);color:var(--ws-text-tertiary);font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.ws-studio-launch-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.ws-studio-launch-card{min-height:208px}

.ws-dashboard-home{width:min(100%,1180px);margin:0 auto;padding:clamp(18px,3vw,38px) clamp(16px,2.5vw,34px) 64px;color:var(--ws-text-primary)}
.ws-project-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,260px);gap:16px;align-items:center;padding:clamp(14px,2vw,24px) clamp(18px,3vw,32px);border:1px solid var(--ws-border-light);border-radius:16px;background:linear-gradient(135deg,var(--ws-surface) 0%,color-mix(in srgb,var(--ws-primary) 7%,var(--ws-surface)) 100%);box-shadow:0 12px 36px rgba(35,46,78,.06);overflow:hidden;position:relative}
.ws-project-hero::after{content:"";position:absolute;width:260px;height:260px;right:170px;bottom:-190px;border-radius:50%;background:color-mix(in srgb,var(--ws-primary) 16%,transparent);pointer-events:none}
.ws-project-hero-copy{position:relative;z-index:1}.ws-dashboard-kicker{display:block;color:var(--ws-primary);font-size:10px;font-weight:800;letter-spacing:.15em;line-height:1.4}.ws-project-hero h1{margin:6px 0 6px;font-size:clamp(1.6rem,3vw,2.8rem);line-height:1.05;letter-spacing:-.055em;color:var(--ws-text-primary)}.ws-project-hero p{max-width:580px;margin:0;color:var(--ws-text-secondary);font-size:13px;line-height:1.5}.ws-project-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.ws-project-actions .ws-btn{min-height:34px}
.ws-project-context{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:140px;padding:16px;border-radius:14px;background:var(--ws-primary);color:#fff;box-shadow:0 12px 24px rgba(81,103,232,.18)}.ws-context-orbit{display:grid;place-items:center;width:40px;height:40px;margin-bottom:auto;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(255,255,255,.12)}.ws-context-label{margin-bottom:6px;color:#cfd7ff;font-size:10px;font-weight:800;letter-spacing:.14em}.ws-project-context strong{font-size:15px;line-height:1.18;letter-spacing:-.025em}.ws-project-context small{margin-top:6px;color:#d5dcff;font-size:10px;line-height:1.4}
.ws-dashboard-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}.ws-metric-card{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--ws-border-light);border-radius:15px;background:var(--ws-surface);text-align:left;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.ws-metric-card:hover,.ws-metric-card:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb,var(--ws-primary) 45%,var(--ws-border-light));box-shadow:0 10px 24px rgba(35,46,78,.08);outline:none}.ws-metric-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px}.ws-metric-icon.blue{background:#e9efff;color:#5167e8}.ws-metric-icon.green{background:#e5f7ef;color:#178b62}.ws-metric-icon.violet{background:#f0eaff;color:#8758d8}.ws-metric-icon.orange{background:var(--ws-surface)1df;color:#c87918}.ws-metric-copy{display:grid;gap:3px;min-width:0}.ws-metric-copy strong{font-size:20px;line-height:1;font-variant-numeric:tabular-nums}.ws-metric-copy small{color:var(--ws-text-tertiary);font-size:11px;white-space:nowrap}.ws-metric-arrow{margin-left:auto;color:var(--ws-text-tertiary);font-size:17px}
.ws-dashboard-lower{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);gap:14px;margin-bottom:14px}.ws-dashboard-panel,.ws-dashboard-tools{border:1px solid var(--ws-border-light);border-radius:18px;background:var(--ws-surface);padding:22px}.ws-dashboard-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.ws-dashboard-panel-heading h2{margin:5px 0 0;font-size:20px;letter-spacing:-.035em}.ws-panel-status,.ws-signal-dot{color:var(--ws-text-tertiary);font-size:10px;font-weight:800;letter-spacing:.1em}.ws-panel-status{padding:5px 8px;border-radius:6px;background:var(--ws-surface-alt);color:var(--ws-primary)}.ws-signal-dot{color:#1c9b6a;letter-spacing:0}.ws-panel-intro{margin:15px 0 18px;color:var(--ws-text-secondary);font-size:13px;line-height:1.5}.ws-next-actions{display:grid;gap:7px}.ws-next-actions button,.ws-signal-list button{display:flex;align-items:center;gap:11px;width:100%;padding:12px;border:1px solid transparent;border-radius:10px;background:var(--ws-surface-alt);color:var(--ws-text-primary);text-align:left;cursor:pointer;transition:background .16s ease,transform .16s ease}.ws-next-actions button:hover,.ws-next-actions button:focus-visible,.ws-signal-list button:hover,.ws-signal-list button:focus-visible{background:color-mix(in srgb,var(--ws-primary) 9%,var(--ws-surface-alt));transform:translateX(2px);outline:none}.ws-next-actions svg{color:var(--ws-primary)}.ws-next-actions span{display:grid;gap:3px;font-size:13px;font-weight:700}.ws-next-actions small{color:var(--ws-text-tertiary);font-size:11px;font-weight:500}.ws-signal-list{display:grid;gap:0;margin-top:15px}.ws-signal-list button{padding:12px 0;border-radius:0;border-bottom:1px solid var(--ws-border-light);background:transparent}.ws-signal-list button:last-child{border-bottom:0}.ws-signal-index{width:23px;color:var(--ws-primary);font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.ws-signal-list button>span:last-child{display:grid;gap:3px}.ws-signal-list strong{font-size:12px}.ws-signal-list small{color:var(--ws-text-tertiary);font-size:10px}
.ws-dashboard-tools{padding:22px}.ws-dashboard-tools .ws-bento{margin-top:18px}.ws-text-link{border:0;background:transparent;color:var(--ws-primary);font:700 11px/1.3 inherit;cursor:pointer}.ws-text-link:hover{text-decoration:underline}.ws-dashboard-tools .ws-bento-card{min-height:116px;padding:17px;border:1px solid var(--ws-border-light);border-radius:14px;background:var(--ws-surface-alt);text-align:left;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.ws-dashboard-tools .ws-bento-card:hover,.ws-dashboard-tools .ws-bento-card:focus-visible{transform:translateY(-3px);border-color:color-mix(in srgb,var(--ws-primary) 38%,var(--ws-border-light));box-shadow:0 12px 24px rgba(35,46,78,.08);outline:none}.ws-dashboard-tools .card-title{margin-top:13px;font-size:14px}.ws-dashboard-tools .card-desc{margin-top:4px;color:var(--ws-text-tertiary);font-size:11px;line-height:1.4}
@media(max-width:1100px){.ws-studio-launch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ws-dashboard-home{padding-left:20px;padding-right:20px}}
@media(max-width:760px){.ws-project-hero{grid-template-columns:1fr;padding:24px}.ws-project-context{min-height:155px}.ws-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.ws-dashboard-lower{grid-template-columns:1fr}.ws-dashboard-panel,.ws-dashboard-tools{padding:18px}.ws-studio-launch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ws-studio-launch-card{min-height:170px}}
@media(max-width:480px){.ws-dashboard-home{padding:14px 12px 40px}.ws-project-hero h1{font-size:2.5rem}.ws-project-actions{display:grid}.ws-project-actions .ws-btn{width:100%;justify-content:center}.ws-dashboard-metrics{gap:8px}.ws-metric-card{padding:12px 10px;gap:8px}.ws-metric-copy strong{font-size:18px}.ws-metric-copy small{font-size:10px}.ws-studio-launch-grid{grid-template-columns:1fr}.ws-studio-launch-card{min-height:140px}}

/* APLUNO Professional workbench surfaces: updated tokens */
:root{--ws-primary:#2563EB;--ws-primary-hover:#1D4ED8;--ws-primary-light:#EFF6FF;--ws-primary-medium:rgba(37,99,235,.12);--ws-success:#16A34A;--ws-success-light:#F0FDF4;--ws-warning:#D97706;--ws-warning-light:#FFFBEB}
html.theme-dark{--ws-primary:#60A5FA;--ws-primary-hover:#93BBFD;--ws-primary-light:rgba(96,165,250,.12);--ws-primary-medium:rgba(96,165,250,.25)}
.ws-app{background:var(--ws-bg)}.ws-sidebar{background:var(--ws-surface);border-right:1px solid var(--ws-border)}.sidebar-header{padding:16px 16px 14px}.sidebar-logo-text{letter-spacing:-.04em}.sidebar-section-title{color:var(--ws-text-tertiary);letter-spacing:.12em;font-size:10px;font-weight:700}.sidebar-item{margin:2px 8px;border-radius:var(--ws-radius-md);color:var(--ws-text-secondary)}.sidebar-item:hover{background:var(--ws-surface-hover);color:var(--ws-text)}.sidebar-item.active{background:var(--ws-primary);color:#fff}.sidebar-item.active .icon{color:rgba(255,255,255,.85)}.sidebar-footer{border-top:1px solid var(--ws-border-light);background:var(--ws-surface)}.sidebar-footer-btn:hover{background:var(--ws-surface-hover);color:var(--ws-primary)}
.ws-main{background:var(--ws-bg)}.ws-topbar{height:var(--ws-topbar-height);background:rgba(255,255,255,.96);border-bottom:1px solid var(--ws-border-light);backdrop-filter:blur(12px)}.ws-topbar-breadcrumb{font-size:12px;color:var(--ws-text-secondary)}.ws-topbar-actions{gap:4px}.ws-topbar-search{border-color:var(--ws-border);background:var(--ws-surface)}.ws-content{background:var(--ws-bg);padding:0 24px 24px}.ws-statusbar{height:var(--ws-statusbar-height);background:var(--ws-surface);border-top:1px solid var(--ws-border-light);color:var(--ws-text-tertiary);font-size:10px;letter-spacing:.02em}
.ws-btn{border-radius:var(--ws-radius-md);min-height:32px;font-weight:500;letter-spacing:-.01em}.ws-btn-primary{background:var(--ws-primary);color:#fff;box-shadow:none}.ws-btn-primary:hover{background:var(--ws-primary-hover)}.ws-btn-secondary{background:var(--ws-surface);border-color:var(--ws-border);color:var(--ws-text)}.ws-btn-secondary:hover{border-color:var(--ws-primary);background:var(--ws-primary-light);color:var(--ws-primary)}.ws-btn-ghost:hover{background:var(--ws-surface-hover);color:var(--ws-primary)}

/* Document editor ribbon */
.ws-doc-editor{width:min(100%,1240px);max-width:none;margin:0 auto;padding:18px 0 64px;background:var(--ws-bg)}.ws-doc-editor>input[type="text"]{display:block;width:min(100%,1000px)!important;margin:4px auto 14px!important;padding:0 4px!important;font-size:clamp(25px,3vw,38px)!important;letter-spacing:-.055em;border-bottom:1px solid transparent!important}.ws-doc-editor>input[type="text"]:focus{border-bottom-color:var(--ws-primary)!important}.ws-doc-toolbar{position:sticky;top:0;z-index:20;width:min(100%,1180px);margin:0 auto 16px!important;display:flex!important;flex-direction:column;gap:0!important;padding:0!important;border:1px solid var(--ws-border)!important;border-radius:7px!important;background:var(--ws-surface)!important;box-shadow:0 8px 22px rgba(34,48,72,.09)!important;overflow:hidden}.ws-doc-ribbon-tabs{display:flex;align-items:center;gap:2px;padding:0 8px;border-bottom:1px solid #dfe3e7;background:var(--ws-bg-secondary)}.ws-doc-ribbon-tab{appearance:none;border:0;border-bottom:2px solid transparent;padding:8px 15px;background:transparent;color:var(--ws-text-secondary);font:700 11px/1 inherit;cursor:pointer}.ws-doc-ribbon-tab:hover,.ws-doc-ribbon-tab.active{color:var(--ws-text);background:var(--ws-surface);border-bottom-color:var(--ws-primary)}.ws-doc-ribbon-panel{display:flex;align-items:stretch;gap:0;min-height:72px;padding:7px 8px;overflow-x:auto}.ws-doc-ribbon-panel[hidden]{display:none!important}.ws-doc-tool-group{display:flex;align-items:center;gap:2px;padding:3px 8px;border-right:1px solid var(--ws-border-light);flex:0 0 auto}.ws-doc-tool-group:last-child{border-right:0}.ws-doc-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:52px;min-height:52px;padding:6px 5px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--ws-text-secondary);cursor:pointer;font:600 10px/1.1 inherit}.ws-doc-tool:hover,.ws-doc-tool:focus-visible{border-color:#b9c9ec;background:#edf3ff;color:var(--ws-primary);outline:none}.ws-doc-tool-label{max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ws-doc-format{align-self:center;min-width:120px;height:32px;margin:6px;border:1px solid var(--ws-border);border-radius:4px;background:var(--ws-surface);color:#27303a;font:600 11px/1 inherit}.ws-doc-toolbar>.ws-doc-metrics{align-self:flex-end;padding:5px 10px;color:#818992;font-size:10px;white-space:nowrap}.ws-doc-blocks{width:min(100%,900px);min-height:430px;margin:0 auto;padding:42px 58px;background:var(--ws-surface);border:1px solid #d9dde2;border-radius:2px;box-shadow:0 10px 28px rgba(34,48,72,.06)}.ws-doc-block{padding:5px 4px}.ws-doc-block:hover{background:var(--ws-bg-secondary);border-color:#dbe3f0}.ws-doc-block [contenteditable]{font-size:15px;line-height:1.75}.ws-doc-stats-grid,.ws-table-insights-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ws-doc-stats-grid>div,.ws-table-insights-grid>div{display:grid;gap:3px;padding:12px;border:1px solid var(--ws-border-light);border-radius:6px;background:var(--ws-primary-light)}.ws-doc-stats-grid strong,.ws-table-insights-grid strong{font-size:20px}.ws-doc-stats-grid span,.ws-table-insights-grid span{color:var(--ws-text-secondary);font-size:11px}

/* Spreadsheet editor ribbon */
.ws-data-layout{background:var(--ws-bg)}.ws-data-toolbar{position:sticky;top:0;z-index:15;gap:4px;padding:7px 10px;background:var(--ws-surface);border:1px solid var(--ws-border);border-radius:6px;box-shadow:0 6px 18px rgba(34,48,72,.07)}.ws-data-toolbar input{height:32px}.ws-data-toolbar-divider{width:1px;height:22px;margin:0 4px;background:#d9dde2}.ws-data-command{color:var(--ws-text-secondary)}.ws-data-command:hover{color:var(--ws-primary);background:#edf3ff}.ws-table-capacity{margin-left:auto;color:var(--ws-text-tertiary);font-size:10px;white-space:nowrap}.ws-formula-bar{margin-top:6px;border:1px solid var(--ws-border);border-radius:5px;background:var(--ws-surface)}.ws-grid-container{margin-top:6px;border:1px solid var(--ws-border);background:var(--ws-surface);box-shadow:0 6px 18px rgba(34,48,72,.05)}.ws-grid-table{font-size:12px}.ws-grid-table th{background:#eef2f7;color:#4b5662;border-bottom:2px solid var(--ws-border)}.ws-grid-table th .ws-data-type-badge{display:inline-grid;place-items:center;min-width:22px;height:16px;margin-right:6px;border-radius:3px;background:var(--ws-primary-light);color:var(--ws-primary);font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.ws-grid-table td{height:32px}.ws-grid-table tbody tr:nth-child(even) td{background:#fbfcfd}.ws-grid-table tbody tr:hover td{background:#f2f6ff}.ws-sheet-tabs{background:var(--ws-surface);border:1px solid var(--ws-border);border-top:0}.ws-sheet-tab.active{color:var(--ws-primary);border-bottom-color:var(--ws-primary)}

/* Query ribbon and compact Power Query-style workbench */
.ws-query-studio{min-height:0;height:100%;gap:8px}.ws-query-studio-header{align-items:center;padding:5px 4px 9px;border-bottom:1px solid #cfd4db}.ws-query-title-block h1{font-size:clamp(27px,3vw,38px);letter-spacing:-.06em}.ws-query-title-block p{font-size:11px}.ws-query-header-actions{gap:5px}.ws-query-sheetbar{gap:6px;padding:7px 10px 0;border-color:var(--ws-border);box-shadow:none}.ws-query-ribbon{border:1px solid var(--ws-border);border-radius:6px;background:var(--ws-surface);box-shadow:0 5px 16px rgba(34,48,72,.05);overflow:hidden}.ws-query-ribbon-tabs{display:flex;gap:2px;padding:0 8px;border-bottom:1px solid #dfe3e7;background:var(--ws-bg-secondary)}.ws-query-ribbon-tab{appearance:none;border:0;border-bottom:2px solid transparent;padding:7px 14px;background:transparent;color:var(--ws-text-secondary);font:700 10px/1 inherit;cursor:pointer}.ws-query-ribbon-tab:hover,.ws-query-ribbon-tab.active{color:var(--ws-text);background:var(--ws-surface);border-bottom-color:var(--ws-primary)}.ws-query-ribbon-panel{display:flex;align-items:stretch;min-height:62px;max-height:112px;padding:5px 7px;overflow:auto}.ws-query-ribbon-panel[hidden]{display:none!important}.ws-query-ribbon-group{display:flex;flex-direction:column;justify-content:space-between;gap:3px;padding:2px 8px;border-right:1px solid var(--ws-border-light);flex:0 0 auto}.ws-query-ribbon-group:last-child{border-right:0}.ws-query-ribbon-group-label{color:var(--ws-text-tertiary);font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.ws-query-ribbon-group-items{display:flex;align-items:stretch;gap:2px}.ws-query-ribbon-command{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:58px;min-height:38px;padding:4px;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--ws-text-secondary);font:600 9px/1.1 inherit;cursor:pointer}.ws-query-ribbon-command:hover,.ws-query-ribbon-command:focus-visible{border-color:#b9c9ec;background:#edf3ff;color:var(--ws-primary);outline:none}.ws-query-ribbon-command span{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ws-query-formula-bar{display:flex;align-items:center;gap:8px;min-height:28px;padding:5px 9px;border-top:1px solid #e1e4e8;background:var(--ws-bg-secondary);color:#5f6872;font-size:10px}.ws-query-formula-label{color:var(--ws-primary);font:bold italic 13px/1 Georgia,serif}.ws-query-formula-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ws-query-formula-meta{color:#9299a1}.ws-query-workbench{min-height:0;flex:1;border-color:var(--ws-border);box-shadow:0 8px 20px rgba(34,48,72,.06)}.ws-query-source-panel,.ws-query-steps-panel{background:#f0f2f3;padding:10px}.ws-query-tools-panel{background:#172033}.ws-query-main{background:var(--ws-surface)}.ws-query-preview-header{min-height:44px;padding:7px 10px;background:#fbfcfd;border-bottom:1px solid #e1e4e8}.ws-query-preview-search{width:160px;height:28px;padding:5px 8px;border:1px solid #cbd2db;border-radius:4px;background:var(--ws-surface);color:var(--ws-text);font:500 10px/1 inherit}.ws-query-preview-table{font-size:11px}.ws-query-preview-table th{background:#eef2f7;color:#4b5662;border-bottom:2px solid var(--ws-border)}.ws-query-preview-table td{height:28px}.ws-query-preview-table tbody tr:nth-child(even) td{background:#fbfcfd}.ws-query-preview-table tbody tr:hover td{background:#f2f6ff}.ws-query-statusline{border-color:var(--ws-border);background:var(--ws-bg-secondary)}

/* Capture-to-result guided lane */
.ws-capture-workflow{margin:0 0 18px;padding:18px;border:1px solid var(--ws-border);border-radius:8px;background:var(--ws-surface);box-shadow:0 6px 18px rgba(34,48,72,.05)}.ws-capture-workflow-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px}.ws-capture-workflow-heading h2{margin-top:4px;font-size:18px;letter-spacing:-.035em}.ws-capture-workflow-note{color:var(--ws-success);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.ws-capture-workflow-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.ws-capture-workflow-steps button{display:grid;grid-template-columns:26px 18px minmax(0,1fr);align-items:center;gap:8px;padding:11px;border:1px solid var(--ws-border-light);border-radius:6px;background:var(--ws-bg-secondary);color:var(--ws-text);text-align:left;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}.ws-capture-workflow-steps button:hover,.ws-capture-workflow-steps button:focus-visible{transform:translateY(-2px);border-color:var(--ws-primary);background:#edf3ff;outline:none}.ws-capture-step-number{color:var(--ws-primary);font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.ws-capture-workflow-steps button>span:last-child{display:grid;gap:3px}.ws-capture-workflow-steps strong{font-size:12px}.ws-capture-workflow-steps small{color:var(--ws-text-tertiary);font-size:10px;line-height:1.3}
@media(max-width:900px){.ws-doc-blocks{padding:34px 28px}.ws-query-ribbon-panel{max-height:130px}.ws-capture-workflow-steps{grid-template-columns:1fr}.ws-table-capacity{width:100%;margin-left:0}.ws-data-toolbar-divider{display:none}}
@media(max-width:600px){.ws-content{padding:0 10px 16px}.ws-doc-editor{padding-top:10px}.ws-doc-ribbon-tabs{overflow-x:auto}.ws-doc-ribbon-tab{padding-inline:11px;white-space:nowrap}.ws-doc-blocks{padding:28px 18px}.ws-doc-stats-grid,.ws-table-insights-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ws-query-preview-actions{width:100%}.ws-query-preview-search{flex:1;width:auto}.ws-query-title-block h1{font-size:28px}.ws-query-header-actions .ws-btn{min-width:32px}.ws-query-header-actions .ws-btn:not(.ws-query-tools-toggle){font-size:0}.ws-query-header-actions .ws-btn svg{margin:0}}

/* Spreadsheet ribbon v2: compact Word/Excel-style chrome without hiding commands. */
.ws-data-toolbar{display:grid;gap:0;overflow:hidden;padding:0!important}.ws-data-toolbar-top{display:flex;align-items:center;gap:7px;min-width:0;padding:6px 9px;border-bottom:1px solid #e1e4e8;background:var(--ws-bg-secondary)}.ws-data-name-input{width:min(260px,35vw);height:30px;padding:4px 8px;border:1px solid var(--ws-border);border-radius:4px;background:var(--ws-surface);color:var(--ws-text);font:600 12px/1 inherit;outline:none}.ws-data-name-input:focus{border-color:var(--ws-primary);box-shadow:0 0 0 2px rgba(36,88,197,.1)}.ws-data-toolbar-context{margin-left:auto;color:var(--ws-text-tertiary);font-size:10px;white-space:nowrap}.ws-data-ribbon-tabs{display:flex;align-items:center;gap:2px;min-width:0;padding:0 9px;border-bottom:1px solid #dfe3e7;background:var(--ws-surface)}.ws-data-ribbon-kicker{margin-right:8px;color:var(--ws-text-tertiary);font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;white-space:nowrap}.ws-data-ribbon-tab{appearance:none;border:0;border-bottom:2px solid transparent;padding:7px 13px;background:transparent;color:var(--ws-text-secondary);font:700 10px/1 inherit;cursor:pointer}.ws-data-ribbon-tab:hover,.ws-data-ribbon-tab.active{background:var(--ws-bg-secondary);color:var(--ws-text);border-bottom-color:var(--ws-primary)}.ws-data-ribbon-panel{display:flex;align-items:stretch;gap:0;min-width:0;min-height:57px;padding:5px 8px;overflow-x:auto;scrollbar-width:thin}.ws-data-tool-group{display:flex;flex-direction:column;justify-content:space-between;gap:3px;flex:0 0 auto;padding:2px 7px;border-right:1px solid var(--ws-border-light)}.ws-data-tool-group:last-of-type{border-right:0}.ws-data-tool-group-label{color:var(--ws-text-tertiary);font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}.ws-data-tool-group-items{display:flex;align-items:center;gap:2px}.ws-data-command{min-height:31px;padding:4px 7px!important;font-size:10px!important;white-space:nowrap}.ws-data-command svg{width:14px;height:14px}.ws-data-ribbon-panel>.ws-table-capacity{align-self:center;margin-left:auto;padding-left:10px;color:var(--ws-text-tertiary);font-size:9px;white-space:nowrap}
@media(max-width:700px){.ws-data-toolbar-top{flex-wrap:wrap}.ws-data-name-input{width:min(100%,240px);flex:1}.ws-data-toolbar-context{width:100%;margin-left:0}.ws-data-ribbon-kicker{display:none}.ws-data-ribbon-tabs{overflow-x:auto}.ws-data-ribbon-panel{max-height:120px}.ws-data-tool-group{padding-inline:5px}.ws-data-ribbon-panel>.ws-table-capacity{display:none}}

/* Document ribbon v2: keep the editor controls discoverable at desktop and tablet widths. */
.ws-doc-ribbon-panel{min-width:0;max-height:none!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}.ws-doc-ribbon-tabs{flex:0 0 auto}.ws-doc-toolbar>.ws-doc-metrics{order:3;align-self:stretch;text-align:right;border-top:1px solid #e7e9ec}.ws-doc-font-family{min-width:108px}.ws-doc-font-size{min-width:68px}.ws-doc-color{align-self:center;width:31px;height:31px;padding:2px;border:1px solid var(--ws-border);border-radius:4px;background:var(--ws-surface);cursor:pointer}.ws-doc-color:focus-visible{outline:2px solid var(--ws-primary);outline-offset:2px}.ws-doc-tool-group:has(.ws-doc-font-family){gap:4px}.ws-doc-tool-group:has(.ws-doc-font-family) .ws-doc-format{margin:3px}.ws-doc-tool-group:has(.ws-doc-font-family){padding-inline:7px}.ws-doc-blocks{scroll-margin-top:145px}.ws-doc-editor>input[type="text"]{position:relative;z-index:1}.ws-doc-toolbar{isolation:isolate}
@media(max-width:900px){.ws-doc-ribbon-panel{max-height:116px!important}.ws-doc-tool-group{padding-inline:5px}.ws-doc-tool{min-width:46px}.ws-doc-format{min-width:100px}}
@media(max-width:600px){.ws-doc-ribbon-panel{max-height:144px!important}.ws-doc-toolbar{margin-inline:-2px!important}.ws-doc-tool{min-width:43px;min-height:44px;padding-inline:3px}.ws-doc-tool-label{max-width:56px;font-size:9px}.ws-doc-font-family{min-width:96px}.ws-doc-font-size{min-width:62px}.ws-doc-blocks{min-height:500px}}

/* Flow editor v2: nodes are cards you can select, configure, connect and validate. */
.ws-flow{display:flex!important;flex-direction:column;min-height:0;background:var(--ws-bg-secondary)}.ws-flow-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,310px);min-height:0;flex:1;border:1px solid var(--ws-border);background:var(--ws-bg-secondary)}.ws-flow-canvas{position:relative;min-width:0;min-height:460px;overflow:auto;background-color:#f7f8fa;background-image:radial-gradient(#d4dbe5 1px,transparent 1px);background-size:20px 20px}.ws-flow-edges{position:absolute;inset:0;width:100%;height:100%;min-width:900px;min-height:620px;pointer-events:none;overflow:visible}.ws-flow-edge{fill:none;stroke:var(--ws-text-tertiary);stroke-width:2;stroke-dasharray:4 3}.ws-flow-status{top:10px;left:10px;right:10px;display:flex;align-items:center;gap:8px;max-width:calc(100% - 20px);padding:7px 9px;border:1px solid var(--ws-border);border-radius:7px;background:rgba(255,255,255,.88);font-size:10px;box-shadow:0 4px 12px rgba(25,38,64,.06)}.ws-flow-node{min-width:205px;max-width:245px;overflow:visible;border-color:var(--ws-border);border-radius:7px;background:var(--ws-surface);box-shadow:0 5px 16px rgba(31,48,78,.11);cursor:grab;touch-action:none}.ws-flow-node:focus-visible{outline:2px solid var(--ws-primary);outline-offset:3px}.ws-flow-node.selected{border-color:var(--ws-primary);box-shadow:0 0 0 2px var(--ws-primary-medium),0 8px 22px rgba(31,48,78,.15)}.ws-flow-node-header{min-height:35px;padding:7px 8px;border-radius:6px 6px 0 0;font-size:11px}.ws-flow-node-header>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ws-flow-node-edit{display:grid;place-items:center;width:24px;height:24px;margin-left:auto;border:0;border-radius:4px;background:transparent;color:inherit;cursor:pointer}.ws-flow-node-edit:hover,.ws-flow-node-edit:focus-visible{background:rgba(255,255,255,.6);outline:none}.ws-flow-node-body{display:grid;gap:5px;min-height:74px;padding:10px}.ws-flow-node-body p{margin:0;color:var(--ws-text-secondary);font-size:10px;line-height:1.4}.ws-flow-node-operation{display:inline-flex;max-width:100%;padding:3px 6px;border:1px solid #dbe1e9;border-radius:4px;background:var(--ws-bg-secondary);color:var(--ws-text-secondary);font-size:9px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ws-flow-port{z-index:3;width:16px;height:16px;padding:0;border:2px solid #8da2c1;border-radius:50%;background:var(--ws-surface);cursor:crosshair}.ws-flow-port:hover,.ws-flow-port:focus-visible{border-color:var(--ws-primary);background:#dce7ff;outline:2px solid #b9c9ec;outline-offset:2px}.ws-flow-port.left{left:-8px}.ws-flow-port.right{right:-8px}.ws-flow-inspector{min-width:0;overflow:auto;padding:16px;border-left:1px solid #cfd4db;background:var(--ws-surface)}.ws-flow-inspector-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}.ws-flow-inspector-heading>div{display:grid;gap:4px}.ws-flow-inspector-kicker,.ws-flow-section-label{color:#7b8490;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.ws-flow-inspector-heading strong{font-size:15px;letter-spacing:-.02em}.ws-flow-inspector-id{color:var(--ws-primary);font:800 20px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.ws-flow-field{display:grid;gap:5px;margin-bottom:11px;color:#596574;font-size:10px;font-weight:700}.ws-flow-field small{color:#8a939f;font-size:9px;font-weight:500;line-height:1.35}.ws-flow-field .ws-input{width:100%;box-sizing:border-box}.ws-flow-description{min-height:68px;resize:vertical;font:500 11px/1.45 inherit}.ws-flow-node-settings{display:grid;gap:0;padding:10px 0;border-top:1px solid #e5e8ed;border-bottom:1px solid #e5e8ed;margin-bottom:12px}.ws-flow-connect-box{display:grid;gap:7px;margin-bottom:12px;padding:10px;border:1px solid #dbe2eb;border-radius:6px;background:var(--ws-bg-secondary)}.ws-flow-connections{display:grid;gap:6px;margin:4px 0 14px}.ws-flow-connection{display:flex;align-items:center;gap:7px;width:100%;padding:6px 7px;border:1px solid #e1e5eb;border-radius:5px;background:var(--ws-surface);color:#586475;text-align:left;font:600 10px/1 inherit;cursor:pointer}.ws-flow-connection:hover{border-color:var(--ws-primary);background:#edf3ff;color:var(--ws-primary)}.ws-flow-delete-node{width:100%;justify-content:center;margin-top:2px}.ws-flow-inspector-empty{display:grid;gap:9px;color:#596574}.ws-flow-inspector-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;background:#edf3ff;color:var(--ws-primary)}.ws-flow-inspector-empty strong{font-size:15px;color:var(--ws-text)}.ws-flow-inspector-empty p{margin:0;font-size:11px;line-height:1.55}.ws-flow-inspector-empty ol{display:grid;gap:7px;margin:3px 0 0;padding-left:19px;color:#6f7a87;font-size:10px;line-height:1.4}.ws-flow-empty-guide{position:absolute;top:50%;left:50%;z-index:1;width:min(100% - 40px,360px);display:grid;justify-items:center;gap:9px;transform:translate(-50%,-50%);padding:24px;border:1px dashed #bac6d7;border-radius:10px;background:rgba(255,255,255,.9);text-align:center}.ws-flow-empty-guide .ws-empty-icon{color:var(--ws-primary)}.ws-flow-empty-guide strong{font-size:16px}.ws-flow-empty-guide p{margin:0;color:#6f7a87;font-size:11px;line-height:1.5}.ws-flow-toolbar{position:static;justify-content:center;transform:none;flex-wrap:wrap;min-height:44px;border-radius:6px;background:var(--ws-surface);box-shadow:0 -4px 14px rgba(31,48,78,.06)}
@media(max-width:840px){.ws-flow-layout{grid-template-columns:minmax(0,1fr) 260px}.ws-flow-node{min-width:185px;max-width:220px}}
@media(max-width:640px){.ws-flow-layout{grid-template-columns:1fr}.ws-flow-inspector{max-height:390px;border-top:1px solid #cfd4db;border-left:0;order:2}.ws-flow-canvas{min-height:380px;order:1}.ws-flow-toolbar{position:static}.ws-flow-status{font-size:9px}}

/* White canvas, black controls, restrained cream breathing room. */
html.theme-dark {
  --ws-cream: #2B2824;
  --ws-cream-deep: #3B342B;
}

@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --ws-cream: #2B2824;
    --ws-cream-deep: #3B342B;
  }
}

.ws-studio-index {
  background: var(--ws-cream);
}

.ws-studio-templates {
  margin-top: 36px;
  padding: 54px 20px 34px;
  background: var(--ws-cream);
}

.ws-studio-templates .ws-template-card {
  border-color: var(--ws-text);
}

.ws-studio-dropzone {
  background: var(--ws-cream);
}

.ws-studio-dropzone:hover,
.ws-studio-dropzone.drag-over {
  background: var(--ws-text);
}

.ws-btn-primary,
.sidebar-item.active,
.ws-studio-launch-card:hover,
.ws-studio-templates .ws-template-card:hover,
.ws-studio-dropzone.drag-over {
  background: #111111;
  color: #FFFFFF;
}

html.theme-dark .ws-btn-primary,
html.theme-dark .sidebar-item.active,
html.theme-dark .ws-studio-launch-card:hover,
html.theme-dark .ws-studio-templates .ws-template-card:hover,
html.theme-dark .ws-studio-dropzone.drag-over {
  background: #F4F3EE;
  color: #111111;
}

@media (max-width: 480px) {
  .ws-studio-templates {
    margin-top: 26px;
    padding: 42px 14px 24px;
  }
}

.ws-app {
  display: flex;
  flex-direction: row;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: var(--ws-bg);
}

.ws-sidebar {
  width: var(--ws-sidebar-width);
  min-width: var(--ws-sidebar-width);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ws-surface);
  border-right: 1px solid var(--ws-border);
  transition: width 0.2s ease, min-width 0.2s ease;
  z-index: var(--ws-z-sidebar);
  overflow: hidden;
}

.ws-sidebar.collapsed {
  width: var(--ws-sidebar-collapsed);
  min-width: var(--ws-sidebar-collapsed);
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ws-density-scale));
  padding: calc(10px * var(--ws-density-scale)) calc(12px * var(--ws-density-scale));
  border-bottom: 1px solid var(--ws-border-light);
  min-height: calc(48px * var(--ws-density-scale));
}

.sidebar-logo {
  width: 28px;
  height: 28px;
  min-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ws-primary);
  border-radius: var(--ws-radius-md);
  color: #fff;
}

.sidebar-logo svg,
.sidebar-logo-img {
  width: 18px;
  height: 18px;
}

.sidebar-logo-img {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: inherit;
}

.sidebar-logo-text {
  font-weight: 700;
  font-size: calc(15px * var(--ws-density-scale));
  color: var(--ws-text);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-logo-sub {
  font-size: calc(9px * var(--ws-density-scale));
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ws-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
}

.ws-sidebar.collapsed .sidebar-logo-text,
.ws-sidebar.collapsed .sidebar-logo-sub {
  display: none;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(6px * var(--ws-density-scale)) calc(6px * var(--ws-density-scale));
}

.sidebar-section {
  margin-bottom: calc(4px * var(--ws-density-scale));
}

.sidebar-section-title {
  font-size: calc(10px * var(--ws-density-scale));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ws-text-tertiary);
  padding: calc(6px * var(--ws-density-scale)) calc(8px * var(--ws-density-scale)) calc(2px * var(--ws-density-scale));
  white-space: nowrap;
  overflow: hidden;
}

.ws-sidebar.collapsed .sidebar-section-title {
  text-align: center;
  font-size: 0;
}

.ws-sidebar.collapsed .sidebar-section-title::after {
  content: '\2022';
  font-size: 10px;
  display: block;
}

.sidebar-item {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: inherit;
  width: 100%;
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ws-density-scale));
  padding: calc(5px * var(--ws-density-scale)) calc(8px * var(--ws-density-scale));
  border-radius: var(--ws-radius-md);
  cursor: pointer;
  color: var(--ws-text-secondary);
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  font-size: calc(13px * var(--ws-density-scale));
  position: relative;
}

.sidebar-item:hover {
  background: var(--ws-surface-hover);
  color: var(--ws-text);
}

.sidebar-item.active {
  background: var(--ws-primary-light);
  color: var(--ws-primary);
  font-weight: 500;
}

.sidebar-item .icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(16px * var(--ws-density-scale));
}

.sidebar-item .label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-item .badge {
  margin-left: auto;
  font-size: calc(10px * var(--ws-density-scale));
  background: var(--ws-primary-light);
  color: var(--ws-primary);
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
}

.ws-sidebar.collapsed .sidebar-item .label,
.ws-sidebar.collapsed .sidebar-item .sidebar-label,
.ws-sidebar.collapsed .sidebar-item .badge {
  display: none;
}

.ws-sidebar.collapsed .sidebar-item {
  justify-content: center;
  padding: calc(8px * var(--ws-density-scale));
}

.sidebar-footer {
  border-top: 1px solid var(--ws-border-light);
  padding: calc(6px * var(--ws-density-scale));
  display: flex;
  align-items: center;
  gap: calc(4px * var(--ws-density-scale));
  flex-wrap: wrap;
}

.sidebar-footer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(32px * var(--ws-density-scale));
  height: calc(32px * var(--ws-density-scale));
  border-radius: var(--ws-radius-md);
  border: none;
  background: transparent;
  color: var(--ws-text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  font-size: calc(16px * var(--ws-density-scale));
}

.sidebar-footer-btn:hover {
  background: var(--ws-surface-hover);
  color: var(--ws-text);
}

.sidebar-footer-btn.active {
  color: var(--ws-primary);
  background: var(--ws-primary-light);
}

.ws-sidebar.collapsed .sidebar-footer {
  flex-direction: column;
}

.ws-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
}

.ws-topbar {
  height: var(--ws-topbar-height);
  min-height: var(--ws-topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(16px * var(--ws-density-scale));
  border-bottom: 1px solid var(--ws-border-light);
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: var(--ws-z-topbar);
  gap: calc(12px * var(--ws-density-scale));
}

html.theme-dark .ws-topbar {
  background: rgba(27, 30, 38, 0.8);
}

.ws-topbar-breadcrumb {
  display: flex;
  align-items: center;
  gap: calc(4px * var(--ws-density-scale));
  font-size: calc(13px * var(--ws-density-scale));
  color: var(--ws-text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.ws-topbar-breadcrumb a {
  color: var(--ws-text-secondary);
  white-space: nowrap;
  text-decoration: none;
  padding: 2px 4px;
  border-radius: var(--ws-radius-sm);
  transition: background 0.12s;
}

.ws-topbar-breadcrumb a:hover {
  background: var(--ws-surface-active);
  color: var(--ws-text);
  text-decoration: none;
}

.ws-topbar-breadcrumb a.current {
  color: var(--ws-text);
  font-weight: 500;
}

.ws-topbar-actions {
  display: flex;
  align-items: center;
  gap: calc(4px * var(--ws-density-scale));
}

.ws-topbar-btn {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: calc(32px * var(--ws-density-scale));
  padding: 0 calc(10px * var(--ws-density-scale));
  border-radius: var(--ws-radius-md);
  border: 1px solid var(--ws-border);
  background: var(--ws-surface);
  color: var(--ws-text-secondary);
  cursor: pointer;
  font-size: calc(12px * var(--ws-density-scale));
  font-family: var(--ws-font);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}

.ws-topbar-btn:hover {
  background: var(--ws-surface-hover);
  color: var(--ws-text);
  border-color: var(--ws-text-tertiary);
}

.ws-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: calc(24px * var(--ws-density-scale)) calc(32px * var(--ws-density-scale));
}

.ws-statusbar {
  min-height: var(--ws-statusbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 calc(16px * var(--ws-density-scale));
  border-top: 1px solid var(--ws-border);
  background: var(--ws-surface);
  color: var(--ws-text-secondary);
  font-size: calc(11px * var(--ws-density-scale));
}

.ws-statusbar-hint { color: var(--ws-text-tertiary); }

.ws-save-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ws-success);
  font-size: 11px;
  white-space: nowrap;
}

.ws-topbar-icon {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ws-text-secondary);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ws-radius-md);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.ws-topbar-icon:hover { background: var(--ws-surface-active); color: var(--ws-text); }

.ws-topbar-search kbd {
  border: 1px solid var(--ws-border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 2px 5px;
  color: var(--ws-text-tertiary);
  font: 10px var(--ws-font);
}

#ws-menu-toggle { display: none; }

.ws-context-panel {
  width: 0;
  min-width: 0;
  height: 100%;
  background: var(--ws-surface);
  border-left: 1px solid var(--ws-border);
  overflow: hidden;
  transition: width 0.2s ease, min-width 0.2s ease;
}

.ws-context-panel.open {
  width: var(--ws-context-panel-width);
  min-width: var(--ws-context-panel-width);
  overflow-y: auto;
}

.ws-statusbar {
  height: var(--ws-statusbar-height);
  min-height: var(--ws-statusbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(12px * var(--ws-density-scale));
  background: var(--ws-surface);
  border-top: 1px solid var(--ws-border-light);
  font-size: calc(11px * var(--ws-density-scale));
  color: var(--ws-text-tertiary);
  gap: calc(12px * var(--ws-density-scale));
}

.ws-start {
  max-width: 1120px;
  margin: 0 auto;
  animation: fadeIn 0.3s ease;
}

.ws-start .hero {
  text-align: center;
  padding: calc(40px * var(--ws-density-scale)) 0 calc(32px * var(--ws-density-scale));
}

.ws-start .hero h1 {
  font-size: calc(28px * var(--ws-density-scale));
  font-weight: 700;
  color: var(--ws-text);
  margin-bottom: calc(8px * var(--ws-density-scale));
}

.ws-start .hero p {
  font-size: calc(15px * var(--ws-density-scale));
  color: var(--ws-text-secondary);
}

.ws-home-hero {
  text-align: left !important;
  padding: calc(26px * var(--ws-density-scale)) 0 calc(22px * var(--ws-density-scale)) !important;
}

.ws-home-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.ws-eyebrow {
  color: var(--ws-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}

.ws-home-hero h1 { font-size: clamp(28px, 3vw, 40px) !important; letter-spacing: -0.03em; }

.ws-home-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  color: var(--ws-text-tertiary);
  font-size: 11px;
}

.ws-home-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ws-home-trust svg { color: var(--ws-success); }

.ws-home-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 26px;
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg);
  overflow: hidden;
  background: var(--ws-border);
}

.ws-home-stats > div {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 12px 14px;
  background: var(--ws-surface);
  color: var(--ws-text-secondary);
  font-size: 11px;
}

.ws-home-stats strong {
  color: var(--ws-text);
  font-size: 16px;
  letter-spacing: -0.03em;
}

.ws-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.ws-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(14px * var(--ws-density-scale));
  margin-bottom: calc(32px * var(--ws-density-scale));
}

.ws-bento-card {
  background: var(--ws-surface);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg);
  padding: calc(20px * var(--ws-density-scale));
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--ws-density-scale));
}

.ws-bento-card:hover {
  box-shadow: var(--ws-shadow-md);
  border-color: var(--ws-primary);
  transform: translateY(-1px);
}

.ws-bento-card .card-icon {
  width: calc(40px * var(--ws-density-scale));
  height: calc(40px * var(--ws-density-scale));
  border-radius: var(--ws-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(20px * var(--ws-density-scale));
}

.ws-bento-card .card-icon.blue { background: var(--ws-primary-light); color: var(--ws-primary); }
.ws-bento-card .card-icon.green { background: var(--ws-success-light); color: var(--ws-success); }
.ws-bento-card .card-icon.violet { background: var(--ws-advanced-light); color: var(--ws-advanced); }
.ws-bento-card .card-icon.orange { background: var(--ws-warning-light); color: var(--ws-warning); }

.ws-bento-card .card-title {
  font-size: calc(14px * var(--ws-density-scale));
  font-weight: 600;
  color: var(--ws-text);
}

.ws-bento-card .card-desc {
  font-size: calc(12px * var(--ws-density-scale));
  color: var(--ws-text-secondary);
  line-height: 1.4;
}

.ws-template-section {
  margin: 4px 0 24px;
}

.ws-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ws-section-heading h2 {
  font-size: 15px;
  letter-spacing: -0.01em;
}

.ws-section-heading p {
  color: var(--ws-text-secondary);
  font-size: 12px;
  margin-top: 3px;
}

.ws-template-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ws-template-card {
  appearance: none;
  border: 1px solid var(--ws-border);
  background: var(--ws-surface);
  color: var(--ws-text);
  border-radius: var(--ws-radius-lg);
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ws-template-card:hover {
  border-color: var(--ws-primary);
  box-shadow: var(--ws-shadow-sm);
  transform: translateY(-1px);
}

.ws-template-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--ws-primary);
  background: var(--ws-primary-light);
}

.ws-template-copy { min-width: 0; display: grid; gap: 4px; }
.ws-template-copy strong { font-size: 13px; }
.ws-template-copy small { color: var(--ws-text-secondary); font-size: 11px; line-height: 1.35; }

.ws-bento-card.span-2 {
  grid-column: span 2;
}

.ws-drag-zone {
  border: 2px dashed var(--ws-border);
  border-radius: var(--ws-radius-lg);
  padding: calc(40px * var(--ws-density-scale));
  text-align: center;
  margin-bottom: calc(32px * var(--ws-density-scale));
  transition: border-color 0.15s, background 0.15s;
  color: var(--ws-text-tertiary);
  font-size: calc(14px * var(--ws-density-scale));
}

.ws-drag-zone:hover,
.ws-drag-zone.drag-over {
  border-color: var(--ws-primary);
  background: var(--ws-primary-light);
  color: var(--ws-primary);
}

.ws-recent-section {
  margin-bottom: calc(24px * var(--ws-density-scale));
}

.ws-recent-section h3 {
  font-size: calc(14px * var(--ws-density-scale));
  font-weight: 600;
  color: var(--ws-text);
  margin-bottom: calc(12px * var(--ws-density-scale));
}

.ws-ready-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg);
  background: var(--ws-surface);
  box-shadow: var(--ws-shadow-sm);
}

.ws-ready-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: var(--ws-primary);
  background: var(--ws-primary-light);
}

.ws-ready-copy {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.ws-ready-copy strong { font-size: 13px; }
.ws-ready-copy span { color: var(--ws-text-secondary); font-size: 12px; }

.ws-intake-gate {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--ws-primary-light);
  border-radius: var(--ws-radius-lg);
  background: var(--ws-primary-light);
}

.ws-intake-gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--ws-primary);
  background: var(--ws-surface);
}

.ws-intake-gate-copy {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.ws-intake-gate-copy strong { font-size: 12px; color: var(--ws-text); }
.ws-intake-gate-copy span { font-size: 11px; color: var(--ws-text-secondary); }

.ws-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(200px * var(--ws-density-scale)), 1fr));
  gap: calc(12px * var(--ws-density-scale));
}

.ws-doc-editor {
  max-width: min(100%, 1240px);
  margin: 0 auto;
  padding: calc(16px * var(--ws-density-scale)) 0;
}

.ws-doc-blocks {
  background: var(--ws-surface);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg);
  padding: calc(36px * var(--ws-density-scale)) calc(48px * var(--ws-density-scale));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  min-height: 650px;
  max-width: 100%;
}

.ws-doc-editor.ws-doc-focus-mode .ws-doc-toolbar,
.ws-doc-editor.ws-doc-focus-mode .block-handle,
.ws-doc-editor.ws-doc-focus-mode .ws-doc-add-block,
.ws-doc-editor.ws-doc-focus-mode .ws-doc-metrics {
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.ws-doc-editor.ws-doc-focus-mode .ws-doc-blocks {
  max-width: 820px;
  margin: 0 auto;
  border-color: transparent;
  box-shadow: none;
}

.ws-doc-block {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: calc(4px * var(--ws-density-scale));
  padding: calc(3px * var(--ws-density-scale)) calc(4px * var(--ws-density-scale));
  border-radius: var(--ws-radius-sm);
  border: 1px solid transparent;
  transition: border-color 0.12s, background 0.12s;
  min-height: calc(28px * var(--ws-density-scale));
}

.ws-doc-block:hover {
  border-color: var(--ws-border-light);
}

.ws-doc-block.selected {
  border-color: var(--ws-primary);
  background: var(--ws-primary-light);
}

.ws-doc-block.dragging {
  opacity: 0.5;
}

.block-handle {
  width: calc(20px * var(--ws-density-scale));
  min-width: calc(20px * var(--ws-density-scale));
  height: calc(24px * var(--ws-density-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--ws-text-tertiary);
  border-radius: var(--ws-radius-sm);
  opacity: 0;
  transition: opacity 0.12s;
  font-size: 12px;
}

.ws-doc-block:hover .block-handle {
  opacity: 1;
}

.block-handle:hover {
  background: var(--ws-surface-active);
  color: var(--ws-text-secondary);
}

.ws-doc-block [contenteditable] {
  flex: 1;
  outline: none;
  font-size: calc(15px * var(--ws-density-scale));
  line-height: 1.6;
  min-height: calc(24px * var(--ws-density-scale));
  padding: calc(2px * var(--ws-density-scale)) 0;
}
.ws-doc-block [contenteditable]:focus-visible {
  outline: 2px solid var(--ws-primary);
  outline-offset: -2px;
  border-radius: 2px;
}

.ws-doc-block [contenteditable]:empty::before {
  content: attr(data-placeholder);
  color: var(--ws-text-tertiary);
  pointer-events: none;
}

.ws-doc-block h1 [contenteditable] { font-size: calc(28px * var(--ws-density-scale)); font-weight: 700; }
.ws-doc-block h2 [contenteditable] { font-size: calc(22px * var(--ws-density-scale)); font-weight: 600; }
.ws-doc-block h3 [contenteditable] { font-size: calc(18px * var(--ws-density-scale)); font-weight: 600; }

.ws-block-menu {
  position: absolute;
  z-index: var(--ws-z-context-menu);
  background: var(--ws-surface);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-md);
  box-shadow: var(--ws-shadow-lg);
  padding: calc(4px * var(--ws-density-scale));
  min-width: calc(200px * var(--ws-density-scale));
  max-height: calc(280px * var(--ws-density-scale));
  overflow-y: auto;
  animation: slideDown 0.12s ease;
}

.ws-block-menu-item {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ws-density-scale));
  padding: calc(7px * var(--ws-density-scale)) calc(10px * var(--ws-density-scale));
  border-radius: var(--ws-radius-sm);
  cursor: pointer;
  font-size: calc(13px * var(--ws-density-scale));
  color: var(--ws-text);
  transition: background 0.1s;
}

.ws-block-menu-item:hover {
  background: var(--ws-primary-light);
}

.ws-block-menu-item .item-icon {
  width: calc(28px * var(--ws-density-scale));
  height: calc(28px * var(--ws-density-scale));
  border-radius: var(--ws-radius-sm);
  background: var(--ws-surface-active);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--ws-text-secondary);
}

.ws-block-menu-item .item-label {
  font-weight: 500;
}

.ws-block-menu-item .item-desc {
  font-size: calc(11px * var(--ws-density-scale));
  color: var(--ws-text-tertiary);
}

.ws-data-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ws-data-toolbar {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ws-density-scale));
  padding: calc(6px * var(--ws-density-scale)) calc(12px * var(--ws-density-scale));
  background: var(--ws-surface);
  border-bottom: 1px solid var(--ws-border-light);
  flex-wrap: wrap;
}

.ws-formula-bar {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--ws-density-scale));
  padding: calc(4px * var(--ws-density-scale)) calc(12px * var(--ws-density-scale));
  background: var(--ws-surface);
  border-bottom: 1px solid var(--ws-border-light);
  font-size: calc(12px * var(--ws-density-scale));
}

.ws-formula-bar .fx-label {
  font-weight: 600;
  color: var(--ws-text-tertiary);
  font-style: italic;
  min-width: calc(20px * var(--ws-density-scale));
  text-align: center;
}

.ws-formula-bar input {
  flex: 1;
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-sm);
  padding: calc(4px * var(--ws-density-scale)) calc(8px * var(--ws-density-scale));
  font-family: 'Consolas', 'SF Mono', monospace;
  font-size: calc(12px * var(--ws-density-scale));
  background: var(--ws-bg);
  color: var(--ws-text);
  outline: none;
  transition: border-color 0.12s;
}

.ws-formula-bar input:focus {
  border-color: var(--ws-primary);
}
.ws-formula-bar input:focus-visible {
  outline: 2px solid var(--ws-primary);
  outline-offset: -2px;
}

.ws-formula-hint {
  color: var(--ws-text-tertiary);
  font-size: 10px;
  white-space: nowrap;
}

.ws-grid-container {
  flex: 1;
  overflow: auto;
  background: var(--ws-bg);
}

.ws-grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(13px * var(--ws-density-scale));
}

.ws-grid-table th {
  position: sticky;
  top: 0;
  background: var(--ws-surface);
  font-weight: 600;
  text-align: left;
  padding: calc(6px * var(--ws-density-scale)) calc(10px * var(--ws-density-scale));
  border-bottom: 2px solid var(--ws-border);
  border-right: 1px solid var(--ws-border-light);
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  z-index: 2;
  font-size: calc(11px * var(--ws-density-scale));
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ws-text-secondary);
  position: relative;
}

.ws-grid-table th:hover {
  background: var(--ws-surface-hover);
}

.ws-grid-table th .sort-indicator {
  margin-left: 4px;
  font-size: 9px;
  color: var(--ws-text-tertiary);
}

.ws-grid-table th {
  cursor: pointer;
  user-select: none;
}

.ws-grid-table th:hover {
  background: var(--ws-bg-hover, rgba(0,0,0,0.03));
}

.ws-grid-table th .ws-col-header-text {
  pointer-events: none;
}

.ws-grid-table th .ws-col-filter-btn {
  margin-left: 4px;
  font-size: 10px;
  color: var(--ws-text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

.ws-grid-table th:hover .ws-col-filter-btn {
  opacity: 1;
}

.ws-grid-table th .resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: col-resize;
  background: transparent;
  transition: background 0.12s;
}

.ws-grid-table th .resize-handle:hover {
  background: var(--ws-primary);
}

.ws-grid-table td {
  padding: calc(5px * var(--ws-density-scale)) calc(10px * var(--ws-density-scale));
  border-bottom: 1px solid var(--ws-border-light);
  border-right: 1px solid var(--ws-border-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(250px * var(--ws-density-scale));
  height: calc(30px * var(--ws-density-scale));
}

.ws-grid-table td.selected {
  outline: 2px solid var(--ws-primary);
  outline-offset: -1px;
  background: var(--ws-primary-light);
}

.ws-grid-table td.editing {
  padding: 0;
}

.ws-grid-table td.editing input {
  width: 100%;
  height: 100%;
  border: 2px solid var(--ws-primary);
  border-radius: 0;
  padding: calc(5px * var(--ws-density-scale)) calc(10px * var(--ws-density-scale));
  font-family: var(--ws-font);
  font-size: calc(13px * var(--ws-density-scale));
  background: var(--ws-surface);
  color: var(--ws-text);
  outline: none;
}
.ws-grid-table td.editing input:focus-visible {
  outline: 2px solid var(--ws-primary);
  outline-offset: -2px;
}
.row-number {
  position: sticky;
  left: 0;
  background: var(--ws-surface);
  color: var(--ws-text-tertiary);
  text-align: center;
  font-size: calc(11px * var(--ws-density-scale));
  font-weight: 500;
  width: calc(40px * var(--ws-density-scale));
  min-width: calc(40px * var(--ws-density-scale));
  border-right: 1px solid var(--ws-border);
  z-index: 1;
  user-select: none;
}

.ws-sheet-tabs {
  display: flex;
  align-items: center;
  gap: calc(2px * var(--ws-density-scale));
  padding: calc(4px * var(--ws-density-scale)) calc(8px * var(--ws-density-scale));
  background: var(--ws-surface);
  border-top: 1px solid var(--ws-border-light);
  overflow-x: auto;
}

.ws-sheet-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: calc(5px * var(--ws-density-scale)) calc(14px * var(--ws-density-scale));
  border-radius: var(--ws-radius-sm) var(--ws-radius-sm) 0 0;
  font-size: calc(12px * var(--ws-density-scale));
  color: var(--ws-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  background: transparent;
  user-select: none;
}

.ws-sheet-tab:hover {
  background: var(--ws-surface-hover);
  color: var(--ws-text);
}

.ws-sheet-tab.active {
  background: var(--ws-surface);
  color: var(--ws-text);
  font-weight: 500;
  border-bottom-color: var(--ws-primary);
}

.ws-sheet-tab.add-tab {
  border: 1px dashed var(--ws-border);
  color: var(--ws-text-tertiary);
  font-size: calc(14px * var(--ws-density-scale));
  padding: calc(3px * var(--ws-density-scale)) calc(10px * var(--ws-density-scale));
}

.ws-sheet-tab.add-tab:hover {
  border-color: var(--ws-primary);
  color: var(--ws-primary);
  background: var(--ws-primary-light);
}

.ws-sheet-tab-label {
  cursor: inherit;
}

.ws-sheet-tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--ws-text-tertiary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  transition: background 0.1s, color 0.1s;
}

.ws-sheet-tab-close:hover {
  background: #ffe0e0;
  color: #d32f2f;
}

.ws-sheet-tab-rename-input {
  width: 80px;
  height: 22px;
  border: 1px solid var(--ws-primary);
  border-radius: 3px;
  padding: 0 4px;
  font-size: 12px;
  font-family: inherit;
  background: var(--ws-surface);
  color: var(--ws-text);
  outline: none;
}

.ws-next-step-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid #c8e6c9;
  border-radius: 8px;
  background: #f1f8e9;
  animation: fadeIn 0.3s ease;
}

.ws-next-step-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #4caf50;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.ws-next-step-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.ws-next-step-copy strong {
  font-size: 13px;
  color: #2e7d32;
}

.ws-next-step-copy span {
  font-size: 12px;
  color: var(--ws-text-secondary);
}

.ws-next-step-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.ws-slash-menu {
  z-index: 1000;
  min-width: 220px;
  max-width: 300px;
  background: var(--ws-surface);
  border: 1px solid var(--ws-border);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0,0,0,.15);
  padding: 6px;
  font-size: 13px;
  animation: fadeIn 0.15s ease;
}

.ws-slash-menu-filter {
  width: 100%;
  height: 28px;
  border: 1px solid var(--ws-border-light);
  border-radius: 5px;
  padding: 0 8px;
  font-size: 12px;
  font-family: inherit;
  margin-bottom: 4px;
  background: var(--ws-surface);
  color: var(--ws-text);
  outline: none;
}

.ws-slash-menu-filter:focus {
  border-color: var(--ws-primary);
}

.ws-slash-menu-list {
  max-height: 220px;
  overflow-y: auto;
}

.ws-slash-menu-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--ws-text);
  transition: background 0.1s;
}

.ws-slash-menu-item:hover,
.ws-slash-menu-item:focus-visible {
  background: var(--ws-primary-light);
  outline: none;
}

.ws-slash-menu-item-label {
  font-weight: 500;
  font-size: 13px;
}

.ws-slash-menu-item-desc {
  font-size: 11px;
  color: var(--ws-text-tertiary);
}

.ws-query-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.ws-query-heading-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.ws-query-title {
  margin: 0;
}

.ws-query-desc {
  font-size: 13px;
  color: var(--ws-text-secondary);
  margin-bottom: 12px;
}

.ws-query-editor {
  flex: 1;
  padding: calc(12px * var(--ws-density-scale)) calc(24px * var(--ws-density-scale));
  overflow-y: auto;
}

.ws-query-step {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ws-density-scale));
  padding: calc(12px * var(--ws-density-scale));
  background: var(--ws-surface);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-md);
  margin-bottom: calc(8px * var(--ws-density-scale));
  transition: border-color 0.12s;
}

.ws-query-step:hover {
  border-color: var(--ws-text-tertiary);
}

.ws-query-step-num {
  width: calc(28px * var(--ws-density-scale));
  height: calc(28px * var(--ws-density-scale));
  border-radius: 50%;
  background: var(--ws-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(12px * var(--ws-density-scale));
  font-weight: 600;
  min-width: calc(28px * var(--ws-density-scale));
}

.ws-query-result {
  border-top: 1px solid var(--ws-border);
  padding: calc(16px * var(--ws-density-scale));
  overflow: auto;
  max-height: 40%;
  background: var(--ws-surface);
}

.ws-flow {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ws-bg);
  background-image: radial-gradient(var(--ws-border-light) 1px, transparent 1px);
  background-size: calc(20px * var(--ws-density-scale)) calc(20px * var(--ws-density-scale));
}

.ws-flow-canvas {
  position: absolute;
  inset: 0;
}

.ws-flow-node {
  position: absolute;
  background: var(--ws-surface);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-md);
  box-shadow: var(--ws-shadow-sm);
  min-width: calc(180px * var(--ws-density-scale));
  cursor: grab;
  transition: box-shadow 0.12s, border-color 0.12s;
  user-select: none;
}

.ws-flow-node:hover {
  box-shadow: var(--ws-shadow-md);
}

.ws-flow-node.selected {
  border-color: var(--ws-primary);
  box-shadow: 0 0 0 2px var(--ws-primary-light);
}

.ws-flow-node-header {
  padding: calc(8px * var(--ws-density-scale)) calc(12px * var(--ws-density-scale));
  border-radius: var(--ws-radius-md) var(--ws-radius-md) 0 0;
  font-size: calc(12px * var(--ws-density-scale));
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: calc(6px * var(--ws-density-scale));
}

.ws-flow-node-header.type-tool { background: var(--ws-primary-light); color: var(--ws-primary); }
.ws-flow-node-header.type-input { background: var(--ws-success-light); color: var(--ws-success); }
.ws-flow-node-header.type-output { background: var(--ws-warning-light); color: var(--ws-warning); }
.ws-flow-node-header.type-logic { background: var(--ws-advanced-light); color: var(--ws-advanced); }

.ws-flow-node-body {
  padding: calc(10px * var(--ws-density-scale)) calc(12px * var(--ws-density-scale));
  font-size: calc(12px * var(--ws-density-scale));
  color: var(--ws-text-secondary);
}

.ws-flow-port {
  position: absolute;
  width: calc(12px * var(--ws-density-scale));
  height: calc(12px * var(--ws-density-scale));
  border-radius: 50%;
  background: var(--ws-surface);
  border: 2px solid var(--ws-border);
  cursor: crosshair;
  transition: border-color 0.12s, background 0.12s;
}

.ws-flow-port:hover {
  border-color: var(--ws-primary);
  background: var(--ws-primary-light);
}

.ws-flow-port.left {
  left: calc(-6px * var(--ws-density-scale));
  top: 50%;
  transform: translateY(-50%);
}

.ws-flow-port.right {
  right: calc(-6px * var(--ws-density-scale));
  top: 50%;
  transform: translateY(-50%);
}

.ws-flow-edge {
  fill: none;
  stroke: var(--ws-border);
  stroke-width: 2;
  transition: stroke 0.12s;
}

.ws-flow-edge:hover {
  stroke: var(--ws-primary);
}

.ws-flow-toolbar {
  position: absolute;
  bottom: calc(16px * var(--ws-density-scale));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(4px * var(--ws-density-scale));
  background: var(--ws-surface);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-lg);
  padding: calc(4px * var(--ws-density-scale));
  box-shadow: var(--ws-shadow-lg);
}

.ws-tools-search {
  width: 100%;
  padding: calc(10px * var(--ws-density-scale)) calc(14px * var(--ws-density-scale));
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-md);
  font-size: calc(14px * var(--ws-density-scale));
  font-family: var(--ws-font);
  background: var(--ws-surface);
  color: var(--ws-text);
  outline: none;
  transition: border-color 0.12s;
  margin-bottom: calc(16px * var(--ws-density-scale));
}

.ws-tools-search:focus {
  border-color: var(--ws-primary);
}

.ws-tools-search::placeholder {
  color: var(--ws-text-tertiary);
}

.ws-tool-card {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--ws-density-scale));
  padding: calc(12px * var(--ws-density-scale));
  background: var(--ws-surface);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-md);
  cursor: pointer;
  transition: box-shadow 0.12s, border-color 0.12s;
}

.ws-tool-card:hover {
  box-shadow: var(--ws-shadow-sm);
  border-color: var(--ws-primary);
}

.ws-tool-card .tool-icon {
  width: calc(36px * var(--ws-density-scale));
  height: calc(36px * var(--ws-density-scale));
  border-radius: var(--ws-radius-md);
  background: var(--ws-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--ws-primary);
}

.ws-tool-card .tool-info {
  flex: 1;
  min-width: 0;
}

.ws-tool-card .tool-name {
  font-size: calc(13px * var(--ws-density-scale));
  font-weight: 600;
  color: var(--ws-text);
}

.ws-tool-card .tool-summary {
  font-size: calc(11px * var(--ws-density-scale));
  color: var(--ws-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-tool-card .tool-fav {
  width: calc(28px * var(--ws-density-scale));
  height: calc(28px * var(--ws-density-scale));
  border-radius: var(--ws-radius-sm);
  border: none;
  background: transparent;
  color: var(--ws-text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s, background 0.12s;
}

.ws-tool-card .tool-fav:hover {
  color: var(--ws-warning);
  background: var(--ws-warning-light);
}

.ws-tool-card .tool-fav.active {
  color: var(--ws-warning);
}

.ws-module-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ws-module-title { font-size: 22px; font-weight: 700; }
.ws-status-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 8px; font-size: 10px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.ws-status-demo { color: #7d5b17; background: #fff0cf; }
.ws-status-limited { color: #36518f; background: #e7edff; }
.ws-review-draft { color: #7d5b17; background: #fff0cf; }
.ws-review-reviewed { color: #1f6f43; background: #e4f5ec; }
.ws-review-verified { color: #0f4c81; background: #e4eff9; }
.ws-cell-low-confidence { background: #fdecec !important; color: #8a1f1f !important; }
.ws-cell-low-confidence::after { content: ' !'; color: #b3261e; font-weight: 800; }
html.theme-dark .ws-review-draft { color: #f3c56d; background: rgba(232, 160, 80, .14); }
html.theme-dark .ws-review-reviewed { color: #9fd8b5; background: rgba(74, 168, 117, .14); }
html.theme-dark .ws-review-verified { color: #a9c9ef; background: rgba(110, 150, 220, .14); }
html.theme-dark .ws-cell-low-confidence { background: rgba(179, 38, 30, .22) !important; color: #ffb3ad !important; }
.ws-review-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-height: 320px; }
.ws-review-modal-panel { border: 1px solid var(--ws-border); border-radius: 8px; overflow: hidden; background: var(--ws-surface); }
.ws-review-modal-panel-header { padding: 8px 10px; font-size: 11px; font-weight: 700; border-bottom: 1px solid var(--ws-border); background: #f7f8f6; color: var(--ws-text-secondary); }
.ws-review-modal-panel-body { padding: 10px; max-height: 380px; overflow: auto; font-size: 12px; }
.ws-review-modal-panel-body img { max-width: 100%; border-radius: 6px; display: block; }
.ws-review-stats { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.ws-review-stat { padding: 6px 10px; border-radius: 6px; background: #f2f4f7; font-size: 11px; color: var(--ws-text-secondary); }
html.theme-dark .ws-review-stat { background: rgba(255,255,255,.05); }
.ws-review-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ws-review-table th, .ws-review-table td { border: 1px solid var(--ws-border); padding: 5px 8px; text-align: left; }
.ws-review-table th { background: #f7f8f6; font-size: 11px; }
.ws-review-table .conf { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.ws-review-table .conf-high { background: #e4f5ec; color: #1f6f43; }
.ws-review-table .conf-low { background: #fdecec; color: #8a1f1f; }
html.theme-dark .ws-review-table .conf-high { background: rgba(74,168,117,.14); color: #9fd8b5; }
html.theme-dark .ws-review-table .conf-low { background: rgba(179,38,30,.22); color: #ffb3ad; }
.ws-lineage { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; padding: 12px; }
.ws-lineage-node { padding: 5px 9px; border-radius: 6px; background: #eef1f6; color: var(--ws-text); font-weight: 600; white-space: nowrap; }
.ws-lineage-arrow { color: var(--ws-text-tertiary); }
.ws-lineage-node.root { background: #e7edff; color: #36518f; }
.ws-lineage-node.derived { background: #e4f5ec; color: #1f6f43; }
.ws-lineage-node.target { background: #fdecec; color: #8a1f1f; }
html.theme-dark .ws-lineage-node { background: rgba(255,255,255,.06); }
html.theme-dark .ws-lineage-node.root { background: rgba(120,135,255,.14); color: #b7c3ff; }
html.theme-dark .ws-lineage-node.derived { background: rgba(74,168,117,.14); color: #9fd8b5; }
html.theme-dark .ws-lineage-node.target { background: rgba(179,38,30,.22); color: #ffb3ad; }
.ws-flow-status { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid var(--ws-border); border-radius: 8px; background: var(--ws-surface); color: var(--ws-text-secondary); font-size: 11px; box-shadow: var(--ws-shadow-sm); }
html.theme-dark .ws-status-demo { color: #f3c56d; background: rgba(232, 160, 80, .14); }
html.theme-dark .ws-status-limited { color: #b7c3ff; background: rgba(120, 135, 255, .14); }

.ws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: calc(7px * var(--ws-density-scale)) calc(14px * var(--ws-density-scale));
  border-radius: var(--ws-radius-md);
  font-family: var(--ws-font);
  font-size: calc(13px * var(--ws-density-scale));
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s, border-color 0.12s;
  white-space: nowrap;
  line-height: 1;
}

.ws-btn:active {
  transform: scale(0.98);
}

.ws-btn-primary {
  background: var(--ws-primary);
  color: #fff;
  border-color: var(--ws-primary);
}

.ws-btn-primary:hover {
  background: var(--ws-primary-hover);
  border-color: var(--ws-primary-hover);
}

.ws-btn-secondary {
  background: var(--ws-surface);
  color: var(--ws-text);
  border-color: var(--ws-border);
}

.ws-btn-secondary:hover {
  background: var(--ws-surface-hover);
  border-color: var(--ws-text-tertiary);
}

.ws-btn-ghost {
  background: transparent;
  color: var(--ws-text-secondary);
}

.ws-btn-ghost:hover {
  background: var(--ws-surface-active);
  color: var(--ws-text);
}

.ws-btn-danger {
  background: var(--ws-error);
  color: #fff;
  border-color: var(--ws-error);
}

.ws-btn-danger:hover {
  background: #c43232;
}

.ws-btn-sm {
  padding: calc(4px * var(--ws-density-scale)) calc(10px * var(--ws-density-scale));
  font-size: calc(12px * var(--ws-density-scale));
}

.ws-btn-lg {
  padding: calc(10px * var(--ws-density-scale)) calc(20px * var(--ws-density-scale));
  font-size: calc(14px * var(--ws-density-scale));
}

.ws-card {
  background: var(--ws-surface);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-md);
  padding: calc(16px * var(--ws-density-scale));
  box-shadow: var(--ws-shadow-sm);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.ws-card:hover {
  box-shadow: var(--ws-shadow-md);
}

.ws-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--ws-z-modal);
  animation: fadeIn 0.15s ease;
  padding: 24px;
}

.ws-modal {
  background: var(--ws-surface);
  border-radius: var(--ws-radius-xl);
  box-shadow: var(--ws-shadow-xl);
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  animation: slideUp 0.2s ease;
  overflow: hidden;
}

.ws-modal.size-lg { max-width: 800px; }
.ws-modal.size-xl { max-width: 1000px; }

.ws-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(16px * var(--ws-density-scale)) calc(20px * var(--ws-density-scale));
  border-bottom: 1px solid var(--ws-border-light);
}

.ws-modal-title {
  font-size: calc(16px * var(--ws-density-scale));
  font-weight: 600;
  color: var(--ws-text);
}

.ws-modal-close {
  width: calc(28px * var(--ws-density-scale));
  height: calc(28px * var(--ws-density-scale));
  border-radius: var(--ws-radius-sm);
  border: none;
  background: transparent;
  color: var(--ws-text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background 0.12s, color 0.12s;
}

.ws-modal-close:hover {
  background: var(--ws-surface-active);
  color: var(--ws-text);
}

.ws-modal-body {
  padding: calc(20px * var(--ws-density-scale));
  overflow-y: auto;
  flex: 1;
}

.ws-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(8px * var(--ws-density-scale));
  padding: calc(12px * var(--ws-density-scale)) calc(20px * var(--ws-density-scale));
  border-top: 1px solid var(--ws-border-light);
}

.ws-data-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
}

.ws-data-card-badge {
  flex: none;
  padding: 3px 6px;
  border: 1px solid var(--ws-border);
  border-radius: 999px;
  color: var(--ws-text-secondary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}

.ws-invoice-action-button {
  margin-top: 8px;
}

.ws-invoice-modal-content {
  display: grid;
  gap: 16px;
}

.ws-invoice-intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-md);
  background: var(--ws-surface-active);
}

.ws-invoice-intro-icon,
.ws-invoice-summary-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--ws-text);
  color: var(--ws-bg);
}

.ws-invoice-intro strong,
.ws-invoice-summary strong {
  display: block;
  color: var(--ws-text);
  font-size: 14px;
}

.ws-invoice-intro p {
  margin: 4px 0 0;
  color: var(--ws-text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.ws-invoice-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 12px;
}

.ws-invoice-upload-card,
.ws-invoice-language-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px dashed var(--ws-border);
  border-radius: var(--ws-radius-md);
  background: var(--ws-bg);
}

.ws-invoice-upload-card {
  position: relative;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.ws-invoice-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.ws-invoice-file-name {
  flex: 1 1 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--ws-text-secondary);
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-invoice-language-field span {
  color: var(--ws-text-tertiary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ws-invoice-language {
  width: 100%;
}

.ws-invoice-privacy-note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: -4px 0 0;
  color: var(--ws-text-tertiary);
  font-size: 11px;
  line-height: 1.5;
}

.ws-invoice-status {
  color: var(--ws-text);
  font-size: 12px;
  font-weight: 600;
}

.ws-invoice-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ws-border-light);
}

.ws-invoice-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--ws-text);
  transition: width .2s ease;
}

.ws-invoice-progress-text {
  color: var(--ws-text-tertiary);
  font-size: 11px;
}

.ws-invoice-results {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.ws-invoice-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-md);
}

.ws-invoice-summary-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.ws-invoice-summary small {
  display: block;
  margin-top: 3px;
  color: var(--ws-text-tertiary);
  font-size: 11px;
}

.ws-invoice-confidence {
  margin-left: auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--ws-surface-active);
  color: var(--ws-text-secondary);
  font-size: 11px;
  font-weight: 800;
}

.ws-invoice-confidence.is-good { color: #176b3a; background: #e8f6ed; }
.ws-invoice-confidence.is-mid { color: #8a5a00; background: #fff4d8; }
.ws-invoice-confidence.is-low { color: #9d2d2d; background: #fde9e9; }

.ws-invoice-field-input {
  width: 100%;
  min-width: 120px;
  padding: 6px 8px;
  font-size: 12px;
}

.ws-invoice-read-confidence {
  color: var(--ws-text-secondary);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.ws-invoice-read-confidence.is-pending {
  color: var(--ws-text-tertiary);
  font-weight: 500;
}

.ws-invoice-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ws-invoice-section-heading strong {
  color: var(--ws-text);
  font-size: 12px;
}

.ws-invoice-section-heading span {
  color: var(--ws-text-tertiary);
  font-size: 11px;
}

.ws-invoice-lines-section,
.ws-invoice-raw-section {
  min-width: 0;
  padding-top: 4px;
}

.ws-invoice-lines-table tbody td {
  color: var(--ws-text-secondary);
}

.ws-invoice-raw-text {
  display: block;
  width: 100%;
  min-height: 120px;
  resize: vertical;
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-sm);
  padding: 10px;
  background: var(--ws-bg);
  color: var(--ws-text);
  font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.ws-invoice-raw-section .ws-btn {
  margin-top: 8px;
}

.ws-toast-container {
  position: fixed;
  bottom: calc(16px * var(--ws-density-scale));
  right: calc(16px * var(--ws-density-scale));
  z-index: var(--ws-z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: calc(8px * var(--ws-density-scale));
  pointer-events: none;
}

.ws-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ws-density-scale));
  padding: calc(10px * var(--ws-density-scale)) calc(14px * var(--ws-density-scale));
  background: var(--ws-surface);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-md);
  box-shadow: var(--ws-shadow-lg);
  font-size: calc(13px * var(--ws-density-scale));
  color: var(--ws-text);
  min-width: calc(280px * var(--ws-density-scale));
  max-width: calc(400px * var(--ws-density-scale));
  animation: slideInRight 0.25s ease;
  border-left: 3px solid var(--ws-text-tertiary);
}

.ws-toast.success { border-left-color: var(--ws-success); }
.ws-toast.error { border-left-color: var(--ws-error); }
.ws-toast.warning { border-left-color: var(--ws-warning); }
.ws-toast.info { border-left-color: var(--ws-primary); }

.ws-palette-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
  z-index: var(--ws-z-palette);
  animation: fadeIn 0.12s ease;
}

.ws-palette {
  background: var(--ws-surface);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-xl);
  box-shadow: var(--ws-shadow-xl);
  width: 100%;
  max-width: 560px;
  max-height: calc(50vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideDown 0.12s ease;
}

.ws-palette-input {
  width: 100%;
  padding: calc(14px * var(--ws-density-scale)) calc(18px * var(--ws-density-scale));
  border: none;
  border-bottom: 1px solid var(--ws-border-light);
  font-size: calc(15px * var(--ws-density-scale));
  font-family: var(--ws-font);
  background: transparent;
  color: var(--ws-text);
  outline: none;
}
.ws-palette-input:focus-visible {
  outline: 2px solid var(--ws-primary);
  outline-offset: -2px;
}
.ws-palette-input::placeholder {
  color: var(--ws-text-tertiary);
}

.ws-palette-results {
  overflow-y: auto;
  padding: calc(6px * var(--ws-density-scale));
}

.ws-palette-item {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ws-density-scale));
  padding: calc(8px * var(--ws-density-scale)) calc(12px * var(--ws-density-scale));
  border-radius: var(--ws-radius-md);
  cursor: pointer;
  font-size: calc(13px * var(--ws-density-scale));
  color: var(--ws-text);
  transition: background 0.08s;
}

.ws-palette-item:hover,
.ws-palette-item.selected {
  background: var(--ws-primary-light);
}

.ws-palette-item .item-icon {
  width: calc(24px * var(--ws-density-scale));
  height: calc(24px * var(--ws-density-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ws-text-secondary);
}

.ws-palette-item .item-label {
  flex: 1;
}

.ws-palette-item .item-shortcut {
  font-size: calc(11px * var(--ws-density-scale));
  color: var(--ws-text-tertiary);
  background: var(--ws-surface-active);
  padding: 2px 6px;
  border-radius: var(--ws-radius-sm);
  font-family: 'SF Mono', 'Consolas', monospace;
}

.ws-context-menu {
  position: fixed;
  z-index: var(--ws-z-context-menu);
  background: var(--ws-surface);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius-md);
  box-shadow: var(--ws-shadow-lg);
  padding: calc(4px * var(--ws-density-scale));
  min-width: calc(180px * var(--ws-density-scale));
  animation: slideDown 0.1s ease;
}

.ws-context-menu-item {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ws-density-scale));
  padding: calc(7px * var(--ws-density-scale)) calc(10px * var(--ws-density-scale));
  border-radius: var(--ws-radius-sm);
  cursor: pointer;
  font-size: calc(13px * var(--ws-density-scale));
  color: var(--ws-text);
  transition: background 0.08s;
}

.ws-context-menu-item:hover {
  background: var(--ws-primary-light);
}

.ws-context-menu-item.danger {
  color: var(--ws-error);
}

.ws-context-menu-item.danger:hover {
  background: var(--ws-error-light);
}

.ws-context-menu-divider {
  height: 1px;
  background: var(--ws-border-light);
  margin: calc(4px * var(--ws-density-scale)) 0;
}

.ws-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(48px * var(--ws-density-scale)) calc(24px * var(--ws-density-scale));
  text-align: center;
  animation: fadeIn 0.3s ease;
}

.ws-empty-icon {
  width: calc(64px * var(--ws-density-scale));
  height: calc(64px * var(--ws-density-scale));
  border-radius: var(--ws-radius-xl);
  background: var(--ws-surface-active);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(28px * var(--ws-density-scale));
  color: var(--ws-text-tertiary);
  margin-bottom: calc(16px * var(--ws-density-scale));
}

.ws-empty-title {
  font-size: calc(16px * var(--ws-density-scale));
  font-weight: 600;
  color: var(--ws-text);
  margin-bottom: calc(6px * var(--ws-density-scale));
}

.ws-empty-text {
  font-size: calc(13px * var(--ws-density-scale));
  color: var(--ws-text-secondary);
  max-width: calc(360px * var(--ws-density-scale));
  margin-bottom: calc(16px * var(--ws-density-scale));
}

@media (max-width: 1366px) {
  .ws-content {
    padding: calc(20px * var(--ws-density-scale)) calc(24px * var(--ws-density-scale));
  }
  .ws-bento {
    gap: calc(10px * var(--ws-density-scale));
  }
}

@media (max-width: 768px) {
  #ws-menu-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    width: 32px;
    padding: 0;
  }
  .ws-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    box-shadow: none;
    z-index: var(--ws-z-sidebar);
  }
  .ws-sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: var(--ws-shadow-xl);
  }
  .ws-content {
    padding: calc(14px * var(--ws-density-scale)) calc(14px * var(--ws-density-scale));
  }
  .ws-bento {
    grid-template-columns: 1fr;
  }
  .ws-bento-card.span-2 {
    grid-column: span 1;
  }
  .ws-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-statusbar-hint { display: none; }
  .ws-context-panel.open {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    z-index: var(--ws-z-sidebar);
    box-shadow: var(--ws-shadow-xl);
  }
  .ws-card-grid {
    grid-template-columns: 1fr;
  }
  .ws-invoice-upload-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .ws-modal {
    max-width: 100%;
    border-radius: var(--ws-radius-lg);
    margin: 8px;
    max-height: calc(100vh - 16px);
  }
  .ws-modal-overlay {
    padding: 8px;
  }
  .ws-topbar {
    padding: 0 calc(10px * var(--ws-density-scale));
  }
  .ws-content {
    padding: calc(10px * var(--ws-density-scale));
  }
  .ws-statusbar {
    font-size: calc(10px * var(--ws-density-scale));
    padding: 0 calc(8px * var(--ws-density-scale));
  }
  .ws-palette {
    max-width: calc(100% - 16px);
    margin: 0 8px;
  }
  .ws-start .hero h1 {
    font-size: calc(22px * var(--ws-density-scale));
  }
  .ws-template-grid { grid-template-columns: 1fr; }
  .ws-quick-actions .ws-btn { flex: 1 1 100%; }
  .ws-save-state { display: none; }
  .ws-topbar-search { padding-inline: 8px; }
  .ws-invoice-upload-card { align-items: stretch; flex-direction: column; }
  .ws-invoice-upload-card .ws-btn { width: 100%; }
  .ws-invoice-section-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
  .ws-topbar-search kbd { display: none; }
  .ws-home-trust { display: grid; gap: 6px; }
  .ws-ready-card { align-items: flex-start; flex-wrap: wrap; }
  .ws-ready-card .ws-btn { margin-left: 52px; }
  .ws-intake-gate { align-items: flex-start; flex-wrap: wrap; }
  .ws-intake-gate .ws-btn { margin-left: 48px; }
  .ws-formula-hint { display: none; }
}

.ws-dash-widget {
  background: var(--ws-bg-secondary);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius);
  padding: calc(16px * var(--ws-density-scale));
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--ws-density-scale));
  transition: border-color var(--ws-transition);
}

.ws-dash-widget:hover {
  border-color: var(--ws-blue);
}

.ws-dash-widget .widget-title {
  font-size: calc(11px * var(--ws-density-scale));
  font-weight: 600;
  color: var(--ws-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ws-dash-widget .widget-value {
  font-size: calc(24px * var(--ws-density-scale));
  font-weight: 700;
  color: var(--ws-text);
}

.ws-dash-widget .widget-chart {
  height: 40px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.ws-dash-widget .widget-chart .bar {
  flex: 1;
  background: var(--ws-blue);
  border-radius: 2px 2px 0 0;
  opacity: 0.6;
  transition: opacity var(--ws-transition);
}

.ws-dash-widget .widget-chart .bar:hover {
  opacity: 1;
}

.ws-dashboard-shell {
  width: 100%;
  display: grid;
  gap: 16px;
  color: var(--ws-text);
}

.ws-dashboard-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 2px 2px 16px;
  border-bottom: 1px solid var(--ws-border);
}

.ws-dashboard-title-block {
  min-width: 0;
}

.ws-dashboard-title-block h1 {
  margin: 5px 0 4px;
  color: var(--ws-text);
  font-family: var(--ws-display);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: .98;
}

.ws-dashboard-title-block p {
  max-width: 640px;
  margin: 0;
  color: var(--ws-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.ws-dashboard-header-actions,
.ws-dashboard-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.ws-dashboard-header-actions {
  justify-content: flex-end;
}

.ws-dashboard-controls {
  display: grid;
  grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr);
  gap: 10px;
}

.ws-dashboard-control-group {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 11px 12px;
  border: 1px solid var(--ws-border);
  background: var(--ws-cream);
}

.ws-dashboard-control-group label {
  color: var(--ws-text-tertiary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ws-dashboard-source-control {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.ws-dashboard-source-control label {
  grid-column: 1 / -1;
}

.ws-dashboard-select,
.ws-dashboard-filter-input {
  min-width: 0;
  height: 34px;
  border: 1px solid var(--ws-border);
  border-radius: 5px;
  background: var(--ws-surface);
  color: var(--ws-text);
  font: inherit;
  font-size: 11px;
  outline: none;
}

.ws-dashboard-select {
  padding: 0 9px;
}

.ws-dashboard-filter-input {
  flex: 1 1 150px;
  padding: 0 10px;
}

.ws-dashboard-select:focus,
.ws-dashboard-filter-input:focus {
  border-color: var(--ws-primary);
  box-shadow: 0 0 0 2px var(--ws-primary-light);
}

.ws-dashboard-view-data {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid var(--ws-border);
  border-radius: 5px;
  background: var(--ws-surface);
  color: var(--ws-text-secondary);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.ws-dashboard-view-data:hover {
  border-color: var(--ws-primary);
  color: var(--ws-text);
}

.ws-dashboard-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(150px, 1.3fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--ws-border);
  background: var(--ws-border);
}

.ws-dashboard-summary > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 12px 14px;
  background: var(--ws-surface);
}

.ws-dashboard-summary strong {
  color: var(--ws-text);
  font-family: var(--ws-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.04em;
}

.ws-dashboard-summary span {
  overflow: hidden;
  color: var(--ws-text-tertiary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.ws-dashboard-summary-source {
  align-items: center !important;
  justify-content: flex-end;
  gap: 6px !important;
  color: var(--ws-text-secondary);
}

.ws-dashboard-summary-source svg {
  color: var(--ws-success);
}

.ws-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}

.ws-dashboard-widget-card {
  min-width: 0;
  min-height: 170px;
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--ws-border);
  border-radius: 8px;
  background: var(--ws-surface);
  box-shadow: 0 2px 0 rgba(17, 17, 17, .03);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.ws-dashboard-widget-card:hover {
  border-color: var(--ws-text);
  box-shadow: var(--ws-shadow-sm);
  transform: translateY(-1px);
}

.ws-dashboard-widget-kpi {
  grid-column: span 3;
  min-height: 150px;
}

.ws-dashboard-widget-bar,
.ws-dashboard-widget-line,
.ws-dashboard-widget-pie,
.ws-dashboard-widget-donut {
  grid-column: span 6;
  min-height: 280px;
}

.ws-dashboard-widget-table {
  grid-column: span 6;
  min-height: 280px;
}

.ws-dashboard-widget-insights {
  grid-column: span 4;
}

.ws-dashboard-widget-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ws-dashboard-widget-heading {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ws-dashboard-widget-type {
  color: var(--ws-text-tertiary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ws-dashboard-widget-heading h3 {
  overflow: hidden;
  color: var(--ws-text);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-dashboard-widget-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 3px;
}

.ws-dashboard-widget-action {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--ws-text-tertiary);
  cursor: pointer;
}

.ws-dashboard-widget-action:hover:not(:disabled) {
  border-color: var(--ws-border);
  background: var(--ws-cream);
  color: var(--ws-text);
}

.ws-dashboard-widget-action:disabled {
  cursor: not-allowed;
  opacity: .3;
}

.ws-dashboard-kpi {
  min-height: 78px;
  display: flex;
  justify-content: center;
  gap: 4px;
}

.ws-dashboard-kpi strong {
  color: var(--ws-text);
  font-family: var(--ws-display);
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 500;
  letter-spacing: -.06em;
  line-height: 1;
}

.ws-dashboard-kpi span {
  color: var(--ws-text-secondary);
  font-size: 11px;
}

.ws-dashboard-widget-foot {
  margin-top: auto;
  color: var(--ws-text-tertiary);
  font-size: 10px;
  line-height: 1.4;
}

.ws-dashboard-chart {
  min-height: 205px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-top: 1px solid var(--ws-border-light);
  border-bottom: 1px solid var(--ws-border-light);
  color: var(--ws-text-secondary);
}

.ws-dashboard-chart-svg {
  width: 100%;
  height: 220px;
  overflow: visible;
}

.ws-dashboard-chart-gridline {
  stroke: var(--ws-border-light);
  stroke-width: 1;
}

.ws-dashboard-chart-tick,
.ws-dashboard-chart-label {
  fill: var(--ws-text-tertiary);
  font-family: var(--ws-font);
  font-size: 10px;
}

.ws-dashboard-chart-bar {
  fill: var(--ws-primary);
  opacity: .86;
  transition: opacity .16s ease;
}

.ws-dashboard-chart-bar:hover {
  opacity: 1;
}

.ws-dashboard-chart-line {
  fill: none;
  stroke: var(--ws-primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.ws-dashboard-chart-dot {
  fill: var(--ws-surface);
  stroke: var(--ws-primary);
  stroke-width: 3;
}

.ws-dashboard-table-scroll {
  min-height: 205px;
  overflow: auto;
  border-top: 1px solid var(--ws-border-light);
  border-bottom: 1px solid var(--ws-border-light);
}

.ws-dashboard-data-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  color: var(--ws-text-secondary);
  font-size: 10px;
}

.ws-dashboard-data-table th,
.ws-dashboard-data-table td {
  max-width: 180px;
  padding: 8px 9px;
  overflow: hidden;
  border-bottom: 1px solid var(--ws-border-light);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-dashboard-data-table th {
  background: var(--ws-cream);
  color: var(--ws-text);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ws-dashboard-data-table tbody tr:hover td {
  background: var(--ws-surface-hover);
}

.ws-dashboard-insights {
  display: grid;
  gap: 7px;
}

.ws-dashboard-insight {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--ws-border-light);
  background: var(--ws-cream);
}

.ws-dashboard-insight span {
  overflow: hidden;
  color: var(--ws-text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-dashboard-insight strong {
  color: var(--ws-text);
  font-size: 14px;
}

.ws-dashboard-no-data,
.ws-dashboard-no-widgets {
  min-height: 100px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--ws-text-tertiary);
  font-size: 11px;
  text-align: center;
}

.ws-dashboard-no-widgets {
  min-height: 210px;
  grid-column: 1 / -1;
  border: 1px dashed var(--ws-border);
  background: var(--ws-cream);
}

.ws-dashboard-no-widgets strong {
  color: var(--ws-text);
  font-size: 14px;
}

.ws-dashboard-empty,
.ws-dashboard-loading {
  min-height: 480px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 11px;
  padding: 32px;
  border: 1px solid var(--ws-border);
  background: var(--ws-cream);
  text-align: center;
}

.ws-dashboard-loading {
  min-height: 280px;
  color: var(--ws-text-secondary);
  font-size: 12px;
}

.ws-dashboard-empty-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ws-primary);
  color: #fff;
}

.ws-dashboard-empty h2 {
  color: var(--ws-text);
  font-family: var(--ws-display);
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 500;
  letter-spacing: -.04em;
}

.ws-dashboard-empty p {
  max-width: 520px;
  color: var(--ws-text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.ws-dashboard-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 5px;
}

.ws-dashboard-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ws-text-tertiary);
  font-size: 10px;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--ws-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--ws-text-tertiary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ws-text-secondary);
}

::-webkit-scrollbar-corner {
  background: var(--ws-bg);
}

.ws-form-group {
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--ws-density-scale));
  margin-bottom: calc(12px * var(--ws-density-scale));
}

.ws-form-group label {
  font-size: calc(12px * var(--ws-density-scale));
  font-weight: 600;
  color: var(--ws-text-secondary);
}

.ws-input {
  width: 100%;
  padding: calc(8px * var(--ws-density-scale)) calc(12px * var(--ws-density-scale));
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius);
  background: var(--ws-bg);
  color: var(--ws-text);
  font-family: var(--ws-font);
  font-size: calc(13px * var(--ws-density-scale));
  transition: border-color var(--ws-transition);
  box-sizing: border-box;
}

.ws-input:focus {
  outline: none;
  border-color: var(--ws-blue);
  box-shadow: 0 0 0 3px rgba(81, 103, 232, 0.15);
}

.ws-input::placeholder {
  color: var(--ws-text-tertiary);
}

/* -------------------------------------------------------------------------- */
/* APLUNO dark mode: surfaces and component overrides */

html.theme-dark {
  --ws-bg: #0F1117;
  --ws-bg-secondary: #181B23;
  --ws-surface: #1C1F2B;
  --ws-surface-hover: #252836;
  --ws-surface-active: #1E3A5F;
  --ws-primary: #60A5FA;
  --ws-primary-hover: #93BBFD;
  --ws-primary-light: rgba(96, 165, 250, 0.12);
  --ws-primary-medium: rgba(96, 165, 250, 0.20);
  --ws-advanced: #A78BFA;
  --ws-advanced-light: rgba(167, 139, 250, 0.14);
  --ws-success: #4ADE80;
  --ws-success-light: rgba(74, 222, 128, 0.12);
  --ws-warning: #FBBF24;
  --ws-warning-light: rgba(251, 191, 36, 0.12);
  --ws-error: #F87171;
  --ws-error-light: rgba(248, 113, 113, 0.12);
  --ws-text: #F1F5F9;
  --ws-text-secondary: #94A3B8;
  --ws-text-tertiary: #64748B;
  --ws-border: #2D3348;
  --ws-border-light: #232839;
  --ws-cream: #1C1F2B;
  --ws-cream-deep: #252836;
  --ws-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --ws-shadow-md: 0 4px 12px rgba(0,0,0,0.35);
  --ws-shadow-lg: 0 12px 32px rgba(0,0,0,0.4);
  --ws-shadow-xl: 0 20px 48px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --ws-bg: #0F1117;
    --ws-bg-secondary: #181B23;
    --ws-surface: #1C1F2B;
    --ws-surface-hover: #252836;
    --ws-surface-active: #1E3A5F;
    --ws-primary: #60A5FA;
    --ws-primary-hover: #93BBFD;
    --ws-primary-light: rgba(96, 165, 250, 0.12);
    --ws-primary-medium: rgba(96, 165, 250, 0.20);
    --ws-advanced: #A78BFA;
    --ws-advanced-light: rgba(167, 139, 250, 0.14);
    --ws-success: #4ADE80;
    --ws-success-light: rgba(74, 222, 128, 0.12);
    --ws-warning: #FBBF24;
    --ws-warning-light: rgba(251, 191, 36, 0.12);
    --ws-error: #F87171;
    --ws-error-light: rgba(248, 113, 113, 0.12);
    --ws-text: #F1F5F9;
    --ws-text-secondary: #94A3B8;
    --ws-text-tertiary: #64748B;
    --ws-border: #2D3348;
    --ws-border-light: #232839;
    --ws-cream: #1C1F2B;
    --ws-cream-deep: #252836;
    --ws-shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --ws-shadow-md: 0 4px 12px rgba(0,0,0,0.35);
    --ws-shadow-lg: 0 12px 32px rgba(0,0,0,0.4);
    --ws-shadow-xl: 0 20px 48px rgba(0,0,0,0.5);
  }
}

Extraction mode chooser ──────────────────────────────── */
.ws-extraction-mode-card:hover { border-color: var(--ws-primary) !important; }
.ws-extraction-mode-card:focus-visible { outline: 2px solid var(--ws-primary); outline-offset: 2px; }

/* ── §50-52 Document stats enhanced ──────────────────────────────── */
.ws-doc-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.ws-doc-stats-grid > div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; background: var(--ws-surface); border-radius: 6px; border: 1px solid var(--ws-border-light); }
.ws-doc-stats-grid > div strong { font-size: 18px; color: var(--ws-text); font-weight: 700; }
.ws-doc-stats-grid > div span { font-size: 11px; color: var(--ws-text-tertiary); margin-top: 2px; }
.ws-stats-explanation div + div { margin-top: 3px; }

/* ── §80 — Compact hero ─────────────────────────────────────────── */
.ws-project-hero-compact { padding: 14px 20px !important; min-height: auto !important; }
.ws-project-hero-compact h1 { font-size: clamp(20px, 2.5vw, 28px) !important; margin: 0 0 8px !important; }
.ws-project-hero-compact p { display: none; }
.ws-project-hero-compact .ws-project-context { display: none; }

/* ── §82 — Continuous flow breadcrumb path ───────────────────────── */
.ws-flow-path {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--ws-border-light);
  margin-bottom: 12px;
  overflow-x: auto;
  flex-shrink: 0;
}
.ws-flow-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--ws-text-tertiary);
  font: 600 11px/1 inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.ws-flow-step:hover { background: var(--ws-surface-hover); color: var(--ws-text-secondary); }
.ws-flow-step.completed { color: var(--ws-success); }
.ws-flow-step.completed:hover { background: var(--ws-success-light); }
.ws-flow-step.active {
  background: var(--ws-primary);
  color: var(--ws-surface);
  border-color: var(--ws-primary);
  font-weight: 700;
}
.ws-flow-step.active:hover { opacity: .9; }
.ws-flow-step:focus-visible { outline: 2px solid var(--ws-primary); outline-offset: 1px; }
.ws-flow-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ws-surface-hover);
  font-size: 10px;
  color: inherit;
  flex-shrink: 0;
}
.ws-flow-step.active .ws-flow-step-num { background: rgba(255,255,255,.2); }
.ws-flow-step.completed .ws-flow-step-num { background: rgba(126,207,160,.15); }
.ws-flow-step-label { font-size: 11px; }
.ws-flow-connector {
  display: inline-block;
  width: 12px;
  height: 1px;
  background: var(--ws-border);
  flex-shrink: 0;
}
.ws-flow-connector.completed { background: var(--ws-success); }

@media (max-width: 600px) {
  .ws-flow-path { gap: 0; padding: 4px 0 8px; }
  .ws-flow-step { padding: 2px 5px; font-size: 10px; }
  .ws-flow-step-label { display: none; }
  .ws-flow-step-num { width: 20px; height: 20px; font-size: 11px; }
  .ws-flow-connector { width: 8px; }
}

@keyframes wsReveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wsFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(0, -8px, 0) rotate(1deg); }
}

@keyframes wsOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes wsDraw {
  from { stroke-dashoffset: 180; opacity: .15; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes wsBlink {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

.ws-content {
  background: var(--ws-bg);
}

.ws-sidebar {
  background: var(--ws-bg);
  border-right: 1px solid var(--ws-text);
}

.sidebar-header {
  border-bottom: 0;
  padding-top: 20px;
  padding-bottom: 18px;
}

.sidebar-logo {
  background: var(--ws-text);
  color: var(--ws-bg);
  border-radius: 7px;
}

.sidebar-logo svg,
.sidebar-logo-img {
  width: 22px;
  height: 22px;
}

.sidebar-logo-img {
  width: 32px;
  height: 32px;
}

.sidebar-logo-text {
  font-family: var(--ws-display);
  font-size: 20px;
  letter-spacing: -.04em;
}

.sidebar-logo-sub,
.sidebar-section-title {
  letter-spacing: .16em;
  font-size: 9px;
}

.sidebar-item {
  border-radius: 3px;
  color: var(--ws-text-secondary);
}

.sidebar-item:hover {
  background: var(--ws-surface-active);
  color: var(--ws-text);
}

.sidebar-item.active {
  background: var(--ws-text);
  color: var(--ws-bg);
}

.sidebar-item.active .icon,
.sidebar-item.active .badge {
  color: var(--ws-bg);
}

.ws-topbar {
  background: var(--ws-bg);
  border-bottom-color: var(--ws-text);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.theme-dark .ws-topbar {
  background: var(--ws-bg);
}

.ws-topbar-btn,
.ws-topbar-icon {
  border-radius: 3px;
}

.ws-statusbar {
  background: var(--ws-bg);
  border-top-color: var(--ws-border);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ws-save-state {
  color: var(--ws-text);
  font-weight: 700;
  letter-spacing: .12em;
}

.ws-home-studio {
  max-width: 1220px;
  padding-bottom: 52px;
}

.ws-studio-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .94fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  min-height: 490px;
  padding: 34px 0 42px;
  border-bottom: 1px solid var(--ws-text);
  animation: wsReveal .72s cubic-bezier(.22, 1, .36, 1) both;
}

.ws-studio-copy {
  max-width: 610px;
}

.ws-studio-overline,
.ws-studio-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ws-text-secondary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ws-studio-mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: var(--ws-text);
  color: var(--ws-bg);
  border-radius: 50%;
}

.ws-studio-copy h1 {
  margin: 24px 0 22px;
  color: var(--ws-text);
  font-family: var(--ws-display);
  font-size: clamp(54px, 6.1vw, 94px);
  font-weight: 500;
  letter-spacing: -.075em;
  line-height: .89;
}

.ws-stroke-word {
  position: relative;
  display: block;
  width: fit-content;
  font-style: italic;
  font-weight: 400;
}

.ws-stroke-word::after {
  position: absolute;
  right: -5px;
  bottom: -13px;
  left: 1px;
  height: 8px;
  border-top: 2px solid var(--ws-text);
  border-radius: 50%;
  content: '';
  transform: rotate(-2deg);
}

.ws-studio-copy > p {
  max-width: 470px;
  color: var(--ws-text-secondary);
  font-size: 16px;
  line-height: 1.65;
}

.ws-studio-actions {
  gap: 8px;
  margin-top: 30px;
}

.ws-studio-btn {
  min-height: 43px;
  padding: 0 15px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ws-studio-btn svg {
  flex: 0 0 auto;
}

.ws-studio-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 34px;
  padding-top: 12px;
  border-top: 1px solid var(--ws-border);
  color: var(--ws-text-tertiary);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ws-hero-art {
  position: relative;
  display: grid;
  min-height: 420px;
  place-items: center;
  overflow: visible;
  border-radius: 42% 58% 55% 45% / 45% 41% 59% 55%;
  background: var(--ws-text);
  animation: wsReveal .82s .08s cubic-bezier(.22, 1, .36, 1) both;
}

.ws-hero-art::before,
.ws-hero-art::after {
  position: absolute;
  border: 1px solid var(--ws-bg);
  border-radius: 50%;
  content: '';
  opacity: .34;
  pointer-events: none;
}

.ws-hero-art::before {
  width: 62%;
  height: 62%;
  transform: translate(-15%, 22%) rotate(-28deg);
}

.ws-hero-art::after {
  width: 34%;
  height: 34%;
  right: 2%;
  top: 5%;
}

.ws-hero-drawing {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 20px 22px rgba(0,0,0,.26));
  animation: wsFloat 8s ease-in-out infinite;
}

.ws-drawing-core {
  transform-box: fill-box;
  transform-origin: center;
  animation: wsOrbit 28s linear infinite;
}

.ws-drawing-note,
.ws-drawing-floating {
  transform-box: fill-box;
  transform-origin: center;
  animation: wsFloat 7s ease-in-out infinite;
}

.ws-drawing-floating {
  animation-delay: -2.2s;
}

.ws-drawing-wave {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: wsFloat 10s -4s ease-in-out infinite;
}

.ws-drawing-stroke {
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  animation: wsDraw 1.8s .35s ease-out forwards;
}

.ws-drawing-stroke-delay { animation-delay: .7s; }

.ws-drawing-dot {
  animation: wsBlink 3.2s ease-in-out infinite;
}

.ws-drawing-dot-small { animation-delay: -1.3s; }

.ws-art-index,
.ws-art-caption {
  position: absolute;
  z-index: 2;
  color: var(--ws-bg);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ws-art-index {
  top: 20px;
  left: 24px;
  color: #111111;
}

.ws-art-caption {
  right: 24px;
  bottom: 20px;
  max-width: 140px;
  text-align: right;
  line-height: 1.4;
}

html.theme-dark .ws-art-index {
  color: #111111;
}

.ws-studio-index {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--ws-text);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.ws-studio-index > div {
  min-height: 88px;
  padding: 18px 16px 20px 0;
  border-right: 1px solid var(--ws-border);
  background: var(--ws-cream);
}

.ws-studio-index > div:last-child {
  border-right: 0;
}

.ws-studio-index strong {
  display: block;
  color: var(--ws-text);
  font-family: var(--ws-display);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
}

.ws-studio-index span {
  display: block;
  margin-top: 7px;
  color: var(--ws-text-tertiary);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ws-studio-launch,
.ws-studio-templates,
.ws-studio-recent {
  padding-top: 70px;
}

.ws-studio-section-heading {
  display: block;
  margin-bottom: 26px;
}

.ws-studio-section-heading h2,
.ws-recent-heading h2 {
  margin: 12px 0 5px;
  color: var(--ws-text);
  font-family: var(--ws-display);
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 500;
  letter-spacing: -.06em;
  line-height: .98;
}

.ws-studio-section-heading p {
  color: var(--ws-text-secondary);
  font-size: 13px;
}

.ws-studio-launch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ws-text);
}

.ws-studio-launch-card {
  position: relative;
  display: flex;
  min-height: 205px;
  flex-direction: column;
  align-items: flex-start;
  gap: 17px;
  padding: 21px 22px 22px;
  border: 0;
  border-right: 1px solid var(--ws-border);
  border-bottom: 1px solid var(--ws-text);
  background: transparent;
  color: var(--ws-text);
  cursor: pointer;
  text-align: left;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.ws-studio-launch-card:last-child {
  border-right: 0;
}

.ws-studio-launch-card:hover {
  background: var(--ws-text);
  color: var(--ws-bg);
  transform: translateY(-4px);
}

.ws-launch-number {
  color: var(--ws-text-tertiary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}

.ws-studio-launch-card:hover .ws-launch-number,
.ws-studio-launch-card:hover .ws-launch-copy small {
  color: rgba(244,243,238,.66);
}

.ws-launch-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.ws-launch-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ws-launch-copy strong {
  font-family: var(--ws-display);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -.04em;
}

.ws-launch-copy small {
  max-width: 220px;
  color: var(--ws-text-secondary);
  font-size: 11px;
  line-height: 1.5;
}

.ws-launch-arrow {
  position: absolute;
  right: 20px;
  bottom: 17px;
  font-size: 22px;
  font-weight: 300;
  transition: transform .25s ease;
}

.ws-studio-launch-card:hover .ws-launch-arrow {
  transform: translate(3px, -3px);
}

.ws-studio-templates .ws-template-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ws-studio-templates .ws-template-card {
  min-height: 174px;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--ws-border);
  border-radius: 0;
  background: transparent;
  text-align: left;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
}

.ws-studio-templates .ws-template-card:hover {
  border-color: var(--ws-text);
  background: var(--ws-text);
  color: var(--ws-bg);
  transform: translateY(-3px);
}

.ws-studio-templates .ws-template-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
}

.ws-studio-templates .ws-template-copy {
  align-items: flex-start;
}

.ws-studio-templates .ws-template-copy strong {
  font-family: var(--ws-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.04em;
}

.ws-studio-templates .ws-template-copy small {
  color: var(--ws-text-secondary);
  line-height: 1.5;
}

.ws-studio-templates .ws-template-card:hover .ws-template-copy small {
  color: rgba(244,243,238,.66);
}

.ws-studio-dropzone {
  margin-top: 46px;
  border: 1px dashed var(--ws-text-secondary);
  border-radius: 0;
  background: transparent;
  color: var(--ws-text-secondary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: background .22s ease, border-color .22s ease, color .22s ease;
}

.ws-studio-dropzone:hover,
.ws-studio-dropzone.drag-over {
  border-color: var(--ws-text);
  background: var(--ws-text);
  color: var(--ws-bg);
}

.ws-recent-heading {
  margin-bottom: 22px;
}

.ws-recent-heading h2 {
  margin-top: 10px;
  font-size: 34px;
}

.ws-studio-recent .ws-card-grid {
  gap: 8px;
}

.ws-studio-recent .ws-card {
  border-radius: 0;
  border-color: var(--ws-border);
  background: transparent;
  box-shadow: none;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
}

.ws-studio-recent .ws-card:hover {
  border-color: var(--ws-text);
  background: var(--ws-text);
  color: var(--ws-bg);
  transform: translateY(-3px);
}

.ws-studio-recent .studio-card-icon {
  background: var(--ws-text);
  color: var(--ws-bg);
  border-radius: 50%;
}

.ws-studio-recent .ws-card:hover .studio-card-icon {
  background: var(--ws-bg);
  color: var(--ws-text);
}

.ws-studio-recent .ws-card:hover [style*="color:var(--ws-text-secondary)"],
.ws-studio-recent .ws-card:hover [style*="color:var(--ws-text-tertiary)"] {
  color: rgba(244,243,238,.66) !important;
}

.ws-studio-ready {
  margin-top: 48px;
  border: 1px solid var(--ws-text);
  border-radius: 0;
  background: var(--ws-text);
  color: var(--ws-bg);
  box-shadow: none;
}

.ws-studio-ready .ws-ready-icon {
  background: var(--ws-bg);
  color: var(--ws-text);
  border-radius: 50%;
}

.ws-studio-ready .ws-ready-copy span {
  color: rgba(244,243,238,.7);
}

.ws-studio-ready .ws-btn-primary {
  background: var(--ws-bg);
  border-color: var(--ws-bg);
  color: var(--ws-text);
}

.ws-btn-primary {
  background: var(--ws-text);
  border-color: var(--ws-text);
  color: var(--ws-bg);
  border-radius: 2px;
}

.ws-btn-primary:hover {
  background: var(--ws-primary-hover);
  border-color: var(--ws-primary-hover);
}

.ws-btn-secondary {
  border-color: var(--ws-text);
  border-radius: 2px;
  background: transparent;
  color: var(--ws-text);
}

.ws-btn-secondary:hover {
  border-color: var(--ws-text);
  background: var(--ws-text);
  color: var(--ws-bg);
}

.ws-btn-ghost {
  border-radius: 2px;
  color: var(--ws-text-secondary);
}

.ws-btn-ghost:hover {
  background: var(--ws-surface-active);
  color: var(--ws-text);
}

.ws-bento-card .card-icon.blue,
.ws-bento-card .card-icon.green,
.ws-bento-card .card-icon.violet,
.ws-bento-card .card-icon.orange,
.card-icon.studio-card-icon {
  background: var(--ws-text) !important;
  color: var(--ws-bg) !important;
  border-radius: 50%;
}

@media (max-width: 900px) {
  .ws-studio-hero {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-top: 28px;
  }

  .ws-studio-copy {
    max-width: 720px;
  }

  .ws-hero-art {
    width: min(100%, 620px);
    min-height: 350px;
    margin: 0 auto;
  }

  .ws-studio-templates .ws-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .ws-home-studio {
    padding-bottom: 32px;
  }

  .ws-studio-copy h1 {
    font-size: clamp(50px, 13vw, 76px);
  }

  .ws-studio-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-studio-index > div:nth-child(2) {
    border-right: 0;
  }

  .ws-studio-index > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--ws-border);
  }

  .ws-studio-launch-grid {
    grid-template-columns: 1fr;
  }

  .ws-studio-launch-card {
    min-height: 160px;
    border-right: 0;
  }

  .ws-studio-launch,
  .ws-studio-templates,
  .ws-studio-recent {
    padding-top: 52px;
  }
}

@media (max-width: 480px) {
  .ws-studio-hero {
    gap: 22px;
  }

  .ws-studio-copy h1 {
    margin-top: 20px;
    font-size: clamp(45px, 14vw, 64px);
  }

  .ws-studio-copy > p {
    font-size: 14px;
  }

  .ws-studio-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ws-studio-btn {
    justify-content: flex-start;
  }

  .ws-studio-meta {
    flex-direction: column;
    gap: 7px;
  }

  .ws-hero-art {
    min-height: 285px;
    border-radius: 35% 65% 55% 45% / 38% 42% 58% 62%;
  }

  .ws-art-caption {
    right: 14px;
    bottom: 13px;
    font-size: 8px;
  }

  .ws-art-index {
    top: 14px;
    left: 16px;
  }

  .ws-studio-templates .ws-template-grid {
    grid-template-columns: 1fr;
  }

  .ws-studio-templates .ws-template-card {
    min-height: 135px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-hero-drawing,
  .ws-drawing-core,
  .ws-drawing-note,
  .ws-drawing-floating,
  .ws-drawing-wave,
  .ws-drawing-stroke,
  .ws-drawing-dot {
    animation: none !important;
  }
}

/* End-of-file surface priority: preserve the new editor chrome over legacy modules. */
.ws-flow{display:flex!important;flex-direction:column;min-height:0;background:var(--ws-bg-secondary)}.ws-flow-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,310px);min-height:0;flex:1;border:1px solid var(--ws-border);background:var(--ws-bg-secondary)}.ws-flow-canvas{position:relative;min-width:0;min-height:460px;overflow:auto;background-color:#f7f8fa;background-image:radial-gradient(#d4dbe5 1px,transparent 1px);background-size:20px 20px}.ws-flow-edges{position:absolute;inset:0;width:100%;height:100%;min-width:900px;min-height:620px;pointer-events:none;overflow:visible}.ws-flow-edge{fill:none;stroke:var(--ws-text-tertiary);stroke-width:2;stroke-dasharray:4 3}.ws-flow-status{top:10px;left:10px;right:10px;display:flex;align-items:center;gap:8px;max-width:calc(100% - 20px);padding:7px 9px;border:1px solid var(--ws-border);border-radius:7px;background:rgba(255,255,255,.88);font-size:10px;box-shadow:0 4px 12px rgba(25,38,64,.06)}.ws-flow-node{min-width:205px;max-width:245px;overflow:visible;border-color:var(--ws-border);border-radius:7px;background:var(--ws-surface);box-shadow:0 5px 16px rgba(31,48,78,.11);cursor:grab;touch-action:none}.ws-flow-node:focus-visible{outline:2px solid var(--ws-primary);outline-offset:3px}.ws-flow-node.selected{border-color:var(--ws-primary);box-shadow:0 0 0 2px var(--ws-primary-medium),0 8px 22px rgba(31,48,78,.15)}.ws-flow-node-header{min-height:35px;padding:7px 8px;border-radius:6px 6px 0 0;font-size:11px}.ws-flow-node-header>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ws-flow-node-edit{display:grid;place-items:center;width:24px;height:24px;margin-left:auto;border:0;border-radius:4px;background:transparent;color:inherit;cursor:pointer}.ws-flow-node-body{display:grid;gap:5px;min-height:74px;padding:10px}.ws-flow-node-body p{margin:0;color:var(--ws-text-secondary);font-size:10px;line-height:1.4}.ws-flow-node-operation{display:inline-flex;max-width:100%;padding:3px 6px;border:1px solid #dbe1e9;border-radius:4px;background:var(--ws-bg-secondary);color:var(--ws-text-secondary);font-size:9px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ws-flow-port{z-index:3;width:16px;height:16px;padding:0;border:2px solid #8da2c1;border-radius:50%;background:var(--ws-surface);cursor:crosshair}.ws-flow-port.left{left:-8px}.ws-flow-port.right{right:-8px}.ws-flow-inspector{min-width:0;overflow:auto;padding:16px;border-left:1px solid #cfd4db;background:var(--ws-surface)}.ws-flow-inspector-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}.ws-flow-inspector-heading>div{display:grid;gap:4px}.ws-flow-inspector-kicker,.ws-flow-section-label{color:#7b8490;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.ws-flow-inspector-heading strong{font-size:15px;letter-spacing:-.02em}.ws-flow-inspector-id{color:var(--ws-primary);font:800 20px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.ws-flow-field{display:grid;gap:5px;margin-bottom:11px;color:#596574;font-size:10px;font-weight:700}.ws-flow-field small{color:#8a939f;font-size:9px;font-weight:500;line-height:1.35}.ws-flow-field .ws-input{width:100%;box-sizing:border-box}.ws-flow-description{min-height:68px;resize:vertical;font:500 11px/1.45 inherit}.ws-flow-node-settings{display:grid;gap:0;padding:10px 0;border-top:1px solid #e5e8ed;border-bottom:1px solid #e5e8ed;margin-bottom:12px}.ws-flow-connect-box{display:grid;gap:7px;margin-bottom:12px;padding:10px;border:1px solid #dbe2eb;border-radius:6px;background:var(--ws-bg-secondary)}.ws-flow-connections{display:grid;gap:6px;margin:4px 0 14px}.ws-flow-connection{display:flex;align-items:center;gap:7px;width:100%;padding:6px 7px;border:1px solid #e1e5eb;border-radius:5px;background:var(--ws-surface);color:#586475;text-align:left;font:600 10px/1 inherit;cursor:pointer}.ws-flow-delete-node{width:100%;justify-content:center;margin-top:2px}.ws-flow-inspector-empty{display:grid;gap:9px;color:#596574}.ws-flow-inspector-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;background:#edf3ff;color:var(--ws-primary)}.ws-flow-inspector-empty strong{font-size:15px;color:var(--ws-text)}.ws-flow-inspector-empty p{margin:0;font-size:11px;line-height:1.55}.ws-flow-inspector-empty ol{display:grid;gap:7px;margin:3px 0 0;padding-left:19px;color:#6f7a87;font-size:10px;line-height:1.4}.ws-flow-empty-guide{position:absolute;top:50%;left:50%;z-index:1;width:min(100% - 40px,360px);display:grid;justify-items:center;gap:9px;transform:translate(-50%,-50%);padding:24px;border:1px dashed #bac6d7;border-radius:10px;background:rgba(255,255,255,.9);text-align:center}.ws-flow-empty-guide strong{font-size:16px}.ws-flow-empty-guide p{margin:0;color:#6f7a87;font-size:11px;line-height:1.5}.ws-flow-toolbar{position:static;justify-content:center;transform:none;flex-wrap:wrap;min-height:44px;border-radius:6px;background:var(--ws-surface);box-shadow:0 -4px 14px rgba(31,48,78,.06)}
@media(max-width:840px){.ws-flow-layout{grid-template-columns:minmax(0,1fr) 260px}.ws-flow-node{min-width:185px;max-width:220px}}
@media(max-width:700px){.ws-data-toolbar-top{flex-wrap:wrap}.ws-data-name-input{width:min(100%,240px);flex:1}.ws-data-toolbar-context{width:100%;margin-left:0}.ws-data-ribbon-kicker{display:none}.ws-data-ribbon-tabs{overflow-x:auto}.ws-data-ribbon-panel{max-height:120px}.ws-data-tool-group{padding-inline:5px}.ws-data-ribbon-panel>.ws-table-capacity{display:none}.ws-doc-ribbon-panel{max-height:144px!important}.ws-doc-toolbar{margin-inline:-2px!important}.ws-doc-tool{min-width:43px;min-height:44px;padding-inline:3px}.ws-doc-tool-label{max-width:56px;font-size:9px}.ws-doc-font-family{min-width:96px}.ws-doc-font-size{min-width:62px}.ws-flow-layout{grid-template-columns:1fr}.ws-flow-inspector{max-height:390px;border-top:1px solid #cfd4db;border-left:0;order:2}.ws-flow-canvas{min-height:380px;order:1}.ws-flow-toolbar{position:static}.ws-flow-status{font-size:9px}}

.ws-doc-editable [data-page-break] {
  display: block;
  height: 1px;
  margin: 28px 0;
  border-top: 1px dashed #aeb7c3;
  break-before: page;
  page-break-before: always;
  position: relative;
}

.ws-doc-editable [data-page-break]::after {
  content: 'Salto de página';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 8px;
  background: #fff;
  color: #8a929b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media print {
  .ws-doc-editable [data-page-break] { break-before: page; page-break-before: always; border: 0; margin: 0; }
  .ws-doc-editable [data-page-break]::after { display: none; }
}

/* Data model */
.ws-model-shell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  height: calc(100vh - 80px);
}

.ws-model-header,
.ws-model-title-block,
.ws-model-header-actions,
.ws-model-summary,
.ws-model-footer,
.ws-model-node-header,
.ws-model-inspector-title,
.ws-model-relation-item,
.ws-model-table-item,
.ws-model-field {
  display: flex;
  align-items: center;
}

.ws-model-header {
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
  flex-wrap: wrap;
}

.ws-model-title-block {
  min-width: 0;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.ws-model-title-block h1 {
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: -.04em;
  white-space: nowrap;
}

.ws-model-title-block p {
  display: none;
}

.ws-model-header-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.ws-model-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(80px, 1fr)) minmax(140px, 1.3fr);
  gap: 6px;
}

.ws-model-summary > div {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--ws-border-light);
  background: var(--ws-surface);
  box-shadow: var(--ws-shadow-sm);
}

.ws-model-summary strong,
.ws-model-summary span {
  display: inline;
}

.ws-model-summary strong {
  font-size: 14px;
  line-height: 1;
  letter-spacing: -.03em;
}

.ws-model-summary span {
  margin-left: 4px;
  color: var(--ws-text-secondary);
  font-size: 11px;
}

.ws-model-summary-note {
  display: flex !important;
  align-items: center;
  gap: 7px;
  color: var(--ws-text-secondary);
  font-size: 11px;
}

.ws-model-summary-note span {
  margin: 0;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

.ws-model-workspace {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 242px;
  flex: 1;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid var(--ws-border);
  background: var(--ws-surface);
  box-shadow: var(--ws-shadow-sm);
}

.ws-model-sidebar,
.ws-model-inspector {
  min-width: 0;
  overflow: auto;
  background: var(--ws-surface);
}

.ws-model-sidebar {
  padding: 12px 10px;
  border-right: 1px solid var(--ws-border-light);
}

.ws-model-inspector {
  padding: 12px;
  border-left: 1px solid var(--ws-border-light);
}

.ws-model-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ws-text);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.ws-model-panel-heading span {
  color: var(--ws-text-tertiary);
  font-size: 10px;
}

.ws-model-panel-help {
  margin: 5px 0 10px;
  color: var(--ws-text-tertiary);
  font-size: 10px;
  line-height: 1.4;
}

.ws-model-table-list,
.ws-model-relations-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ws-model-table-item {
  width: 100%;
  min-width: 0;
  gap: 7px;
  padding: 8px 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ws-text);
  text-align: left;
  cursor: pointer;
}

.ws-model-table-item:hover,
.ws-model-table-item.active {
  border-color: var(--ws-border);
  background: var(--ws-surface-hover);
}

.ws-model-table-item.active {
  box-shadow: inset 2px 0 0 var(--ws-text);
}

.ws-model-table-item-icon {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 6px;
  background: var(--ws-cream);
  color: var(--ws-text);
}

.ws-model-table-item-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}

.ws-model-table-item-copy strong,
.ws-model-table-item-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-model-table-item-copy strong {
  font-size: 11px;
}

.ws-model-table-item-copy small {
  color: var(--ws-text-tertiary);
  font-size: 9px;
}

.ws-model-table-item-count {
  display: grid;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--ws-surface-active);
  color: var(--ws-text-secondary);
  font-size: 9px;
}

.ws-model-panel-link,
.ws-model-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--ws-text-secondary);
  font-size: 10px;
  cursor: pointer;
}

.ws-model-panel-link {
  margin-top: 12px;
  padding: 5px 2px;
}

.ws-model-panel-link:hover,
.ws-model-footer-link:hover {
  color: var(--ws-text);
}

.ws-model-canvas {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: var(--ws-cream);
}

.ws-model-canvas-inner {
  position: relative;
  min-width: 980px;
  min-height: 640px;
  background-image: radial-gradient(var(--ws-cream-deep) 1px, transparent 1px);
  background-size: 18px 18px;
}

.ws-model-links {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
  color: var(--ws-text);
}

.ws-model-link {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: .52;
  vector-effect: non-scaling-stroke;
}

.ws-model-link.is-inactive {
  stroke-dasharray: 4 4;
  opacity: .24;
}

.ws-model-table-node {
  position: absolute;
  z-index: 2;
  width: 232px;
  overflow: hidden;
  border: 1px solid var(--ws-border);
  border-radius: 8px;
  background: var(--ws-surface);
  box-shadow: var(--ws-shadow-md);
  cursor: grab;
  user-select: none;
}

.ws-model-table-node:hover,
.ws-model-table-node.is-selected {
  border-color: var(--ws-text);
}

.ws-model-table-node.is-selected {
  box-shadow: 0 0 0 2px var(--ws-text), var(--ws-shadow-md);
}

.ws-model-table-node.is-dragging {
  cursor: grabbing;
  opacity: .92;
}

.ws-model-node-header {
  min-height: 40px;
  gap: 7px;
  padding: 7px 8px;
  background: var(--ws-text);
  color: var(--ws-bg);
}

.ws-model-node-icon {
  display: grid;
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 5px;
}

.ws-model-node-title {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 1px;
}

.ws-model-node-title strong,
.ws-model-node-title small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-model-node-title strong {
  font-size: 11px;
}

.ws-model-node-title small {
  opacity: .65;
  font-size: 9px;
}

.ws-model-node-toggle,
.ws-model-relation-delete {
  display: grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.ws-model-node-toggle:hover {
  background: rgba(255,255,255,.12);
}

.ws-model-node-fields {
  display: flex;
  flex-direction: column;
  padding: 4px;
}

.ws-model-field {
  width: 100%;
  min-width: 0;
  gap: 5px;
  padding: 5px 5px;
  border: 0;
  border-bottom: 1px solid var(--ws-border-light);
  background: transparent;
  color: var(--ws-text);
  text-align: left;
  cursor: pointer;
}

.ws-model-field:last-child {
  border-bottom: 0;
}

.ws-model-field:hover {
  background: var(--ws-surface-hover);
}

.ws-model-field-key {
  width: 12px;
  color: var(--ws-text-tertiary);
  font-size: 8px;
  text-align: center;
}

.ws-model-field.is-key .ws-model-field-key {
  color: var(--ws-text);
}

.ws-model-field-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.ws-model-field-type {
  color: var(--ws-text-tertiary);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ws-model-more-fields,
.ws-model-node-collapsed {
  display: block;
  padding: 6px 8px;
  color: var(--ws-text-tertiary);
  font-size: 9px;
}

.ws-model-node-collapsed {
  background: var(--ws-surface-hover);
}

.ws-model-canvas-empty,
.ws-model-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 30px;
  color: var(--ws-text-secondary);
  text-align: center;
}

.ws-model-canvas-empty {
  position: absolute;
  inset: 0;
}

.ws-model-canvas-empty h2,
.ws-model-empty h2 {
  margin: 10px 0 5px;
  color: var(--ws-text);
  font-size: 18px;
}

.ws-model-canvas-empty p,
.ws-model-empty p {
  max-width: 360px;
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.5;
}

.ws-model-empty-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: var(--ws-cream);
  color: var(--ws-text);
}

.ws-model-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 7px;
  color: var(--ws-text-tertiary);
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
}

.ws-model-inspector-table {
  margin-top: 11px;
  padding: 9px;
  border: 1px solid var(--ws-border-light);
  background: var(--ws-cream);
}

.ws-model-inspector-title {
  gap: 6px;
  color: var(--ws-text);
  font-size: 12px;
}

.ws-model-inspector-table p {
  margin: 5px 0 9px;
  color: var(--ws-text-secondary);
  font-size: 10px;
}

.ws-model-inspector-fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ws-model-inspector-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 3px 0;
  border-top: 1px solid rgba(17,17,17,.08);
  color: var(--ws-text);
  font-size: 10px;
}

.ws-model-inspector-field span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-model-inspector-field small {
  color: var(--ws-text-tertiary);
  font-size: 8px;
  text-transform: uppercase;
}

.ws-model-inspector-divider {
  height: 1px;
  margin: 14px 0;
  background: var(--ws-border-light);
}

.ws-model-relations-list {
  margin-top: 9px;
}

.ws-model-relation-item {
  align-items: flex-start;
  gap: 6px;
  padding: 7px 0;
  border-bottom: 1px solid var(--ws-border-light);
}

.ws-model-relation-copy {
  min-width: 0;
  flex: 1;
}

.ws-model-relation-copy strong,
.ws-model-relation-copy small {
  display: block;
}

.ws-model-relation-copy strong {
  overflow: hidden;
  color: var(--ws-text);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.ws-model-relation-copy small {
  margin-top: 3px;
  color: var(--ws-text-tertiary);
  font-size: 8px;
  line-height: 1.35;
}

.ws-model-relation-delete {
  color: var(--ws-text-tertiary);
}

.ws-model-relation-delete:hover {
  color: #a33;
}

.ws-model-footer {
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
  color: var(--ws-text-tertiary);
  font-size: 10px;
}

.ws-model-footer > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ws-model-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 8px;
  color: var(--ws-text-secondary);
  font-size: 12px;
}

.ws-model-modal-lead {
  margin: 0 0 15px;
  color: var(--ws-text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.ws-model-relation-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ws-model-modal-select {
  width: 100%;
}

@media (max-width: 1120px) {
  .ws-model-workspace {
    grid-template-columns: 176px minmax(0, 1fr) 220px;
  }
}

@media (max-width: 860px) {
  .ws-model-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ws-model-header-actions {
    justify-content: flex-start;
  }

  .ws-model-workspace {
    grid-template-columns: 170px minmax(0, 1fr);
    height: 520px;
  }

  .ws-model-inspector {
    display: none;
  }

  .ws-model-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .ws-model-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-model-summary-note {
    grid-column: 1 / -1;
  }

  .ws-model-workspace {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .ws-model-sidebar {
    max-height: 172px;
    border-right: 0;
    border-bottom: 1px solid var(--ws-border-light);
  }

  .ws-model-canvas {
    min-height: 420px;
  }

  .ws-model-relation-modal-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ws-model-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Compact workspace pass: keep the canvas generous and make the chrome earn its space. */
:root {
  --ws-sidebar-width: 236px;
  --ws-topbar-height: 48px;
  --ws-statusbar-height: 24px;
}

.density-equilibrada {
  --ws-density-scale: .92;
}

.ws-sidebar {
  border-right-width: 1px;
}

.sidebar-header {
  gap: 8px;
  padding: 10px 12px;
  min-height: 48px;
}

.sidebar-logo-text {
  font-size: 15px;
}

.sidebar-nav {
  padding: 5px;
}

.sidebar-section {
  margin-bottom: 3px;
}

.sidebar-section-title {
  padding: 5px 6px 2px;
}

.sidebar-item {
  gap: 7px;
  padding: 4px 7px;
}

.sidebar-item .icon {
  width: 18px;
  min-width: 18px;
}

.sidebar-footer {
  padding: 5px;
}

.sidebar-footer-btn {
  width: 30px;
  height: 30px;
}

.ws-topbar {
  padding-inline: 12px;
  gap: 8px;
}

.ws-topbar-actions {
  gap: 3px;
}

.ws-topbar-btn,
.ws-topbar-icon {
  height: 30px;
}

.ws-topbar-btn {
  padding-inline: 8px;
}

.ws-content {
  padding: 16px 20px;
}

.ws-statusbar {
  padding-inline: 10px;
}

.ws-start .hero {
  padding-block: 30px 24px;
}

.ws-home-hero {
  padding-block: 20px 17px !important;
}

.ws-home-stats {
  margin-bottom: 18px;
}

.ws-home-stats > div {
  padding: 9px 11px;
}

.ws-quick-actions {
  gap: 6px;
  margin-top: 15px;
}

.ws-bento {
  gap: 10px;
  margin-bottom: 24px;
}

.ws-bento-card {
  padding: 15px;
  gap: 6px;
}

.ws-bento-card .card-icon {
  width: 36px;
  height: 36px;
}

.ws-template-section {
  margin-bottom: 18px;
}

.ws-section-heading {
  margin-bottom: 9px;
}

.ws-template-grid,
.ws-card-grid {
  gap: 8px;
}

.ws-template-card {
  padding: 11px;
  gap: 8px;
}

.ws-drag-zone {
  padding: 28px 20px;
  margin-bottom: 24px;
}

.ws-recent-section {
  margin-bottom: 18px;
}

.ws-recent-section h3 {
  margin-bottom: 9px;
}

.ws-ready-card {
  gap: 9px;
  margin: 4px 0 14px;
  padding: 10px 12px;
}

.ws-ready-icon {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
}

.ws-intake-gate {
  gap: 9px;
  margin: 3px 0 13px;
  padding: 9px 11px;
}

.ws-intake-gate-icon {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
}

.ws-doc-editor {
  padding-block: 14px;
}

.ws-doc-toolbar {
  margin: 0 -8px 12px;
  padding: 5px 8px;
}

.ws-doc-tool,
.ws-doc-format {
  height: 27px;
}

.ws-data-toolbar {
  gap: 4px;
  padding: 4px 8px;
}

.ws-formula-bar {
  gap: 6px;
  padding: 3px 8px;
}

.ws-grid-table th {
  padding: 5px 8px;
}

.ws-grid-table td {
  padding: 4px 8px;
  height: 27px;
}

.ws-sheet-tabs {
  padding: 3px 6px;
}

.ws-sheet-tab {
  padding: 4px 10px;
}

.ws-module-heading {
  gap: 9px;
  margin-bottom: 9px;
}

.ws-module-title {
  font-size: 20px;
}

.ws-btn {
  padding-block: 6px;
  padding-inline: 11px;
}

.ws-btn-sm {
  padding-block: 3px;
  padding-inline: 8px;
}

.ws-btn-lg {
  padding-block: 8px;
  padding-inline: 16px;
}

.ws-card {
  padding: 12px;
}

.ws-modal-overlay {
  padding: 16px;
}

.ws-modal {
  max-height: calc(100vh - 32px);
}

.ws-modal-header {
  padding: 12px 16px;
}

.ws-modal-body {
  padding: 16px;
}

.ws-modal-footer {
  gap: 6px;
  padding: 9px 16px;
}

.ws-invoice-modal-content {
  gap: 12px;
}

.ws-flow-node {
  min-width: 164px;
}

.ws-flow-node-header {
  padding: 6px 9px;
}

.ws-flow-node-body {
  padding: 8px 9px;
}

.ws-flow-toolbar {
  bottom: 10px;
}

.ws-tools-search {
  padding: 8px 10px;
  margin-bottom: 11px;
}

.ws-tool-card {
  gap: 9px;
  padding: 9px;
}

.ws-tool-card .tool-icon {
  width: 32px;
  height: 32px;
}

/* Query studio: a focused, Power Query-inspired preparation workspace. */
.ws-query-loading {
  min-height: 320px;
  display: grid;
  place-items: center;
  gap: 8px;
  color: var(--ws-text-secondary);
  font-size: 13px;
}

.ws-query-studio {
  width: 100%;
  min-height: calc(100vh - var(--ws-topbar-height) - var(--ws-statusbar-height) - 48px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--ws-text);
}

.ws-query-studio-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 2px 2px 16px;
  border-bottom: 1px solid var(--ws-border);
}

.ws-query-title-block {
  min-width: 0;
}

.ws-query-kicker,
.ws-query-preview-kicker,
.ws-query-empty-kicker {
  display: block;
  color: var(--ws-text-tertiary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ws-query-title-block h1 {
  margin: 5px 0 3px;
  color: var(--ws-text);
  font-family: var(--ws-display);
  font-size: clamp(30px, 4vw, 46px);
  line-height: .96;
  letter-spacing: -.045em;
}

.ws-query-title-block p {
  margin: 0;
  color: var(--ws-text-secondary);
  font-size: 13px;
}

.ws-query-header-actions,
.ws-query-preview-actions,
.ws-query-empty-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.ws-query-sheetbar {
  display: grid;
  gap: 10px;
  padding: 10px 12px 0;
  border: 1px solid var(--ws-border);
  background: var(--ws-surface);
  box-shadow: 0 5px 18px rgba(17, 17, 17, .035);
}

.ws-query-sheetbar-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ws-query-sheetbar-heading > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ws-query-sheetbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ws-query-sheetbar-toggle {
  min-width: 31px;
  padding-inline: 7px;
}

.ws-query-sheetbar-collapsed {
  padding-bottom: 10px;
}

.ws-query-sheetbar-collapsed .ws-query-sheet-tabs {
  display: none;
}

.ws-query-sheetbar-kicker {
  color: var(--ws-text-tertiary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
}

.ws-query-sheetbar-heading strong {
  color: var(--ws-text);
  font-size: 12px;
}

.ws-query-sheet-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.ws-query-sheet-tab {
  min-width: 148px;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--ws-border-light);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: var(--ws-cream);
  color: var(--ws-text-secondary);
}

.ws-query-sheet-tab.active {
  border-color: var(--ws-border);
  background: var(--ws-surface);
  color: var(--ws-text);
  box-shadow: inset 0 -3px 0 var(--ws-primary);
}

.ws-query-sheet-tab-main,
.ws-query-sheet-tab-action {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.ws-query-sheet-tab-main {
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  column-gap: 6px;
  padding: 8px 5px 8px 10px;
  text-align: left;
}

.ws-query-sheet-tab-main span {
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-query-sheet-tab-main small {
  grid-column: 2;
  color: var(--ws-text-tertiary);
  font-size: 9px;
}

.ws-query-sheet-tab-main:hover,
.ws-query-sheet-tab-action:hover {
  color: var(--ws-primary);
}

.ws-query-sheet-tab-action {
  width: 25px;
  display: grid;
  place-items: center;
  color: var(--ws-text-tertiary);
}

.ws-query-sheet-tab-action:disabled {
  cursor: not-allowed;
  opacity: .4;
}

.ws-query-workbench {
  min-height: 620px;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(160px, 180px) minmax(200px, 220px) minmax(0, 1fr) minmax(180px, 205px);
  overflow: hidden;
  border: 1px solid var(--ws-border);
  background: var(--ws-surface);
  box-shadow: 0 8px 26px rgba(17, 17, 17, .05);
}

.ws-query-workbench.ws-query-tools-closed {
  grid-template-columns: minmax(160px, 180px) minmax(0, 1fr) minmax(180px, 205px);
}

.ws-query-workbench.ws-query-source-collapsed {
  grid-template-columns: 42px minmax(200px, 220px) minmax(0, 1fr) minmax(180px, 205px);
}

.ws-query-workbench.ws-query-workbench.ws-query-tools-closed.ws-query-source-collapsed {
  grid-template-columns: 42px minmax(0, 1fr) minmax(180px, 205px);
}

.ws-query-workbench.ws-query-steps-collapsed {
  grid-template-columns: minmax(160px, 180px) minmax(200px, 220px) minmax(0, 1fr) 42px;
}

.ws-query-workbench.ws-query-tools-closed.ws-query-steps-collapsed {
  grid-template-columns: minmax(160px, 180px) minmax(0, 1fr) 42px;
}

.ws-query-workbench.ws-query-source-collapsed.ws-query-steps-collapsed {
  grid-template-columns: 42px minmax(200px, 220px) minmax(0, 1fr) 42px;
}

.ws-query-workbench.ws-query-tools-closed.ws-query-source-collapsed.ws-query-steps-collapsed {
  grid-template-columns: 42px minmax(0, 1fr) 42px;
}

.ws-query-workbench.ws-query-tools-closed .ws-query-tools-panel {
  display: none;
}

.ws-query-source-panel,
.ws-query-steps-panel {
  min-width: 0;
  padding: 14px;
  overflow: auto;
  background: #E9E9E9;
}

.ws-query-source-panel {
  border-right: 1px solid var(--ws-border);
}

.ws-query-steps-panel {
  border-left: 1px solid var(--ws-border);
}

.ws-query-tools-panel {
  min-width: 0;
  min-height: 0;
  padding: 14px 12px;
  overflow: auto;
  border-right: 1px solid var(--ws-border);
  background: #202020;
  color: #F3F3F3;
}

.ws-query-panel-body {
  min-width: 0;
}

.ws-query-panel-toggle {
  width: 25px;
  height: 25px;
  display: grid;
  flex: 0 0 25px;
  place-items: center;
  border: 1px solid var(--ws-border);
  border-radius: 5px;
  background: rgba(255, 255, 255, .48);
  color: var(--ws-text-secondary);
  cursor: pointer;
}

.ws-query-panel-toggle:hover {
  border-color: var(--ws-primary);
  background: var(--ws-primary);
  color: #fff;
}

.ws-query-collapsible-heading {
  align-items: center;
}

.ws-query-panel-collapsed {
  overflow: hidden;
  padding: 10px 6px;
}

.ws-query-panel-collapsed .ws-query-panel-body {
  display: none;
}

.ws-query-panel-collapsed .ws-query-collapsible-heading {
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
}

.ws-query-panel-collapsed .ws-query-panel-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.ws-query-panel-collapsed .ws-query-panel-count {
  display: none;
}

.ws-query-tools-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 11px;
}

.ws-query-tools-heading > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ws-query-tools-kicker {
  color: var(--ws-text-tertiary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

.ws-query-tools-heading strong {
  overflow: hidden;
  color: var(--ws-text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-query-tool-search {
  width: 100%;
  margin-bottom: 9px;
}

.ws-query-tool-filters {
  display: flex;
  gap: 4px;
  margin: 0 -2px 9px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: thin;
}

.ws-query-tool-filter {
  appearance: none;
  flex: 0 0 auto;
  padding: 5px 7px;
  border: 1px solid var(--ws-border);
  border-radius: 999px;
  background: var(--ws-cream);
  color: var(--ws-text-secondary);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.ws-query-tool-filter:hover,
.ws-query-tool-filter.active {
  border-color: var(--ws-primary);
  background: var(--ws-primary);
  color: #fff;
}

.ws-query-tools-meta {
  margin-bottom: 9px;
  color: var(--ws-text-tertiary);
  font-size: 10px;
  line-height: 1.4;
}

.ws-query-tool-list {
  display: grid;
  gap: 14px;
}

.ws-query-tool-section {
  display: grid;
  gap: 6px;
}

.ws-query-tool-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ws-text-tertiary);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ws-query-tool-group-head strong {
  color: var(--ws-text-secondary);
  font-size: 9px;
}

.ws-query-tool-group-head span {
  font-size: 9px;
}

.ws-query-tools-panel .ws-query-tool-buttons {
  display: grid;
  max-width: none;
  gap: 5px;
}

.ws-query-tools-panel .ws-query-command {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 6px 7px;
  text-align: left;
}

.ws-query-command-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ws-border);
  border-radius: 6px;
  background: var(--ws-cream);
  color: var(--ws-text);
}

.ws-query-command-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ws-query-command-copy strong,
.ws-query-command-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-query-command-copy strong {
  color: var(--ws-text);
  font-size: 10px;
}

.ws-query-command-copy small {
  color: var(--ws-text-tertiary);
  font-size: 9px;
  font-weight: 500;
}

.ws-query-tools-panel .ws-query-command:hover .ws-query-command-icon {
  border-color: rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.ws-query-tools-panel .ws-query-command:hover .ws-query-command-copy strong {
  color: #fff;
}

.ws-query-tools-panel .ws-query-command:hover .ws-query-command-copy small {
  color: rgba(255, 255, 255, .72);
}

.ws-query-tools-panel .ws-query-tools-heading strong,
.ws-query-tools-panel .ws-query-tool-group-head strong,
.ws-query-tools-panel .ws-query-command-copy strong {
  color: #F5F5F5;
}

.ws-query-tools-panel .ws-query-tools-kicker,
.ws-query-tools-panel .ws-query-tools-meta,
.ws-query-tools-panel .ws-query-tool-group-head,
.ws-query-tools-panel .ws-query-command-copy small {
  color: #A9A9A9;
}

.ws-query-tools-panel .ws-query-tool-filter {
  border-color: #484848;
  background: #303030;
  color: #D7D7D7;
}

.ws-query-tools-panel .ws-query-tool-filter:hover,
.ws-query-tools-panel .ws-query-tool-filter.active {
  border-color: #F5F5F5;
  background: #F5F5F5;
  color: #171717;
}

.ws-query-tools-panel .ws-query-command {
  border-color: #484848;
  background: #2C2C2C;
  color: #D7D7D7;
}

.ws-query-tools-panel .ws-query-command-icon {
  border-color: #505050;
  background: #383838;
  color: #F5F5F5;
}

.ws-query-tools-panel .ws-query-command:hover {
  border-color: #F5F5F5;
  background: #F5F5F5;
  color: #171717;
}

.ws-query-tools-panel .ws-query-command:hover .ws-query-command-icon {
  border-color: #D7D7D7;
  background: #E5E5E5;
  color: #171717;
}

.ws-query-tools-panel .ws-query-command:hover .ws-query-command-copy strong,
.ws-query-tools-panel .ws-query-command:hover .ws-query-command-copy small {
  color: #171717;
}

.ws-query-tools-empty {
  min-height: 110px;
  display: grid;
  place-items: center;
  gap: 7px;
  padding: 15px;
  color: var(--ws-text-tertiary);
  font-size: 11px;
  text-align: center;
}

.ws-query-tools-toggle {
  gap: 6px;
}

.ws-query-tools-toggle-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
}

.ws-query-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--ws-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ws-query-panel-count {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border: 1px solid var(--ws-border);
  border-radius: 999px;
  background: var(--ws-surface);
  color: var(--ws-text-secondary);
  font-size: 10px;
  letter-spacing: 0;
}

.ws-query-source-list,
.ws-query-field-list,
.ws-query-steps-list {
  display: grid;
  gap: 6px;
}

.ws-query-source,
.ws-query-add-source {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ws-text-secondary);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.ws-query-source:hover,
.ws-query-source.active {
  border-color: var(--ws-border);
  background: var(--ws-surface);
  color: var(--ws-text);
}

.ws-query-source.active {
  box-shadow: inset 3px 0 0 var(--ws-primary);
}

.ws-query-source-icon {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border: 1px solid var(--ws-border);
  border-radius: 6px;
  background: var(--ws-surface);
  color: var(--ws-text);
}

.ws-query-source-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 2px;
}

.ws-query-source-copy strong,
.ws-query-source-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-query-source-copy strong {
  color: inherit;
  font-size: 12px;
  font-weight: 700;
}

.ws-query-source-copy small {
  color: var(--ws-text-tertiary);
  font-size: 10px;
}

.ws-query-source-active {
  color: var(--ws-primary);
  font-size: 12px;
}

.ws-query-add-source {
  justify-content: center;
  margin-top: 10px;
  border: 1px dashed var(--ws-border);
  color: var(--ws-text);
  font-weight: 600;
}

.ws-query-add-source:hover {
  background: var(--ws-surface);
  border-color: var(--ws-text-tertiary);
}

.ws-query-field-section {
  margin-top: 26px;
}

.ws-query-field {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 2px;
  color: var(--ws-text-secondary);
  font-size: 11px;
}

.ws-query-field .ws-query-type,
.ws-query-preview-table .ws-query-type {
  display: inline-grid;
  place-items: center;
  min-width: 27px;
  height: 17px;
  padding: 0 4px;
  border: 1px solid var(--ws-border);
  border-radius: 4px;
  background: var(--ws-surface);
  color: var(--ws-text-secondary);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1;
}

.ws-query-field {
  overflow: hidden;
}

.ws-query-field:not(.ws-query-type) {
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-query-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ws-surface);
}

.ws-query-ribbon {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 92px;
  overflow-x: auto;
  border-bottom: 1px solid var(--ws-border);
  background: var(--ws-cream);
  scrollbar-width: thin;
}

.ws-query-tool-group {
  flex: 0 0 auto;
  padding: 10px 12px 9px;
  border-right: 1px solid var(--ws-border);
}

.ws-query-tool-group:last-child {
  border-right: 0;
}

.ws-query-tool-group-title {
  display: block;
  margin-bottom: 7px;
  color: var(--ws-text-tertiary);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ws-query-tool-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 260px;
}

.ws-query-command {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 27px;
  padding: 5px 7px;
  border: 1px solid var(--ws-border);
  border-radius: 5px;
  background: var(--ws-surface);
  color: var(--ws-text-secondary);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s, transform .14s;
}

.ws-query-command:hover {
  border-color: var(--ws-primary);
  background: var(--ws-primary);
  color: #fff;
}

.ws-query-command:active {
  transform: translateY(1px);
}

.ws-query-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ws-border-light);
}

.ws-query-preview-header > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ws-query-preview-header strong {
  color: var(--ws-text);
  font-size: 12px;
}

.ws-query-preview-scroll {
  min-width: 0;
  min-height: 0;
  flex: 1;
  overflow: auto;
  background: var(--ws-surface);
}

.ws-query-preview-table {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ws-text-secondary);
  font-size: 11px;
}

.ws-query-preview-table th,
.ws-query-preview-table td {
  max-width: 220px;
  padding: 9px 10px;
  overflow: hidden;
  border-right: 1px solid var(--ws-border-light);
  border-bottom: 1px solid var(--ws-border-light);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-query-preview-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ws-surface);
  color: var(--ws-text);
  font-size: 11px;
  font-weight: 700;
}

.ws-query-preview-table th .ws-query-type {
  margin-right: 5px;
  vertical-align: middle;
}

.ws-query-preview-table tbody tr:hover td {
  background: var(--ws-surface-hover);
}

.ws-query-row-number {
  width: 38px;
  min-width: 38px;
  padding-inline: 6px !important;
  background: var(--ws-cream);
  color: var(--ws-text-tertiary) !important;
  text-align: center !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

.ws-query-preview-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--ws-border-light);
  color: var(--ws-text-tertiary);
  font-size: 10px;
}

.ws-query-applied-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 7px;
  padding: 8px 5px;
  border-bottom: 1px solid var(--ws-border-light);
}

.ws-query-applied-num {
  color: var(--ws-text-tertiary);
  font-size: 10px;
  font-weight: 800;
}

.ws-query-applied-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ws-query-applied-copy strong,
.ws-query-applied-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-query-applied-copy strong {
  color: var(--ws-text);
  font-size: 11px;
}

.ws-query-applied-copy small {
  color: var(--ws-text-tertiary);
  font-size: 10px;
}

.ws-query-step-remove {
  appearance: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ws-text-tertiary);
  cursor: pointer;
}

.ws-query-step-remove:hover {
  background: var(--ws-surface);
  color: var(--ws-text);
}

.ws-query-no-steps {
  min-height: 120px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 15px;
  color: var(--ws-text-tertiary);
  font-size: 11px;
  text-align: center;
}

.ws-query-steps-tip,
.ws-query-statusline {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ws-text-tertiary);
  font-size: 10px;
  line-height: 1.4;
}

.ws-query-steps-tip {
  margin-top: 18px;
}

.ws-query-statusline {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 0 2px;
}

.ws-query-statusline span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ws-query-empty-state {
  min-height: 480px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 32px;
  border: 1px solid var(--ws-border);
  background: var(--ws-cream);
  text-align: center;
}

.ws-query-empty-art {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  margin-bottom: 4px;
  border: 1px solid var(--ws-primary);
  border-radius: 50%;
  background: var(--ws-primary);
  color: #fff;
}

.ws-query-empty-state h2 {
  margin: 0;
  color: var(--ws-text);
  font-family: var(--ws-display);
  font-size: clamp(26px, 4vw, 42px);
  letter-spacing: -.04em;
}

.ws-query-empty-state p {
  max-width: 540px;
  margin: 0 0 8px;
  color: var(--ws-text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.ws-query-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.ws-query-form-field label {
  color: var(--ws-text);
  font-size: 12px;
  font-weight: 700;
}

.ws-query-form-field small,
.ws-query-modal-note {
  margin: 0;
  color: var(--ws-text-tertiary);
  font-size: 11px;
  line-height: 1.5;
}

.ws-query-input[multiple] {
  min-height: 105px;
  padding: 4px;
}

.ws-query-input[multiple] option {
  padding: 6px 7px;
}

html.theme-dark .ws-query-workbench {
  box-shadow: none;
}

@media (max-width: 1120px) {
  .ws-query-workbench {
    grid-template-columns: 175px 205px minmax(0, 1fr) 205px;
  }

  .ws-query-workbench.ws-query-tools-closed {
    grid-template-columns: 190px minmax(0, 1fr) 210px;
  }

  .ws-query-command {
    padding-inline: 6px;
  }
}

@media (max-width: 820px) {
  .ws-query-studio-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ws-query-workbench {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .ws-query-workbench[class*="ws-query-"] {
    grid-template-columns: 1fr;
  }

  .ws-query-source-panel,
  .ws-query-tools-panel,
  .ws-query-steps-panel {
    max-height: 250px;
    border: 0;
  }

  .ws-query-source-panel {
    border-bottom: 1px solid var(--ws-border);
  }

  .ws-query-tools-panel {
    max-height: 340px;
    border-bottom: 1px solid var(--ws-border);
  }

  .ws-query-panel-collapsed {
    max-height: 54px;
    padding: 8px 10px;
  }

  .ws-query-panel-collapsed .ws-query-collapsible-heading {
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
  }

  .ws-query-panel-collapsed .ws-query-panel-label {
    writing-mode: initial;
    transform: none;
  }

  .ws-query-steps-panel {
    border-top: 1px solid var(--ws-border);
  }

  .ws-query-source-list {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }

  .ws-query-main {
    min-height: 560px;
  }

  .ws-query-ribbon {
    min-height: 0;
  }
}

@media (max-width: 520px) {
  .ws-query-studio {
    gap: 10px;
  }

  .ws-query-sheetbar-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .ws-query-sheetbar-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .ws-query-new-sheet {
    width: 100%;
    justify-content: center;
  }

  .ws-query-sheet-tab {
    min-width: 138px;
  }

  .ws-query-header-actions,
  .ws-query-header-actions .ws-btn {
    width: 100%;
  }

  .ws-query-header-actions .ws-btn {
    justify-content: center;
  }

  .ws-query-preview-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ws-query-preview-actions {
    width: 100%;
  }

  .ws-query-preview-actions .ws-btn {
    flex: 1;
  }

  .ws-query-empty-state {
    min-height: 390px;
    padding: 22px 15px;
  }

  .ws-query-empty-actions,
  .ws-query-empty-actions .ws-btn {
    width: 100%;
  }

  .ws-query-empty-actions .ws-btn {
    justify-content: center;
  }
}

/* Navigation, capabilities and editing controls. */
.ws-history-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border: 1px solid var(--ws-border-light);
  border-radius: var(--ws-radius-md);
  background: var(--ws-surface);
}

.ws-history-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 5px;
}

.ws-history-btn:disabled {
  opacity: .32;
  cursor: not-allowed;
  pointer-events: none;
}

.ws-topbar-settings {
  min-height: 32px;
  padding-inline: 9px;
}

.ws-doc-toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 -12px 18px;
  padding: 7px 10px;
  border: 1px solid var(--ws-border);
  background: color-mix(in srgb, var(--ws-surface) 94%, var(--ws-cream));
  box-shadow: 0 5px 16px rgba(17, 17, 17, .06);
}

.ws-doc-tool-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-right: 5px;
  border-right: 1px solid var(--ws-border-light);
}

.ws-doc-tool-group:last-of-type {
  border-right: 0;
}

.ws-doc-tool,
.ws-doc-format {
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--ws-text-secondary);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.ws-doc-tool {
  width: 29px;
  padding: 0;
}

.ws-doc-format {
  min-width: 100px;
  padding: 0 7px;
  border-color: var(--ws-border);
  background: var(--ws-surface);
  text-align: left;
}

.ws-doc-tool:hover,
.ws-doc-format:hover {
  border-color: var(--ws-border);
  background: var(--ws-primary-light);
  color: var(--ws-text);
}
.ws-doc-tool:focus-visible,
.ws-doc-format:focus-visible {
  border-color: var(--ws-primary);
  background: var(--ws-primary-light);
  color: var(--ws-text);
  outline: 2px solid var(--ws-primary);
  outline-offset: 2px;
}

.ws-doc-metrics {
  margin-left: auto;
  padding-left: 7px;
  color: var(--ws-text-tertiary);
  font-size: 10px;
  white-space: nowrap;
}

.ws-doc-editable {
  min-width: 0;
}

.ws-doc-editable a {
  color: var(--ws-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ws-doc-editable mark {
  background: var(--ws-cream-deep);
  color: inherit;
}

.ws-doc-editable table {
  width: 100%;
  margin: 10px 0;
  border-collapse: collapse;
  font-size: 14px;
}

.ws-doc-editable th,
.ws-doc-editable td {
  min-width: 70px;
  padding: 7px 9px;
  border: 1px solid var(--ws-border);
  text-align: left;
}

.ws-doc-editable th {
  background: var(--ws-cream);
  font-weight: 700;
}

.ws-doc-editable blockquote {
  margin: 8px 0;
  padding: 5px 14px;
  border-left: 3px solid var(--ws-primary);
  color: var(--ws-text-secondary);
}

.ws-doc-editable pre {
  padding: 12px;
  overflow: auto;
  background: var(--ws-cream);
  font-family: 'Consolas', 'SF Mono', monospace;
  white-space: pre-wrap;
}

.ws-doc-editable ul,
.ws-doc-editable ol {
  margin-block: 7px;
  padding-left: 26px;
}

.ws-settings-lead,
.ws-settings-footnote {
  color: var(--ws-text-secondary);
  font-size: 12px;
  line-height: 1.6;
}

.ws-settings-lead {
  margin: 0 0 18px;
}

.ws-settings-footnote {
  margin: 17px 0 0;
  color: var(--ws-text-tertiary);
}

.ws-report-image-picker-preview {
  display: grid;
  min-height: 150px;
  margin: 10px 0;
  place-items: center;
  overflow: hidden;
  border: 1px dashed var(--ws-border-strong);
  border-radius: var(--ws-radius-md);
  background: var(--ws-bg);
  color: var(--ws-text-tertiary);
  font-size: 12px;
  text-align: center;
}

.ws-report-image-picker-preview img {
  display: block;
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
}

.ws-settings-section-title {
  margin: 18px 0 9px;
  color: var(--ws-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ws-capabilities-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ws-capability-card {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid var(--ws-border);
  border-radius: 7px;
  background: var(--ws-cream);
}

.ws-capability-card strong {
  color: var(--ws-text);
  font-size: 12px;
}

.ws-capability-card small {
  color: var(--ws-text-tertiary);
  font-size: 10px;
  line-height: 1.45;
}

.ws-capability-format {
  color: var(--ws-text-secondary);
  font-size: 10px;
  font-weight: 700;
}

.ws-capability-storage {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid var(--ws-border);
  background: var(--ws-surface);
  color: var(--ws-text-secondary);
  font-size: 11px;
}

.ws-capability-storage strong {
  margin-left: auto;
  color: var(--ws-text);
}

.ws-capability-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
}

.ws-capability-form .ws-query-form-field {
  margin-bottom: 10px;
}

.ws-capability-input {
  max-width: 180px;
}

.ws-table-capacity {
  margin-left: auto;
  color: var(--ws-text-tertiary);
  font-size: 10px;
  white-space: nowrap;
}

.ws-grid-table:focus {
  outline: 2px solid var(--ws-primary);
  outline-offset: -2px;
}

.ws-grid-table td.selected-focus {
  box-shadow: inset 0 0 0 2px var(--ws-primary);
}

@media (max-width: 820px) {
  .ws-capabilities-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-doc-toolbar {
    position: static;
    margin-inline: 0;
  }
}

@media (max-width: 520px) {
  .ws-save-state,
  .ws-topbar-settings {
    display: none;
  }

  .ws-doc-toolbar {
    align-items: stretch;
  }

  .ws-doc-tool-group {
    flex-wrap: wrap;
  }

  .ws-doc-metrics {
    width: 100%;
    margin-left: 0;
    padding: 4px 0 0;
  }

  .ws-capabilities-list,
  .ws-capability-form {
    grid-template-columns: 1fr;
  }

  .ws-table-capacity {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 1024px) {
  .ws-dashboard-controls {
    grid-template-columns: 1fr;
  }

  .ws-dashboard-widget-kpi,
  .ws-dashboard-widget-insights {
    grid-column: span 4;
  }

  .ws-dashboard-widget-bar,
  .ws-dashboard-widget-line,
  .ws-dashboard-widget-pie,
  .ws-dashboard-widget-donut,
  .ws-dashboard-widget-table {
    grid-column: span 8;
  }
}

@media (max-width: 820px) {
  .ws-dashboard-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ws-dashboard-header-actions {
    justify-content: flex-start;
  }

  .ws-dashboard-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-dashboard-summary-source {
    justify-content: flex-start;
  }

  .ws-dashboard-widget-kpi,
  .ws-dashboard-widget-bar,
  .ws-dashboard-widget-line,
  .ws-dashboard-widget-pie,
  .ws-dashboard-widget-donut,
  .ws-dashboard-widget-table,
  .ws-dashboard-widget-insights {
    grid-column: 1 / -1;
  }

  .ws-dashboard-source-control {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ws-dashboard-source-control label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .ws-dashboard-summary {
    grid-template-columns: 1fr;
  }

  .ws-dashboard-summary > div {
    justify-content: flex-start;
  }

  .ws-dashboard-filter-row,
  .ws-dashboard-filter-row .ws-dashboard-select,
  .ws-dashboard-filter-row .ws-dashboard-filter-input,
  .ws-dashboard-filter-row .ws-btn {
    width: 100%;
    flex-basis: 100%;
  }

  .ws-dashboard-source-control {
    grid-template-columns: 1fr;
  }

  .ws-dashboard-view-data {
    justify-content: center;
  }

  .ws-dashboard-header-actions,
  .ws-dashboard-header-actions .ws-btn {
    width: 100%;
  }

  .ws-dashboard-header-actions .ws-btn {
    justify-content: center;
  }
}

@media print {
  body.ws-printing-document .ws-sidebar,
  body.ws-printing-document .ws-topbar,
  body.ws-printing-document .ws-statusbar,
  body.ws-printing-document .ws-doc-toolbar,
  body.ws-printing-document .block-handle,
  body.ws-printing-document .ws-toast-container {
    display: none !important;
  }

  body.ws-printing-document .ws-main,
  body.ws-printing-document .ws-content,
  body.ws-printing-document .ws-doc-editor {
    height: auto;
    max-width: none;
    overflow: visible;
    padding: 0;
  }
}

/* APLUNO light mode: clean professional surfaces */
html.theme-light,
html.theme-auto {
  --ws-bg: #F7F8FA;
  --ws-bg-secondary: #F1F3F6;
  --ws-surface: #FFFFFF;
  --ws-surface-hover: #F1F3F6;
  --ws-surface-active: #E8F0FE;
  --ws-primary: #2563EB;
  --ws-primary-hover: #1D4ED8;
  --ws-primary-light: #EFF6FF;
  --ws-primary-medium: rgba(37, 99, 235, 0.12);
  --ws-text: #171A1F;
  --ws-text-secondary: #5F6672;
  --ws-text-tertiary: #9AA1AB;
  --ws-border: #E2E5EA;
  --ws-border-light: #ECEEF2;
  --ws-cream: #F1F3F6;
  --ws-cream-deep: #E2E5EA;
}

@keyframes wsFloatCalm {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.25deg); }
  50% { transform: translate3d(0, -3px, 0) rotate(.25deg); }
}

@keyframes wsBlinkCalm {
  0%, 100% { opacity: .72; }
  50% { opacity: .96; }
}

.ws-hero-drawing {
  animation: wsFloatCalm 16s ease-in-out infinite;
}

.ws-drawing-core {
  animation-duration: 46s;
}

.ws-drawing-note,
.ws-drawing-floating,
.ws-drawing-wave {
  animation-name: wsFloatCalm;
  animation-duration: 18s;
}

.ws-drawing-floating {
  animation-delay: -5s;
}

.ws-drawing-wave {
  animation-duration: 24s;
  animation-delay: -8s;
}

.ws-drawing-dot {
  animation-name: wsBlinkCalm;
  animation-duration: 5s;
}

/* Final compact cascade for modules defined later in this stylesheet. */
.ws-query-studio {
  min-height: calc(100vh - var(--ws-topbar-height) - var(--ws-statusbar-height) - 32px);
  gap: 10px;
}

.ws-query-studio-header {
  gap: 14px;
  padding-bottom: 10px;
}

.ws-query-header-actions,
.ws-query-preview-actions,
.ws-query-empty-actions {
  gap: 5px;
}

.ws-query-sheetbar {
  gap: 7px;
  padding: 7px 9px 0;
}

.ws-query-sheetbar-collapsed {
  padding-bottom: 7px;
}

.ws-query-sheet-tabs {
  gap: 3px;
}

.ws-query-sheet-tab {
  min-width: 128px;
}

.ws-query-sheet-tab-main {
  column-gap: 5px;
  padding: 6px 4px 6px 8px;
}

.ws-query-workbench {
  min-height: 0;
  grid-template-columns: minmax(136px, 156px) minmax(170px, 190px) minmax(0, 1fr) minmax(160px, 180px);
}

.ws-query-workbench.ws-query-tools-closed {
  grid-template-columns: minmax(136px, 156px) minmax(0, 1fr) minmax(160px, 180px);
}

.ws-query-workbench.ws-query-source-collapsed {
  grid-template-columns: 38px minmax(170px, 190px) minmax(0, 1fr) minmax(160px, 180px);
}

.ws-query-workbench.ws-query-workbench.ws-query-tools-closed.ws-query-source-collapsed {
  grid-template-columns: 38px minmax(0, 1fr) minmax(160px, 180px);
}

.ws-query-workbench.ws-query-steps-collapsed {
  grid-template-columns: minmax(136px, 156px) minmax(170px, 190px) minmax(0, 1fr) 38px;
}

.ws-query-workbench.ws-query-tools-closed.ws-query-steps-collapsed {
  grid-template-columns: minmax(136px, 156px) minmax(0, 1fr) 38px;
}

.ws-query-workbench.ws-query-source-collapsed.ws-query-steps-collapsed {
  grid-template-columns: 38px minmax(170px, 190px) minmax(0, 1fr) 38px;
}

.ws-query-workbench.ws-query-tools-closed.ws-query-source-collapsed.ws-query-steps-collapsed {
  grid-template-columns: 38px minmax(0, 1fr) 38px;
}

.ws-query-source-panel,
.ws-query-steps-panel,
.ws-query-tools-panel {
  padding: 10px;
}

.ws-query-panel-heading,
.ws-query-tools-heading {
  margin-bottom: 7px;
}

.ws-query-tool-search,
.ws-query-tools-meta,
.ws-query-tool-filters {
  margin-bottom: 7px;
}

.ws-query-tool-list {
  gap: 9px;
}

.ws-query-tool-section,
.ws-query-tools-panel .ws-query-tool-buttons {
  gap: 4px;
}

.ws-query-tools-panel .ws-query-command {
  min-height: 36px;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 6px;
  padding: 5px 6px;
}

.ws-query-command-icon {
  width: 24px;
  height: 24px;
}

.ws-query-source-list,
.ws-query-field-list,
.ws-query-steps-list {
  gap: 4px;
}

.ws-query-source,
.ws-query-add-source {
  gap: 6px;
  padding: 7px 6px;
}

.ws-query-add-source {
  margin-top: 7px;
}

.ws-query-field-section {
  margin-top: 18px;
}

.ws-query-field {
  gap: 5px;
  padding-block: 4px;
}

.ws-query-ribbon {
  min-height: 76px;
}

.ws-query-tool-group {
  padding: 8px 10px 7px;
}

.ws-query-tool-group-title {
  margin-bottom: 5px;
}

.ws-query-preview-header {
  gap: 8px;
  padding: 8px 10px;
}

.ws-query-preview-table th,
.ws-query-preview-table td {
  padding: 6px 8px;
}

.ws-query-preview-foot {
  padding: 6px 10px;
}

.ws-query-applied-step {
  padding-block: 6px;
}

.ws-query-steps-tip {
  margin-top: 12px;
}

.ws-query-form-field {
  gap: 4px;
  margin-bottom: 10px;
}

.ws-query-empty-state {
  min-height: 380px;
  padding: 24px;
}

.ws-dash-widget {
  padding: 12px;
  gap: 6px;
}

.ws-dashboard-shell {
  gap: 10px;
}

.ws-dashboard-header {
  gap: 12px;
  padding-bottom: 10px;
}

.ws-dashboard-header-actions,
.ws-dashboard-filter-row {
  gap: 5px;
}

.ws-dashboard-controls {
  gap: 7px;
}

.ws-dashboard-control-group {
  gap: 4px;
  padding: 8px 10px;
}

.ws-dashboard-select,
.ws-dashboard-filter-input,
.ws-dashboard-view-data {
  height: 30px;
}

.ws-dashboard-summary > div {
  padding: 8px 10px;
}

.ws-dashboard-grid {
  gap: 8px;
}

.ws-dashboard-widget-card {
  min-height: 148px;
  gap: 8px;
  padding: 10px;
}

.ws-dashboard-widget-kpi {
  min-height: 126px;
}

.ws-dashboard-widget-bar,
.ws-dashboard-widget-line,
.ws-dashboard-widget-table {
  min-height: 232px;
}

.ws-dashboard-widget-header {
  gap: 7px;
}

.ws-dashboard-chart {
  min-height: 170px;
}

.ws-dashboard-chart-svg {
  height: 185px;
}

.ws-dashboard-table-scroll {
  min-height: 170px;
}

.ws-dashboard-data-table th,
.ws-dashboard-data-table td {
  padding: 6px 7px;
}

.ws-dashboard-insights {
  gap: 5px;
}

.ws-dashboard-insight {
  padding: 7px 8px;
}

.ws-dashboard-empty,
.ws-dashboard-loading {
  min-height: 380px;
  padding: 24px;
}

.ws-doc-toolbar {
  margin-bottom: 12px;
  padding: 5px 8px;
}

.ws-doc-tool,
.ws-doc-format {
  height: 27px;
}

.ws-capability-card {
  padding: 9px;
}

.ws-capability-storage {
  margin-top: 8px;
  padding: 7px 9px;
}

@media (max-width: 1120px) and (min-width: 821px) {
  .ws-query-workbench {
    grid-template-columns: 148px 178px minmax(0, 1fr) 170px;
  }

  .ws-query-workbench.ws-query-tools-closed {
    grid-template-columns: 148px minmax(0, 1fr) 170px;
  }
}

@media (max-width: 768px) {
  .ws-query-source-panel,
  .ws-query-tools-panel,
  .ws-query-steps-panel {
    max-height: 220px;
  }

  .ws-query-tools-panel {
    max-height: 300px;
  }
}

@media (max-width: 480px) {
  .ws-query-sheetbar {
    padding-inline: 7px;
  }

  .ws-query-sheet-tab {
    min-width: 120px;
  }
}

.ws-topbar-breadcrumb {
  white-space: nowrap;
}

.ws-topbar-breadcrumb > * {
  flex: 0 0 auto;
  white-space: nowrap;
}

.ws-query-studio {
  height: calc(100vh - var(--ws-topbar-height) - var(--ws-statusbar-height) - 32px);
  min-height: 0;
}

.ws-query-studio-header,
.ws-query-sheetbar {
  flex: 0 0 auto;
}

.ws-query-workbench {
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 820px) {
  .ws-query-studio {
    height: auto;
    min-height: 0;
  }

  .ws-query-workbench {
    flex: 0 0 auto;
  }
}

/* Scanner UI */
.ws-scanner-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ws-bg);
}

.ws-scanner-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(8px * var(--ws-density-scale)) calc(16px * var(--ws-density-scale));
  background: var(--ws-surface);
  border-bottom: 1px solid var(--ws-border-light);
  flex-shrink: 0;
}

.ws-scanner-toolbar h3 {
  font-size: calc(14px * var(--ws-density-scale));
  font-weight: 600;
  margin: 0;
  color: var(--ws-text-primary);
}

.ws-scanner-toolbar-left {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--ws-density-scale));
}

.ws-scanner-toolbar-right {
  display: flex;
  align-items: center;
  gap: calc(4px * var(--ws-density-scale));
}

.ws-scanner-status {
  font-size: calc(12px * var(--ws-density-scale));
  color: var(--ws-text-tertiary);
}

.ws-scanner-status.success {
  color: var(--ws-success);
}

.ws-scanner-status.warning {
  color: var(--ws-warning, #D9893B);
}

.ws-scanner-status.error {
  color: var(--ws-danger, #D94F4F);
}

.ws-scanner-canvas-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1A1A1E;
  overflow: hidden;
  position: relative;
}

.ws-scanner-compare-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.ws-scanner-original {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  border-radius: var(--ws-radius-sm);
}

.ws-scanner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ws-scanner-overlay > * {
  pointer-events: auto;
}

.ws-scanner-quad {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ws-scanner-corner {
  position: absolute;
  width: calc(18px * var(--ws-density-scale));
  height: calc(18px * var(--ws-density-scale));
  border-radius: 50%;
  background: var(--ws-primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  transform: translate(-50%, -50%);
  cursor: grab;
  transition: box-shadow 0.12s, transform 0.12s;
  z-index: 10;
}

.ws-scanner-corner:hover,
.ws-scanner-corner.active {
  box-shadow: 0 2px 8px rgba(81,103,232,0.5);
  transform: translate(-50%, -50%) scale(1.2);
  cursor: grabbing;
}

.ws-scanner-corner:focus-visible {
  outline: 3px solid var(--ws-focus, #f2c94c);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(81,103,232,0.32), 0 2px 8px rgba(81,103,232,0.5);
  transform: translate(-50%, -50%) scale(1.2);
}

.ws-scanner-corrected {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 45%;
  max-height: 45%;
  object-fit: contain;
  border-radius: var(--ws-radius-sm);
  border: 2px solid var(--ws-primary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  z-index: 5;
}

.ws-scanner-corrected-line {
  position: absolute;
  top: 0;
  right: 45%;
  width: 2px;
  height: 45%;
  background: var(--ws-primary);
  opacity: 0;
  z-index: 4;
}

.ws-scanner-compare-container[data-compare="true"] .ws-scanner-corrected {
  max-width: 100%;
  max-height: 100%;
  border: none;
  border-radius: 0;
  clip-path: inset(0 50% 0 0);
}

.ws-scanner-compare-container[data-compare="true"] .ws-scanner-corrected-line {
  opacity: 1;
}

.ws-scanner-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(8px * var(--ws-density-scale)) calc(16px * var(--ws-density-scale));
  background: var(--ws-surface);
  border-top: 1px solid var(--ws-border-light);
  flex-shrink: 0;
}

.ws-scanner-info {
  font-size: calc(12px * var(--ws-density-scale));
  color: var(--ws-text-tertiary);
}

.ws-scanner-dimensions {
  font-variant-numeric: tabular-nums;
}

/* Scanner fullscreen layout — overrides .ws-content scroll so the CTA is always reachable */
.ws-content.scanner-active {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.ws-content.scanner-active > .ws-start {
  display: flex !important;
  flex-direction: column !important;
  max-width: none;
  flex: 1;
  min-height: 0;
}
.ws-content.scanner-active > .ws-start > .hero {
  flex-shrink: 0;
  padding: 12px 16px 8px;
  text-align: left;
}
.ws-content.scanner-active > .ws-start > .hero h1 {
  font-size: 18px;
  margin-bottom: 2px;
}
.ws-content.scanner-active > .ws-start > .hero p {
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .ws-hero-drawing,
  .ws-drawing-core,
  .ws-drawing-note,
  .ws-drawing-floating,
  .ws-drawing-wave,
  .ws-drawing-stroke,
  .ws-drawing-dot {
    animation: none !important;
  }
}

/* Query ribbon final pass: keep Power BI-style density without clipping actions. */
.ws-query-ribbon-panel{min-height:62px;max-height:126px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.ws-query-ribbon-command{min-width:54px;min-height:38px;padding:4px 5px}
.ws-query-ribbon-group{min-width:max-content}
.ws-query-workbench{min-height:min(660px,calc(100vh - 350px))}
@media(max-width:700px){.ws-query-ribbon-panel{max-height:150px}.ws-query-workbench{min-height:540px}}

/* Query: cinta apilada y adaptable, con prioridad para la vista previa. */
.ws-query-ribbon {
  flex: 0 0 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 92px;
  overflow: hidden;
}

.ws-query-ribbon-tabs {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}

.ws-query-ribbon-panel {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  height: auto;
  max-height: none;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: stretch;
  overflow-x: hidden;
  overflow-y: hidden;
}

.ws-query-ribbon-group {
  flex: 0 1 auto;
  min-width: max-content;
  max-width: 100%;
}

.ws-query-ribbon-group-items {
  flex-wrap: wrap;
}

.ws-query-workbench {
  min-height: 0;
}

/* Query: en pantallas medianas conserva hoja, cinta y resultado en el mismo lienzo. */
.ws-query-sheetbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 10px 0;
}

.ws-query-sheetbar-heading {
  flex: 0 0 auto;
}

.ws-query-sheet-tabs {
  flex: 1 1 220px;
  min-width: 0;
}

.ws-query-ribbon-group {
  padding: 2px 6px;
}

.ws-query-ribbon-command {
  min-width: 48px;
  min-height: 30px;
  padding: 2px 3px;
  gap: 2px;
}

@media (max-width: 820px) {
  .ws-query-sheetbar {
    align-items: stretch;
  }

  .ws-query-sheetbar-heading,
  .ws-query-sheet-tabs {
    width: 100%;
    flex-basis: 100%;
  }
}

@media (max-width: 820px) {
  .ws-query-ribbon-panel {
    overflow-y: auto;
  }

  .ws-query-ribbon-group {
    flex: 1 1 auto;
  }
}

/* Document ribbon: use rows before resorting to horizontal scrolling. */
.ws-doc-ribbon-panel{display:flex;flex-wrap:wrap;align-content:flex-start;gap:2px;overflow-x:hidden!important;overflow-y:auto!important}
.ws-doc-tool-group{min-width:0;max-width:100%;flex-wrap:wrap;align-content:center}
.ws-doc-tool-group .ws-doc-tool{min-width:44px}

/* Final editor surfaces: keep the current product pass above legacy module rules. */
.ws-data-toolbar{display:grid;gap:0;overflow:hidden;padding:0!important}.ws-data-toolbar-top{display:flex;align-items:center;gap:7px;min-width:0;padding:6px 9px;border-bottom:1px solid #e1e4e8;background:var(--ws-bg-secondary)}.ws-data-name-input{width:min(260px,35vw);height:30px;padding:4px 8px;border:1px solid var(--ws-border);border-radius:4px;background:var(--ws-surface);color:var(--ws-text);font:600 12px/1 inherit;outline:none}.ws-data-toolbar-context{margin-left:auto;color:var(--ws-text-tertiary);font-size:10px;white-space:nowrap}.ws-data-ribbon-tabs{display:flex;align-items:center;gap:2px;min-width:0;padding:0 9px;border-bottom:1px solid #dfe3e7;background:var(--ws-surface)}.ws-data-ribbon-kicker{margin-right:8px;color:var(--ws-text-tertiary);font:800 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;white-space:nowrap}.ws-data-ribbon-tab{appearance:none;border:0;border-bottom:2px solid transparent;padding:7px 13px;background:transparent;color:var(--ws-text-secondary);font:700 10px/1 inherit;cursor:pointer}.ws-data-ribbon-tab:hover,.ws-data-ribbon-tab.active{background:var(--ws-bg-secondary);color:var(--ws-text);border-bottom-color:var(--ws-primary)}.ws-data-ribbon-panel{display:flex;align-items:stretch;gap:0;min-width:0;min-height:57px;padding:5px 8px;overflow-x:auto;scrollbar-width:thin}.ws-data-tool-group{display:flex;flex-direction:column;justify-content:space-between;gap:3px;flex:0 0 auto;padding:2px 7px;border-right:1px solid var(--ws-border-light)}.ws-data-tool-group-label{color:var(--ws-text-tertiary);font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}.ws-data-tool-group-items{display:flex;align-items:center;gap:2px}.ws-data-command{min-height:31px;padding:4px 7px!important;font-size:10px!important;white-space:nowrap}.ws-data-ribbon-panel>.ws-table-capacity{align-self:center;margin-left:auto;padding-left:10px;color:var(--ws-text-tertiary);font-size:9px;white-space:nowrap}
.ws-doc-ribbon-panel{min-width:0;max-height:none!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}.ws-doc-toolbar>.ws-doc-metrics{order:3;align-self:stretch;text-align:right;border-top:1px solid #e7e9ec}.ws-doc-font-family{min-width:108px}.ws-doc-font-size{min-width:68px}.ws-doc-color{align-self:center;width:31px;height:31px;padding:2px;border:1px solid var(--ws-border);border-radius:4px;background:var(--ws-surface);cursor:pointer}.ws-doc-tool-group:has(.ws-doc-font-family){gap:4px;padding-inline:7px}.ws-doc-tool-group:has(.ws-doc-font-family) .ws-doc-format{margin:3px}.ws-doc-blocks{scroll-margin-top:145px}
.ws-flow{display:flex!important;flex-direction:column;min-height:0;background:var(--ws-bg-secondary)}.ws-flow-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,310px);min-height:0;flex:1;border:1px solid var(--ws-border);background:var(--ws-bg-secondary)}.ws-flow-canvas{position:relative;min-width:0;min-height:460px;overflow:auto;background-color:#f7f8fa;background-image:radial-gradient(#d4dbe5 1px,transparent 1px);background-size:20px 20px}.ws-flow-edges{position:absolute;inset:0;width:100%;height:100%;min-width:900px;min-height:620px;pointer-events:none;overflow:visible}.ws-flow-edge{fill:none;stroke:var(--ws-text-tertiary);stroke-width:2;stroke-dasharray:4 3}.ws-flow-status{top:10px;left:10px;right:10px;display:flex;align-items:center;gap:8px;max-width:calc(100% - 20px);padding:7px 9px;border:1px solid var(--ws-border);border-radius:7px;background:rgba(255,255,255,.88);font-size:10px;box-shadow:0 4px 12px rgba(25,38,64,.06)}.ws-flow-node{min-width:205px;max-width:245px;overflow:visible;border-color:var(--ws-border);border-radius:7px;background:var(--ws-surface);box-shadow:0 5px 16px rgba(31,48,78,.11);cursor:grab;touch-action:none}.ws-flow-node:focus-visible{outline:2px solid var(--ws-primary);outline-offset:3px}.ws-flow-node.selected{border-color:var(--ws-primary);box-shadow:0 0 0 2px var(--ws-primary-medium),0 8px 22px rgba(31,48,78,.15)}.ws-flow-node-header{min-height:35px;padding:7px 8px;border-radius:6px 6px 0 0;font-size:11px}.ws-flow-node-header>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ws-flow-node-edit{display:grid;place-items:center;width:24px;height:24px;margin-left:auto;border:0;border-radius:4px;background:transparent;color:inherit;cursor:pointer}.ws-flow-node-body{display:grid;gap:5px;min-height:74px;padding:10px}.ws-flow-node-body p{margin:0;color:var(--ws-text-secondary);font-size:10px;line-height:1.4}.ws-flow-node-operation{display:inline-flex;max-width:100%;padding:3px 6px;border:1px solid #dbe1e9;border-radius:4px;background:var(--ws-bg-secondary);color:var(--ws-text-secondary);font-size:9px;font-weight:800;overflow:hidden;t... (line truncated to 2000 chars)
@media(max-width:840px){.ws-flow-layout{grid-template-columns:minmax(0,1fr) 260px}.ws-flow-node{min-width:185px;max-width:220px}}
@media(max-width:700px){.ws-data-toolbar-top{flex-wrap:wrap}.ws-data-name-input{width:min(100%,240px);flex:1}.ws-data-toolbar-context{width:100%;margin-left:0}.ws-data-ribbon-kicker{display:none}.ws-data-ribbon-tabs{overflow-x:auto}.ws-data-ribbon-panel{max-height:120px}.ws-data-tool-group{padding-inline:5px}.ws-data-ribbon-panel>.ws-table-capacity{display:none}.ws-doc-ribbon-panel{max-height:144px!important}.ws-doc-toolbar{margin-inline:-2px!important}.ws-doc-tool{min-width:43px;min-height:44px;padding-inline:3px}.ws-doc-tool-label{max-width:56px;font-size:9px}.ws-doc-font-family{min-width:96px}.ws-doc-font-size{min-width:62px}.ws-flow-layout{grid-template-columns:1fr}.ws-flow-inspector{max-height:390px;border-top:1px solid #cfd4db;border-left:0;order:2}.ws-flow-canvas{min-height:380px;order:1}.ws-flow-toolbar{position:static}.ws-flow-status{font-size:9px}}

/* Responsive: doc editor at sidebar-collapse threshold (768px). */
@media (max-width: 768px) {
  .ws-doc-editor {
    padding-top: 12px;
  }
  .ws-doc-toolbar {
    margin-inline: 0 !important;
  }
}

/* Responsive: touch targets for doc toolbar on coarse pointers. */
@media (pointer: coarse) {
  .ws-doc-tool {
    min-width: 48px;
    min-height: 48px;
    padding: 8px 6px;
  }
  .ws-doc-ribbon-tab {
    min-height: 44px;
    padding: 10px 14px;
  }
  .ws-doc-format {
    min-width: 110px;
  }
}

/* Responsive: very small mobile — toolbar overflow and tighter spacing. */
@media (max-width: 420px) {
  .ws-doc-editor {
    padding: 8px 0 48px;
  }
  .ws-doc-editor > input[type="text"] {
    font-size: 22px !important;
  }
  .ws-doc-toolbar {
    border-radius: 4px !important;
  }
  .ws-doc-ribbon-panel {
    max-height: 160px !important;
    padding: 4px 6px;
  }
  .ws-doc-ribbon-tab {
    padding: 8px 10px;
    font-size: 10px;
  }
  .ws-doc-tool {
    min-width: 40px;
    min-height: 40px;
    padding: 4px 2px;
  }
  .ws-doc-tool-label {
    max-width: 48px;
    font-size: 8px;
  }
  .ws-doc-font-family {
    min-width: 80px;
  }
  .ws-doc-font-size {
    min-width: 56px;
  }
  .ws-doc-blocks {
    padding: 20px 12px;
    min-height: 400px;
  }
}

/* P1: Ribbon UX — better grouping, spacing, wider content area */
.ws-doc-editor {
  width: min(100%, 1400px);
}
.ws-doc-toolbar {
  width: min(100%, 1340px);
}
.ws-doc-ribbon-panel {
  gap: 4px;
}
.ws-doc-tool-group {
  gap: 3px;
  padding: 3px 10px;
  border-radius: 6px;
  background: transparent;
}
.ws-doc-tool-group:hover {
  background: var(--ws-surface-hover);
}
.ws-doc-tool {
  min-width: 48px;
  min-height: 48px;
  gap: 3px;
  border-radius: 6px;
}
.ws-doc-tool .ws-doc-tool-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--ws-text-tertiary);
  white-space: nowrap;
}
.ws-doc-tool:hover .ws-doc-tool-label {
  color: var(--ws-primary);
}

/* P2: Touch targets minimum on mobile */
@media (max-width: 768px) {
  .ws-btn,
  .ws-context-menu-item,
  .sidebar-item,
  .sidebar-footer-btn,
  .ws-topbar-btn,
  .ws-tool-card,
  .ws-modal-close {
    min-height: 44px;
    min-width: 44px;
  }
}
.ws-query-header-compact {
  padding: 12px 0 8px;
}
.ws-query-header-compact h1 {
  font-size: 22px;
  margin-bottom: 4px;
}
.ws-query-header-compact p {
  font-size: 13px;
  margin: 0;
}