/* =============================================================
   Apple Theme  ·  tehuio.com
   Inspired by apple.com store: clean white, generous whitespace,
   SF-style typography, squircle cards, light/dark via system pref.
   ============================================================= */

:root {
    --apple-font: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
                  "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei",
                  "Hiragino Sans GB", Arial, sans-serif;

    /* Light surfaces (apple.com defaults) */
    --apl-bg:            #ffffff;
    --apl-bg-elev:       #f5f5f7;
    --apl-bg-sunken:     #fbfbfd;
    --apl-surface:       #ffffff;
    --apl-surface-2:     #f5f5f7;
    --apl-text:          #1d1d1f;
    --apl-text-2:        #424245;
    --apl-text-muted:    #6e6e73;
    --apl-divider:       #d2d2d7;
    --apl-divider-soft:  #e8e8ed;

    --apl-accent:        #0071e3;
    --apl-accent-hover:  #0077ed;
    --apl-accent-press:  #006edb;
    --apl-link:          #06c;
    --apl-link-hover:    #0077ed;

    --apl-success:       #1d8649;
    --apl-success-bg:    #e8f5ee;
    --apl-danger:        #bf4800;
    --apl-danger-bg:     #fff0e8;
    --apl-info-bg:       #eef4ff;
    --apl-info:          #0071e3;

    --apl-shadow-sm:     0 1px 2px rgba(0,0,0,.04), 0 0 1px rgba(0,0,0,.06);
    --apl-shadow-md:     0 4px 16px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --apl-shadow-lg:     0 18px 40px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);

    /* squircle radii */
    --apl-r-sm: 10px;
    --apl-r-md: 14px;
    --apl-r-lg: 18px;
    --apl-r-xl: 22px;
    --apl-r-pill: 980px;

    --apl-nav-h: 52px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --apl-bg:            #000000;
        --apl-bg-elev:       #1d1d1f;
        --apl-bg-sunken:     #0a0a0a;
        --apl-surface:       #161617;
        --apl-surface-2:     #1d1d1f;
        --apl-text:          #f5f5f7;
        --apl-text-2:        #d2d2d7;
        --apl-text-muted:    #86868b;
        --apl-divider:       #2c2c2e;
        --apl-divider-soft:  #232325;

        --apl-accent:        #2997ff;
        --apl-accent-hover:  #47a3ff;
        --apl-accent-press:  #1f8df8;
        --apl-link:          #2997ff;
        --apl-link-hover:    #47a3ff;

        --apl-success:       #6ad28f;
        --apl-success-bg:    rgba(106, 210, 143, .12);
        --apl-danger:        #ff9f6b;
        --apl-danger-bg:     rgba(255, 159, 107, .12);
        --apl-info-bg:       rgba(41, 151, 255, .14);
        --apl-info:          #2997ff;

        --apl-shadow-sm:     0 1px 2px rgba(0,0,0,.5);
        --apl-shadow-md:     0 8px 24px rgba(0,0,0,.55);
        --apl-shadow-lg:     0 18px 48px rgba(0,0,0,.65);
    }
}

/* =========================  BASE  ========================= */

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body {
    /* Force-override the inline background-image written by Header.html.
       Apple stores live on flat white, not a uploaded wallpaper. */
    background: var(--apl-bg) !important;
    color: var(--apl-text);
    font-family: var(--apple-font);
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.003em;
}

a {
    color: var(--apl-link);
    text-decoration: none;
    transition: color .2s ease;
}
a:hover { color: var(--apl-link-hover); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--apple-font);
    color: var(--apl-text);
    letter-spacing: -0.022em;
    font-weight: 600;
}

::selection { background: rgba(0,113,227,.22); color: inherit; }

hr, .dropdown-divider { border-color: var(--apl-divider-soft); }

/* =========================  NAVBAR  ========================= */

.navbar-acg {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--apl-divider-soft);
    box-shadow: none;
    padding: 0 !important;
    min-height: var(--apl-nav-h);
    position: sticky;
    top: 0;
    z-index: 9990;
}
@media (prefers-color-scheme: dark) {
    .navbar-acg { background: rgba(22, 22, 23, 0.78) !important; border-bottom-color: var(--apl-divider); }
}

