/* 豆时记 · 门店工作台设计系统（2.11）
   一层收口：颜色 / 字体 / 间距 / 圆角 / 组件，覆盖前面叠加的各代样式。电脑、平板、手机三档。
   拼豆的意象只用在两处：页头的钉板点阵、状态用的「豆子」圆环；其余保持安静、对齐、好点。 */

:root{
  --ui-font:"PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei UI","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
  --ui-paper:#f3f4f7;          /* 页面底 */
  --ui-surface:#ffffff;        /* 面板 */
  --ui-sunken:#f7f7fa;         /* 面板内的次级底 */
  --ui-ink:#1e1c29;            /* 正文 */
  --ui-ink-2:#454356;          /* 次级正文 */
  --ui-muted:#6e6c7d;          /* 说明文字（对白底 4.9:1） */
  --ui-line:#e3e3ea;           /* 分隔线 */
  --ui-line-strong:#cfcfda;
  --ui-brand:var(--purple,#6c4fd9);
  --ui-brand-ink:#fff;
  --ui-brand-soft:color-mix(in srgb,var(--ui-brand) 10%,#fff);
  --ui-brand-line:color-mix(in srgb,var(--ui-brand) 28%,#fff);
  /* 状态豆色 */
  --bead-free:#9aa0ab; --bead-busy:var(--ui-brand); --bead-booked:#3b82e8; --bead-soon:#e09a12; --bead-over:#e04848; --bead-clean:#b25bc9; --bead-fix:#7a808c; --bead-ok:#22a06b;
  --ui-r-panel:16px; --ui-r-ctl:10px; --ui-r-pill:999px;
  --ui-h-ctl:40px; --ui-h-sm:32px;
  --ui-shadow-pop:0 12px 32px rgba(30,28,41,.14),0 2px 6px rgba(30,28,41,.06);
  --ui-focus:0 0 0 3px color-mix(in srgb,var(--ui-brand) 30%,transparent);
  --ui-gap:16px;
}
@media (pointer:coarse){:root{--ui-h-ctl:44px;--ui-h-sm:36px}}

/* ---------- 基础 ---------- */
html body,#app .shell{font-family:var(--ui-font);color:var(--ui-ink);-webkit-font-smoothing:antialiased}
#app .shell{background:var(--ui-paper)}
#app .shell .main,#app .shell .page{background:transparent;background-image:none}
#app .shell strong,#app .shell h1,#app .shell h2,#app .shell h3{color:var(--ui-ink)}
#app .shell :is(#beijing-clock,.clock-digits,.service-summary strong,.deposit-stats strong,.history-summary strong,.timer,.ticket strong){font-variant-numeric:tabular-nums}
#app .shell :focus-visible{outline:none;box-shadow:var(--ui-focus)}

/* ---------- 侧栏（电脑） ---------- */
#app .shell .sidebar{background:var(--ui-surface);border-right:1px solid var(--ui-line);box-shadow:none;backdrop-filter:none}
#app .shell .sidebar .store-brand{padding:4px 6px 14px;border-bottom:1px solid var(--ui-line);margin-bottom:10px}
#app .shell .sidebar .store-brand strong{font-size:16px;font-weight:700;letter-spacing:0}
#app .shell .sidebar .store-brand small{font-size:12px;color:var(--ui-muted)}
#app .shell .sidebar nav{gap:2px}
#app .shell .sidebar .nav-item{position:relative;min-height:42px;border-radius:var(--ui-r-ctl);color:var(--ui-ink-2);font-size:15px;font-weight:500;background:transparent;border:0;box-shadow:none}
#app .shell .sidebar .nav-item svg{color:var(--ui-muted);width:20px;height:20px}
#app .shell .sidebar .nav-item:hover{background:var(--ui-sunken);color:var(--ui-ink)}
#app .shell .sidebar .nav-item.active{background:var(--ui-brand-soft);color:var(--ui-brand);font-weight:600}
#app .shell .sidebar .nav-item.active svg{color:var(--ui-brand)}
#app .shell .sidebar .nav-indicator{display:none}
#app .shell .sidebar .sidebar-bottom{border-top:1px solid var(--ui-line);padding-top:10px}
#app .shell .sidebar .store-user .avatar{background:var(--ui-brand-soft);color:var(--ui-brand);font-weight:700}
#app .shell .sidebar-toggle{border:1px solid var(--ui-line);background:var(--ui-surface);box-shadow:none;color:var(--ui-muted)}
#app .shell #access-logout{border:1px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-ink-2);box-shadow:none;border-radius:var(--ui-r-ctl);font-weight:500}

/* ---------- 页头：标题 · 状态与时间 · 操作，一行收齐 ---------- */
#app .shell .ui-heading{
  position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"text tools actions";align-items:center;gap:12px 20px;
  margin:0 0 var(--ui-gap);padding:18px 22px;border:1px solid var(--ui-line);border-radius:var(--ui-r-panel);
  background:var(--ui-surface);-webkit-mask:none;box-shadow:none;min-height:0;overflow:hidden
}
/* 钉板：右侧一片淡淡的点阵，像一块空拼豆板，从左往右渐显 */
#app .shell .ui-heading::after{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;width:min(46%,560px);pointer-events:none;
  background-image:radial-gradient(circle,var(--ui-line-strong) 1.5px,transparent 2px);background-size:14px 14px;background-position:right 3px top 3px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%);opacity:.7}
