/*
 * Endoria Design System
 * Fonte única para tokens, base, componentes e utilitários compartilhados.
 * Componentes de página podem adicionar regras de layout, mas não devem
 * redefinir fundamentos visuais sem consultar docs/design-system.md.
 */

:root {
    color-scheme: dark;

    /* Cores fundamentais */
    --color-bg-primary: #0b0b12;
    --color-bg-primary-rgb: 11, 11, 18;
    --color-bg-secondary: #12121c;
    --color-bg-secondary-rgb: 18, 18, 28;
    --color-bg-elevated: #181824;
    --color-bg-elevated-rgb: 24, 24, 36;
    --color-surface: #171720;
    --color-surface-rgb: 23, 23, 32;
    --color-surface-hover: #20202c;
    --color-surface-hover-rgb: 32, 32, 44;
    --color-surface-raised: #242432;
    --color-surface-raised-rgb: 36, 36, 50;
    --color-surface-inset: #0f0f17;
    --color-surface-inset-rgb: 15, 15, 23;

    --color-brand-primary: #d4af37;
    --color-brand-rgb: 212, 175, 55;
    --color-brand-strong: #b8860b;
    --color-brand-soft: #ffd966;
    --color-brand-soft-rgb: 255, 217, 102;
    --color-brand-hover: #f2c95f;
    --color-secondary-hover: #2a2a38;
    --color-danger-hover: #ff9b96;
    --color-brand-contrast: #0b0b12;

    --color-text-primary: #f5f1e6;
    --color-text-secondary: #dfd4bd;
    --color-text-muted: #a89e8d;
    --color-text-subtle: #817865;
    --color-text-inverse: #0b0b12;

    --color-border: rgba(255, 255, 255, 0.11);
    --color-border-strong: rgba(212, 175, 55, 0.42);
    --color-border-subtle: rgba(255, 255, 255, 0.07);
    --color-focus-ring: rgba(255, 217, 102, 0.34);

    --color-success: #72d69a;
    --color-success-rgb: 114, 214, 154;
    --color-success-bg: rgba(114, 214, 154, 0.14);
    --color-warning: #efc56c;
    --color-warning-bg: rgba(239, 197, 108, 0.14);
    --color-danger: #ef817c;
    --color-danger-rgb: 239, 129, 124;
    --color-danger-bg: rgba(239, 129, 124, 0.14);
    --color-info: #8dbbff;
    --color-info-rgb: 141, 187, 255;
    --color-info-bg: rgba(141, 187, 255, 0.14);

    /* Tipografia */
    --font-body: 'Inter', 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Cinzel', 'Noto Serif', Georgia, serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.86rem;
    --font-size-md: 0.98rem;
    --font-size-lg: 1.08rem;
    --font-size-xl: 1.35rem;
    --font-size-2xl: 1.8rem;
    --font-size-3xl: clamp(2rem, 4vw, 3.1rem);
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;

    /* Espaçamento */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Forma, elevação e movimento */
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.875rem;
    --radius-xl: 1.25rem;
    --radius-pill: 999px;
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.18);
    --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 24px 52px rgba(0, 0, 0, 0.4);
    --shadow-brand: 0 10px 24px rgba(212, 175, 55, 0.18);
    --shadow-brand-hover: 0 10px 28px rgba(212, 175, 55, 0.34);
    --shadow-danger-hover: 0 10px 28px rgba(191, 75, 75, 0.28);
    --transition-fast: 140ms ease;
    --transition-base: 220ms ease;
    --transition-slow: 320ms ease;

    /* Camadas */
    --z-base: 0;
    --z-dropdown: 200;
    --z-sticky: 500;
    --z-header: 1000;
    --z-overlay: 1100;
    --z-modal: 1200;
    --z-toast: 1300;

    /* Compatibilidade com tokens antigos */
    --primary-gold: var(--color-brand-primary);
    --primary-gold-dark: var(--color-brand-strong);
    --primary-gold-light: var(--color-brand-soft);
    --gold: var(--color-brand-primary);
    --gold-light: var(--color-brand-soft);
    --gold-soft: var(--color-brand-soft);
    --bg: var(--color-bg-primary);
    --dark-bg: var(--color-bg-primary);
    --panel: var(--color-surface);
    --panel-2: var(--color-surface-raised);
    --panel-soft: var(--color-surface-inset);
    --card: var(--color-surface);
    --card-bg: var(--color-surface);
    --text: var(--color-text-primary);
    --muted: var(--color-text-muted);
    --line: var(--color-border-strong);
    --border: var(--color-border);
    --shadow: var(--shadow-md);
    --danger: var(--color-danger);
    --success: var(--color-success);
    --ok: var(--color-success);
    --warn: var(--color-warning);

    /* Compatibilidade da sala VTT */
    --vtt-bg: var(--color-bg-primary);
    --vtt-surface: var(--color-surface);
    --vtt-surface-2: var(--color-surface-raised);
    --vtt-surface-3: #2e2d35;
    --vtt-surface-4: #3d3b43;
    --vtt-outline: var(--color-border);
    --vtt-outline-strong: var(--color-border-strong);
    --vtt-gold: var(--color-brand-primary);
    --vtt-gold-soft: var(--color-brand-soft);
    --vtt-gold-hover: var(--color-brand-hover);
    --vtt-text: var(--color-text-primary);
    --vtt-text-soft: var(--color-text-secondary);
    --vtt-text-muted: var(--color-text-muted);
    --vtt-danger: var(--color-danger);
    --vtt-danger-hover: var(--color-danger-hover);
    --vtt-success: var(--color-success);
    --vtt-info: var(--color-info);
    --vtt-glass: rgba(23, 23, 32, 0.78);
    --vtt-shadow: var(--shadow-md);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
}

