:root {
 --bg: #f7f9fb;
 --surface: #ffffff;
 --text: #1f2937;
 --muted: #6b7280;
 --accent: #22c55e;
 --accent-700: #16a34a;
 --border: #e5e7eb;
 --shadow: 0 2px 10px rgba(0, 0, 0, .06)
}

* {
 box-sizing: border-box
}

html,
body {
 height: 100%
}

body {
 margin: 0;
 font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Helvetica, Arial, sans-serif;
 background: var(--bg);
 color: var(--text)
}

.topbar {
 height: 64px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 16px;
 background: var(--surface);
 box-shadow: var(--shadow);
 position: sticky;
 top: 0;
 z-index: 10
}

.brand {
 font-weight: 700;
 letter-spacing: .2px
}

.brand .accent {
 color: var(--accent)
}

.topbar-actions {
 display: flex;
 gap: 8px;
 align-items: center
}

.btn {
 border: 1px solid var(--border);
 background: var(--surface);
 color: var(--text);
 padding: 8px 12px;
 border-radius: 8px;
 cursor: pointer;
}

.btn-save {
 background: var(--accent);
 border-color: transparent;
 color: #fff
}

.btn-save:disabled {
 opacity: .8
}

.icon-btn {
 width: 36px;
 height: 36px;
 border-radius: 8px
}

.avatar {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 background: linear-gradient(135deg, #fde68a, #fca5a5)
}

.app {
 display: grid;
 grid-template-columns: 240px 1fr;
 height: calc(100vh - 64px)
}

.sidebar {
 border-right: 1px solid var(--border);
 background: var(--surface);
 padding: 16px 8px;
 display: flex;
 flex-direction: column;
 gap: 12px;
 height: 100%;
}

#widget-list {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
 gap: 8px;
 flex: 1;
 overflow: auto
}

#widget-fixed {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
 gap: 8px
}

#widget-list li,
#widget-fixed li {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 12px;
 border-radius: 12px;
 border: 1px solid var(--border);
 background: var(--surface)
}

#widget-list li {
 cursor: grab
}

#widget-list li:active {
 cursor: grabbing
}

#widget-fixed li {
 opacity: .9;
 cursor: pointer
}

.icon {
 width: 28px;
 height: 28px;
 border-radius: 8px;
 background: #1118270d;
 display: inline-flex;
 align-items: center;
 justify-content: center
}

.icon svg {
 width: 18px;
 height: 18px
}

.workspace {
 position: relative;
 overflow: auto
}

.dashboard {
 position: relative;
 height: 100%;
 padding: 24px;
 display: flex;
 flex-wrap: wrap;
 gap: 16px;
 align-content: flex-start;
 background-image: radial-gradient(#d1d5db 1px, transparent 1px);
 background-size: 20px 20px;
 background-position: 0 0
}

.placeholder-card {
 width: 320px;
 height: 220px;
 display: flex;
 align-items: center;
 justify-content: center
}

.placeholder-dashed {
 width: 100%;
 height: 100%;
 border-radius: 16px;
 border: 2px dashed #cbd5e1;
 background: #f8fafc;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 color: #334155
}

.placeholder-dashed h3 {
 margin: 0 0 8px 0;
 font-size: 16px
}

.placeholder-dashed p {
 margin: 0;
 font-size: 13px;
 color: var(--muted)
}

.widget-card {
 width: 320px;
 height: 220px;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 16px;
 box-shadow: var(--shadow);
 display: flex;
 flex-direction: column;
 resize: both;
 overflow: hidden
}

.widget-card.dragging {
 opacity: .7
}

.widget-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 10px 12px;
 border-bottom: 1px solid var(--border);
 cursor: grab
}

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

.widget-action-btn {
 width: 32px;
 height: 32px;
 border-radius: 10px;
 border: 1px solid var(--border);
 background: var(--surface);
 color: var(--text);
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 0
}

.widget-action-btn:hover {
 border-color: #cbd5e1
}

.widget-title {
 font-weight: 600;
 font-size: 14px
}

.widget-body {
 flex: 1;
 padding: 12px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--muted)
}

.widget-canvas {
 width: 100%;
 height: 100%;
 min-height: 0
}

.config-panel-backdrop {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, .25);
 z-index: 90
}

.config-panel-backdrop.hidden {
 display: none !important
}

