/* ==========================================================================
   库存档案 · 设计系统
   Theme: Midnight Galaxy (Deep Purple #2b1e3e / Cosmic Blue #4a4e8f /
          Lavender #a490c2 / Silver #e6e6fa)
   该文件由 index.php、login.php、account.php 共用，并被 .htaccess 阻止直接访问。
   ========================================================================== */

:root {
    /* —— 主题色（由 Midnight Galaxy 派生，已通过 WCAG 对比度校验） —— */
    --bg:              #171223;  /* Deep Purple 加深，作为页面底 */
    --surface:         #211A33;
    --surface-2:       #2B2344;
    --surface-3:       #352C52;
    --divider:         #332B4D;  /* 纯装饰分隔线，不承载边界语义 */
    --border:          #7A6BA8;  /* 可交互边界：对全部底色 ≥3:1 */
    --border-quiet:    #4C4270;

    --text:            #EDEAF6;  /* 主文本 15.4:1 */
    --text-muted:      #B3A8CC;  /* 次要文本 8.2:1 */
    --accent:          #A490C2;  /* Lavender：6.4:1，可作正文 */
    --accent-strong:   #C6B4E0;
    --accent-ink:      #1B1330;  /* 铺在 accent 上的文字 6.2:1 */
    --cosmic:          #4A4E8F;  /* Cosmic Blue，仅用于大面积装饰 */
    /* 搜索命中：比主题色更亮更黄，和紫色界面拉开，一眼能扫到 */
    --mark:            #FFD966;
    --mark-ink:        #2A1D00;

    --danger:          #FF8A80;
    --danger-ink:      #3A1620;
    --success:         #8FD9A8;
    --success-ink:     #12301F;
    --warning:         #F0C674;
    --warning-ink:     #33260A;

    /* —— 排版 —— */
    --sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
            "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
    --serif: Georgia, "Songti SC", "SimSun", "Source Han Serif SC", serif;
    /* 货号/数字专用：DejaVu Sans 字形窄而清晰，缺失时回落到系统字体，不引入外链 */
    --data: "DejaVu Sans", "DejaVu Sans Mono", ui-monospace, "Cascadia Mono", Consolas, var(--sans);

    --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.83rem);
    --step-0:  clamp(0.94rem, 0.92rem + 0.12vw, 1rem);
    --step-1:  clamp(1.06rem, 1rem + 0.3vw, 1.22rem);
    --step-2:  clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem);
    --step-3:  clamp(1.7rem, 1.35rem + 1.6vw, 2.6rem);

    /* —— 间隔与形态 —— */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
    --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;   --sp-7: 3rem;
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow-1: 0 1px 2px rgba(9, 6, 18, 0.5);
    --shadow-2: 0 8px 24px rgba(9, 6, 18, 0.55);
    --shadow-3: 0 24px 64px rgba(9, 6, 18, 0.7);
    --measure: 34rem;
    --focus-ring: 0 0 0 3px rgba(198, 180, 224, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background-color: var(--bg);
    /* 极淡的双色辉光，呼应 Midnight Galaxy 的两颗主星；不用图片，无外链 */
    background-image:
        radial-gradient(80rem 40rem at 12% -12%, rgba(74, 78, 143, 0.30), transparent 60%),
        radial-gradient(60rem 34rem at 100% 0%, rgba(164, 144, 194, 0.13), transparent 55%);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--step-0);
    line-height: 1.65;
    /* 竖向 flex：登录页据此把页脚压在视口内，不需要滚动就能看到备案号 */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* 兜底：任何子元素都不应把整页撑宽，避免出现横向滚动 */
    overflow-x: clip;
}

h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0 0 var(--sp-3); max-width: 78ch; }
a { color: var(--accent-strong); text-underline-offset: 0.2em; }
a:hover { color: var(--text); }

:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* 跳到主内容：键盘可达性 */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--surface-3); color: var(--text);
    padding: var(--sp-2) var(--sp-4); border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ============================ 顶部工具条 ============================ */

.topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4);
    padding: var(--sp-3) clamp(var(--sp-4), 4vw, var(--sp-6));
    background: rgba(23, 18, 35, 0.88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--divider);
}