body:not(.sala-vtt-body) {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 8%, rgba(var(--color-brand-rgb), 0.06), transparent 28%),
        linear-gradient(135deg, var(--color-bg-primary), var(--color-bg-secondary));
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    text-rendering: optimizeLegibility;
}

body:not(.sala-vtt-body) :where(h1, h2, h3, h4, h5, h6) {
    color: var(--color-text-primary);
    font-family: var(--font-display);
    line-height: var(--line-height-tight);
}

body:not(.sala-vtt-body) :where(p, ul, ol) {
    line-height: var(--line-height-relaxed);
}

body:not(.sala-vtt-body) :where(a:not([class*="btn"]):not(.info-button):not(.global-friends-toggle):not(.licenses-link.primary)) {
    color: var(--color-brand-soft);
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

body:not(.sala-vtt-body) :where(a:not([class*="btn"]):not(.info-button):not(.global-friends-toggle):not(.licenses-link.primary):hover) {
    color: var(--color-brand-primary);
}

body:not(.sala-vtt-body) :where(button, input, select, textarea) {
    font: inherit;
}

body:not(.sala-vtt-body) :where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

body:not(.sala-vtt-body) :where(img, svg) {
    max-width: 100%;
}

/* Layout e utilitários */
.ds-container,
body:not(.sala-vtt-body) .container {
    width: min(100% - (var(--space-8) * 2), 1400px);
    margin-inline: auto;
}

.ds-stack > * + * { margin-top: var(--space-4); }
.ds-stack-sm > * + * { margin-top: var(--space-2); }
.ds-stack-lg > * + * { margin-top: var(--space-8); }
.ds-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ds-grid { display: grid; gap: var(--space-4); }
.ds-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-loading-container { display: none; padding: var(--space-5); text-align: center; }
.ds-mt-4 { margin-top: var(--space-4); }
.filter-search-form { display: flex; align-items: center; gap: var(--space-2); }
body:not(.sala-vtt-body) .filter-search-submit { flex: 0 0 auto; width: auto; }
.ds-muted { color: var(--color-text-muted) !important; }
.ds-surface { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.ds-sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Botões */
body:not(.sala-vtt-body) :where(.btn, .btn-link, .btn-primary, .btn-secondary, .btn-ghost, .btn-outline, .btn-danger, .btn-login, .btn-register, .btn-reset, .btn-cancel, .back-link, .modal-btn, .news-btn, .licenses-link, .newsletter-btn) {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast), opacity var(--transition-fast);
}

body:not(.sala-vtt-body) :where(.btn, .btn-primary, .btn-link, .btn-login, .btn-register, .btn-reset, .modal-btn-primary, .news-btn, .licenses-link.primary, .newsletter-btn, .btn-hero-primary, .nav-link.nav-highlight) {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: var(--color-brand-contrast);
}

body:not(.sala-vtt-body) :where(.btn-secondary, .btn-outline, .btn-google, .modal-btn-secondary, .licenses-link, .btn-ghost) {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
}

body:not(.sala-vtt-body) :where(.btn-danger, .btn-danger:hover) {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #241111;
}

body:not(.sala-vtt-body) :where(.btn-icon, .icon-btn) {
    width: 2.5rem;
    min-width: 2.5rem;
    padding: 0;
    border-radius: var(--radius-md);
}

body:not(.sala-vtt-body) button:hover:not(:disabled),
body:not(.sala-vtt-body) [role="button"]:hover:not(:disabled) {
    background: var(--color-secondary-hover);
    border-color: var(--color-brand-soft);
    color: var(--color-text-primary);
}

body:not(.sala-vtt-body) :is(.btn, .btn-primary, .btn-link, .btn-secondary, .btn-outline, .btn-ghost, .btn-danger, .btn-login, .btn-register, .btn-reset, .btn-cancel, .back-link, .modal-btn, .news-btn, .licenses-link, .newsletter-btn, .btn-hero-primary, .btn-hero-secondary, .btn-entrar, .btn-criar, .btn-detalhes, .btn-excluir, .btn-sair, button, [role="button"]):hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-brand-hover);
    filter: none;
}

