.dash-head h1:focus { outline: none; }
.dash-name-input { max-width: 28rem; font-size: 1.4rem; font-weight: 700; }
.dash-head .muted .icon { width: .9rem; height: .9rem; vertical-align: -2px; }

.dash-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid #e5e7eb; }
.dash-tab { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #4b5563; font-size: .875rem; font-weight: 500; cursor: pointer; }
.dash-tab .icon { width: .9rem; height: .9rem; opacity: .7; }
.dash-tab:hover { background: #f3f4f6; color: #111827; }
.dash-tab.is-active { border-color: rgb(var(--primary-500, 37 99 235) / .35); background: rgb(var(--primary-500, 37 99 235) / .1); color: rgb(var(--primary-700, 29 78 216)); font-weight: 600; }
.dash-tab.is-drop-target { box-shadow: inset 2px 0 0 #2563eb; }
.dash-tab[draggable="true"] { cursor: grab; }
.dash-tab-add { padding: .4rem .55rem; color: #6b7280; }

.dash-menu-wrap { position: relative; }
.dash-menu-backdrop { position: fixed; inset: 0; z-index: 40; }
.dash-menu { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 41; display: flex; flex-direction: column; min-width: 15rem; padding: .35rem; border-radius: .6rem; background: #fff; box-shadow: 0 0 0 1px rgb(3 7 18 / .08), 0 12px 28px rgb(3 7 18 / .14); }
.dash-menu button { display: flex; align-items: center; gap: .55rem; padding: .5rem .65rem; border: 0; border-radius: .4rem; background: none; color: #1f2937; font-size: .875rem; text-align: left; cursor: pointer; }
.dash-menu button:hover { background: #f3f4f6; }
.dash-menu button.danger { color: #dc2626; }
.dash-menu .icon { width: 1rem; height: 1rem; color: #6b7280; }
.dash-menu button.danger .icon { color: inherit; }
.dash-menu hr { margin: .3rem 0; border: 0; border-top: 1px solid #f1f5f9; }

.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.dash-widget { display: flex; flex-direction: column; min-width: 0; border-radius: .75rem; background: #fff; box-shadow: 0 0 0 1px rgb(3 7 18 / .06), 0 1px 2px rgb(3 7 18 / .04); transition: box-shadow .15s, opacity .15s; }
.dash-widget.dash-w-3 { grid-column: span 3; }
.dash-widget.dash-w-4 { grid-column: span 4; }
.dash-widget.dash-w-6 { grid-column: span 6; }
.dash-widget.dash-w-8 { grid-column: span 8; }
.dash-widget.dash-w-12 { grid-column: span 12; }
@media (max-width: 1100px) {
    .dash-widget.dash-w-3 { grid-column: span 6; }
    .dash-widget.dash-w-4, .dash-widget.dash-w-6, .dash-widget.dash-w-8 { grid-column: span 12; }
}
@media (max-width: 640px) { .dash-widget.dash-w-3 { grid-column: span 12; } }

.dash-widget-head { display: flex; align-items: flex-start; gap: .5rem; padding: .8rem 1rem .4rem; }
.dash-widget-titles { flex: 1; min-width: 0; }
.dash-grid.is-editing .dash-widget-head { flex-wrap: wrap; }
.dash-grid.is-editing .dash-widget-titles { min-width: 9rem; }
.dash-grid.is-editing .dash-widget-actions { margin-left: auto; }
.dash-widget-titles h2 { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-widget-titles small { display: block; margin-top: .1rem; font-size: .75rem; }
.dash-widget-actions { display: flex; align-items: center; gap: .15rem; flex-shrink: 0; }
.dash-widget-actions .icon-btn { width: 1.9rem; height: 1.9rem; }
.dash-widget-body { flex: 1; min-width: 0; padding: 0 1rem 1rem; }
.dash-size { width: auto; min-width: 0; height: 1.9rem; padding: .2rem 1.6rem .2rem .45rem; font-size: .78rem; }

.dash-grid.is-editing .dash-widget { box-shadow: 0 0 0 1px #cbd5e1, 0 0 0 4px rgb(148 163 184 / .12); }
.dash-widget.is-dragging { opacity: .45; }
.dash-widget.is-drop-target { box-shadow: 0 0 0 2px #2563eb, 0 6px 18px rgb(37 99 235 / .15) !important; }
.dash-grip { display: inline-grid; place-items: center; width: 1.6rem; height: 1.9rem; border-radius: .35rem; color: #94a3b8; cursor: grab; }
.dash-grip:hover { background: #f1f5f9; color: #475569; }
.dash-grip:active { cursor: grabbing; }
.dash-add { grid-column: span 12; display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 4.5rem; border: 2px dashed #cbd5e1; border-radius: .75rem; background: transparent; color: #64748b; font-weight: 600; cursor: pointer; }
.dash-add:hover { border-color: #3b82f6; background: rgb(59 130 246 / .04); color: #1d4ed8; }

.dash-kpi { display: flex; flex-direction: column; gap: .2rem; padding: .25rem 0 .1rem; color: inherit; text-decoration: none; }
.dash-kpi strong { font-size: 1.9rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dash-kpi small { color: #6b7280; font-size: .8rem; }
.dash-kpi:hover strong { color: rgb(var(--primary-600, 37 99 235)); }

.dash-kpis { margin: 0; }
.dash-widget .dash-kpis { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.dash-table-wrap { overflow-x: auto; margin: 0 -1rem; }
.dash-table { font-size: .85rem; }
.dash-table th:first-child, .dash-table td:first-child { padding-left: 1rem; }
.dash-table th:last-child, .dash-table td:last-child { padding-right: 1rem; }
.dash-more { display: inline-block; margin-top: .5rem; font-size: .82rem; font-weight: 600; }
.dash-top { margin: 0; }
.dash-note { white-space: pre-line; font-size: .9rem; line-height: 1.55; color: #374151; }
.dash-empty { margin: .5rem 0; color: #6b7280; font-size: .85rem; }

.dash-skeleton { display: grid; gap: .6rem; padding: .5rem 0; }
.dash-skeleton span { height: .9rem; border-radius: .35rem; background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%); background-size: 200% 100%; animation: dash-shimmer 1.2s infinite linear; }
.dash-skeleton span:nth-child(1) { width: 60%; height: 1.6rem; }
.dash-skeleton span:nth-child(3) { width: 80%; }
@keyframes dash-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.dash-empty-board { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.5rem 1rem; text-align: center; }
.dash-empty-board > .icon { width: 2.2rem; height: 2.2rem; color: #94a3b8; }
.dash-empty-board h2 { margin: 0; }
.dash-empty-board p { max-width: 34rem; }

.dash-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; }
.dash-template { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: .8rem; border: 1px solid #e5e7eb; border-radius: .6rem; background: #fff; color: inherit; text-align: left; cursor: pointer; }
.dash-template .icon { width: 1.2rem; height: 1.2rem; color: #2563eb; }
.dash-template:hover { border-color: #93c5fd; }
.dash-template.is-active { border-color: #2563eb; box-shadow: 0 0 0 2px rgb(37 99 235 / .2); }

.dash-editor { width: min(72rem, 96vw); max-width: none; }
.dash-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: 1.25rem; align-items: start; }
@media (max-width: 960px) { .dash-editor-grid { grid-template-columns: minmax(0, 1fr); } }
.dash-editor-form { max-height: 68vh; overflow-y: auto; padding-right: .25rem; }
.dash-editor-preview { position: sticky; top: 0; padding: .75rem; border-radius: .75rem; background: #f8fafc; box-shadow: inset 0 0 0 1px #e5e7eb; }
.dash-editor-preview .eyebrow { margin: 0 0 .5rem; }
.dash-kind-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin-bottom: 1rem; }
.dash-kind { display: flex; align-items: center; gap: .45rem; padding: .55rem .7rem; border: 1px solid #e5e7eb; border-radius: .55rem; background: #fff; color: #374151; font-size: .85rem; font-weight: 500; text-align: left; cursor: pointer; }
.dash-kind .icon { width: 1rem; height: 1rem; flex-shrink: 0; color: #64748b; }
.dash-kind:hover { border-color: #93c5fd; }
.dash-kind.is-active { border-color: #2563eb; background: #eff6ff; color: #1e3a8a; font-weight: 600; }
.dash-kind.is-active .icon { color: #2563eb; }

.dash-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.dash-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; color: #374151; font-size: .8rem; cursor: pointer; }
.dash-chip .icon { width: .85rem; height: .85rem; }
.dash-chip.is-on { border-color: #93c5fd; background: #eff6ff; color: #1e3a8a; }
.dash-chip input { margin: 0; }
.dash-chip .linkish { display: inline-grid; place-items: center; padding: 0; color: inherit; }
.dash-filters .input { margin-top: .45rem; }
.dash-active-filters { margin-top: .45rem; }
.dash-fav { width: auto; max-width: 16rem; margin-top: 0 !important; padding-top: .3rem; padding-bottom: .3rem; font-size: .8rem; }

.dark .dash-tabs { border-bottom-color: #27272a; }
.dark .dash-tab { color: #a1a1aa; }
.dark .dash-tab:hover { background: #27272a; color: #f4f4f5; }
.dark .dash-tab.is-active { border-color: rgb(96 165 250 / .4); background: rgb(59 130 246 / .15); color: #bfdbfe; }
.dark .dash-menu { background: #18181b; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 12px 28px rgb(0 0 0 / .5); }
.dark .dash-menu button { color: #e4e4e7; }
.dark .dash-menu button:hover { background: #27272a; }
.dark .dash-menu button.danger { color: #f87171; }
.dark .dash-menu hr { border-top-color: #27272a; }
.dark .dash-widget { background: #18181b; box-shadow: 0 0 0 1px rgb(255 255 255 / .08); }
.dark .dash-grid.is-editing .dash-widget { box-shadow: 0 0 0 1px #3f3f46, 0 0 0 4px rgb(63 63 70 / .35); }
.dark .dash-grip:hover { background: #27272a; color: #e4e4e7; }
.dark .dash-add { border-color: #3f3f46; color: #a1a1aa; }
.dark .dash-add:hover { border-color: #60a5fa; background: rgb(59 130 246 / .08); color: #bfdbfe; }
.dark .dash-kpi small, .dark .dash-empty { color: #a1a1aa; }
.dark .dash-kpi:hover strong { color: #93c5fd; }
.dark .dash-note { color: #d4d4d8; }
.dark .dash-skeleton span { background: linear-gradient(90deg, #27272a 0%, #3f3f46 50%, #27272a 100%); background-size: 200% 100%; }
.dark .dash-template, .dark .dash-kind, .dark .dash-chip { border-color: #3f3f46; background: #18181b; color: #e4e4e7; }
.dark .dash-template.is-active, .dark .dash-kind.is-active, .dark .dash-chip.is-on { border-color: #60a5fa; background: rgb(59 130 246 / .15); color: #dbeafe; }
.dark .dash-kind.is-active .icon, .dark .dash-template .icon { color: #93c5fd; }
.dark .dash-editor-preview { background: #0f0f12; box-shadow: inset 0 0 0 1px #27272a; }