/*
  PDA 快递入库 - 样式表
  ====================
  - 浅色主题（color-scheme: light），与 scan-test.html 的深色主题独立
  - 字体：DM Mono（等宽，单号/标签）+ Manrope（西文正文）+ Noto Sans SC（中文）
  - 与 index.html + pda.js 配合；class 名与 pda.js 操作的 DOM 一一对应
  - 关键模块（与 index.html 各区块对应）：
    .app-shell 容器 / .topbar 顶部栏 / .notice 状态条
    .scan-panel 入库扫描面板 / .record-list 快件列表
    .task-dialog 通用对话框（入库/验货/实时扫码/拍照识别/结果）
    .toast 轻提示 / .spinner 旋转动画 / .is-loading 按钮 loading 态
  - 关键约定：
    .button.is-loading 通过 ::after 伪元素显示旋转 spinner，文字隐藏
    .notice + .notice-success/.notice-error 三态色
    .badge + .badge-idle/.running/.ok/.fail 状态徽章（仅自检页用）
@import url('https://font s.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');
*/
@import url('js/css2.css');

/* 设计令牌：颜色 + 圆角 + 字体栈 */
:root {
  color-scheme: light;
  --ink: #172823;
  --muted: #72817a;
  --line: #dfe7e2;
  --surface: #fff;
  --canvas: #f0f5f1;
  --green: #12664d;
  --green-dark: #133b34;
  --mint: #d9eee2;
  --amber: #a46518;
  --blue: #345f8c;
  --red: #a84035;
  --radius: 8px;
  font-family: 'Manrope', 'Noto Sans SC', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/* 全局重置 + body 背景（带圆点纹理） */
* { box-sizing: border-box; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--canvas) radial-gradient(#d9e3dd 0.7px, transparent 0.7px) 0 0 / 17px 17px;
}
button, input { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

/* ---------- 应用骨架 + 顶部栏 ---------- */
.app-shell { width: min(100%, 760px); min-height: 100vh; margin: 0 auto; padding: 0 22px 22px; background: rgba(249, 251, 249, .94); box-shadow: 0 0 50px rgba(27, 53, 42, .06); }
.topbar { height: 56px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; color: #f5fbf6; background: var(--green-dark); border-radius: 8px 8px 8px 2px; font-size: 18px; font-weight: 800; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 13px; font-weight: 800; }
.brand small { margin-top: 1px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 9px; }
/* 连接指示器：pda.js setConnection 切 .online/.error，控制 i 圆点颜色 */
.connection { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.connection i { width: 7px; height: 7px; background: #a7b4ae; border-radius: 50%; }
.connection.online i { background: #299568; box-shadow: 0 0 0 3px #d9eee2; }
.connection.error i { background: #ca5546; }

/* ---------- 排版基础 + 状态条 ---------- */
.eyebrow { margin: 0 0 5px; color: var(--green); font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500; }
h1, h2, h3, p { margin-top: 0; }

/* 状态条：pda.js setNotice(message, tone) 切 .success/.error 控制三态色 */
.notice { display: flex; align-items: flex-start; gap: 9px; margin: 13px 0 0; padding: 10px 12px; border: 1px solid #dce7df; border-radius: 6px; color: #52635b; background: #f7faf7; font-size: 11px; line-height: 1.6; }
.notice.success { border-color: #c9e3d3; color: #285f46; background: #eff8f1; }
.notice.error { border-color: #efd1cc; color: #8f392e; background: #fff6f4; }
.notice-icon { display: grid; place-items: center; width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; border: 1px solid currentColor; border-radius: 50%; font-family: 'DM Mono', monospace; font-size: 9px; }

/* 入库扫描面板 */
.scan-panel { margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.scan-panel > label { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 800; }
.scan-row { display: flex; align-items: center; gap: 9px; height: 52px; padding: 0 9px 0 13px; border: 1px solid #cfdcd3; border-radius: 7px; background: #fbfdfb; }
.scan-row:focus-within { border-color: #55a17e; box-shadow: 0 0 0 3px rgba(18, 102, 77, .1); }
.scan-glyph { color: var(--green); font-family: 'DM Mono', monospace; font-size: 26px; line-height: 1; }
.scan-row input { flex: 1; min-width: 0; height: 40px; padding: 0 4px; border: 1px solid transparent; outline: none; background: transparent; font-family: 'DM Mono', 'Noto Sans SC', monospace; font-size: 14px; }
.scan-row input::placeholder { color: #9aa8a1; font-family: 'Noto Sans SC', sans-serif; font-size: 12px; }
.scan-buttons { display: flex; gap: 8px; margin-top: 10px; }
.scan-buttons .button { flex: 1; }

/* 按钮 */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; gap: 7px; padding: 0 15px; border: 1px solid transparent; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .16s ease, border-color .16s ease; }
.button:disabled { opacity: .5; cursor: wait; }
.button-dark { color: #fff; background: var(--green-dark); }
.button-dark:hover:not(:disabled) { background: #205448; }
.button-green { color: #fff; background: var(--green); }
.button-green:hover:not(:disabled) { background: #0d563f; }
.button-outline { color: var(--green-dark); border-color: #cddbd2; background: #fff; }
.button-outline:hover:not(:disabled) { background: #f1f7f3; }
.button-small { min-height: 34px; padding: 0 11px; font-size: 11px; }
.full-button { width: 100%; min-height: 46px; margin-top: 14px; }

/* ---------- 快递信息列表 ---------- */
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.section-heading h2 { margin: 0; font-size: 14px; font-weight: 800; }
.list-heading { margin: 19px 0 10px; }
.filter-buttons { display: flex; gap: 6px; }
.filter-btn { padding: 5px 10px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 700; cursor: pointer; }
.filter-btn.active { color: #fff; background: var(--green-dark); border-color: var(--green-dark); }
.record-list { display: grid; gap: 8px; }
.record-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.record-main { min-width: 0; flex: 1 1 auto; }
.record-main strong, .record-main span { display: block; overflow-wrap: anywhere; }
.record-main strong { font-family: 'DM Mono', monospace; font-size: 12px; }
.record-main span { margin-top: 5px; color: var(--muted); font-size: 9px; }
/* 列表照片：单号下方大图展示，多图自动换行（每张 200×200） */
.record-photo-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.record-photo-grid img { width: 200px; height: 200px; border: 1px solid var(--line); border-radius: 5px; object-fit: cover; background: #f6f8f7; }
.record-side { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; max-width: 46%; gap: 8px; }
/* 列表备注：右侧单行省略，完整内容看详情 */
.record-note { max-width: 100%; color: var(--muted); background: #f5f5f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-status-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* 状态徽章：received/inspected/shipped/packed 四态色 */
.status-pill { flex: 0 0 auto; padding: 5px 8px; border-radius: 4px; color: #236447; background: #e7f4eb; font-size: 10px; font-weight: 700; white-space: nowrap; }
.status-received { color: var(--amber); background: #fff5e4; }
.status-inspected { color: var(--blue); background: #edf4fb; }
.status-shelved { color: #6b3fa0; background: #f1eaf8; }
.status-unshelved { color: #b03030; background: #fbe9e9; }
.status-shipped { color: #236447; background: #e7f4eb; }
.status-send { color: #1f6b66; background: #e6f5f3; }
.status-sended { color: #1f6b66; background: #e6f5f3; }
.status-packed { color: #944e3f; background: #fff0e9; }
.saved-photo-strip { display: flex; flex-wrap: wrap; gap: 4px; }
.saved-photo-strip img { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 4px; object-fit: cover; }
.empty-state { padding: 22px 12px; color: #8b9891; border: 1px dashed #dbe4de; border-radius: 6px; font-size: 11px; text-align: center; }
.empty-inline { align-self: center; color: #98a59e; font-size: 10px; }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 19px; cursor: pointer; }
.load-more-hint { text-align: center; padding: 12px; color: var(--muted); font-size: 10px; }

/* ---------- 通用对话框骨架 ---------- */
.task-dialog { width: min(460px, calc(100vw - 28px)); max-height: min(88vh, 760px); overflow-y: auto; padding: 17px; border: 1px solid var(--line); border-radius: 9px; background: #f9fbf9; box-shadow: 0 18px 60px rgba(10, 30, 20, .24); }
.task-dialog::backdrop { background: rgba(14, 31, 25, .62); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dialog-head strong { font-size: 16px; }
.dialog-head .eyebrow { margin-bottom: 2px; }
.dialog-kdsn { margin: 12px 0 2px; color: #53645c; font-family: 'DM Mono', monospace; font-size: 12px; overflow-wrap: anywhere; }
.dialog-copy { margin: 15px 0 4px; color: #56675f; font-size: 12px; line-height: 1.7; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; }
.file-picker { position: relative; overflow: hidden; }
.file-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.scan-capture-input { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.photo-preview { display: flex; flex-wrap: wrap; gap: 8px; min-height: 38px; margin-top: 12px; }
.preview-item { position: relative; width: 66px; height: 66px; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #edf2ee; }
.preview-item img { width: 100%; height: 100%; object-fit: cover; }
.remove-photo { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 19px; height: 19px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(22, 39, 35, .8); font-size: 14px; cursor: pointer; }
.scan-captured-preview { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.scan-captured-preview .preview-item { width: 80px; height: 80px; }
.field { display: block; margin-top: 12px; }
.field > input, .field > textarea, .field > select { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 13px; outline: none; }
.field > input:focus, .field > textarea:focus, .field > select:focus { border-color: var(--green); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-row .field { margin-top: 0; }

/* ---------- 拍照识别中对话框 ---------- */
#decodingDialog { text-align: center; }
.decoding-content { display: grid; gap: 14px; padding: 10px 0; }
.decoding-image-frame { position: relative; width: 100%; touch-action: auto; }
.decoding-image-frame.is-cropping { cursor: crosshair; touch-action: none; }
.decoding-content img { display: block; width: 100%; max-height: 300px; object-fit: contain; border-radius: 6px; border: 1px solid var(--line); }
.decoding-crop-selection { position: absolute; z-index: 1; border: 2px solid #d84a31; background: rgba(216, 74, 49, .16); pointer-events: none; }
.decoding-status { color: var(--green-dark); font-size: 13px; font-weight: 600; min-height: 18px; }
.decoding-spinner { display: grid; place-items: center; padding: 4px 0; min-height: 32px; }
.decoding-actions { margin-top: 18px; }
/* 旋转 spinner：8px 边框 + 上侧透明色，btn-spin 0.8s 旋转 */
.spinner { display: inline-block; width: 28px; height: 28px; border: 3px solid #cddbd2; border-top-color: var(--green); border-radius: 50%; animation: btn-spin .8s linear infinite; }

/* ---------- 按钮 loading 动画（setButtonLoading 切 .is-loading） ---------- */
.button.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.button.is-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: btn-spin .7s linear infinite; }
.button-dark.is-loading::after, .button-green.is-loading::after { border-color: #fff; border-top-color: transparent; }
.button-outline.is-loading::after { border-color: var(--green-dark); border-top-color: transparent; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- 结果弹窗的步骤标签 + 成功/失败色调 ---------- */
.dialog-step { margin: 12px 0 0; padding: 7px 11px; border-radius: 5px; background: #fff0ee; border: 1px solid #f0d3cc; color: var(--red); font-size: 11px; font-weight: 700; font-family: 'DM Mono', 'Noto Sans SC', monospace; }
.dialog-step.success { background: #eff8f1; border-color: #c9e3d3; color: #285f46; }
.eyebrow.eyebrow-error { color: var(--red); }
.eyebrow.eyebrow-success { color: #299568; }

/* ---------- 快件详情对话框 ---------- */
.detail-dialog { width: min(520px, calc(100vw - 28px)); }
.detail-body { display: grid; gap: 14px; margin-top: 14px; }
.detail-section { padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.detail-kdsn { margin: 0; font-family: 'DM Mono', monospace; font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.detail-note { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.detail-status-row { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-section-title { margin: 0 0 8px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.detail-photo-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-photo-strip img { width: 64px; height: 64px; border: 1px solid var(--line); border-radius: 5px; object-fit: cover; cursor: zoom-in; }
.detail-time-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed #eef2ef; font-size: 11px; }
.detail-time-row:last-child { border-bottom: 0; }
.detail-time-label { color: var(--muted); flex: 0 0 auto; }
.detail-time-value { font-family: 'DM Mono', 'Noto Sans SC', monospace; text-align: right; }

/* ---------- 验货对话框：订单商品信息（openInspection → loadInspectGoodsInfo 渲染） ---------- */
.inspect-goods { margin-top: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.goods-row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #eef2ef; }
.goods-row:last-child { padding-bottom: 0; border-bottom: 0; }
.goods-thumb { display: grid; place-items: center; width: 64px; height: 64px; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #edf2ee; color: var(--muted); font-size: 10px; }
.goods-thumb img { width: 100%; height: 100%; object-fit: cover; }
.goods-info { min-width: 0; flex: 1 1 auto; }
.goods-name { margin: 0; font-size: 11px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.goods-meta { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.goods-hint { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }

/* ---------- 页脚 + 轻提示 toast ---------- */
.app-footer { display: flex; justify-content: space-between; margin-top: 18px; padding: 14px 0 0; border-top: 1px solid var(--line); color: #8b9891; font-family: 'DM Mono', 'Noto Sans SC', monospace; font-size: 9px; }
/* toast：默认隐藏，加 .show 显示；transform/opacity 过渡 */
.toast { position: fixed; z-index: 5; right: 50%; bottom: max(20px, env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); padding: 11px 15px; transform: translate(50%, 15px); opacity: 0; pointer-events: none; border-radius: 6px; color: #fff; background: #203d34; font-size: 11px; transition: opacity .2s ease, transform .2s ease; }
.toast.show { transform: translate(50%, 0); opacity: 1; }

/* view 进入动画（每个 .section 视图块淡入上移） */
@keyframes enter { from { transform: translateY(5px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.view { animation: enter .22s ease-out both; }

/* ---------- 实时扫码对话框（深色全屏，独占样式） ---------- */
.live-scan-dialog { max-width: 420px; padding: 0; border: 0; border-radius: 12px; background: #000; }
.live-scan-dialog::backdrop { background: rgba(0,0,0,.85); }
.live-scan-dialog .dialog-head { padding: 14px 16px; color: #fff; background: rgba(0,0,0,.4); border-radius: 12px 12px 0 0; }
.live-scan-dialog .dialog-head .eyebrow { color: rgba(255,255,255,.5); }
.live-scan-dialog .dialog-head strong { color: #fff; }
.live-scan-dialog .dialog-head .icon-button { color: #fff; }
/* 取景容器：video + 扫码框 overlay，overlay 绝对定位在容器中央 */
.live-scan-viewport { position: relative; overflow: hidden; background: #000; }
.live-scan-viewport video { display: block; width: 100%; max-height: 60vh; object-fit: cover; background: #000; }
/* 中央扫码框：上下 32.5% 留白、高 35%，与 pda.js grabCenterBand 的中央条带裁剪范围一致 */
.live-scan-frame { position: absolute; left: 4%; right: 4%; top: 32.5%; height: 35%; border: 1px solid rgba(255,255,255,.25); border-radius: 8px; box-shadow: 0 0 0 999px rgba(0,0,0,.25); pointer-events: none; }
.live-scan-frame .corner { position: absolute; width: 20px; height: 20px; border: 3px solid #4ade80; }
.live-scan-frame .corner-tl { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.live-scan-frame .corner-tr { top: -2px; right: -2px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.live-scan-frame .corner-bl { bottom: -2px; left: -2px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.live-scan-frame .corner-br { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
/* 扫描线动画：在框内上下往复，提示识别区域 */
.live-scan-frame .scan-line { position: absolute; left: 3%; right: 3%; top: 8%; height: 2px; background: linear-gradient(90deg, transparent, #4ade80, transparent); box-shadow: 0 0 8px rgba(74,222,128,.8); animation: liveScanLine 2.2s ease-in-out infinite; }
@keyframes liveScanLine { 0%, 100% { top: 8%; } 50% { top: 90%; } }
.live-scan-hint { margin: 0; padding: 14px 16px; text-align: center; color: rgba(255,255,255,.7); font-size: 13px; background: #000; border-radius: 0 0 12px 12px; }

/* ---------- 打包出库对话框 / 打包记录列表页 ---------- */
/* 列表标题右侧操作区：筛选按钮 + 打包出库按钮 */
.list-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* 已打包快件的标记（列表行右侧） */
.record-bundle { color: var(--muted); background: #eef2f0; }
/* 打包出库对话框：可选快件多选区 */
.bundle-dialog { width: min(560px, calc(100vw - 28px)); }
.bundle-parcel-picker { display: grid; gap: 6px; max-height: 230px; margin-top: 10px; padding: 8px; overflow: auto; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.bundle-pick-hint { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.bundle-parcel-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.bundle-parcel-item input { flex: 0 0 auto; width: 16px; height: 16px; }
.bundle-parcel-info { display: grid; gap: 2px; min-width: 0; }
.bundle-parcel-info strong { font-family: 'DM Mono', 'Noto Sans SC', monospace; font-size: 12px; overflow-wrap: anywhere; }
.bundle-parcel-info span { color: var(--muted); font-size: 10px; }
.bundle-pick-toolbar { display: flex; gap: 6px; margin: 0 0 4px; }
/* 打包记录列表页（bundles.html） */
.bundle-list { display: grid; gap: 12px; margin-top: 8px; }
.bundle-card { display: grid; gap: 9px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.bundle-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bundle-card-head strong { font-family: 'DM Mono', 'Noto Sans SC', monospace; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.bundle-meta-row { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.bundle-section { display: grid; gap: 6px; padding-top: 8px; border-top: 1px dashed #eef2ef; }
.bundle-photo-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.bundle-photo-grid img { width: 96px; height: 96px; border: 1px solid var(--line); border-radius: 5px; object-fit: cover; }
.bundle-parcel-tags { display: flex; flex-wrap: wrap; gap: 5px; }

/* ---------- 响应式 + 无障碍 ---------- */
@media (max-width: 520px) {
  .app-shell { padding-right: 15px; padding-left: 15px; }
  .scan-panel { padding: 13px; }
  .filter-buttons { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- 登录遮罩层 ---------- */
.login-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(135deg, #133b34 0%, #0d2a25 100%); }
.login-overlay.hidden { display: none; }
.login-card { width: min(380px, 100%); padding: 28px 24px 20px; border-radius: 12px; background: #fff; box-shadow: 0 24px 80px rgba(0,0,0,.35); }
.login-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.login-head .brand-mark { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--green-dark); color: #fff; font-weight: 800; font-size: 18px; }
.login-head strong { display: block; font-size: 15px; font-weight: 700; color: #122a24; }
.login-head .eyebrow { font-size: 10px; letter-spacing: .08em; color: #6b8478; margin-bottom: 2px; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-form .field input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; font-size: 14px; transition: border-color .15s; }
.login-form .field input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(13, 107, 77, .12); }
.login-submit { width: 100%; margin-top: 8px; min-height: 44px; font-size: 14px; letter-spacing: .15em; }
.login-error { margin: 2px 0 0; color: #c62828; font-size: 12px; padding: 8px 10px; background: #fff5f5; border-radius: 6px; border: 1px solid #ffd6d6; }
.login-hint { margin: 14px 0 0; font-size: 11px; color: #90a399; text-align: center; }