body:not(.sala-vtt-body) :is(.btn:not(.btn-secondary):not(.btn-outline):not(.btn-ghost):not(.btn-danger):not(.btn-google):not(.btn-cancel), .btn-primary, .btn-link, .btn-login, .btn-register, .btn-reset, .modal-btn-primary, .news-btn, .licenses-link.primary, .newsletter-btn, .btn-hero-primary, .nav-link.nav-highlight, .btn-criar):hover:not(:disabled) {
    background: var(--color-brand-hover);
    border-color: var(--color-brand-soft);
    color: var(--color-text-inverse);
    box-shadow: 0 0 0 3px rgba(255, 217, 102, 0.16), var(--shadow-brand-hover);
}

body:not(.sala-vtt-body) :is(.btn-secondary, .btn-outline, .btn-ghost, .btn-google, .btn-cancel, .back-link, .modal-btn-secondary, .licenses-link:not(.primary), .btn-hero-secondary, .btn-detalhes):hover:not(:disabled) {
    background: var(--color-secondary-hover);
    border-color: var(--color-brand-soft);
    color: var(--color-text-primary);
    box-shadow: 0 0 0 3px rgba(255, 217, 102, 0.13), var(--shadow-brand-hover);
}

body:not(.sala-vtt-body) :is(.btn-danger, .btn-excluir, .btn-sair):hover:not(:disabled) {
    background: var(--color-danger-hover);
    border-color: #ffd0cd;
    color: #241111;
    box-shadow: 0 0 0 3px rgba(255, 155, 150, 0.14), var(--shadow-danger-hover);
}

body:not(.sala-vtt-body) :where(button, [role="button"], .btn, .btn-primary, .btn-link, .btn-secondary, .btn-outline, .btn-ghost, .btn-danger, .btn-login, .btn-register, .btn-reset, .btn-cancel, .back-link, .modal-btn, .news-btn, .licenses-link, .newsletter-btn, .btn-hero-primary, .btn-hero-secondary, .btn-entrar, .btn-criar, .btn-detalhes, .btn-excluir, .btn-sair):active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 0 0 3px rgba(255, 217, 102, 0.18);
}

body:not(.sala-vtt-body) :where(button, .btn, .btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .btn-danger, .btn-login, .btn-register, .btn-reset, .btn-cancel, .modal-btn, .news-btn, .licenses-link, .newsletter-btn):disabled,
body:not(.sala-vtt-body) :where(.is-disabled) {
    cursor: not-allowed;
    opacity: 0.58;
    transform: none;
    box-shadow: none;
}

body:not(.sala-vtt-body) :where(.is-loading, [aria-busy="true"]) {
    cursor: wait;
}

/* Campos e formulários */
body:not(.sala-vtt-body) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea, .form-control) {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-inset);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
    transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
}

body:not(.sala-vtt-body) :where(textarea) {
    min-height: 7rem;
    resize: vertical;
}

body:not(.sala-vtt-body) :where(input, select, textarea)::placeholder {
    color: var(--color-text-subtle);
    opacity: 1;
}

body:not(.sala-vtt-body) :where(input, select, textarea):hover:not(:disabled):not(:focus) {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
}

body:not(.sala-vtt-body) :where(input, select, textarea):focus {
    border-color: var(--color-brand-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    outline: 0;
}

body:not(.sala-vtt-body) :where(input, select, textarea):disabled,
body:not(.sala-vtt-body) :where(input, select, textarea)[readonly] {
    background: var(--color-bg-secondary);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

body:not(.sala-vtt-body) :where(input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], .has-error input, .has-error select, .has-error textarea) {
    border-color: var(--color-danger);
}

body:not(.sala-vtt-body) :where(input[aria-invalid="false"], select[aria-invalid="false"], textarea[aria-invalid="false"], .has-success input, .has-success select, .has-success textarea) {
    border-color: var(--color-success);
}

body:not(.sala-vtt-body) :where(label, .form-label) {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

body:not(.sala-vtt-body) :where(.form-group, .form-field) {
    margin-bottom: var(--space-5);
}

body:not(.sala-vtt-body) :where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--color-brand-primary);
}

body:not(.sala-vtt-body) :where(.checkbox-inline, .checkbox-item, .radio-item, .switch) {
    cursor: pointer;
}

body:not(.sala-vtt-body) :where(.field-error, .form-error) {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-danger);
    font-size: var(--font-size-xs);
}