#app .shell .ui-heading::before{content:none}
#app .shell .ui-heading>div:first-child{grid-area:text;min-width:0}
#app .shell .ui-heading .eyebrow{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:12px;font-weight:500;color:var(--ui-muted);letter-spacing:0;text-transform:none}
#app .shell .ui-heading .eyebrow svg{width:15px;height:15px}
#app .shell .ui-heading h1{margin:0;font-size:24px;line-height:1.25;font-weight:700;letter-spacing:0;color:var(--ui-ink)}
#app .shell .ui-heading p{margin:4px 0 0;font-size:13.5px;line-height:1.55;color:var(--ui-muted);max-width:56ch}
#app .shell .ui-heading .operating-meta{display:flex;gap:10px;margin-top:6px;font-size:12.5px;color:var(--ui-muted)}
#app .shell .heading-tools{grid-area:tools;display:flex;align-items:center;gap:14px;position:static}
#app .shell .ui-heading :is(.shop-clock,.service-summary,.heading-actions,.heading-tools){position:relative;inset:auto;transform:none;float:none;opacity:1;visibility:visible}
#app .shell .ui-heading>div:first-child{display:block;width:auto;padding:0}
#app .shell .heading-tools #server-status{order:1;font-size:12.5px;color:var(--ui-muted);white-space:nowrap}
#app .shell .heading-tools #server-status:empty{display:none}
#app .shell .heading-tools .shop-clock{order:2;display:flex;flex-direction:column;align-items:flex-end;gap:0;padding:0;margin:0;background:none;border:0;box-shadow:none;min-width:0}
#app .shell .heading-tools .shop-clock span{font-size:11.5px;color:var(--ui-muted);letter-spacing:0}
#app .shell .heading-tools .shop-clock strong{font-size:22px;line-height:1.1;font-weight:650;color:var(--ui-ink);letter-spacing:.01em}
#app .shell .heading-tools .notification-btn{order:3}
#app .shell .heading-actions{grid-area:actions;display:flex;align-items:center;gap:10px;margin:0;position:static;inset:auto;transform:none;width:auto}
#app .shell .heading-actions:empty{display:none}
/* 营业页：概览数字占一列 */
#app .shell.view-desk .ui-heading{grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"text summary tools actions"}
#app .shell.view-desk .service-summary{grid-area:summary;display:flex;gap:4px;margin:0;padding:0;background:none;border:0;box-shadow:none}
#app .shell.view-desk .service-summary .summary-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:72px;padding:6px 12px;border-radius:12px;border:1px solid transparent;background:transparent;box-shadow:none}
#app .shell.view-desk .service-summary .summary-item:hover{background:var(--ui-sunken)}
#app .shell.view-desk .service-summary .summary-item.selected{border-color:var(--ui-brand-line);background:var(--ui-brand-soft)}
#app .shell.view-desk .service-summary .summary-item strong{font-size:24px;line-height:1.1;font-weight:700;color:var(--ui-ink)}
#app .shell.view-desk .service-summary .summary-item span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ui-muted)}
/* 豆子：概览每一项前面一颗对应状态色的空心豆 */
#app .shell.view-desk .service-summary .summary-item span::before{content:"";width:9px;height:9px;border-radius:50%;border:2.5px solid var(--bead,var(--bead-free));box-sizing:border-box;flex:none}
#app .shell.view-desk .service-summary .summary-item[data-value="active"]{--bead:var(--bead-busy)}
#app .shell.view-desk .service-summary .summary-item[data-value="free"]{--bead:var(--bead-free)}
#app .shell.view-desk .service-summary .summary-item.summary-soon{--bead:var(--bead-soon)}
#app .shell.view-desk .service-summary .summary-item.summary-due{--bead:var(--bead-over)}
#app .shell.view-desk .service-summary .summary-item[data-value="reserved"]{--bead:var(--bead-booked)}