.navbar-acg .container {
    min-height: var(--apl-nav-h);
    max-width: 1024px;
}

.navbar-acg .navbar-brand {
    color: var(--apl-text) !important;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}
.navbar-acg .navbar-brand span { color: var(--apl-text) !important; }
.navbar-acg .brand-logo { width: 22px; height: 22px; border-radius: 6px; }

.navbar-acg .nav-link {
    color: var(--apl-text) !important;
    font-size: 0.82rem;
    font-weight: 400;
    opacity: .85;
    padding: 0 .9rem !important;
    line-height: var(--apl-nav-h);
    transition: opacity .2s ease;
}
.navbar-acg .nav-link:hover { opacity: 1; }
.navbar-acg .nav-link.active { opacity: 1; font-weight: 500; color: var(--apl-text) !important; }
.navbar-acg .nav-icon { margin-right: .35rem; opacity: .8; }

/* Search input — minimal Apple style */
.navbar-acg .search-input { margin-left: auto; max-width: 280px; }
.navbar-acg .search-input .input-group { border-radius: var(--apl-r-pill); overflow: hidden; background: var(--apl-bg-elev); border: 1px solid transparent; transition: border-color .15s ease, background .15s ease; }
.navbar-acg .search-input .input-group:focus-within { border-color: var(--apl-accent); background: var(--apl-surface); }
.navbar-acg .search-input .input-group-text { background: transparent; border: 0; color: var(--apl-text-muted); padding-left: 1rem; }
.navbar-acg .search-input .form-control { background: transparent; border: 0; color: var(--apl-text); font-size: .85rem; box-shadow: none; padding: .4rem .9rem .4rem .25rem; }
.navbar-acg .search-input .form-control::placeholder { color: var(--apl-text-muted); }

/* User info / dropdown */
.user-info-box .btn { color: var(--apl-text) !important; padding: 6px 10px; border-radius: var(--apl-r-md); }
.user-info-box .btn:hover { background: var(--apl-bg-elev); }
.user-info-box .dropdown-toggle::after { color: var(--apl-text-muted); }
.user-info-box #username { color: var(--apl-text) !important; font-size: .82rem !important; font-weight: 500 !important; }
.user-info-box #user-balance { color: var(--apl-text-muted) !important; font-size: .72rem !important; }
.user-info-box .text-success { color: var(--apl-success) !important; }
.user-info-box img.rounded-circle { width: 26px !important; height: 26px !important; }

.dropdown-menu {
    border: 1px solid var(--apl-divider-soft);
    border-radius: var(--apl-r-md);
    box-shadow: var(--apl-shadow-lg);
    background: var(--apl-surface);
    padding: 6px;
    min-width: 200px;
}
.dropdown-item {
    color: var(--apl-text);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: .85rem;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--apl-bg-elev); color: var(--apl-text); }
.dropdown-item.text-danger, .dropdown-item.text-danger:hover { color: #ff453a; }

/* Login / register buttons in nav */
.user-login-box .btn {
    border-radius: var(--apl-r-pill);
    font-size: .82rem;
    padding: .35rem 1rem;
    font-weight: 500;
    border: 1px solid transparent;
}
.user-login-box .btn-outline-secondary {
    background: transparent;
    border-color: var(--apl-divider);
    color: var(--apl-text) !important;
}
.user-login-box .btn-outline-secondary:hover { background: var(--apl-bg-elev); }
.user-login-box .btn-primary {
    background: var(--apl-accent) !important;
    border-color: var(--apl-accent) !important;
    color: #fff !important;
}
.user-login-box .btn-primary:hover { background: var(--apl-accent-hover) !important; border-color: var(--apl-accent-hover) !important; }

/* Mobile nav adjustments */
.navbar-toggler { border-color: var(--apl-divider); padding: .2rem .5rem; }
.navbar-toggler:focus { box-shadow: none; }

/* =========================  LAYOUT  ========================= */

main.container { max-width: 1024px; padding-left: 22px; padding-right: 22px; }

/* =========================  HERO  ========================= */

.apple-hero {
    text-align: center;
    padding: 64px 22px 28px;
    background: var(--apl-bg);
}
.apple-hero h1 {
    font-size: clamp(36px, 5.5vw, 56px);
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1.07;
    margin: 0 0 12px;
    background: linear-gradient(180deg, var(--apl-text) 60%, var(--apl-text-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.apple-hero p {
    font-size: clamp(17px, 1.6vw, 21px);
    color: var(--apl-text-2);
    font-weight: 400;
    letter-spacing: -0.012em;
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.38;
}
.apple-hero .hero-cta {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--apl-link);
    font-size: 16px;
    font-weight: 400;
}
.apple-hero .hero-cta:hover { text-decoration: none; }
.apple-hero .hero-cta:hover .arr { transform: translateX(3px); }
.apple-hero .arr { transition: transform .2s ease; }

/* =========================  PANELS  ========================= */

.panel {
    background: var(--apl-bg);
    border: 0;
    border-radius: 0;
    margin-bottom: 36px;
    padding: 0;
}

.panel-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 0 0 14px 0;
    border: 0;
    background: transparent;
}
.panel-header .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--apl-bg-elev);
    color: var(--apl-text);
    font-size: .85rem;
}
.panel-title {
    font-size: 1.45rem;
    font-weight: 600;
    margin: 0;
    color: var(--apl-text);
    letter-spacing: -0.018em;
}