/* Cards, painéis e estados */
body:not(.sala-vtt-body) :where(.card, .panel, .form-card, .auth-card, .login-container, .confirmation-card, .reset-card, .sala-card, .post-card, .filter-card, .licenses-card, .news-wrapper) {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

body:not(.sala-vtt-body) :where(.card, .panel, .form-card, .auth-card, .login-container, .confirmation-card, .reset-card) {
    padding: var(--space-6);
}

body:not(.sala-vtt-body) :where(.card, .panel, .form-card, .auth-card, .login-container, .confirmation-card, .reset-card, .sala-card, .post-card, .filter-card, .licenses-card, .news-wrapper):hover {
    border-color: var(--color-border-strong);
}

body:not(.sala-vtt-body) .sala {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

body:not(.sala-vtt-body) .sala:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}

body:not(.sala-vtt-body) :where(.sala-card, .post-card, .filter-card) {
    background: var(--color-surface);
    border-color: var(--color-border);
}

body:not(.sala-vtt-body) :where(.sala-card, .post-card, .filter-card):hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}

body:not(.sala-vtt-body) :where(.tag-adicional, .tag-categoria) {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: rgba(212, 175, 55, 0.1);
    color: var(--color-brand-soft);
}

body:not(.sala-vtt-body) .tag-adicional-0 { background: rgba(212, 175, 55, 0.16); }
body:not(.sala-vtt-body) .tag-adicional-1 { background: var(--color-danger-bg); }
body:not(.sala-vtt-body) .tag-adicional-2 { background: var(--color-success-bg); }
body:not(.sala-vtt-body) .tag-adicional-3 { background: var(--color-info-bg); }
body:not(.sala-vtt-body) .tag-adicional-4 { background: var(--color-warning-bg); }
body:not(.sala-vtt-body) .tag-adicional-5 { background: rgba(185, 137, 255, 0.14); }

body:not(.sala-vtt-body) :where(.alert, .msg, .info-alert, .message, .notice) {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    color: var(--color-text-secondary);
}

body:not(.sala-vtt-body) :where(.alert-success, .msg.ok, .info-alert.success, .message.success, .notice.success) {
    border-color: rgba(114, 214, 154, 0.38);
    background: var(--color-success-bg);
    color: #c7f4d7;
}

body:not(.sala-vtt-body) :where(.alert-warning, .info-alert.warning, .notice.warning) {
    border-color: rgba(239, 197, 108, 0.4);
    background: var(--color-warning-bg);
    color: #ffe9ad;
}

body:not(.sala-vtt-body) :where(.alert-danger, .alert-error, .msg.err, .info-alert.error, .message.error, .notice.error) {
    border-color: rgba(239, 129, 124, 0.4);
    background: var(--color-danger-bg);
    color: #ffd0cd;
}

body:not(.sala-vtt-body) :where(.empty-state, .state-empty) {
    display: grid;
    place-items: center;
    min-height: 12rem;
    padding: var(--space-8);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    text-align: center;
}

.ds-skeleton,
body:not(.sala-vtt-body) :where(.loading-state) {
    min-height: 4rem;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface-raised) 50%, var(--color-surface) 75%);
    background-size: 200% 100%;
    animation: ds-shimmer 1.4s linear infinite;
}

@keyframes ds-shimmer {
    to { background-position: -200% 0; }
}

/* Badges, tabs e menus */
body:not(.sala-vtt-body) :where(.badge, .pill, .tag-pill, .nav-badge, .profile-level) {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 1.5rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: rgba(212, 175, 55, 0.12);
    color: var(--color-brand-soft);
    font-size: var(--font-size-xs);
    font-weight: 700;
}

body:not(.sala-vtt-body) :where(.badge-success, .pill-success) {
    border-color: rgba(114, 214, 154, 0.4);
    background: var(--color-success-bg);
    color: #c7f4d7;
}

body:not(.sala-vtt-body) :where(.badge-danger, .pill-danger) {
    border-color: rgba(239, 129, 124, 0.4);
    background: var(--color-danger-bg);
    color: #ffd0cd;
}

