:root {
    --discord-bg: #f7f9fc;
    --discord-light-bg: #ffffff;
    --discord-darker-bg: #f1f4f9;
    --discord-text: #1f2937;
    --discord-link: #2563eb;
    --discord-button: #2563eb;
    --discord-button-hover: #1d4ed8;
    --discord-red: #dc2626;
    --discord-green: #16a34a;
    --border-color: #e5e7eb;
    --panel-width: 380px;
    --bg-elev-1: #ffffff;
    --bg-elev-2: #f3f4f6;
    --accent: #2563eb;
    --accent-ghost: rgba(37,99,235,.16);
    --bg: var(--discord-bg);
}
body {
    font-family: 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--discord-bg);
    color: var(--discord-text);
    margin: 0;
    padding: 0;
}
.app-header, header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    border-bottom: 1px solid var(--border-color);
}
header h1 { color: #0f172a; margin: 0; font-size: 20px; }
.global-search { width: 360px; max-width: 42vw; box-sizing: border-box; padding: 8px 10px; background: var(--bg-elev-2); color: var(--discord-text); border: 1px solid var(--border-color); border-radius: 6px; margin-right: 12px; }
.layout { display: grid; grid-template-columns: var(--panel-width) 1fr; height: calc(100vh - var(--app-header-h, 70px)); min-height: 0; }
.sidebar { border-right: 1px solid var(--border-color); background: var(--bg-elev-2); display: flex; flex-direction: column; padding: 10px; gap: 10px; }
.tabs { display: flex; flex-direction: column; gap: 6px; }
.tab { display: flex; align-items: center; gap: 10px; padding: 10px; cursor: pointer; border-radius: 8px; color: var(--discord-text); transition: background-color 0.15s, color 0.15s; background: var(--bg-elev-1); user-select: none; border: 1px solid var(--border-color); }
.tab .icon { width: 20px; text-align: center; }
.tab .label { font-weight: 600; }
.tab.active { background-color: var(--accent); color: #ffffff; box-shadow: 0 0 0 1px rgba(37,99,235,.6) inset; }
.sidebar .actions { display: flex; flex-wrap: wrap; gap: 6px; }
button { background-color: var(--discord-button); color: #fff; border: none; padding: 8px 12px; cursor: pointer; border-radius: 6px; transition: background-color 0.15s, box-shadow 0.15s; }
button:hover { background-color: var(--discord-button-hover); }
button.secondary { background-color: var(--bg-elev-1); border: 1px solid var(--border-color); color: #374151; }
button.secondary:hover { background-color: var(--bg-elev-2); }
button.secondary:disabled, .editor-tab:disabled { opacity: .5; background: #e5e7eb; color: #6b7280; border-color: #e5e7eb; cursor: not-allowed; }
button.delete { background-color: var(--discord-red); }
button.delete:hover { background-color: #c03537; }
button { box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.content { display: flex; flex-direction: column; min-height: 0; height: calc(100vh - var(--app-header-h, 70px)); }
.list-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.table-container { overflow: auto; padding: 0 10px 10px 10px; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--border-color); padding: 10px; text-align: left; vertical-align: middle; }
th { position: sticky; top: 0; background: var(--bg-elev-2); z-index: 1; }
tr:nth-child(even) { background-color: #fafafa; }
.table-container tbody tr:hover { background-color: #f2f6ff; }
.id-code { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background: #eef2ff; color: #1f2a44; padding: 2px 6px; border-radius: 6px; border: 1px solid rgba(37,99,235,.25); }
.name-link { color: #1f2937; font-weight: 600; text-decoration: none; }
.name-link:hover { color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 4px 8px; border-radius: 999px; background: var(--bg-elev-2); border: 1px solid var(--border-color); font-size: 12px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: #eef2ff; border: 1px solid rgba(37,99,235,.25); color: #1f2a44; font-size: 12px; }
.pill > span:first-child { font-weight: 700; }
.pill .pill-id { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color: #334155; }
.help { font-size: 12px; color: #6b7280; margin-top: 6px; }
.pill { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.input-small { width: 100px; }
.inline { gap: 8px; }
.hint { font-size: 12px; opacity: .8; }
.muted { opacity: .7; }
.inline { display: inline-flex; align-items: center; gap: 8px; }
.icon-btn { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--bg-elev-2); border: 1px solid var(--border-color); color: #1f2a44; }
.icon-btn:hover { background: #e8eefc; }
.icon { width: 16px; height: 16px; display: inline-block; }
.inline-label { font-size: 12px; font-weight: 600; opacity: .85; }
.input-suffix { display: inline-block; padding: 4px 6px; border-radius: 6px; background: #eef2ff; border: 1px solid rgba(37,99,235,.25); color: #1f2a44; font-size: 12px; }
.panel, .form-section { background: var(--bg-elev-1); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px; }
.chart-card { background: var(--bg-elev-1); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; height: 220px; display: flex; align-items: stretch; }
.chart-card canvas { width: 100% !important; height: 100% !important; }
.section { background: var(--bg-elev-2); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
.section + .section { margin-top: 12px; }
.section-header { display: flex; align-items: center; justify-content: space-between; padding: 10px; background: var(--bg-elev-2); border-bottom: 1px solid var(--border-color); }
.section-title { font-weight: 700; color: #0f172a; letter-spacing: .2px; }
.section-actions { display: inline-flex; gap: 6px; }
.section-body { padding: 10px; }
.section.compact .section-body { padding: 8px; }
.section.compact .form-row { margin-bottom: 6px; }
.editor-columns { display: grid; grid-template-columns: 1fr; gap: 12px; }
.form-section > .editor-columns .section { margin: 0; }
.badge { display: inline-block; min-width: 32px; padding: 2px 8px; text-align: center; border-radius: 999px; background: #121820; border: 1px solid #253247; color: #c8d2e0; font-size: 12px; }
.form-row { display: grid; grid-template-columns: 160px 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.form-row label { font-weight: 600; opacity: .95; }
.form-row label { color: #374151; letter-spacing: .2px; }
.form-row input, .form-row select, .form-row textarea { width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 8px; background: #ffffff; color: #1f2937; }
.form-row input::placeholder, .form-row textarea::placeholder { color: #9ca3af; }
.input { width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 8px; background: #ffffff; color: #1f2937; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(37, 99, 235, .20); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(107, 119, 255, .25); }
.form-row .help { margin-top: 2px; color: #9fb0cc; }
.autofill-fix {}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--discord-text);
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
    box-shadow: 0 0 0px 1000px #ffffff inset;
}
.btn-compact { padding: 6px 10px; font-size: 12px; }
.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); gap: 10px 16px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 6px; }
.stack label { font-size: 12px; font-weight: 600; opacity: .9; }
.editor-tabs { display: flex; gap: 8px; padding: 6px; background: var(--bg-elev-2); border: 1px solid var(--border-color); border-radius: 8px; }
.editor-tab { padding: 8px 12px; background: var(--bg-elev-1); border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; color: #374151; }
.editor-tab:hover { background: #eef2ff; }
.editor-tab.active { background: var(--accent); color: #ffffff; border-color: var(--accent); }
.editor-tab:focus-visible, .tab:focus-visible, button:focus-visible, .icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-ghost), 0 0 0 1px var(--accent); }
.editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); gap: 12px; min-height: 0; align-items: start; }
.form-section .section { width: 100%; }
.form-section.full-span { grid-column: 1 / -1; }
.json-editor { width: 100%; height: 500px; padding: 12px; border-radius: 8px; background: #ffffff; color: #111827; border: 1px solid var(--border-color); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.modal { display: none; position: fixed; inset: 0; z-index: 2000; }
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1000px, 92vw); height: min(86vh, 900px); background: var(--discord-light-bg); border: 1px solid var(--discord-darker-bg); border-radius: 6px; display: grid; grid-template-rows: auto 1fr auto; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--discord-darker-bg); }
.modal-body { overflow: auto; padding: 10px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--border-color); }
.spinner { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border: 5px solid var(--discord-light-bg); border-top: 5px solid var(--discord-button); border-radius: 50%; animation: spin 1s linear infinite; z-index: 2000; }
@keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg);} 100% { transform: translate(-50%, -50%) rotate(360deg);} }

/* Editor page layout */
.editor-page { display: flex; flex-direction: column; gap: 8px; padding: 10px; height: 100%; min-height: 0; background: var(--bg); }
.editor-page-header { display: flex; align-items: center; justify-content: space-between; background: var(--bg-elev-1); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.02); }
.editor-title { font-size: 16px; }
.editor-page-body { overflow-y: auto; overflow-x: hidden; padding-right: 6px; min-height: 0; flex: 1 1 auto; }
.editor-grid { min-height: 0; }
#formEditor { min-height: 0; }