/* ---------- 面板 ---------- */
#app .shell .panel{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r-panel);box-shadow:none;backdrop-filter:none}
#app .shell .panel-heading{border-bottom:1px solid var(--ui-line);background:transparent}
#app .shell .panel h2,#app .shell .panel-title{font-size:16px;font-weight:650;letter-spacing:0}
#app .shell .page-footer{margin-top:20px;padding:12px 2px;border-top:0;font-size:12px;color:var(--ui-muted)}
#app .shell .page-footer svg{color:var(--bead-ok)}

/* ---------- 按钮 ---------- */
#app .shell .btn{min-height:var(--ui-h-ctl);padding:0 16px;border-radius:var(--ui-r-ctl);font-size:14px;font-weight:600;letter-spacing:0;gap:8px;box-shadow:none;border:1px solid var(--ui-line-strong);background:var(--ui-surface);color:var(--ui-ink);transition:background-color .15s,border-color .15s,color .15s}
#app .shell .btn:hover{background:var(--ui-sunken);border-color:var(--ui-line-strong)}
#app .shell .btn.primary{background:var(--ui-brand);border-color:var(--ui-brand);color:var(--ui-brand-ink)}
#app .shell .btn.primary:hover{background:color-mix(in srgb,var(--ui-brand),black 10%);border-color:color-mix(in srgb,var(--ui-brand),black 10%)}
#app .shell .btn.outline{background:var(--ui-surface)}
#app .shell .btn.small{min-height:var(--ui-h-sm);padding:0 12px;font-size:13px}
#app .shell .btn:disabled{opacity:.45;cursor:not-allowed}
#app .shell .btn svg{width:18px;height:18px}
#app .shell .icon-btn{width:var(--ui-h-ctl);height:var(--ui-h-ctl);min-width:var(--ui-h-ctl);border-radius:var(--ui-r-ctl);border:1px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-ink-2);box-shadow:none}
#app .shell .icon-btn:hover{background:var(--ui-sunken)}
#app .shell .notification-dot{background:var(--bead-over);color:#fff;border:2px solid var(--ui-surface)}

/* ---------- 表单 ---------- */
#app .shell :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea){border:1px solid var(--ui-line-strong);border-radius:var(--ui-r-ctl);background:var(--ui-surface);color:var(--ui-ink);font:inherit;font-size:14px;box-shadow:none}
#app .shell :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select){min-height:var(--ui-h-ctl)}
#app .shell :is(input,select,textarea):focus{border-color:var(--ui-brand);box-shadow:var(--ui-focus);outline:none}
#app .shell ::placeholder{color:#a3a1b0}
#app .shell input[type=checkbox],#app .shell input[type=radio]{accent-color:var(--ui-brand)}
#app .shell .field-hint{font-size:12px;color:var(--ui-muted)}

/* ---------- 筛选条：同一种圆角胶囊 ---------- */
#app .shell :is(.deposit-filters,.number-filters) button,#app .shell .number-filter{min-height:var(--ui-h-sm);padding:0 14px;border-radius:var(--ui-r-pill);border:1px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-ink-2);font-size:13.5px;font-weight:500;box-shadow:none}
#app .shell :is(.deposit-filters,.number-filters) button:hover{border-color:var(--ui-line-strong)}
#app .shell :is(.deposit-filters,.number-filters) :is(button.active,button[aria-pressed=true]){background:var(--ui-ink);border-color:var(--ui-ink);color:var(--ui-surface)}
#app .shell .search-box,#app .shell .deposit-search{border:1px solid var(--ui-line-strong);border-radius:var(--ui-r-ctl);background:var(--ui-surface);min-height:var(--ui-h-ctl);box-shadow:none}
#app .shell .search-box input,#app .shell .deposit-search input{border:0!important;box-shadow:none!important;background:transparent!important;min-height:0!important}
#app .shell .view-switch{border:1px solid var(--ui-line);border-radius:var(--ui-r-ctl);background:var(--ui-sunken);padding:3px;box-shadow:none}
#app .shell .view-switch button{border-radius:8px;box-shadow:none}
#app .shell .view-switch button.selected{background:var(--ui-surface);box-shadow:0 1px 2px rgba(30,28,41,.12);color:var(--ui-ink)}

/* ---------- 统计块：数字大、标签小，左对齐 ---------- */
#app .shell .deposit-stats,#app .shell .history-summary{gap:12px}
#app .shell .deposit-stats>div,#app .shell .history-summary>.panel{display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:0;padding:14px 16px;border:1px solid var(--ui-line);border-radius:var(--ui-r-panel);background:var(--ui-surface);box-shadow:none}
#app .shell .deposit-stats span,#app .shell .history-summary span{font-size:12.5px;color:var(--ui-muted)}
#app .shell .deposit-stats strong,#app .shell .history-summary strong{font-size:26px;line-height:1.1;font-weight:700;color:var(--ui-ink);text-align:left}
#app .shell .history-summary strong small{font-size:13px;font-weight:500;color:var(--ui-muted);margin-left:3px}

