/* ==========================================================
   XHOST PANEL — DARK SPACE + GOLD
   ----------------------------------------------------------
   Единая визуальная тема панели.

   ВАЖНО:
   - файл не меняет backend-логику;
   - не меняет маршруты Flask;
   - не меняет Nginx/UFW/VPN;
   - загружается ПОСЛЕ старых inline-стилей и поэтому
     аккуратно переопределяет только внешний вид.
   ========================================================== */

:root {
    --bg-body: #07111d !important;
    --bg-surface: #0b1827 !important;

    --bg-card: rgba(16, 30, 46, 0.72) !important;
    --bg-card-hover: rgba(22, 39, 58, 0.88) !important;

    --card: rgba(16, 30, 46, 0.72) !important;
    --card2: rgba(23, 39, 56, 0.78) !important;

    --border: rgba(214, 164, 79, 0.17) !important;
    --border-subtle: rgba(214, 164, 79, 0.17) !important;
    --border-light: rgba(230, 181, 91, 0.48) !important;

    --text: #f5f2eb !important;
    --text-primary: #f5f2eb !important;
    --text-secondary: #d4d0c6 !important;
    --text-muted: #8f99a5 !important;
    --muted: #8f99a5 !important;

    --accent-1: #d3a04b !important;
    --accent-2: #f0c36b !important;
    --accent-3: #e5b75d !important;

    --gold: #d3a04b;
    --gold-light: #f0c36b;
    --gold-dark: #9a6824;

    --green: #45d392 !important;
    --red: #ff6d73 !important;
    --yellow: #f0b94c !important;
    --blue: #72aef8 !important;

    --shadow-card:
        0 24px 70px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 211, 128, 0.015) !important;

    --radius-card: 30px !important;
    --radius-element: 18px !important;

    --transition:
        all .15s cubic-bezier(.2,.8,.2,1) !important;
}


/* ==========================================================
   PAGE BACKGROUND
   ========================================================== */

html {
    min-height: 100%;
    background: #07111d;
}

body {
    min-height: 100vh !important;
    color: var(--text-primary) !important;

    background:
        radial-gradient(
            circle at 12% 8%,
            rgba(211, 160, 75, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(72, 116, 154, 0.11),
            transparent 30%
        ),
        radial-gradient(
            circle at 55% 105%,
            rgba(211, 160, 75, 0.06),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #07111d 0%,
            #0b1928 48%,
            #07111d 100%
        ) !important;

    background-attachment: fixed !important;
}


/* Мягкая текстура фона */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.012) 1px,
            transparent 1px
        );

    background-size: 42px 42px;
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,.55),
        transparent 85%
    );
}


/* ==========================================================
   TYPOGRAPHY / LINKS
   ========================================================== */

body,
button,
input,
select,
textarea {
    font-family:
        Inter,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif !important;
}

h1,
h2,
h3,
h4 {
    letter-spacing: -.025em;
}

a {
    color: var(--gold-light) !important;
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: #ffe1a0 !important;
}


/* ==========================================================
   GLASSMORPHISM CARDS
   ========================================================== */

.card,
.kpi-card,
.site-card,
.subdomain-card,
.file-item,
.item,
.box,
.ssl-loading-card,
.kpi {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.050),
            rgba(255,255,255,.018)
        ) !important;

    border:
        1px solid rgba(255, 214, 139, .105) !important;

    backdrop-filter: blur(16px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(125%) !important;

    box-shadow:
        0 24px 65px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.035) !important;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease !important;
}

.card,
.box,
.ssl-loading-card {
    border-radius: 30px !important;
}

.kpi-card,
.kpi {
    border-radius: 24px !important;
}

.site-card,
.subdomain-card,
.file-item,
.item {
    border-radius: 20px !important;
}