.config-panel {
 position: fixed;
 top: 64px;
 right: 0;
 height: calc(100vh - 64px);
 width: 380px;
 max-width: 92vw;
 background: var(--surface);
 border-left: 1px solid var(--border);
 box-shadow: var(--shadow);
 z-index: 95;
 display: flex;
 flex-direction: column
}

.config-panel.hidden {
 display: none !important
}

.config-panel-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 12px 14px;
 border-bottom: 1px solid var(--border);
 font-weight: 700
}

.config-panel-body {
 padding: 14px;
 overflow: auto;
 display: flex;
 flex-direction: column;
 gap: 12px
}

.config-panel-footer {
 padding: 12px 14px;
 border-top: 1px solid var(--border)
}

.config-section-title {
 margin: 0;
 font-size: 12px;
 text-transform: uppercase;
 letter-spacing: .5px;
 color: var(--muted)
}

.config-row {
 display: flex;
 flex-direction: column;
 gap: 6px
}

.config-row label {
 font-size: 13px;
 color: var(--muted)
}

.config-row select,
.config-row input[type="number"],
.config-row input[type="text"],
.config-row input[type="color"] {
 border: 1px solid var(--border);
 border-radius: 10px;
 padding: 10px;
 font-size: 14px;
 background: var(--surface);
 color: var(--text)
}

.config-row.inline {
 flex-direction: row;
 align-items: center;
 justify-content: space-between
}

.config-row.inline label {
 margin: 0
}

.config-row input[type="checkbox"] {
 width: 18px;
 height: 18px
}

.color-picker {
 position: relative
}

.color-picker-btn {
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 border: 1px solid var(--border);
 border-radius: 10px;
 padding: 10px;
 background: var(--surface);
 cursor: pointer
}

.color-picker-left {
 display: flex;
 align-items: center;
 gap: 10px;
 min-width: 0
}

.color-swatch {
 width: 18px;
 height: 18px;
 border-radius: 6px;
 border: 1px solid #0000001a;
 flex: 0 0 auto
}

.color-picker-value {
 font-size: 14px;
 color: var(--text);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis
}

.color-picker-caret {
 color: var(--muted);
 flex: 0 0 auto
}

.color-picker-menu {
 position: absolute;
 top: calc(100% + 6px);
 left: 0;
 right: 0;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 12px;
 box-shadow: var(--shadow);
 padding: 10px;
 z-index: 200
}

.color-picker-menu.hidden {
 display: none !important
}

.color-picker-section {
 display: flex;
 flex-direction: column;
 gap: 8px
}

.color-picker-section-title {
 font-size: 12px;
 text-transform: uppercase;
 letter-spacing: .4px;
 color: var(--muted);
 font-weight: 700
}

.color-picker-swatches {
 display: grid;
 grid-template-columns: repeat(8, 1fr);
 gap: 8px
}

.color-swatch-btn {
 width: 100%;
 aspect-ratio: 1 / 1;
 border-radius: 10px;
 border: 1px solid #0000001a;
 cursor: pointer;
 background: transparent;
 padding: 0
}

.color-picker-inputs {
 display: grid;
 grid-template-columns: 1fr 44px;
 gap: 8px;
 align-items: center
}

.color-picker-native {
 width: 44px;
 height: 40px;
 padding: 0;
 border-radius: 10px;
 border: 1px solid var(--border);
 background: var(--surface);
 overflow: hidden
}

.color-picker-native input[type="color"] {
 width: 100%;
 height: 100%;
 border: none;
 padding: 0;
 background: transparent
}

.size-indicator {
 position: absolute;
 right: 12px;
 bottom: 8px;
 padding: 2px 6px;
 border: 1px solid var(--border);
 border-radius: 6px;
 background: #fafafa;
 color: #64748b;
 font-size: 11px
}

.hidden {
 display: none
}

.drop-indicator {
 width: 320px;
 height: 220px;
 border: 2px dashed #94a3b8;
 border-radius: 16px;
 background: #f1f5f9
}

.modal-overlay {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, .35);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 100
}

.modal-overlay.hidden {
 display: none !important
}

.modal {
 width: 900px;
 max-width: 95vw;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 16px;
 box-shadow: var(--shadow);
 display: flex;
 flex-direction: column
}

.modal-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 12px 16px;
 border-bottom: 1px solid var(--border);
 font-weight: 600
}