.wordmark {
    display: inline-flex; align-items: baseline; gap: var(--sp-2);
    font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em;
    color: var(--text); text-decoration: none; white-space: nowrap;
}
.wordmark:hover { color: var(--text); }
.wordmark b { font-weight: 700; }
.wordmark span { font-size: var(--step--1); font-weight: 400; color: var(--text-muted); letter-spacing: 0; }

.topbar-spacer { flex: 1 1 auto; }

.topbar-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.topbar-nav > a, .topbar-nav > button, .topbar-nav form { white-space: nowrap; }

/* ============================== 搜索 ============================== */

.searchbar {
    display: flex; align-items: center; gap: var(--sp-2);
    flex: 2 1 22rem; max-width: 40rem; min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border-quiet);
    border-radius: var(--radius);
    padding: 0 var(--sp-2) 0 var(--sp-4);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.searchbar:focus-within { border-color: var(--border); box-shadow: var(--focus-ring); }
.searchbar input {
    flex: 1 1 auto; min-width: 0;
    background: none; border: 0; outline: none;
    color: var(--text); font: inherit; padding: 0.55rem 0;
}
.searchbar input::placeholder { color: var(--text-muted); opacity: 0.85; }
.searchbar .hint {
    font-family: var(--data); font-size: var(--step--1); color: var(--text-muted);
    border: 1px solid var(--border-quiet); border-radius: var(--radius-sm);
    padding: 0.1rem 0.35rem; white-space: nowrap;
}

/* ============================== 按钮 ============================== */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
    font: inherit; font-size: var(--step-0); font-weight: 550;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-quiet);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--surface-3); border-color: var(--border); color: var(--text); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
    background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 650;
}
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-ink); }
.btn-danger { background: transparent; border-color: var(--border-quiet); color: var(--danger); }
.btn-danger:hover { background: rgba(255, 138, 128, 0.12); border-color: var(--danger); color: var(--danger); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-sm { padding: 0.3rem 0.6rem; font-size: var(--step--1); }
.btn-block { width: 100%; }

/* ============================== 表单 ============================== */

.field { display: block; margin-bottom: var(--sp-4); }
.field > .label {
    display: block; margin-bottom: var(--sp-2);
    font-size: var(--step--1); font-weight: 600; color: var(--text-muted);
}
.field .note { display: block; margin-top: var(--sp-1); font-size: var(--step--1); color: var(--text-muted); }

input[type="text"], input[type="password"], textarea, select {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border-quiet);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    padding: 0.6rem 0.75rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--border); box-shadow: var(--focus-ring);
}
textarea { resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 0.8; }

/* ============================== 提示条 ============================== */

.notice {
    display: block;
    border-radius: var(--radius);
    border: 1px solid var(--border-quiet);
    border-left-width: 3px;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    background: var(--surface);
    font-size: var(--step-0);
}
.notice p { margin: 0; }
.notice > strong { display: block; margin-bottom: var(--sp-1); }
.notice-info    { border-left-color: var(--accent); }
.notice-error   { border-left-color: var(--danger);  color: var(--danger); }
.notice-success { border-left-color: var(--success); color: var(--success); }
.notice-warning { border-left-color: var(--warning); color: var(--warning); }

/* ============================== 页面骨架 ============================== */

.page { padding: clamp(var(--sp-4), 4vw, var(--sp-6)) clamp(var(--sp-4), 4vw, var(--sp-6)) var(--sp-7); }
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5); }
.page-head h1 { font-size: var(--step-2); }
.page-head .meta { color: var(--text-muted); font-size: var(--step--1); font-family: var(--data); }
.page-head .grow { flex: 1 1 auto; }

.viewswitch { display: inline-flex; border: 1px solid var(--border-quiet); border-radius: var(--radius); overflow: hidden; }
.viewswitch a {
    font: inherit; font-size: var(--step--1); font-weight: 550;
    padding: 0.35rem 0.75rem; background: var(--surface);
    color: var(--text-muted); cursor: pointer; text-decoration: none;
}
.viewswitch a + a { border-left: 1px solid var(--border-quiet); }
.viewswitch a:hover { background: var(--surface-2); color: var(--text); }
.viewswitch a[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 650; }

