/* ============================================================
   ServOS — animated feature demo system
   Each section gets a "device" frame with a looped, prefers-
   reduced-motion-aware animation showing the software in use.
   ============================================================ */

/* shared frame */
.dev {
  position: relative;
  background: var(--ink);
  border: 1px solid var(--ink-line-strong);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.7);
  min-height: 460px;
  display: flex; flex-direction: column;
}
.dev-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--ink-line);
  background: color-mix(in oklab, var(--ink-soft) 70%, transparent);
}
.dev-bar .d-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--ink-line-strong); }
.dev-bar .d-name { margin-left: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-on-dark); }
.dev-bar .d-right { margin-left: auto; display: flex; gap: 6px; align-items: center; font-family: var(--font-mono); font-size: 10px; color: var(--muted-on-dark); letter-spacing: .14em; }
.dev-bar .d-live { color: var(--success); display: inline-flex; align-items: center; gap: 6px; }
.dev-bar .d-live::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--success); box-shadow: 0 0 0 0 color-mix(in oklab, var(--success) 70%, transparent); animation: dlive 1.8s infinite; }
@keyframes dlive { 0%,100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--success) 60%, transparent);} 60% { box-shadow: 0 0 0 7px transparent;} }
.dev-body { flex: 1; padding: 18px; display: grid; gap: 12px; align-content: start; }

/* generic chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 10%, var(--ink));
  border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.chip-mute { background: var(--ink); border-color: var(--ink-line); color: var(--muted-on-dark); }
.chip-ok { background: color-mix(in oklab, var(--success) 10%, var(--ink)); border-color: color-mix(in oklab, var(--success) 30%, transparent); color: var(--success); }
.chip-warn { background: color-mix(in oklab, var(--warn) 10%, var(--ink)); border-color: color-mix(in oklab, var(--warn) 30%, transparent); color: var(--warn); }

/* features page layout */
.feat-section { padding: 96px 0; border-top: 1px solid var(--ink-line); }
@media (min-width: 1024px) { .feat-section { padding: 128px 0; } }
.feat-top {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: 64px; align-items: start;
}
.feat-top h2 { font-family: var(--font-display); font-size: clamp(2rem,4vw,3.6rem); line-height: 0.96; margin: 16px 0 0; }
.feat-top p { margin-top: 16px; color: var(--muted-on-dark); line-height: 1.6; }
.feat-list {
  list-style: none; padding: 0; margin: 56px 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 40px;
}
.feat-list li { padding: 18px 0; border-bottom: 1px solid var(--ink-line); }
.feat-list .feat-name { font-family: var(--font-display); font-size: 20px; }
.feat-list .feat-desc { font-size: 14px; color: var(--muted-on-dark); margin-top: 4px; line-height: 1.55; }
@media (max-width: 900px) {
  .feat-top { grid-template-columns: 1fr; gap: 36px; }
  .feat-section { padding: 72px 0; }
}

/* ============ POS demo ============ */
.pos-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.pos-cat { padding: 6px 12px; border-radius: 8px; background: var(--ink-soft); border: 1px solid var(--ink-line); font-size: 12px; color: var(--paper); font-family: var(--font-mono); letter-spacing: .04em; }
.pos-cat.on { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.pos-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.pos-tile { aspect-ratio: 1.2; border-radius: 10px; background: var(--ink-soft); border: 1px solid var(--ink-line); padding: 10px; display: flex; flex-direction: column; justify-content: space-between; }
.pos-tile .pt-name { font-size: 12px; color: var(--paper); line-height: 1.25; }
.pos-tile .pt-price { font-family: var(--font-mono); font-size: 11px; color: var(--muted-on-dark); }
.pos-tile.tap { animation: postap 4.8s infinite; }
.pos-tile.tap:nth-child(2) { animation-delay: 1.6s; }
.pos-tile.tap:nth-child(5) { animation-delay: 3.2s; }
@keyframes postap {
  0%, 18%, 100% { background: var(--ink-soft); border-color: var(--ink-line); transform: scale(1); }
  20% { background: color-mix(in oklab, var(--accent) 20%, var(--ink-soft)); border-color: var(--accent); transform: scale(0.97); }
  24% { background: color-mix(in oklab, var(--accent) 15%, var(--ink-soft)); border-color: var(--accent); transform: scale(1); }
  40% { background: var(--ink-soft); border-color: var(--ink-line); }
}
.pos-cart { padding: 12px; border-radius: 10px; background: var(--ink-soft); border: 1px solid var(--ink-line); }
.pos-cart .pc-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-on-dark); margin-bottom: 8px; }
.pos-cart .pc-line { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; color: var(--paper); }
.pos-cart .pc-line .pc-qty { color: var(--accent); margin-right: 8px; font-family: var(--font-mono); }
.pos-cart .pc-line:nth-child(2) { animation: posIn 4.8s infinite; }
.pos-cart .pc-line:nth-child(3) { animation: posIn 4.8s infinite 1.6s; }
.pos-cart .pc-line:nth-child(4) { animation: posIn 4.8s infinite 3.2s; }
@keyframes posIn {
  0%, 18% { opacity: 0; transform: translateY(-4px); }
  22%, 100% { opacity: 1; transform: translateY(0); }
}
.pos-total { display: flex; justify-content: space-between; padding-top: 8px; margin-top: 6px; border-top: 1px dashed var(--ink-line-strong); font-family: var(--font-display); font-size: 18px; color: var(--paper); }
.pos-total .pt-val { color: var(--accent); }

