/* ── product icons ─────────────────────────────────────────────────── */
.picon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:var(--blue-wash);color:var(--blue-2);flex:none}
.picon-serve{background:#FFF1E3;color:#C25A00}
.picon-stay{background:#E9F3FF;color:#0E63DD}
.picon-partner{background:#ECEBFF;color:#4B3FD1}
.picon-attendance{background:#E3F6F1;color:#0B7A62}

/* ── interface sketches ────────────────────────────────────────────── */
.mock{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);color:var(--ink);font-size:12px;line-height:1.3;min-width:0}
.mock-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#F1F4F9;border-bottom:1px solid var(--line)}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:#CBD4E1}
.mock-bar span{flex:1;height:14px;border-radius:7px;background:#fff;border:1px solid var(--line);margin-left:8px;max-width:55%}
.mock-body{padding:16px}
.mock i{display:block}
.chip{font-size:10.5px;font-weight:700;border-radius:999px;padding:3px 8px;white-space:nowrap}
.chip-o{background:#FFF1E3;color:#A84E00}
.chip-g{background:#E3F6EA;color:#0A6B30}
.chip-b{background:var(--blue-wash);color:#0B5BD3}
.m-line,.m-total{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)}
.m-line i,.m-total i{height:8px;border-radius:4px;background:#DCE3EE}
.m-total{border-bottom:0;padding-top:12px}
.m-total i{background:#9AA8BD;height:10px}
.m-btn{margin-top:12px;text-align:center;font-weight:700;font-size:12.5px;color:#fff;background:var(--blue-2);border-radius:9px;padding:9px}
.m-btn-o{background:#C25A00}

.m-serve{display:grid;grid-template-columns:1.1fr 1fr;gap:14px}
.m-floor{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start}
.m-table{aspect-ratio:1;border-radius:10px;border:1.5px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--ink-faint);background:#fff}
.m-table b{font-weight:700;font-size:11px}
.t-busy{background:#FFF1E3;border-color:#FFC58F;color:#A84E00}
.t-bill{background:#E3F6EA;border-color:#9ED9B3;color:#0A6B30}
.m-ticket{border:1px solid var(--line);border-radius:12px;padding:12px;background:#FBFCFE}
.m-ticket-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:13px}

.m-days{display:grid;grid-template-columns:38px repeat(7,1fr);margin-bottom:8px}
.m-days span{display:block}
.m-days b{font-weight:600;color:var(--ink-faint);font-size:10.5px;text-align:center}
.m-room{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:8px;padding:6px 0}
.m-room span{font-weight:700;color:var(--ink-soft);font-size:11.5px}
.m-track{position:relative;height:24px;border-radius:7px;background:#F1F4F9}
.m-book{position:absolute;top:3px;bottom:3px;border-radius:6px}
.b-a{background:#7DB4FF}
.b-b{background:#1677FF}
.b-c{background:#0B1D3A}
.m-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;color:var(--ink-soft);font-size:11px}
.m-legend span{display:inline-flex;align-items:center;gap:6px}
.m-legend i{width:10px;height:10px;border-radius:3px}

.m-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.m-stats div{border:1px solid var(--line);border-radius:10px;padding:10px;background:#FBFCFE;min-width:0}
.m-stats small{display:block;color:var(--ink-faint);font-size:10.5px;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-stats i{height:10px;border-radius:5px;background:#0B1D3A}
.m-chart{display:flex;align-items:flex-end;gap:8px;height:84px;margin:14px 0;padding:0 4px;border-bottom:1px solid var(--line)}
.m-chart i{flex:1;border-radius:5px 5px 0 0;background:#C9DDFF}
.m-chart i.hi{background:#4B3FD1}
.m-rows{display:grid;gap:8px}
.m-row{display:flex;align-items:center;gap:9px}
.m-row em{width:22px;height:22px;border-radius:50%;background:#DCE3EE;flex:none}
.m-row i{height:8px;border-radius:4px;background:#DCE3EE}
.m-row .chip{margin-left:auto}

.m-phone-wrap{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:20px}
.m-phone{width:150px;border-radius:26px;background:#0B1D3A;padding:14px 12px 16px;color:#fff;display:flex;flex-direction:column;align-items:center;gap:14px}
.m-notch{width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.28)}
.m-clock{display:grid;gap:6px;justify-items:center;width:100%}
.m-clock i{height:9px;border-radius:5px;background:rgba(255,255,255,.34);width:58%}
.m-clock i + i{width:36%;height:6px;background:rgba(255,255,255,.2)}
.m-punch{width:92px;height:92px;border-radius:50%;background:#0E9C7A;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;box-shadow:0 0 0 8px rgba(18,178,140,.22),0 0 0 16px rgba(18,178,140,.1)}
.m-geo{display:flex;align-items:center;gap:5px;font-size:10px;color:#BFEFE2;margin-top:8px;text-align:center}
.m-side{min-width:0}
.m-side-head{font-weight:700;font-size:12.5px;margin-bottom:10px}
.m-day{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;padding:5px 0}
.m-day span{color:var(--ink-faint);font-size:11px;font-weight:600}
.m-shift{position:relative;height:14px;border-radius:7px;background:#F1F4F9}
.m-shift i{position:absolute;top:0;bottom:0;border-radius:7px;background:#12B28C}

@media (max-width:520px){
  .m-phone-wrap{grid-template-columns:1fr;justify-items:center}
  .m-side{width:100%}
  .mock-body{padding:12px}
}