:root {
    --doc-ink: #18181b;
    --doc-muted: #71717a;
    --doc-line: #e4e4e7;
    --doc-panel: #ffffff;
    --doc-soft: #f4f4f5;
    --doc-brand: #2563eb;
    --doc-brand-dark: #1d4ed8;
    --doc-accent: #059669;
    --doc-danger: #dc2626;
    --doc-warning: #d97706;
    --doc-radius: 22px;
    --doc-shadow: 0 18px 55px rgba(15, 23, 42, .10);
}

html.dark {
    --doc-ink: #f4f4f5;
    --doc-muted: #a1a1aa;
    --doc-line: #3f3f46;
    --doc-panel: #18181b;
    --doc-soft: #09090b;
    --doc-shadow: 0 18px 55px rgba(0, 0, 0, .28);
}

body.documentation-module {
    margin: 0;
    background: #ffffff;
    color: var(--doc-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
}

html.dark body.documentation-module {
    background: #09090b;
}

.doc-shell {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0;
}

.doc-page {
    margin: 0 auto;
    max-width: 1800px;
    padding: 0;
    display: grid;
    gap: 1.5rem;
}

.doc-hero-wrap {
    overflow: hidden;
    border: 1px solid var(--doc-line);
    border-radius: 1.5rem;
    background: var(--doc-panel);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.doc-hero {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.75rem 1.5rem;
    color: #ffffff;
    background: linear-gradient(135deg, #020617 0%, #0f172a 48%, #172554 100%);
}

.doc-hero-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.doc-hero h1 {
    margin: .5rem 0 0;
    font-size: clamp(1.875rem, 4vw, 3rem);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.04em;
}

.doc-eyebrow {
    margin: 0;
    color: #bfdbfe;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .28em;
    font-weight: 700;
}

.doc-hero p {
    max-width: 48rem;
    margin: .5rem 0 0;
    color: rgba(219, 234, 254, .9);
    font-size: .875rem;
    line-height: 1.65;
}

.doc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.doc-button {
    border: 1px solid transparent;
    border-radius: .75rem;
    padding: .625rem .875rem;
    font-weight: 700;
    font-size: .875rem;
    line-height: 1.25rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.doc-button:hover {
    transform: translateY(-1px);
}

.doc-button.primary,
.doc-button.register,
.doc-button.dark {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .22);
}

.doc-button.primary:hover,
.doc-button.register:hover,
.doc-button.dark:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.doc-button.secondary,
.doc-button.category,
.doc-button.settings {
    background: #7c3aed;
    color: #ffffff;
    border-color: #7c3aed;
    box-shadow: 0 8px 18px rgba(124, 58, 237, .22);
}

.doc-button.secondary:hover,
.doc-button.category:hover,
.doc-button.settings:hover {
    background: #6d28d9;
    border-color: #6d28d9;
}

.doc-button.light,
.doc-button.cancel,
.doc-button.warning {
    background: #f59e0b;
    color: #ffffff;
    border-color: #f59e0b;
    box-shadow: 0 8px 18px rgba(245, 158, 11, .22);
}

.doc-button.light:hover,
.doc-button.cancel:hover,
.doc-button.warning:hover {
    background: #d97706;
    border-color: #d97706;
}

.doc-button.success {
    background: #059669;
    color: #ffffff;
    border-color: #059669;
    box-shadow: 0 8px 18px rgba(5, 150, 105, .22);
}

.doc-button.success:hover {
    background: #047857;
    border-color: #047857;
}

.doc-button.danger {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
    box-shadow: 0 8px 18px rgba(220, 38, 38, .22);
}

.doc-button.danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

.doc-card {
    background: var(--doc-panel);
    border: 1px solid var(--doc-line);
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    overflow: hidden;
}

.doc-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--doc-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.doc-card-body {
    padding: 1.25rem;
}

.doc-grid {
    display: grid;
    gap: 1rem;
}

.doc-grid.stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.doc-stat {
    padding: 1.25rem;
}

.doc-stat strong {
    display: block;
    font-size: 1.875rem;
    line-height: 2.25rem;
    letter-spacing: -.04em;
    color: var(--doc-ink);
}

.doc-stat span {
    color: var(--doc-muted);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.doc-table {
    width: 100%;
    border-collapse: collapse;
}

.doc-table th {
    text-align: left;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--doc-muted);
    padding: .75rem;
    border-bottom: 1px solid var(--doc-line);
}

.doc-table td {
    padding: .875rem .75rem;
    border-bottom: 1px solid var(--doc-line);
    vertical-align: top;
}

.doc-table a,
.doc-link {
    color: #1d4ed8;
    font-weight: 700;
    text-decoration: none;
}

html.dark .doc-table a,
html.dark .doc-link {
    color: #93c5fd;
}

.doc-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .25rem .625rem;
    font-size: .75rem;
    font-weight: 800;
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.doc-badge.published {
    background: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0;
}

.doc-badge.draft {
    background: #f4f4f5;
    color: #52525b;
    border-color: #d4d4d8;
}

.doc-badge.archived {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

html.dark .doc-badge {
    background: rgba(37, 99, 235, .18);
    color: #bfdbfe;
    border-color: rgba(59, 130, 246, .35);
}

html.dark .doc-badge.published {
    background: rgba(5, 150, 105, .18);
    color: #a7f3d0;
    border-color: rgba(16, 185, 129, .35);
}

html.dark .doc-badge.draft {
    background: rgba(113, 113, 122, .18);
    color: #d4d4d8;
    border-color: rgba(161, 161, 170, .30);
}

html.dark .doc-badge.archived {
    background: rgba(220, 38, 38, .16);
    color: #fecaca;
    border-color: rgba(248, 113, 113, .32);
}

.doc-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.doc-field.full {
    grid-column: 1 / -1;
}

.doc-label {
    display: block;
    font-weight: 700;
    margin-bottom: .5rem;
    font-size: .875rem;
    color: var(--doc-ink);
}

.doc-input,
.doc-select,
.doc-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d4d4d8;
    border-radius: .75rem;
    padding: .75rem .875rem;
    background: #ffffff;
    color: #18181b;
    font: inherit;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.doc-input:focus,
.doc-select:focus,
.doc-textarea:focus {
    outline: 2px solid rgba(37, 99, 235, .24);
    border-color: #2563eb;
}

html.dark .doc-input,
html.dark .doc-select,
html.dark .doc-textarea {
    background: #09090b;
    color: #f4f4f5;
    border-color: #3f3f46;
}

.doc-textarea {
    min-height: 360px;
    line-height: 1.6;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.doc-editor {
    border: 1px solid #d4d4d8;
    border-radius: 1rem;
    overflow: hidden;
    background: #ffffff;
}

html.dark .doc-editor {
    background: #09090b;
    border-color: #3f3f46;
}

.doc-editor .doc-textarea {
    border: 0;
    border-radius: 0;
    min-height: 420px;
}

.doc-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    padding: .625rem;
    background: #f4f4f5;
    border-bottom: 1px solid var(--doc-line);
}

html.dark .doc-editor-toolbar {
    background: #18181b;
}

.doc-editor-toolbar button {
    border: 1px solid #d4d4d8;
    background: #ffffff;
    color: #18181b;
    border-radius: .625rem;
    padding: .45rem .625rem;
    font-weight: 800;
    cursor: pointer;
}

html.dark .doc-editor-toolbar button {
    border-color: #3f3f46;
    background: #09090b;
    color: #f4f4f5;
}

.doc-editor-toolbar button:hover,
.doc-editor-toolbar button:focus {
    border-color: #2563eb;
    outline: 2px solid rgba(37, 99, 235, .20);
}

.editor-help {
    padding: 0 .875rem .75rem;
    margin: -.25rem 0 0;
    font-size: .8125rem;
}

.doc-error {
    color: #dc2626;
    font-size: .8125rem;
    margin-top: .375rem;
}

.doc-alert {
    border-radius: 1rem;
    padding: .875rem 1rem;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    font-size: .875rem;
    font-weight: 700;
}

html.dark .doc-alert {
    background: #022c22;
    color: #a7f3d0;
    border-color: #065f46;
}

.doc-warning {
    border-radius: 1rem;
    padding: .875rem 1rem;
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fcd34d;
    font-size: .875rem;
}

html.dark .doc-warning {
    background: #451a03;
    color: #fef3c7;
    border-color: #92400e;
}

.doc-filter {
    display: grid;
    grid-template-columns: 1fr 180px 220px auto;
    gap: .75rem;
    margin-bottom: 1.125rem;
}

.doc-content {
    line-height: 1.75;
    font-size: 1rem;
}

.doc-content h1,
.doc-content h2,
.doc-content h3 {
    line-height: 1.2;
    letter-spacing: -.025em;
    margin: 1.4em 0 .55em;
}

.doc-content h1 {
    font-size: 2rem;
}

.doc-content h2 {
    font-size: 1.55rem;
    border-bottom: 1px solid var(--doc-line);
    padding-bottom: .35rem;
}

.doc-content h3 {
    font-size: 1.25rem;
}

.doc-content p,
.doc-content ul,
.doc-content ol,
.doc-content blockquote,
.doc-content pre {
    margin: 0 0 1rem;
}

.doc-content code {
    background: #f1f5f9;
    border-radius: .4375rem;
    padding: .14rem .32rem;
    font-size: .92em;
}

html.dark .doc-content code {
    background: #1e293b;
    color: #e2e8f0;
}

.doc-content pre {
    overflow-x: auto;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 1rem;
    padding: 1rem;
}

.doc-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.doc-content blockquote {
    border-left: 4px solid #2563eb;
    padding-left: 1rem;
    color: var(--doc-muted);
}

.doc-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.doc-content th,
.doc-content td {
    border: 1px solid var(--doc-line);
    padding: .625rem .75rem;
    text-align: left;
}

.doc-muted {
    color: var(--doc-muted);
}

.doc-attachment-list {
    display: grid;
    gap: .625rem;
}

.doc-attachment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .875rem;
    border: 1px solid var(--doc-line);
    border-radius: .875rem;
    padding: .75rem .875rem;
    background: var(--doc-panel);
}

@media (min-width: 1024px) {
    .doc-hero-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

@media (max-width: 860px) {
    .doc-grid.stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .doc-filter,
    .doc-form-grid {
        grid-template-columns: 1fr;
    }

    .doc-table {
        display: block;
        overflow-x: auto;
    }
}

@media (max-width: 560px) {
    .doc-grid.stats {
        grid-template-columns: 1fr;
    }

    .doc-hero {
        padding: 1.375rem;
        border-radius: 1.375rem;
    }
}