/* ==========================================================================
   MilixNow theme — matches www.milixnow.com
   Palette: Midnight Navy #061a4a · Electric Blue #1463ff · Mint Teal #00b89c · Coral #ff7a45
   Type: Space Grotesk for headings, Inter for everything else.
   Loaded after app.css. Visual layer only; no behaviour lives here.
   ========================================================================== */

h1, h2, h3,
.card-head h2, .card-head h3,
.stat .value, .topbar h1, .page-head h1 { font-family: var(--font-head); letter-spacing: -.015em; }
.stat .value { font-weight: 700; }

::selection { background: rgba(20, 99, 255, .18); }

/* Scrollbars that keep quiet */
* { scrollbar-width: thin; scrollbar-color: #c3d0e6 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #c9d5ea; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #a9b9d6; background-clip: content-box; }

/* Primary buttons carry a blue gradient, like the website */
.btn { background: linear-gradient(100deg, #1463ff 0%, #0f7ae6 100%); box-shadow: 0 6px 16px -8px rgba(20, 99, 255, .7); }
.btn:hover { background: linear-gradient(100deg, #0b4fe0 0%, #0a69cc 100%); box-shadow: 0 10px 22px -10px rgba(20, 99, 255, .75); }
.btn-light { background: #fff; box-shadow: none; }
.btn-light:hover { background: var(--brand-soft); border-color: #c9dafc; color: var(--brand-dark); box-shadow: none; }
.btn-danger { background: var(--red); box-shadow: none; }
.btn-danger:hover { background: #b91c1c; box-shadow: none; }

/* ---------------------------------------------------------------- sidebar */
.sidebar {
    background: linear-gradient(180deg, #061a4a 0%, #071c50 55%, #0a2260 100%);
    color: #c3d4f5;
    box-shadow: 1px 0 0 rgba(255, 255, 255, .04);
}
.sidebar-brand { font-family: var(--font-head); font-weight: 700; letter-spacing: -.02em; }
.mark-img { display: block; border-radius: 10px; }
.sidebar-brand .mark-img, .auth-box .brand .mark-img, .top-nav .brand .mark-img {
    width: 34px; height: 34px; flex: 0 0 34px;
    box-shadow: 0 8px 18px -10px rgba(20, 99, 255, .8);
}
.sidebar-company { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .06); }
.sidebar-company span { color: #8ea6d6; }
.sidebar-nav .group { color: #6f86b3; }
.sidebar-nav a { color: #c3d4f5; }
.sidebar-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar-nav a.active {
    background: linear-gradient(100deg, #1463ff 0%, #0b8fd6 55%, #009e86 100%);
    color: #fff;
    box-shadow: 0 10px 22px -12px rgba(11, 143, 214, .9);
}
.sidebar-foot { border-top-color: rgba(255, 255, 255, .08); }
.sidebar-foot a { color: #8ea6d6; }

/* ---------------------------------------------------------------- surfaces */
.topbar { background: rgba(255, 255, 255, .9); }
.card, .stat { border-color: #e6ecf6; }
.avatar { background: var(--brand-soft); color: var(--brand-dark); }
.pill-brand { background: var(--brand-soft); color: var(--brand-dark); }
table.data th { background: #f5f8fe; }
table.data tbody tr:hover td { background: #f8fbff; }
.tabs a.active, .tabs button.tab.on, .set-tabs a.tab.on, .acc-tab.on, .view-toggle a.on, .tab2.on {
    background: linear-gradient(100deg, #1463ff 0%, #0b8fd6 100%); border-color: transparent;
}

/* ---------------------------------------------------------------- auth screens */
.auth { background: #fff; }
@media (min-width: 901px) { .auth { grid-template-columns: 1.12fr 1fr; } }

.auth-side {
    --orbit-size: clamp(380px, 38vw, 540px);
    --orbit-outer: calc(var(--orbit-size) * .45);
    --orbit-inner: calc(var(--orbit-size) * .29);
    flex-direction: column;
    gap: 26px;
    padding: 40px 36px;
    background:
        radial-gradient(900px 520px at 20% 10%, rgba(20, 99, 255, .35), transparent 60%),
        radial-gradient(700px 480px at 90% 95%, rgba(0, 184, 156, .28), transparent 60%),
        linear-gradient(150deg, #061a4a 0%, #0a2260 55%, #07345f 100%);
}
.auth-side::before, .auth-side::after { content: none; }
.auth-glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; pointer-events: none; }
.auth-glow.a { width: 320px; height: 320px; background: #1463ff; top: -90px; left: -80px; animation: mnxFloatA 16s ease-in-out infinite; }
.auth-glow.b { width: 280px; height: 280px; background: #00b89c; bottom: -90px; right: -60px; animation: mnxFloatB 19s ease-in-out infinite; }

.orbit { position: relative; width: var(--orbit-size); height: var(--orbit-size); flex: none; z-index: 1; }
.orbit-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); border: 1.5px dashed rgba(195, 212, 245, .22); }
.orbit-ring.r1 { width: calc(var(--orbit-outer) * 2); height: calc(var(--orbit-outer) * 2); animation: mnxSpin 90s linear infinite; }
.orbit-ring.r2 { width: calc(var(--orbit-inner) * 2); height: calc(var(--orbit-inner) * 2); animation: mnxSpin 60s linear infinite reverse; }
.orbit-ring.r3 { width: calc(var(--orbit-inner) * 1.2); height: calc(var(--orbit-inner) * 1.2); border-style: solid; border-color: rgba(95, 160, 255, .25); }

.orbit-core {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 124px; height: 124px; border-radius: 34px;
    display: grid; place-items: center; align-content: center; gap: 8px;
    background: #fff;
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .55), 0 0 0 10px rgba(255, 255, 255, .06);
    animation: mnxCore 3.2s ease-in-out infinite;
}
.orbit-core img { width: 58px; height: 58px; border-radius: 16px; }
.orbit-core span { font-family: var(--font-head); font-weight: 700; font-size: 12.5px; color: var(--ink); white-space: nowrap; letter-spacing: -.01em; }

.orbit-node { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); }
.orbit-chip {
    position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 6px; white-space: nowrap;
    color: #e1ebff; font-size: 12px; font-weight: 600; letter-spacing: .01em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
    animation: mnxBob 4.4s ease-in-out infinite; animation-delay: calc(var(--d) * -1);
}
.orbit-chip i {
    width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center;
    background: #fff; color: var(--tone);
    box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .6);
    transition: transform .3s;
}
.orbit-chip i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--tone-soft); opacity: 0; }
.orbit-chip svg { width: 21px; height: 21px; }
.tone-blue { --tone: #1463ff; --tone-soft: #e5eeff; }
.tone-coral { --tone: #ff6a2e; --tone-soft: #ffece3; }
.tone-green { --tone: #16a34a; --tone-soft: #dcfce7; }
.tone-violet { --tone: #6d5dfc; --tone-soft: #ecebff; }
.tone-sky { --tone: #0ea5e9; --tone-soft: #e0f4fd; }
.tone-teal { --tone: #009e86; --tone-soft: #dcf7f1; }

.auth-side-copy { position: relative; z-index: 1; max-width: 460px; text-align: center; color: #c3d4f5; }
.auth-side-copy h2 { color: #fff; font-size: clamp(20px, 2vw, 26px); line-height: 1.25; margin-bottom: 8px; }
.auth-side-copy h2 em { font-style: normal; background: linear-gradient(95deg, #5fa0ff, #3fe0c5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-side-copy p { margin: 0 0 14px; font-size: 14px; }
.auth-side-copy ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: #dbe7ff; }
.auth-side-copy li { display: inline-flex; align-items: center; gap: 6px; }
.auth-side-copy li::before {
    content: ""; width: 16px; height: 16px; border-radius: 50%;
    background: rgba(63, 224, 197, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233fe0c5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.auth-main { background: radial-gradient(600px 400px at 100% 0%, #eef4ff, transparent 60%), #fff; }
.auth-box .brand { font-family: var(--font-head); font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.auth-box h1 { font-size: 22px; }
.btn-channel { margin-top: 14px; background: #fff; color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; }
.btn-channel svg { color: #ff0033; width: 18px; height: 18px; flex: 0 0 18px; }
.btn-channel:hover { border-color: #ffb3c2; background: #fff5f7; color: var(--ink); box-shadow: none; }

@keyframes mnxSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes mnxBob { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }
@keyframes mnxCore {
    0%, 100% { box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .55), 0 0 0 10px rgba(255, 255, 255, .06); }
    50% { box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .55), 0 0 0 20px rgba(63, 224, 197, .08); }
}
@keyframes mnxFloatA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, 40px); } }
@keyframes mnxFloatB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-50px, -40px); } }

@media (max-height: 760px) and (min-width: 901px) {
    .auth-side { --orbit-size: clamp(330px, 32vw, 440px); gap: 16px; padding: 24px; }
    .auth-side-copy p { display: none; }
}
@media (max-width: 1180px) and (min-width: 901px) {
    .orbit-chip { font-size: 11px; }
    .orbit-chip i { width: 40px; height: 40px; border-radius: 13px; }
    .orbit-chip svg { width: 18px; height: 18px; }
}
@media (max-width: 900px) {
    .auth-main { min-height: 100vh; background: linear-gradient(180deg, #eef4ff 0, #fff 260px); }
}
@media (prefers-reduced-motion: reduce) {
    .orbit-ring, .orbit-chip, .orbit-core, .auth-glow { animation: none !important; }
}