/* ============ Payments demo — terminal ============ */
.pay-frame { display: grid; gap: 12px; }
.pay-card {
  padding: 18px; border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, var(--ink-soft)), var(--ink-soft));
  border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent);
}
.pay-amount { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--paper); }
.pay-amount em { font-style: italic; color: var(--accent); }
.pay-sub { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--muted-on-dark); text-transform: uppercase; }
.pay-tip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pay-tip > div { padding: 14px 8px; text-align: center; border-radius: 10px; border: 1px solid var(--ink-line); background: var(--ink-soft); font-family: var(--font-mono); font-size: 12px; color: var(--paper); }
.pay-tip > div.on { background: var(--accent); color: var(--ink); border-color: var(--accent); animation: paytipCycle 8s infinite; }
@keyframes paytipCycle {
  0%, 22% { background: var(--accent); color: var(--ink); border-color: var(--accent); }
  25%, 100% { background: var(--ink-soft); color: var(--paper); border-color: var(--ink-line); }
}
.pay-tip > div:nth-child(1) { animation: paytipCycle 8s infinite; }
.pay-tip > div:nth-child(2) { animation: paytipCycle 8s infinite -2s; }
.pay-tip > div:nth-child(3) { animation: paytipCycle 8s infinite -4s; }
.pay-tip > div:nth-child(4) { animation: paytipCycle 8s infinite -6s; }
.pay-readers { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--ink-soft); border: 1px solid var(--ink-line); font-size: 12px; color: var(--paper); }
.pay-wave { margin-left: auto; display: inline-flex; gap: 3px; }
.pay-wave span { display: inline-block; width: 3px; height: 14px; background: var(--accent); border-radius: 2px; animation: paywave 1s infinite ease-in-out; }
.pay-wave span:nth-child(2) { animation-delay: .12s; height: 10px; }
.pay-wave span:nth-child(3) { animation-delay: .24s; height: 16px; }
.pay-wave span:nth-child(4) { animation-delay: .36s; height: 8px; }
@keyframes paywave { 0%,100% { transform: scaleY(.4); opacity: .5;} 50% { transform: scaleY(1); opacity: 1;} }