.panel-body {
    padding: 0;
    background: transparent;
    color: var(--apl-text);
}

/* Announcement panel — wrap as a soft card */
.panel:has(.fa-bullhorn) .panel-body {
    background: var(--apl-bg-elev);
    border-radius: var(--apl-r-lg);
    padding: 18px 22px;
    color: var(--apl-text-2);
    font-size: .92rem;
    line-height: 1.55;
}

/* =========================  CATEGORY CHIPS  ========================= */

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: 7px 16px;
    border-radius: var(--apl-r-pill);
    background: var(--apl-bg-elev);
    color: var(--apl-text-2) !important;
    font-size: .85rem;
    font-weight: 400;
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    text-decoration: none !important;
    cursor: pointer;
}
.chip:hover { background: var(--apl-divider-soft); color: var(--apl-text) !important; }
.chip.is-primary {
    background: var(--apl-text);
    color: var(--apl-bg) !important;
    border-color: var(--apl-text);
}
.chip-icon { width: 16px; height: 16px; border-radius: 4px; display: inline-block; }

/* =========================  PRODUCT GRID  ========================= */

.item-list { margin: 0 -8px; }
.item-list > a { padding-left: 8px; padding-right: 8px; }
.item-message { padding: 40px 16px; color: var(--apl-text-muted); text-align: center; font-size: .95rem; }

.acg-card {
    background: var(--apl-bg-elev);
    border: 0;
    border-radius: var(--apl-r-xl);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}
a:hover .acg-card { transform: translateY(-2px); box-shadow: var(--apl-shadow-md); }
.acg-card.soldout { opacity: .65; }

.acg-thumb {
    aspect-ratio: 4 / 3;
    width: 100%;
    background-color: var(--apl-bg-sunken);
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.acg-card .p-3 { padding: 18px 18px 20px !important; display: flex; flex-direction: column; gap: 8px; }

.acg-card .tags { display: flex; flex-wrap: wrap; gap: 6px; }

.acg-card .goods-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--apl-text);
    margin: 4px 0 2px;
    line-height: 1.3;
    letter-spacing: -0.012em;
    /* clamp 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.acg-card .stat-row { display: flex; align-items: baseline; justify-content: space-between; }
.acg-card .price {
    color: var(--apl-text);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.012em;
}
.acg-card .price .unit { font-size: .85rem; font-weight: 500; margin-right: 1px; }

.acg-card .stat-bottom {
    display: flex;
    justify-content: space-between;
    color: var(--apl-text-muted);
    font-size: .75rem;
}

.soldout-ribbon {
    position: absolute;
    top: 12px; right: 12px;
    background: rgba(0,0,0,.75);
    color: #fff;
    border-radius: var(--apl-r-pill);
    padding: 4px 10px;
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .02em;
}

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

.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--apl-bg-elev);
    color: var(--apl-text-2);
    padding: 3px 9px;
    border-radius: var(--apl-r-pill);
    font-size: .7rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .005em;
}
.badge-soft.badge-soft-success { background: var(--apl-success-bg); color: var(--apl-success); }
.badge-soft.badge-soft-primary { background: var(--apl-info-bg); color: var(--apl-info); }
.badge-soft.badge-soft-info { background: var(--apl-bg-elev); color: var(--apl-text-2); cursor: pointer; }
.badge-soft.shared-button:hover { background: var(--apl-divider-soft); }

/* =========================  ITEM DETAIL PAGE  ========================= */

