/**
 * Retail POS — Modern theme (aligned with Express Tracking admin)
 */

:root {
    --theme-primary: #667eea;
    --theme-primary-dark: #764ba2;
    --theme-accent: #f093fb;
    --theme-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    --theme-nav-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --theme-radius: 16px;
    --theme-radius-sm: 12px;
    --theme-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    --theme-glass-bg: rgba(255, 255, 255, 0.92);
    --theme-glass-border: rgba(255, 255, 255, 0.35);
}

/* —— App pages (management) —— */
body.app-page {
    background: var(--theme-gradient);
    background-attachment: fixed;
    color: #1f2937;
    position: relative;
    height: var(--app-height);
    min-height: var(--app-height);
    overflow: hidden;
}

body.app-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.2) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

body.app-page > .navbar,
body.app-page > .container {
    position: relative;
    z-index: 1;
}

body.app-page > .container {
    min-height: 0;
    overflow-y: auto;
    padding-bottom: max(1rem, var(--safe-bottom));
}

html:has(body.app-page),
html:has(body.login-page) {
    overflow: hidden;
    scrollbar-gutter: auto;
}

body.app-page .navbar {
    background: var(--theme-nav-gradient);
    border-bottom: none;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.35);
    padding: 0.65rem 1rem;
    padding-top: max(0.65rem, var(--safe-top));
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
}

body.app-page .navbar-brand {
    color: #fff !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    /* 与 logo 横排对齐 */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* 导航栏 logo：源图为白底方图，圆形裁切后贴在渐变底上更干净 */
body.app-page .navbar-brand-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

/* 品牌文字（data-i18n 移到内层 span，因为 i18n 用 textContent 赋值会清掉兄弟节点 logo）。
   品牌区固定 220px + overflow:hidden，这里把省略号规则一并下移到文字容器，
   避免缅文等长译文硬溢出被直接裁掉。 */
body.app-page .navbar-brand > [data-i18n] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.app-page .navbar-nav #currentUser,
body.app-page .navbar-nav span[id="currentUser"] {
    color: rgba(255, 255, 255, 0.9) !important;
}

body.app-page .nav-link {
    color: rgba(255, 255, 255, 0.88);
    border-radius: 10px;
    font-weight: 500;
}

body.app-page .nav-link:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

body.app-page .nav-link.disabled,
body.app-page .nav-link.disabled:hover {
    color: rgba(255, 255, 255, 0.45) !important;
    background: transparent !important;
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

/* 免费版不可用：变灰但仍可点击提示 */
body.app-page .nav-link.free-plan-locked,
body.app-page .nav-link.free-plan-locked:hover,
body.app-page .nav-link.disabled.free-plan-locked,
body.app-page .nav-link.disabled.free-plan-locked:hover {
    color: rgba(255, 255, 255, 0.45) !important;
    background: transparent !important;
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: auto !important;
}

/* 顶栏导航：覆盖 style.css 的绿色 active，全站统一为半透明白底 */
body.app-page .nav-link.active {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-weight: 500;
}

/* 桌面导航栏里的「退出登录」：它坐在紫渐变底上，所以做成半透明白胶囊。
   必须带 .navbar 限位 —— 不加的话会连手机顶栏那颗图标按钮一起选中
   （pos.html 里那颗也写了 onclick="logout()"），把它的背景也染成半透明白、
   图标字号压到 14px，而手机顶栏本身也是白底，结果就是一个「看不见的按钮」。 */
body.app-page .navbar button[onclick="logout()"] {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 10px !important;
    font-size: 0.875rem !important;
    padding: 0.35rem 0.75rem !important;
}

body.app-page .navbar button[onclick="logout()"]:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.3) !important;
}

body.app-page .card {
    background: var(--theme-glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--theme-glass-border);
    border-radius: var(--theme-radius);
    box-shadow: var(--theme-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body.app-page .card:hover {
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.14);
}

body.app-page .card-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.12);
    color: #374151;
    font-weight: 600;
    border-radius: var(--theme-radius) var(--theme-radius) 0 0;
}

body.app-page .card-footer {
    background: rgba(248, 250, 252, 0.8);
    border-top: 1px solid rgba(102, 126, 234, 0.1);
}

