/* =====================================================================
   UNDEFEATED — new UI design system
   Loaded AFTER style.css / custom.css to override the legacy template.
   Two themes:
     body.un-dark   -> auth screens + inner pages (deep space theme)
     body.un-light  -> dashboard (light theme, per design)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Orbitron:wght@600;800&display=swap');

:root {
    --un-bg:        #07060e;
    --un-bg-2:      #0d0a1c;
    --un-purple:    #8b5cf6;
    --un-purple-2:  #a855f7;
    --un-blue:      #3b5bdb;
    --un-glow:      rgba(139, 92, 246, .55);
    --un-text:      #eceaf6;
    --un-muted:     #9c98bd;
    --un-line:      rgba(139, 92, 246, .28);
    --un-card:      rgba(22, 18, 44, .55);
    --un-field-radius: 16px;
    --un-green:     #22c55e;
    /* light dashboard */
    --un-l-bg:      #eef0f5;
    --un-l-bg-2:    #f6f7fb;
    --un-l-card:    #ffffff;
    --un-l-ink:     #14161c;
    --un-l-muted:   #6b7280;
    --un-l-blue:    #2f6bff;
    --un-l-line:    #e6e8f0;
}

/* ---------- resets shared ---------- */
body.un-dark,
body.un-light {
    font-family: "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
/* keep bootstrap rows from overflowing the padded shells */
.un-d-wrap { max-width: 100%; }
.un-d-wrap .row { --bs-gutter-x: 0; margin-left: 0; margin-right: 0; }
.un-d-wrap .row > [class^="col"] { min-width: 0; }
/* Japanese strings have no spaces: let them wrap inside flex/narrow boxes
   instead of forcing horizontal overflow */
.un-status > div { min-width: 0; }
.un-status .b,
.un-d-profit .val,
.text-custom2 .subtext,
.ex-name, .ex-sub { overflow-wrap: anywhere; word-break: break-word; }
.ex-row .d-flex { min-width: 0; }
.nav-pills .nav-item { min-width: 0; flex: 1 1 0; }
.nav-pills .nav-link { min-width: 0; overflow: hidden; }
.nav-pills .nav-link .text-custom2 { min-width: 0; }
.un-orbitron { font-family: "Orbitron", sans-serif; letter-spacing: .12em; }

/* preloader off (was white full screen) */
#preloader { display: none !important; }

/* =====================================================================
   DARK THEME
   ===================================================================== */
body.un-dark {
    background: var(--un-bg);
    color: var(--un-text);
}
body.un-dark .un-app-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(120% 80% at 50% -10%, #241a4d 0%, #0d0a1c 45%, #07060e 100%);
}

/* glass card */
.un-card {
    background: var(--un-card);
    border: 1px solid var(--un-line);
    border-radius: 22px;
    box-shadow: 0 0 46px rgba(139, 92, 246, .12), inset 0 1px 0 rgba(255,255,255,.04);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* glass fields used on auth screens — kept visually distinct from the white CTA button */
.un-field {
    width: 100%;
    display: block;
    background: rgba(255,255,255,.07);
    color: #fff;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: var(--un-field-radius);
    padding: 17px 20px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.un-field::placeholder { color: rgba(255,255,255,.5); opacity: 1; font-weight: 400; }
.un-field:focus {
    border-color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.12);
    box-shadow: 0 0 0 3px var(--un-glow);
}
/* keep browser autofill from repainting the glass field white */
.un-field:-webkit-autofill,
.un-field:-webkit-autofill:hover,
.un-field:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
    transition: background-color 9999s ease-out 0s;
}

/* buttons */
.un-btn {
    display: block;
    width: 100%;
    text-align: center;
    border-radius: var(--un-field-radius);
    padding: 17px 20px;
    font-size: 16px;
    font-weight: 700;
    border: 0;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .2s ease;
    text-decoration: none;
}
.un-btn:active { transform: translateY(1px); }
.un-btn-white {
    background: #fff;
    color: #14161c;
    box-shadow: 0 10px 30px rgba(255,255,255,.18);
}
.un-btn-white:hover { color: #14161c; }
.un-btn-ghost {
    background: rgba(10,8,20,.35);
    color: #fff;
    border: 1px solid rgba(255,255,255,.32);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.un-btn-ghost:hover { color:#fff; border-color: rgba(255,255,255,.6); }
.un-btn-line {
    background: linear-gradient(180deg, #2ecc71, #1db954);
    color:#fff;
    box-shadow: 0 0 32px rgba(46,204,113,.55), inset 0 1px 0 rgba(255,255,255,.3);
    border: 1px solid rgba(120,255,170,.45);
}
.un-btn-line:hover{ color:#fff; }

/* headings / helpers */
.un-title { color:#fff; font-weight: 900; letter-spacing:.02em; }
.un-sub   { color: var(--un-muted); }
.un-link  { color: #ff5b6e; text-decoration: none; font-weight:700; }
.un-back  { color:#cfc9ec; font-size: 26px; text-decoration:none; }

/* stacked auth logo — logo_word_white.png already contains the icon + wordmark lockup */
.un-logo-stack { text-align:center; }
.un-logo-stack .icon { display:none; }        /* separate icon not needed: lockup includes it */
.un-logo-stack .word { display:block; margin: 0 auto; width: 232px; filter: drop-shadow(0 0 22px var(--un-glow)); }

/* =====================================================================
   AUTH LAYOUT (dark, full-bleed background)
   ===================================================================== */
.un-auth {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}
.un-auth__bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
.un-auth__bg::after {           /* darken bottom for form legibility */
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(7,6,14,0) 30%, rgba(7,6,14,.55) 62%, #07060e 100%);
}
.un-auth__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 0 26px 40px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.un-copyright { text-align:center; color: rgba(255,255,255,.4); font-size: 12px; padding: 14px 0 18px; }

/* desktop / tablet: the splash artwork is portrait, so on wide screens
   frame the auth flow as a centered phone-width column instead of letting
   `cover` crop the background down to just its top strip */
@media (min-width: 600px) {
    body.un-dark { background: var(--un-bg); }
    .un-auth {
        max-width: 480px;
        margin: 0 auto;
        overflow: hidden;
        box-shadow: 0 0 80px rgba(0,0,0,.6);
    }
    /* contain the fixed background within the centered column */
    .un-auth__bg {
        position: absolute;
        background-position: center center;
    }
}

/* =====================================================================
   APP LAYOUT SHELL (header + drawer + bottom nav)
   ===================================================================== */
/* neutralise legacy template chrome */
body.un-light .nav-header,
body.un-dark  .nav-header,
body.un-light .header,
body.un-dark  .header.legacy,
.dlabnav { display: none !important; }
#main-wrapper { padding: 0 !important; }
body.un-light .content-body,
body.un-dark  .content-body { margin-left: 0 !important; }
.content-body .container-fluid.app-content { padding: 0 !important; background: transparent !important; }
.footer .copyright { display:none; }
.content-body .footer > .card { display:none; }

/* logo swap by theme */
body.un-light .un-logo-dark  { display:none !important; }
body.un-light .un-logo-light { display:inline-block !important; }
body.un-dark  .un-logo-light { display:none !important; }
body.un-dark  .un-logo-dark  { display:inline-block !important; }

/* top app bar */
.un-appbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    height: 64px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 18px;
}
.un-appbar__logo { height: 26px; }
.un-icon-btn {
    width: 46px; height: 46px; border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    border: 0; cursor: pointer; position: relative;
}
.un-icon-btn .dot { position:absolute; top:11px; right:12px; width:8px; height:8px; border-radius:50%; background: var(--un-l-blue); }
.un-icon-btn svg { width: 22px; height: 22px; }

/* page scroll region */
.un-page { padding: 76px 0 108px; min-height: 100dvh; }

/* bottom nav */
.un-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
}
.un-bottomnav__inner {
    display:flex; align-items:center; justify-content:space-around;
    border-radius: 22px;
    padding: 10px 8px 8px;
}
.un-nav-item {
    flex:1; text-align:center; text-decoration:none;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    font-size: 12px; font-weight: 700;
}
.un-nav-item svg { width: 26px; height: 26px; }

/* drawer */
.un-drawer-scrim {
    position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.un-drawer {
    position: fixed; top:0; right:0; bottom:0; z-index: 61; width: 82%; max-width: 340px;
    background: linear-gradient(180deg, #140f2b, #0b0818);
    border-left: 1px solid var(--un-line);
    transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column; padding: 26px 22px;
    box-shadow: -20px 0 60px rgba(0,0,0,.5);
}
.un-drawer.open { transform: translateX(0); }
.un-drawer.open + .un-drawer-scrim,
.un-drawer-scrim.open { opacity:1; pointer-events:auto; }
.un-drawer__logo { width: 170px; margin: 8px auto 6px; display:block; }
.un-drawer__user { color:#fff; text-align:center; font-weight:700; margin-bottom: 18px; padding-bottom:18px; border-bottom:1px solid var(--un-line); }
.un-drawer__menu { list-style:none; margin:0; padding:0; overflow-y:auto; }
.un-drawer__menu a {
    display:flex; align-items:center; gap:12px;
    color:#d7d3ef; text-decoration:none; font-weight:600; font-size:15px;
    padding: 14px 12px; border-radius: 12px;
}
.un-drawer__menu a:hover, .un-drawer__menu a.active {
    background: rgba(139,92,246,.16); color:#fff;
}
.un-drawer__menu a.active { box-shadow: inset 3px 0 0 var(--un-purple); }

/* ---------- DARK inner-page skin over legacy bootstrap ---------- */
body.un-dark .un-appbar { background: rgba(9,7,18,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom:1px solid var(--un-line); }
body.un-dark .un-icon-btn { background: rgba(139,92,246,.16); color:#cfc9ec; }
body.un-dark .un-bottomnav__inner { background: rgba(16,12,32,.92); border:1px solid var(--un-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -6px 30px rgba(0,0,0,.5); }
body.un-dark .un-nav-item { color: var(--un-muted); }
body.un-dark .un-nav-item.active { color:#fff; }
body.un-dark .un-nav-item.active svg { filter: drop-shadow(0 0 8px var(--un-glow)); }

body.un-dark .card {
    background: var(--un-card) !important;
    border: 1px solid var(--un-line) !important;
    border-radius: 20px !important;
    color: var(--un-text) !important;
    box-shadow: 0 0 40px rgba(139,92,246,.1) !important;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
body.un-dark, body.un-dark p, body.un-dark span, body.un-dark small,
body.un-dark label, body.un-dark h1, body.un-dark h2, body.un-dark h3,
body.un-dark h4, body.un-dark h5, body.un-dark li, body.un-dark td, body.un-dark th,
body.un-dark .text-black, body.un-dark .text-dark { color: var(--un-text) !important; }
body.un-dark .text-muted, body.un-dark .subtext { color: var(--un-muted) !important; }

/* form controls dark */
body.un-dark .form-control,
body.un-dark .form-control-custom-2,
body.un-dark .form-control-custom-3,
body.un-dark .form-control-custom {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid var(--un-line) !important;
    color: #fff !important;
    border-radius: 12px !important;
}
body.un-dark .form-control::placeholder { color: var(--un-muted) !important; }
body.un-dark .form-control:focus { border-color: var(--un-purple) !important; box-shadow: 0 0 0 3px var(--un-glow) !important; background: rgba(255,255,255,.08) !important; }
body.un-dark .text-label, body.un-dark .form-label { color:#cfc9ec !important; font-weight:600; }

/* buttons on dark inner pages */
body.un-dark .btn-primary, body.un-dark .btn-gradient {
    background: linear-gradient(135deg, var(--un-purple-2), var(--un-blue)) !important;
    border: 0 !important; color:#fff !important; border-radius: 14px !important;
    box-shadow: 0 8px 26px rgba(139,92,246,.4) !important;
}
body.un-dark .btn-gradient-2 { background:#fff !important; color:#14161c !important; border-radius:14px !important; }

/* currency tab pills (dashboard / orderlist / rate / risk): space them out */
.nav-pills { gap: 10px; }
/* rate / risk / orderlist pills use a wide coin-badge image — make them share
   the row equally and let the image shrink so the gap never causes overflow */
.nav-pills .nav-item.rounded-pill { flex: 1 1 0; min-width: 0; }
.nav-pills .nav-item.rounded-pill .nav-link { width: 100%; display: flex; justify-content: center; }
.nav-pills .nav-item.rounded-pill .nav-link img { height: auto !important; max-height: 60px; max-width: 100%; }

/* tabs / pills dark */
body.un-dark .nav-tabs .nav-link, body.un-dark .nav-pills .nav-link {
    color: var(--un-muted) !important; background: rgba(255,255,255,.04) !important;
    border: 1px solid var(--un-line) !important; border-radius: 12px !important;
}
body.un-dark .nav-tabs .nav-link.active,
body.un-dark .nav-pills .nav-link.active,
body.un-dark .nav-pills .btn-check:checked + .nav-link {   /* orderlist radios */
    color:#fff !important; background: linear-gradient(135deg, rgba(139,92,246,.35), rgba(59,91,219,.35)) !important;
    border-color: var(--un-purple) !important;
}

/* tables dark */
body.un-dark .table {
    --bs-table-color: var(--un-text);
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,.055);
    --bs-table-striped-color: #fff;
    --bs-table-border-color: rgba(255,255,255,.1);
}
body.un-dark table { color: var(--un-text) !important; }
/* Bootstrap paints stripes with an inset box-shadow accent — disable it and
   set explicit dark backgrounds so text stays legible on the dark theme */
body.un-dark .table > tbody > tr,
body.un-dark .table > thead > tr { background-color: transparent !important; box-shadow: none !important; }
body.un-dark .table > :not(caption) > * > * {
    box-shadow: none !important;
    background-color: transparent !important;
    color: var(--un-text) !important;
}
body.un-dark .table-striped > tbody > tr:nth-of-type(odd),
body.un-dark .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,.05) !important; }
body.un-dark table thead { background-image: linear-gradient(90deg, var(--un-purple-2), var(--un-blue)) !important; }
body.un-dark table thead th { color:#fff !important; border-color: rgba(255,255,255,.12) !important; }
body.un-dark .table-bordered td, body.un-dark .table-bordered th { border-color: rgba(255,255,255,.1) !important; }
body.un-dark table td { color: var(--un-text) !important; }

/* legacy custom components (box-custom / text-custom / progress / arbitrage) on dark */
body.un-dark .box-custom {
    background: var(--un-card) !important;
    border: 1px solid var(--un-line) !important;
    border-radius: 20px !important;
    box-shadow: 0 0 30px rgba(139,92,246,.1) !important;
}
body.un-dark .app-background-gradient {
    background: linear-gradient(135deg, rgba(139,92,246,.2), rgba(59,91,219,.16)) !important;
}
body.un-dark .progress-content {
    background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(139,92,246,.08)) !important;
    box-shadow: inset 0 0 0 1px var(--un-line) !important;
}
body.un-dark .range { background-color: rgba(255,255,255,.18) !important; }
/* the fancy outlined text — flatten to solid white on dark */
body.un-dark .text-custom,
body.un-dark .text-custom span,
body.un-dark .text-custom2 .title { color:#fff !important; -webkit-text-fill-color:#fff !important; }
body.un-dark .text-custom::before,
body.un-dark .text-custom::after,
body.un-dark .text-custom-group::after { display:none !important; content:none !important; }
body.un-dark .arbitrage-panel, body.un-dark .arbitrage-panel * { color:#fff !important; }
body.un-dark .checkbox-span-group p, body.un-dark .checkbox-span-group small { color:#fff !important; }
body.un-dark select.form-control option { background:#140f2b; color:#fff; }
body.un-dark .datepicker table tr td.day { color:#14161c; }

/* alerts dark */
body.un-dark .alert-success { background: rgba(34,197,94,.15) !important; color:#8ff0b5 !important; border:1px solid rgba(34,197,94,.4) !important; }
body.un-dark .alert-danger  { background: rgba(255,80,100,.14) !important; color:#ff9aa8 !important; border:1px solid rgba(255,80,100,.4) !important; }
body.un-dark .alert-warning { background: rgba(245,180,60,.14) !important; color:#ffd591 !important; border:1px solid rgba(245,180,60,.4) !important; }

/* =====================================================================
   LIGHT THEME (dashboard, per design)
   ===================================================================== */
body.un-light {
    background: linear-gradient(180deg, var(--un-l-bg-2), var(--un-l-bg));
    color: var(--un-l-ink);
    min-height: 100dvh;
}
body.un-light .un-appbar { background: transparent; }
body.un-light .un-appbar__logo { height: 24px; }
body.un-light .un-icon-btn { background:#fff; color:#334; box-shadow: 0 6px 18px rgba(20,30,60,.12); }
body.un-light .un-bottomnav__inner { background: #ffffff; box-shadow: 0 8px 30px rgba(20,30,60,.12); }
body.un-light .un-nav-item { color:#9aa1b2; }
body.un-light .un-nav-item.active { color: var(--un-l-blue); }

body.un-light .card {
    background: var(--un-l-card) !important;
    border: 0 !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 30px rgba(30,40,70,.07) !important;
    color: var(--un-l-ink) !important;
}

/* dashboard-specific building blocks (light) */
.un-d-wrap { padding: 0 18px; }
.un-d-card {
    background:#fff; border-radius: 22px; padding: 22px;
    box-shadow: 0 10px 30px rgba(30,40,70,.07);
}
.un-d-profit {
    background: linear-gradient(180deg,#eef1f8,#e9edf6);
    border-radius: 22px; padding: 20px 22px;
    box-shadow: inset 0 1px 0 #fff, 0 10px 30px rgba(30,40,70,.06);
}
.un-d-profit .date { text-align:right; color:#3a4152; font-size: 15px; font-weight:600; }
.un-d-profit .lbl  { text-align:center; color:#3a4152; font-size:16px; }
.un-d-profit .val  { text-align:center; color:#111; font-size: 24px; font-weight:800; }
.un-d-profit .divider { border-left:1px solid #d3d8e4; }

.un-status {
    display:flex; align-items:center; gap:16px;
    border-radius: 20px; padding: 20px; margin-top: 18px;
}
.un-status .ic { flex:0 0 auto; width:44px; height:44px; }
.un-status .t  { font-size: 19px; font-weight: 800; }
.un-status .b  { font-size: 13px; line-height:1.5; }
.un-status.stopped { background:#fdeaea; }
.un-status.stopped .t { color:#c0202c; }
.un-status.stopped .b { color:#a05055; }
.un-status.running { background:#e8f7ee; }
.un-status.running .t { color:#137a3e; }
.un-status.running .b { color:#4f8b68; }

/* coin selector cards */
body.un-light .nav-pills .nav-link {
    background:#eef1f8 !important; border-radius:18px !important; color:#1f2430 !important;
    box-shadow: none !important; border:0 !important;
}
body.un-light .nav-pills .nav-link.active,
body.un-light .nav-pills .btn-check:checked + .nav-link {   /* orderlist radios */
    background:#fff !important; box-shadow: 0 8px 22px rgba(30,40,70,.12) !important;
}
body.un-light .text-custom2 .title { color:#1f2430 !important; font-weight:800; }
body.un-light .text-custom2 .subtext { color:#8a90a0 !important; }

/* exchange rows (light) */
body.un-light .checkbox-span-group p { color:#1f2430 !important; font-weight:800; }
body.un-light .checkbox-span-group small { color:#8a90a0 !important; }
body.un-light .box-custom { background:#fff !important; border-radius:22px !important; box-shadow: 0 10px 30px rgba(30,40,70,.07); }

/* form controls light dashboard */
body.un-light .form-control, body.un-light .form-control-custom-2 {
    background:#f3f5fa !important; border:1px solid var(--un-l-line) !important; color:#14161c !important; border-radius:12px !important;
}
body.un-light .btn-primary, body.un-light .btn-gradient {
    background: linear-gradient(135deg,#3b82f6,#2f6bff) !important; border:0 !important; color:#fff !important;
    border-radius:14px !important; box-shadow:0 8px 22px rgba(47,107,255,.3) !important;
}

/* =====================================================================
   BOOTSTRAP-TOGGLE restyle (both themes) blue ON / grey OFF
   ===================================================================== */
.toggle.btn { border-radius: 999px !important; min-width: 74px !important; height: 34px !important; border:0 !important; }
.toggle-handle { border-radius: 999px !important; background:#fff !important; border:0 !important; box-shadow: 0 2px 6px rgba(0,0,0,.25) !important; }
.toggle.off { background:#c8cdda !important; }
.toggle.btn.off .toggle-off { color:#6b7280 !important; }
.toggle .toggle-on { background: linear-gradient(135deg,#3b82f6,#2f6bff) !important; color:#fff !important; font-weight:700; }
.toggle .toggle-off { background:#c8cdda !important; color:#6b7280 !important; font-weight:700; }
body.un-dark .toggle.off { background: rgba(255,255,255,.14) !important; }
body.un-dark .toggle .toggle-off { background: rgba(255,255,255,.1) !important; color: var(--un-muted) !important; }
.toggle.btn { box-shadow: 0 2px 10px rgba(0,0,0,.18) !important; }

/* =====================================================================
   Tone down the template's heavy neumorphic "active" glow
   (orderlist BTC/ETH buttons, nav-pills, etc.)
   custom.css used: box-shadow: -5px -5px 24px 4px #fff, 0 0 18px 5px #00000050
   ===================================================================== */
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.nav-pills .nav-link:not(.nav-link-text).active {
    box-shadow: none !important;
}
/* dark inner pages (orderlist / rate / risk) — subtle purple highlight */
body.un-dark .btn-check:checked + .btn-outline-primary,
body.un-dark .btn-check:active + .btn-outline-primary,
body.un-dark .btn-outline-primary.active {
    background-image: linear-gradient(135deg, rgba(139,92,246,.32), rgba(59,91,219,.28)) !important;
    background-color: transparent !important;
    border: 1px solid var(--un-purple) !important;
    box-shadow: 0 6px 18px rgba(139,92,246,.28) !important;
}
/* light dashboard — soft neutral highlight */
body.un-light .btn-check:checked + .btn-outline-primary,
body.un-light .btn-check:active + .btn-outline-primary,
body.un-light .btn-outline-primary.active {
    background-image: none !important;
    background-color: #ffffff !important;
    border: 1px solid var(--un-l-line) !important;
    box-shadow: 0 8px 22px rgba(30,40,70,.12) !important;
}

/* =====================================================================
   DESKTOP / PC (≥992px) — persistent left sidebar, admin-template style
   The right slide-in drawer becomes a fixed left sidebar; the mobile
   top app-bar and bottom nav are hidden and content shifts right.
   ===================================================================== */
@media (min-width: 992px) {
    /* turn the drawer into a fixed left sidebar (dark, like an admin panel) */
    .un-drawer {
        left: 0; right: auto;
        width: 264px;
        transform: none !important;
        border-left: 0;
        border-right: 1px solid var(--un-line);
        box-shadow: 2px 0 30px rgba(0,0,0,.35);
    }
    .un-drawer-scrim { display: none !important; }

    /* hide the mobile-only chrome */
    .un-appbar,
    .un-bottomnav { display: none !important; }

    /* content sits to the right of the sidebar */
    .un-page {
        margin-left: 264px;
        padding: 40px 0 56px;
    }
    /* keep the mobile-designed cards in a comfortable centered column */
    .un-page > * {
        max-width: 940px;
        margin-left: auto;
        margin-right: auto;
    }

    /* a little breathing room / hover affordance in the sidebar on desktop */
    .un-drawer__menu a { padding: 13px 14px; }
    .un-drawer__logo { width: 180px; margin-top: 4px; }
}

/* very wide screens: a touch more column width */
@media (min-width: 1400px) {
    .un-page > * { max-width: 1040px; }
}