.empty {
    border: 1px dashed var(--border-quiet); border-radius: var(--radius-lg);
    padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--text-muted);
}
.empty strong { display: block; color: var(--text); font-size: var(--step-1); margin-bottom: var(--sp-2); }

/* ========================== 商品网格（接触印相表） ========================== */

.grid {
    display: grid;
    /* auto-fill 而不是 auto-fit：auto-fit 会折叠空轨道，搜索结果只剩一条时
       卡片会被拉伸到整行宽，4:3 的图随之变成巨图无法查看。
       auto-fill 保留空轨道，卡片宽度只由容器宽度决定，与结果数量无关。 */
    grid-template-columns: repeat(auto-fill, minmax(min(23rem, 100%), 1fr));
    /* 行高按内容决定，卡片之间不会互相拉伸；同一行的卡片顶部对齐 */
    grid-auto-rows: auto;
    gap: var(--sp-4);
    align-items: start;
}

.plate {
    background: var(--surface);
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex; flex-direction: column;
    /* 卡片本身不滚动，只有描述区域滚动 */
    min-height: 0;
    transition: border-color 0.15s ease;
}
.plate:hover, .plate:focus-within { border-color: var(--border-quiet); }

.plate-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    /* 图片区不参与压缩，高度由比例决定；max-height 兜底，
       避免卡片因任何原因变宽时图片跟着变成巨图 */
    flex: 0 0 auto;
    max-height: 22rem;
    background:
        linear-gradient(180deg, rgba(74, 78, 143, 0.20), rgba(23, 18, 35, 0.55)),
        var(--bg);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid var(--divider);
}
.plate-frame img {
    width: 100%; height: 100%; object-fit: contain;
    cursor: zoom-in; display: block;
}

/* 编号徽标：与描述首行的货号互补，便于按编号定位 */
.code {
    display: inline-block;
    align-self: flex-start;
    max-width: 100%;
    font-family: var(--data); font-size: var(--step--1); font-weight: 700;
    letter-spacing: 0.01em; line-height: 1.35;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border-quiet);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.45rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.plate-body {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    display: flex; flex-direction: column; gap: var(--sp-2);
    /* 占满图片以下的剩余空间；min-height:0 是关键，
       否则 flex 子项不会收缩，内部滚动区会失效 */
    flex: 1 1 auto;
    min-height: 0;
}

/* 描述首行＝货号，作为卡片内的第二层级标题；不参与滚动 */
.plate-code {
    font-family: var(--data); font-size: var(--step-1); font-weight: 700;
    line-height: 1.35; color: var(--text); word-break: break-word;
    flex: 0 0 auto;
}
.plate-code:empty { display: none; }

.plate-code .highlight, .plate-text .highlight, .listrow .highlight {
    background: var(--mark); color: var(--mark-ink);
    font-weight: 650; border-radius: 2px; padding: 0 0.12em;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* Full product description stays visible in each card. */
.plate-text {
    font-size: var(--step-0);
    line-height: 1.75;
    color: var(--text-muted);
    overflow-wrap: anywhere;
    word-break: break-word;
    padding-bottom: .55rem;
}
.plate-text p { margin: 0; }

.plate-foot {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
    margin-top: auto; padding-top: var(--sp-2);
    border-top: 1px solid var(--divider);
    flex: 0 0 auto;
}
.plate-foot time { font-family: var(--data); font-size: var(--step--1); color: var(--text-muted); }
.plate-actions { display: flex; align-items: center; gap: var(--sp-1); }

/* 内联编辑器 */
.plate-editor { display: none; flex-direction: column; gap: var(--sp-2); }
.plate.is-editing .plate-text { display: none; }
.plate.is-editing .plate-editor { display: flex; }
.plate-editor textarea { font-size: var(--step--1); min-height: 7rem; }

/* ========================== 列表视图 ========================== */
/* 与缩略图视图服务端二选一（不会同时渲染）。
   每行左侧是大图，右侧是完整描述，图片不再是被压缩的小缩略图。 */

.listview { display: flex; flex-direction: column; gap: var(--sp-3); }
.listrow {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr) auto;
    gap: var(--sp-4);
    align-items: start;
    padding: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    transition: border-color 0.15s ease;
}
.listrow:hover, .listrow:focus-within { border-color: var(--border-quiet); }

