/* Shared interface surfaces. Status colors and card artwork remain independent. */
html:root {
    --mihu-surface-page: #070913;
    --mihu-surface-card: #10141e;
    --mihu-panel-background: rgba(16, 20, 30, .9);
    --mihu-surface-inset: #070a12;
    --mihu-inset-border: rgba(168, 85, 247, .35);
    --mihu-surface-raised: #181d2b;
    --mihu-surface-dialog: #10141e;
    --mihu-surface-border: rgba(255, 255, 255, .08);
    --mihu-card-radius: 20px;
    --mihu-card-padding: 22px;
    --mihu-primary: #7135cb;
    --mihu-primary-hover: #8246df;
    --mihu-primary-glow: 0 4px 18px rgba(168, 85, 247, .25);
    --mihu-primary-gradient: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
    --mihu-secondary-background: rgba(30, 41, 59, .6);
    --mihu-secondary-border: rgba(255, 255, 255, .15);
    --mihu-secondary-text: #cbd5e1;
    --mihu-toast-glass: linear-gradient(145deg, rgba(34, 39, 58, .96), rgba(16, 20, 30, .96));
    --mihu-scrollbar-track: #070913;
    --mihu-scrollbar-thumb: rgba(168, 85, 247, .3);
    --mihu-scrollbar-thumb-hover: rgba(168, 85, 247, .6);
    --mihu-font-sans: "Segoe UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", sans-serif;
    --mihu-font-mono: Consolas, "SFMono-Regular", "Liberation Mono", "Microsoft JhengHei", monospace;
    --bs-font-sans-serif: var(--mihu-font-sans);
    --bs-font-monospace: var(--mihu-font-mono);
}
html body { background-color:var(--mihu-surface-page) !important; font-family: var(--mihu-font-sans); }
html body.dw-public { background-color: transparent !important; }
body:has(> .app-layout) {
    background-image:
        radial-gradient(circle at 27px 39px, rgba(203, 213, 225, .12) 0 1px, transparent 1.5px),
        radial-gradient(circle at 113px 106px, rgba(167, 139, 250, .12) 0 1px, transparent 1.5px);
    background-size: 173px 151px, 227px 193px;
}
button, input, select, textarea, optgroup { font-family: inherit; }
code, kbd, pre, samp, .font-monospace { font-family: var(--mihu-font-mono) !important; }
/* Native and Bootstrap dialogs use the same dark browser controls. */
dialog, .modal, [role=dialog], [role=alertdialog] { --mihu-surface-card: var(--mihu-surface-dialog); }
dialog, .modal-content { color-scheme: dark; }
.modal-content.bg-dark { background: var(--mihu-surface-card) !important; }
html .table-dark {
    --bs-table-bg: var(--mihu-surface-card);
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-hover-bg: rgba(168, 85, 247, .08);
}

.app-layout :is(.card, .home-card-glass, .glass-panel-card, .settings-entry, .admin-panel, .admin-data-panel, .cyber-card, .analytics-card, .income-stat-card, .schedule-panel, .ann-card) {
    background: var(--mihu-panel-background) !important;
    border: 1px solid var(--mihu-surface-border) !important;
    border-radius: var(--mihu-card-radius) !important;
}
.app-layout :is(.home-card-glass, .glass-panel-card) {
    padding: var(--mihu-card-padding);
}
.app-layout .modal-content {
    background-color: var(--mihu-surface-dialog);
    color-scheme: dark;
}
:is(.app-layout, .modal) :is(.form-control, .form-select, .admin-control):not([type=color], [readonly], :disabled) {
    background-color: var(--mihu-surface-inset) !important;
    color: #fff !important;
}
:is(.app-layout, .modal) :is(.form-control, .form-select, .admin-control):not([type=color], [readonly], :disabled, .is-valid, .is-invalid, [aria-invalid=true]):not(:focus) {
    border-color: var(--mihu-inset-border) !important;
}
.app-layout .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--mihu-primary);
    --bs-btn-border-color: var(--mihu-primary);
    --bs-btn-hover-bg: var(--mihu-primary-hover);
    --bs-btn-hover-border-color: var(--mihu-primary-hover);
    --bs-btn-active-bg: var(--mihu-primary);
    --bs-btn-active-border-color: var(--mihu-primary-hover);
    --bs-btn-focus-shadow-rgb: 192, 132, 252;
}
:is(.app-layout, .modal) :is(.btn-primary, .admin-btn-primary), .mihu-action-buttons .mihu-action-confirm {
    background: var(--mihu-primary-gradient) !important;
    border-color: #c084fc !important;
    border-radius: 50px !important;
    color: #fff !important;
}
:is(.app-layout, .modal) :is(.btn-primary, .admin-btn-primary):not(:disabled, [aria-disabled=true]), .mihu-action-confirm {
    box-shadow: var(--mihu-primary-glow);
    text-shadow: 0 1px 2px #21043c;
}
:is(.app-layout, .modal) :is(.btn-secondary, .btn-outline-secondary, .admin-btn-secondary, .admin-btn-ghost), .mihu-action-buttons .mihu-action-cancel {
    background: var(--mihu-secondary-background) !important;
    border: 1px solid var(--mihu-secondary-border) !important;
    border-radius: 50px !important;
    color: var(--mihu-secondary-text) !important;
}
:is(.app-layout, .modal) :is(.btn-primary, .admin-btn-primary, .btn-secondary, .btn-outline-secondary, .admin-btn-secondary, .admin-btn-ghost):is(:hover, :focus-visible):not(:disabled, [aria-disabled=true]),
.mihu-action-buttons button:hover {
    border-color: #d8b4fe !important;
}

