/* Panel 2 coherence layer. Loaded last so legacy page styles converge on one
   compact component language without changing the production dashboard. */
:root {
    --p2-bg: #070b14;
    --p2-surface: #0d1422;
    --p2-surface-raised: #111a2a;
    --p2-surface-soft: #151f31;
    --p2-border: rgba(148, 163, 184, .18);
    --p2-border-strong: rgba(148, 163, 184, .3);
    --p2-text: #f3f6fb;
    --p2-muted: #9eabc0;
    --p2-primary: #7c5cff;
    --p2-primary-hover: #8b6cff;
    --p2-danger: #ef5a67;
    --p2-success: #36c978;
    --p2-warning: #f2b84b;
    --p2-radius-sm: 8px;
    --p2-radius-md: 12px;
    --p2-radius-lg: 16px;
    --p2-shadow: 0 8px 22px rgba(0, 0, 0, .2);
    --p2-shadow-soft: none;
    --p2-control-height: 42px;
    --p2-content-width: 1440px;
}

.ui-icon {
    width: 1.15em;
    height: 1.15em;
    display: inline-block;
    flex: 0 0 auto;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.18em;
}

.icon-button .ui-icon,
.topbar-invite-link-v103 .ui-icon,
.invite-shortcut .ui-icon {
    width: 20px;
    height: 20px;
}

.legal-footer-separator {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}

body[data-panel2-page] {
    background: var(--p2-bg);
    color: var(--p2-text);
    font-size: 15px;
}

body[data-panel2-page] .content > * {
    width: min(100%, var(--p2-content-width));
    margin-inline: auto;
}

body[data-panel2-page] .page-header {
    gap: 16px;
    margin-bottom: 22px;
}

body[data-panel2-page] .page-header h1 {
    margin: 0;
    font-size: clamp(1.65rem, 1.2rem + 1vw, 2.2rem);
    line-height: 1.16;
    letter-spacing: -.025em;
}

body[data-panel2-page] .page-header p {
    max-width: 72ch;
    margin-top: 8px;
    color: var(--p2-muted);
    line-height: 1.55;
}

body[data-panel2-page] .eyebrow {
    margin-bottom: 7px;
    color: #b7c2d4;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: none;
}

body[data-panel2-page] :is(.card, .guild-card, .stat-card, .module-card, .list-card, .notice) {
    border-color: var(--p2-border);
    border-radius: var(--p2-radius-md);
    box-shadow: none;
}

body[data-panel2-page] :is(.button, button.button) {
    min-height: var(--p2-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: var(--p2-radius-sm);
    box-shadow: none;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

body[data-panel2-page] :is(.button, button.button):hover {
    filter: none;
    transform: translateY(-1px);
}

body[data-panel2-page] :is(.button, button.button):active {
    transform: translateY(0);
}

body[data-panel2-page] :is(
    input:not([type]),
    input[type="text"],
    input[type="url"],
    input[type="email"],
    input[type="search"],
    input[type="number"],
    input[type="password"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="time"],
    select
) {
    min-height: var(--p2-control-height);
}

body[data-panel2-page] :is(input, select, textarea) {
    border-color: var(--p2-border-strong);
    border-radius: var(--p2-radius-sm);
    box-shadow: none;
}

body[data-panel2-page] :is(input, select, textarea):focus-visible,
body[data-panel2-page] :is(a, button, summary):focus-visible {
    outline: 3px solid rgba(124, 92, 255, .32);
    outline-offset: 2px;
}

body[data-panel2-page] :is(.badge, .pill) {
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 0;
}

body[data-panel2-page] :is(.alert, .notice) {
    border-width: 1px;
    box-shadow: none;
}

body[data-panel2-page] .eyebrow {
    display: none;
}

body[data-panel2-page] :is(.app-topbar, .server-panel, .server-rail, .page-header, .card, .module-card, .stat-card) {
    background-image: none;
}

body[data-panel2-page] :is(
    [class*="-card-v"],
    [class*="-stat-v"],
    [class*="-kpi-v"],
    [class*="-panel-v"],
    [class*="badge"],
    [class*="pill"]
) {
    box-shadow: none;
    background-image: none;
}

body[data-panel2-page] :is(
    .empty-panel-card,
    .empty-state-card,
    [class*="empty-state"],
    [class*="-empty-v"]
) {
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-radius-md);
    background: var(--p2-surface);
    box-shadow: none;
}

body[data-panel2-page] :is(.alert.success, .notice.success) {
    border-color: rgba(54, 201, 120, .45);
    background: rgba(54, 201, 120, .08);
}

body[data-panel2-page] :is(.alert.warning, .notice.warning) {
    border-color: rgba(242, 184, 75, .45);
    background: rgba(242, 184, 75, .08);
}

body[data-panel2-page] :is(.alert.error, .notice.error) {
    border-color: rgba(239, 90, 103, .48);
    background: rgba(239, 90, 103, .08);
}

body[data-panel2-page] .topbar-release-v101 {
    display: none;
}

.panel2-editor-canvas-badge,
.panel2-editor-open-button,
.panel2-editor-selection-tools button,
.panel2-editor-live-hud,
.panel2-user-tooltip-bubble,
.p2e-toolbar,
.p2e-left-panel,
.p2e-properties,
.p2e-dialog,
.p2e-toast {
    box-shadow: none !important;
    background-image: none !important;
}

.panel2-editor-live-hud,
.panel2-user-tooltip-bubble {
    backdrop-filter: none;
}

body[data-panel2-page] .app-topbar,
body[data-panel2-page] .server-panel,
body[data-panel2-page] .server-rail {
    border-color: var(--p2-border);
    box-shadow: none;
}

body[data-panel2-page] .app-topbar {
    background: rgba(7, 11, 20, .94);
}

body[data-panel2-page] .server-panel {
    background: #090f1b;
}

body[data-panel2-page] .server-rail {
    background: #060a12;
}

body[data-panel2-page] :is(.muted, small, .field-help) {
    line-height: 1.45;
}

/* Visual editor uses the same rhythm while keeping its dense workspace layout. */
.p2e-body {
    --e-bg: var(--p2-bg);
    --e-panel: var(--p2-surface);
    --e-panel-2: var(--p2-surface-raised);
    --e-border: #28344a;
    --e-text: var(--p2-text);
    --e-muted: var(--p2-muted);
    --e-accent: var(--p2-primary);
}

.p2e-toolbar,
.p2e-left-panel,
.p2e-properties {
    box-shadow: none;
}

.p2e-panel-section {
    padding: 14px;
}

.p2e-toolbar :is(button, a),
.p2e-left-panel button,
.p2e-properties button,
.p2e-dialog button,
.p2e-tab-panel :is(input, textarea, select),
.p2e-target-bar input {
    border-radius: var(--p2-radius-sm);
}

.p2e-toolbar :is(button, a):focus-visible,
.p2e-left-panel button:focus-visible,
.p2e-properties button:focus-visible,
.p2e-dialog button:focus-visible,
.p2e-tab-panel :is(input, textarea, select):focus-visible,
.p2e-target-bar input:focus-visible {
    outline: 3px solid rgba(124, 92, 255, .34);
    outline-offset: 2px;
}

.p2e-dialog,
.p2e-toast {
    border-radius: var(--p2-radius-md);
    box-shadow: var(--p2-shadow);
}

@media (max-width: 760px) {
    body[data-panel2-page] :is(.button, button.button) {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-panel2-page] *,
    .p2e-body * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}