.ds-tabs,
body:not(.sala-vtt-body) :where([role="tablist"], .tabs) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.ds-tab,
body:not(.sala-vtt-body) :where([role="tab"], .tab) {
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.ds-tab:hover,
body:not(.sala-vtt-body) :where([role="tab"]:hover, .tab:hover),
body:not(.sala-vtt-body) :where([role="tab"][aria-selected="true"], .tab.active) {
    border-bottom-color: var(--color-brand-primary);
    color: var(--color-brand-soft);
}

body:not(.sala-vtt-body) :where(.dropdown-menu, .menu, .popover) {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

body:not(.sala-vtt-body) :where(.dropdown-menu, .menu, .popover) { z-index: var(--z-dropdown); }

/* Tabelas */
body:not(.sala-vtt-body) :where(.table-wrap, .table-responsive) {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

body:not(.sala-vtt-body) :where(table) {
    width: 100%;
    border-collapse: collapse;
    color: var(--color-text-secondary);
}

body:not(.sala-vtt-body) :where(th, td) {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    text-align: left;
    vertical-align: middle;
}

body:not(.sala-vtt-body) :where(th) {
    background: var(--color-surface-inset);
    color: var(--color-brand-soft);
    font-size: var(--font-size-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

body:not(.sala-vtt-body) :where(tbody tr:hover) {
    background: rgba(212, 175, 55, 0.055);
}

body:not(.sala-vtt-body) :where(.licenses-card, .news-body, .info-content) {
    min-width: 0;
    overflow-wrap: anywhere;
}

body:not(.sala-vtt-body) :where(.licenses-card a, .news-body a, .info-content a) {
    overflow-wrap: anywhere;
}

/* Tooltip declarativo */
body:not(.sala-vtt-body) :where([data-tooltip]) {
    position: relative;
}

body:not(.sala-vtt-body) :where([data-tooltip])::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--space-2));
    z-index: var(--z-dropdown);
    width: max-content;
    max-width: 18rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);
    font-size: var(--font-size-xs);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 0.25rem);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

body:not(.sala-vtt-body) :where([data-tooltip]:hover, [data-tooltip]:focus-visible)::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Cabeçalho compartilhado */
body:not(.sala-vtt-body) .site-header {
    background: rgba(18, 18, 28, 0.96);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    z-index: var(--z-header);
}

body:not(.sala-vtt-body) :where(.nav-link, .profile-btn) {
    border-radius: var(--radius-md);
}

body:not(.sala-vtt-body) .nav-link:hover:not(:disabled),
body:not(.sala-vtt-body) .nav-link.active,
body:not(.sala-vtt-body) .profile-btn:hover:not(:disabled) {
    background: var(--color-secondary-hover);
    border-color: var(--color-brand-soft);
    color: var(--color-text-primary);
    box-shadow: 0 0 0 3px rgba(255, 217, 102, 0.1);
}

body:not(.sala-vtt-body) .nav-link.nav-highlight:hover {
    background: var(--color-brand-hover);
    border-color: var(--color-brand-soft);
    color: var(--color-text-inverse);
    box-shadow: 0 0 0 3px rgba(255, 217, 102, 0.16), var(--shadow-brand-hover);
}

body:not(.sala-vtt-body) .logout-btn,
body:not(.sala-vtt-body) .logout-btn:hover {
    color: var(--color-danger);
}

/* Modal e toast compartilhados */
body:not(.sala-vtt-body) :where(.modal, .modal-alert) {
    color: var(--color-text-primary);
}

body:not(.sala-vtt-body) :where(.modal-content, .modal-alert-content) {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

body:not(.sala-vtt-body) :where(.modal, .modal-alert) { z-index: var(--z-modal); }

body:not(.sala-vtt-body) :where(.toast-message) {
    z-index: var(--z-toast);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

body:not(.sala-vtt-body) :where(.global-friends-toggle, .global-friends-panel) { z-index: var(--z-overlay); }
body:not(.sala-vtt-body) .aviso-confirmacao { z-index: var(--z-header); }

/* Footer compartilhado: remove o roxo legado e preserva o layout atual. */
body:not(.sala-vtt-body) .modern-footer {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border);
}

body:not(.sala-vtt-body) :where(.footer-col h4, .footer-logo-text h3) {
    color: var(--color-brand-soft);
}

body:not(.sala-vtt-body) :where(.footer-description, .newsletter-text, .footer-links a, .footer-copyright p, .footer-version) {
    color: var(--color-text-muted);
}

body:not(.sala-vtt-body) .footer-heart { color: var(--color-danger); }
body:not(.sala-vtt-body) .footer-separator { margin: 0 var(--space-2); font-size: 0.3rem; }
body:not(.sala-vtt-body) .icon-success { color: var(--color-success); }
body:not(.sala-vtt-body) .icon-warning { color: var(--color-warning); }
body:not(.sala-vtt-body) .icon-brand { color: var(--color-brand-primary); }
body:not(.sala-vtt-body) :where(.footer-logo-icon, .social-link, .newsletter-btn, .back-to-top) {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: var(--color-brand-contrast);
}
body:not(.sala-vtt-body) .newsletter-input-group {
    background: var(--color-surface-inset);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}
body:not(.sala-vtt-body) :where(.newsletter-input-icon, .footer-version i) { color: var(--color-brand-primary); }

/* Componentes de conteúdo que precisam seguir a mesma superfície do portal. */
body:not(.sala-vtt-body) .news-premium-panel {
    background:
        linear-gradient(135deg, rgba(var(--color-brand-rgb), 0.08), transparent 46%),
        var(--color-surface);
    color: var(--color-text-primary);
}

body:not(.sala-vtt-body) :where(.news-premium-title, .news-premium-date) {
    color: var(--color-brand-soft);
}

body:not(.sala-vtt-body) .news-premium-description {
    color: var(--color-text-secondary);
}

body:not(.sala-vtt-body) .news-premium-media {
    background: var(--color-surface-inset);
}

body:not(.sala-vtt-body) .news-premium-link {
    background: linear-gradient(135deg, var(--color-brand-soft), var(--color-brand-primary));
    border: 1px solid var(--color-brand-primary);
    color: var(--color-brand-contrast);
}

body:not(.sala-vtt-body) .news-premium-link:hover {
    background: linear-gradient(180deg, var(--color-brand-soft), var(--color-brand-hover));
    border-color: var(--color-brand-soft);
    color: var(--color-brand-contrast);
    box-shadow: 0 0 0 3px rgba(var(--color-brand-soft-rgb), 0.16), var(--shadow-brand-hover);
}

/* Ações agrupadas permanecem utilizáveis quando a largura diminui. */
@media (max-width: 680px) {
    body:not(.sala-vtt-body) :where(.header-container, .hero-buttons, .info-actions, .licenses-links, .sala-details-actions, .form-actions, .modal-actions) {
        flex-wrap: wrap;
    }

    body:not(.sala-vtt-body) .header-container {
        gap: var(--space-2);
        padding-inline: var(--space-4);
    }

    body:not(.sala-vtt-body) .auth-buttons {
        gap: var(--space-2);
    }

    body:not(.sala-vtt-body) .auth-buttons .btn {
        min-height: 2.25rem;
        padding: 0.5rem 0.65rem;
        font-size: var(--font-size-xs);
    }

    body:not(.sala-vtt-body) :where(.hero-buttons, .info-actions, .licenses-links, .sala-details-actions) > :where(a, button) {
        max-width: 100%;
    }
}

@media (max-width: 420px) {
    body:not(.sala-vtt-body) .header-container {
        padding-inline: var(--space-3);
    }

    body:not(.sala-vtt-body) .auth-buttons {
        gap: var(--space-1);
    }

    body:not(.sala-vtt-body) .auth-buttons .btn {
        padding-inline: var(--space-2);
    }
}

/* Tema da sala VTT: mesmas superfícies, contraste e hierarquia cromática do portal. */
body.sala-vtt-body {
    --vtt-surface-3: var(--color-surface-raised);
    --vtt-surface-4: var(--color-surface-hover);
    --vtt-glass: rgba(23, 23, 32, 0.82);
    --vtt-brand-rgb: var(--color-brand-rgb);
    --vtt-danger-rgb: var(--color-danger-rgb);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}

body.sala-vtt-body .vtt-shell {
    background:
        radial-gradient(circle at top left, rgba(var(--color-brand-rgb), 0.06), transparent 28%),
        radial-gradient(circle at bottom right, rgba(var(--color-brand-rgb), 0.05), transparent 22%),
        var(--color-bg-primary);
}

body.sala-vtt-body .vtt-topbar {
    background:
        linear-gradient(90deg, rgba(var(--color-brand-rgb), 0.08), transparent 34%),
        linear-gradient(135deg, var(--color-bg-elevated), var(--color-bg-secondary));
    border-bottom-color: var(--color-border);
    box-shadow: var(--shadow-md);
}

body.sala-vtt-body :is(.vtt-topnav, .vtt-topbar__actions) {
    background: var(--color-surface-inset);
    border-color: var(--color-border);
}

body.sala-vtt-body .vtt-user-chip {
    background: var(--color-surface);
    border-color: var(--color-border);
}

body.sala-vtt-body :is(.vtt-map-tabs, .vtt-map-card, .vtt-map-notice, .vtt-session-players-view) {
    background: rgba(23, 23, 32, 0.88);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}

body.sala-vtt-body :is(.vtt-map-canvas, .vtt-map-background, .vtt-map-grid-layer, .vtt-map-engine-grid) {
    background-color: var(--color-bg-primary);
}

body.sala-vtt-body .vtt-map-background {
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.025), transparent 18%),
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.018), transparent 20%),
        var(--color-bg-primary);
}

