:root {
  --ink: #19212b;
  --muted: #8b95a1;
  --line: #e8ebef;
  --canvas: #f5f7fa;
  --panel: #ffffff;
  --nav: #161f29;
  --nav-soft: #253340;
  --blue: #24a8db;
  --blue-dark: #158bb9;
  --blue-soft: #dff4fc;
  --green: #2dbb83;
  --yellow: #f6ad33;
  --danger: #e35d6a;
  --staff-agent: #bdeafa;
  --staff-customer: #ffffff;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  font-synthesis: none;
}

/* 822: staff-only message administration, order editor and live call console */
.staff-message { position: relative; }
.message-admin-tools { margin-top: 6px; display: flex; gap: 5px; opacity: .18; transition: opacity .15s ease; }
.staff-message:hover .message-admin-tools,
.staff-action-shell:hover .message-admin-tools,
.staff-system-shell:hover .message-admin-tools { opacity: 1; }
.message-admin-tools button { min-height: 25px; padding: 0 8px; border: 1px solid #dde3e7; border-radius: 6px; background: #fff; color: #68737d; font-size: 10px; cursor: pointer; }
.message-admin-tools button:last-child { color: #c65454; }
.edited-mark { margin-left: 5px; color: #97a0a8; font-size: 10px; }
.staff-action-shell,
.staff-system-shell { display: grid; justify-items: center; }
.staff-action-shell .message-admin-tools,
.staff-system-shell .message-admin-tools { justify-content: center; }
.danger-action { border-color: #f0d5d5 !important; background: #fff9f9 !important; }
.danger-action span,
.danger-action b { color: #c95151 !important; }
.order-extra-settings { display: grid; gap: 12px; }
.order-extra-settings label { display: grid; gap: 7px; color: #62707d; font-size: 12px; }
.order-extra-settings input,
.order-extra-settings select { min-height: 42px; padding: 0 11px; border: 1px solid #dfe5e9; border-radius: 9px; background: #fff; }
.section-intro-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.section-intro-actions button { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #596672; font-size: 10px; font-weight: 700; }
.section-intro-actions .primary-button { border: 0; background: var(--blue); color: #fff; }
.order-save-fields { margin-top: 17px; padding-top: 17px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid #edf0f2; }
.order-save-fields label { display: grid; gap: 7px; color: #62707d; font-size: 10px; }
.order-save-fields input,.order-save-fields select { min-width: 0; min-height: 42px; padding: 0 11px; border: 1px solid #dfe5e9; border-radius: 9px; background: #fff; color: #46535e; }
.saved-order-pages-card { margin-top: 18px; }
.saved-order-pages-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.saved-order-pages-card > header p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.saved-order-pages-card > header > span { padding: 5px 9px; border-radius: 12px; background: #eef8fc; color: #258bad; font-size: 9px; font-weight: 700; }
.saved-order-page-list { margin-top: 16px; display: grid; gap: 10px; }
.saved-order-page-item { padding: 13px; display: grid; grid-template-columns: minmax(260px,1fr) auto; align-items: center; gap: 14px; border: 1px solid #e7ebee; border-radius: 11px; background: #fbfcfd; }
.saved-order-page-copy { min-width: 0; display: grid; grid-template-columns: minmax(140px,.7fr) minmax(210px,1fr) auto; align-items: center; gap: 10px; }
.saved-order-page-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.saved-order-page-copy span,.saved-order-page-copy small { color: #77828c; font-size: 9px; }
.saved-order-page-copy input { min-width: 0; height: 31px; padding: 0 9px; border: 1px solid #e2e7ea; border-radius: 7px; background: #fff; color: #8a949d; font-size: 8px; }
.saved-order-page-actions { display: flex; gap: 6px; }
.saved-order-page-actions button { min-height: 31px; padding: 0 9px; border: 1px solid #dfe5e9; border-radius: 7px; background: #fff; color: #64707b; font-size: 9px; cursor: pointer; }
.saved-order-page-actions button.primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.saved-order-page-actions button.danger { color: var(--danger); }
.saved-order-empty { padding: 28px; border: 1px dashed #dfe5e9; border-radius: 10px; color: #96a0a8; font-size: 10px; text-align: center; }
.order-export-frame { position: fixed; left: -10000px; top: 0; width: 620px; height: 1300px; opacity: 0; pointer-events: none; }
.social-provider-status { padding: 12px; display: flex; flex-wrap: wrap; gap: 7px; border-radius: 10px; background: #f6f8fa; }
.social-provider-status span { padding: 5px 9px; border-radius: 12px; background: #fff0f0; color: #a75b5b; font-size: 10px; }
.social-provider-status span.enabled { background: #e9f8f0; color: #278459; }
.staff-call-stage { position: fixed; z-index: 250; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 50% 28%, #354858, #101419 72%); color: #fff; }
.staff-call-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #101419; }
.staff-call-stage audio { display: none; }
.staff-call-copy { position: relative; z-index: 2; text-align: center; text-shadow: 0 2px 12px #000; }
.staff-call-copy > span { width: 82px; height: 82px; margin: 0 auto 17px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); font-size: 36px; }
.staff-call-copy h2 { margin: 0 0 8px; font-size: 24px; }
.staff-call-copy p { margin: 0; color: rgba(255,255,255,.72); }
.staff-share-code { min-width: 310px; margin: 24px auto 0; padding: 16px 20px; display: grid; gap: 6px; border: 1px solid rgba(255,255,255,.2); border-radius: 18px; background: rgba(8,13,18,.52); backdrop-filter: blur(14px); text-shadow: none; }
.staff-share-code small,.staff-share-code span { color: rgba(255,255,255,.7); font-size: 11px; }
.staff-share-code > strong { color: #fff; font-size: 30px; letter-spacing: 4px; }
.staff-share-code > div { margin-top: 5px; display: flex; justify-content: center; gap: 8px; }
.staff-share-code button { height: 32px; padding: 0 12px; border: 1px solid rgba(255,255,255,.24); border-radius: 16px; background: rgba(255,255,255,.1); color: #fff; font-size: 10px; cursor: pointer; }
.staff-call-controls { position: absolute; z-index: 3; bottom: 42px; padding: 11px; display: flex; align-items: center; gap: 10px; border-radius: 18px; background: rgba(18,22,27,.68); backdrop-filter: blur(10px); }
.staff-call-controls label { display: grid; gap: 4px; color: #cdd4da; font-size: 9px; }
.staff-call-controls select { min-width: 100px; height: 34px; padding: 0 8px; border: 0; border-radius: 8px; }
.staff-call-controls button { height: 46px; padding: 0 17px; border: 0; border-radius: 23px; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; }
.staff-call-controls .danger-confirm { background: #df5050; }

@media (hover: none) {
  .message-admin-tools { opacity: 1; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.eyebrow {
  margin: 0 0 4px;
  color: #9ba6b2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

.login-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 22% 14%, rgba(36,168,219,.18), transparent 32%),
    radial-gradient(circle at 82% 84%, rgba(91,115,236,.15), transparent 29%),
    #f4f7fa;
}

.login-card {
  width: min(100%, 430px);
  padding: 42px;
  border: 1px solid rgba(20,31,42,.08);
  border-radius: 24px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 24px 75px rgba(25,37,49,.12);
}

.login-logo,
.brand-mark {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #38c6f4, #1b8fca);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(27,143,202,.3);
}

.login-logo { width: 58px; height: 58px; margin-bottom: 25px; border-radius: 18px; font-size: 25px; }
.login-card h1 { margin: 0; font-size: 30px; letter-spacing: -.04em; }
.login-subtitle { margin: 10px 0 30px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.login-card form { display: grid; gap: 18px; }
.login-card label { display: grid; gap: 8px; color: #626d78; font-size: 13px; }
.login-card input { height: 48px; padding: 0 14px; border: 1px solid #dfe4e9; border-radius: 11px; outline: none; background: #fafbfc; }
.login-card input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36,168,219,.11); }
.login-card form > button { height: 50px; border: 0; border-radius: 11px; background: var(--blue); color: white; font-weight: 700; }
.login-card button:disabled { opacity: .55; }
.form-error { min-height: 18px; margin: -4px 0 0; color: var(--danger); font-size: 12px; text-align: center; }
.preview-hint { margin: 22px 0 0; color: #a2abb5; font-size: 11px; text-align: center; }

.workspace-shell { min-height: 100dvh; }
.main-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: 76px;
  padding: 16px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--nav);
  color: #fff;
}

.brand-mark { width: 45px; height: 45px; margin-bottom: 22px; border-radius: 14px; font-size: 19px; }
.main-nav nav { width: 100%; display: grid; gap: 8px; }
.nav-item {
  width: 100%;
  min-height: 53px;
  padding: 6px 2px;
  display: grid;
  place-items: center;
  gap: 3px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #82909e;
}
.nav-item span { position: relative; width: 20px; height: 20px; display: grid; place-items: center; line-height: 20px; }
.nav-unread { position: absolute; left: 13px; top: -9px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border: 2px solid var(--nav); border-radius: 9px; background: #f25252; color: #fff; font-size: 8px; font-style: normal; font-weight: 800; line-height: 13px; }
.nav-item svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nav-item b { font-size: 10px; font-weight: 600; }
.nav-item:hover, .nav-item.active { background: var(--nav-soft); color: #fff; }
.logout-button { margin-top: auto; }

.workspace-main { min-width: 0; margin-left: 76px; }
.workspace-topbar {
  height: 76px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(25,37,49,.025);
}
.workspace-topbar h1 { margin: 0; font-size: 20px; }
.operator-card { display: grid; grid-template-columns: 10px auto; column-gap: 8px; align-items: center; font-size: 13px; }
.operator-card em { grid-column: 2; color: var(--muted); font-size: 10px; font-style: normal; }
.online-dot, .presence-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(45,187,131,.13); }
.presence-dot.offline { background: #b8c0c8; box-shadow: none; }

.workspace-view { display: none; }
.workspace-view.active { display: block; }
.padded-view { padding: 28px; }

.chat-layout { height: calc(100dvh - 76px); display: grid; grid-template-columns: 308px minmax(400px, 1fr) 310px; overflow: hidden; }
.session-panel, .order-panel, .conversation-panel { min-height: 0; background: var(--panel); }
.session-panel { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.order-panel { border-left: 1px solid var(--line); overflow-y: auto; }
.panel-heading { min-height: 73px; padding: 18px 18px 12px; display: flex; align-items: center; justify-content: space-between; }
.panel-heading h2 { margin: 0 0 2px; font-size: 16px; }
.panel-heading span { color: var(--muted); font-size: 11px; }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #5f6b77; font-size: 18px; }
.session-filters { margin: 0 16px 12px; padding: 3px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 9px; background: #f1f3f5; }
.session-filters button { height: 30px; border: 0; border-radius: 7px; background: transparent; color: #7c8792; font-size: 11px; }
.session-filters button.active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(29,41,54,.08); font-weight: 700; }
.search-box { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: #f8f9fa; color: #9aa4ae; }
.session-panel > .search-box { margin: 0 16px 13px; }
.search-box input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.session-list { flex: 1; overflow-y: auto; }
.session-item { width: 100%; padding: 15px 16px; display: grid; grid-template-columns: 44px 1fr auto; column-gap: 11px; border: 0; border-left: 3px solid transparent; background: transparent; text-align: left; transition: background .18s ease; }
.session-item:hover { background: #f8fafb; }
.session-item.active { border-left-color: var(--blue); background: #eff8fc; }
.list-avatar { grid-row: 1 / span 2; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(145deg,#9bd8f6,#5f8ddb); color: #fff; box-shadow: 0 3px 11px rgba(38,78,115,.14); font-size: 12px; font-weight: 700; }
.list-avatar img { width: 100%; height: 100%; object-fit: cover; }
.session-name { min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.session-name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-presence { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--green); }
.session-time { color: #a2abb4; font-size: 9px; }
.session-preview { min-width: 0; margin-top: 5px; overflow: hidden; color: #8b949e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.unread-badge { min-width: 18px; height: 18px; margin-top: 3px; padding: 0 5px; display: grid; place-items: center; border-radius: 9px; background: var(--danger); color: #fff; font-size: 9px; }
.empty-list { padding: 42px 20px; color: var(--muted); font-size: 12px; text-align: center; }

.conversation-panel { position: relative; display: flex; min-width: 0; background: linear-gradient(180deg,#f5f7f9 0%,#f1f3f5 100%); }
.conversation-empty { width: 100%; display: grid; place-content: center; justify-items: center; color: var(--muted); text-align: center; }
.empty-illustration { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 24px; background: #fff; color: var(--blue); box-shadow: 0 10px 35px rgba(32,48,64,.08); font-size: 28px; }
.conversation-empty h3 { margin: 20px 0 6px; color: #53606d; font-size: 16px; }
.conversation-empty p { width: min(390px, 80%); margin: 0; font-size: 12px; line-height: 1.7; }
.conversation-active { width: 100%; min-width: 0; display: flex; flex-direction: column; }
.conversation-header { min-height: 73px; padding: 10px 18px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); box-shadow: 0 2px 12px rgba(27,39,51,.025); }
.conversation-avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#9bd8f6,#5f8ddb); color: white; font-size: 12px; font-weight: 700; }
.conversation-avatar { overflow: hidden; }
.conversation-avatar img { width: 100%; height: 100%; object-fit: cover; }
.conversation-title { min-width: 0; margin-right: auto; }
.conversation-title h2 { margin: 0; font-size: 14px; }
.conversation-title p { margin: 3px 0 0; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; }
#typing-text { color: var(--blue); }
.secondary-button, .ghost-button, .primary-button { min-height: 36px; padding: 0 14px; border-radius: 9px; font-size: 12px; font-weight: 650; }
.secondary-button { border: 1px solid var(--line); background: #fff; color: #596572; }
.ghost-button { border: 0; background: #f4f6f8; color: #65717d; }
.primary-button { border: 0; background: var(--blue); color: #fff; box-shadow: 0 5px 15px rgba(36,168,219,.17); }
.primary-button:hover { background: var(--blue-dark); }
.mobile-back { display: none; }
.mobile-order-button, .order-panel-close { display: none; }

.staff-message-list { flex: 1; min-height: 0; padding: 22px 24px 15px; overflow-y: auto; }
.staff-load-older { min-height: 31px; margin: 0 auto 18px; padding: 0 14px; display: block; border: 1px solid #dce9ee; border-radius: 16px; background: rgba(255,255,255,.82); color: #4b8da6; font-size: 10px; }
.staff-load-older:disabled { opacity: .55; }
.staff-system { margin: 4px auto 18px; color: #a0a8b1; font-size: 10px; text-align: center; }
.staff-message { margin-bottom: 16px; display: flex; align-items: flex-start; gap: 8px; }
.staff-message.agent { flex-direction: row-reverse; }
.staff-avatar { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(145deg,#3e4b59,#17212c); color: #fff; box-shadow: 0 3px 12px rgba(28,43,57,.13); font-size: 10px; }
.staff-message.agent .staff-avatar { background: linear-gradient(145deg,#bdefff,#5ac2e8); color: #14759a; }
.staff-avatar img { width: 100%; height: 100%; object-fit: cover; }
.staff-message-body { max-width: min(68%, 570px); }
.staff-sender { margin: 0 4px 6px; color: #8e98a2; font-size: 10px; }
.staff-message.agent .staff-sender { text-align: right; }
.auto-reply-mark { margin-left: 6px; padding: 1px 5px; border-radius: 7px; background: #e8f6fb; color: #278db4; font-size: 8px; }
.staff-bubble { padding: 11px 14px; border: 1px solid rgba(30,42,54,.025); border-radius: 6px 15px 15px 15px; background: var(--staff-customer); box-shadow: 0 3px 14px rgba(29,42,54,.055); font-size: 14px; line-height: 1.58; white-space: pre-wrap; overflow-wrap: anywhere; }
.staff-message.agent .staff-bubble { border-radius: 15px 6px 15px 15px; background: var(--staff-agent); }
.staff-meta { margin: 4px 3px 0; display: flex; gap: 6px; color: #9ca5ae; font-size: 9px; }
.staff-message.agent .staff-meta { justify-content: flex-end; }
.read-status.read { color: var(--blue-dark); font-weight: 700; }
.staff-order-card { width: min(330px,100%); padding: 16px; border: 1px solid rgba(30,42,54,.04); border-radius: 12px; background: #fff; box-shadow: 0 6px 22px rgba(29,42,54,.075); }
.staff-order-card h4 { margin: 0 0 9px; display: flex; gap: 7px; align-items: center; font-size: 14px; }
.staff-order-card h4 span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: #fff; font-size: 10px; }
.staff-order-card p { margin: 5px 0; color: #6d7781; font-size: 11px; }
.staff-payment-card { --payment-color: var(--blue); width: min(340px,100%); overflow: hidden; border: 1px solid color-mix(in srgb,var(--payment-color) 20%,#e2e7eb); border-radius: 13px; background: #fff; box-shadow: 0 6px 22px rgba(29,42,54,.075); }
.staff-payment-top { padding: 15px; display: flex; align-items: center; gap: 11px; }
.staff-payment-icon { flex: 0 0 43px; width: 43px; height: 43px; overflow: hidden; border-radius: 11px; background: color-mix(in srgb,var(--payment-color) 11%,white); }
.staff-payment-icon img { width: 100%; height: 100%; object-fit: cover; }
.staff-payment-copy { min-width: 0; }
.staff-payment-copy strong { font-size: 13px; }
.staff-payment-copy p { margin: 4px 0 0; color: #7f8992; font-size: 10px; line-height: 1.5; }
.staff-payment-bottom { min-height: 38px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #edf0f2; color: var(--payment-color); font-size: 10px; font-weight: 700; }
.staff-payment-bottom small { max-width: 60%; overflow: hidden; color: #99a2aa; font-size: 8px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.staff-action-message { max-width: min(620px,90%); margin: 5px auto 17px; padding: 11px 13px; display: grid; grid-template-columns: 30px 1fr auto; gap: 9px; align-items: start; border: 1px solid #e0e6ea; border-radius: 12px; background: rgba(255,255,255,.82); box-shadow: 0 4px 16px rgba(29,42,54,.035); }
.staff-action-message.nudge { border-color: #f0dfb0; background: #fffaf0; }
.staff-action-message.rating { border-color: #f1dfa8; background: #fffaeb; }
.staff-action-message.complaint { border-color: #eed8de; background: #fff8fa; }
.staff-action-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #eef7fb; color: var(--blue-dark); font-size: 13px; font-weight: 800; }
.staff-action-message.nudge .staff-action-icon, .staff-action-message.rating .staff-action-icon { background: #fff0bd; color: #c48710; }
.staff-action-message.complaint .staff-action-icon { background: #fae8ed; color: #bd5e73; }
.staff-action-copy strong { font-size: 11px; }
.staff-action-copy p { margin: 4px 0 0; color: #69747e; font-size: 10px; line-height: 1.55; }
.staff-action-stars { margin-top: 6px; color: #f5ac18; font-size: 14px; letter-spacing: 1px; }
.staff-action-message > time { color: #a1a9b1; font-size: 8px; }
.staff-complaint-images, .detail-complaint-pictures { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.staff-complaint-images img, .detail-complaint-pictures img { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; cursor: zoom-in; }
.staff-media { max-width: min(300px,100%); max-height: 300px; display: block; border-radius: 9px; object-fit: cover; }
.staff-composer { min-height: 164px; padding: 11px 17px 12px; display: flex; flex-direction: column; border-top: 1px solid var(--line); background: #fff; }
.composer-tools { height: 31px; display: flex; align-items: center; gap: 8px; }
.composer-tools label, .composer-tools button { height: 31px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 9px; background: #f2f5f7; color: #606c77; font-size: 11px; }
.composer-tools label { cursor: pointer; }
.composer-tools label span, .composer-tools button span { width: 17px; height: 17px; display: grid; place-items: center; }
.composer-tools b { font-size: 10px; font-weight: 600; }
.composer-tools svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.staff-composer textarea { flex: 1; min-height: 66px; padding: 9px 2px; resize: none; border: 0; outline: 0; color: var(--ink); font-size: 13px; line-height: 1.55; }
.composer-bottom { display: flex; align-items: center; justify-content: space-between; }
.composer-bottom span { color: #abb2b9; font-size: 9px; }
.composer-bottom button { min-width: 78px; height: 33px; border: 0; border-radius: 8px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; }

.order-empty { min-height: 300px; display: grid; place-items: center; padding: 20px; color: var(--muted); font-size: 12px; text-align: center; }
.detail-card { margin: 4px 18px 18px; padding: 14px; display: flex; align-items: center; gap: 11px; border: 1px solid #e5f3e9; border-radius: 12px; background: #f5fcf8; }
.detail-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-weight: 800; }
.detail-card small { display: block; margin-bottom: 3px; color: #7a9789; font-size: 9px; }
.detail-card strong { color: #287655; font-size: 13px; }
.detail-list { margin: 0 18px 18px; }
.detail-list div { padding: 11px 0; border-bottom: 1px dashed #e6e9ec; }
.detail-list dt { margin-bottom: 5px; color: #a0a8b0; font-size: 9px; }
.detail-list dd { margin: 0; color: #48535e; font-size: 11px; line-height: 1.5; word-break: break-all; }
.notes-box { margin: 0 18px 10px; display: grid; gap: 7px; color: #828c96; font-size: 10px; }
.notes-box textarea { min-height: 74px; padding: 10px; resize: vertical; border: 1px solid var(--line); border-radius: 9px; outline: 0; font-size: 11px; }
.primary-wide, .qr-wide { width: calc(100% - 36px); height: 36px; margin: 0 18px 9px; border-radius: 9px; font-size: 11px; font-weight: 700; }
.primary-wide { border: 0; background: var(--blue); color: #fff; }
.qr-wide { border: 1px solid var(--line); background: #fff; color: #57636f; }
.feedback-panel { margin: 18px; padding-top: 14px; border-top: 1px solid #edf0f2; }
.feedback-panel > header { margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.feedback-panel > header strong { color: #4d5964; font-size: 11px; }
.feedback-panel > header span { color: #a1a9b1; font-size: 8px; }
.detail-rating { display: grid; gap: 5px; color: #69747e; font-size: 10px; line-height: 1.5; }
.detail-rating-stars { color: #f4ad1d; font-size: 15px; letter-spacing: 1px; }
.feedback-empty { color: #a0a8b0; font-size: 9px; }
.detail-complaints { display: grid; gap: 8px; }
.detail-complaint-item { padding: 9px; border: 1px solid #edf0f2; border-radius: 9px; background: #fafbfc; }
.detail-complaint-item p { margin: 0; color: #5f6b75; font-size: 10px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.detail-complaint-item time { display: block; margin-top: 5px; color: #a1a9b1; font-size: 8px; }

.section-intro { margin-bottom: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.section-intro h2 { margin: 0; font-size: 24px; }
.section-intro p:not(.eyebrow) { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.stat-row { margin-bottom: 22px; display: grid; grid-template-columns: repeat(3,minmax(150px,220px)); gap: 14px; }
.stat-card { padding: 18px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.stat-card span { color: var(--muted); font-size: 11px; }
.stat-card strong { font-size: 24px; }
.qr-session-grid, .user-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 14px; }
.qr-session-card, .user-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 3px 14px rgba(31,43,55,.03); }
.qr-card-top { display: flex; align-items: center; justify-content: space-between; }
.qr-card-top h3 { margin: 0; font-size: 14px; }
.status-pill { padding: 4px 8px; border-radius: 10px; background: #e7f8f1; color: #23835e; font-size: 9px; font-weight: 700; }
.status-pill.closed { background: #eef0f2; color: #7c858f; }
.qr-session-card dl { margin: 15px 0; display: grid; gap: 9px; }
.qr-session-card dl div { min-width: 0; }
.qr-session-card dt { color: #a2aab3; font-size: 9px; }
.qr-session-card dd { margin: 3px 0 0; overflow: hidden; color: #5e6873; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.card-actions { display: flex; gap: 8px; }
.card-actions button { flex: 1; height: 34px; border-radius: 8px; font-size: 10px; }
.card-actions .view-qr { border: 0; background: var(--blue); color: #fff; }
.card-actions .open-chat { border: 1px solid var(--line); background: #fff; color: #65707b; }

.content-card, .settings-card { border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.table-toolbar { padding: 14px; border-bottom: 1px solid var(--line); }
.table-toolbar .search-box { max-width: 390px; }
.phrase-table-row { min-height: 66px; padding: 11px 16px; display: grid; grid-template-columns: 110px 150px minmax(220px,1fr) 70px 110px; gap: 12px; align-items: center; border-bottom: 1px solid #f0f2f4; font-size: 11px; }
.phrase-table-row.header { min-height: 42px; background: #fafbfc; color: #909aa4; font-size: 9px; font-weight: 700; }
.phrase-table-row:last-child { border-bottom: 0; }
.phrase-content-cell { color: #69747f; line-height: 1.5; }
.phrase-row-actions { display: flex; gap: 5px; }
.phrase-row-actions button { height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #65717c; font-size: 9px; }
.phrase-row-actions button.delete { color: var(--danger); }

.appearance-layout { display: grid; grid-template-columns: minmax(520px,1fr) 400px; gap: 22px; align-items: start; }
.appearance-form { display: grid; gap: 16px; }
.settings-card { padding: 20px; }
.settings-card h3 { margin: 0; font-size: 15px; }
.settings-card > p { margin: 5px 0 18px; color: var(--muted); font-size: 10px; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.settings-field { display: grid; gap: 6px; }
.settings-field span { color: #687480; font-size: 10px; }
.settings-field code { margin-left: 4px; color: #a8b0b8; font-size: 8px; }
.settings-field input, .settings-field select, .settings-field textarea { min-width: 0; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; outline: 0; background: #fff; color: #3d4853; font-size: 11px; }
.settings-field input, .settings-field select { height: 40px; }
.settings-field textarea { min-height: 74px; padding-top: 10px; resize: vertical; line-height: 1.55; }
.settings-field input:focus, .settings-field select:focus, .settings-field textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(36,168,219,.08); }
.color-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.color-field { min-width: 0; display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto 34px; column-gap: 8px; }
.color-field span { grid-column: 1 / -1; margin-bottom: 6px; color: #687480; font-size: 9px; }
.color-field input[type=color] { width: 38px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.color-field input[type=text] { min-width: 0; width: 100%; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 9px; }
.asset-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.asset-field { min-width: 0; padding: 11px; display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; border: 1px dashed #dce1e6; border-radius: 10px; }
.asset-preview { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: #f0f3f6; color: #99a3ac; font-size: 18px; }
.asset-preview img { width: 100%; height: 100%; object-fit: cover; }
.asset-field strong { display: block; margin-bottom: 4px; font-size: 10px; }
.asset-field input { max-width: 100%; color: #818b95; font-size: 8px; }
.live-preview { position: sticky; top: 22px; }
.preview-heading { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.preview-heading button { border: 0; background: transparent; color: var(--blue-dark); font-size: 10px; }
.phone-frame { width: 360px; height: min(730px,calc(100dvh - 175px)); margin: 0 auto; padding: 9px; border: 5px solid #202932; border-radius: 30px; background: #202932; box-shadow: 0 18px 55px rgba(20,30,40,.19); }
.order-editor-layout { grid-template-columns: minmax(560px,1fr) 490px; }
.order-editor-layout .phone-frame { width: 470px; height: min(790px,calc(100dvh - 165px)); }
.phone-frame iframe { width: 100%; height: 100%; border: 0; border-radius: 18px; background: #fff; }

.apk-builder-status { margin-bottom: 16px; padding: 16px 18px; display: grid; grid-template-columns: 42px 1fr; gap: 13px; align-items: center; border: 1px solid #f0d6a0; border-radius: 14px; background: #fffaf0; }
.apk-builder-status > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #fff0c8; color: #bd7c08; font-size: 20px; font-weight: 800; }
.apk-builder-status strong { font-size: 12px; }
.apk-builder-status p { margin: 4px 0 0; color: #87919a; font-size: 9px; }
.apk-builder-status.ready { border-color: #bae5d5; background: #f3fcf8; }
.apk-builder-status.ready > span { background: #dff6ed; color: #15956b; }
.apk-builder-form { display: grid; gap: 16px; }
.apk-meta-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.apk-meta-grid label { display: grid; gap: 6px; color: #687480; font-size: 10px; }
.apk-meta-grid input, .apk-meta-grid select { height: 40px; min-width: 0; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #3d4853; font-size: 11px; }
.apk-copy-settings { grid-template-columns: repeat(3,minmax(0,1fr)); }
.apk-build-actions { padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #d8eaf1; border-radius: 14px; background: #f5fbfd; }
.apk-build-actions p { margin: 0; color: #71808b; font-size: 9px; }
.apk-build-actions button:disabled { opacity: .5; cursor: not-allowed; }
.apk-build-history { margin-top: 18px; }
.apk-build-history > header { margin-bottom: 14px; display: flex; align-items: flex-start; justify-content: space-between; }
.apk-build-history > header p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.apk-build-history > header > span { padding: 5px 9px; border-radius: 12px; background: #edf7fb; color: #278dad; font-size: 9px; }
.apk-build-list { display: grid; gap: 9px; }
.apk-build-item { padding: 13px; display: grid; grid-template-columns: 48px 70px minmax(0,1fr) auto; gap: 13px; align-items: center; border: 1px solid #e2e8ec; border-radius: 12px; background: #fff; }
.apk-build-item.active { border-color: #9fd9c4; background: #f6fcf9; box-shadow: 0 5px 18px rgba(30,118,87,.06); }
.apk-build-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg,#19b982,#239bd2); color: #fff; font-size: 11px; font-weight: 800; }
.apk-build-qr { width: 70px; height: 70px; padding: 4px; border: 1px solid #e1e7eb; border-radius: 9px; background: #fff; object-fit: contain; }
.apk-build-qr-legacy { display: grid; place-items: center; border-style: dashed; color: #b56a59; font-size: 9px; font-weight: 700; }
.apk-build-copy { min-width: 0; }
.apk-build-heading { display: flex; align-items: center; gap: 8px; }
.apk-build-heading strong { font-size: 11px; }
.apk-build-heading em { padding: 3px 7px; border-radius: 9px; background: #dff5ed; color: #168965; font-size: 8px; font-style: normal; }
.apk-build-copy p { margin: 5px 0; color: #7a8690; font-size: 9px; }
.apk-build-copy code { display: block; overflow: hidden; color: #98a1aa; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.apk-build-copy .apk-verified,.apk-build-copy .apk-legacy-warning { margin-top: 5px; display: block; font-size: 8px; }
.apk-build-copy .apk-verified { color: #188760; }
.apk-build-copy .apk-legacy-warning { color: #c35c45; }
.apk-build-row-actions { display: flex; gap: 6px; align-items: center; }
.apk-build-row-actions a, .apk-build-row-actions button { height: 30px; padding: 0 10px; display: inline-flex; align-items: center; border: 1px solid #d4e7ee; border-radius: 8px; background: #f5fbfd; color: #258cab; font-size: 9px; text-decoration: none; }
.apk-build-row-actions button.delete { border-color: #f0dfe2; background: #fff8f9; color: var(--danger); }
.staff-message-share-code { margin-top: 7px; padding: 7px 9px; display: flex; align-items: center; gap: 6px; border-radius: 8px; background: rgba(255,255,255,.72); }
.staff-message-share-code span { color: #71808a; font-size: 9px; }
.staff-message-share-code strong { margin-right: auto; color: #243844; font-size: 13px; letter-spacing: 1px; }
.staff-message-share-code button { min-height: 24px; padding: 0 7px; border: 1px solid #d9e4e9; border-radius: 6px; background: #fff; color: #2987a5; font-size: 8px; cursor: pointer; }
.staff-share-code-time { display: block; margin-top: 4px; color: #89949d; font-size: 8px; }

.user-card { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; }
.user-avatar { position: relative; width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border: 2px solid #fff; border-radius: 50%; background: #e4f5fc; color: #188db9; box-shadow: 0 3px 12px rgba(24,76,104,.13); font-weight: 700; cursor: pointer; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-avatar::after { content: '更换'; position: absolute; inset: auto 0 0; padding: 2px 0; opacity: 0; background: rgba(18,29,40,.72); color: #fff; font-size: 7px; text-align: center; transition: opacity .18s; }
.user-avatar:hover::after { opacity: 1; }
.user-card h3 { margin: 0 0 4px; font-size: 13px; }
.user-card p { margin: 0; color: var(--muted); font-size: 10px; }
.user-card .status-pill { align-self: start; }
.user-card-actions { display: grid; justify-items: end; gap: 7px; }
.user-edit-button { height: 27px; padding: 0 9px; border: 1px solid #d8e8ee; border-radius: 8px; background: #f5fbfd; color: #258bab; font-size: 9px; }
.audit-list { overflow: hidden; }
.audit-item { padding: 13px 16px; display: grid; grid-template-columns: 160px 160px 1fr; gap: 18px; border-bottom: 1px solid #f0f2f4; color: #6f7a84; font-size: 10px; }
.audit-item strong { color: #3f4a55; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 49; opacity: 0; visibility: hidden; background: rgba(18,25,32,.28); transition: .2s ease; }
.drawer-backdrop.open { opacity: 1; visibility: visible; }
.order-drawer-backdrop { position: fixed; inset: 0; z-index: 69; opacity: 0; visibility: hidden; background: rgba(18,25,32,.34); transition: .2s ease; }
.order-drawer-backdrop.open { opacity: 1; visibility: visible; }
.phrase-drawer { position: fixed; z-index: 50; inset: 0 0 0 auto; width: min(430px,100%); padding: 22px; display: flex; flex-direction: column; transform: translateX(100%); transition: .25s ease; background: #fff; box-shadow: -14px 0 48px rgba(20,31,42,.18); }
.phrase-drawer.open { transform: translateX(0); }
.phrase-drawer header { display: flex; align-items: center; justify-content: space-between; }
.phrase-drawer h2 { margin: 0; font-size: 20px; }
.phrase-drawer header button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f1f3f5; color: #65717c; font-size: 22px; }
.phrase-drawer > .search-box { margin: 20px 0 12px; }
.phrase-tabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 11px; }
.phrase-tabs button { flex: none; height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: 15px; background: #fff; color: #6f7a84; font-size: 10px; }
.phrase-tabs button.active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-dark); }
.drawer-phrase-list { flex: 1; overflow-y: auto; }
.drawer-phrase { width: 100%; padding: 13px; margin-bottom: 9px; border: 1px solid var(--line); border-radius: 11px; background: #fff; text-align: left; }
.drawer-phrase:hover { border-color: #a8dff2; background: #f7fcfe; }
.drawer-phrase strong { display: block; margin-bottom: 6px; font-size: 11px; }
.drawer-phrase p { margin: 0; color: #737e88; font-size: 11px; line-height: 1.55; }
.confirm-toggle { min-height: 48px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); color: #68737e; font-size: 10px; }

.modal { width: min(560px,calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 18px; overflow: auto; box-shadow: 0 25px 80px rgba(19,29,39,.24); }
.modal::backdrop { background: rgba(21,29,37,.48); backdrop-filter: blur(2px); }
.modal-card { padding: 22px; }
.modal-card > header { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; }
.modal-card > header h2 { margin: 0; font-size: 19px; }
.modal-card > header button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1f3f5; color: #65717c; font-size: 21px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.form-grid label { display: grid; gap: 7px; color: #66727d; font-size: 10px; }
.form-grid input, .form-grid select, .form-grid textarea { min-width: 0; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; outline: 0; color: #404b56; font-size: 11px; }
.form-grid input, .form-grid select { height: 40px; }
.form-grid textarea { padding-top: 10px; resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--blue); }
.full-field { grid-column: 1 / -1; }
.checkbox-field { display: flex !important; align-items: center; align-self: end; height: 40px; }
.checkbox-field input { width: 16px; height: 16px; }
.modal-tip { margin: 14px 0 0; padding: 10px; border-radius: 8px; background: #f5f8fa; color: #87919b; font-size: 9px; line-height: 1.6; }
.payment-editor-intro { margin-bottom: 16px; padding: 12px; display: flex; align-items: center; gap: 10px; border: 1px solid #dcecf2; border-radius: 11px; background: #f5fbfd; }
.payment-editor-intro > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: var(--blue); color: #fff; font-size: 18px; }
.payment-editor-intro p { margin: 0; display: grid; gap: 3px; }
.payment-editor-intro strong { color: #42505b; font-size: 11px; }
.payment-editor-intro small { color: #86919a; font-size: 9px; }
.user-avatar-editor > div { display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: center; }
.user-avatar-editor input { height: auto; padding: 7px; }
.user-avatar-editor small { grid-column: 2; color: #97a0a8; font-size: 8px; }
.user-avatar-edit-preview { grid-row: 1 / span 2; width: 54px; height: 54px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #e9f7fc; color: #278fb5; font-size: 10px; font-weight: 700; }
.user-avatar-edit-preview img { width: 100%; height: 100%; object-fit: cover; }
.qr-icon-choice { margin: 16px 0 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.qr-icon-choice legend { padding: 0 6px; color: #5d6873; font-size: 11px; font-weight: 700; }
.qr-icon-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.qr-icon-options > label { min-width: 0; padding: 10px; display: flex; align-items: flex-start; gap: 8px; border: 1px solid #e6eaee; border-radius: 10px; cursor: pointer; }
.qr-icon-options > label:has(input:checked) { border-color: #78cce9; background: #f1fbfe; box-shadow: 0 0 0 2px rgba(36,168,219,.07); }
.qr-icon-options input { margin-top: 2px; accent-color: var(--blue); }
.qr-icon-options b { display: block; color: #47525d; font-size: 10px; }
.qr-icon-options small { display: block; margin-top: 4px; color: #98a1aa; font-size: 8px; line-height: 1.45; }
.qr-icon-upload-row { margin-top: 12px; display: grid; grid-template-columns: 54px 1fr; gap: 11px; align-items: center; }
.qr-icon-preview { width: 54px; height: 54px; padding: 4px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.qr-icon-preview img { width: 100%; height: 100%; display: block; border-radius: 8px; object-fit: cover; }
.qr-icon-file { min-width: 0; display: grid; gap: 6px; color: #727d87; font-size: 9px; }
.qr-icon-file input { max-width: 100%; font-size: 9px; }
.modal-card > footer { margin-top: 20px; display: flex; justify-content: flex-end; gap: 9px; }
.session-actions-modal { width: min(470px,calc(100% - 24px)); }
.session-action-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.session-action-grid button { min-height: 96px; padding: 14px; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; border: 1px solid #e4e9ed; border-radius: 13px; background: #fbfcfd; color: #4f5b66; text-align: left; }
.session-action-grid button:hover { border-color: #a7dceb; background: #f4fbfd; }
.session-action-grid button > span { grid-row: 1 / 3; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #e7f6fb; color: #258fb5; font-size: 18px; }
.session-action-grid button b { align-self: end; font-size: 11px; }
.session-action-grid button small { align-self: start; margin-top: 3px; color: #929ca5; font-size: 8px; line-height: 1.45; }
.session-action-grid .session-status-action > span { background: #fff0f2; color: var(--danger); }
.confirm-message { margin: 0; padding: 14px; border-radius: 11px; background: #f7f9fa; color: #66727d; font-size: 11px; line-height: 1.7; }
.danger-confirm { background: var(--danger); box-shadow: 0 5px 15px rgba(227,93,106,.17); }
.danger-confirm:hover { background: #cf4d5b; }
.qr-modal-card { text-align: center; }
.qr-modal-card header { text-align: left; }
.qr-render { position: relative; width: min(320px,80vw); aspect-ratio: 1; margin: 0 auto 12px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.qr-image { width: 100%; height: 100%; display: block; }
.qr-center-icon { position: absolute; left: 50%; top: 50%; width: 18%; height: 18%; padding: 4px; transform: translate(-50%,-50%); border-radius: 15%; background: #fff; object-fit: cover; }
.qr-center-icon:not([src]), .qr-center-icon[src=""] { display: none; }
.qr-modal-card > strong { display: block; font-size: 12px; }
.qr-mode-label { display: inline-block; margin-top: 7px; padding: 3px 8px; border-radius: 10px; background: #eef7fb; color: #2b8caf; font-size: 9px; }
.qr-link { margin: 8px auto 0; max-width: 420px; color: #8a949e; font-size: 9px; word-break: break-all; }

.workspace-toast { position: fixed; z-index: 100; left: 50%; bottom: 28px; max-width: 80vw; padding: 10px 17px; opacity: 0; pointer-events: none; transform: translate(-50%,12px); transition: .2s; border-radius: 18px; background: rgba(22,30,38,.91); color: #fff; font-size: 11px; }
.workspace-toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 1180px) {
  .chat-layout { grid-template-columns: 280px minmax(380px,1fr); }
  .order-panel { position: fixed; z-index: 70; inset: 0 0 0 auto; width: min(370px,100%); display: block; transform: translateX(100%); transition: transform .24s ease; border-left: 0; box-shadow: -16px 0 52px rgba(20,31,42,.18); }
  .order-panel.open { transform: translateX(0); }
  .order-panel-close { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #f1f3f5; color: #65717c; font-size: 21px; }
  .mobile-order-button { display: inline-block; }
  .appearance-layout { grid-template-columns: 1fr; }
  .live-preview { position: static; }
}

@media (max-width: 900px) and (min-width: 761px) {
  #send-order-card { display: none; }
}

@media (max-width: 760px) {
  .workspace-shell { display: block; }
  .main-nav { inset: auto 0 0; width: auto; height: 66px; padding: 6px 7px max(6px,env(safe-area-inset-bottom)); flex-direction: row; }
  .brand-mark { display: none; }
  .main-nav nav { grid-template-columns: repeat(8,1fr); gap: 2px; }
  .nav-item { min-height: 50px; }
  .logout-button { display: none; }
  .workspace-main { margin: 0; padding-bottom: 66px; }
  .workspace-topbar { height: 64px; padding: 0 15px; }
  .workspace-topbar .eyebrow { display: none; }
  .chat-layout { height: calc(100dvh - 130px); display: block; }
  .session-panel { height: 100%; border: 0; }
  .conversation-panel { position: fixed; z-index: 60; inset: 0; display: none; }
  .conversation-panel.mobile-open { display: flex; }
  .conversation-active { height: 100dvh; }
  .mobile-back { position: relative; z-index: 2; width: 42px; height: 42px; display: block; border: 0; border-radius: 50%; background: transparent; color: #56616c; font-size: 31px; }
  .conversation-header { position: relative; min-height: 68px; padding: max(9px,env(safe-area-inset-top)) 10px 8px; gap: 4px; }
  .conversation-avatar { display: none; }
  .conversation-title { position: absolute; left: 62px; right: 62px; margin: 0; text-align: center; }
  .conversation-title h2 { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
  .conversation-title p { justify-content: center; margin-top: 2px; }
  .conversation-header .secondary-button { display: none; }
  .conversation-header .ghost-button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; margin-left: auto; padding: 0; overflow: hidden; border-radius: 50%; background: #f3f5f7; color: transparent; font-size: 0; }
  .conversation-header .ghost-button::after { content: '···'; color: #596570; font-size: 17px; letter-spacing: 1px; }
  .staff-message-list { padding: 22px 12px 14px; }
  .staff-message { margin-bottom: 18px; gap: 9px; }
  .staff-message-body { max-width: calc(100% - 64px); }
  .staff-bubble { padding: 11px 14px; font-size: 15px; line-height: 1.55; }
  .staff-order-card { width: min(315px,calc(100vw - 76px)); padding: 16px; }
  .staff-order-card h4 { font-size: 16px; }
  .staff-order-card p { font-size: 13px; line-height: 1.55; }
  .staff-sender { font-size: 10px; }
  .staff-meta { font-size: 10px; }
  .staff-composer { min-height: 72px; padding: 10px 10px max(10px,env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 7px; align-items: end; border-top: 1px solid #e6e9ed; }
  .composer-tools { height: 44px; gap: 5px; }
  .composer-tools label, .composer-tools button { width: 40px; height: 42px; padding: 0; justify-content: center; border-radius: 21px; background: #f0f2f4; }
  .composer-tools button { width: 42px; }
  .composer-tools b { display: none; }
  .staff-composer textarea { min-height: 44px; height: 44px; max-height: 100px; padding: 11px 14px; border-radius: 22px; background: #f0f2f4; font-size: 14px; line-height: 22px; }
  .staff-composer textarea { overflow-y: auto; scrollbar-width: none; }
  .staff-composer textarea::-webkit-scrollbar { display: none; }
  .composer-bottom { display: contents; }
  .composer-bottom span { display: none; }
  .composer-bottom button { min-width: 62px; height: 44px; border-radius: 22px; font-size: 13px; }
  .padded-view { padding: 18px 13px; }
  .section-intro { align-items: flex-start; }
  .section-intro-actions { width: 100%; justify-content: flex-start; }
  .section-intro h2 { font-size: 20px; }
  .stat-row { grid-template-columns: repeat(3,1fr); gap: 7px; }
  .stat-card { padding: 12px; display: grid; gap: 5px; }
  .stat-card strong { font-size: 19px; }
  .appearance-layout { display: block; }
  .settings-grid, .color-grid, .asset-grid { grid-template-columns: 1fr; }
  .apk-meta-grid { grid-template-columns: 1fr; }
  .apk-build-actions { align-items: stretch; flex-direction: column; }
  .apk-build-item { grid-template-columns: 42px 58px 1fr; }
  .apk-build-icon { width: 42px; height: 42px; }
  .apk-build-qr { width: 58px; height: 58px; }
  .apk-build-row-actions { grid-column: 1 / -1; flex-wrap: wrap; }
  .live-preview { margin-top: 18px; }
  .phone-frame { width: min(360px,100%); height: 650px; }
  .order-editor-layout .phone-frame { width: 100%; height: 690px; }
  .order-save-fields { grid-template-columns: 1fr; }
  .saved-order-page-item { grid-template-columns: 1fr; }
  .saved-order-page-copy { grid-template-columns: 1fr; }
  .saved-order-page-actions { flex-wrap: wrap; }
  .phrase-table-row { grid-template-columns: 90px 1fr 80px; }
  .phrase-table-row > :nth-child(3), .phrase-table-row > :nth-child(4) { display: none; }
  .audit-item { grid-template-columns: 105px 1fr; }
  .audit-item > :last-child { grid-column: 1 / -1; }
  .form-grid { grid-template-columns: 1fr; }
  .full-field { grid-column: auto; }
  .qr-icon-options { grid-template-columns: 1fr; }
  .session-actions-modal { width: calc(100% - 18px); margin-bottom: max(9px,env(safe-area-inset-bottom)); border-radius: 18px; }
  .session-action-grid { grid-template-columns: 1fr; }
  .session-action-grid button { min-height: 77px; }
}