/* ============ KDS demo — kitchen tickets ============ */
.kds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kds-ticket { border-radius: 10px; background: var(--ink-soft); border: 1px solid var(--ink-line); padding: 10px; display: grid; gap: 6px; }
.kds-ticket .kt-head { display: flex; justify-content: space-between; align-items: center; }
.kds-ticket .kt-table { font-family: var(--font-display); font-size: 16px; color: var(--paper); }
.kds-ticket .kt-time { font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--muted-on-dark); }
.kds-ticket .kt-time.amber { color: var(--warn); border: 1px solid color-mix(in oklab, var(--warn) 30%, transparent); }
.kds-ticket .kt-time.red { color: var(--danger); border: 1px solid color-mix(in oklab, var(--danger) 30%, transparent); animation: ktredpulse 1.4s infinite; }
@keyframes ktredpulse { 0%,100% { background: color-mix(in oklab, var(--danger) 12%, var(--ink));} 50% { background: color-mix(in oklab, var(--danger) 24%, var(--ink));} }
.kds-ticket li { list-style: none; font-size: 12px; color: var(--paper); padding-left: 12px; position: relative; }
.kds-ticket li::before { content: "•"; position: absolute; left: 0; color: var(--accent); }
.kds-ticket li.done { color: var(--muted-on-dark); text-decoration: line-through; }
.kds-ticket .kt-allergen { display: inline-block; padding: 2px 6px; border-radius: 4px; background: color-mix(in oklab, var(--danger) 18%, transparent); color: var(--danger); font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.kds-ticket.bumping { animation: ktbump 6s infinite; }
@keyframes ktbump {
  0%, 75% { opacity: 1; transform: translateY(0); }
  85% { opacity: 0; transform: translateY(-10px) scale(0.95); }
  85.01%, 100% { opacity: 1; transform: translateY(0); }
}
.kds-counter { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: var(--ink-soft); border: 1px solid var(--ink-line); font-family: var(--font-mono); font-size: 11px; color: var(--muted-on-dark); }
.kds-counter b { color: var(--accent); font-weight: 600; }

/* ============ Delivery demo — channels ============ */
.del-chans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.del-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--ink-soft); border: 1px solid var(--ink-line); }
.del-logo { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--ink); }
.del-name { font-size: 13px; color: var(--paper); flex: 1; }
.del-stat { font-family: var(--font-mono); font-size: 10px; color: var(--success); letter-spacing: .14em; }
.del-stat.off { color: var(--muted-on-dark); }
.del-pause { display: flex; gap: 4px; align-items: center; padding: 10px 12px; border-radius: 10px; background: color-mix(in oklab, var(--warn) 12%, var(--ink-soft)); border: 1px solid color-mix(in oklab, var(--warn) 30%, transparent); font-size: 12px; color: var(--warn); }
.del-feed { padding: 10px 12px; border-radius: 10px; background: var(--ink-soft); border: 1px solid var(--ink-line); font-family: var(--font-mono); font-size: 11px; color: var(--muted-on-dark); overflow: hidden; height: 80px; position: relative; }
.del-feed .df-scroll { display: grid; gap: 6px; animation: delfeed 16s linear infinite; }
@keyframes delfeed { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.df-item { color: var(--paper); }
.df-item .df-time { color: var(--muted-on-dark); margin-right: 8px; }
.df-item .df-tag { color: var(--accent); }

/* ============ MPOS demo — handheld ============ */
.mpos-wrap { display: flex; justify-content: center; padding: 12px; }
.mpos-phone {
  width: 220px;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line-strong);
  border-radius: 28px;
  padding: 14px;
  display: grid; gap: 10px;
}
.mpos-table { font-family: var(--font-display); font-size: 18px; color: var(--paper); padding-bottom: 8px; border-bottom: 1px solid var(--ink-line); display: flex; justify-content: space-between; align-items: center; }
.mpos-table .mt-server { font-family: var(--font-mono); font-size: 10px; color: var(--muted-on-dark); letter-spacing: .12em; text-transform: uppercase; }
.mpos-item { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--ink-line); font-size: 12px; color: var(--paper); }
.mpos-item.in { animation: mposIn 5s infinite; }
.mpos-item.in:nth-child(2) { animation-delay: .8s; }
.mpos-item.in:nth-child(3) { animation-delay: 1.6s; }
.mpos-item.in:nth-child(4) { animation-delay: 2.4s; }
@keyframes mposIn { 0%, 12% { opacity: 0; transform: translateX(8px);} 18%, 100% { opacity: 1; transform: translateX(0);} }
.mpos-pay { background: var(--accent); color: var(--ink); padding: 12px; border-radius: 12px; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* ============ AI demo — chat ============ */
.ai-mini { display: grid; gap: 10px; }
.ai-q { padding: 10px 12px; border-radius: 12px; background: var(--ink-soft); border: 1px solid var(--ink-line); font-size: 13px; color: var(--paper); margin-left: auto; max-width: 80%; }
.ai-a { padding: 10px 12px; border-radius: 12px; background: color-mix(in oklab, var(--accent) 12%, var(--ink-soft)); border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent); font-size: 13px; color: var(--paper); max-width: 90%; line-height: 1.5; }
.ai-a strong { color: var(--accent); }
.ai-thinking { display: inline-flex; gap: 4px; padding: 8px 12px; border-radius: 12px; background: color-mix(in oklab, var(--accent) 8%, var(--ink-soft)); border: 1px solid var(--ink-line); }
.ai-thinking span { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); animation: aidot 1.2s infinite; }
.ai-thinking span:nth-child(2) { animation-delay: .15s; }
.ai-thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes aidot { 0%,100% { transform: translateY(0); opacity: .4;} 50% { transform: translateY(-4px); opacity: 1;} }

