:root {
    --app-bg: #f5f7fb;
    --panel-bg: rgba(255,255,255,.88);
    --panel-border: rgba(15,23,42,.08);
    --soft-bg: #eef2ff;
    --hover-bg: #f8fafc;
    --muted: #64748b;
}
html[data-bs-theme='dark'] {
    --app-bg: #020617;
    --panel-bg: rgba(15,23,42,.88);
    --panel-border: rgba(148,163,184,.18);
    --soft-bg: rgba(79,70,229,.18);
    --hover-bg: rgba(30,41,59,.8);
    --muted: #94a3b8;
}
html, body { font-family: Inter, 'Segoe UI', sans-serif; background: var(--app-bg); color:var(--bs-body-color,#0f172a); }
a { color: inherit; }
.panel-card, .hero-card, .metric-card, .admin-shortcut, .doc-card {
    background: var(--panel-bg); border:1px solid var(--panel-border); border-radius: 28px; box-shadow: 0 10px 30px rgba(15,23,42,.05);
}
.hero-card, .panel-card { padding: 1.5rem; }
.hero-card { background: linear-gradient(135deg, rgba(79,70,229,.08), rgba(15,23,42,.02)); }
.hero-card h1, h1 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; margin-bottom: .75rem; }
.hero-badge, .breadcrumb-chip, .doc-meta, .article-meta {
    display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .7rem; border-radius:999px; background:#eef2ff; color:#4338ca; font-size:.82rem; margin-bottom:1rem;
}
html[data-bs-theme='dark'] .hero-badge, html[data-bs-theme='dark'] .breadcrumb-chip, html[data-bs-theme='dark'] .doc-meta, html[data-bs-theme='dark'] .article-meta { background: rgba(79,70,229,.2); color:#c7d2fe; }
.search-box { display:flex; align-items:center; gap:.75rem; background:transparent; border-radius:20px; padding:.2rem .8rem; }
.doc-card, .admin-shortcut { display:block; padding:1.25rem; text-decoration:none; height:100%; }
.doc-card h3 { font-size:1.15rem; font-weight:700; }
.doc-card p { color: var(--muted); margin-bottom:1rem; }
.auth-wrap { min-height: calc(100vh - 140px); display:grid; place-items:center; }
.auth-card { width:min(100%, 460px); }
.metric-card { padding:1.25rem; min-height:140px; display:flex; flex-direction:column; justify-content:space-between; }
.metric-card span { color:var(--muted); }
.metric-card strong { font-size:1.6rem; }
.admin-shortcut { font-weight:700; }
.doc-page-grid { display:grid; gap:1.25rem; }
.doc-detail-layout, .article-surface { max-width: 920px; }
.article-surface { padding: clamp(1.25rem,3vw,2rem); }
.article-content { line-height:1.8; font-size:1.03rem; }
.article-content img { max-width:100%; border-radius:20px; margin:1rem 0; height:auto; }
.article-content pre { background:#0f172a; color:#e2e8f0; padding:1rem; border-radius:18px; position:relative; overflow:auto; }
.copy-code-btn { position:absolute; top:.75rem; right:.75rem; border:0; background:#334155; color:#fff; border-radius:12px; padding:.35rem .65rem; font-size:.8rem; }
.toc-panel { align-self:start; position:sticky; top:96px; }
.toc-link { display:block; padding:.45rem 0; text-decoration:none; color:var(--muted); }
.feedback-card { border-top:1px solid var(--panel-border); padding-top:1.25rem; }
.editor-shell .ql-toolbar, .editor-shell .ql-container { background:#fff; color:#0f172a; }
.editor-shell .ql-container { min-height:320px; border-radius: 0 0 18px 18px; }
.editor-shell .ql-toolbar { border-radius: 18px 18px 0 0; }
.editor-shell .ql-editor { min-height:320px; }
.editor-shell .ql-editor img { max-width:100%; height:auto; cursor:pointer; }
.editor-shell .ql-editor img.ql-image-selected { outline:3px solid #6366f1; border-radius:12px; }
.editor-shell .ql-formats button.ql-imageSmall,
.editor-shell .ql-formats button.ql-imageMedium,
.editor-shell .ql-formats button.ql-imageLarge { width:auto; padding:0 .5rem; font-size:.72rem; }
.ql-image-resize-handle { position:absolute; width:16px; height:16px; border-radius:50%; background:#4f46e5; border:2px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.15); cursor:nwse-resize; z-index:20; }
.reorder-list { display:flex; flex-direction:column; gap:.75rem; }
.reorder-item { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: .9rem 1rem; border:1px solid var(--panel-border); border-radius:20px; background:rgba(255,255,255,.6); cursor:grab; }
html[data-bs-theme='dark'] .reorder-item { background:rgba(15,23,42,.6); }
.reorder-item.dragging { opacity:.6; border-style:dashed; }
.drag-handle { color:var(--muted); font-size:1.1rem; }
.table-order-badge { min-width:2rem; height:2rem; display:inline-grid; place-items:center; border-radius:999px; background:#e0e7ff; color:#3730a3; font-weight:700; }
.media-library-backdrop { position:fixed; inset:0; background:rgba(2,6,23,.55); z-index:1050; }
.media-library-modal { position:fixed; inset:0; display:grid; place-items:center; padding:1rem; z-index:1051; }
.media-library-card { width:min(1100px, 100%); max-height:90vh; overflow:auto; }
.media-library-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1rem; }
.media-card { border:1px solid var(--panel-border); border-radius:22px; overflow:hidden; background:var(--panel-bg); }
.media-card.active { border-color:#4f46e5; box-shadow:0 0 0 2px rgba(79,70,229,.18); }
.media-preview-btn { display:block; width:100%; border:0; padding:0; background:#eef2ff; }
.media-preview-btn img { width:100%; aspect-ratio: 4/3; object-fit:cover; display:block; }
.empty-state { padding:4rem 1rem; text-align:center; }
#blazor-error-ui { color-scheme: light only; background: #7f1d1d; color:#fff; bottom:0; display:none; left:0; padding:1rem 1.25rem; position:fixed; width:100%; z-index:2000; }
#blazor-error-ui .dismiss { position:absolute; right:1rem; top:.75rem; cursor:pointer; }
@media (min-width: 1200px) { .doc-page-grid { grid-template-columns: minmax(0, 1fr) 280px; } }