.acg-card.acg-cover {
    background: var(--apl-bg-elev);
    border-radius: var(--apl-r-xl);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
}
.acg-card.acg-cover .item-cover {
    width: 100%; height: 100%; object-fit: contain; padding: 24px;
}

.item-detail .panel-body {
    background: var(--apl-bg-elev);
    border-radius: var(--apl-r-lg);
    padding: 26px 28px;
    color: var(--apl-text-2);
    font-size: .92rem;
    line-height: 1.65;
}
.item-detail .panel-body img { max-width: 100%; border-radius: var(--apl-r-md); }

.abacus .price {
    color: var(--apl-text);
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: -0.022em;
}

/* SKU pills */
.sku-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sku {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: var(--apl-r-md);
    background: var(--apl-bg);
    color: var(--apl-text) !important;
    font-size: .85rem;
    border: 1.5px solid var(--apl-divider);
    transition: border-color .15s ease, background .15s ease;
    text-decoration: none !important;
}
.sku:hover { border-color: var(--apl-text-muted); }
.sku.is-primary {
    border-color: var(--apl-accent);
    background: var(--apl-bg);
}
.sku .badge-money {
    background: var(--apl-bg-elev);
    color: var(--apl-text-muted);
    font-size: .72rem;
    padding: 2px 8px;
    border-radius: var(--apl-r-pill);
}

/* Form labels */
.form-label {
    color: var(--apl-text);
    font-weight: 500;
    font-size: .9rem;
    margin-bottom: .35rem;
    letter-spacing: -0.005em;
}

/* Inputs */
.form-control {
    background: var(--apl-bg);
    border: 1.5px solid var(--apl-divider);
    border-radius: var(--apl-r-md);
    color: var(--apl-text);
    padding: .65rem .85rem;
    font-size: .92rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    background: var(--apl-bg);
    border-color: var(--apl-accent);
    box-shadow: 0 0 0 4px rgba(0,113,227,.16);
    color: var(--apl-text);
    outline: none;
}
.form-control::placeholder { color: var(--apl-text-muted); }
.form-control[disabled], .form-control:disabled { background: var(--apl-bg-elev); }

/* Quantity selector */
.qty-group { width: max-content; }
.qty-group .form-control {
    width: 64px;
    text-align: center;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}
.qty-group .change-num-sub, .qty-group .change-num-add {
    background: var(--apl-bg-elev);
    border: 1.5px solid var(--apl-divider);
    color: var(--apl-text);
    width: 40px;
    font-size: 1rem;
    border-radius: var(--apl-r-md);
    transition: background .15s;
}
.qty-group .change-num-sub { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.qty-group .change-num-add { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.qty-group .change-num-sub:hover, .qty-group .change-num-add:hover { background: var(--apl-divider-soft); }

/* Optional-card button */
.optional-card {
    width: 100%;
    background: var(--apl-bg);
    border: 1.5px dashed var(--apl-divider);
    color: var(--apl-text-muted);
    padding: .7rem 1rem;
    border-radius: var(--apl-r-md);
    font-size: .9rem;
    transition: border-color .15s, color .15s;
}
.optional-card:hover { border-color: var(--apl-accent); color: var(--apl-accent); }

/* Pay list — compact chip-style cards */
.cash-pay {
    background: var(--apl-bg-elev);
    border-radius: var(--apl-r-lg);
    padding: 18px 20px !important;
    box-shadow: none !important;
}
.cash-pay .form-label { margin-bottom: .75rem; font-weight: 600; }

.pay-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
    border-top: 0;
}

.pay-list .pay,
.pay-list > * {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border-radius: var(--apl-r-pill);
    background: var(--apl-bg);
    border: 1.5px solid var(--apl-divider);
    color: var(--apl-text);
    font-size: .82rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none !important;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
    user-select: none;
}
.pay-list .pay:hover,
.pay-list > *:hover {
    border-color: var(--apl-text-muted);
}
.pay-list .pay:active { transform: scale(.97); }

.pay-list .pay img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: none;
    flex-shrink: 0;
}