.card:hover,
.kpi-card:hover,
.kpi:hover,
.site-card:hover,
.subdomain-card:hover,
.file-item:hover,
.item:hover {
    border-color: rgba(239, 190, 101, .34) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        ) !important;

    box-shadow:
        0 30px 75px rgba(0,0,0,.40),
        0 0 35px rgba(211,160,75,.045),
        inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.kpi-card:hover,
.kpi:hover,
.site-card:hover,
.file-item:hover,
.item:hover {
    transform: translateY(-3px) !important;
}


/* ==========================================================
   HEADER / BRAND
   ========================================================== */

.dashboard-header {
    padding: 8px 2px;
}

.brand-icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 20px !important;

    color: #111720 !important;

    background:
        linear-gradient(
            145deg,
            #f5ce7a,
            #c68a32
        ) !important;

    box-shadow:
        0 7px 0 #87591e,
        0 15px 30px rgba(0,0,0,.34),
        0 0 30px rgba(211,160,75,.16) !important;
}

.brand h1 {
    background:
        linear-gradient(
            90deg,
            #fff6dd,
            #e4b760
        ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    text-shadow:
        0 0 28px rgba(228,183,96,.10);
}


/* ==========================================================
   TITLES / ICONS
   ========================================================== */

.card-title,
h1 i,
h2 i,
h3 i {
    color: var(--gold-light) !important;
}

.card-title {
    font-weight: 700 !important;
}

.site-name {
    color: #f1c66f !important;
    font-weight: 700 !important;
}

.site-name:hover {
    color: #ffe0a0 !important;
    text-shadow:
        0 0 16px rgba(240,195,107,.20);
}


/* ==========================================================
   KPI
   ========================================================== */

.kpi-label {
    color: var(--text-muted) !important;
}

.kpi-label i {
    color: var(--gold-light) !important;
}

.kpi-value {
    background:
        linear-gradient(
            90deg,
            #fff7e3,
            #dfad53
        ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    text-shadow:
        0 0 26px rgba(215,166,77,.08);
}

.kpi-value.green,
.green,
.ok,
.uptime-up {
    color: var(--green) !important;
}

.kpi-value.green {
    background:
        linear-gradient(
            90deg,
            #8ff1c0,
            #43d28f
        ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}


/* ==========================================================
   BUTTONS — LIGHT NEUMORPHISM
   ========================================================== */

button,
.btn,
a.btn {
    position: relative;

    border: 1px solid rgba(255, 225, 167, .22) !important;
    border-radius: 16px !important;

    color: #15191f !important;
    font-weight: 700 !important;

    background:
        linear-gradient(
            180deg,
            #efc46e,
            #c88c33
        ) !important;

    box-shadow:
        0 6px 0 #87591e,
        0 12px 24px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.38) !important;

    transform: translateY(0);
    transition:
        transform .12s ease,
        box-shadow .12s ease,
        filter .12s ease !important;
}

button:hover,
.btn:hover,
a.btn:hover {
    color: #0d1218 !important;

    transform: translateY(-2px) !important;

    filter: brightness(1.06);

    box-shadow:
        0 8px 0 #87591e,
        0 17px 31px rgba(0,0,0,.33),
        0 0 22px rgba(224,174,84,.10),
        inset 0 1px 0 rgba(255,255,255,.42) !important;

    opacity: 1 !important;
}

button:active,
.btn:active,
a.btn:active {
    transform: translateY(5px) !important;

    box-shadow:
        0 1px 0 #87591e,
        0 5px 12px rgba(0,0,0,.30) !important;
}


/* Спокойные вторичные кнопки */

.btn-ghost,
.btn-outline {
    color: #d8d7d2 !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.025)
        ) !important;

    border:
        1px solid rgba(228,183,96,.20) !important;

    box-shadow:
        0 5px 0 rgba(0,0,0,.32),
        0 10px 23px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.btn-ghost:hover,
.btn-outline:hover {
    color: #fff2d2 !important;

    border-color:
        rgba(238,190,99,.46) !important;

    background:
        linear-gradient(
            145deg,
            rgba(211,160,75,.14),
            rgba(255,255,255,.035)
        ) !important;

    box-shadow:
        0 7px 0 rgba(0,0,0,.34),
        0 15px 28px rgba(0,0,0,.24),
        0 0 24px rgba(211,160,75,.08) !important;
}


/* Опасные действия остаются красными */

.btn-danger,
.btn-danger-soft {
    color: #fff !important;

    background:
        linear-gradient(
            180deg,
            #f27578,
            #c9434b
        ) !important;

    border-color:
        rgba(255,155,158,.25) !important;

    box-shadow:
        0 6px 0 #7b2930,
        0 12px 24px rgba(0,0,0,.25) !important;
}

.btn-danger:hover,
.btn-danger-soft:hover {
    color: #fff !important;

    box-shadow:
        0 8px 0 #7b2930,
        0 17px 30px rgba(0,0,0,.30),
        0 0 20px rgba(255,87,94,.10) !important;
}


/* Logout не должен выглядеть как огромная primary-кнопка */

.header-actions .btn-danger-soft {
    padding: 10px 20px !important;
}


/* ==========================================================
   INPUTS / TEXTAREA
   ========================================================== */

input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
textarea,
select {
    color: var(--text-primary) !important;

    background:
        rgba(4, 12, 20, .50) !important;

    border:
        1px solid rgba(255,214,139,.13) !important;

    border-radius: 16px !important;

    box-shadow:
        inset 0 2px 7px rgba(0,0,0,.22) !important;
}

input::placeholder,
textarea::placeholder {
    color: #667482 !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color:
        rgba(235,185,92,.64) !important;

    box-shadow:
        0 0 0 4px rgba(211,160,75,.10),
        inset 0 2px 7px rgba(0,0,0,.22) !important;
}


/* ==========================================================
   RADIO SITE TYPE
   ========================================================== */

.type-option {
    border:
        1px solid rgba(255,214,139,.13) !important;

    border-radius: 16px !important;

    background:
        rgba(255,255,255,.025) !important;
}

.type-option:hover {
    color: #ffe8b5 !important;
    border-color:
        rgba(230,180,87,.40) !important;
}

.type-option:has(input:checked) {
    color: #ffe4a8 !important;

    background:
        rgba(211,160,75,.15) !important;

    border-color:
        rgba(235,187,96,.55) !important;

    box-shadow:
        inset 0 0 20px rgba(211,160,75,.055);
}


/* ==========================================================
   STATUS BADGES
   ========================================================== */

.badge {
    border-radius: 999px !important;
    backdrop-filter: blur(8px);
}

.badge.ok,
.badge-green {
    color: #75e7ad !important;

    background:
        rgba(69,211,146,.10) !important;

    border-color:
        rgba(69,211,146,.25) !important;
}

.badge.warn,
.badge-yellow {
    color: #f4c76c !important;

    background:
        rgba(240,185,76,.10) !important;

    border-color:
        rgba(240,185,76,.25) !important;
}

.badge.off {
    color: #a7afb7 !important;

    background:
        rgba(255,255,255,.025) !important;

    border-color:
        rgba(255,255,255,.08) !important;
}

.badge-red {
    color: #ff9095 !important;

    background:
        rgba(255,109,115,.10) !important;
}

.badge-blue {
    color: #9bc7ff !important;

    background:
        rgba(114,174,248,.10) !important;
}


/* ==========================================================
   SERVER INFO / SUBDOMAIN / DNS
   ========================================================== */

.server-info p,
.info-line {
    border-bottom-color:
        rgba(255,214,139,.085) !important;
}

.server-info p i,
.info-line .label i {
    color: var(--gold-light) !important;
}

.subdomains-box,
.dns-box,
.card-inner {
    background:
        rgba(3, 10, 18, .34) !important;

    border:
        1px solid rgba(255,214,139,.08) !important;

    border-radius: 18px !important;
}


/* ==========================================================
   TRAFFIC / TABLES
   ========================================================== */

.traffic-badge {
    color: #f4e8cc !important;

    background:
        rgba(211,160,75,.075) !important;

    border:
        1px solid rgba(224,175,84,.16) !important;
}

table th {
    color: #9ca5ae !important;
}

table td,
table th {
    border-bottom-color:
        rgba(255,214,139,.075) !important;
}

table tbody tr {
    transition: background .15s ease;
}

table tbody tr:hover {
    background:
        rgba(211,160,75,.035);
}


/* Network page */

.card-header {
    color: #f2d08b !important;

    background:
        rgba(211,160,75,.055) !important;

    border-bottom-color:
        rgba(255,214,139,.09) !important;
}

.card-note {
    color: var(--text-muted) !important;

    border-bottom-color:
        rgba(255,214,139,.07) !important;
}


/* ==========================================================
   WARNINGS / SUCCESS / ERRORS
   ========================================================== */

.success-banner {
    color: #7be9b2 !important;

    background:
        rgba(69,211,146,.085) !important;

    border:
        1px solid rgba(69,211,146,.22) !important;

    border-radius: 18px !important;

    box-shadow:
        0 12px 32px rgba(0,0,0,.20);
}

.warning {
    color: #efc66f !important;

    background:
        rgba(211,160,75,.075) !important;

    border:
        1px solid rgba(222,172,80,.24) !important;

    border-radius: 18px !important;
}

.error {
    border-radius: 18px !important;
}


/* ==========================================================
   FILES / UPLOAD
   ========================================================== */

.upload-area {
    background:
        rgba(2,9,16,.28) !important;

    border:
        2px dashed rgba(219,170,82,.24) !important;

    border-radius: 20px !important;
}

.upload-area:hover {
    border-color:
        rgba(239,191,101,.50) !important;

    background:
        rgba(211,160,75,.035) !important;
}


/* ==========================================================
   LOGS / EDITOR
   ========================================================== */

pre,
textarea {
    background:
        rgba(1, 7, 13, .62) !important;

    border:
        1px solid rgba(255,214,139,.10) !important;
}

pre {
    color: #c7ced4 !important;
    border-radius: 18px !important;
}


/* ==========================================================
   SSL OVERLAY
   ========================================================== */

.ssl-loading-overlay {
    background:
        rgba(3, 9, 16, .86) !important;

    backdrop-filter:
        blur(13px) !important;
}

.ssl-loading-card {
    border-color:
        rgba(230,181,91,.25) !important;
}

.ssl-loading-icon {
    color: #e8bb62 !important;

    background:
        rgba(211,160,75,.12) !important;

    box-shadow:
        0 0 35px rgba(211,160,75,.10);
}

.ssl-spinner {
    border-color:
        rgba(255,255,255,.10) !important;

    border-top-color:
        #e8bb62 !important;
}

.ssl-loading-domain {
    color:
        #efc671 !important;
}


/* ==========================================================
   LOGIN / SETUP
   ========================================================== */

.box {
    border-radius: 32px !important;
}

.box h2,
body > .card > h1 {
    color: #f4e6c7;
}


/* ==========================================================
   BACK LINKS
   ========================================================== */

.back-link,
.back {
    color: #bd9958 !important;
}

.back-link:hover,
.back:hover {
    color: #f4cb7b !important;
}


/* ==========================================================
   DIVIDERS / SCROLLBAR
   ========================================================== */

hr,
.divider {
    border-color:
        rgba(255,214,139,.09) !important;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background:
        rgba(255,255,255,.015);
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            #b77c29,
            #7e5725
        ) !important;

    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            #d49d47,
            #9b6928
        ) !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    body {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    .card,
    .box {
        border-radius: 24px !important;
    }

    .dashboard-header {
        margin-bottom: 26px !important;
    }

    .brand-icon {
        width: 50px !important;
        height: 50px !important;
        border-radius: 17px !important;
    }

    button,
    .btn,
    a.btn {
        border-radius: 14px !important;
    }
}


/* Пользователи, предпочитающие минимум анимации */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}