body.app-page .form-control {
    border-radius: var(--theme-radius-sm);
    border-color: rgba(102, 126, 234, 0.25);
}

body.app-page .form-control:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

body.app-page .btn-primary {
    background: var(--theme-nav-gradient);
    border: none;
    border-radius: var(--theme-radius-sm);
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35);
}

body.app-page .btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(102, 126, 234, 0.45);
    filter: brightness(1.05);
}

body.app-page .btn-success {
    border-radius: var(--theme-radius-sm);
    box-shadow: 0 4px 14px rgba(40, 167, 69, 0.3);
}

body.app-page .table thead th {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-bottom: 2px solid rgba(102, 126, 234, 0.2);
    color: #374151;
}

body.app-page .table-scroll-container {
    border: 1px solid rgba(102, 126, 234, 0.15);
    border-radius: var(--theme-radius-sm);
}

body.app-page .table-scroll-container table thead th {
    background: linear-gradient(135deg, #eef2ff 0%, #f3e8ff 100%);
}

body.app-page .modal-content {
    border-radius: var(--theme-radius);
    border: 1px solid var(--theme-glass-border);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

body.app-page .modal-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.08) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.12);
}

/* Stat dashboard cards */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.stat-card {
    border-radius: var(--theme-radius);
    padding: 1.25rem 1rem;
    text-align: center;
    color: #fff;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
}

.stat-card h6 {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stat-card h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.stat-card-blue {
    background: linear-gradient(135deg, #667eea 0%, #5a67d8 100%);
}

.stat-card-green {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

.stat-card-yellow {
    background: linear-gradient(135deg, #ecc94b 0%, #d69e2e 100%);
    color: #1a202c;
}

.stat-card-yellow h6 {
    color: rgba(26, 32, 44, 0.75);
}

.stat-card-purple {
    background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%);
}

.stat-card-red {
    background: linear-gradient(135deg, #fc8181 0%, #e53e3e 100%);
}

.stat-card-teal {
    background: linear-gradient(135deg, #4fd1c5 0%, #319795 100%);
}

.stat-chart-wrap {
    margin-top: 1rem;
    padding: 0.75rem 1rem 0.5rem;
    background: rgba(102, 126, 234, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.12);
    border-radius: var(--theme-radius-sm);
    height: 200px;
    position: relative;
    overflow: hidden;
}

.stat-chart-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* —— POS page: light content area; top nav uses app-page styles —— */
body.app-page.pos-page {
    background: linear-gradient(160deg, #e8ecff 0%, #f0f4ff 40%, #faf5ff 100%);
    background-attachment: fixed;
}

body.app-page.pos-page::before {
    display: none;
}

body.app-page.pos-page > .navbar,
body.app-page.pos-page > .container {
    position: relative;
    z-index: 1;
}

body.pos-page .card {
    background: #fff;
    border-radius: var(--theme-radius);
    border: 1px solid rgba(102, 126, 234, 0.12);
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.1);
}

body.pos-page .card-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(118, 75, 162, 0.05) 100%);
    font-weight: 600;
    color: #4c51bf;
}

body.pos-page .btn-primary {
    background: var(--theme-nav-gradient);
    border: none;
    border-radius: var(--theme-radius-sm);
}

body.pos-page .card-header-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

body.pos-page .card-header-actions > span {
    font-weight: 600;
}

body.pos-page .card-header-actions #printerSettingsBtn {
    flex-shrink: 0;
    font-size: 0.875rem;
    padding: 0.35rem 0.75rem;
}

/* Products page — actions dropdown */
body.index-page .card-header-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

body.index-page .card-header-actions > span {
    font-weight: 600;
}

body.statistics-page .card-header-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

body.statistics-page .card-header-actions > span {
    font-weight: 600;
}

.stat-returns-note {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #856404;
    background: #fff3cd;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}

body.reconciliation-page .recon-variance-short {
    color: #dc3545;
    font-weight: 700;
}

body.reconciliation-page .recon-variance-over {
    color: #198754;
    font-weight: 700;
}

body.reconciliation-page .recon-variance-ok {
    color: #198754;
    font-weight: 600;
}

body.reconciliation-page #reconciliationPeriodInfo {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

body.reconciliation-page .card-body {
    padding: 0.75rem;
}

body.reconciliation-page .recon-actual-input {
    max-width: 110px;
    text-align: center;
    padding: 0.2rem 0.35rem;
    font-size: 0.8125rem;
    line-height: 1.2;
    height: auto;
}

body.reconciliation-page .recon-table {
    margin-bottom: 0.5rem;
    table-layout: fixed;
    width: 100%;
}

body.reconciliation-page .recon-table th,
body.reconciliation-page .recon-table td {
    padding: 0.3rem 0.4rem;
    font-size: 0.8125rem;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
}

body.reconciliation-page .recon-table thead th {
    padding: 0.35rem 0.4rem;
    text-align: center;
}

body.reconciliation-page .recon-table td strong {
    font-weight: 600;
}

body.reconciliation-page .recon-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

body.reconciliation-page .recon-remark-group {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

body.reconciliation-page .recon-remark-group textarea {
    min-height: 2rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.3;
}

body.reconciliation-page .recon-history-item {
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

body.reconciliation-page .recon-history-item .recon-history-meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
}

body.reconciliation-page .recon-history-item .recon-history-remark {
    margin: 0 0 0.35rem;
    font-size: 0.8125rem;
}

body.reconciliation-page .recon-history-item .table {
    margin-bottom: 0;
    table-layout: fixed;
    width: 100%;
}

body.reconciliation-page .recon-history-item .table th,
body.reconciliation-page .recon-history-item .table td {
    padding: 0.25rem 0.4rem;
    font-size: 0.8125rem;
    text-align: center;
}

body.reconciliation-page .recon-history-item .table thead th {
    padding: 0.3rem 0.4rem;
    text-align: center;
}

.products-actions-dropdown {
    position: relative;
    flex-shrink: 0;
}

.products-actions-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.products-actions-chevron {
    font-size: 0.7rem;
    opacity: 0.85;
    transition: transform 0.2s ease;
}

.products-actions-dropdown.is-open .products-actions-chevron {
    transform: rotate(180deg);
}

.products-actions-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid rgba(102, 126, 234, 0.18);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    padding: 0.35rem;
    z-index: 100;
    overflow: hidden;
}

.products-actions-dropdown.is-open .products-actions-menu {
    display: block;
}

.products-actions-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: none;
    background: transparent;
    color: #374151;
    font-size: 0.875rem;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.products-actions-item:hover {
    background: rgba(102, 126, 234, 0.1);
    color: #4c51bf;
}

.products-actions-item i {
    width: 1.1rem;
    text-align: center;
    color: #667eea;
}

/* —— Login —— */
body.login-page {
    min-height: var(--app-height);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-gradient);
    overflow: hidden;
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

body.login-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.35) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.25) 0%, transparent 50%);
    animation: themeBgPulse 20s ease-in-out infinite;
    pointer-events: none;
}