.pay-list .pay span {
    font-size: .82rem;
    font-weight: 500;
    color: var(--apl-text);
}

/* Selected state */
.pay-list .pay.is-primary,
.pay-list .pay.active,
.pay-list .pay.selected,
.pay-list .is-primary,
.pay-list .active {
    border-color: var(--apl-accent);
    background: var(--apl-info-bg);
    box-shadow: none !important;
}
.pay-list .pay.is-primary span,
.pay-list .pay.active span,
.pay-list .pay.selected span {
    color: var(--apl-accent);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .pay-list .pay { padding: 5px 10px 5px 5px; }
    .pay-list .pay img { width: 20px; height: 20px; }
    .pay-list .pay span { font-size: .78rem; }
}

/* CAPTCHA image */
.image-code, .captcha-img {
    border-radius: var(--apl-r-md);
    border: 1.5px solid var(--apl-divider);
    cursor: pointer;
    height: 48px;
    width: 100%;
    object-fit: cover;
    background: var(--apl-bg-elev);
}

.input-group-text {
    background: var(--apl-bg-elev);
    border: 1.5px solid var(--apl-divider);
    color: var(--apl-text-muted);
    border-radius: var(--apl-r-md);
}

/* =========================  BUTTONS  ========================= */

.btn {
    font-family: var(--apple-font);
    border-radius: var(--apl-r-pill);
    font-weight: 400;
    font-size: .92rem;
    padding: .5rem 1.1rem;
    letter-spacing: -0.005em;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active { transform: scale(0.98); }

.btn-primary, .btn-gradient {
    background: var(--apl-accent) !important;
    border-color: var(--apl-accent) !important;
    color: #fff !important;
    background-image: none !important;
}
.btn-primary:hover, .btn-gradient:hover {
    background: var(--apl-accent-hover) !important;
    border-color: var(--apl-accent-hover) !important;
    color: #fff !important;
}
.btn-primary:focus, .btn-primary:active,
.btn-gradient:focus, .btn-gradient:active {
    background: var(--apl-accent-press) !important;
    box-shadow: 0 0 0 4px rgba(0,113,227,.22) !important;
}

.btn-lg {
    padding: .85rem 1.4rem;
    font-size: 1rem;
    font-weight: 500;
}

.btn-outline-primary {
    background: transparent;
    border: 1.5px solid var(--apl-accent);
    color: var(--apl-accent);
}
.btn-outline-primary:hover {
    background: var(--apl-accent);
    color: #fff;
}

.btn-outline-secondary {
    background: transparent;
    border: 1.5px solid var(--apl-divider);
    color: var(--apl-text);
}
.btn-outline-secondary:hover {
    background: var(--apl-bg-elev);
    color: var(--apl-text);
    border-color: var(--apl-divider);
}

.btn-search-query {
    background: var(--apl-text) !important;
    border-color: var(--apl-text) !important;
    color: var(--apl-bg) !important;
}
.btn-search-query:hover { opacity: .88; }

/* =========================  AUTH PAGES  ========================= */

.auth-wrapper {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 22px;
    background: var(--apl-bg);
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--apl-bg);
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.brand-header {
    text-align: center;
    margin-bottom: 18px;
}
.brand-logo { display: inline-flex; }
.brand-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    box-shadow: var(--apl-shadow-md);
}

.auth-card h1, .auth-card h2 {
    text-align: center;
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: -0.022em;
    margin: 0 0 8px;
}

.auth-subtitle {
    text-align: center;
    color: var(--apl-text-muted);
    font-size: .92rem;
    margin-bottom: 28px !important;
    line-height: 1.5;
}