.modal-body {
 padding: 16px;
 display: flex;
 flex-direction: column;
 gap: 12px
}

.modal-body.split {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 16px;
 align-items: start
}

.query-left {
 display: flex;
 flex-direction: column;
 gap: 12px
}

.query-right {
 display: flex;
 flex-direction: column;
 gap: 8px
}

.tabs {
 display: flex;
 gap: 8px
}

.tab {
 border: 1px solid var(--border);
 background: #f8fafc;
 padding: 6px 10px;
 border-radius: 8px;
 cursor: pointer
}

.tab.active {
 background: #fff;
 border-color: var(--accent);
 color: var(--accent-700)
}

.tab-panel {
 display: none
}

.tab-panel.active {
 display: flex;
 flex-direction: column;
 gap: 8px
}

.grid-scroll {
 max-height: 60vh;
 overflow: auto
}

.field {
 display: flex;
 flex-direction: column;
 gap: 6px
}

.field input,
.field textarea {
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 10px;
 font-size: 14px
}

.modal-actions {
 display: flex;
 align-items: center;
 gap: 8px
}

.modal-actions .spacer {
 flex: 1
}

.feedback {
 margin-top: 6px;
 color: #0f766e;
 max-height: 100px;
 overflow-y: auto;
 overflow-x: hidden;
 word-wrap: break-word;
 word-break: break-all;
 white-space: pre-wrap;
}

.results-meta {
 border: 1px dashed var(--border);
 padding: 8px;
 border-radius: 8px;
 color: #475569
}

.results-table {
 overflow: auto;
 border: 1px solid var(--border);
 border-radius: 8px
}

.results-table table {
 width: max-content;
 border-collapse: collapse
}

.results-table th,
.results-table td {
 padding: 8px 10px;
 border-bottom: 1px solid var(--border);
 font-size: 13px
}

.results-table th {
 background: #f8fafc;
 text-align: left
}

.results-pagination {
 display: flex;
 gap: 8px;
 align-items: center;
 justify-content: flex-end;
 padding: 8px
}

.results-pagination button {
 border: 1px solid var(--border);
 background: #fff;
 padding: 6px 10px;
 border-radius: 8px
}

.modal.full-screen-modal {
 width: 100vw;
 max-width: 100vw;
 height: 100vh;
 border-radius: 0;
 border: none;
}

.grid-scroll.full-height {
 flex: 1;
 height: auto;
 max-height: none;
 min-height: 0;
}

.structure-table-container {
 height: 300px;
 overflow-y: auto;
 border: 1px solid var(--border);
 border-radius: 8px;
}

.modal-body.split-with-sidebar {
 display: grid;
 grid-template-columns: 200px 1fr 1fr;
 gap: 16px;
 align-items: start;
 height: 550px;
 overflow: hidden;
}

@media (max-width: 1024px) {
 .modal-body.split-with-sidebar {
  grid-template-columns: 180px 1fr;
  grid-template-rows: auto auto;
 }

 .query-right {
  grid-column: 2;
  grid-row: 2;
 }

 .query-sidebar {
  grid-row: 1 / span 2;
 }
}

.query-sidebar {
 border-right: 1px solid var(--border);
 padding-right: 12px;
 display: flex;
 flex-direction: column;
 gap: 10px;
 height: 100%;
 overflow-y: auto;
}

.query-sidebar h3 {
 margin: 0;
 font-size: 13px;
 color: var(--muted);
 text-transform: uppercase;
 font-weight: 700;
 letter-spacing: 0.5px;
}

#saved-queries-list {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.saved-query-item {
 padding: 10px;
 border-radius: 6px;
 cursor: pointer;
 font-size: 13px;
 color: var(--text);
 background: #f8fafc;
 border: 1px solid transparent;
 display: flex;
 justify-content: space-between;
 align-items: center;
 transition: all 0.2s;
}

.saved-query-item:hover {
 background: #e2e8f0;
 border-color: var(--border);
}

.saved-query-item .item-name {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 130px;
}

.saved-query-item .delete-btn {
 opacity: 0;
 font-size: 14px;
 line-height: 1;
 padding: 4px;
 border-radius: 4px;
 background: transparent;
 color: #ef4444;
 border: none;
 cursor: pointer;
}

.saved-query-item:hover .delete-btn {
 opacity: 1;
}

.saved-query-item .delete-btn:hover {
 background: #fee2e2;
}