@keyframes themeBgPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

body.login-page .login-network-banner {
    position: fixed;
    top: max(1rem, var(--safe-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    max-width: calc(100vw - 2rem - var(--safe-left) - var(--safe-right));
}

body.login-page .login-network-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.55rem 1rem;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 0.9rem;
}

body.login-page .login-network-inner > i {
    color: #86efac;
}

body.login-page .login-network-label {
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

body.login-page .login-network-url {
    color: #fde047;
    font-weight: 700;
    text-decoration: none;
    word-break: break-all;
}

body.login-page .login-network-url:hover {
    text-decoration: underline;
}

body.login-page .login-network-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

body.login-page .login-network-copy:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.05);
}

@media (max-width: 720px) {
    body.login-page .login-network-banner {
        top: max(3.75rem, calc(var(--safe-top) + 2.75rem));
        width: calc(100% - 2rem - var(--safe-left) - var(--safe-right));
    }

    body.login-page .login-network-inner {
        border-radius: 14px;
        justify-content: flex-start;
    }
}

.login-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 330px;
    padding: 0.75rem;
}

.login-glass {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 18px;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.25);
}

.login-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    border-radius: 18px 18px 0 0;
}

.login-icon-wrap {
    width: 50px;
    height: 50px;
    margin: 0 auto 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    /* 原为紫色渐变 + 白色 FontAwesome 图标；现改用应用 logo 图片本身
       （logo 自带蓝色圆环图案、底色接近白），这里只留白色底兜住加载瞬间 */
    background: #fff;
    box-shadow: 0 8px 22px rgba(102, 126, 234, 0.5);
}