.mihu-toast-region {
    position: fixed;
    inset: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) auto auto;
    z-index: 2000;
    display: grid;
    gap: 8px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
.mihu-toast {
    padding: 12px 16px;
    border: 1px solid var(--mihu-surface-border);
    border-inline-start: 3px solid #c084fc;
    border-radius: 14px;
    color: #f8fafc;
    background: var(--mihu-toast-glass);
    box-shadow: 0 10px 24px #0006;
    overflow-wrap: anywhere;
}
.mihu-toast[data-type="success"] { border-inline-start-color: #34d399; }
.mihu-toast[data-type="error"] { border-inline-start-color: #f87171; }
.mihu-toast[data-type="warning"] { border-inline-start-color: #fbbf24; }

.mihu-action-dialog {
    position: fixed;
    inset: 0;
    width: min(440px, calc(100vw - 32px));
    height: fit-content;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: var(--mihu-card-padding);
    overflow: auto;
    overscroll-behavior: contain;
    color: #f8fafc;
    background: var(--mihu-surface-card);
    border: 1px solid var(--mihu-surface-border);
    border-radius: var(--mihu-card-radius);
    box-shadow: 0 24px 60px #0009;
}
html:has(.mihu-action-dialog[open]) { overflow: hidden; }
.mihu-action-dialog.is-entering[open] {
    animation: mihu-ui-enter 160ms ease-out;
}
:is(.admin-toast, .mihu-toast).is-entering { animation: toastSlideIn 160ms ease-out; }
:is(.admin-toast, .mihu-toast).is-leaving { animation: toastFadeOut 160ms ease-in both; pointer-events: none; }
.mihu-action-dialog.is-entering[open], :is(.admin-toast, .mihu-toast):is(.is-entering, .is-leaving) {
    will-change: transform, opacity;
    backface-visibility: hidden;
}
@media (prefers-reduced-motion: no-preference) {
    [data-mihu-compositor-transition~="opacity"] { will-change: opacity; }
    [data-mihu-compositor-transition~="transform"] { will-change: transform; backface-visibility: hidden; }
    [data-mihu-compositor-transition~="opacity"][data-mihu-compositor-transition~="transform"] { will-change: transform, opacity; }
}
.mihu-action-dialog::backdrop { background: rgba(3, 5, 11, .74); }
.mihu-action-dialog h2 { margin: 0 0 8px; font-size: 1.125rem; font-weight: 750; }
.mihu-action-dialog p { margin: 0; color: #cbd5e1; white-space: pre-wrap; overflow-wrap: anywhere; }
.mihu-action-dialog label:not([hidden]) { display: grid; gap: 6px; margin-top: 16px; }
.mihu-action-dialog input {
    width: 100%;
    padding: 10px 12px;
    color: inherit;
    background: var(--mihu-surface-inset);
    border: 1px solid var(--mihu-inset-border);
    border-radius: 10px;
}
.mihu-action-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.mihu-action-buttons button {
    min-height: 44px;
    padding: 6px 16px;
    border: 1px solid var(--mihu-surface-border);
    border-radius: 10px;
    font-weight: 700;
    color: inherit;
}
.mihu-action-dialog :focus-visible { outline: 2px solid #c084fc; outline-offset: 2px; }

@keyframes mihu-ui-enter {
    from { opacity: 0; transform: translate3d(0, 6px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes toastSlideIn {
    from { opacity: 0; transform: translate3d(40px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes toastFadeOut {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to { opacity: 0; transform: translate3d(20px, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .mihu-action-dialog.is-entering[open], :is(.admin-toast, .mihu-toast):is(.is-entering, .is-leaving) {
        will-change: auto;
        animation: none;
    }
}

@media (forced-colors: none) {
    @supports selector(::-webkit-scrollbar) {
        /* Non-auto standard properties disable WebKit thumb styling in Chromium. */
        * { scrollbar-width: auto !important; scrollbar-color: auto !important; }
        *::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
        *::-webkit-scrollbar-track, *::-webkit-scrollbar-corner {
            background: var(--mihu-scrollbar-track) !important;
        }
        *::-webkit-scrollbar-thumb {
            background: var(--mihu-scrollbar-thumb) !important;
            border: 0 !important;
            border-radius: 10px !important;
            box-shadow: none !important;
        }
        *::-webkit-scrollbar-thumb:hover { background: var(--mihu-scrollbar-thumb-hover) !important; }
    }
    @supports not selector(::-webkit-scrollbar) {
        * { scrollbar-width: thin; scrollbar-color: var(--mihu-scrollbar-thumb) var(--mihu-scrollbar-track); }
    }
}

.official-site-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 44px;
    min-height: 44px;
    padding-inline: 13px;
    border: 1px solid #a885cf66;
    border-radius: 999px;
    background: var(--mihu-secondary-background);
    color: #e9d5ff;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.official-site-link:hover,
.official-site-link:focus-visible {
    color: #fff;
    border-color: #c084fc;
    background: #35234f;
}
.official-site-link:focus-visible {
    outline: 2px solid #e9d5ff;
    outline-offset: 2px;
}
@media (max-width: 480px) {
    .mihu-navbar .official-site-link { padding-inline: 0; }
    .mihu-navbar .official-site-link span { display: none; }
}