/* ══════════════════════════════════════════════════════════════════════════
   组件与布局 —— 建在 tokens.css 的变量之上。
   设计稿里大量样式是行内写死的；这里把重复出现的那些收成类，
   行为不变，但改一处就全站生效 —— 这是「以后要变成真系统」的前提。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 通用原子 ── */
.kicker {
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent);
}
.kicker-sm { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); }
.muted { color: var(--color-neutral-600); }
.num { font-variant-numeric: tabular-nums; }
.hint { font-size: 12px; color: var(--color-neutral-600); }
.note-box {
  border: 1px solid var(--color-divider); padding: 13px;
  font-size: 12px; line-height: 1.7; color: var(--color-neutral-800);
}
.note-box.dashed { border-style: dashed; border-color: var(--color-accent-400); color: var(--color-neutral-700); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.spread { display: flex; justify-content: space-between; align-items: center; }

/* ── blueprint 框：四角定位标记，工业风的签名 ── */
.blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

/* ── 按钮 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* ── 表单 ── */
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
/* 只读展示格：设计稿里用 .input 的外观装静态文本 */
.input-static { display: flex; align-items: center; }

/* ── 标签 ── */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* ── 表格 ── */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
  white-space: nowrap;
}
.table td { padding: var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.table-scroll { overflow-x: auto; }

/* ── 顶栏：三个 surface 的切换 ── */
.appbar {
  display: flex; align-items: center; gap: 26px;
  padding: 12px 28px; border-bottom: 1px solid var(--color-divider);
  flex-wrap: wrap;
}
.appbar-brand { margin-right: auto; }
.appbar-brand .name { font-family: var(--font-heading); font-size: 19px; letter-spacing: -0.01em; }
.appbar-brand .en { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent); }
.appbar-who { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--color-neutral-600); }
.dot-accent { width: 6px; height: 6px; background: var(--color-accent); display: block; }

/* ── 分段选择器（通用）：设计稿里反复出现的「一排格子，选中反白」── */
.seg { display: flex; border: 1px solid var(--color-divider); }
.seg > .opt {
  padding: 7px 18px; cursor: pointer; text-align: center;
  border-left: 1px solid var(--color-divider);
  background: transparent; color: var(--color-text);
  font: inherit;
}
.seg > .opt:first-child { border-left: 0; }
.seg > .opt.on { background: var(--color-accent); color: var(--color-bg); }
.seg > .opt:not(.on):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg > .opt .lb { font-family: var(--font-heading); font-size: 14px; line-height: 1.1; }
.seg > .opt .en { font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.seg-sm > .opt { padding: 6px 14px; font-size: 12px; }
.seg-fill { width: 100%; }
.seg-fill > .opt { flex: 1; min-width: 0; }

/* ── 浏览器外框（住户网页的取景框）── */
.browser { background: var(--color-neutral-100); padding: 10px; max-width: 100%; }
.browser-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 0 2px 8px; font-size: 10px; color: var(--color-neutral-600);
}
.browser-dots { display: flex; gap: 4px; }
.browser-dots span { width: 7px; height: 7px; border: 1px solid var(--color-neutral-400); display: block; }
.browser-url {
  flex: 1; border: 1px solid var(--color-divider); padding: 2px 8px;
  background: var(--color-bg); font-variant-numeric: tabular-nums;
}
.browser-page { background: var(--color-bg); border: 1px solid var(--color-divider); min-height: 640px; }

/* ── 住户站点头与区块导航 ── */
.site-head { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--color-divider); flex-wrap: wrap; }
.site-nav { display: flex; border-bottom: 1px solid var(--color-divider); overflow-x: auto; }
.site-nav .opt {
  padding: 9px 14px; cursor: pointer; white-space: nowrap;
  border-right: 1px solid var(--color-divider); border-bottom: 2px solid transparent;
  background: transparent; color: var(--color-text); font: inherit; text-align: left;
}
.site-nav .opt.on { border-bottom-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-800); }
.site-nav .opt:not(.on):hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.site-nav .opt .lb { font-family: var(--font-heading); font-size: 14px; line-height: 1.1; }
.site-nav .opt .en { font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-500); }

/* ── 进度条（配额、目标区间、分项得分共用）── */
.meter { height: 5px; background: var(--color-neutral-200); }
.meter > i { display: block; height: 100%; background: var(--color-accent); }
.meter.over > i { background: var(--color-accent-800); }
.meter-sm { height: 4px; }

/* ── 菜品卡（点餐）── */
.dish {
  position: relative; border: 1px solid var(--color-divider);
  padding: 9px 9px 7px; min-height: 104px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.dish.on::after { content: ""; position: absolute; inset: -1px; border: 2px solid var(--color-accent); pointer-events: none; }
.dish .nm { font-family: var(--font-heading); font-size: 15px; line-height: 1.15; }
.dish .en { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-500); }
.dish .meta { font-size: 10px; color: var(--color-neutral-600); margin-top: 4px; }
.stepper { display: flex; align-items: center; margin-left: auto; border: 1px solid var(--color-divider); }
.stepper button {
  width: 24px; height: 23px; display: grid; place-items: center; cursor: pointer;
  font-size: 14px; border: 0; background: transparent; color: var(--color-neutral-700); font-family: inherit;
}
.stepper button.plus { background: var(--color-accent-100); color: var(--color-accent-800); }
.stepper button:hover { filter: brightness(0.95); }
.stepper .n {
  width: 24px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--color-divider); border-right: 1px solid var(--color-divider);
}

