:root {
  --ink: #30392f;
  --muted: #697064;
  --faint: #7c8275;
  --line: #d8dbc9;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --blue: #456349;
  --blue-dark: #334d37;
  --blue-soft: #e6edda;
  --green: #16845b;
  --shadow: 0 18px 52px rgba(16, 24, 40, .11);
  --phone-width: min(440px, 42vw);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: #f8f6ed; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.app-shell { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.topbar { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; background: linear-gradient(145deg, #246fe9, #1554be); box-shadow: 0 5px 14px rgba(23, 105, 224, .25); }
.eyebrow, .section-kicker { color: var(--faint); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 750; }
.brand-lockup h1 { margin: 2px 0 0; font-size: 17px; line-height: 1.1; letter-spacing: -.02em; }
.brand-lockup h1 span { color: var(--muted); font-size: 12px; font-weight: 500; margin-left: 6px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.segmented { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.mode-button { border: 0; color: var(--muted); background: transparent; border-radius: 7px; padding: 7px 11px; font-size: 12px; }
.mode-button span { color: var(--faint); margin-left: 3px; }
.mode-button.is-active { color: var(--blue-dark); background: #fff; box-shadow: 0 1px 4px rgba(16,24,40,.09); }
.ghost-button, .icon-button { border: 1px solid var(--line); color: var(--muted); background: #fff; border-radius: 8px; padding: 8px 11px; font-size: 12px; }
.ghost-button:hover, .icon-button:hover { color: var(--blue); border-color: #becaad; }
.icon-button { padding: 5px 8px; font-size: 16px; line-height: 1; }
.text-button { margin-top: 14px; padding: 5px 0; border: 0; color: var(--blue); background: transparent; font-size: 10px; font-weight: 700; }

.workspace { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 50% 50%; gap: 0; overflow: hidden; }
.prototype-pane { min-width: 0; min-height: 0; padding: 14px 20px 24px; background: #e3e4d7; border-right: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.notes-pane { min-width: 0; min-height: 0; padding: 14px 20px 16px; background: #fff; display: flex; flex-direction: column; overflow: hidden; }
.pane-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 9px; }
.pane-heading h2 { margin: 2px 0 0; font-size: 18px; letter-spacing: -.02em; }
.preview-meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; padding-top: 0; }
.preview-meta select { max-width: 145px; padding: 7px 26px 7px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: #fff; font-size: 11px; }

.phone-stage { position: relative; min-height: 0; height: auto; flex: 1; display: grid; place-items: center; overflow: auto; padding: 18px; }
.phone-frame { position: relative; width: auto; height: min(calc(100vh - 235px), 844px); min-width: 0; max-width: 100%; aspect-ratio: 390 / 844; padding: 8px; border-radius: 45px; background: #20242b; box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.15); z-index: 2; }
.phone-speaker { position: absolute; width: 78px; height: 22px; top: 13px; left: 50%; transform: translateX(-50%); border-radius: 0 0 16px 16px; background: #20242b; z-index: 3; }
.phone-screen { width: 100%; height: 100%; overflow: hidden; border-radius: 38px; background: #f8f6ed; position: relative; }
.phone-home-indicator { position: absolute; bottom: 11px; left: 50%; transform: translateX(-50%); height: 4px; width: 92px; border-radius: 4px; background: rgba(255,255,255,.75); z-index: 3; }
.annotation-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; overflow: visible; }
.mode-edit .annotation-layer { pointer-events: none; }
.annotation-node { fill: #ff7a5c; stroke: #fff; stroke-width: 2; }
.annotation-handle.is-locked .annotation-node { fill: #456349; }
.annotation-label { fill: #ff7a5c; }
.annotation-text { fill: #fff; font: 700 10px Inter, sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.annotation-handle { pointer-events: all; cursor: pointer; }
.annotation-handle.is-unlocked { cursor: grab; }
.annotation-handle.is-unlocked:active { cursor: grabbing; }
.mode-edit .annotation-handle { cursor: grab; }
.mode-edit .annotation-handle:active { cursor: grabbing; }
.mode-edit .annotation-handle.is-locked { cursor: not-allowed; }
.mode-edit .phone-screen { outline: 2px dashed #ff7a5c; outline-offset: 3px; cursor: crosshair; touch-action: none; }

.notes-heading { margin-bottom: 14px; }
.annotation-visibility-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding-top: 7px; color: var(--muted); font-size: 11px; white-space: nowrap; cursor: pointer; }
.annotation-visibility-toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--blue); }
.count-pill { min-width: 27px; height: 27px; display: grid; place-items: center; border-radius: 99px; color: var(--blue-dark); background: var(--blue-soft); font-size: 12px; font-weight: 750; }
.notes-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.notes-filter { display: grid; gap: 5px; flex: 1; }
.notes-filter label { color: var(--faint); font-size: 11px; }
.notes-filter select { width: 100%; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line); color: var(--muted); background: #fff; font-size: 12px; }
.primary-button { border: 0; padding: 10px 13px; border-radius: 8px; color: #fff; background: var(--blue); font-size: 12px; font-weight: 700; box-shadow: 0 4px 10px rgba(23,105,224,.18); }
.primary-button:hover { background: var(--blue-dark); }
.primary-button:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }
.notes-list { min-height: 0; flex: 1; overflow: auto; padding: 14px 2px 20px 0; display: flex; flex-direction: column; align-items: stretch; gap: 11px; }
.note-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; transition: border-color .18s, box-shadow .18s; }
.note-card { flex: 0 0 auto; }
.note-card.is-selected { border-color: #8cb6f5; box-shadow: 0 0 0 3px rgba(23,105,224,.08); }
.note-card-head { display: flex; align-items: center; gap: 9px; min-height: 41px; padding: 7px 12px; border-bottom: 1px solid #e3e4d7; }
.note-id { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: #ff7a5c; font-size: 10px; font-weight: 800; }
.note-title { min-width: 0; flex: 1; }
.note-title-main { display: flex; align-items: center; gap: 5px; min-width: 0; }
.note-title-main strong { min-width: 0; flex: 1; }
.note-scope-toggle { flex: none; padding: 3px 6px; border: 1px solid #becaad; border-radius: 99px; color: #456349; background: #e6edda; font-size: 9px; font-weight: 700; white-space: nowrap; }
.note-scope-toggle.global { color: #6941c6; border-color: #d9c9ff; background: #f4f0ff; }
.note-scope-toggle:hover { filter: brightness(.97); }
.note-title strong { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-lock-button { width: 25px; height: 25px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid #dbe4f2; border-radius: 6px; color: var(--blue); background: #f8f6ed; }
.note-lock-button:hover { color: var(--blue-dark); border-color: #9fc1f4; background: var(--blue-soft); }
.note-lock-button .ui-icon { width: 13px; height: 13px; }
.note-actions { display: flex; align-items: center; gap: 4px; }
.small-icon { width: 25px; height: 25px; display: grid; place-items: center; border: 0; color: var(--faint); background: transparent; border-radius: 6px; }
.small-icon:hover { color: var(--blue); background: var(--blue-soft); }
.note-body { min-height: 220px; padding: 10px 12px 12px; display: grid; gap: 8px; }
.note-field { display: grid; gap: 3px; }
.note-field label { color: var(--faint); font-size: 10px; }
.note-field input, .note-field textarea, .note-field select { width: 100%; min-height: 32px; padding: 7px 8px; border: 1px solid #edf0f4; border-radius: 7px; color: var(--ink); background: #fbfcfe; font-size: 11px; resize: vertical; }
.note-field input:focus, .note-field textarea:focus, .note-field select:focus { outline: 2px solid rgba(23,105,224,.15); border-color: #8cb6f5; }
.note-read-value { min-height: 34px; padding: 8px 9px; border: 1px solid #e3e4d7; border-radius: 8px; color: #465041; background: #fbfcfe; font-size: 11px; line-height: 1.45; word-break: break-word; }
.mode-view .note-card { box-shadow: 0 3px 12px rgba(16,24,40,.04); }
.note-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.notes-empty { margin: auto; text-align: center; max-width: 230px; color: var(--muted); padding: 30px 0; }
.empty-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 16px; color: var(--blue); background: var(--blue-soft); font-size: 23px; }
.notes-empty strong { color: var(--ink); font-size: 13px; }
.notes-empty p { margin: 7px 0; line-height: 1.6; font-size: 11px; }

.statusbar { min-height: 28px; display: flex; align-items: center; padding: 0 32px; color: var(--faint); background: #fff; border-top: 1px solid var(--line); font-size: 10px; }
.statusbar > div:first-child { display: flex; align-items: center; gap: 6px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #22b573; }
.toast { position: fixed; left: 50%; bottom: 48px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 20; padding: 10px 14px; border-radius: 9px; color: #fff; background: rgba(16,24,40,.9); font-size: 12px; transition: opacity .18s, transform .18s; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Phone UI */
.mobile-app { width: 100%; height: 100%; overflow: hidden; color: #30392f; background: #f8f6ed; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.mobile-scroll { height: 100%; overflow: auto; padding: 18px 13px 54px; scrollbar-width: none; }
.mobile-scroll::-webkit-scrollbar { display: none; }
.login-scroll { padding: 18px 14px 68px; }
.login-hero-placeholder { min-height: 138px; display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 8px; padding: 18px 14px; border: 1px dashed #becaad; border-radius: 14px; color: #697064; background: #eeefe3; text-align: left; }
.login-hero-mark { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 9px; color: #456349; background: #e0e8d0; font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.login-hero-placeholder strong, .login-hero-placeholder small { display: block; }
.login-hero-placeholder strong { color: #465041; font-size: 11px; }
.login-hero-placeholder small { margin-top: 3px; color: #697064; font-size: 8px; }
.login-content { width: min(100%, 320px); margin: 0 auto; }
.login-home-content { min-height: 470px; display: flex; flex-direction: column; justify-content: center; padding: 4px 0 20px; text-align: center; }
.login-home-content > p { margin-bottom: 25px !important; }
.login-content .auth-panel { margin-top: 6px; }
.wechat-qr-content { padding: 8px 0 28px; }
.wechat-qr-panel { padding: 17px; border: 1px solid #d8dbc9; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(16,24,40,.04); text-align: center; }
.wechat-qr-title strong, .wechat-qr-title small { display: block; }
.wechat-qr-title strong { color: #30392f; font-size: 15px; }
.wechat-qr-title small { margin-top: 4px; color: #697064; font-size: 9px; }
.wechat-qr-placeholder { width: 148px; height: 148px; margin: 17px auto 13px; border: 8px solid #fff; border-radius: 4px; background-color: #30392f; background-image: linear-gradient(90deg, transparent 18%, #fff 18% 24%, transparent 24% 35%, #fff 35% 40%, transparent 40% 58%, #fff 58% 64%, transparent 64% 78%, #fff 78% 84%, transparent 84%), linear-gradient(0deg, transparent 12%, #fff 12% 18%, transparent 18% 31%, #fff 31% 37%, transparent 37% 51%, #fff 51% 56%, transparent 56% 71%, #fff 71% 78%, transparent 78%); box-shadow: inset 0 0 0 10px #fff, 0 0 0 1px #d0d5dd; }
.wechat-qr-status { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 13px; color: #697064; font-size: 10px; }
.wechat-qr-status .status-dot { width: 7px; height: 7px; background: #f79009; }
.wechat-qr-status.scanned .status-dot { background: #00a870; }
.wechat-qr-status.expired .status-dot { background: #d54941; }
.wechat-qr-panel .text-button { width: 100%; }
.mobile-status { display: flex; justify-content: space-between; padding: 0 6px 9px; color: #111827; font-size: 10px; font-weight: 800; }
.mobile-header { display: flex; align-items: center; justify-content: space-between; padding: 0 3px 11px; }
.mobile-header.centered { justify-content: center; position: relative; }
.detail-header-actions { position: absolute; right: 0; display: flex; gap: 3px; }
.mobile-header h3 { margin: 0; font-size: 19px; letter-spacing: -.04em; }
.mobile-header .back-button { position: absolute; left: 0; }
.create-actions { position: absolute; right: 0; display: flex; align-items: center; gap: 6px; }
.create-actions .text-button { margin: 0; }
.create-actions .small-icon { color: #456349; }
.app-brand { display: flex; align-items: center; gap: 8px; }
.app-brand .brand-circle { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #456349; background: #e6edda; font-weight: 800; font-size: 9px; }
.app-brand strong { display: block; font-size: 18px; letter-spacing: 0; }
.mini-menu { display: flex; gap: 4px; align-items: center; padding: 7px 10px; border: 1px solid #d8dbc9; border-radius: 99px; background: rgba(255,255,255,.8); color: #111827; font-size: 12px; }
.mini-menu em { width: 1px; height: 15px; margin: 0 5px; background: #d8dbc9; }
.search-box { display: flex; align-items: center; gap: 6px; min-height: 31px; padding: 0 10px; border: 1px solid #d8dbc9; border-radius: 99px; background: #fff; box-shadow: 0 3px 10px rgba(16,24,40,.04); color: #697064; font-size: 10px; }
.discover-location { display: flex; align-items: center; justify-content: space-between; margin: 0 0 9px; }
.location-button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid #d8dbc9; border-radius: 8px; color: #456349; background: #fff; font-size: 10px; font-weight: 700; }
.location-note { color: #7c8275; font-size: 9px; }
.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; color: #30392f; background: transparent; font-size: 11px; }
.search-box .search-submit { color: #456349; font-size: 11px; font-weight: 700; }
.mobile-tabs { display: grid; grid-template-columns: repeat(4,1fr); margin: 9px 0 10px; border-bottom: 1px solid #e3e4d7; }
.mobile-tab { position: relative; border: 0; padding: 6px 0 8px; color: #697064; background: transparent; font-size: 10px; }
.mobile-tab.is-active { color: #456349; font-weight: 750; }
.mobile-tab.is-active::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 2px; border-radius: 2px; background: #456349; }
.feed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 8px; }
.feed-column { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.feed-grid .mobile-card { display: block; width: auto; margin: 0; }
.mobile-card { margin: 10px 0; padding: 9px; border: 1px solid #e3e4d7; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(16,24,40,.05); }
.post-card-top { display: grid; grid-template-columns: 96px 1fr; gap: 10px; }
.post-thumb { width: 96px; height: 104px; border-radius: 11px; object-fit: cover; background: #e8eef6; }
.feed-card { padding: 0; overflow: hidden; }
.feed-card .post-card-top { display: block; }
.feed-card .post-thumb { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 0; object-fit: cover; }
.feed-card.feed-hospital-help .post-thumb { aspect-ratio: 1.42 / 1; }
.feed-card.feed-cafe .post-thumb { aspect-ratio: 1 / 1.12; }
.feed-card.feed-rent .post-thumb { aspect-ratio: 1 / 1.08; }
.feed-card.feed-hospital .post-thumb { aspect-ratio: 1.16 / 1; }
.feed-card.feed-doctor .post-thumb { aspect-ratio: 1.28 / 1; }
.feed-card.feed-guangzhou .post-thumb { aspect-ratio: 1 / .84; }
.feed-card .post-card-copy { padding: 0 8px; }
.feed-card .post-label-row { padding-top: 7px; }
.feed-card .post-card-footer { margin: 6px 8px 0; }
.card-action-group { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 8px 9px 9px; }
.feed-card .card-action { width: 100%; margin: 0; }
.card-action.danger { color: #b42318; border-color: #f3c4c0; }
.profile-recent { margin: 13px 0; }
.profile-recent-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: #465041; font-size: 11px; }
.profile-recent-head .small-icon { width: auto; color: #456349; font-size: 9px; }
.profile-recent .feed-grid { gap: 8px; }
.profile-recent .feed-grid .mobile-card { display: block; width: auto; margin: 0; }
.profile-edit-avatar { position: relative; display: grid; place-items: center; margin: 7px 0 15px; }
.profile-edit-avatar .profile-avatar { width: 82px; height: 82px; }
.profile-edit-avatar .small-icon { position: absolute; right: calc(50% - 48px); bottom: 0; width: 25px; height: 25px; color: #456349; background: #fff; border: 1px solid #d8dbc9; }
.profile-city-picker { margin-top: 0; }
.profile-bio-input { min-height: 72px; }
.post-card-copy { min-width: 0; }
.tag { display: inline-flex; padding: 4px 8px; border-radius: 99px; color: #456349; background: #e6edda; font-size: 9px; font-weight: 700; }
.tag.green { color: #16845b; background: #e9f8ef; }
.tag.purple { color: #6641d8; background: #f0eaff; }
.post-card-copy h4 { display: -webkit-box; margin: 6px 0 5px; overflow: hidden; font-size: 11px; line-height: 1.35; letter-spacing: 0; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.post-label-row { display: flex; align-items: center; gap: 4px; min-height: 18px; }
.post-extra, .verified-tag { display: inline-flex; align-items: center; padding: 3px 5px; border-radius: 5px; color: #b54708; background: #fff4e5; font-size: 8px; font-weight: 700; }
.verified-tag { color: #067647; background: #ecfdf3; }
.status-tag { display: inline-flex; align-items: center; padding: 3px 5px; border-radius: 5px; color: #697064; background: #f2f4f7; font-size: 8px; font-weight: 700; }
.status-tag.review { color: #b54708; background: #fff4e5; }
.status-tag.published { color: #067647; background: #ecfdf3; }
.status-tag.rejected, .status-tag.delisted { color: #b42318; background: #fef3f2; }
.post-card-copy p { display: -webkit-box; margin: 0 0 7px; overflow: hidden; color: #697064; font-size: 9px; line-height: 1.45; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.meta-line { overflow: hidden; color: #697064; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.post-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding: 6px 0 7px; border-top: 1px solid #e3e4d7; }
.card-action { width: 100%; margin-top: 8px; padding: 7px 8px; border: 1px solid #becaad; border-radius: 8px; color: #456349; background: #fff; font-size: 9px; font-weight: 700; }
.author { display: flex; align-items: center; gap: 6px; min-width: 0; }
.avatar { width: 21px; height: 21px; border-radius: 50%; object-fit: cover; background: #e9eef6; }
.author strong { display: block; font-size: 9px; }
.author small { color: #7d8ca3; font-size: 8px; }
.metric-row { display: flex; align-items: center; gap: 5px; color: #697064; font-size: 8px; }
.metric { display: flex; align-items: center; gap: 3px; }
.bottom-nav { position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5,1fr); align-items: end; min-height: 45px; padding: 5px 4px 7px; border-top: 1px solid #d8dbc9; background: rgba(255,255,255,.98); }
.bottom-nav button { min-height: 31px; padding: 0; border: 0; color: #7b8492; background: transparent; font-size: 10px; white-space: nowrap; }
.bottom-nav button.is-active { color: #30392f; font-weight: 800; }
.bottom-nav .nav-create { display: grid; min-height: 31px; place-items: center; }
.plus-action { width: 32px; height: 25px; display: grid; place-items: center; margin: 0 auto; border-radius: 7px; color: #fff; background: #456349; font-size: 22px; line-height: 1; box-shadow: 0 4px 10px rgba(23,105,224,.24); }

.activity-intro { margin-bottom: 10px; padding: 11px 12px; border-radius: 10px; background: #e9eedd; }
.activity-intro strong { font-size: 13px; }
.activity-intro p { margin: 4px 0 0; color: #697064; font-size: 9px; line-height: 1.45; }
.activity-tabs { display: flex; gap: 5px; margin-bottom: 9px; overflow: hidden; }
.activity-tabs button { flex: none; padding: 6px 8px; border: 1px solid #d8dbc9; border-radius: 99px; color: #697064; background: #fff; font-size: 9px; }
.activity-tabs button.is-active { color: #fff; border-color: #456349; background: #456349; }
.event-list { display: grid; gap: 8px; }
.event-card { display: grid; grid-template-columns: 92px 1fr; gap: 0 9px; margin: 0; padding: 8px; }
.event-thumb { width: 92px; height: 92px; grid-row: 1 / 3; border-radius: 9px; object-fit: cover; }
.event-card-copy { min-width: 0; }
.event-card-copy h4 { margin: 5px 0 3px; font-size: 11px; line-height: 1.35; }
.event-card-copy p { display: -webkit-box; margin: 0 0 4px; overflow: hidden; color: #697064; font-size: 8px; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.event-meta { display: grid; gap: 2px; color: #697064; font-size: 8px; }
.event-card-footer { display: flex; justify-content: space-between; grid-column: 2; margin-top: 5px; color: #697064; font-size: 8px; }
.event-card-footer strong { color: #456349; }
.event-detail-thumb { width: 100%; height: 174px; margin-bottom: 10px; border-radius: 12px; object-fit: cover; }
.event-detail-title { margin: 7px 0; font-size: 18px; line-height: 1.25; }
.event-detail-meta { display: grid; gap: 5px; padding: 9px 0; color: #697064; font-size: 9px; border-bottom: 1px solid #e3e4d7; }
.event-detail-body { color: #465041; font-size: 10px; line-height: 1.55; }
.event-host { display: flex; align-items: center; gap: 7px; margin: 10px 0; padding: 9px; border-radius: 9px; background: #fff; }
.event-host strong, .event-host small { display: block; }
.event-host strong { font-size: 9px; }
.event-host small { margin-top: 2px; color: #697064; font-size: 8px; }
.review-panel { padding: 12px; border: 1px solid #d8dbc9; border-radius: 11px; background: #fff; }
.rating-row { display: flex; gap: 5px; margin: 9px 0; }
.rating-row button { padding: 0; border: 0; color: #d0d5dd; background: transparent; font-size: 20px; }
.rating-row button.is-active { color: #f4b740; }
.state-banner { margin: 10px 0; padding: 10px; border-radius: 10px; color: #697064; background: #eeefe3; font-size: 10px; line-height: 1.5; }
.state-banner.error { color: #b42318; background: #fef3f2; }
.state-banner.success { color: #067647; background: #ecfdf3; }
.state-banner.pending { color: #6941c6; background: #f4f3ff; }
.auth-panel { margin: 8px 0; padding: 15px; border: 1px solid #d8dbc9; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(16,24,40,.04); }
.auth-panel-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.auth-panel-heading .brand-circle { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #456349; background: #e6edda; font-size: 10px; font-weight: 800; }
.auth-panel-heading strong { display: block; color: #30392f; font-size: 15px; }
.auth-panel-heading small { display: block; margin-top: 2px; color: #697064; font-size: 9px; }
.auth-consent { display: flex; gap: 7px; align-items: flex-start; margin-top: 14px; color: #697064; font-size: 9px; line-height: 1.45; }
.auth-consent input { flex: none; margin-top: 1px; }
.auth-switch { display: block; width: 100%; margin-top: 12px; text-align: center; }
.auth-register-button { display: block; width: 100%; margin-top: 8px; padding: 8px 10px; text-align: right; text-decoration: underline; text-underline-offset: 3px; }
.secondary-lead { margin: 4px 2px 14px; }
.secondary-lead strong { display: block; color: #30392f; font-size: 16px; }
.secondary-lead p { margin: 5px 0 0; color: #697064; font-size: 10px; line-height: 1.5; }
.permission-row, .secondary-action, .settings-row { display: flex; align-items: center; width: 100%; gap: 9px; padding: 11px 10px; border: 1px solid #d8dbc9; border-radius: 11px; color: #465041; background: #fff; text-align: left; }
.permission-row > span:last-child, .secondary-action > span, .settings-row > span:last-child { margin-left: auto; color: #7c8275; font-size: 16px; }
.permission-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #456349; background: #e6edda; font-size: 15px; }
.permission-row strong, .settings-row strong { display: block; font-size: 10px; }
.permission-row small, .settings-row small { display: block; margin-top: 2px; color: #697064; font-size: 8px; }
.city-list { margin-top: 12px; border: 1px solid #e3e4d7; border-radius: 12px; background: #fff; overflow: hidden; }
.city-option { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 11px; border: 0; border-bottom: 1px solid #e3e4d7; color: #465041; background: #fff; text-align: left; }
.city-option:last-child { border-bottom: 0; }
.city-option.is-active { color: #456349; background: #f7fbff; }
.city-option-name { display: flex; align-items: center; gap: 8px; }
.city-radio { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid #c9d6e6; border-radius: 50%; color: #fff; background: #fff; font-size: 11px; }
.city-option.is-active .city-radio { border-color: #456349; background: #456349; }
.city-option small { color: #7c8275; font-size: 8px; }
.safety-hero { display: flex; align-items: flex-start; gap: 9px; margin: 5px 0 15px; padding: 12px; border-radius: 12px; color: #8a4b08; background: #fff7e6; }
.safety-hero-icon { width: 28px; height: 28px; display: grid; place-items: center; flex: none; border-radius: 8px; color: #fff; background: #ed7b2f; font-weight: 800; }
.safety-hero strong { display: block; font-size: 11px; }
.safety-hero p { margin: 4px 0 0; font-size: 9px; line-height: 1.45; }
.secondary-section { margin: 15px 0; }
.secondary-section h4, .preference-group h4, .settings-group h4 { margin: 0 0 7px; color: #697064; font-size: 10px; font-weight: 750; }
.guidance-list, .rule-list, .preference-group, .settings-group { border: 1px solid #e3e4d7; border-radius: 12px; background: #fff; }
.guidance-list > div { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid #e3e4d7; }
.guidance-list > div:last-child { border-bottom: 0; }
.guidance-list > div > span { width: 20px; height: 20px; display: grid; place-items: center; flex: none; border-radius: 50%; color: #456349; background: #e6edda; font-size: 9px; font-weight: 800; }
.guidance-list p { margin: 0; }
.guidance-list strong, .guidance-list small { display: block; }
.guidance-list strong { color: #465041; font-size: 10px; }
.guidance-list small { margin-top: 3px; color: #697064; font-size: 8px; line-height: 1.45; }
.rule-list p { margin: 0; padding: 10px; color: #697064; font-size: 9px; line-height: 1.45; border-bottom: 1px solid #e3e4d7; }
.rule-list p:last-child { border-bottom: 0; }
.secondary-action { justify-content: space-between; margin-top: 17px; color: #456349; border-color: #becaad; font-size: 10px; font-weight: 700; }
.preference-group, .settings-group { margin: 14px 0; padding: 0 10px; }
.preference-group h4, .settings-group h4 { margin: 11px 0 4px; }
.preference-option, .toggle-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 0; border: 0; border-top: 1px solid #e3e4d7; color: #465041; background: #fff; text-align: left; }
.preference-option span:first-child, .toggle-row span { display: block; }
.preference-option strong, .toggle-row strong { display: block; font-size: 10px; }
.preference-option small, .toggle-row small { display: block; margin-top: 2px; color: #697064; font-size: 8px; }
.preference-option.is-active { color: #456349; }
.preference-check { color: #456349; font-size: 15px; font-weight: 800; }
.toggle-row input { width: 31px; height: 18px; accent-color: #456349; }
.settings-row { padding: 11px 0; border: 0; border-top: 1px solid #e3e4d7; border-radius: 0; }
.settings-row.danger { color: #b42318; }
.settings-row.danger small { color: #7c8275; }
.report-reasons { border: 1px solid #e3e4d7; border-radius: 12px; background: #fff; overflow: hidden; }
.report-reason { display: flex; align-items: center; width: 100%; gap: 8px; padding: 11px; border: 0; border-bottom: 1px solid #e3e4d7; color: #465041; background: #fff; text-align: left; font-size: 10px; }
.report-reason:last-child { border-bottom: 0; }
.report-reason > span { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid #c9d6e6; border-radius: 50%; color: #fff; font-size: 10px; }
.report-reason.is-active { color: #456349; background: #f7fbff; }
.report-reason.is-active > span { border-color: #456349; background: #456349; }
.report-details { min-height: 82px; }
.report-success { margin-top: 50px; padding: 17px; border: 1px solid #cdebdc; border-radius: 14px; background: #f6fffa; text-align: center; }
.success-mark { width: 42px; height: 42px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 50%; color: #fff; background: #00a870; font-size: 21px; font-weight: 800; }
.report-success strong { display: block; color: #067647; font-size: 12px; }
.report-success p { margin: 8px 0 15px; color: #697064; font-size: 9px; line-height: 1.5; }
.report-success .primary-button { width: 100%; }
.manage-post-preview { display: flex; gap: 9px; align-items: center; margin: 13px 0; padding: 9px; border: 1px solid #e3e4d7; border-radius: 11px; background: #fff; }
.manage-post-preview img { width: 58px; height: 58px; flex: none; border-radius: 8px; object-fit: cover; }
.manage-post-preview strong, .manage-post-preview small { display: block; }
.manage-post-preview strong { margin-top: 5px; color: #465041; font-size: 10px; line-height: 1.35; }
.manage-post-preview small { margin-top: 4px; color: #7c8275; font-size: 8px; }
.manage-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.manage-actions .ghost-button, .manage-actions .primary-button { width: 100%; }
.danger-button { background: #d54941; }
.danger-button:hover { background: #b42318; }
.unavailable-card { display: flex; gap: 10px; margin: 10px 0; padding: 12px; border: 1px solid #eaecf0; border-radius: 13px; color: #697064; background: #f8fafc; }
.unavailable-icon { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; color: #b42318; background: #fef3f2; font-weight: 800; }
.unavailable-card strong { display: block; color: #465041; font-size: 10px; }
.unavailable-card p { margin: 5px 0 8px; font-size: 9px; line-height: 1.45; }
.unavailable-card .ghost-button { padding: 5px 7px; font-size: 9px; }
.loading-block { height: 86px; border-radius: 13px; background: linear-gradient(90deg,#f2f4f7,#fff,#f2f4f7); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.search-section { margin: 13px 0; }
.search-section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; color: #465041; font-size: 10px; font-weight: 750; }
.result-tabs, .collection-tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin: 10px 0; border-bottom: 1px solid #e3e4d7; }
.collection-tabs { grid-template-columns: repeat(5, 1fr); }
.result-tabs button, .collection-tabs button { padding: 7px 2px 9px; border: 0; color: #697064; background: transparent; font-size: 9px; }
.result-tabs button.is-active, .collection-tabs button.is-active { color: #456349; border-bottom: 2px solid #456349; font-weight: 750; }
.chips { display: flex; gap: 6px; overflow: hidden; }
.chip { flex: none; padding: 7px 9px; border-radius: 99px; color: #697064; background: #e3e4d7; font-size: 9px; }
.chip.trend { color: #456349; background: #e6edda; }
.media-gallery { position: relative; }
.detail-hero { width: 100%; height: auto; border-radius: 15px; object-fit: contain; background: #e8eef6; }
.gallery-count { position: absolute; right: 9px; bottom: 9px; padding: 4px 7px; border-radius: 99px; color: #fff; background: rgba(16,24,40,.62); font-size: 9px; }
.gallery-prev, .gallery-next { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; transform: translateY(-50%); border: 0; border-radius: 50%; color: #fff; background: rgba(16,24,40,.42); font-size: 18px; line-height: 1; }
.gallery-prev { left: 8px; }
.gallery-next { right: 8px; }
.detail-title { margin: 12px 0 8px; font-size: 19px; line-height: 1.2; letter-spacing: -.04em; }
.detail-body { color: #465041; font-size: 11px; line-height: 1.6; }
.detail-body p { margin: 9px 0; }
.contact-box { margin-top: 12px; padding: 10px; border: 1px solid #d8dbc9; border-radius: 12px; background: #fbfdff; }
.safety-banner { color: #8a4b08; background: #fff7e6; }
.contact-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: #465041; font-size: 10px; }
.contact-row strong { min-width: 55px; color: #697064; font-weight: 500; }
.contact-row button { margin-left: auto; padding: 4px 7px; border: 1px solid #becaad; border-radius: 7px; color: #456349; background: #fff; font-size: 9px; }
.detail-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin: 13px 0; padding: 10px 0; border-top: 1px solid #d8dbc9; border-bottom: 1px solid #d8dbc9; }
.detail-actions button { border: 0; color: #697064; background: transparent; font-size: 9px; }
.detail-actions button span { display: block; margin-bottom: 3px; font-size: 17px; }
.detail-bottom-bar { position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr repeat(3, 42px); gap: 5px; align-items: center; padding: 7px 10px 10px; border-top: 1px solid #d8dbc9; background: rgba(255,255,255,.97); }
.detail-bottom-bar button { min-height: 36px; border: 0; color: #697064; background: transparent; font-size: 9px; }
.detail-bottom-bar button span, .detail-bottom-bar button small { display: block; }
.detail-bottom-bar button span { margin-bottom: 2px; font-size: 16px; }
.detail-bottom-bar button small { font-size: 8px; }
.detail-bottom-bar .comment-entry { min-width: 0; overflow: hidden; padding: 8px 10px; border: 1px solid #d7dee9; border-radius: 99px; color: #7c8275; background: #fff; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.comment { display: grid; grid-template-columns: 25px 1fr auto; gap: 7px; margin: 11px 0; }
.comment p { margin: 2px 0; color: #465041; font-size: 10px; line-height: 1.4; }
.comment small { color: #7c8275; font-size: 8px; }
.comment .like { color: #697064; font-size: 9px; }
.compose-comment { display: flex; gap: 7px; align-items: center; padding: 8px; border: 1px solid #d7dee9; border-radius: 99px; color: #7c8275; font-size: 10px; }
.compose-comment input { min-width: 0; flex: 1; border: 0; outline: 0; font-size: 10px; }
.form-card { margin: 9px 0; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid #e3e4d7; box-shadow: 0 8px 20px rgba(16,24,40,.04); }
.upload-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 9px; }
.upload-cell { aspect-ratio: 1; position: relative; display: grid; place-items: center; border: 1px dashed #c9d6e6; border-radius: 10px; color: #456349; background: #fbfdff; font-size: 24px; overflow: hidden; }
.upload-cell img { width: 100%; height: 100%; object-fit: cover; }
.upload-cell small { position: absolute; right: 5px; bottom: 4px; color: #697064; font-size: 9px; }
.form-label { display: block; margin: 12px 0 5px; color: #465041; font-size: 10px; font-weight: 750; }
.mobile-input, .mobile-textarea { width: 100%; padding: 9px; border: 1px solid #d8dbc9; border-radius: 9px; color: #30392f; background: #fff; outline: 0; font-size: 10px; }
.input-with-action { display: flex; align-items: center; gap: 5px; }
.input-with-action .mobile-input { min-width: 0; flex: 1; }
.draft-status { color: #697064; font-size: 9px; text-align: right; }
.mobile-textarea { min-height: 70px; resize: none; line-height: 1.5; }
.type-tabs { display: grid; grid-template-columns: repeat(3,1fr); margin: 8px 0; border: 1px solid #d8dbc9; border-radius: 9px; overflow: hidden; }
.type-tabs button { border: 0; padding: 8px 2px; color: #697064; background: #fff; font-size: 9px; }
.type-tabs button { display: flex; align-items: center; justify-content: center; gap: 4px; }
.type-icon { display: grid; width: 15px; height: 15px; place-items: center; }
.type-icon .ui-icon { width: 14px; height: 14px; }
.type-tabs button.is-active { color: #456349; background: #e6edda; }
.profile-head { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 6px 2px 18px; }
.profile-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 5px 18px rgba(16,24,40,.1); }
.profile-head h4 { margin: 0; font-size: 20px; letter-spacing: -.04em; }
.profile-head p { margin: 5px 0; color: #697064; font-size: 10px; line-height: 1.4; }
.stats { display: grid; grid-template-columns: repeat(3,1fr); padding: 13px 0; border: 1px solid #e3e4d7; border-radius: 13px; background: #fff; box-shadow: 0 8px 20px rgba(16,24,40,.04); text-align: center; }
.stats strong { display: block; font-size: 16px; }
.stats span { color: #697064; font-size: 9px; }
.menu-list { margin: 11px 0; padding: 0 11px; border: 1px solid #e3e4d7; border-radius: 13px; background: #fff; box-shadow: 0 8px 20px rgba(16,24,40,.04); }
.menu-list button { display: flex; align-items: center; width: 100%; padding: 11px 2px; border: 0; border-bottom: 1px solid #e3e4d7; color: #465041; background: #fff; text-align: left; font-size: 10px; }
.menu-list button:last-child { border-bottom: 0; }
.menu-icon { width: 28px; height: 28px; display: grid; place-items: center; flex: none; border-radius: 8px; color: #456349; background: #e6edda; }
.menu-icon .ui-icon { width: 16px; height: 16px; }
.menu-chevron { margin-left: auto; color: #7c8275; font-size: 15px; }
.notification { display: grid; grid-template-columns: 29px 1fr auto; gap: 8px; align-items: start; padding: 11px 0; border-bottom: 1px solid #e3e4d7; }
.notification:last-child { border-bottom: 0; }
.notification-group { margin: 10px 0; padding: 0 10px; border: 1px solid #e3e4d7; border-radius: 13px; background: #fff; }
.notification-group-title { padding: 10px 0 3px; color: #465041; font-size: 10px; font-weight: 750; }
.message-tabs { grid-template-columns: repeat(3, 1fr); }
.notification .notice-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: #456349; background: #e6edda; font-size: 14px; }
.notification strong { display: block; font-size: 10px; }
.notification p { margin: 3px 0; color: #697064; font-size: 9px; line-height: 1.4; }
.notification time { color: #7c8275; font-size: 8px; }

@media (max-width: 1100px) {
  .workspace { grid-template-columns: 50% 50%; }
  .prototype-pane { padding-left: 22px; padding-right: 22px; }
  .phone-stage { padding-left: 35px; padding-right: 35px; }
  .topbar { padding: 0 20px; }
  .statusbar { padding: 0 20px; }
}
@media (max-width: 820px) {
  .app-shell { height: auto; min-height: 100vh; overflow: visible; }
  .topbar { height: auto; min-height: 70px; align-items: flex-start; gap: 12px; padding-top: 14px; padding-bottom: 14px; flex-direction: column; }
  .topbar-actions { width: 100%; overflow: auto; }
  .workspace { display: block; }
  .workspace { overflow: visible; }
  .prototype-pane { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .annotation-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
  .phone-stage { min-height: 680px; height: auto; flex: none; }
  .phone-frame { width: 390px; }
  .notes-pane { min-height: 540px; overflow: visible; }
  .statusbar { gap: 8px; padding: 9px 16px; flex-direction: column; align-items: flex-start; }
}
.author > div { min-width: 0; flex: 1 1 auto; }
.author small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow-author, .author .ghost-button { flex: 0 0 auto; white-space: nowrap; }
.follow-author{margin-left:auto;padding:6px 12px;border:0;border-radius:7px;color:#fff;background:#ef6b61;font-size:10px;font-weight:700}.follow-author.is-following{color:#697064;background:#eef1f4}
.trade-card { display:flex; gap:10px; align-items:center; justify-content:space-between; margin:14px 0; padding:12px; border:1px solid #cfe0f8; border-radius:13px; background:#f6faff; }
.trade-card > div { min-width:0; flex:1; }
.trade-card small { display:block; color:#456349; font-size:9px; font-weight:700; }
.trade-card strong { display:block; margin-top:3px; color:#30392f; font-size:17px; }
.trade-card strong span { color:#697064; font-size:9px; font-weight:500; }
.trade-card p { margin:4px 0 0; color:#697064; font-size:9px; line-height:1.45; }
.trade-card .primary-button { width:auto; flex:none; padding:9px 10px; font-size:10px; }
.orders-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:10px 0 13px; padding:12px 5px; border:1px solid #e3e4d7; border-radius:13px; background:#fff; text-align:center; }
.orders-summary strong { display:block; color:#30392f; font-size:16px; }
.orders-summary small { color:#697064; font-size:8px; }
.order-list { display:grid; gap:9px; }
.order-card { width:100%; padding:12px; border:1px solid #d8dbc9; border-radius:13px; background:#fff; text-align:left; box-shadow:0 5px 15px rgba(16,24,40,.04); }
.order-card-head, .order-card-meta, .order-card-foot, .order-detail-head { display:flex; align-items:center; gap:7px; }
.order-card-head { margin-bottom:8px; }
.order-kind { color:#456349; font-size:9px; font-weight:700; }
.order-status { margin-left:auto; padding:3px 6px; border-radius:99px; font-size:8px; font-weight:700; }
.order-status.success { color:#087443; background:#e7f8ef; }
.order-status.pending { color:#9a5b00; background:#fff3df; }
.order-status.danger { color:#b42318; background:#ffebe9; }
.order-status.neutral { color:#697064; background:#e3e4d7; }
.order-chevron { color:#7c8275; font-size:17px; }
.order-card > strong { display:block; color:#30392f; font-size:12px; line-height:1.35; }
.order-card-meta { justify-content:space-between; margin-top:8px; color:#7c8275; font-size:8px; }
.order-card-meta b { color:#30392f; font-size:15px; }
.order-card-foot { margin-top:9px; padding-top:8px; border-top:1px solid #e3e4d7; color:#697064; font-size:8px; }
.checkout-title { padding:8px 2px 12px; }
.checkout-title h2 { margin:8px 0 5px; font-size:18px; line-height:1.3; }
.checkout-title p { margin:0; color:#697064; font-size:10px; line-height:1.5; }
.checkout-card, .order-detail-card { margin-bottom:11px; padding:12px; border:1px solid #d8dbc9; border-radius:13px; background:#fff; }
.checkout-row { display:flex; justify-content:space-between; gap:12px; padding:8px 0; color:#697064; font-size:10px; border-bottom:1px solid #e3e4d7; }
.checkout-row:last-child { border-bottom:0; }
.checkout-row strong { color:#30392f; text-align:right; }
.checkout-total { display:flex; justify-content:space-between; margin-top:8px; padding-top:10px; border-top:1px solid #dfe5ed; color:#465041; font-size:11px; }
.checkout-total strong { color:#456349; font-size:20px; }
.payment-box { margin:11px 0; padding:14px; border:1px solid #d8dbc9; border-radius:13px; background:#f8f6ed; text-align:center; }
.payment-box-head { display:flex; justify-content:space-between; color:#30392f; font-size:11px; }
.payment-box-head span { color:#697064; font-size:8px; }
.qr-placeholder { display:grid; place-items:center; width:112px; height:112px; margin:12px auto 8px; border:7px solid #30392f; background:repeating-linear-gradient(45deg,#30392f 0 3px,#fff 3px 7px); }
.qr-placeholder i { width:54px; height:54px; border:5px solid #fff; background:#30392f; box-shadow:0 0 0 4px #30392f; }
.qr-placeholder b { position:absolute; margin-top:148px; color:#456349; font-size:9px; background:#f8f6ed; }
.payment-box p { margin:0; color:#697064; font-size:8px; line-height:1.45; }
.order-detail-head { align-items:flex-start; padding:8px 2px 13px; }
.order-detail-head > div { min-width:0; flex:1; }
.order-detail-head h2 { margin:5px 0; font-size:16px; line-height:1.35; }
.order-detail-head small { color:#7c8275; font-size:8px; }
.order-progress { display:grid; grid-template-columns:repeat(6,1fr); gap:2px; margin:3px 0 14px; }
.order-step { position:relative; display:grid; justify-items:center; gap:4px; color:#7c8275; font-size:8px; text-align:center; }
.order-step span { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; color:#7c8275; background:#e3e4d7; font-size:9px; font-weight:700; }
.order-step.is-done { color:#456349; }
.order-step.is-done span { color:#fff; background:#456349; }