/* Floating label inputs */
.auth-card .form-floating > .form-control,
.auth-card .form-floating > .form-control-plaintext {
    height: 56px;
    padding: 1.1rem .9rem .35rem;
    background: var(--apl-bg-elev);
    border-radius: var(--apl-r-md);
    border: 1.5px solid transparent;
    font-size: .95rem;
}
.auth-card .form-floating > .form-control:focus {
    background: var(--apl-bg);
    border-color: var(--apl-accent);
    box-shadow: 0 0 0 4px rgba(0,113,227,.16);
}
.auth-card .form-floating > label {
    padding: 1.05rem .9rem;
    color: var(--apl-text-muted);
    font-size: .92rem;
}
.auth-card .form-floating > .form-control:focus ~ label,
.auth-card .form-floating > .form-control:not(:placeholder-shown) ~ label {
    transform: scale(.78) translateY(-.6rem) translateX(.15rem);
    color: var(--apl-text-muted);
    opacity: 1;
    background: transparent;
}

.auth-card .form-check { display: flex; align-items: center; gap: .5rem; }
.auth-card .form-check input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--apl-accent);
    cursor: pointer;
}
.auth-card .form-check label { color: var(--apl-text-2); font-size: .85rem; margin: 0; cursor: pointer; }

.auth-card .text-link {
    color: var(--apl-link);
    font-size: .85rem;
    font-weight: 400;
}
.auth-card .text-link:hover { text-decoration: underline; }

.auth-card .divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--apl-text-muted);
    margin: 24px 0;
    font-size: .8rem;
}
.auth-card .divider::before, .auth-card .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--apl-divider-soft);
}
.auth-card .divider::before { margin-right: 12px; }
.auth-card .divider::after  { margin-left: 12px; }

/* =========================  ORDER QUERY  ========================= */

.order-query-form { padding: 8px 0 4px; }
.order-query-form .form-control { height: 48px; border-radius: var(--apl-r-pill); padding-left: 1.1rem; }
.order-query-form .btn-primary { height: 48px; padding-left: 1.4rem; padding-right: 1.4rem; }

.order-list .panel,
.order-results .panel,
.no-results .panel,
.loading-state .panel { background: var(--apl-bg-elev); border-radius: var(--apl-r-lg); padding: 24px; margin-bottom: 18px; }

/* =========================  FOOTER  ========================= */

footer {
    background: var(--apl-bg-sunken);
    border-top: 1px solid var(--apl-divider-soft);
    color: var(--apl-text-muted);
    font-size: .75rem;
    padding: 28px 22px;
    text-align: center;
    margin-top: 80px;
}
footer a { color: var(--apl-text-muted); }
footer a:hover { color: var(--apl-text); }

/* =========================  LAYER / TOAST POLISH  ========================= */

.layui-layer { border-radius: var(--apl-r-lg) !important; box-shadow: var(--apl-shadow-lg) !important; }
.layui-layer-title { background: var(--apl-bg) !important; color: var(--apl-text) !important; border-bottom: 1px solid var(--apl-divider-soft) !important; font-weight: 600; }
.layui-layer-content { color: var(--apl-text); }

#toast-container > div { border-radius: var(--apl-r-md) !important; box-shadow: var(--apl-shadow-lg) !important; font-family: var(--apple-font) !important; }

/* =========================  RESPONSIVE TWEAKS  ========================= */

@media (max-width: 991.98px) {
    .navbar-acg .container { padding-left: 16px; padding-right: 16px; }
    .navbar-acg .search-input { max-width: none; margin: 8px 0 4px; }
    .navbar-collapse { background: var(--apl-bg); padding: 10px 0; }
}

@media (max-width: 767.98px) {
    .apple-hero { padding: 36px 16px 18px; }
    .panel-title { font-size: 1.2rem; }
    .acg-card .p-3 { padding: 14px !important; }
    .acg-card .goods-title { font-size: .92rem; }
    .abacus .price { font-size: 1.6rem; }
    main.container { padding-left: 14px; padding-right: 14px; }
}

/* Layui select boxes inside trade flow */
.xm-select-parent .xm-select { background: var(--apl-bg); border: 1.5px solid var(--apl-divider); border-radius: var(--apl-r-md); }

/* spinner */
.icon-spin { animation: apl-spin 1s linear infinite; }
@keyframes apl-spin { to { transform: rotate(360deg); } }