/* logo 图片撑满圆形容器；logo 已是方形满幅图案，cover 后不会留边 */
.login-icon-wrap .login-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.login-glass h1 {
    color: #fff;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.login-glass .login-subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.78rem;
    margin-bottom: 1rem;
}

body.login-page .form-label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    margin-bottom: 0.35rem;
}

body.login-page .input-with-icon {
    position: relative;
    margin-bottom: 0.8rem;
}

body.login-page .input-with-icon > i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    z-index: 2;
}

body.login-page .login-input {
    width: 100%;
    padding: 0.6rem 2.5rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    color: #fff;
    font-size: 0.88rem;
    text-align: center;
    transition: all 0.25s ease;
}

body.login-page .login-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}

body.login-page .login-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

body.login-page .login-submit {
    width: 100%;
    padding: 0.65rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(102, 126, 234, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.login-page .login-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(102, 126, 234, 0.55);
}

body.login-page .login-power-actions {
    position: fixed;
    top: max(1rem, var(--safe-top));
    left: max(1rem, var(--safe-left));
    z-index: 100;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

body.login-page .login-power-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 118px;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    border: none;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

body.login-page .login-power-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

body.login-page .login-power-btn:active {
    transform: translateY(0);
}

body.login-page .login-restart-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.45);
}

body.login-page .login-restart-btn:hover {
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.55);
}

body.login-page .login-shutdown-btn {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.45);
}

body.login-page .login-shutdown-btn:hover {
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.55);
}

body.login-page #errorMessage.alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fecaca;
    border-radius: 12px;
    margin-top: 0.75rem;
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
}

body.login-page .login-free-note {
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    border: 1px solid rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    font-size: 0.72rem;
    line-height: 1.4;
    text-align: left;
}

body.login-page .login-auth-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.95rem;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.88);
}

body.login-page .login-auth-switch button {
    border: none;
    background: transparent;
    color: #93c5fd;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    padding: 0;
}

body.login-page .login-auth-switch button:hover {
    color: #bfdbfe;
    text-decoration: underline;
}

body.login-page .login-official-contact {
    margin-top: 0.95rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(147, 197, 253, 0.45);
    background: rgba(37, 99, 235, 0.14);
    text-align: left;
    line-height: 1.4;
}

body.login-page .login-official-contact .oc-title {
    margin: 0 0 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #93c5fd;
}

body.login-page .login-official-contact .oc-line {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}

body.login-page .login-official-contact .oc-line a {
    font-size: 1rem;
}

body.login-page .login-official-contact .oc-line + .oc-line {
    margin-top: 0.2rem;
}

body.login-page .login-official-contact .oc-address {
    font-weight: 700;
}

body.login-page .login-official-contact a {
    color: #93c5fd;
    text-decoration: none;
    font-weight: 600;
}

body.login-page .login-official-contact a:hover {
    color: #bfdbfe;
    text-decoration: underline;
}

/* 记住密码 */
body.login-page .login-remember {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: -0.15rem 0 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    cursor: pointer;
    user-select: none;
}

body.login-page .login-remember input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #667eea;
    cursor: pointer;
    flex-shrink: 0;
}

/* Language switcher */
.lang-switcher,
.lang-switcher-wrap select {
    min-width: 96px;
    font-size: 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.15);
    color: inherit;
    cursor: pointer;
}

body.app-page .lang-switcher {
    background: rgba(255, 255, 255, 0.92);
    color: #374151;
    border-color: #d1d5db;
}

body.login-page .lang-switcher-wrap select {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

body.login-page .lang-switcher-wrap select option {
    color: #111;
    background: #fff;
}

/* ------------------------------------------------------------------------
   利润率占位
   ------------------------------------------------------------------------
   商品卡片的空值列会被丢掉（见 mobile-tables.js），所以「算不出利润率」时
   不能返回空串，否则整行消失、看不出是缺进价还是功能坏了。
   这里把占位做得比正常数值弱化，一眼能区分「有数据」和「缺数据」。 */
.profit-none {
    color: #9aa3ad;
    font-size: 0.9em;
    font-style: italic;
}