:root {
  --ht-red: #DA3915;
  --ht-red-dark: #B92C10;
  --ht-ink: #15191F;
  --ht-ink-2: #252B32;
  --ht-paper: #FFFFFF;
  --ht-bg: #F3F5F6;
  --ht-line: #E5E8EA;
  --ht-muted: #6D747C;
  --ht-soft: #9299A0;
  --ht-green: #138A72;
  --ht-blue: #2766C7;
  --ht-amber: #D58A16;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: var(--ht-ink);
  background: #E9ECEE;
  font-synthesis: none;
}

* { box-sizing: border-box; letter-spacing: 0; -webkit-tap-highlight-color: transparent; }
html { min-height: 100%; background: #E9ECEE; }
body { margin: 0; min-height: 100%; background: #E9ECEE; color: var(--ht-ink); }
button, input, textarea, select { font: inherit; color: inherit; }
button { padding: 0; border: 0; background: transparent; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid rgba(218,57,21,.42); outline-offset: 2px; }
img { display: block; max-width: 100%; }
svg { display: block; }

.app-shell { position: relative; width: min(430px, 100%); min-height: 100vh; margin: 0 auto; overflow-x: hidden; isolation: isolate; background: var(--ht-bg); box-shadow: 0 0 42px rgba(30,38,43,.12); }
.app-main { min-height: 100vh; padding-bottom: calc(64px + var(--safe-bottom)); }
.page { display: none; min-height: calc(100vh - 64px); }
.page.active { display: block; }
.detail-page { background: var(--ht-bg); }
.detail-open .bottom-nav { display: none; }
.detail-open .app-main { padding-bottom: 0; }

.bottom-nav {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 0;
  width: min(430px, 100%);
  min-height: calc(64px + var(--safe-bottom));
  padding: 7px 10px var(--safe-bottom);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  transform: translateX(-50%);
  border-top: 1px solid var(--ht-line);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(16px);
}
.bottom-nav button { position: relative; min-width: 0; height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #7B8289; font-size: 10px; }
.bottom-nav button::before { content: ""; position: absolute; top: -7px; left: 50%; width: 20px; height: 3px; transform: translateX(-50%) scaleX(0); border-radius: 0 0 3px 3px; background: var(--ht-red); transition: transform .18s ease; }
.bottom-nav button.active { color: var(--ht-ink); font-weight: 750; }
.bottom-nav button.active::before { transform: translateX(-50%) scaleX(1); }
.bottom-nav svg { width: 19px; height: 19px; stroke-width: 1.9; }
.bottom-nav button.active svg { color: var(--ht-red); }
.bottom-nav b { position: absolute; top: 3px; right: calc(50% - 20px); min-width: 15px; height: 15px; padding: 0 4px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 10px; background: var(--ht-red); color: #fff; font-size: 8px; line-height: 1; }
#headerInitials, #meInitials, .profile-avatar { overflow: hidden; }
#headerInitials img, #meInitials img, .profile-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.work-header { padding: calc(13px + env(safe-area-inset-top)) 16px 12px; display: flex; align-items: center; justify-content: space-between; background: var(--ht-ink); color: #fff; }
.brand-lockup { display: flex; align-items: center; gap: 9px; }
.brand-lockup img { width: 28px; height: 28px; padding: 1px; border-radius: 4px; background: #fff; }
.brand-lockup span { display: grid; gap: 1px; }
.brand-lockup strong { font-size: 14px; }
.brand-lockup small { color: #9CA3AA; font-size: 8px; font-weight: 750; }
.header-actions { display: flex; gap: 5px; }
.header-actions button { position: relative; width: 34px; height: 34px; display: grid; place-items: center; color: #fff; }
.header-actions svg { width: 18px; height: 18px; }
.header-actions b { position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; overflow: hidden; border: 1px solid var(--ht-ink); border-radius: 50%; background: var(--ht-red); color: transparent; }

.market-command { padding: 8px 16px 18px; background: var(--ht-ink); color: #fff; }
.command-meta { min-height: 24px; display: flex; align-items: center; gap: 7px; color: #A9B0B6; font-size: 9px; }
.command-meta span { padding: 3px 6px; border-radius: 3px; background: var(--ht-red); color: #fff; font-weight: 750; }
.command-meta time { color: #fff; font-variant-numeric: tabular-nums; }
.command-meta em { margin-left: auto; font-style: normal; }
.command-title { margin-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.command-title small { color: #8D959C; font-size: 8px; font-weight: 750; }
.command-title h1 { margin: 5px 0 0; font-size: 21px; line-height: 1.3; }
.command-title h1 b { color: #FF6845; }
.command-title > button { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border: 1px solid #3A4148; border-radius: 50%; background: #242A30; }
.command-title > button span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--ht-red); font-size: 12px; font-weight: 800; }
.next-event { width: 100%; margin-top: 15px; padding: 10px 11px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; border-left: 3px solid var(--ht-red); border-radius: 0 5px 5px 0; background: #242A30; color: #fff; text-align: left; }
.next-event > svg { width: 16px; height: 16px; color: #FF7657; }
.next-event > svg:last-child { width: 14px; color: #7F878E; }
.next-event span { display: grid; gap: 2px; min-width: 0; }
.next-event small { color: #949CA3; font-size: 8px; }
.next-event strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.metric-ribbon { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-bottom: 1px solid var(--ht-line); background: #fff; }
.metric-ribbon button { min-width: 0; padding: 12px 4px 11px; border-right: 1px solid var(--ht-line); text-align: center; }
.metric-ribbon button:last-child { border-right: 0; }
.metric-ribbon strong, .metric-ribbon span { display: block; }
.metric-ribbon strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.metric-ribbon span { margin-top: 4px; color: var(--ht-muted); font-size: 9px; }

.home-band { margin-top: 8px; padding: 16px; background: #fff; }
.section-heading { margin-bottom: 12px; display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.section-heading > div { min-width: 0; }
.section-heading span { display: block; margin-bottom: 2px; color: var(--ht-red); font-size: 8px; font-weight: 800; }
.section-heading h2 { margin: 0; font-size: 17px; line-height: 1.35; }
.section-heading > button { display: inline-flex; align-items: center; gap: 3px; color: var(--ht-muted); font-size: 9px; white-space: nowrap; }
.section-heading > button svg { width: 13px; height: 13px; }
.section-heading.compact { margin: 20px 0 10px; }
.section-heading.compact h2 { font-size: 15px; }

.action-track { display: grid; grid-auto-columns: 76%; grid-auto-flow: column; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.action-track::-webkit-scrollbar { display: none; }
.action-card { min-height: 112px; padding: 12px; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; scroll-snap-align: start; border: 1px solid var(--ht-line); border-top: 3px solid var(--ht-ink); border-radius: 6px; background: #FAFBFB; text-align: left; }
.action-card.risk { border-top-color: var(--ht-red); }
.action-card.important { border-top-color: var(--ht-amber); }
.action-card-head { display: flex; align-items: center; justify-content: space-between; color: var(--ht-muted); font-size: 9px; }
.action-card-head time { color: var(--ht-ink); font-size: 14px; font-weight: 800; }
.action-card h3 { margin: 0; font-size: 13px; line-height: 1.45; }
.action-card footer { display: flex; align-items: center; justify-content: space-between; color: var(--ht-soft); font-size: 9px; }
.action-card footer svg { width: 13px; height: 13px; color: var(--ht-red); }

.quick-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); row-gap: 15px; }
.quick-grid button { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; color: #30363C; font-size: 10px; }
.quick-icon { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; background: #F4F5F5; color: var(--ht-ink); }
.quick-grid button:nth-child(1) .quick-icon, .quick-grid button:nth-child(4) .quick-icon { background: #FFF0EC; color: var(--ht-red); }
.quick-grid button:nth-child(2) .quick-icon, .quick-grid button:nth-child(7) .quick-icon { background: #EDF3FD; color: var(--ht-blue); }
.quick-grid button:nth-child(3) .quick-icon, .quick-grid button:nth-child(8) .quick-icon { background: #EAF6F3; color: var(--ht-green); }
.quick-icon svg { width: 18px; height: 18px; }
.quick-icon b { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 9px; background: var(--ht-red); color: #fff; font-size: 8px; }

.opportunity-zone { margin-top: 8px; padding: 16px; background: var(--ht-ink); color: #fff; }
.opportunity-head { margin-bottom: 10px; display: flex; align-items: end; justify-content: space-between; }
.opportunity-head span { color: #FF7151; font-size: 8px; font-weight: 800; }
.opportunity-head h2 { margin: 3px 0 0; font-size: 17px; }
.opportunity-head button { padding: 6px 8px; border: 1px solid #424950; border-radius: 4px; color: #C8CDD1; font-size: 9px; }
.opportunity-item { width: 100%; padding: 12px 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; border-top: 1px solid #30363C; color: #fff; text-align: left; }
.opportunity-score { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ht-green); color: #67D0BA; font-size: 10px; font-weight: 800; }
.opportunity-item:nth-child(1) .opportunity-score { border-color: var(--ht-red); color: #FF7658; }
.opportunity-copy { min-width: 0; }
.opportunity-copy > span { display: flex; align-items: center; gap: 6px; }
.opportunity-copy strong { font-size: 12px; }
.opportunity-copy em { padding: 2px 4px; border-radius: 3px; background: #30363C; color: #AEB5BA; font-size: 8px; font-style: normal; }
.opportunity-copy p { margin: 4px 0 0; overflow: hidden; color: #AEB5BA; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.opportunity-side { display: grid; gap: 3px; text-align: right; }
.opportunity-side strong { color: #FF7658; font-size: 10px; }
.opportunity-side small { color: #7F878E; font-size: 8px; }

.market-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--ht-line); border-left: 1px solid var(--ht-line); }
.market-cell { min-width: 0; padding: 11px; display: grid; grid-template-columns: 1fr 52px; align-items: end; gap: 4px; border-right: 1px solid var(--ht-line); border-bottom: 1px solid var(--ht-line); background: #fff; text-align: left; }
.market-cell span, .market-cell strong, .market-cell em { display: block; }
.market-cell span { color: var(--ht-muted); font-size: 9px; }
.market-cell strong { margin-top: 5px; font-size: 14px; font-variant-numeric: tabular-nums; }
.market-cell em { margin-top: 4px; color: var(--ht-red); font-size: 9px; font-style: normal; font-weight: 750; }
.market-cell.negative em { color: var(--ht-green); }
.sparkline { width: 52px; height: 34px; align-self: center; }
.sparkline polyline { fill: none; stroke: var(--ht-red); stroke-width: 2; vector-effect: non-scaling-stroke; }
.market-cell.negative .sparkline polyline { stroke: var(--ht-green); }

.featured-news { position: relative; width: 100%; min-height: 150px; overflow: hidden; border-radius: 7px; background: #5F666B; color: #fff; text-align: left; }
.featured-news img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured-news::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,24,28,.06), rgba(18,24,28,.84)); }
.featured-news-copy { position: absolute; z-index: 1; left: 13px; right: 13px; bottom: 12px; }
.featured-news-copy span { color: #FF9A83; font-size: 9px; }
.featured-news-copy h3 { margin: 5px 0 0; font-size: 14px; line-height: 1.45; }
.news-list { margin-top: 8px; }
.news-row { width: 100%; padding: 11px 0; display: grid; grid-template-columns: 1fr auto; gap: 10px; border-bottom: 1px solid var(--ht-line); text-align: left; }
.news-row:last-child { border-bottom: 0; }
.news-row strong { display: block; font-size: 12px; line-height: 1.45; }
.news-row span, .news-row time { color: var(--ht-soft); font-size: 8px; }

.page-header { min-height: 92px; padding: calc(17px + env(safe-area-inset-top)) 16px 14px; display: flex; align-items: end; justify-content: space-between; border-bottom: 1px solid var(--ht-line); background: #fff; }
.page-header > div > span { color: var(--ht-red); font-size: 8px; font-weight: 800; }
.page-header h1 { margin: 4px 0 0; font-size: 25px; }
.page-header > button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #F2F4F5; }
.page-header > button svg { width: 17px; height: 17px; }
.page-body { padding: 14px 14px 24px; }
.search-box { height: 40px; padding: 0 11px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--ht-line); border-radius: 6px; background: #fff; }
.search-box svg { width: 16px; height: 16px; color: #8B9298; }
.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 11px; }
.search-box input::placeholder { color: #A4AAB0; }

.aum-overview { margin-top: 12px; min-height: 136px; padding: 16px; display: grid; grid-template-columns: 1fr 118px; align-items: end; gap: 10px; border-radius: 7px; background: var(--ht-ink); color: #fff; }
.aum-overview small { color: #A9B0B6; font-size: 9px; }
.aum-overview strong { display: block; margin-top: 8px; font-size: 34px; font-variant-numeric: tabular-nums; }
.aum-overview strong em { margin-left: 3px; color: #B7BDC2; font-size: 13px; font-style: normal; }
.aum-overview span { display: block; margin-top: 7px; color: #8F979D; font-size: 9px; }
.aum-overview span b { color: #FF6F4E; }
.aum-bars { height: 70px; display: flex; align-items: end; gap: 5px; border-bottom: 1px solid #41474D; }
.aum-bars i { width: 100%; min-height: 10px; background: #4B5258; }
.aum-bars i:nth-last-child(-n+2) { background: var(--ht-red); }
.client-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--ht-line); border-top: 0; background: #fff; }
.client-kpis div { padding: 11px 3px; border-right: 1px solid var(--ht-line); text-align: center; }
.client-kpis div:last-child { border-right: 0; }
.client-kpis strong, .client-kpis span { display: block; }
.client-kpis strong { font-size: 14px; }
.client-kpis span { margin-top: 3px; color: var(--ht-muted); font-size: 8px; }
.segment-tabs, .topic-strip, .detail-tabs, .filter-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.segment-tabs::-webkit-scrollbar, .topic-strip::-webkit-scrollbar, .detail-tabs::-webkit-scrollbar, .filter-chips::-webkit-scrollbar { display: none; }
.segment-tabs { margin: 15px 0 9px; }
.segment-tabs button, .topic-strip button, .detail-tabs button, .filter-chips button { min-width: 56px; height: 30px; padding: 0 11px; border: 1px solid var(--ht-line); border-radius: 4px; background: #fff; color: var(--ht-muted); font-size: 9px; white-space: nowrap; }
.segment-tabs button.active, .topic-strip button.active, .detail-tabs button.active, .filter-chips button.active { border-color: var(--ht-ink); background: var(--ht-ink); color: #fff; }
.client-list { border-top: 1px solid var(--ht-line); }
.client-row { width: 100%; padding: 13px 2px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--ht-line); text-align: left; }
.client-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #F0F2F3; color: var(--ht-ink); font-size: 12px; font-weight: 800; }
.client-row:nth-child(3n+1) .client-avatar { background: #FFF0EC; color: var(--ht-red); }
.client-row:nth-child(3n+2) .client-avatar { background: #EDF3FD; color: var(--ht-blue); }
.client-main { min-width: 0; }
.client-main > span { display: flex; align-items: center; gap: 6px; }
.client-main strong { font-size: 12px; }
.client-main em { padding: 2px 4px; border-radius: 3px; background: #F0F2F3; color: var(--ht-muted); font-size: 8px; font-style: normal; }
.client-main p { margin: 5px 0 0; overflow: hidden; color: var(--ht-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.client-side { display: grid; gap: 4px; text-align: right; }
.client-side strong { font-size: 11px; }
.client-side small { color: var(--ht-red); font-size: 8px; }

.insight-header { min-height: 190px; padding: calc(16px + env(safe-area-inset-top)) 16px 18px; display: grid; grid-template-columns: 1fr auto; align-content: start; background: var(--ht-red); color: #fff; }
.brand-chip { display: flex; align-items: center; gap: 7px; }
.brand-chip img { width: 25px; height: 25px; padding: 3px; border-radius: 4px; background: #fff; }
.brand-chip span { font-size: 8px; font-weight: 800; }
.insight-header > button { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; }
.insight-header > button svg { width: 18px; height: 18px; }
.insight-header > span { grid-column: 1 / -1; margin-top: 43px; color: #FFD3C9; font-size: 9px; }
.insight-header h1 { grid-column: 1 / -1; margin: 5px 0 0; font-size: 34px; }
.market-tape { display: grid; grid-auto-columns: 44%; grid-auto-flow: column; gap: 1px; overflow-x: auto; border-bottom: 1px solid var(--ht-line); background: var(--ht-line); scrollbar-width: none; }
.market-tape::-webkit-scrollbar { display: none; }
.tape-item { padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 3px; background: #fff; }
.tape-item span { grid-column: 1 / -1; color: var(--ht-muted); font-size: 8px; }
.tape-item strong { font-size: 11px; }
.tape-item em { color: var(--ht-red); font-size: 8px; font-style: normal; font-weight: 750; }
.tape-item.negative em { color: var(--ht-green); }
.insight-body { padding-top: 12px; }
.ai-brief { padding: 15px; border-radius: 7px; background: var(--ht-ink); color: #fff; }
.ai-brief-top { display: flex; align-items: center; justify-content: space-between; }
.ai-brief-top span { display: inline-flex; align-items: center; gap: 5px; color: #FF7353; font-size: 9px; font-weight: 800; }
.ai-brief-top span svg { width: 13px; height: 13px; }
.ai-brief-top time { color: #899198; font-size: 8px; }
.ai-brief h2 { margin: 16px 0 7px; font-size: 19px; line-height: 1.42; }
.ai-brief p { margin: 0; color: #A8AFB5; font-size: 9px; line-height: 1.6; }
.ai-brief > button { margin-top: 15px; padding: 8px 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 4px; background: var(--ht-red); color: #fff; font-size: 9px; }
.ai-brief > button svg { width: 13px; height: 13px; fill: currentColor; }
.topic-strip { margin-top: 12px; }
.report-list { border-top: 1px solid var(--ht-line); }
.report-row { width: 100%; padding: 13px 1px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; border-bottom: 1px solid var(--ht-line); text-align: left; }
.report-type { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 5px; background: #FFF0EC; color: var(--ht-red); font-size: 8px; font-weight: 800; }
.report-row:nth-child(even) .report-type { background: #EDF3FD; color: var(--ht-blue); }
.report-copy { min-width: 0; }
.report-copy strong { display: block; font-size: 11px; line-height: 1.45; }
.report-copy span { display: block; margin-top: 5px; color: var(--ht-soft); font-size: 8px; }
.report-side { display: grid; justify-items: end; align-content: space-between; color: var(--ht-soft); font-size: 8px; }
.report-side svg { width: 14px; height: 14px; }
.report-side svg.saved { color: var(--ht-red); fill: currentColor; }
.event-calendar { margin-top: 10px; padding-top: 1px; }
.event-calendar > button { width: 100%; padding: 11px 0; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; border-top: 1px solid var(--ht-line); text-align: left; }
.event-calendar time { color: var(--ht-red); font-size: 12px; font-weight: 800; }
.event-calendar span { display: grid; gap: 3px; }
.event-calendar strong { font-size: 11px; }
.event-calendar small { color: var(--ht-muted); font-size: 8px; }
.event-calendar svg { width: 16px; height: 16px; color: var(--ht-muted); }

.collaboration-header { background: #fff; }
.collab-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-bottom: 1px solid var(--ht-line); background: #fff; }
.collab-tabs button { position: relative; height: 42px; color: var(--ht-muted); font-size: 10px; }
.collab-tabs button.active { color: var(--ht-ink); font-weight: 800; }
.collab-tabs button.active::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 0; height: 3px; background: var(--ht-red); }
.collab-tabs b { margin-left: 3px; color: var(--ht-red); font-size: 8px; }
.collab-body { padding-top: 11px; }
.collab-summary { margin: 11px 0 4px; padding: 12px; display: flex; align-items: center; justify-content: space-between; border-left: 3px solid var(--ht-red); background: #FFF4F1; }
.collab-summary strong { display: block; font-size: 12px; }
.collab-summary span { display: block; margin-top: 3px; color: var(--ht-muted); font-size: 8px; }
.collab-summary button { padding: 7px 9px; border-radius: 4px; background: var(--ht-red); color: #fff; font-size: 8px; }
.message-row { width: 100%; padding: 13px 1px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--ht-line); text-align: left; }
.message-avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: var(--ht-ink); color: #fff; font-size: 11px; font-weight: 800; }
.message-row:nth-child(even) .message-avatar { background: var(--ht-red); }
.message-copy { min-width: 0; }
.message-copy strong { display: flex; align-items: center; gap: 4px; font-size: 11px; }
.message-copy strong svg { width: 10px; height: 10px; color: var(--ht-red); }
.message-copy p { margin: 5px 0 0; overflow: hidden; color: var(--ht-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.message-side { align-self: stretch; display: grid; justify-items: end; align-content: space-between; }
.message-side time { color: var(--ht-soft); font-size: 8px; }
.message-side b { min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; border-radius: 9px; background: var(--ht-red); color: #fff; font-size: 8px; }
.project-card { margin-top: 9px; padding: 12px; border: 1px solid var(--ht-line); border-radius: 6px; background: #fff; text-align: left; }
.project-card-head { display: flex; justify-content: space-between; color: var(--ht-soft); font-size: 8px; }
.project-card-head b { padding: 2px 5px; border-radius: 3px; background: #EDF3FD; color: var(--ht-blue); }
.project-card h3 { margin: 8px 0 4px; font-size: 12px; }
.project-card p { margin: 0; color: var(--ht-muted); font-size: 8px; }
.progress-line { height: 4px; margin: 10px 0 8px; overflow: hidden; border-radius: 2px; background: #ECEEEF; }
.progress-line i { display: block; height: 100%; background: var(--ht-red); }
.project-card footer { display: flex; justify-content: space-between; color: var(--ht-muted); font-size: 8px; }

.me-header { padding: calc(17px + env(safe-area-inset-top)) 16px 18px; background: var(--ht-ink); color: #fff; }
.me-top { display: flex; align-items: center; justify-content: space-between; color: #8F979D; font-size: 8px; font-weight: 800; }
.me-top button { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; }
.me-top svg { width: 18px; height: 18px; }
.me-identity { width: 100%; margin-top: 17px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; color: #fff; text-align: left; }
.me-identity > span:first-child { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--ht-red); font-size: 14px; font-weight: 850; }
.me-identity > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.me-identity strong { font-size: 18px; }
.me-identity small { font-size: 10px; }
.me-identity em { color: #959DA3; font-size: 8px; font-style: normal; }
.me-identity svg { width: 15px; height: 15px; color: #697178; }
.me-performance { margin-top: 20px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid #333A40; }
.me-performance div { padding-top: 12px; text-align: center; }
.me-performance strong, .me-performance span { display: block; }
.me-performance strong { font-size: 15px; }
.me-performance span { margin-top: 4px; color: #929A9F; font-size: 8px; }
.me-license { margin: 8px 0; padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; background: #fff; }
.me-license > div { display: flex; align-items: center; gap: 10px; }
.me-license svg { width: 24px; height: 24px; color: var(--ht-green); }
.me-license span { display: grid; gap: 3px; }
.me-license strong { font-size: 11px; }
.me-license small { color: var(--ht-muted); font-size: 8px; }
.me-license button { padding: 6px 9px; border: 1px solid var(--ht-line); border-radius: 4px; font-size: 8px; }
.me-groups { background: #fff; }
.me-group-title { padding: 11px 16px 7px; color: var(--ht-soft); font-size: 8px; background: var(--ht-bg); }
.me-row { width: 100%; min-height: 50px; padding: 0 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--ht-line); text-align: left; }
.me-row > svg:first-child { width: 17px; height: 17px; color: var(--ht-red); }
.me-row span { display: grid; gap: 2px; }
.me-row strong { font-size: 11px; }
.me-row small { color: var(--ht-muted); font-size: 8px; }
.me-row > svg:last-child { width: 13px; height: 13px; color: #ABB0B4; }
.brand-footer { min-height: 144px; padding: 27px 16px; display: flex; flex-direction: column; align-items: center; color: #ABB0B4; }
.brand-footer img { width: 30px; height: 30px; opacity: .35; filter: grayscale(1); }
.brand-footer strong { margin-top: 7px; font-size: 11px; }
.brand-footer span { margin-top: 4px; font-size: 8px; }

.detail-header { min-height: 78px; padding: calc(12px + env(safe-area-inset-top)) 9px 10px; display: grid; grid-template-columns: 40px 1fr 40px; align-items: end; border-bottom: 1px solid var(--ht-line); background: #fff; }
.detail-header > button { width: 40px; height: 40px; display: grid; place-items: center; }
.detail-header > button svg { width: 19px; height: 19px; }
.detail-header > div { min-width: 0; text-align: center; }
.detail-header span { display: block; color: var(--ht-red); font-size: 7px; font-weight: 800; }
.detail-header h1 { margin: 3px 0 0; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.detail-body { padding: 12px 14px 28px; }
.detail-hero { padding: 15px; border-radius: 7px; background: var(--ht-ink); color: #fff; }
.detail-hero.red { background: var(--ht-red); }
.detail-hero.blue { background: #174E9B; }
.detail-hero.green { background: #0D6D5D; }
.detail-hero > span { color: #9DA4AA; font-size: 8px; font-weight: 800; }
.detail-hero.red > span, .detail-hero.blue > span, .detail-hero.green > span { color: rgba(255,255,255,.72); }
.detail-hero h2 { margin: 8px 0 5px; font-size: 20px; line-height: 1.4; }
.detail-hero p { margin: 0; color: #A9B0B6; font-size: 9px; line-height: 1.6; }
.detail-hero.red p, .detail-hero.blue p, .detail-hero.green p { color: rgba(255,255,255,.75); }
.stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 10px; border: 1px solid var(--ht-line); background: #fff; }
.stat-grid div { padding: 11px 4px; border-right: 1px solid var(--ht-line); text-align: center; }
.stat-grid div:last-child { border-right: 0; }
.stat-grid strong, .stat-grid span { display: block; }
.stat-grid strong { font-size: 15px; }
.stat-grid span { margin-top: 4px; color: var(--ht-muted); font-size: 8px; }
.detail-section { margin-top: 13px; }
.detail-section-head { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
.detail-section-head h3 { margin: 0; font-size: 13px; }
.detail-section-head span { color: var(--ht-muted); font-size: 8px; }
.list-panel { border: 1px solid var(--ht-line); border-radius: 6px; background: #fff; }
.list-row { width: 100%; min-height: 58px; padding: 10px 11px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; border-bottom: 1px solid var(--ht-line); text-align: left; }
.list-row:last-child { border-bottom: 0; }
.list-main { min-width: 0; display: grid; gap: 3px; }
.list-main > span { color: var(--ht-red); font-size: 8px; }
.list-main strong { font-size: 11px; line-height: 1.4; }
.list-main p { margin: 0; overflow: hidden; color: var(--ht-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.list-side { display: grid; justify-items: end; gap: 4px; color: var(--ht-muted); font-size: 8px; }
.list-side svg { width: 14px; height: 14px; }
.work-app-group { margin-top: 15px; }
.work-app-group:first-child { margin-top: 0; }
.work-app-group > h2 { margin: 0 0 8px; font-size: 13px; }
.work-app-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.work-app { min-width: 0; min-height: 82px; padding: 11px; display: grid; grid-template-columns: 30px 1fr; align-content: start; gap: 5px 8px; border: 1px solid var(--ht-line); border-radius: 6px; background: #fff; text-align: left; }
.work-app > span { grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 5px; background: #FFF0EC; color: var(--ht-red); }
.work-app:nth-child(2n) > span { background: #EDF3FD; color: var(--ht-blue); }
.work-app svg { width: 15px; height: 15px; }
.work-app strong { align-self: end; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.work-app small { overflow: hidden; color: var(--ht-muted); font-size: 7px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.tag { padding: 3px 5px; border-radius: 3px; background: #EEF0F1; color: var(--ht-muted); font-size: 8px; font-weight: 750; }
.tag.red { background: #FFF0EC; color: var(--ht-red); }
.tag.green { background: #EAF6F3; color: var(--ht-green); }
.tag.blue { background: #EDF3FD; color: var(--ht-blue); }
.filter-chips, .detail-tabs { margin: 10px 0; }
.approval-card { margin-top: 9px; padding: 12px; border: 1px solid var(--ht-line); border-radius: 6px; background: #fff; }
.approval-card-head, .approval-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--ht-muted); font-size: 8px; }
.approval-card h3 { margin: 9px 0 8px; font-size: 12px; line-height: 1.4; }
.approval-actions { margin-top: 11px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.approval-actions button { height: 34px; border: 1px solid var(--ht-line); border-radius: 4px; background: #fff; font-size: 9px; }
.approval-actions button.primary { border-color: var(--ht-red); background: var(--ht-red); color: #fff; }
.progress-track { height: 4px; margin-top: 9px; overflow: hidden; border-radius: 2px; background: #ECEEEF; }
.progress-track i { display: block; height: 100%; background: var(--ht-red); }

.mail-toolbar { display: grid; grid-template-columns: 1fr 40px; gap: 8px; }
.mail-toolbar > button { display: grid; place-items: center; border-radius: 6px; background: var(--ht-red); color: #fff; }
.mail-toolbar > button svg { width: 17px; height: 17px; }
.mail-list { border-top: 1px solid var(--ht-line); }
.mail-row { width: 100%; padding: 12px 0; display: grid; grid-template-columns: auto 1fr auto; gap: 9px; border-bottom: 1px solid var(--ht-line); text-align: left; }
.mail-sender-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 6px; background: #EFF1F2; color: var(--ht-muted); font-size: 9px; font-weight: 800; }
.mail-row.unread .mail-sender-icon { background: #FFF0EC; color: var(--ht-red); }
.mail-copy { min-width: 0; }
.mail-copy strong { font-size: 10px; }
.mail-copy h3 { margin: 3px 0 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.mail-copy p { margin: 5px 0 0; overflow: hidden; color: var(--ht-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.mail-tags { display: flex; gap: 5px; margin-top: 5px; }
.mail-tags span { display: inline-flex; align-items: center; gap: 2px; color: var(--ht-red); font-size: 7px; }
.mail-tags svg { width: 9px; height: 9px; }
.mail-side { display: grid; justify-items: end; align-content: space-between; color: var(--ht-soft); }
.mail-side time { font-size: 8px; }
.mail-side svg { width: 13px; height: 13px; }
.mail-side svg.starred { color: var(--ht-amber); fill: currentColor; }
.mail-detail { padding: 15px; border: 1px solid var(--ht-line); border-radius: 6px; background: #fff; }
.mail-detail > h2 { margin: 0; font-size: 17px; line-height: 1.45; }
.mail-author { margin-top: 13px; display: flex; align-items: center; gap: 9px; }
.mail-author .mail-sender-icon { flex: 0 0 36px; }
.mail-author span { display: grid; gap: 3px; }
.mail-author strong { font-size: 10px; }
.mail-author small { color: var(--ht-muted); font-size: 8px; }
.mail-content { margin-top: 16px; color: #343A40; font-size: 10px; line-height: 1.75; }
.attachment-row { width: 100%; margin-top: 12px; padding: 10px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--ht-line); border-radius: 5px; background: #F7F8F8; text-align: left; }
.attachment-row svg { width: 17px; height: 17px; color: var(--ht-red); }
.attachment-row span { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.client-profile-hero { padding: 16px; border-radius: 7px; background: var(--ht-ink); color: #fff; }
.client-profile-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.client-profile-top .client-avatar { background: var(--ht-red); color: #fff; }
.client-profile-top span:nth-child(2) { display: grid; gap: 3px; }
.client-profile-top strong { font-size: 16px; }
.client-profile-top small { color: #9DA4AA; font-size: 8px; }
.client-profile-top > b { color: #FF7353; font-size: 10px; }
.client-assets { margin-top: 16px; display: grid; grid-template-columns: 1fr auto; align-items: end; }
.client-assets span { display: grid; gap: 5px; }
.client-assets small { color: #90989E; font-size: 8px; }
.client-assets strong { font-size: 28px; }
.client-assets em { color: #5FC0A9; font-size: 9px; font-style: normal; }
.profile-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 5px; }
.profile-tags span { padding: 4px 6px; border-radius: 3px; background: #2E343A; color: #C6CBD0; font-size: 8px; }
.allocation-list { padding: 4px 11px; border: 1px solid var(--ht-line); border-radius: 6px; background: #fff; }
.allocation-row { min-height: 42px; display: grid; grid-template-columns: 1fr 3fr 38px; align-items: center; gap: 8px; border-bottom: 1px solid var(--ht-line); font-size: 9px; }
.allocation-row:last-child { border-bottom: 0; }
.allocation-track { height: 5px; overflow: hidden; border-radius: 3px; background: #ECEEEF; }
.allocation-track i { display: block; height: 100%; background: var(--ht-red); }
.allocation-row:nth-child(2) .allocation-track i { background: var(--ht-blue); }
.allocation-row:nth-child(3) .allocation-track i { background: var(--ht-green); }
.allocation-row:nth-child(4) .allocation-track i { background: var(--ht-amber); }
.allocation-row strong { text-align: right; }
.contact-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 10px; }
.contact-actions button { height: 38px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--ht-line); border-radius: 4px; background: #fff; font-size: 8px; }
.contact-actions button:first-child { border-color: var(--ht-red); background: var(--ht-red); color: #fff; }
.contact-actions svg { width: 14px; height: 14px; }

.profile-card { padding: 16px; display: grid; justify-items: center; border-radius: 7px; background: var(--ht-ink); color: #fff; }
.profile-card .profile-avatar { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--ht-red); font-size: 16px; font-weight: 850; }
.profile-card h2 { margin: 10px 0 4px; font-size: 18px; }
.profile-card p { margin: 0; color: #9CA4AA; font-size: 9px; }
.profile-list { margin-top: 10px; border: 1px solid var(--ht-line); border-radius: 6px; background: #fff; }
.profile-row { min-height: 48px; padding: 9px 11px; display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 8px; border-bottom: 1px solid var(--ht-line); }
.profile-row:last-child { border-bottom: 0; }
.profile-row span { color: var(--ht-muted); font-size: 9px; }
.profile-row strong { overflow-wrap: anywhere; font-size: 9px; text-align: right; }
.license-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.license-list b { padding: 3px 5px; border-radius: 3px; background: #EAF6F3; color: var(--ht-green); font-size: 7px; }

.report-detail { padding: 16px; border: 1px solid var(--ht-line); border-top: 4px solid var(--ht-red); border-radius: 0 0 6px 6px; background: #fff; }
.report-detail > span { color: var(--ht-red); font-size: 8px; font-weight: 800; }
.report-detail h2 { margin: 10px 0 8px; font-size: 20px; line-height: 1.45; }
.report-detail-meta { display: flex; gap: 7px; color: var(--ht-soft); font-size: 8px; }
.report-detail p { margin: 17px 0 0; color: #373D43; font-size: 10px; line-height: 1.8; }
.report-points { margin-top: 13px; padding: 12px; background: #F5F6F6; }
.report-points strong { font-size: 10px; }
.report-points ul { margin: 8px 0 0; padding-left: 17px; color: var(--ht-muted); font-size: 9px; line-height: 1.75; }

.schedule-day { padding: 12px 14px; border-radius: 6px; background: var(--ht-ink); color: #fff; }
.schedule-day small { color: #929A9F; font-size: 8px; }
.schedule-day h2 { margin: 5px 0 0; font-size: 20px; }
.schedule-list { margin-top: 10px; }
.schedule-row { display: grid; grid-template-columns: 45px 10px 1fr; gap: 8px; min-height: 74px; }
.schedule-row time { padding-top: 3px; font-size: 10px; font-weight: 800; }
.schedule-mark { position: relative; }
.schedule-mark::before { content: ""; position: absolute; top: 7px; left: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--ht-red); }
.schedule-mark::after { content: ""; position: absolute; top: 17px; bottom: 0; left: 5px; width: 1px; background: var(--ht-line); }
.schedule-copy { padding: 0 0 12px; }
.schedule-copy strong { display: block; font-size: 11px; }
.schedule-copy span { display: block; margin-top: 5px; color: var(--ht-muted); font-size: 8px; }

.chat-screen { min-height: calc(100vh - 104px); display: flex; flex-direction: column; }
.chat-messages { flex: 1; padding-bottom: 72px; }
.chat-bubble { margin: 10px 0; display: flex; align-items: start; gap: 8px; }
.chat-bubble.mine { justify-content: flex-end; }
.chat-avatar { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 7px; background: var(--ht-ink); color: #fff; font-size: 8px; }
.bubble-copy { max-width: 78%; }
.bubble-copy small { display: block; margin-bottom: 4px; color: var(--ht-soft); font-size: 7px; }
.bubble-copy p { margin: 0; padding: 9px 10px; border-radius: 4px 7px 7px 7px; background: #fff; font-size: 9px; line-height: 1.55; }
.chat-bubble.mine .bubble-copy p { border-radius: 7px 4px 7px 7px; background: #FFE9E3; }
.chat-composer { position: fixed; z-index: 12; left: 50%; bottom: 0; width: min(430px,100%); padding: 8px 12px calc(8px + var(--safe-bottom)); display: grid; grid-template-columns: 34px 1fr 34px; gap: 7px; transform: translateX(-50%); border-top: 1px solid var(--ht-line); background: #fff; }
.chat-composer input { min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--ht-line); border-radius: 5px; outline: 0; font-size: 9px; }
.chat-composer button { display: grid; place-items: center; color: var(--ht-muted); }
.chat-composer button:last-child { border-radius: 4px; background: var(--ht-red); color: #fff; }
.chat-composer svg { width: 16px; height: 16px; }

.empty-state { min-height: 190px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--ht-muted); text-align: center; }
.empty-state svg { width: 30px; height: 30px; color: #AEB4B8; }
.empty-state strong { color: var(--ht-ink); font-size: 12px; }
.empty-state span { font-size: 8px; }

.sheet-backdrop { position: fixed; z-index: 80; inset: 0; background: rgba(14,18,21,.48); }
.sheet-backdrop[hidden] { display: none; }
.bottom-sheet { position: absolute; left: 50%; bottom: 0; width: min(430px,100%); max-height: 82vh; padding: 10px 14px calc(18px + var(--safe-bottom)); overflow-y: auto; transform: translateX(-50%); border-radius: 8px 8px 0 0; background: #fff; }
.sheet-handle { width: 34px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: #D6DADC; }
.sheet-title { display: flex; align-items: center; justify-content: space-between; }
.sheet-title h2 { margin: 0; font-size: 15px; }
.sheet-title button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #F1F3F4; }
.sheet-title svg { width: 16px; height: 16px; }
.sheet-form { margin-top: 12px; display: grid; gap: 8px; }
.sheet-form input, .sheet-form textarea { width: 100%; padding: 10px; border: 1px solid var(--ht-line); border-radius: 5px; outline: 0; font-size: 10px; }
.sheet-form textarea { min-height: 130px; resize: vertical; }
.sheet-submit { height: 40px; border-radius: 5px; background: var(--ht-red); color: #fff; font-size: 10px; font-weight: 800; }
.sheet-profile { margin-top: 15px; display: grid; justify-items: center; text-align: center; }
.sheet-profile .client-avatar { width: 56px; height: 56px; background: var(--ht-red); color: #fff; font-size: 15px; }
.sheet-profile h2 { margin: 9px 0 3px; font-size: 17px; }
.sheet-profile p { margin: 0; color: var(--ht-muted); font-size: 9px; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: calc(78px + var(--safe-bottom)); max-width: min(330px,calc(100% - 40px)); padding: 9px 13px; transform: translate(-50%,20px); opacity: 0; pointer-events: none; border-radius: 5px; background: rgba(21,25,31,.94); color: #fff; font-size: 9px; transition: opacity .18s ease, transform .18s ease; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 350px) {
  .market-command, .home-band, .opportunity-zone { padding-left: 12px; padding-right: 12px; }
  .command-title h1 { font-size: 19px; }
  .quick-grid { column-gap: 3px; }
  .quick-grid button { font-size: 9px; }
  .market-cell { grid-template-columns: 1fr 44px; padding: 9px; }
  .sparkline { width: 44px; }
  .work-app-desc { display: none; }
  .page-body, .detail-body { padding-left: 11px; padding-right: 11px; }
  .aum-overview { grid-template-columns: 1fr 90px; }
  .collab-tabs button { font-size: 9px; }
}

@media (min-width: 760px) {
  .app-shell { margin-top: 22px; min-height: calc(100vh - 44px); border-radius: 8px; }
  .bottom-nav { bottom: 22px; border-radius: 0 0 8px 8px; }
}