/* ---------- 寄存卡片 ---------- */
#app .shell .deposit-card{border:1px solid var(--ui-line);border-radius:var(--ui-r-panel);background:var(--ui-surface);box-shadow:none}
#app .shell .deposit-card:hover{border-color:var(--ui-line-strong)}

/* ---------- 表格 ---------- */
#app .shell table thead th{background:var(--ui-sunken);color:var(--ui-muted);font-size:12.5px;font-weight:600;border-bottom:1px solid var(--ui-line)}
#app .shell table td{border-bottom:1px solid var(--ui-line)}

/* ---------- 空状态 ---------- */
#app .shell .empty-state{color:var(--ui-muted)}
#app .shell .empty-state strong,#app .shell .empty-state h3{color:var(--ui-ink);font-weight:600}

/* ---------- 弹窗 ---------- */
html dialog,html .modal-card,html .sheet{border-radius:18px}
html dialog::backdrop{background:rgba(30,28,41,.42)}


/* ============ 平板（≤1100px：图标栏） ============ */
@media (max-width:1100px) and (min-width:768px){
  #app .shell .sidebar .nav-item{flex-direction:column;justify-content:center;gap:3px;min-height:58px;font-size:12px;padding:6px 0}
  #app .shell .sidebar .nav-item span{font-size:12px;line-height:1.2}
  #app .shell .ui-heading{padding:16px 18px}
  #app .shell .ui-heading h1{font-size:22px}
  #app .shell .ui-heading p{display:none}
  #app .shell .heading-tools .shop-clock strong{font-size:20px}
  #app .shell.view-desk .ui-heading{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"text tools actions" "summary summary summary"}
  #app .shell.view-desk .service-summary{justify-content:flex-start;border-top:1px solid var(--ui-line);padding-top:10px}
}