/* ============ Back office demo ============ */
.bo-frame { display: grid; grid-template-columns: 100px 1fr; gap: 12px; height: 100%; }
.bo-side { display: grid; gap: 4px; align-content: start; }
.bo-side .bo-link { padding: 6px 8px; border-radius: 6px; font-size: 11px; color: var(--muted-on-dark); font-family: var(--font-mono); letter-spacing: .04em; }
.bo-side .bo-link.on { background: var(--accent); color: var(--ink); }
.bo-main { display: grid; gap: 8px; }
.bo-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bo-stat { padding: 10px; border-radius: 10px; background: var(--ink-soft); border: 1px solid var(--ink-line); }
.bo-stat .bs-lab { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; color: var(--muted-on-dark); text-transform: uppercase; }
.bo-stat .bs-val { font-family: var(--font-display); font-size: 22px; color: var(--paper); margin-top: 4px; }
.bo-stat .bs-val.tick { animation: bstick 4s infinite; }
@keyframes bstick { 0%,100% { color: var(--paper);} 50% { color: var(--accent);} }
.bo-chart { padding: 12px; border-radius: 10px; background: var(--ink-soft); border: 1px solid var(--ink-line); display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.bo-chart .bo-bar { flex: 1; background: linear-gradient(to top, var(--accent), color-mix(in oklab, var(--accent) 30%, transparent)); border-radius: 3px 3px 0 0; min-height: 6px; transition: height .4s; }
.bo-chart .bo-bar:nth-child(odd) { animation: bobar 3s infinite ease-in-out; }
.bo-chart .bo-bar:nth-child(even) { animation: bobar 3.4s infinite ease-in-out .4s; }
@keyframes bobar { 0%,100% { height: 30%;} 50% { height: 90%;} }

/* ============ Tables demo — floor plan ============ */
.tbl-canvas { position: relative; height: 320px; padding: 16px; border-radius: 12px; background: var(--ink-soft); border: 1px solid var(--ink-line); }
.tbl-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--ink-line) 1px, transparent 1px), linear-gradient(to bottom, var(--ink-line) 1px, transparent 1px); background-size: 32px 32px; opacity: 0.4; }
.tbl-shape { position: absolute; border-radius: 8px; background: var(--ink); border: 1px solid var(--ink-line-strong); padding: 6px; display: flex; flex-direction: column; justify-content: space-between; }
.tbl-shape.round { border-radius: 50%; padding: 0; align-items: center; justify-content: center; }
.tbl-shape .t-num { font-family: var(--font-display); font-size: 13px; color: var(--paper); }
.tbl-shape .t-cov { font-family: var(--font-mono); font-size: 9px; color: var(--muted-on-dark); }
.tbl-shape.s1 { left: 8%; top: 12%; width: 60px; height: 60px; }
.tbl-shape.s2 { left: 30%; top: 12%; width: 90px; height: 60px; }
.tbl-shape.s3 { left: 62%; top: 12%; width: 60px; height: 60px; }
.tbl-shape.s4 { left: 12%; top: 52%; width: 70px; height: 70px; }
.tbl-shape.s5 { left: 40%; top: 56%; width: 70px; height: 60px; }
.tbl-shape.s6 { left: 68%; top: 50%; width: 80px; height: 70px; }
.tbl-shape.occupied { background: color-mix(in oklab, var(--accent) 20%, var(--ink)); border-color: var(--accent); }
.tbl-shape.reserved { background: color-mix(in oklab, var(--warn) 15%, var(--ink)); border-color: color-mix(in oklab, var(--warn) 40%, transparent); }
.tbl-shape.cycle { animation: tblcycle 8s infinite; }
@keyframes tblcycle {
  0%, 30% { background: var(--ink); border-color: var(--ink-line-strong); }
  35%, 70% { background: color-mix(in oklab, var(--accent) 20%, var(--ink)); border-color: var(--accent); }
  75%, 100% { background: var(--ink); border-color: var(--ink-line-strong); }
}