body.sala-vtt-body :is(.vtt-sidebar-card, .vtt-sidebar-section) {
    background: linear-gradient(180deg, var(--color-surface-raised), var(--color-surface));
    border-color: var(--color-border);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.sala-vtt-body .vtt-sidebar-section__header {
    border-bottom-color: var(--color-border);
    background: linear-gradient(180deg, rgba(var(--color-brand-rgb), 0.08), transparent);
}

body.sala-vtt-body :is(.vtt-chat, .vtt-chat__composer) {
    background: var(--color-surface);
}

body.sala-vtt-body .vtt-chat__input-wrap {
    background: var(--color-surface-inset);
    border-color: var(--color-border);
}

body.sala-vtt-body :is(.vtt-chat__bubble--spell, .vtt-roll-result) {
    background: linear-gradient(145deg, var(--color-surface-raised), var(--color-surface));
    border-color: var(--color-border-strong);
}

body.sala-vtt-body :is(.vtt-sheet-window, .vtt-sheet-window__body, .vtt-sheet-window__frame, .vtt-sheet-panel, .modal-senha-content) {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
}

body.sala-vtt-body :is(.vtt-room-entry, .vtt-sidebar-cta, .vtt-fab, .vtt-chat__send) {
    background: linear-gradient(135deg, var(--color-brand-soft), var(--color-brand-primary));
    color: var(--color-brand-contrast);
}

body.sala-vtt-body :is(.vtt-leave-dialog__confirm, .vtt-flash--error) {
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
    color: var(--color-text-primary);
}

body.sala-vtt-body .vtt-flash--success {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-text-primary);
}

