/* ===== Bliss POS — 样式 ===== */
:root{
  --brand:#0ea5e9;
  --bg:#f1f5f9; --card:#fff; --ink:#0f172a; --muted:#64748b;
  --line:#e2e8f0; --line2:#cbd5e1;
  --green:#16a34a; --red:#dc2626; --amber:#f59e0b;
  --radius:14px; --shadow:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent;font-size:15px}
button{font-family:inherit;cursor:pointer}
a{color:inherit}
h1{font-size:20px;margin:0}
h2{font-size:16px;margin:0 0 12px}
small{font-size:.78em}
.muted{color:var(--muted)}
.small{font-size:13px}
.r{text-align:right}.nowrap{white-space:nowrap}
.mt{margin-top:14px}

/* ===== 按钮 ===== */
.btn-primary,.btn-success,.btn-ghost{border:0;border-radius:10px;padding:11px 16px;font-weight:600;font-size:15px}
.btn-primary{background:var(--brand);color:#fff}
.btn-success{background:var(--green);color:#fff}
.btn-ghost{background:#eef2f6;color:var(--ink)}
.btn-ghost.danger{color:var(--red)}
.btn-mini{border:1px solid var(--line2);background:#fff;border-radius:8px;padding:5px 10px;font-size:13px;font-weight:600}
.btn-mini.danger{color:var(--red);border-color:#fecaca}
.link-danger{background:none;border:0;color:var(--red);font-size:13px;font-weight:600}
.mini{border:1px solid var(--line2);background:#fff;border-radius:8px;padding:4px 10px;font-size:13px}

/* ===== 顶栏 ===== */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;
  background:var(--card);border-bottom:1px solid var(--line);padding:8px 14px;flex-wrap:wrap}
.tb-left{display:flex;align-items:center;gap:10px}
.logo{font-weight:800;color:var(--brand)}
.biz-pill{background:color-mix(in srgb,var(--brand) 12%,#fff);color:var(--brand);
  padding:4px 10px;border-radius:999px;font-size:13px;font-weight:700;border:1px solid color-mix(in srgb,var(--brand) 25%,#fff)}
.tb-nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.tb-nav a{text-decoration:none;padding:8px 12px;border-radius:9px;color:var(--muted);font-weight:600;font-size:14px}
.tb-nav a.active{background:var(--brand);color:#fff}
.tb-nav a:not(.active):hover{background:#eef2f6}
.tb-right{display:flex;align-items:center;gap:10px}
.biz-switch select{border:1px solid var(--line2);border-radius:8px;padding:6px 8px;font-size:13px;background:#fff}
.who{font-size:13px;color:var(--muted)}
.logout{text-decoration:none;color:var(--red);font-weight:600;font-size:13px}

/* ===== 通用页面 ===== */
.content{padding:0}
.page{max-width:1200px;margin:0 auto;padding:18px 16px 60px}
.page.narrow{max-width:720px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.grid-2{grid-template-columns:1fr}}

/* 表单 */
.fld{display:block;margin-bottom:12px}
.fld>span{display:block;font-size:13px;color:var(--muted);margin-bottom:5px;font-weight:600}
.fld input,.fld select,.filters input,.filters select{width:100%;border:1px solid var(--line2);border-radius:9px;
  padding:10px 12px;font-size:15px;background:#fff}
.fld-row{display:flex;gap:12px}.fld-row>*{flex:1}
.chk{display:inline-flex;align-items:center;gap:8px;font-size:14px;margin-bottom:12px}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap}
.cat-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.cat-form input[type=text]{flex:1;min-width:120px;border:1px solid var(--line2);border-radius:9px;padding:9px 11px}
.cat-form input[type=color]{width:42px;height:38px;border:1px solid var(--line2);border-radius:8px;padding:2px;background:#fff}
.cat-form input[type=number]{border:1px solid var(--line2);border-radius:9px;padding:9px}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.cat-list .dot,.dot{width:11px;height:11px;border-radius:50%;display:inline-block}

/* 表格 */
.table-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;
  letter-spacing:.03em;padding:8px 10px;border-bottom:2px solid var(--line)}
.tbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr.voided{opacity:.5;text-decoration:line-through}
.pill{display:inline-block;background:#eef2f6;color:var(--muted);padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700}
.pill.w{background:#fef3c7;color:#92400e}
.pill.danger{background:#fee2e2;color:var(--red)}

.filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.filters label{font-size:13px;color:var(--muted);font-weight:600;display:flex;flex-direction:column;gap:4px}
.filters input,.filters select{min-width:130px}

.stat-row,.kpi-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.stat,.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;flex:1;min-width:130px}
.stat span,.kpi span{display:block;font-size:13px;color:var(--muted)}
.stat b,.kpi b{font-size:22px}
.kpi b{color:var(--brand)}

.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kv>div{background:#f8fafc;border-radius:9px;padding:9px 12px}
.kv span{display:block;font-size:12px;color:var(--muted)}
.totals{margin-top:16px;border-top:2px solid var(--line);padding-top:12px}
.totals>div{display:flex;justify-content:space-between;padding:4px 0}
.totals .big{font-size:20px;font-weight:800;border-top:1px dashed var(--line2);margin-top:6px;padding-top:8px}
.banner{padding:10px 14px;border-radius:9px;margin-bottom:14px;font-weight:700}
.banner.danger{background:#fee2e2;color:var(--red)}

/* 柱状图 */
.bars{display:flex;gap:8px;align-items:flex-end;height:170px;overflow-x:auto;padding-top:10px}
.bar-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:46px;height:100%}
.bar{width:30px;background:var(--brand);border-radius:6px 6px 0 0;transition:height .3s}
.bar-val{font-size:11px;color:var(--muted);margin-bottom:3px}
.bar-lbl{font-size:11px;color:var(--muted);margin-top:5px}

/* ============ 登录 ============ */
.login-body{background:linear-gradient(160deg,#0f172a,#1e293b);min-height:100vh;margin:0;
  display:flex;align-items:center;justify-content:center;padding:20px}
.login-wrap{width:100%;max-width:420px}
.login-card{background:#fff;border-radius:22px;padding:26px 24px 30px;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.login-brand{text-align:center;font-size:24px;font-weight:800;color:var(--brand);margin-bottom:8px}
.login-hint{text-align:center;color:var(--muted);margin:10px 0 18px}
.login-foot{text-align:center;color:#94a3b8;font-size:12px;margin-top:18px}
.biz-grid{display:grid;gap:12px}
.biz-card{border:2px solid var(--line);background:#fff;border-radius:16px;padding:20px;text-align:left;
  display:flex;flex-direction:column;gap:4px;border-left:6px solid var(--c,#0ea5e9)}
.biz-card:active{transform:scale(.98)}
.biz-card-name{font-size:18px;font-weight:800}
.biz-card-type{font-size:13px;color:var(--muted)}
.back-link{background:none;border:0;color:var(--brand);font-weight:600;font-size:14px;margin-bottom:6px}
.pin-dots{display:flex;gap:12px;justify-content:center;margin:14px 0}
.pin-dots .dot{width:14px;height:14px;border-radius:50%;background:var(--line2)}
.pin-dots .dot.on{background:var(--brand)}
.pin-error{text-align:center;color:var(--red);font-size:14px;min-height:20px;font-weight:600}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.pin-key{font-size:24px;font-weight:700;padding:18px 0;border:1px solid var(--line);background:#f8fafc;border-radius:14px}
.pin-key:active{background:#e2e8f0}
.pin-key.pin-fn{font-size:18px;color:var(--muted)}

/* ============ POS ============ */
.pos{display:flex;height:calc(100vh - 53px);overflow:hidden}
.pos-catalog{flex:1;display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line)}
.cat-search{padding:12px 14px 8px}
.cat-search input{width:100%;border:1px solid var(--line2);border-radius:11px;padding:12px 14px;font-size:16px;background:#fff}
.cat-tabs{display:flex;gap:8px;padding:4px 14px 10px;overflow-x:auto;flex-wrap:nowrap}
.cat-tab{white-space:nowrap;border:1px solid var(--line2);background:#fff;border-radius:999px;padding:8px 16px;
  font-weight:600;font-size:14px;border-bottom:3px solid var(--c,transparent)}
.cat-tab.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.prod-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:10px;padding:4px 14px 20px;align-content:start}
.prod{position:relative;background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px 12px;
  min-height:88px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;gap:6px;box-shadow:var(--shadow)}
.prod:active{transform:scale(.97);border-color:var(--brand)}
.prod.is-weight{border-left:4px solid var(--amber)}
.p-name{font-weight:700;font-size:14px;line-height:1.25}
.p-price{color:var(--brand);font-weight:800;font-size:15px}
.p-price small{color:var(--muted);font-weight:600}
.p-stock{position:absolute;top:8px;right:8px;font-size:11px;background:#ecfdf5;color:#047857;padding:1px 6px;border-radius:6px;font-weight:700}
.p-stock.out{background:#fee2e2;color:var(--red)}
.p-tag{position:absolute;top:8px;right:8px;font-size:10px;background:#fef3c7;color:#92400e;padding:1px 6px;border-radius:6px;font-weight:700}
.loading{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px}

.pos-cart{width:360px;display:flex;flex-direction:column;background:#fff}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700}
.cart-items{flex:1;overflow-y:auto;padding:8px 12px}
.cart-empty{text-align:center;color:var(--muted);padding:50px 0}
.citem{display:flex;gap:10px;padding:10px 8px;border-bottom:1px solid var(--line)}
.ci-main{flex:1;min-width:0;cursor:pointer}
.ci-name{font-weight:700;font-size:14px}
.ci-sub{font-size:12px;color:var(--muted);margin-top:2px}
.ci-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ci-total{font-weight:800}
.ci-ctrl{display:flex;gap:4px}
.ci-btn{width:30px;height:30px;border:1px solid var(--line2);background:#fff;border-radius:8px;font-size:16px;font-weight:700;line-height:1}
.ci-btn.del{color:var(--red);border-color:#fecaca}
.cart-foot{border-top:1px solid var(--line);padding:14px 16px;background:#f8fafc}
.cart-line{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:15px}
.cart-line.total-line{font-size:21px;font-weight:800;border-top:1px dashed var(--line2);margin-top:6px;padding-top:8px}
.disc-input{display:flex;align-items:center;gap:8px}
.btn-pay{width:100%;margin-top:12px;background:var(--green);color:#fff;border:0;border-radius:13px;padding:16px;
  font-size:18px;font-weight:800}
.btn-pay:disabled{background:#cbd5e1}

/* 手机：上下堆叠 */
@media(max-width:780px){
  .pos{flex-direction:column;height:auto}
  .pos-catalog{border-right:0}
  .pos-cart{width:100%;border-top:1px solid var(--line)}
  .cart-items{max-height:40vh}
}

/* ===== 弹窗 ===== */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
.modal[hidden]{display:none}
.modal-card{background:#fff;border-radius:18px;padding:22px;width:100%;max-width:400px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.modal-title{font-size:18px;font-weight:800;margin-bottom:16px;text-align:center}
.modal-actions{display:flex;gap:10px;margin-top:18px}
.modal-actions button{flex:1}
.qty-fields{display:flex;gap:12px}
.qty-fields label{flex:1}
.qty-fields span{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:600}
.qty-fields input{width:100%;border:2px solid var(--line2);border-radius:11px;padding:14px;font-size:22px;font-weight:700;text-align:center}
.qty-quick{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.qty-quick button{flex:1;min-width:54px;border:1px solid var(--line2);background:#f8fafc;border-radius:10px;padding:10px;font-weight:700}
.qty-linetotal{text-align:center;font-size:16px;color:var(--muted)}
.qty-linetotal b{color:var(--ink);font-size:20px}

.disc-tabs{display:flex;gap:8px;margin-bottom:12px}
.dtab{flex:1;border:1px solid var(--line2);background:#f8fafc;border-radius:10px;padding:10px;font-weight:700}
.dtab.active{background:var(--brand);color:#fff;border-color:var(--brand)}
#disc-value{width:100%;border:2px solid var(--line2);border-radius:11px;padding:14px;font-size:22px;text-align:center;font-weight:700}

/* 收款 */
.pay-card{max-width:440px}
.pay-total-big{text-align:center;font-size:17px;color:var(--muted);margin-bottom:16px}
.pay-total-big b{display:block;font-size:34px;color:var(--ink);font-weight:800}
.pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.pm{border:2px solid var(--line);background:#f8fafc;border-radius:12px;padding:14px 10px;font-weight:700;font-size:15px}
.pm.active{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,#fff);color:var(--brand)}
.tendered{display:block;margin-bottom:10px}
.tendered span{font-size:13px;color:var(--muted);font-weight:600}
.tendered input{width:100%;border:2px solid var(--line2);border-radius:11px;padding:14px;font-size:24px;text-align:center;font-weight:700;margin-top:6px}
.cash-quick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.cash-quick button{flex:1;min-width:64px;border:1px solid var(--line2);background:#fff;border-radius:10px;padding:11px;font-weight:700}
.change-line{text-align:center;font-size:16px;color:var(--muted);margin-bottom:6px}
.change-line b{color:var(--green);font-size:22px;font-weight:800}
.pay-extra{margin-top:6px}
.pay-extra summary{cursor:pointer;color:var(--brand);font-weight:600;font-size:14px;margin-bottom:8px}
.pay-extra input{width:100%;border:1px solid var(--line2);border-radius:9px;padding:10px 12px;margin-bottom:8px;font-size:15px}

/* 完成 */
.done-card{text-align:center;max-width:380px}
.done-icon{font-size:54px}
.done-title{font-size:22px;font-weight:800;margin:4px 0}
.done-receipt{color:var(--muted);margin-bottom:6px}
.done-change{font-size:18px;margin-bottom:6px}
.done-change b{color:var(--green);font-weight:800}
.done-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.done-actions a,.done-actions button{text-decoration:none;border-radius:12px;padding:14px;font-weight:700;font-size:16px;border:0;text-align:center;display:block}
.btn-print{background:var(--brand);color:#fff}
.btn-view{background:#eef2f6;color:var(--ink)}

/* ===== 折扣/优惠券/单项折扣 ===== */
.login-sub{text-align:center;color:#64748b;font-size:12.5px;margin:14px 4px 0;line-height:1.5}
.ci-disc{color:var(--red);font-weight:700}
.coupon-applied{background:#f0fdf4;border-radius:8px;padding:6px 10px!important}
.coupon-tag{color:#15803d;font-weight:700;font-size:13px}
.disc-presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.disc-presets button{flex:1;min-width:58px;border:1px solid var(--line2);background:#f8fafc;border-radius:10px;padding:11px;font-weight:700}
.disc-presets button:active{background:var(--brand);color:#fff}
.linedisc{display:block;margin-top:12px}
.linedisc span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;font-weight:600}
.linedisc input{width:100%;border:1px solid var(--line2);border-radius:10px;padding:11px;font-size:16px;text-align:center}

/* 优惠券弹窗 */
.coupon-list{display:flex;flex-direction:column;gap:8px;margin:6px 0 12px}
.coupon-opt{display:flex;justify-content:space-between;align-items:center;border:2px solid var(--line);
  background:#fff;border-radius:12px;padding:13px 14px;text-align:left;font-size:15px}
.coupon-opt b{font-weight:700}
.coupon-opt small{color:var(--muted)}
.coupon-opt.active{border-color:var(--green);background:#f0fdf4}
.cp-step{font-size:13px;color:var(--muted);font-weight:600;margin:6px 0}
.coupon-lines{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.cl-opt{border:1px solid var(--line2);background:#f8fafc;border-radius:9px;padding:10px 12px;text-align:left;font-weight:600}
.cl-opt.active{border-color:var(--green);background:#dcfce7;color:#14532d}
.cp-code{display:block;margin-top:6px}
.cp-code span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;font-weight:600}
.cp-code input{width:100%;border:1px solid var(--line2);border-radius:10px;padding:11px;font-size:15px}