/* ============ Bar tabs ============ */
.tab-list { display: grid; gap: 8px; }
.tab-row { padding: 12px; border-radius: 10px; background: var(--ink-soft); border: 1px solid var(--ink-line); display: grid; grid-template-columns: 1fr auto; gap: 4px; }
.tab-row .tr-name { font-family: var(--font-display); font-size: 15px; color: var(--paper); }
.tab-row .tr-sub { font-family: var(--font-mono); font-size: 10px; color: var(--muted-on-dark); letter-spacing: .12em; text-transform: uppercase; }
.tab-row .tr-amt { font-family: var(--font-mono); font-size: 15px; color: var(--accent); align-self: center; }
.tab-row.live { border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
.tab-row.live .tr-amt { animation: tramt 3s infinite; }
@keyframes tramt {
  0%, 70% { color: var(--accent); }
  75% { color: var(--paper); transform: scale(1.05); }
  90%, 100% { color: var(--accent); transform: scale(1); }
}
.tab-transfer { padding: 10px 12px; border-radius: 10px; background: color-mix(in oklab, var(--accent) 10%, var(--ink-soft)); border: 1px dashed var(--accent); font-size: 12px; color: var(--accent); font-family: var(--font-mono); letter-spacing: .08em; }

/* ============ Splits demo ============ */
.split-bill { padding: 14px; border-radius: 10px; background: var(--ink-soft); border: 1px solid var(--ink-line); }
.split-total { display: flex; justify-content: space-between; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dashed var(--ink-line-strong); }
.split-total .st-lab { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-on-dark); }
.split-total .st-val { font-family: var(--font-display); font-size: 24px; color: var(--paper); }
.split-pies { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.split-pie { aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--accent) 0% 25%, var(--ink-line-strong) 25% 100%); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--paper); position: relative; }
.split-pie::after { content: ""; position: absolute; inset: 7px; background: var(--ink-soft); border-radius: 50%; }
.split-pie .sp-val { position: relative; z-index: 1; }
.split-pie.p1 { animation: splitfill 6s infinite; }
.split-pie.p2 { animation: splitfill 6s infinite 1.5s; }
.split-pie.p3 { animation: splitfill 6s infinite 3s; }
.split-pie.p4 { animation: splitfill 6s infinite 4.5s; }
@keyframes splitfill {
  0% { background: conic-gradient(var(--accent) 0% 0%, var(--ink-line-strong) 0% 100%); }
  40%, 100% { background: conic-gradient(var(--accent) 0% 100%, var(--ink-line-strong) 100% 100%); }
}

/* ============ Notifications demo ============ */
.notif-feed { display: grid; gap: 8px; }
.notif {
  padding: 10px 12px; border-radius: 10px;
  background: var(--ink-soft); border: 1px solid var(--ink-line);
  display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: center;
  font-size: 12px; color: var(--paper);
  animation: notifIn 8s infinite;
}
.notif::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.notif.ok::before { background: var(--success); }
.notif.warn::before { background: var(--warn); }
.notif .nt-time { font-family: var(--font-mono); font-size: 10px; color: var(--muted-on-dark); }
.notif:nth-child(1) { animation-delay: 0s; }
.notif:nth-child(2) { animation-delay: 1.5s; }
.notif:nth-child(3) { animation-delay: 3s; }
.notif:nth-child(4) { animation-delay: 4.5s; }
.notif:nth-child(5) { animation-delay: 6s; }
@keyframes notifIn {
  0% { opacity: 0; transform: translateX(20px); }
  3%, 95% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-20px); }
}

/* ============ Custom profiles ============ */
.prof-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.prof-card { padding: 12px; border-radius: 10px; background: var(--ink-soft); border: 1px solid var(--ink-line); display: grid; gap: 6px; }
.prof-card.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, var(--ink-soft)); }
.prof-card .pf-title { font-family: var(--font-display); font-size: 13px; color: var(--paper); }
.prof-card .pf-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-on-dark); }
.prof-toggle { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; background: var(--ink-soft); border: 1px solid var(--ink-line); font-size: 12px; color: var(--paper); }
.prof-toggle .pt-sw { width: 28px; height: 14px; background: var(--ink-line-strong); border-radius: 999px; position: relative; }
.prof-toggle .pt-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; background: var(--paper); border-radius: 999px; transition: left .3s; }
.prof-toggle.on .pt-sw { background: var(--accent); }
.prof-toggle.on .pt-sw::after { left: 16px; }

