:root {
  --ink: #08183d;
  --ink-2: #16264d;
  --orange: #ff6b00;
  --orange-soft: #fff1e6;
  --lilac: #f3f1ff;
  --purple: #6e5bd4;
  --green: #0e9f7a;
  --green-soft: #e9f8f3;
  --red: #e24a34;
  --red-soft: #fff0ed;
  --text: #18213a;
  --muted: #687086;
  --line: #e6e8ef;
  --surface: #f6f7fa;
  --white: #fff;
  --shadow: 0 22px 60px rgba(8, 24, 61, .16);
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #eef1f5; }
body { min-width: 320px; overflow: hidden; }
button, input, textarea, select { font: inherit; }
button { color: inherit; border: 0; background: none; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(255,107,0,.24); outline-offset: 2px; }
h1, h2, h3, h4, p { margin: 0; }
svg { flex: none; }

/* Prototype studio */
.studio-topbar { height: 64px; background: var(--white); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 20px; position: relative; z-index: 30; }
.studio-brand { min-width: 240px; display: flex; align-items: center; gap: 9px; }
.studio-brand > span, .brand-mark { display: grid; place-items: center; width: 30px; height: 30px; background: var(--orange); color: #fff; font-weight: 900; font-style: normal; border-radius: 7px 2px 7px 2px; }
.studio-brand b { font-size: 16px; color: var(--ink); }
.studio-brand em { color: var(--muted); font-size: 12px; font-style: normal; padding-left: 9px; border-left: 1px solid var(--line); }
.scope-switch { margin: auto; padding: 4px; background: var(--surface); border-radius: 10px; display: flex; gap: 3px; }
.scope-switch button { padding: 8px 13px; border-radius: 7px; font-size: 13px; display: flex; align-items: center; gap: 6px; color: var(--muted); }
.scope-switch button.active { background: var(--ink); color: #fff; box-shadow: 0 4px 10px rgba(8,24,61,.16); }
.topbar-actions { min-width: 240px; display: flex; justify-content: flex-end; gap: 8px; }
.topbar-actions button { border: 1px solid var(--line); padding: 8px 11px; border-radius: 8px; font-size: 12px; display: flex; align-items: center; gap: 6px; background: #fff; }
.studio-layout { display: grid; grid-template-columns: 240px minmax(560px, 1fr) 280px; height: calc(100vh - 64px); }
.studio-sidebar, .studio-inspector { background: var(--white); overflow: auto; position: relative; z-index: 10; }
.studio-sidebar { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.sidebar-heading { height: 54px; display: flex; align-items: center; gap: 8px; padding: 0 18px; border-bottom: 1px solid var(--line); color: var(--ink); }
.sidebar-heading b { font-size: 13px; }
.sidebar-heading em { margin-left: auto; font-size: 11px; font-style: normal; color: var(--muted); background: var(--surface); padding: 3px 7px; border-radius: 20px; }
.page-tree { padding: 12px 10px 20px; }
.tree-group { padding: 4px 0 10px; }
.tree-group-title { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 8px 9px; color: var(--ink); }
.tree-group-title span { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.tree-group-title small { color: #9299aa; }
.tree-page { width: 100%; text-align: left; padding: 7px 12px 7px 35px; border-radius: 7px; color: var(--muted); font-size: 12px; position: relative; }
.tree-page:hover { color: var(--ink); background: var(--surface); }
.tree-page.active { color: var(--orange); background: var(--orange-soft); font-weight: 700; }
.tree-page.active::before { content: ""; position: absolute; left: 16px; top: 50%; width: 8px; height: 2px; background: var(--orange); }
.sidebar-footnote { margin: auto 13px 16px; border: 1px solid #ddd9ff; background: var(--lilac); padding: 12px; border-radius: 10px; }
.sidebar-footnote b { font-size: 12px; color: var(--ink); }
.sidebar-footnote p { font-size: 11px; line-height: 1.6; color: var(--muted); margin-top: 5px; }
.studio-inspector { border-left: 1px solid var(--line); padding: 24px 20px; }
.inspector-eyebrow { display: inline-flex; color: var(--orange); background: var(--orange-soft); padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.studio-inspector h2 { color: var(--ink); font-size: 24px; margin-top: 10px; }
.inspector-goal { color: var(--muted); font-size: 13px; line-height: 1.65; margin-top: 8px; padding-bottom: 19px; border-bottom: 1px solid var(--line); }
.studio-inspector section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.studio-inspector section h3 { font-size: 12px; color: var(--ink); margin-bottom: 8px; }
.studio-inspector section p { font-size: 12px; line-height: 1.65; color: var(--muted); }
.studio-inspector ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.studio-inspector li { display: flex; gap: 7px; font-size: 12px; line-height: 1.45; }
.studio-inspector li svg { color: var(--green); margin-top: 1px; }
.next-step { display: flex; align-items: center; gap: 7px; color: var(--ink) !important; font-weight: 600; }
.style-note div { display: flex; gap: 6px; margin-bottom: 8px; }
.swatch { width: 24px; height: 9px; border-radius: 10px; }
.swatch.navy { background: var(--ink); }.swatch.orange { background: var(--orange); }.swatch.lilac { background: #dcd5ff; }
.concept-preview { margin-top: 18px; width: 100%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--white); text-align: left; }
.concept-preview img { width: 100%; height: 94px; display: block; object-fit: cover; object-position: top; }
.concept-preview span { padding: 9px 10px; display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 11px; font-weight: 700; }
.studio-stage { min-width: 0; background: #eef1f5; display: flex; flex-direction: column; }
.stage-canvas { flex: 1; overflow: auto; display: grid; place-items: center; padding: 36px; }
.stage-canvas.admin-canvas { display: block; padding: 25px; }
.phone-frame { width: 390px; height: min(790px, calc(100vh - 152px)); min-height: 500px; background: #0b1224; padding: 10px; border-radius: 35px; box-shadow: var(--shadow); position: relative; }
.phone-speaker { position: absolute; z-index: 4; width: 76px; height: 20px; top: 11px; left: calc(50% - 38px); background: #0b1224; border-radius: 0 0 12px 12px; }
.phone-screen { width: 100%; height: 100%; border-radius: 27px; overflow: hidden; background: #fff; position: relative; }
.desktop-frame { height: calc(100vh - 130px); min-height: 610px; width: 100%; background: #0b1224; padding: 9px; border-radius: 15px; box-shadow: var(--shadow); overflow: hidden; }
.desktop-screen { width: 100%; height: 100%; min-width: 900px; overflow: auto; background: #f5f6f8; border-radius: 9px; }
.toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 12px; opacity: 0; pointer-events: none; transition: .2s ease; z-index: 200; box-shadow: 0 8px 30px rgba(8,24,61,.25); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.concept-modal { position: fixed; inset: 0; background: rgba(3,10,28,.84); z-index: 300; display: grid; place-items: center; padding: 34px; backdrop-filter: blur(8px); }
.concept-modal figure { margin: 0; width: min(1120px, 90vw); max-height: 88vh; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.4); }
.concept-modal img { width: 100%; max-height: 78vh; object-fit: contain; display: block; background: #f3f4f7; }
.concept-modal figcaption { display: flex; justify-content: space-between; padding: 13px 17px; color: var(--ink); }
.concept-modal figcaption span { color: var(--muted); font-size: 12px; }
.modal-close { position: fixed; right: 28px; top: 24px; color: #fff; }
.presentation-mode .studio-topbar, .presentation-mode .studio-sidebar, .presentation-mode .studio-inspector { display: none; }
.presentation-mode .studio-layout { grid-template-columns: 1fr; }
.presentation-mode .studio-layout { height: 100vh; }
.presentation-mode .stage-canvas { min-height: 100vh; padding: 28px 36px 64px; }

/* Bobby guide */

@media (max-width: 760px) {
}

/* Shared phone styles */
.phone-screen { display: flex; flex-direction: column; font-size: 13px; }
.phone-status { height: 27px; padding: 9px 17px 0; display: flex; justify-content: space-between; color: var(--ink); font-size: 9px; font-weight: 700; flex: none; }
.mobile-header { min-height: 50px; display: grid; grid-template-columns: 42px 1fr 78px; align-items: center; padding: 0 10px; flex: none; border-bottom: 1px solid transparent; }
.mobile-header.has-subtitle { min-height: 58px; }
.mobile-header h2 { color: var(--ink); text-align: center; font-size: 16px; line-height: 1.2; }
.mobile-header p { color: var(--muted); text-align: center; font-size: 8px; margin-top: 3px; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink); }.header-spacer { width: 34px; }.wechat-menu { justify-self: end; font-size: 10px; color: var(--ink); white-space: nowrap; }.text-button { color: var(--orange); justify-self: end; font-weight: 700; font-size: 12px; }
.mobile-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 19px 24px; scrollbar-width: none; }.mobile-scroll::-webkit-scrollbar { display: none; }
.mobile-bottom-nav { height: 59px; flex: none; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3,1fr); background: rgba(255,255,255,.98); }
.mobile-bottom-nav button { color: #9aa0ae; font-size: 9px; display: grid; justify-items: center; align-content: center; gap: 3px; }.mobile-bottom-nav button.active { color: var(--orange); }.mobile-bottom-nav span { display: block; }
.mobile-action { min-height: 64px; flex: none; padding: 9px 16px 11px; border-top: 1px solid var(--line); background: #fff; display: flex; align-items: center; }
.mobile-action > .primary { width: 100%; }.mobile-action.dual { justify-content: space-between; gap: 14px; }.mobile-action.dual > span small { display: block; color: var(--muted); font-size: 9px; }.mobile-action.dual > span b { color: var(--orange); font-size: 19px; }.mobile-action.dual .primary { flex: 1; }.mobile-action.two-buttons { gap: 9px; }.mobile-action.two-buttons button { flex: 1; }
.primary, .primary-button { background: var(--orange); color: #fff; border-radius: 7px; min-height: 40px; padding: 0 15px; font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.primary:hover, .primary-button:hover { background: #eb6303; }.ghost, .secondary-button { min-height: 40px; padding: 0 14px; border: 1px solid #ccd1dc; color: var(--ink); background: #fff; border-radius: 7px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }.block { width: 100%; }.text-danger { color: var(--red); font-weight: 700; font-size: 11px; }.danger-button { width: 100%; min-height: 42px; border-radius: 7px; background: var(--red); color: #fff; font-weight: 700; }.danger-outline { min-height: 36px; padding: 0 13px; border-radius: 6px; color: var(--red); border: 1px solid #efb7af; background: #fff; font-size: 11px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 21px 0 10px; }.section-title h3 { color: var(--ink); font-size: 13px; padding-left: 9px; border-left: 3px solid var(--orange); }.section-title > span { color: var(--muted); font-size: 9px; }
.tag { display: inline-block; padding: 5px 8px; background: var(--lilac); color: #504591; font-size: 9px; border-radius: 3px; margin: 0 5px 5px 0; }.status { display: inline-flex; align-items: center; width: fit-content; padding: 3px 7px; border-radius: 20px; font-size: 8px; font-weight: 700; background: #f0f2f5; color: var(--muted); white-space: nowrap; }.status-success { background: var(--green-soft); color: var(--green); }.status-warning { background: var(--orange-soft); color: #c85807; }.status-purple { background: var(--lilac); color: var(--purple); }.status-danger { background: var(--red-soft); color: var(--red); }
.avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--lilac); color: var(--purple); display: inline-grid; place-items: center; font-weight: 800; font-style: normal; }.avatar-lg { width: 54px; height: 54px; font-size: 20px; }.avatar.inverse { background: #fff; color: var(--ink); }.small-avatar { width: 26px; height: 26px; font-size: 10px; }
.rule { height: 1px; background: var(--line); margin: 16px 0; }.info-note, .rule-panel { padding: 11px 12px; background: var(--lilac); color: #514f68; border-left: 3px solid var(--purple); font-size: 10px; line-height: 1.55; }.rule-panel strong { display: block; color: var(--ink); font-size: 11px; margin-bottom: 4px; }.orange { color: var(--orange) !important; }

/* Student phone pages */
.home-screen { padding-top: 12px; }.home-hero { padding: 19px 0 8px; }.home-hero h1 { color: var(--ink); font-size: 27px; line-height: 1.28; letter-spacing: -.03em; }.hand-underline { display: block; width: 87px; height: 5px; background: var(--orange); transform: rotate(-2deg); margin: 4px 0 17px; }.search-box { width: 100%; border: 1px solid #ccd1dc; min-height: 43px; padding: 0 12px; display: flex; align-items: center; gap: 9px; color: var(--muted); text-align: left; border-radius: 6px; font-size: 10px; box-shadow: 0 6px 18px rgba(8,24,61,.05); }
.direction-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }.direction-grid button { min-height: 64px; background: #f8f9fb; display: grid; place-items: center; align-content: center; gap: 5px; color: var(--ink); border-bottom: 2px solid transparent; font-size: 10px; }.direction-grid button:hover { color: var(--orange); border-color: var(--orange); }.direction-grid svg { color: var(--orange); }
.senior-row { width: 100%; display: grid; grid-template-columns: 38px 1fr auto 15px; align-items: center; gap: 9px; padding: 13px 0; border-bottom: 1px solid var(--line); text-align: left; }.senior-row.compact { padding: 11px 0; }.senior-main { min-width: 0; }.senior-main strong, .senior-main small { display: block; }.senior-main strong { font-size: 10px; color: var(--ink); line-height: 1.45; }.senior-main strong em { color: var(--orange); font-size: 8px; font-style: normal; margin-right: 4px; }.senior-main small { font-size: 8px; color: var(--muted); margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.senior-price { text-align: right; }.senior-price b { display: block; color: var(--orange); font-size: 13px; }.senior-price small { font-size: 7px; color: var(--muted); }
.profile-result { border-bottom: 1px solid var(--line); }.profile-result .senior-row { border-bottom: 0; }.profile-list .profile-result:last-child { border-bottom: 0; }
.mini-tags { display: flex !important; gap: 3px; margin-top: 5px; overflow: hidden; }.mini-tags .tag { padding: 2px 4px; font-size: 6px; margin: 0; white-space: nowrap; }
.required-mark { color: var(--red); font-size: 11px; }.recruitment-item { padding: 8px 0; border-bottom: 1px dashed var(--line); }.recruitment-item:last-child { border-bottom: 0; }.recruitment-item b { color: var(--ink); font-size: 10px; }.recruitment-item p { color: #3d465c; font-size: 9px; line-height: 1.6; margin-top: 3px; }
.profile-result .match-box { grid-template-columns: auto 1fr; }.profile-result .match-box span { min-width: 0; }
.search-sticky { padding: 3px 16px 10px; border-bottom: 1px solid var(--line); flex: none; }.search-input { height: 38px; background: #f3f4f7; border-radius: 6px; display: flex; align-items: center; gap: 7px; padding: 0 10px; }.search-input input { border: 0; outline: 0; background: transparent; min-width: 0; flex: 1; font-size: 10px; color: var(--ink); }.filter-row, .sort-row { display: flex; gap: 5px; overflow-x: auto; margin-top: 8px; scrollbar-width: none; }.filter-row button { border: 1px solid var(--line); border-radius: 4px; padding: 5px 8px; font-size: 8px; white-space: nowrap; display: flex; gap: 3px; align-items: center; }.filter-row button.active { color: var(--orange); border-color: var(--orange); background: var(--orange-soft); }.sort-row button { font-size: 8px; color: var(--muted); padding: 2px 8px 2px 0; white-space: nowrap; }.sort-row button.active { color: var(--ink); font-weight: 700; }.search-results { padding-top: 7px; }.result-count { color: var(--muted); font-size: 9px; }.result-count b { color: var(--ink); }.match-box { background: var(--lilac); padding: 8px 10px; margin-bottom: 5px; display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 5px; align-items: center; }.match-box strong { color: var(--purple); font-size: 8px; }.match-box span { font-size: 7px; color: #5c5779; display: flex; align-items: center; gap: 2px; }.nearby-note { margin-top: 13px; padding-top: 12px; border-top: 1px dashed #cfd3dc; }.nearby-note strong { font-size: 10px; color: var(--ink); }.nearby-note p { font-size: 8px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.profile-lead { display: flex; gap: 12px; padding: 15px 0 0; }.profile-lead > div > b { color: var(--orange); font-size: 9px; }.profile-lead h1 { color: var(--ink); font-size: 18px; margin-top: 2px; }.profile-lead p { color: var(--muted); font-size: 9px; margin-top: 4px; }.profile-lead strong { display: block; color: var(--orange); font-size: 15px; margin-top: 8px; }.profile-lead strong small { color: var(--muted); font-weight: 400; font-size: 8px; }.detail-screen section > p { color: #3d465c; font-size: 10px; line-height: 1.65; }.long-copy { border-left: 2px solid #cfd2dc; padding-left: 10px; }.date-strip { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }.date-strip button { padding: 7px 1px; border: 1px solid var(--line); color: var(--muted); font-size: 7px; }.date-strip button small { display: block; color: var(--ink); font-size: 8px; margin-top: 4px; }.date-strip button.selected { border-color: var(--orange); background: var(--orange-soft); color: var(--orange); }.date-strip button.selected small { color: var(--orange); }
.summary-line { display: flex; gap: 10px; align-items: center; padding: 13px 0 16px; border-bottom: 1px solid var(--line); }.summary-line > div { flex: 1; }.summary-line strong, .summary-line small { display: block; }.summary-line strong { color: var(--ink); font-size: 11px; }.summary-line small { color: var(--muted); font-size: 8px; margin-top: 3px; }.segment-control { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.segment-control button { min-height: 53px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); font-size: 10px; }.segment-control button small { display: block; color: var(--orange); margin-top: 3px; }.segment-control button.selected { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); background: var(--orange-soft); }.upload-area { width: 100%; min-height: 83px; border: 1px dashed #bbc1ce; display: grid; place-items: center; align-content: center; gap: 3px; color: var(--muted); }.upload-area svg { color: var(--orange); }.upload-area strong { color: var(--ink); font-size: 10px; }.upload-area span { font-size: 8px; }.form-screen textarea, .review-panel textarea, .case-panel textarea { width: 100%; resize: vertical; border: 1px solid #d5d9e1; border-radius: 5px; padding: 10px; font-size: 10px; line-height: 1.6; color: var(--ink); }.check-line { display: flex; gap: 7px; align-items: flex-start; color: var(--muted); font-size: 8px; line-height: 1.5; margin-top: 14px; }.check-line input { accent-color: var(--orange); }.price-breakdown { margin-top: 15px; padding: 11px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; }.price-breakdown span { color: var(--muted); font-size: 9px; }.price-breakdown strong { color: var(--ink); }.price-breakdown small { color: var(--muted); font-size: 8px; grid-column: 1 / -1; margin-top: 3px; }
.success-screen { text-align: center; padding-top: 33px; }.success-icon { width: 70px; height: 70px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; margin: 0 auto 15px; }.success-icon.small { width: 58px; height: 58px; }.success-screen h1, .profile-status-screen h1 { color: var(--ink); font-size: 21px; }.success-screen > p, .profile-status-screen > p { color: var(--muted); line-height: 1.6; font-size: 10px; margin: 6px 20px 20px; }.success-summary { text-align: left; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 0; margin-bottom: 14px; }.success-summary span { display: flex; align-items: center; justify-content: space-between; min-height: 31px; color: var(--muted); font-size: 9px; }.success-summary strong { color: var(--ink); }.success-screen .info-note { text-align: left; margin-bottom: 16px; }.success-screen .ghost { margin-top: 8px; }
.tab-bar, .settlement-tabs { height: 38px; flex: none; border-bottom: 1px solid var(--line); display: grid; grid-auto-flow: column; }.tab-bar button, .settlement-tabs button { color: var(--muted); font-size: 9px; position: relative; }.tab-bar button.active, .settlement-tabs button.active { color: var(--ink); font-weight: 700; }.tab-bar button.active::after, .settlement-tabs button.active::after { content: ""; position: absolute; left: 28%; right: 28%; bottom: -1px; height: 2px; background: var(--orange); }.order-list { padding-top: 13px; background: #f6f7f9; }.order-card { display: block; width: 100%; background: #fff; padding: 14px; text-align: left; margin-bottom: 10px; border-left: 3px solid var(--orange); box-shadow: 0 3px 14px rgba(8,24,61,.04); }.order-card > div { display: flex; justify-content: space-between; align-items: center; }.order-card > div > b { color: var(--ink); font-size: 11px; }.order-card h3 { font-size: 11px; color: var(--ink); margin-top: 12px; }.order-card p { color: var(--muted); font-size: 8px; margin-top: 4px; }.order-card > span { display: flex; justify-content: flex-end; align-items: center; color: var(--orange); font-size: 8px; margin-top: 12px; }
.order-hero { background: var(--ink); color: #fff; margin: 6px -19px 0; padding: 22px 19px; }.order-hero h1 { font-size: 20px; margin: 8px 0 4px; }.order-hero p { color: #c6ccdb; font-size: 9px; }.meeting-box { display: flex; align-items: center; gap: 9px; background: #f7f8fa; padding: 10px; }.meeting-box > span { color: var(--purple); }.meeting-box > div { flex: 1; }.meeting-box strong, .meeting-box small { display: block; }.meeting-box strong { color: var(--ink); font-size: 10px; }.meeting-box small { color: var(--muted); font-size: 8px; margin-top: 3px; }.meeting-box button { color: var(--orange); font-size: 9px; font-weight: 700; }.detail-screen section .primary { margin-top: 8px; }.file-row { width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px 0; text-align: left; }.file-row > span { flex: 1; }.file-row strong, .file-row small { display: block; }.file-row strong { color: var(--ink); font-size: 10px; }.file-row small { color: var(--muted); font-size: 8px; margin-top: 3px; }.question-preview { background: var(--lilac); padding: 8px; color: var(--purple); font-size: 8px; }.quota-row { min-height: 34px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: 9px; }.quota-row span { color: var(--muted); }.inline-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; }.timeline, .admin-timeline { list-style: none; margin: 0; padding: 0; }.timeline li { padding: 0 0 15px 17px; position: relative; border-left: 1px solid #d6d9e1; }.timeline li::before { content: ""; width: 7px; height: 7px; background: #fff; border: 2px solid #aeb4c1; border-radius: 50%; position: absolute; left: -5px; top: 1px; }.timeline li.done::before { border-color: var(--green); background: var(--green); }.timeline b, .timeline small { display: block; }.timeline b { font-size: 9px; color: var(--ink); }.timeline small { font-size: 7px; color: var(--muted); margin-top: 3px; }
.simple-value { padding: 11px; background: #f7f8fa; color: var(--ink); font-size: 10px; }.candidate-list { display: grid; gap: 7px; }.candidate-list button { min-height: 40px; border: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding: 0 10px; text-align: left; color: var(--muted); }.candidate-list button span { flex: 1; font-size: 10px; }.candidate-list button.selected { border-color: var(--purple); background: var(--lilac); color: var(--purple); }.form-screen > .info-note { margin-top: 17px; }.danger-illustration { width: 68px; height: 68px; display: grid; place-items: center; margin: 32px auto 12px; color: var(--red); background: var(--red-soft); border-radius: 50%; }.center-title { text-align: center; font-size: 18px; color: var(--ink); }.cancel-money { padding: 15px 0; margin: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.cancel-money span { display: flex; justify-content: space-between; min-height: 28px; font-size: 9px; color: var(--muted); }.cancel-money span strong { color: var(--ink); }.cancel-money .total { border-top: 1px dashed var(--line); padding-top: 9px; margin-top: 3px; color: var(--ink); font-weight: 700; }.cancel-money .total strong { color: var(--orange); font-size: 16px; }.select-list { display: grid; gap: 6px; }.select-list button { min-height: 39px; border: 1px solid var(--line); padding: 0 10px; display: flex; justify-content: space-between; align-items: center; font-size: 10px; text-align: left; }.select-list button.selected { border-color: var(--orange); background: var(--orange-soft); color: var(--orange); }.upload-row { color: var(--orange); display: flex; align-items: center; gap: 6px; font-size: 10px; margin: 13px 0; }
.account-lead { display: flex; gap: 13px; align-items: center; padding: 19px 0; }.account-lead h1 { color: var(--ink); font-size: 18px; }.account-lead p { color: var(--muted); font-size: 9px; margin-top: 4px; }.role-switch { width: 100%; min-height: 50px; padding: 0 12px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: space-between; }.role-switch > span { display: flex; align-items: center; gap: 9px; }.role-switch b { font-size: 10px; }.plain-list { margin-top: 13px; }.list-row { width: 100%; min-height: 55px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); text-align: left; }.row-icon { color: var(--orange); }.row-copy { flex: 1; }.row-copy strong, .row-copy small { display: block; }.row-copy strong { font-size: 10px; color: var(--ink); }.row-copy small { font-size: 8px; color: var(--muted); margin-top: 3px; }.copy-wechat { width: 100%; min-height: 39px; color: var(--orange); border: 1px solid var(--orange); border-radius: 6px; margin-top: 15px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 10px; }

/* Senior phone pages */
.workbench-screen { padding-top: 10px; }.senior-card { background: var(--ink); color: #fff; padding: 15px; display: grid; grid-template-columns: 70px 1fr; gap: 13px; }.senior-card > div { text-align: center; }.senior-card h3 { font-size: 10px; margin: 5px 0; }.senior-card > button { border-left: 1px solid rgba(255,255,255,.18); padding-left: 14px; color: #fff; text-align: left; position: relative; }.senior-card > button small, .senior-card > button strong { display: block; }.senior-card > button small { color: #bfc7d8; font-size: 8px; }.senior-card > button strong { font-size: 12px; margin-top: 7px; }.senior-card > button svg { position: absolute; right: 0; top: 50%; }.task-list { display: grid; gap: 7px; }.task-list button { min-height: 45px; display: grid; grid-template-columns: 27px 1fr auto 16px; align-items: center; text-align: left; border-bottom: 1px solid var(--line); }.task-list button > svg:first-child { color: var(--orange); }.task-list span { color: var(--ink); font-size: 10px; }.task-list b { color: var(--orange); }.settlement-panel { background: var(--lilac); padding: 14px; margin-top: 16px; }.settlement-panel .section-title { margin-top: 0; }.settlement-panel > small { display: block; color: var(--muted); font-size: 8px; }.settlement-panel > strong { color: var(--ink); font-size: 24px; display: block; margin-top: 2px; }.settlement-panel > button { color: var(--purple); font-size: 9px; display: flex; align-items: center; gap: 3px; margin-top: 9px; }.profile-progress { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; }.profile-progress > span { display: grid; grid-template-columns: 28px 1fr; }.profile-progress svg { color: var(--green); grid-row: span 2; }.profile-progress b { color: var(--ink); font-size: 10px; }.profile-progress small { color: var(--muted); font-size: 8px; }
.consult-time { margin: 8px 0 0; padding: 13px; background: var(--lilac); display: flex; gap: 9px; align-items: center; }.consult-time > svg { color: var(--purple); }.consult-time > span:nth-child(2) { flex: 1; }.consult-time strong, .consult-time small { display: block; }.consult-time strong { color: var(--ink); font-size: 11px; }.consult-time small { color: var(--muted); font-size: 8px; margin-top: 3px; }.student-row { display: flex; gap: 10px; align-items: center; }.student-row > div { flex: 1; }.student-row b, .student-row small { display: block; }.student-row b { color: var(--ink); font-size: 10px; }.student-row small { color: var(--muted); font-size: 8px; }.question-list { margin: 0; padding-left: 17px; }.question-list li { font-size: 9px; color: #3b455b; line-height: 1.55; margin-bottom: 6px; }.settlement-screen { padding-top: 9px; }.money-hero { background: var(--ink); color: #fff; padding: 21px; text-align: center; }.money-hero span, .money-hero small { display: block; color: #bcc4d4; font-size: 8px; }.money-hero strong { display: block; font-size: 29px; margin: 5px 0; }.settlement-tabs { margin-top: 10px; }.settlement-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); }.settlement-row b, .settlement-row small { display: block; }.settlement-row b { font-size: 9px; color: var(--ink); }.settlement-row small { font-size: 8px; color: var(--muted); margin-top: 4px; }.settlement-row > strong { color: var(--orange); }.settlement-screen .info-note { margin-top: 15px; }
.profile-status-screen { text-align: center; padding-top: 20px; }.progress-steps { margin: 21px 0; display: grid; grid-template-columns: repeat(4,1fr); position: relative; }.progress-steps::before { content: ""; position: absolute; height: 1px; left: 10%; right: 10%; top: 6px; background: var(--green); }.progress-steps span { padding-top: 16px; font-size: 7px; color: var(--muted); position: relative; }.progress-steps span::before { content: ""; width: 8px; height: 8px; border: 2px solid var(--green); background: #fff; border-radius: 50%; position: absolute; top: 1px; left: calc(50% - 5px); z-index: 1; }.progress-steps span.done::before { background: var(--green); }.profile-form-screen { padding-top: 5px; }.form-progress { height: 27px; position: relative; background: #eef0f4; margin-bottom: 8px; }.form-progress > span { height: 3px; display: block; background: var(--orange); }.form-progress small { position: absolute; right: 8px; top: 8px; color: var(--muted); font-size: 8px; }.profile-field-list > button { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--line); text-align: left; }.profile-field-list > button > span { flex: 1; display: grid; grid-template-columns: 29px 1fr; }.profile-field-list svg { color: var(--orange); grid-row: span 2; }.profile-field-list b { color: var(--ink); font-size: 10px; }.profile-field-list small { color: var(--muted); font-size: 8px; margin-top: 3px; }.profile-field-list em { font-style: normal; color: var(--green); font-size: 8px; }

/* Admin application */
.admin-app { height: 100%; min-height: 680px; display: grid; grid-template-columns: 164px 1fr; background: #f5f6f8; color: var(--text); }
.admin-sidebar { background: var(--ink); color: #fff; display: flex; flex-direction: column; }
.admin-brand { height: 68px; display: flex; align-items: center; padding: 0 18px; gap: 9px; border-bottom: 1px solid rgba(255,255,255,.12); }.admin-brand b { font-size: 14px; }.admin-sidebar nav { padding: 14px 9px; display: grid; gap: 3px; }.admin-sidebar nav button { min-height: 39px; color: #aeb8cd; border-radius: 5px; padding: 0 10px; display: flex; align-items: center; gap: 9px; text-align: left; font-size: 11px; }.admin-sidebar nav button.active { background: rgba(255,255,255,.11); color: #fff; border-left: 2px solid var(--orange); }.admin-sidebar-foot { margin-top: auto; padding: 16px; color: #818ca5; font-size: 9px; display: flex; gap: 6px; align-items: center; }
.admin-main { min-width: 0; }.admin-top { height: 68px; background: #fff; border-bottom: 1px solid var(--line); padding: 0 24px; display: flex; align-items: center; gap: 13px; }.admin-menu { display: none; }.admin-top h1 { color: var(--ink); font-size: 19px; }.admin-top p { color: var(--muted); font-size: 9px; margin-top: 3px; }.admin-user { margin-left: auto; display: flex; align-items: center; gap: 8px; }.admin-user > svg { color: var(--muted); margin-right: 8px; }.admin-user b { font-size: 10px; color: var(--ink); }.admin-content { padding: 20px 23px 30px; min-width: 0; }
.admin-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }.admin-heading h2 { color: var(--ink); font-size: 14px; }.admin-heading span { color: var(--muted); font-size: 9px; }.task-rail { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-bottom: 15px; }.task-tile { min-height: 72px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; gap: 9px; padding: 12px; text-align: left; position: relative; }.task-tile > span { color: var(--purple); background: var(--lilac); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; }.task-tile small, .task-tile strong { display: block; }.task-tile small { color: var(--muted); font-size: 8px; }.task-tile strong { color: var(--ink); font-size: 18px; margin-top: 2px; }.task-tile.urgent { border-color: #f2b8af; background: var(--red-soft); }.task-tile.urgent > span { background: #fff; color: var(--red); }.task-tile em { position: absolute; right: 7px; top: 6px; color: var(--red); font-size: 7px; font-style: normal; font-weight: 800; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1fr) 210px; gap: 12px; }.table-section, .activity-rail, .editor-panel, .review-panel, .order-primary, .meeting-editor, .refund-list, .case-panel, .funnel-panel, .search-mode-panel, .query-table { background: #fff; border: 1px solid var(--line); }.table-toolbar { min-height: 58px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.table-toolbar.simple { background: #fff; border: 1px solid var(--line); border-bottom: 0; min-height: 51px; }.table-toolbar h3 { color: var(--ink); font-size: 11px; }.table-toolbar > div > span { color: var(--muted); font-size: 8px; }.admin-filters { display: flex; align-items: center; gap: 6px; }.admin-filters button, .admin-filters label { min-height: 29px; border: 1px solid var(--line); border-radius: 5px; background: #fff; padding: 0 8px; font-size: 8px; display: flex; align-items: center; gap: 4px; }.admin-filters label input { border: 0; outline: 0; width: 130px; font-size: 8px; }.admin-table, .management-table, .orders-table, .settlement-admin-table { background: #fff; border: 1px solid var(--line); border-top: 0; }.table-head, .table-row { display: grid; grid-template-columns: .65fr 1fr 1fr .7fr .9fr .8fr .8fr; align-items: center; min-width: 660px; }.table-head, .mgmt-head, .orders-head, .settle-head { min-height: 34px; background: #f7f8fa; color: var(--muted); font-size: 8px; padding: 0 11px; }.table-row { width: 100%; min-height: 49px; padding: 0 11px; border-top: 1px solid var(--line); text-align: left; font-size: 8px; }.table-row.highlight { background: #fffaf6; border-left: 2px solid var(--orange); }.table-row span b, .table-row span small { display: block; }.table-row span b { color: var(--ink); font-size: 9px; }.table-row span small { color: var(--muted); font-size: 7px; }.table-action { color: var(--orange) !important; font-weight: 700; display: flex; align-items: center; gap: 3px; }
.activity-rail { padding: 13px; }.activity-rail > div { display: flex; justify-content: space-between; }.activity-rail h3 { color: var(--ink); font-size: 11px; }.activity-rail > div button { color: var(--orange); font-size: 8px; }.activity-rail ol { list-style: none; padding: 0; margin: 12px 0 0; }.activity-rail li { padding: 0 0 14px 14px; border-left: 1px solid var(--line); position: relative; }.activity-rail li::before { content: ""; position: absolute; left: -4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); }.activity-rail li.urgent::before { background: var(--red); }.activity-rail li.green::before { background: var(--green); }.activity-rail time, .activity-rail b, .activity-rail small { display: block; }.activity-rail time { color: var(--muted); font-size: 7px; }.activity-rail b { color: var(--ink); font-size: 9px; margin-top: 2px; }.activity-rail small { color: var(--muted); font-size: 7px; margin-top: 2px; }.activity-rail li button { color: var(--red); font-size: 7px; font-weight: 700; padding: 4px 0; }
.admin-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }.admin-actions > div { display: flex; gap: 7px; }.admin-tabs { display: flex; border-bottom: 1px solid #ccd0db; }.admin-tabs button { min-height: 36px; padding: 0 12px; color: var(--muted); font-size: 9px; position: relative; }.admin-tabs button.active { color: var(--ink); font-weight: 700; }.admin-tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--orange); }.primary-button, .secondary-button, .danger-outline { min-height: 32px; font-size: 9px; }.management-table { border-top: 1px solid var(--line); }.mgmt-head, .mgmt-row { display: grid; grid-template-columns: 1.2fr 1.3fr .6fr .8fr .75fr .8fr .55fr; align-items: center; min-width: 760px; }.mgmt-row { width: 100%; min-height: 53px; padding: 0 11px; border-top: 1px solid var(--line); text-align: left; font-size: 8px; }.mgmt-row > span:first-child { display: flex; gap: 7px; align-items: center; }.mgmt-row b { color: var(--ink); font-size: 8px; }
.detail-toolbar { min-height: 39px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }.detail-toolbar > div { display: flex; align-items: center; gap: 7px; }.back-link { color: var(--muted); display: flex; align-items: center; gap: 5px; font-size: 9px; }.admin-detail-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(230px,.7fr); gap: 12px; }.profile-editor-head { padding: 15px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }.profile-editor-head > div { flex: 1; }.profile-editor-head h2 { color: var(--ink); font-size: 14px; }.profile-editor-head p { color: var(--muted); font-size: 8px; margin-top: 3px; }.editor-section { min-height: 60px; padding: 10px 14px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }.editor-section > div { flex: 1; }.editor-section h3 { color: var(--ink); font-size: 10px; }.editor-section p { color: var(--muted); font-size: 8px; margin-top: 4px; }.editor-section > button { color: var(--orange); font-size: 8px; display: flex; align-items: center; gap: 4px; margin-left: 13px; }.visibility-toggle { font-size: 8px; display: flex; align-items: center; gap: 5px; color: var(--muted); }.visibility-toggle input { display: none; }.visibility-toggle span { width: 27px; height: 15px; border-radius: 20px; background: #ccd1dc; position: relative; }.visibility-toggle span::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: #fff; position: absolute; left: 2px; top: 2px; transition: .15s; }.visibility-toggle input:checked + span { background: var(--green); }.visibility-toggle input:checked + span::after { left: 14px; }.review-panel { padding: 15px; }.review-panel section { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--line); }.review-panel h3 { color: var(--ink); font-size: 11px; margin-bottom: 10px; }.review-panel label, .meeting-editor label { display: grid; gap: 4px; margin: 8px 0; color: var(--muted); font-size: 8px; }.review-panel input, .review-panel select, .meeting-editor input { height: 31px; border: 1px solid #d5d8e0; padding: 0 8px; background: #fff; font-size: 9px; color: var(--ink); }.proof-file { width: 100%; min-height: 44px; padding: 7px 9px; display: flex; align-items: center; gap: 7px; background: var(--lilac); text-align: left; }.proof-file > span { flex: 1; }.proof-file b, .proof-file small { display: block; }.proof-file b { color: var(--ink); font-size: 8px; }.proof-file small { color: var(--muted); font-size: 7px; margin-top: 3px; }.privacy-line { color: var(--muted); font-size: 7px; display: flex; align-items: center; gap: 4px; margin-top: 7px; }
.profile-picker { min-height: 37px; background: #fff; border: 1px solid var(--line); padding: 0 10px; display: flex; align-items: center; gap: 8px; font-size: 9px; }.availability-layout { display: grid; grid-template-columns: 220px 1fr; gap: 12px; }.rule-list { background: #fff; border: 1px solid var(--line); padding: 13px; }.rule-list h3 { font-size: 11px; color: var(--ink); margin-bottom: 10px; }.rule-list > button { width: 100%; display: block; text-align: left; padding: 10px; border: 1px solid var(--line); margin-bottom: 7px; }.rule-list > button.active { border-color: var(--orange); background: var(--orange-soft); }.rule-list b, .rule-list span { display: block; }.rule-list b { font-size: 9px; color: var(--ink); }.rule-list span { color: var(--muted); font-size: 7px; margin-top: 3px; }.rule-note { display: flex; gap: 6px; color: var(--purple); background: var(--lilac); padding: 9px; margin-top: 13px; }.rule-note p { font-size: 7px; line-height: 1.5; }.week-calendar { background: #fff; border: 1px solid var(--line); overflow: auto; }.week-head, .week-body { display: grid; grid-template-columns: repeat(7,1fr); min-width: 600px; }.week-head { height: 37px; align-items: center; background: #f7f8fa; border-bottom: 1px solid var(--line); }.week-head span { text-align: center; font-size: 8px; color: var(--muted); }.week-body > div { padding: 6px; border-right: 1px solid var(--line); }.slot { width: 100%; min-height: 38px; margin-bottom: 5px; font-size: 8px; color: #a4a9b5; border: 1px dashed #e1e3e9; }.slot.open { color: var(--green); background: var(--green-soft); border: 1px solid #a8ddcc; }.slot small { display: block; font-size: 6px; }
.orders-head, .orders-row { display: grid; grid-template-columns: 1.15fr .85fr 1.25fr .9fr .75fr .75fr .55fr; align-items: center; min-width: 760px; }.orders-row { width: 100%; min-height: 51px; padding: 0 11px; border-top: 1px solid var(--line); text-align: left; font-size: 8px; }.order-detail-layout { display: grid; grid-template-columns: minmax(0,1.5fr) 260px; gap: 12px; }.order-primary { padding: 17px; }.order-title { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 15px; }.order-title small { color: var(--muted); font-size: 8px; }.order-title h2 { color: var(--ink); font-size: 17px; margin: 5px 0; }.order-title p { color: var(--muted); font-size: 9px; }.order-title > strong { color: var(--orange); font-size: 19px; }.order-facts { display: grid; grid-template-columns: repeat(4,1fr); padding: 14px 0; border-bottom: 1px solid var(--line); }.order-facts small, .order-facts b { display: block; }.order-facts small { color: var(--muted); font-size: 7px; }.order-facts b { color: var(--ink); font-size: 9px; margin-top: 4px; }.admin-section { padding: 14px 0 2px; }.admin-section h3 { color: var(--ink); font-size: 10px; margin-bottom: 9px; }.admin-timeline li { display: grid; grid-template-columns: 100px 1fr; min-height: 34px; align-items: start; position: relative; padding-left: 17px; border-left: 1px solid var(--green); }.admin-timeline li::before { content: ""; position: absolute; left: -4px; top: 2px; width: 7px; height: 7px; background: var(--green); border-radius: 50%; }.admin-timeline li.pending { border-color: #d3d6df; }.admin-timeline li.pending::before { background: var(--orange); }.admin-timeline time { color: var(--muted); font-size: 7px; }.admin-timeline b { color: var(--ink); font-size: 8px; }.meeting-editor { padding: 16px; }.meeting-editor h3 { color: var(--ink); font-size: 12px; margin-bottom: 11px; }.meeting-editor p { display: flex; align-items: flex-start; gap: 5px; color: var(--muted); font-size: 7px; line-height: 1.5; margin-top: 8px; }.meeting-editor hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }.meeting-editor .block { margin-bottom: 7px; }
.meeting-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 13px; }.meeting-summary > button { min-height: 58px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; gap: 9px; padding: 10px; text-align: left; }.meeting-summary > button > svg { color: var(--purple); }.meeting-summary b, .meeting-summary strong { display: block; }.meeting-summary b { color: var(--muted); font-size: 8px; }.meeting-summary strong { color: var(--ink); font-size: 17px; }.meeting-summary button.urgent { border-color: #efb3aa; }.meeting-summary button.urgent > svg, .meeting-summary button.urgent strong { color: var(--red); }.meeting-board { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.meeting-board > section { background: #fff; border: 1px solid var(--line); padding: 11px; }.meeting-board h3 { color: var(--ink); font-size: 10px; margin-bottom: 9px; }.meeting-task { width: 100%; display: grid; grid-template-columns: .75fr 1fr auto; gap: 7px; align-items: center; text-align: left; border-top: 1px solid var(--line); padding: 10px 0; }.meeting-task.urgent { border-left: 2px solid var(--red); padding-left: 7px; }.meeting-task.purple { border-left: 2px solid var(--purple); padding-left: 7px; }.meeting-task time, .meeting-task small, .meeting-task b { display: block; }.meeting-task time { color: var(--ink); font-weight: 800; font-size: 10px; }.meeting-task small { color: var(--muted); font-size: 7px; margin-top: 3px; }.meeting-task b { color: var(--ink); font-size: 8px; }.meeting-task em { color: var(--orange); font-size: 7px; font-style: normal; display: flex; align-items: center; white-space: nowrap; }
.refund-layout { display: grid; grid-template-columns: 310px 1fr; gap: 12px; }.refund-row { width: 100%; min-height: 67px; padding: 10px; display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--line); text-align: left; }.refund-row.active { background: var(--orange-soft); border-left: 3px solid var(--orange); }.refund-row b, .refund-row small { display: block; }.refund-row b { color: var(--ink); font-size: 8px; margin-top: 5px; }.refund-row small { color: var(--muted); font-size: 7px; margin-top: 3px; }.case-panel { padding: 16px; }.case-panel h3 { color: var(--ink); font-size: 12px; }.case-meta { display: grid; grid-template-columns: repeat(4,1fr); margin: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 11px 0; }.case-meta span { color: var(--muted); font-size: 7px; }.case-meta b { color: var(--ink); font-size: 8px; display: block; margin-top: 4px; }.case-panel h4 { color: var(--ink); font-size: 9px; margin: 13px 0 6px; }.case-panel > p { color: var(--muted); font-size: 8px; line-height: 1.6; }.case-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 10px; }
.finance-summary { display: grid; grid-template-columns: repeat(3,1fr); background: #fff; border: 1px solid var(--line); margin-bottom: 13px; }.finance-summary span { padding: 15px; border-right: 1px solid var(--line); }.finance-summary small, .finance-summary strong { display: block; }.finance-summary small { color: var(--muted); font-size: 8px; }.finance-summary strong { color: var(--ink); font-size: 20px; margin-top: 4px; }.settle-head, .settle-row { display: grid; grid-template-columns: .35fr 1.2fr .8fr 1fr 1fr 1fr .8fr; align-items: center; min-width: 700px; }.settle-row { min-height: 51px; padding: 0 11px; border-top: 1px solid var(--line); font-size: 8px; }.settle-row > span:nth-child(2) { display: flex; align-items: center; gap: 7px; }.settle-row input { accent-color: var(--orange); }
.metric-strip { display: grid; grid-template-columns: repeat(4,1fr); background: #fff; border: 1px solid var(--line); margin-bottom: 12px; }.metric-strip > span { padding: 14px; border-right: 1px solid var(--line); position: relative; }.metric-strip small, .metric-strip strong, .metric-strip em { display: block; }.metric-strip small { color: var(--muted); font-size: 8px; }.metric-strip strong { color: var(--ink); font-size: 20px; margin-top: 3px; }.metric-strip em { color: var(--green); font-size: 7px; font-style: normal; position: absolute; right: 10px; top: 14px; }.data-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }.funnel-panel, .search-mode-panel, .query-table { padding: 14px; }.panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }.panel-title h3 { color: var(--ink); font-size: 11px; }.panel-title button, .panel-title span { color: var(--muted); font-size: 7px; }.funnel-row { display: grid; grid-template-columns: 100px 1fr; gap: 8px; align-items: center; margin: 9px 0; }.funnel-row span { color: var(--muted); font-size: 8px; display: flex; justify-content: space-between; }.funnel-row b { color: var(--ink); }.funnel-row i { height: 7px; background: #eef0f4; }.funnel-row em { height: 100%; display: block; background: var(--orange); }.mode-row { display: grid; grid-template-columns: 1fr .5fr .5fr; min-height: 30px; align-items: center; border-bottom: 1px solid var(--line); font-size: 8px; }.mode-row b { color: var(--ink); }.mode-row span { color: var(--muted); }.mode-row strong { color: var(--green); text-align: right; }.zero-result { background: var(--lilac); margin-top: 10px; padding: 8px; display: flex; align-items: center; gap: 8px; }.zero-result span { color: var(--purple); font-size: 8px; }.zero-result strong { color: var(--ink); }.zero-result small { margin-left: auto; color: var(--muted); font-size: 7px; }.query-table { margin-top: 12px; }.query-table > div:not(.panel-title) { display: grid; grid-template-columns: 1fr .3fr .5fr; min-height: 34px; align-items: center; border-top: 1px solid var(--line); font-size: 8px; }.query-table span { color: var(--ink); }.query-table b { color: var(--muted); }.query-table em { color: var(--green); font-style: normal; text-align: right; }

@media (max-width: 1260px) {
  .studio-layout { grid-template-columns: 220px minmax(530px,1fr); }
  .studio-inspector { display: none; }
  .studio-brand, .topbar-actions { min-width: 210px; }
}

@media (max-width: 860px) {
  body { overflow: auto; }
  .studio-topbar { height: auto; min-height: 58px; padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
  .studio-brand { min-width: 0; }.studio-brand em { display: none; }.topbar-actions { min-width: 0; margin-left: auto; }.topbar-actions button:last-child { display: none; }
  .scope-switch { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; }.scope-switch button { white-space: nowrap; flex: 1; justify-content: center; }
  .studio-layout { display: block; height: auto; }.studio-sidebar { position: sticky; top: 0; z-index: 20; height: 47px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }.sidebar-heading, .sidebar-footnote, .tree-group-title { display: none; }.page-tree { display: flex; padding: 5px 8px; }.tree-group, .tree-group > div { display: flex; padding: 0; }.tree-page { width: auto; white-space: nowrap; padding: 8px 10px; }.tree-page.active::before { display: none; }
  .studio-stage { min-height: calc(100vh - 132px); }.stage-canvas { min-height: calc(100vh - 132px); padding: 18px 8px; }.stage-canvas.admin-canvas { padding: 12px; }
  .presentation-mode .stage-canvas { padding: 18px 8px 56px; }
  .phone-frame { width: min(390px, calc(100vw - 18px)); height: 760px; max-height: none; min-height: 650px; }
  .desktop-frame { height: 720px; overflow: auto; }.admin-map-grid { grid-template-columns: repeat(2,1fr); }
  .concept-modal { padding: 12px; }.concept-modal figure { width: 95vw; }.concept-modal figcaption span { display: none; }
}