body {
    --jo-ink: #172019;
    --jo-paper: #e9e2ce;
    --jo-sand: #d7ba76;
    --jo-muted: #aeb7a1;
    margin: 0;
    min-height: 100svh;
    background: #172019;
    color: #ece7d9;
    font-family: Roboto, Arial, sans-serif;
}
.jo-shell, .jo-page {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    background: linear-gradient(115deg, rgba(22, 32, 24, .82), rgba(22, 29, 23, .57)), url('/assets/images/justorders/background.png') center / cover;
}
.jo-shell::before, .jo-page::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 25% 44%, rgba(141, 140, 94, .16), transparent 63%);
}
.jo-header { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
.jo-header .navbar { min-height: 76px; padding: 14px 0; background: transparent !important; border-bottom: 1px solid rgba(230, 221, 196, .13); }
.jo-header .navbar .container-fluid { padding-inline: 0; }
.jo-nav-desktop { display: flex; align-items: center; gap: 24px; width: 100%; }
.jo-nav-desktop > .nav { flex: 1; align-items: center; min-width: 0; }
.jo-nav-desktop > .nav > .dropdown { margin-inline-start: auto; }
.jo-nav-mobile { width: 100%; }
.jo-nav-mobile-top { display: flex; align-items: center; justify-content: space-between; }
.jo-header .nav-pills .nav-link { padding: 10px 16px; color: #d7d9cb; font-size: .84rem; border-radius: 2px; }
.jo-header .nav-pills .nav-link.active { color: #eadbb1; background: rgba(222, 203, 143, .1); }
.jo-header .nav-link:hover { color: #fff6dc; }
.jo-header .navbar-toggler { border-color: rgba(230, 221, 196, .24); }
.jo-header .dropdown-menu { background: #253027; border-color: #56614a; }
.jo-header .dropdown-item { color: #eee8d5; font-size: .84rem; }
.jo-header .dropdown-item:hover { background: #3c4938 !important; }
.jo-account-name { display: inline-block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.jo-header .dropdown-toggle { white-space: nowrap; }
body :is(a, button, input):focus-visible { outline: 3px solid #d7ba76; outline-offset: 4px; }
.jo-kicker { color: #c5b886; font-size: .65rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.jo-surface { border: 1px solid rgba(215, 220, 189, .16); border-radius: 4px; background: rgba(20, 30, 22, .78); box-shadow: 0 12px 30px rgba(0, 0, 0, .12); }
.jo-gold-button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 20px; border: 1px solid #d4bd82; border-radius: 3px; background: #c5ac70; color: #1e271a; font: 700 .88rem Roboto, Arial, sans-serif; text-decoration: none; transition: background .15s; }
.jo-gold-button:hover { background: #d5bf89; color: #1e271a; }
.jo-gold-button:disabled { opacity: .55; cursor: default; }
.jo-auth-main { display: flex; justify-content: center; align-items: center; flex: 1; padding: 48px 18px 64px; }
.jo-auth-panel { width: min(100%, 440px); padding: 36px; }
.jo-auth-brand { display: block; width: 170px; max-width: 70%; margin: 0 auto 32px; }
.jo-auth-brand img { display: block; width: 100%; height: auto; }
.justorders-login .jo-auth-main { padding: 32px 18px 48px; }
.jo-auth-layout { display: flex; flex-direction: column; align-items: center; gap: 28px; width: min(100%, 440px); }
.jo-login-brand { display: block; width: min(100%, 420px); }
.jo-login-brand img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .25)); }
.justorders-login .jo-auth-panel { width: 100%; padding: 28px 32px; }
.justorders-login .jo-auth-panel h1 { margin-bottom: 24px; font-size: 1.45rem; }
.justorders-login .jo-field { margin-bottom: 18px; }
.justorders-login .jo-auth-panel .jo-gold-button { margin-top: 22px; }
.justorders-login .jo-auth-back { margin-top: 20px; }
.jo-auth-panel h1 { margin: 0 0 28px; text-align: center; color: #eee8d6; font-size: 1.7rem; font-weight: 700; letter-spacing: -.025em; }
.jo-field { margin-bottom: 21px; }
.jo-field label { display: block; margin-bottom: 9px; color: #cbd1bd; font-size: .79rem; }
.jo-field .form-control, .jo-search {
    border: 1px solid rgba(211, 217, 186, .23);
    border-radius: 3px;
    background: rgba(13, 22, 15, .55);
    color: #f2eddf;
    font-size: .88rem;
    padding: 13px 14px;
}
.jo-field .form-control::placeholder, .jo-search::placeholder { color: #7f8b73; opacity: 1; }
.jo-field .form-control:focus, .jo-search:focus { border-color: #b7a16a; background: rgba(13, 22, 15, .8); color: #f2eddf; box-shadow: 0 0 0 3px rgba(197, 172, 112, .1); }
.jo-auth-panel .jo-gold-button { width: 100%; margin-top: 28px; }
.jo-auth-back { display: block; width: fit-content; margin: 24px auto 0; color: #aeb7a1; font-size: .74rem; text-decoration: none; }
.jo-auth-back:hover { color: #e2d2a2; }
.jo-auth-panel .alert { border-radius: 3px; font-size: .79rem; line-height: 1.6; }
.jo-form-error { margin: 8px 0 0; color: #e9a58c; font-size: .75rem; }
[hidden] { display: none !important; }
@media (max-width: 767px) {
    .jo-header { width: calc(100% - 36px); }
    .jo-header .navbar { min-height: 68px; padding-block: 13px; }
    .jo-nav-mobile .nav { padding-top: 16px; }
    .jo-nav-mobile .nav-link { text-align: center; }
    .jo-nav-mobile .dropdown-menu { text-align: center; }
    .jo-account-name { max-width: 260px; }
}
@media (max-width: 480px) {
    .jo-auth-main { padding-block: 32px 44px; }
    .jo-auth-panel { padding: 28px 24px; }
    .jo-auth-brand { margin-bottom: 26px; }
    .justorders-login .jo-auth-main { padding-block: 28px 36px; }
    .jo-auth-layout { gap: 24px; }
    .jo-login-brand { width: min(100%, 320px); }
    .justorders-login .jo-auth-panel { padding: 26px 24px; }
}
@media (min-width: 481px) and (max-height: 800px) {
    .justorders-login .jo-auth-main { padding-block: 24px 32px; }
    .jo-auth-layout { gap: 24px; }
    .jo-login-brand { width: min(100%, 340px); }
}
@media (prefers-reduced-motion: reduce) { .jo-gold-button { transition: none; } }