/* ============ Cash drawer ============ */
.cash-grid { display: grid; gap: 10px; }
.cash-denom { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cash-denom div { padding: 8px; border-radius: 8px; background: var(--ink-soft); border: 1px solid var(--ink-line); text-align: center; }
.cash-denom .cd-lab { font-family: var(--font-mono); font-size: 9px; color: var(--muted-on-dark); letter-spacing: .12em; }
.cash-denom .cd-val { font-family: var(--font-display); font-size: 16px; color: var(--paper); margin-top: 2px; }
.cash-summary { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.cash-summary > div { padding: 10px; border-radius: 8px; background: var(--ink-soft); border: 1px solid var(--ink-line); }
.cash-summary .cs-lab { font-family: var(--font-mono); font-size: 9px; color: var(--muted-on-dark); letter-spacing: .12em; text-transform: uppercase; }
.cash-summary .cs-val { font-family: var(--font-display); font-size: 18px; color: var(--paper); margin-top: 4px; }
.cash-summary .cs-var { color: var(--success); }

/* ============ Orders Hub ============ */
.hub-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hub-col { padding: 8px; border-radius: 10px; background: var(--ink-soft); border: 1px solid var(--ink-line); display: grid; gap: 6px; align-content: start; }
.hub-col .hc-head { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-on-dark); padding: 2px 0; }
.hub-col.qr { border-color: color-mix(in oklab, #2EB28E 36%, transparent); background: color-mix(in oklab, #2EB28E 8%, var(--ink-soft)); }
.hub-col.qr .hc-head { color: #2EB28E; }
.hub-card { padding: 8px; border-radius: 8px; background: var(--ink); border: 1px solid var(--ink-line); display: grid; gap: 2px; }
.hub-card .hk-name { font-size: 11px; color: var(--paper); }
.hub-card .hk-amt { font-family: var(--font-mono); font-size: 10px; color: var(--accent); }
.hub-card .hk-pill { display: inline-block; font-family: var(--font-mono); font-size: 8px; padding: 1px 5px; border-radius: 4px; background: var(--ink-soft); color: var(--muted-on-dark); letter-spacing: .1em; }
.hub-card .hk-pill.held { color: var(--warn); }
.hub-card .hk-pill.paid { color: var(--success); }

/* ============ Receipts ============ */
.recpt-frame { display: flex; gap: 16px; align-items: center; justify-content: center; padding-top: 12px; }
.recpt {
  width: 200px; padding: 18px 14px;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
  position: relative;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.5);
  animation: recptprint 5s infinite;
  transform-origin: top center;
}
.recpt::after {
  content: ""; position: absolute; bottom: -10px; left: 0; right: 0; height: 10px;
  background: repeating-linear-gradient(45deg, var(--paper) 0 6px, transparent 6px 12px);
}
@keyframes recptprint {
  0% { clip-path: inset(0 0 100% 0); }
  60%, 100% { clip-path: inset(0 0 0 0); }
}
.recpt h4 { font-family: var(--font-display); font-size: 14px; text-align: center; margin: 0 0 6px; font-weight: 400; }
.recpt .rp-line { display: flex; justify-content: space-between; }
.recpt .rp-rule { border-top: 1px dashed currentColor; margin: 6px 0; }
.recpt .rp-total { font-family: var(--font-display); font-size: 14px; }
.recpt-printer { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: var(--ink-soft); border: 1px solid var(--ink-line); }
.recpt-printer .rpp-icon { width: 44px; height: 28px; border-radius: 4px; background: linear-gradient(to bottom, var(--ink-line-strong) 50%, var(--ink) 50%); }
.recpt-printer .rpp-lab { font-family: var(--font-mono); font-size: 11px; color: var(--paper); }
.recpt-printer .rpp-stat { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--success); letter-spacing: .14em; }

/* ============ Kiosk ============ */
.kio-screen { display: grid; gap: 10px; padding-top: 12px; }
.kio-hero { padding: 14px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 24%, var(--ink-soft)), var(--ink-soft)); border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent); }
.kio-hero h4 { font-family: var(--font-display); font-size: 22px; color: var(--paper); margin: 0; }
.kio-hero p { font-family: var(--font-mono); font-size: 10px; color: var(--accent); letter-spacing: .14em; text-transform: uppercase; margin: 4px 0 0; }
.kio-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kio-tiles > div { padding: 16px 12px; border-radius: 10px; background: var(--ink-soft); border: 1px solid var(--ink-line); text-align: center; }
.kio-tiles > div.on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, var(--ink-soft)); }
.kio-tiles .kt-icon { font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--accent); }
.kio-tiles .kt-lab { font-size: 13px; color: var(--paper); margin-top: 4px; }