/* ============ 手机（≤767px：底部导航） ============ */
@media (max-width:767px){
  #app .shell .ui-heading{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text tools" "actions actions";padding:14px 14px 12px;margin-bottom:12px;border-radius:14px;gap:10px 12px;}
  #app .shell .ui-heading h1{font-size:20px}
  #app .shell .ui-heading p,#app .shell .ui-heading .eyebrow{display:none}
  #app .shell .ui-heading .operating-meta{margin-top:4px}
  #app .shell .heading-tools{gap:8px}
  #app .shell .heading-tools #server-status{display:none}
  #app .shell .heading-tools .shop-clock span{display:none}
  #app .shell .heading-tools .shop-clock strong{font-size:17px;font-weight:650}
  #app .shell .heading-tools .notification-btn{width:36px;height:36px;min-width:36px}
  #app .shell .heading-actions{flex-wrap:wrap}
  #app .shell .heading-actions .btn{flex:1 1 0;min-width:0}
  #app .shell.view-desk .ui-heading{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text tools" "summary summary" "actions actions"}
  #app .shell.view-desk .service-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;border-top:1px solid var(--ui-line);padding-top:8px}
  #app .shell.view-desk .service-summary .summary-item{min-width:0;padding:4px 6px}
  #app .shell.view-desk .service-summary .summary-item strong{font-size:20px}
  #app .shell.view-desk .service-summary .summary-item span{font-size:11.5px;gap:4px}
  #app .shell.view-desk .service-summary .summary-item span::before{width:8px;height:8px;border-width:2px}
  /* 底部导航：白底、上边线，图标 22、文字 11，当前项品牌色 + 顶部一颗豆 */
  #app .shell .sidebar{background:color-mix(in srgb,var(--ui-surface) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-right:0;border-top:1px solid var(--ui-line)}
  #app .shell .sidebar .nav-item{flex-direction:column;justify-content:center;gap:3px;min-height:54px;padding:6px 0 4px;border-radius:12px;background:transparent!important;color:var(--ui-muted);font-size:11px}
  #app .shell .sidebar .nav-item span{font-size:11px;line-height:1.2;font-weight:500}
  #app .shell .sidebar .nav-item svg{width:22px;height:22px}
  #app .shell .sidebar .nav-item.active{color:var(--ui-brand)}
  #app .shell .sidebar .nav-item.active span{font-weight:650}
  #app .shell .sidebar .nav-item.active::before{content:"";position:absolute;top:2px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;border:2px solid var(--ui-brand);box-sizing:border-box}
  #app .shell .deposit-stats strong,#app .shell .history-summary strong{font-size:22px}
  #app .shell .deposit-stats>div,#app .shell .history-summary>.panel{padding:12px}
  #app .shell .page-footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* ============ 深色 ============ */
html[data-appearance='dark']{
  --ui-paper:#15141b; --ui-surface:#1e1d26; --ui-sunken:#24232e; --ui-ink:#ecebf3; --ui-ink-2:#c9c7d6; --ui-muted:#9a98aa;
  --ui-line:#2e2d3a; --ui-line-strong:#3c3a4a; --ui-brand-soft:color-mix(in srgb,var(--ui-brand) 22%,#1e1d26); --ui-brand-line:color-mix(in srgb,var(--ui-brand) 45%,#1e1d26);
}
html[data-appearance='dark'] #app .shell{background:var(--ui-paper)!important}
html[data-appearance='dark'] #app .shell :is(.sidebar,.panel,.ui-heading,.deposit-card,.deposit-stats>div,.btn:not(.primary),.icon-btn){background-color:var(--ui-surface)!important;border-color:var(--ui-line)!important;color:var(--ui-ink)}
html[data-appearance='dark'] #app .shell :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){background:var(--ui-sunken)!important;border-color:var(--ui-line-strong)!important;color:var(--ui-ink)!important}

@media (prefers-reduced-motion:reduce){#app .shell *{transition:none!important}}

/* ============ 豆馆面板（门店端）============ */
#app .hall-panel,.hall-modal{--hall-accent:var(--ui-brand);--hall-line:var(--ui-line);--hall-ink:var(--ui-ink);--hall-muted:var(--ui-muted)}
#app .hall-panel{gap:var(--ui-gap)}
#app .hall-body{display:flex;flex-direction:column;gap:12px}
#app .hall-head{align-items:center}
#app .hall-tabs{padding:3px;border:1px solid var(--ui-line);border-radius:12px;background:var(--ui-sunken);gap:2px}
#app .hall-tab{min-height:calc(var(--ui-h-ctl) - 6px);padding:0 16px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ui-muted)}
#app .hall-tab.active{background:var(--ui-surface);color:var(--ui-ink);font-weight:650;box-shadow:0 1px 2px rgba(30,28,41,.12)}
#app .hall-visit{display:flex;gap:8px}
#app .hall-btn{min-height:var(--ui-h-ctl);border-radius:var(--ui-r-ctl);border-color:var(--ui-line-strong);font-weight:600;font-size:14px}
#app .hall-btn:hover{background:var(--ui-sunken)}
#app .hall-btn.primary{background:var(--ui-brand);border-color:var(--ui-brand)}
#app .hall-btn.primary:hover{background:color-mix(in srgb,var(--ui-brand),black 10%)}
#app .hall-btn.small{min-height:var(--ui-h-sm);padding:0 12px;font-size:13px}
#app .hall-notice{border-radius:12px;background:var(--ui-brand-soft);color:color-mix(in srgb,var(--ui-brand),black 30%)}
#app .hall-callout{border:1px solid color-mix(in srgb,var(--bead-soon) 40%,#fff);border-radius:14px;background:color-mix(in srgb,var(--bead-soon) 9%,#fff);color:#6b4a07}
/* 工具条：左边状态筛选（可横滑），右边在馆数 + 新作品 */
#app .hall-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px}
#app .hall-filters{gap:6px;padding:2px 0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);padding-right:24px}
#app .hall-chip{min-height:var(--ui-h-sm);padding:0 14px;border-radius:var(--ui-r-pill);border:1px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-ink-2);font-size:13.5px;font-weight:500}
#app .hall-chip.active{background:var(--ui-ink);border-color:var(--ui-ink);color:var(--ui-surface);font-weight:600}
#app .hall-live{display:inline-flex;align-items:center;gap:6px;min-height:var(--ui-h-sm);padding:0 12px;border-radius:var(--ui-r-pill);background:var(--ui-surface);border:1px solid var(--ui-line);color:var(--ui-ink-2);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
#app .hall-live::before{content:"";width:9px;height:9px;border-radius:50%;border:2.5px solid var(--bead-ok);box-sizing:border-box}
#app .hall-live.full::before{border-color:var(--bead-over)}
/* 作品卡：缩略图 | 信息 | 操作；按钮统一小号，主操作在最右 */
#app .hall-works{gap:10px}
#app .hall-work{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px;border:1px solid var(--ui-line);border-radius:var(--ui-r-panel);background:var(--ui-surface)}
#app .hall-work:hover{border-color:var(--ui-line-strong)}
#app .hall-thumb{width:72px;height:72px;border-radius:12px;border-color:var(--ui-line)}
#app .hall-work-title strong{font-size:16px;font-weight:650}
#app .hall-work-meta{font-size:13px;line-height:1.55;color:var(--ui-muted)}
#app .hall-no{font-family:inherit;font-weight:600;letter-spacing:.02em;color:var(--ui-ink-2)}
#app .hall-badge{padding:2px 9px;font-size:12px}
#app .hall-work-actions{gap:6px}
#app .hall-work-actions .hall-btn{min-height:var(--ui-h-sm);padding:0 12px;font-size:13px}
#app .hall-empty{padding:40px 16px;border:1px dashed var(--ui-line-strong);border-radius:var(--ui-r-panel);background:var(--ui-surface);color:var(--ui-muted)}
/* 资料页 */
#app .hall-profile{max-width:820px;padding:20px;border:1px solid var(--ui-line);border-radius:var(--ui-r-panel);background:var(--ui-surface);gap:16px}
#app .hall-field{font-size:13px;color:var(--ui-ink-2);font-weight:500}
#app .hall-field input,#app .hall-field select,#app .hall-field textarea{min-height:var(--ui-h-ctl);border-radius:var(--ui-r-ctl);border-color:var(--ui-line-strong);font-size:15px;font-weight:400}
#app .hall-shop-media,#app .hall-geo{border-color:var(--ui-line);background:var(--ui-sunken)}
#app .hall-switch{font-weight:600}
#app .hall-form-actions{position:sticky;bottom:0;padding:12px 0 2px;background:linear-gradient(transparent,var(--ui-surface) 30%)}
.hall-modal{background:rgba(30,28,41,.42)}
.hall-modal-card{border-radius:18px;box-shadow:var(--ui-shadow-pop);font-family:var(--ui-font)}

@media (max-width:767px){
  #app .hall-head{gap:10px}
  #app .hall-tabs{flex:1 1 100%}
  #app .hall-tab{flex:1}
  #app .hall-visit{flex:1 1 100%}
  #app .hall-visit .hall-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:var(--ui-h-sm);font-size:13px}
  #app .hall-toolbar{grid-template-columns:auto 1fr;grid-template-areas:"filters filters" "live new"}
  #app .hall-filters{grid-area:filters}
  #app .hall-live{grid-area:live}
  #app .hall-toolbar>.hall-btn.primary{grid-area:new;justify-self:end}
  #app .hall-work{grid-template-columns:60px minmax(0,1fr);grid-template-areas:"thumb main" "actions actions";gap:10px 12px;padding:12px}
  #app .hall-thumb{grid-area:thumb;width:60px;height:60px}
  #app .hall-work-main{grid-area:main}
  #app .hall-work-title strong{font-size:15px}
  #app .hall-work-meta{font-size:12.5px}
  #app .hall-work-actions{grid-area:actions;justify-content:flex-start;padding-top:10px;border-top:1px solid var(--ui-line)}
  #app .hall-work-actions .hall-btn{flex:1 1 auto}
  #app .hall-work-actions .hall-btn.primary{order:9}
  #app .hall-profile{padding:14px}
}
html[data-appearance='dark'] #app .hall-panel :is(.hall-work,.hall-chip:not(.active),.hall-live,.hall-empty,.hall-profile,.hall-btn:not(.primary)){background:var(--ui-surface)!important;border-color:var(--ui-line)!important;color:var(--ui-ink)}

/* ---------- 营业页细节 ---------- */
#app .shell:not(.focus-operation) .floor-filters,#app .shell:not(.focus-operation) .number-filters{background:transparent!important;box-shadow:none!important}
#app .shell .ui-heading .heading-actions .action-label{display:inline!important}
@media (max-width:1100px){#app .shell .ui-heading::after{opacity:.5;width:40%}}
@media (max-width:767px){#app .hall-visit .hall-btn{min-height:36px}}

html[data-appearance='dark'] #app .hall-panel .hall-chip.active{background:var(--ui-ink)!important;color:var(--ui-surface)!important}
html[data-appearance='dark'] #app .hall-badge.good{background:#173a2a;color:#7fd8a8}
html[data-appearance='dark'] #app .hall-badge.warn{background:#3d2d0c;color:#f2c063}
html[data-appearance='dark'] #app .hall-badge.bad{background:#40191a;color:#f19a95}
html[data-appearance='dark'] #app .hall-badge.muted{background:#2c2a38;color:#b9b6c8}
html[data-appearance='dark'] #app .hall-callout{background:#2e2410;border-color:#5a4415;color:#f2d494}

/* ---------- 营业页 · 手机：平面图工具条重新排布 ----------
   第一行：标题 + 桌位数 | 搜索按钮 · 视图切换（三个小图标）
   第二行：桌号分组，整行横向滑动；点搜索后在第二行上方展开整行搜索框 */
#app .shell .ui-phone-search{display:none}
@media (max-width:767px){
  #app .shell.view-desk:not(.focus-operation) .floor-panel>.panel-heading{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"title search views" "filters filters filters";align-items:center;gap:10px 8px;padding:12px 12px 10px!important;height:auto!important;min-height:0!important}
  #app .shell.view-desk:not(.focus-operation) .floor-panel>.panel-heading .panel-title{grid-area:title;display:flex;align-items:baseline;gap:6px;min-width:0}
  #app .shell.view-desk:not(.focus-operation) .floor-panel>.panel-heading .panel-title h2{font-size:16px;white-space:nowrap}
  #app .shell.view-desk:not(.focus-operation) .floor-panel>.panel-heading .count-badge{font-size:12px;color:var(--ui-muted);background:none;padding:0;white-space:nowrap}
  #app .shell.view-desk:not(.focus-operation) .ui-phone-search{grid-area:search;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border-radius:10px}
  #app .shell.view-desk:not(.focus-operation) .ui-phone-search[aria-expanded=true]{background:var(--ui-ink);border-color:var(--ui-ink);color:var(--ui-surface)}
  #app .shell.view-desk:not(.focus-operation) .floor-panel>.panel-heading .view-switch{grid-area:views;display:flex;gap:2px;height:36px;padding:2px;margin:0;width:auto!important}
  #app .shell.view-desk:not(.focus-operation) .floor-panel>.panel-heading .view-switch button{display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;height:30px;min-height:30px;padding:0!important;font-size:0!important;gap:0}
  #app .shell.view-desk:not(.focus-operation) .floor-panel>.panel-heading .view-switch button svg{width:17px;height:17px}
  #app .shell.view-desk:not(.focus-operation) .floor-filters{grid-area:filters;display:flex!important;flex-direction:column;align-items:stretch;gap:8px;min-width:0;width:100%;padding:0!important;margin:0;height:auto!important;min-height:0!important;border:0!important}
  #app .shell.view-desk:not(.focus-operation) .floor-filters .number-filters{order:2;display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  #app .shell.view-desk:not(.focus-operation) .floor-filters .number-filters::-webkit-scrollbar{display:none}
  #app .shell.view-desk:not(.focus-operation) .floor-filters .number-filter{flex:none;min-height:32px;padding:0 13px;font-size:13px}
  #app .shell.view-desk:not(.focus-operation) .floor-filters .search-box{order:1;display:none!important;width:100%!important;max-width:none!important;flex:none;height:40px}
  #app .shell.view-desk:not(.focus-operation) .floor-panel.mobile-search-open .floor-filters .search-box{display:flex!important}
}

/* ── 2.13 ─────────────────────────────────────────────────────────────── */
/* 桌位详情：主操作固定在详情底部，不用往下翻；寄存作品和其它按钮之间留出间距 */
#app .shell #seat-detail:has(.detail-actions){padding-bottom:0!important}
#app .shell #seat-detail .detail-actions{position:sticky;bottom:0;z-index:4;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:16px 0 0;padding:12px 0 max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--ui-line);background:var(--ui-surface)}
#app .shell #seat-detail .detail-actions.two{grid-template-columns:repeat(2,minmax(0,1fr))}
#app .shell #seat-detail .detail-actions:has(.price-line){grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:14px}
#app .shell #seat-detail .detail-actions .price-line{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:0;padding:0;border:0;background:none}
#app .shell #seat-detail .detail-actions .price-line span{font-size:12px;color:var(--ui-muted)}
#app .shell #seat-detail .detail-actions .price-line strong{font-size:22px;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--ui-ink)}
#app .shell #seat-detail .detail-actions .price-line strong span{font:inherit;color:inherit}
#app .shell #seat-detail .detail-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%!important;min-height:48px;margin:0!important;font-size:15px;font-weight:650;white-space:nowrap}
#app .shell #seat-detail [data-action=seat-deposit]{margin-top:12px!important}
#app .shell #seat-detail .secondary-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;margin-top:12px}
#app .shell #seat-detail .secondary-actions .btn{margin:0!important;width:100%}
#app .shell #seat-detail .seat-operation-row{gap:10px;margin:12px 0}
#app .shell #seat-detail .renewal-block{margin-top:12px}
#app .shell #seat-detail .timer-card{padding:12px 16px}
#app .shell #seat-detail .timer-card strong{font-size:32px;line-height:1.1;margin:2px 0}
html[data-appearance='dark'] #app .shell #seat-detail .detail-actions{background:var(--ui-surface)}
@media (max-width:767px){
  #app .shell.view-desk #seat-detail .ready-note{margin:0 0 8px}
  #app .shell.view-desk #seat-detail .control-block{gap:8px}
  #app .shell.view-desk #seat-detail .package-label{margin:0 0 6px}
  #app .shell.view-desk #seat-detail .duration-label{margin:10px 0 6px}
  #app .shell.view-desk #seat-detail .duration-options .duration{min-height:40px}
  #app .shell.view-desk #seat-detail .custom-duration input{min-height:40px}
}

/* 手机：非营业模式下标题区收紧，把首屏让给平面图（平面图高度至少占可视区约 2/3，见 sizeMapViewport） */
@media (max-width:767px){
  #app .shell.view-desk:not(.focus-operation) .page-heading.ui-heading{padding:12px 14px!important;gap:10px!important}
  #app .shell.view-desk:not(.focus-operation) .page-heading .service-summary{padding:8px 0 0!important;gap:4px!important}
  #app .shell.view-desk:not(.focus-operation) .page-heading .summary-item{min-height:0!important;padding:2px 4px!important}
  #app .shell.view-desk:not(.focus-operation) .page-heading .summary-item strong{font-size:20px!important;line-height:1.1}
  #app .shell.view-desk:not(.focus-operation) .page-heading .heading-actions .btn{min-height:42px!important;height:42px}
  #app .shell.view-desk:not(.focus-operation) .floor-panel>.panel-heading{padding-top:10px!important;padding-bottom:10px!important}
}

/* 营业模式（2.11 合并标题栏后的新结构）：店名 / 时钟提醒 / 退出 一行，营业数字一行，退出按钮始终可见 */
#app .shell.focus-operation.view-desk .page-heading .heading-tools{display:flex;align-items:center;gap:8px;flex:none;margin:0}
#app .shell.focus-operation.view-desk .page-heading .heading-tools .notification-btn{width:40px;height:40px;min-width:40px;min-height:40px}
#app .shell.focus-operation.view-desk .heading-actions [data-action=toggle-focus]{display:inline-flex!important;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--ui-ink)!important;background:var(--ui-ink)!important;color:var(--ui-surface)!important;font-weight:650}
#app .shell.focus-operation.view-desk .heading-actions [data-action=toggle-focus] .action-label{display:inline!important}
#app .shell.focus-operation.view-desk .heading-actions [data-action=quick-start]{display:none!important}
#app .shell.focus-operation.view-desk .page-heading::before,#app .shell.focus-operation.view-desk .page-heading::after{display:none!important}
@media (orientation:portrait),(max-width:767px){
  #app .shell.focus-operation.view-desk .page-heading{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:auto auto;grid-template-areas:"title tools exit" "sum sum sum";align-items:center;gap:6px 8px;height:auto!important;min-height:0!important;padding:8px 12px 6px!important;overflow:visible}
  #app .shell.focus-operation.view-desk .page-heading>div:first-child{grid-area:title;min-width:0}
  #app .shell.focus-operation.view-desk .page-heading .heading-tools{grid-area:tools}
  #app .shell.focus-operation.view-desk .page-heading .heading-actions{grid-area:exit;display:flex!important}
  #app .shell.focus-operation.view-desk .page-heading .service-summary{grid-area:sum;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));width:100%!important;margin:0!important;padding:0!important;border:0!important}
  #app .shell.focus-operation.view-desk .page-heading .summary-item{flex-direction:row;align-items:center;justify-content:center;min-height:36px;gap:5px}
  #app .shell.focus-operation.view-desk .page-heading .shop-clock>span{display:none}
  #app .shell.focus-operation .floor-filters{gap:6px}
  #app .shell.focus-operation .floor-filters .number-filters{flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;scrollbar-width:none}
  #app .shell.focus-operation .floor-filters .number-filters::-webkit-scrollbar{display:none}
  #app .shell.focus-operation .floor-filters .number-filter{flex:none;white-space:nowrap}
}
@media (max-width:480px){
  #app .shell.focus-operation.view-desk .page-heading .shop-clock{min-width:0}
  #app .shell.focus-operation.view-desk .heading-actions [data-action=toggle-focus]{padding:0 10px;font-size:13px}
  #app .shell.focus-operation.view-desk .heading-actions [data-action=toggle-focus] .icon{display:none}
  #app .shell.focus-operation .focus-view-switch button{min-width:40px;padding:0 4px;font-size:12px}
  #app .shell.focus-operation .floor-filters .mobile-map-legend{display:none!important}
  #app .shell.focus-operation .focus-toolbar-start{min-width:56px}
}