.listthumb { display: block; }
.listthumb img {
    width: 168px; height: 126px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background:
        linear-gradient(180deg, rgba(74, 78, 143, 0.20), rgba(23, 18, 35, 0.55)),
        var(--bg);
    cursor: zoom-in; display: block;
}

.listmain { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.listmain .plate-code { font-size: var(--step-0); }
.listmain .plate-text { font-size: var(--step--1); color: var(--text); }

.listside {
    display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2);
    font-family: var(--data); font-size: var(--step--1); color: var(--text-muted);
    white-space: nowrap;
}
.listside time { color: var(--text-muted); }

/* 列表行的编辑器：编辑时占满整行宽度 */
.listrow .plate-editor { display: none; grid-column: 1 / -1; margin-top: var(--sp-2); }
.listrow.is-editing .plate-editor { display: flex; }
.listrow.is-editing .listmain .plate-text { display: none; }
.listrow.is-editing .listmain .plate-code { display: none; }

/* ============================== 分页 ============================== */

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-6); }
.pager a, .pager span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem; padding: 0 var(--sp-2);
    font-family: var(--data); font-size: var(--step--1);
    border: 1px solid var(--border-quiet); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text); text-decoration: none;
}
.pager a:hover { background: var(--surface-3); border-color: var(--border); }
.pager [aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.pager .gap { border-color: transparent; background: none; color: var(--text-muted); }

/* ========================== 图片灯箱 ========================== */

.lightbox {
    position: fixed; inset: 0; z-index: 80;
    display: none;
    align-items: center; justify-content: center;
    padding: clamp(var(--sp-4), 4vw, var(--sp-6));
    background: rgba(12, 9, 20, 0.94);
    backdrop-filter: blur(6px);
}
.lightbox.is-open { display: flex; animation: lb-in 0.18s ease-out; }
.lightbox img {
    max-width: min(96vw, 1400px); max-height: 88vh;
    object-fit: contain; border-radius: var(--radius); box-shadow: var(--shadow-3);
}
.lightbox-close {
    position: absolute; top: var(--sp-4); right: var(--sp-4);
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-2); border: 1px solid var(--border-quiet); color: var(--text);
    font-size: var(--step-1); cursor: pointer;
}
.lightbox-close:hover { background: var(--surface-3); border-color: var(--border); }

/* ========================== 登录页 ========================== */

.login-shell {
    /* 只占满剩余空间，页脚随之被压在视口底部，无需滚动即可看到备案号 */
    flex: 1 1 auto;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: var(--sp-5) var(--sp-4);
}
.login-inner { width: 100%; max-width: 25rem; display: flex; flex-direction: column; gap: var(--sp-5); }

.login-brand {
    font-size: var(--step-3); font-weight: 700; letter-spacing: -0.015em;
    line-height: 1.15; margin: 0;
}
.login-brand span {
    display: block; font-size: var(--step-0); font-weight: 400; color: var(--text-muted);
    letter-spacing: 0; margin-top: var(--sp-2); line-height: 1.6;
    max-width: 100%;
}

.login-card {
    background: var(--surface);
    border: 1px solid var(--divider);
    border-radius: var(--radius-lg);
    padding: clamp(var(--sp-4), 3vw, var(--sp-5));
    box-shadow: var(--shadow-2);
}

/* 连续失败时的单次提示动效，回应“这次没成功” */
.login-card.is-refused { animation: refused 0.4s ease-out; }
@keyframes refused {
    0%   { border-color: var(--danger); box-shadow: 0 0 0 0 rgba(255, 138, 128, 0); }
    35%  { border-color: var(--danger); box-shadow: 0 0 0 5px rgba(255, 138, 128, 0.16); }
    100% { border-color: var(--divider); box-shadow: var(--shadow-2); }
}