/* ============ QR ============ */
.qr-frame { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qr-phone {
  background: var(--ink-soft); border: 1px solid var(--ink-line-strong);
  border-radius: 20px; padding: 12px; display: grid; gap: 8px; align-content: start;
}
.qr-bill { padding: 10px; border-radius: 8px; background: var(--ink); border: 1px solid var(--ink-line); display: grid; gap: 4px; }
.qr-bill .qb-line { display: flex; justify-content: space-between; font-size: 11px; color: var(--paper); }
.qr-bill .qb-total { padding-top: 6px; margin-top: 4px; border-top: 1px dashed var(--ink-line-strong); font-family: var(--font-display); font-size: 16px; color: var(--paper); display: flex; justify-content: space-between; }
.qr-pay-btn { padding: 10px; border-radius: 8px; background: var(--accent); color: var(--ink); text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.qr-stripe { padding: 8px; border-radius: 8px; background: var(--ink); border: 1px solid var(--ink-line); font-family: var(--font-mono); font-size: 10px; color: var(--muted-on-dark); display: flex; justify-content: space-between; align-items: center; }
.qr-image {
  background: var(--ink-soft); border: 1px solid var(--ink-line);
  border-radius: 12px; padding: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.qr-pattern {
  width: 120px; height: 120px; background-color: var(--paper); padding: 6px;
  background-image:
    linear-gradient(var(--ink) 8px, transparent 8px),
    linear-gradient(90deg, var(--ink) 8px, transparent 8px),
    repeating-conic-gradient(var(--ink) 0% 25%, var(--paper) 0% 50%);
  background-size: 100% 100%, 100% 100%, 12px 12px;
  background-position: 0 0, 0 0, 0 0;
  border-radius: 6px;
}
.qr-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--accent); text-transform: uppercase; }

/* ============ Loyalty ============ */
.loy-card {
  padding: 18px; border-radius: 14px;
  background: linear-gradient(135deg, var(--ink-soft), color-mix(in oklab, var(--accent) 16%, var(--ink-soft)));
  border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent);
}
.loy-name { font-family: var(--font-display); font-size: 18px; color: var(--paper); }
.loy-points { font-family: var(--font-display); font-size: 36px; color: var(--accent); margin-top: 8px; }
.loy-points .lp-anim { display: inline-block; animation: lpcount 4s infinite; }
@keyframes lpcount { 0% { content: "240"; } 50% { content: "300"; } 100% { content: "360"; } }
.loy-progress { margin-top: 10px; height: 6px; background: var(--ink-line); border-radius: 999px; overflow: hidden; }
.loy-progress > div { height: 100%; background: var(--accent); animation: lpfill 4s infinite; }
@keyframes lpfill { 0% { width: 40%; } 100% { width: 75%; } }
.loy-tier { font-family: var(--font-mono); font-size: 11px; color: var(--muted-on-dark); letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; }

/* ============ CRM ============ */
.crm-search { padding: 10px 12px; border-radius: 10px; background: var(--ink-soft); border: 1px solid var(--ink-line); display: flex; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--paper); }
.crm-search::before { content: "⌕"; color: var(--accent); }
.crm-search .cs-cursor::after { content: "|"; animation: crmblink 1s infinite; color: var(--accent); }
@keyframes crmblink { 50% { opacity: 0; } }
.crm-card { padding: 12px; border-radius: 10px; background: var(--ink-soft); border: 1px solid var(--ink-line); display: grid; gap: 6px; }
.crm-card .cc-name { font-family: var(--font-display); font-size: 16px; color: var(--paper); }
.crm-card .cc-sub { font-family: var(--font-mono); font-size: 10px; color: var(--muted-on-dark); letter-spacing: .12em; }
.crm-allergens { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.crm-allergens .a-tag { padding: 2px 7px; border-radius: 4px; background: color-mix(in oklab, var(--danger) 18%, transparent); color: var(--danger); font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}