body.sala-vtt-body .vtt-roll-die__shape {
    --die-edge: rgba(var(--color-brand-rgb), 0.74);
    --die-face-light: var(--color-surface-hover);
    --die-face-base: var(--color-surface-raised);
    --die-face-shadow: var(--color-surface-inset);
}

body.sala-vtt-body .vtt-leave-dialog__panel,
body.sala-vtt-body .vtt-map-context-menu,
body.sala-vtt-body .vtt-bottom-toolbar,
body.sala-vtt-body .vtt-fab-menu__item {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

body.sala-vtt-body .vtt-leave-dialog__panel,
body.sala-vtt-body .vtt-map-context-menu {
    box-shadow: var(--shadow-lg);
}

body.sala-vtt-body .vtt-chat__header {
    background: var(--color-surface-raised);
    border-bottom-color: var(--color-border);
}

body.sala-vtt-body .vtt-chat__message:not(.is-self) .vtt-chat__bubble:not(.vtt-chat__bubble--spell) {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

body.sala-vtt-body .vtt-chat-mode {
    background: var(--color-surface-inset);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

body.sala-vtt-body .vtt-chat-mode.is-active {
    background: linear-gradient(160deg, var(--color-brand-soft), var(--color-brand-primary));
    border-color: var(--color-brand-soft);
    color: var(--color-text-inverse);
}

body.sala-vtt-body .vtt-bottom-toolbar {
    background: var(--color-surface-inset);
    border-color: var(--color-border);
}

body.sala-vtt-body .vtt-fab-menu__item:hover:not(:disabled) {
    background: var(--color-secondary-hover);
    border-color: var(--color-brand-soft);
    color: var(--color-text-primary);
}

body.sala-vtt-body {
    font-size: var(--font-size-md);
}

body.sala-vtt-body :is(.btn-vtt, .btn-senha-cancelar, .btn-senha-entrar, .vtt-room-entry, .vtt-topnav__item, .vtt-map-tab, .vtt-chat-mode, .vtt-chat-chip, .vtt-chat-macro-chip, .shop-tab-btn, .shop-buy-btn, .ritual-btn) {
    font-size: var(--font-size-sm);
}

body.sala-vtt-body :is(.btn-vtt-secondary, .btn-senha-cancelar, .ritual-btn-ghost, .vtt-icon-btn, .vtt-chat-toggle, .vtt-map-tab:not(.vtt-map-tab--create), .shop-tab-btn, .vtt-leave-dialog__cancel, .modal-vtt-close) {
    color: var(--color-text-primary);
}

body.sala-vtt-body :is(.vtt-topnav__item, .vtt-bottom-tool, .vtt-chat-mode, .vtt-chat-chip) {
    color: var(--color-text-primary);
}

body.sala-vtt-body :is(.vtt-topnav__item.is-active, .vtt-map-tab.is-active, .vtt-bottom-tool.is-active, .vtt-bottom-tool.is-adjusting, .shop-tab-btn.is-active) {
    color: var(--color-text-primary);
}

body.sala-vtt-body :is(.btn-vtt-primary, .btn-senha-entrar, .vtt-room-entry, .vtt-sidebar-cta, .vtt-fab, .vtt-chat__send, .vtt-map-tab--create, .shop-buy-btn) {
    background: linear-gradient(135deg, var(--color-brand-soft), var(--color-brand-primary));
    border-color: var(--color-brand-primary);
    color: var(--color-brand-contrast);
}

/* Contraste das ações douradas em todas as páginas e componentes compartilhados. */
body :is(.btn-primary, .btn-login, .btn-register, .btn-reset, .btn-criar, .btn-editar, .btn-edit, .btn-submit, .publish-btn, .btn-hero-primary, .nav-link.nav-highlight, .licenses-link.primary, .info-button:not(.secondary), .global-friends-toggle, .modal-btn-primary, .newsletter-btn, .search-box button, .btn-vtt-primary, .btn-senha-entrar, .vtt-room-entry, .vtt-sidebar-cta, .vtt-fab, .vtt-chat__send, .vtt-map-tab--create, .shop-buy-btn) {
    color: var(--color-brand-contrast);
}

body :is(.btn-primary, .btn-login, .btn-register, .btn-reset, .btn-criar, .btn-editar, .btn-edit, .btn-submit, .publish-btn, .btn-hero-primary, .nav-link.nav-highlight, .licenses-link.primary, .info-button:not(.secondary), .global-friends-toggle, .modal-btn-primary, .newsletter-btn, .search-box button, .btn-vtt-primary, .btn-senha-entrar, .vtt-room-entry, .vtt-sidebar-cta, .vtt-fab, .vtt-chat__send, .vtt-map-tab--create, .shop-buy-btn):hover:not(:disabled) {
    color: var(--color-brand-contrast);
}

body :is(.btn-secondary, .btn-outline, .btn-ghost, .btn-google, .btn-cancel, .back-link, .modal-btn-secondary, .licenses-link:not(.primary), .btn-hero-secondary, .btn-detalhes, .info-button.secondary, .btn-back, .btn-vtt-secondary, .btn-senha-cancelar) {
    color: var(--color-text-primary);
}

body :is(.btn-secondary, .btn-outline, .btn-ghost, .btn-google, .btn-cancel, .back-link, .modal-btn-secondary, .licenses-link:not(.primary), .btn-hero-secondary, .btn-detalhes, .info-button.secondary, .btn-back, .btn-vtt-secondary, .btn-senha-cancelar):hover:not(:disabled) {
    color: var(--color-text-primary);
}

/* Controles da sala VTT: o Design System centraliza contraste, hover e foco. */
body.sala-vtt-body button:not(.sheet-dnd-form-book button):not(.dnd5e-sheet button):not(.vtt-token):hover:not(:disabled),
body.sala-vtt-body [role="button"]:not(.sheet-dnd-form-book [role="button"]):not(.dnd5e-sheet [role="button"]):hover:not(:disabled) {
    transform: translateY(-1px);
    background: var(--color-secondary-hover);
    border-color: var(--color-brand-soft);
    color: var(--color-text-primary);
    box-shadow: 0 0 0 3px rgba(255, 217, 102, 0.13), var(--shadow-brand-hover);
    filter: none;
}

body.sala-vtt-body :is(.btn-vtt-primary, .btn-senha-entrar, .vtt-room-entry, .vtt-sidebar-cta, .vtt-fab, .vtt-chat__send, .vtt-map-tab--create, .shop-buy-btn):hover:not(:disabled) {
    background: linear-gradient(180deg, var(--color-brand-soft), var(--color-brand-hover));
    border-color: var(--color-brand-soft);
    color: var(--color-text-inverse);
    box-shadow: 0 0 0 3px rgba(255, 217, 102, 0.16), var(--shadow-brand-hover);
}

body.sala-vtt-body :is(.btn-vtt-secondary, .btn-senha-cancelar, .ritual-btn-ghost, .vtt-topnav__item, .vtt-icon-btn, .vtt-chat-toggle, .vtt-map-tab:not(.vtt-map-tab--create), .vtt-map-tab__menu, .shop-tab-btn, .vtt-leave-dialog__cancel, .modal-vtt-close):hover:not(:disabled) {
    background: var(--color-secondary-hover);
    border-color: var(--color-brand-soft);
    color: var(--color-text-primary);
    box-shadow: 0 0 0 3px rgba(255, 217, 102, 0.13), var(--shadow-brand-hover);
}

body.sala-vtt-body :is(.vtt-icon-btn--danger, .vtt-map-context-menu button.is-danger, .vtt-leave-dialog__confirm, .ritual-btn-danger, .is-danger):hover:not(:disabled) {
    background: var(--color-danger-hover);
    border-color: #ffd0cd;
    color: #241111;
    box-shadow: 0 0 0 3px rgba(255, 155, 150, 0.14), var(--shadow-danger-hover);
}

body.sala-vtt-body button:not(.vtt-token):active:not(:disabled),
body.sala-vtt-body [role="button"]:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 0 0 3px rgba(255, 217, 102, 0.18);
}

body.sala-vtt-body button:focus-visible,
body.sala-vtt-body [role="button"]:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

/* Responsividade base */
@media (max-width: 900px) {
    .ds-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .ds-container,
    body:not(.sala-vtt-body) .container {
        width: min(100% - (var(--space-4) * 2), 1400px);
    }

    .ds-grid-2,
    .ds-grid-3 { grid-template-columns: 1fr; }

    body:not(.sala-vtt-body) :where(.card, .panel, .form-card, .auth-card, .login-container, .confirmation-card, .reset-card) {
        padding: var(--space-4);
    }

    body:not(.sala-vtt-body) :where(th, td) {
        padding: var(--space-2) var(--space-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}