/* ── 识别结果格（餐盘）── */
.plate-cell {
  position: relative; border: 1px solid var(--color-neutral-400); min-height: 72px; padding: 6px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--color-neutral-100);
}
.plate-cell .box { font-size: 8px; letter-spacing: 0.09em; color: var(--color-accent-700); }
.plate-cell .nm { font-family: var(--font-heading); font-size: 13px; line-height: 1.1; }
.plate-cell .conf { font-size: 9px; color: var(--color-neutral-600); }
.plate-cell.flagged::before { content: ""; position: absolute; inset: -2px; border: 2px dashed var(--color-accent); }
.plate-cell.flagged::after {
  content: "FLAG"; position: absolute; top: -9px; right: -2px;
  background: var(--color-accent); color: var(--color-bg);
  font-size: 8px; padding: 1px 5px; letter-spacing: 0.08em;
}

/* ── 开关（大屏公开范围）── */
.switch {
  width: 36px; height: 19px; border: 1px solid var(--color-accent);
  display: flex; padding: 2px; flex: none; justify-content: flex-start;
}
.switch > i { display: block; width: 13px; background: var(--color-neutral-400); }
.switch.on { justify-content: flex-end; }
.switch.on > i { background: var(--color-accent); }
.switch-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 11px; border-bottom: 1px solid var(--color-divider); cursor: pointer;
  background: transparent; border-left: 0; border-right: 0; border-top: 0; width: 100%; font: inherit; text-align: left;
}
.switch-row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* ── 忌口 chip ── */
.chip {
  font-size: 12px; padding: 5px 11px; cursor: pointer;
  border: 1px solid var(--color-divider); background: transparent; color: var(--color-text);
  font-family: inherit;
}
.chip.on { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-bg); }

/* ── 后台侧栏 ── */
.admin { display: grid; grid-template-columns: 238px 1fr; min-height: calc(100vh - 56px); }
.admin-side { border-right: 1px solid var(--color-divider); padding: 20px 0; }
.admin-side .opt {
  display: block; width: 100%; text-align: left; padding: 9px 20px; cursor: pointer;
  border: 0; border-left: 2px solid transparent; background: transparent; color: var(--color-text); font: inherit;
}
.admin-side .opt.on { border-left-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-800); }
.admin-side .opt:not(.on):hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.admin-side .opt .lb { font-size: 14px; }
.admin-side .opt .en { font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-neutral-500); }
.admin-main { padding: 24px 30px 60px; min-width: 0; }

/* ── 暗屏（餐台识别屏 / 公共大屏）── */
.screen-dark { background: var(--color-accent-900); }
.screen-inner { color: var(--color-bg); display: flex; flex-direction: column; }
.screen-inner .hd {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid rgba(242, 242, 243, 0.3); padding-bottom: 8px;
}
.screen-row {
  display: grid; gap: 10px; align-items: center; padding: 6px 0;
  border-top: 1px solid rgba(242, 242, 243, 0.15); font-size: 13px;
}
.screen-head-row {
  display: grid; gap: 10px; font-size: 10px; letter-spacing: 0.1em; opacity: 0.6; padding: 10px 0 4px;
}
.screen-foot { margin-top: auto; font-size: 11px; opacity: 0.6; }
.kiosk-cell { position: relative; border: 1px solid rgba(242, 242, 243, 0.35); padding: 5px 7px; }
.kiosk-cell.flagged::after { content: ""; position: absolute; inset: -2px; border: 2px dashed var(--color-accent-300); }

/* ── 规格说明侧栏 ── */
.spec-side { padding: 22px 22px 60px; border-left: 1px solid var(--color-divider); min-height: calc(100vh - 56px); }
.spec-item { padding: 11px 0; border-bottom: 1px solid var(--color-divider); }
.spec-item .t { font-family: var(--font-heading); font-size: 14px; margin-bottom: 3px; }
.spec-item .d { font-size: 12px; line-height: 1.6; color: var(--color-neutral-700); }

/* ── 窄屏：住户网页切到手机 viewport 时，外层布局也要让位 ── */
@media (max-width: 1100px) {
  .web-layout { grid-template-columns: 1fr !important; }
  .spec-side { border-left: 0; border-top: 1px solid var(--color-divider); min-height: 0; }
  .admin { grid-template-columns: 1fr; }
  .admin-side { border-right: 0; border-bottom: 1px solid var(--color-divider); }
  .kiosk-layout { grid-template-columns: 1fr !important; }
}