/* ========================== 账号安全页 ========================== */

.stack { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 46rem; }
.card {
    background: var(--surface);
    border: 1px solid var(--divider);
    border-radius: var(--radius-lg);
    padding: clamp(var(--sp-4), 3vw, var(--sp-5));
}
.card > h2 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.card > .card-intro { color: var(--text-muted); font-size: var(--step--1); margin-bottom: var(--sp-4); }
.card-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

.token-box {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--sp-3); margin-bottom: var(--sp-4);
}
.token-box > code {
    flex: 1 1 18rem; min-width: 0;
    font-family: var(--data); font-size: var(--step--1); color: var(--accent-strong);
    overflow-wrap: anywhere;
}
.who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); color: var(--text-muted); font-size: var(--step--1); }
.who b { color: var(--text); font-family: var(--data); font-weight: 600; }

/* ============================== 页脚 ============================== */

.footer {
    padding: var(--sp-5) var(--sp-4); text-align: center;
    color: var(--text-muted); font-size: var(--step--1);
}
.footer a { color: var(--text-muted); }
.footer a:hover { color: var(--text); }

/* ============================== 动效 ============================== */

@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes glow  { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* 唯一的一次编排入场：页面载入后网格错峰浮现 */
.grid > * { animation: rise 0.4s ease-out both; }
.grid > *:nth-child(1)  { animation-delay: 0.02s; } .grid > *:nth-child(2)  { animation-delay: 0.05s; }
.grid > *:nth-child(3)  { animation-delay: 0.08s; } .grid > *:nth-child(4)  { animation-delay: 0.11s; }
.grid > *:nth-child(5)  { animation-delay: 0.14s; } .grid > *:nth-child(6)  { animation-delay: 0.17s; }
.grid > *:nth-child(7)  { animation-delay: 0.20s; } .grid > *:nth-child(8)  { animation-delay: 0.23s; }
.grid > *:nth-child(n+9){ animation-delay: 0.26s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ============================== 响应式 ============================== */

@media (max-width: 860px) {
    .searchbar { flex: 1 1 100%; order: 3; max-width: none; }
    .topbar-nav { margin-left: auto; }
    /* 列表行在窄屏改为「图上文下」，图片仍保持足够尺寸 */
    .listrow { grid-template-columns: minmax(0, 1fr); }
    .listthumb img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
    .listside { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
}

@media (max-width: 560px) {
    .grid { grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: var(--sp-3); }
    .wordmark span { display: none; }
    .page-head { gap: var(--sp-2) var(--sp-3); }
    .page-head h1 { font-size: var(--step-1); }
    .page-head .meta { flex-basis: 100%; }
    .plate-body { padding: var(--sp-3); }
    /* 窄屏压缩留白，保证登录卡片与备案号同屏可见 */
    .login-shell { padding: var(--sp-3) var(--sp-4); }
    .login-inner { gap: var(--sp-4); }
    .login-brand { font-size: var(--step-2); }
    .login-card { padding: var(--sp-4); }
    .login-card .field { margin-bottom: var(--sp-3); }
    .footer { padding: var(--sp-3) var(--sp-4); }
}

/* 打印：黑白可读 */
@media print {
    body { background: #fff; color: #000; }
    .topbar, .pager, .plate-actions, .viewswitch { display: none !important; }
    .plate { border-color: #999; break-inside: avoid; }
}

.topbar { display:grid; grid-template-columns:auto minmax(22rem,1fr) auto; gap:1rem 1.5rem; padding-block:1rem; }
.searchbar { width:100%; max-width:none; min-height:3.25rem; padding:.3rem .4rem .3rem 1rem; }
.searchbar input[type="text"] { border:0; box-shadow:none; }
.searchbar input[type="text"]:focus { box-shadow:none; }
.searchbar .btn { min-height:2.55rem; padding-inline:1.2rem; }
.regex-toggle { display:inline-flex; align-items:center; gap:.4rem; flex:0 0 auto; color:var(--text-muted); font-size:var(--step--1); cursor:pointer; white-space:nowrap; padding:.4rem .6rem; border-radius:var(--radius); }
.regex-toggle:hover { background:var(--surface-2); color:var(--text); }
.regex-toggle input { width:1rem; height:1rem; margin:0; accent-color:var(--accent); }
.plate-text { padding-bottom:.55rem; }
@media (max-width:1100px) { .topbar { grid-template-columns:1fr auto; } .searchbar { grid-column:1/-1; grid-row:2; } }
@media (max-width:600px) { .topbar { grid-template-columns:1fr; } .topbar-nav { margin-left:0; } .searchbar { grid-column:1; grid-row:auto; flex-wrap:wrap; } .searchbar input[type="text"] { flex-basis:100%; } .searchbar .btn { flex:1; } }
.upload-page { width:min(100%,1180px); }
.upload-shell { width:100%; margin:0 auto; }
.upload-header { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.upload-header h1 { font-size:clamp(1.7rem,2.4vw,2.35rem); }
.upload-eyebrow { margin:0 0 .25rem; color:var(--accent-strong); font-size:var(--step--1); font-weight:700; letter-spacing:.1em; }
.upload-card { background:var(--surface); border:1px solid var(--border-quiet); border-radius:var(--radius-lg); padding:clamp(1rem,2.5vw,1.5rem); box-shadow:var(--shadow-1); }
.upload-grid { display:grid; grid-template-columns:minmax(18rem,.9fr) minmax(0,1.1fr); gap:clamp(1rem,2vw,1.5rem); align-items:start; }
.upload-pane { min-width:0; }
.image-drop { display:flex; min-height:24rem; align-items:center; justify-content:center; flex-direction:column; gap:.45rem; padding:1.25rem; border:1px dashed var(--border); border-radius:var(--radius); background:linear-gradient(180deg,rgba(74,78,143,.16),rgba(23,18,35,.56)),var(--bg); color:var(--text); text-align:center; cursor:pointer; transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.image-drop:hover, .image-drop.is-dragging, .image-drop.is-processing { border-color:var(--accent-strong); box-shadow:var(--focus-ring); }
.image-drop.is-processing { cursor:progress; }
.image-drop.has-file { min-height:8rem; margin-bottom:1rem; }
.image-drop input { position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none; }
.image-drop-icon { display:inline-flex; align-items:center; justify-content:center; width:3rem; height:3rem; border:1px solid var(--border); border-radius:50%; background:var(--surface-2); color:var(--accent-strong); font:600 2rem/1 var(--data); }
.image-drop strong { font-size:var(--step-1); }
.image-drop span:last-child { color:var(--text-muted); font-size:var(--step--1); }
.upload-preview-wrap { border:1px solid var(--border-quiet); border-radius:var(--radius); overflow:hidden; background:var(--bg); }
.upload-preview { display:block; width:100%; max-height:24rem; object-fit:contain; background:var(--bg); cursor:zoom-in; }
.upload-filebar { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.65rem .75rem; border-top:1px solid var(--divider); color:var(--text-muted); font-size:var(--step--1); }
.upload-filebar span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-note { color:var(--text-muted); font-size:var(--step--1); }
.upload-actions { position:sticky; bottom:0; z-index:5; display:flex; justify-content:flex-end; gap:.75rem; margin:1.25rem -.25rem -.25rem; padding:.85rem .25rem .25rem; background:linear-gradient(180deg,rgba(33,26,51,0),var(--surface) 42%); }
.upload-description-field textarea { min-height:16.25rem; overflow:hidden; }
.label-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:var(--sp-2); }
.label-row .label { margin:0; }
.description-count { color:var(--text-muted); font:600 var(--step--1) var(--data); white-space:nowrap; }
.code-helper { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:-.15rem 0 0; padding:.9rem 1rem; border:1px solid var(--border-quiet); border-left-width:3px; border-radius:var(--radius); background:rgba(23,18,35,.62); }
.code-helper-kicker { display:block; margin-bottom:.1rem; color:var(--text-muted); font-size:var(--step--1); font-weight:700; }
.code-helper strong { display:block; color:var(--text); font-size:var(--step-0); line-height:1.35; }
.code-helper p { margin:.25rem 0 0; color:var(--text-muted); font-size:var(--step--1); }
.code-helper.is-success { border-left-color:var(--success); }
.code-helper.is-warning { border-left-color:var(--warning); background:rgba(240,198,116,.08); }
.code-helper-action { flex:0 0 auto; }
.floating-code-helper { position:fixed; left:.85rem; right:.85rem; bottom:calc(4.75rem + env(safe-area-inset-bottom)); z-index:35; display:none; align-items:center; justify-content:space-between; gap:.75rem; padding:.75rem; border:1px solid var(--border-quiet); border-left-width:3px; border-radius:var(--radius); background:rgba(33,26,51,.96); box-shadow:var(--shadow-2); backdrop-filter:blur(10px); transition:bottom .12s ease; }
.floating-code-helper:not([hidden]) { display:flex; }
.floating-code-helper strong { display:block; color:var(--text); font-size:var(--step-0); line-height:1.35; }
.floating-code-helper.is-success { border-left-color:var(--success); }
.floating-code-helper.is-warning { border-left-color:var(--warning); }
@media (max-width:860px) { .upload-header { align-items:flex-start; flex-direction:column; } .upload-grid { grid-template-columns:1fr; } .image-drop { min-height:15rem; } .code-helper-desktop { display:none; } }
@media (max-width:560px) { .upload-page { padding:1rem .75rem 8.75rem; } .upload-header { gap:.35rem; margin-bottom:.85rem; } .upload-header h1 { font-size:1.55rem; } .upload-note { margin:0; } .upload-card { margin-inline:-.25rem; padding:.75rem; border-radius:var(--radius); } .upload-grid { gap:.85rem; } .image-drop { min-height:9.5rem; padding:.9rem; } .image-drop.has-file { min-height:4.75rem; margin-bottom:.6rem; } .image-drop-icon { width:2.4rem; height:2.4rem; font-size:1.55rem; } .image-drop strong { font-size:var(--step-0); } .upload-preview { max-height:14rem; } .upload-description-field { margin-bottom:.65rem; } .upload-description-field textarea { min-height:11rem; } .code-helper p { display:none; } .floating-code-helper .code-helper-action { flex:0 0 auto; } .upload-actions .btn { flex:1 1 0; min-width:0; } .upload-actions { position:fixed; left:0; right:0; bottom:0; display:flex; flex-direction:row; margin:0; padding:.75rem .85rem calc(.75rem + env(safe-area-inset-bottom)); border-top:1px solid var(--divider); background:rgba(33,26,51,.96); backdrop-filter:blur(10px); } .upload-filebar { align-items:stretch; flex-direction:column; } }


.searchbar .regex-toggle input[type="checkbox"] { flex:0 0 auto; padding:0; background:initial; border:initial; box-shadow:none; }


.has-search .grid { grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr)); gap: 1.25rem; }
.has-search .plate-frame { aspect-ratio: 16 / 10; max-height: 17rem; }


/* The search area leads the inventory page. */
.topbar { display:flex; align-items:center; justify-content:space-between; padding:.75rem clamp(1rem,3vw,2rem); }
.topbar-nav { margin-left:auto; }
.page { width:min(100%, 1640px); margin-inline:auto; padding-top:clamp(1.25rem,3vw,2.5rem); }
.search-hero { padding:clamp(1.5rem,4vw,3.5rem); margin-bottom:clamp(1.5rem,3vw,2.5rem); border:1px solid var(--border-quiet); border-radius:var(--radius-lg); background:linear-gradient(125deg,rgba(74,78,143,.26),rgba(33,26,51,.94) 55%),var(--surface); box-shadow:var(--shadow-2); }
.search-hero-intro { margin-bottom:1.5rem; }
.search-eyebrow { margin:0 0 .35rem; color:var(--accent-strong); font-size:var(--step--1); font-weight:700; letter-spacing:.12em; }
.search-hero h1 { font-size:clamp(1.75rem,2.5vw,2.6rem); margin-bottom:.5rem; }
.search-hero-intro > p:last-child { color:var(--text-muted); margin:0; }
.search-hero .searchbar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.75rem 1rem; width:100%; max-width:none; padding:0; margin:0; background:transparent; border:0; border-radius:0; box-shadow:none; }
.search-hero .searchbar:focus-within { border:0; box-shadow:none; }
.search-hero .searchbar input[type="text"] { grid-column:1; grid-row:1; min-height:4.4rem; padding:.9rem 1.25rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); box-shadow:var(--shadow-1); font-size:clamp(1.1rem,1.5vw,1.4rem); }
.search-hero .searchbar input[type="text"]:focus { border-color:var(--accent-strong); box-shadow:var(--focus-ring); }
.search-hero .searchbar .btn { grid-column:2; grid-row:1; min-height:4.4rem; min-width:7rem; font-size:var(--step-1); }
.search-hero .regex-toggle { grid-column:1/-1; grid-row:2; justify-self:start; padding:.2rem .35rem; }
.page-head { align-items:center; }
.page-head h2 { font-size:var(--step-2); }
.grid, .has-search .grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2rem; }
.grid .plate-frame, .has-search .plate-frame { aspect-ratio:16/10; max-height:16rem; }
@media (max-width:1250px) { .grid, .has-search .grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px) { .grid, .has-search .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .topbar { align-items:flex-start; } .search-hero .searchbar { grid-template-columns:1fr; } .search-hero .searchbar input[type="text"] { grid-column:1; grid-row:1; } .search-hero .searchbar .btn { grid-column:1; grid-row:2; width:100%; min-height:3.25rem; } .search-hero .regex-toggle { grid-column:1; grid-row:3; } .grid, .has-search .grid { grid-template-columns:1fr; } }


/* Account security and keyboard guide */
.account-page { flex:1 1 auto; width:100%; display:flex; justify-content:center; }
.account-shell { width:min(100%,48rem); margin-inline:auto; }
.account-head { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.9rem; margin-bottom:2rem; }
.account-head h1 { font-size:clamp(1.8rem,2.5vw,2.5rem); }
.account-head .who { justify-content:center; margin:0; gap:.55rem; }
.account-head .who span { display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--border-quiet); background:var(--surface); border-radius:999px; padding:.3rem .8rem; }
.account-shell .stack { width:100%; max-width:none; margin-inline:auto; }
.account-shell .card { padding:clamp(1.25rem,3vw,2rem); border-color:var(--border-quiet); box-shadow:var(--shadow-1); }
.account-shell .card > h2 { font-size:var(--step-1); }
.account-shell .card-actions { justify-content:flex-start; }
.account-shell .notice { width:100%; }
.shortcut-page { flex:1 1 auto; width:100%; }
.shortcut-shell { width:min(100%,48rem); margin-inline:auto; }
.shortcut-intro { text-align:center; margin:1rem 0 2rem; }
.shortcut-intro h1 { font-size:clamp(1.8rem,2.5vw,2.5rem); margin-bottom:.5rem; }
.shortcut-intro > p:last-child { color:var(--text-muted); margin-inline:auto; }
.shortcut-card { background:var(--surface); border:1px solid var(--border-quiet); border-radius:var(--radius-lg); padding:1.5rem clamp(1rem,3vw,2rem); margin-bottom:1rem; box-shadow:var(--shadow-1); }
.shortcut-card h2 { font-size:var(--step-1); margin-bottom:.5rem; }
.shortcut-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0; border-top:1px solid var(--divider); }
.shortcut-row > span:first-child { color:var(--text); }
.key-combo { display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; color:var(--text-muted); }
.key-combo kbd { display:inline-flex; align-items:center; justify-content:center; min-width:2rem; padding:.2rem .55rem; border:1px solid var(--border); border-bottom-width:3px; border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text); font:600 var(--step--1) var(--data); }
.shortcut-note { color:var(--text-muted); text-align:center; font-size:var(--step--1); margin:1.5rem auto 0; }
@media (max-width:560px) { .account-head .who { gap:.4rem; } .shortcut-row { align-items:flex-start; flex-direction:column; gap:.5rem; } }


/* Product descriptions are always shown in full. */