/* Apple-inspired glass finish. Keep the previous warm layout and use translucency sparingly. */
:root {
  --paper: #f3f5f9;
  --surface: rgba(255,255,255,.78);
  --ink: #202631;
  --muted: #737d8d;
  --line: rgba(94,112,139,.16);
  --sage: #6687ad;
  --sage2: rgba(103,142,190,.14);
  --orange: #d59462;
  --peach: rgba(250,239,226,.78);
  --blue: #7f9aaf;
  --lav: rgba(232,235,246,.78);
  --shadow: 0 12px 36px rgba(47,63,91,.09);
  --radius: 22px;
}
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse at 8% 0%, rgba(202,220,245,.7), transparent 34rem),
    radial-gradient(ellipse at 96% 13%, rgba(226,220,246,.62), transparent 32rem),
    linear-gradient(180deg,#f5f7fb 0%,#eef1f7 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { font-family: inherit; font-weight: 620; letter-spacing: -.025em; }
.shell { max-width: 1460px; }
.topbar {
  position: sticky;
  top: 10px;
  z-index: 20;
  margin: 0 0 30px;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 20px;
  background: rgba(255,255,255,.66);
  box-shadow: 0 8px 28px rgba(48,63,89,.08), inset 0 1px rgba(255,255,255,.85);
  backdrop-filter: blur(24px) saturate(165%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
}
.brand-mark { border-radius: 14px; background: linear-gradient(145deg,#7899bf,#58799f); box-shadow: 0 6px 16px rgba(74,110,153,.2); }
.control {
  border: 1px solid rgba(100,118,145,.2);
  border-radius: 13px;
  background: rgba(255,255,255,.7);
  box-shadow: inset 0 1px rgba(255,255,255,.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.control:hover:not(:disabled) { border-color: rgba(89,126,171,.38); background: rgba(255,255,255,.9); }
.control:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid rgba(91,139,193,.3); outline-offset: 2px; }
.card {
  border: 1px solid rgba(255,255,255,.78);
  border-radius: var(--radius);
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 34px rgba(48,63,89,.075), inset 0 1px rgba(255,255,255,.82);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}
.metrics { background: rgba(255,255,255,.78); }
.metric { border-color: rgba(99,116,139,.12); }
.metric:nth-child(5) .metric-value { color: #6988ad; }
.insight-card, .content-brief, .comparison-card, .period-comparison-card, .learning-detail-card, .region-card, .demand-card {
  border-color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.72);
  color: var(--ink);
}
.insight-card .card-title, .insight-card h2, .insight-card .section-label { color: var(--ink); }
.insight-card p, .insight-card .note { color: var(--muted); }
.mini-stat, .profile-stat, .role-row, .inviter-item, .demand-metric, .region-panel, .period-section, .split-panel {
  border: 1px solid rgba(101,120,149,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.65);
}
.skill-summary { background: rgba(255,255,255,.82); border-color: rgba(255,255,255,.88); }
.skill-table-wrap, .comparison-table-wrap { border-color: rgba(101,120,149,.16); border-radius: 15px; background: rgba(255,255,255,.56); }
.skill-table th, .comparison-table thead th { background: rgba(235,240,247,.78); }
.skill-table tr.is-selected { background: rgba(117,153,195,.14); }
.skill-table tr.is-selected td:first-child { border-left: 3px solid #6687ad; }
.keyframe { border-radius: 15px; background: rgba(255,255,255,.7); }
.keyframe.active { border-color: #6e91b8; background: rgba(220,233,248,.82); box-shadow: 0 5px 18px rgba(67,101,145,.12); }
.keyframe-detail { border: 1px solid rgba(255,255,255,.85); border-radius: 17px; background: rgba(230,238,248,.68); color: var(--ink); }
.keyframe-detail p, .keyframe-detail strong { color: #566577; }
.trend-tooltip, .tooltip { border: 1px solid rgba(255,255,255,.8); border-radius: 15px; background: rgba(255,255,255,.88); color: var(--ink); box-shadow: 0 12px 32px rgba(35,52,77,.14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.funnel-step, .conversion-card .funnel-step { border-radius: 16px; background: rgba(238,243,249,.82); }
.conversion-card .funnel-step:nth-child(3) { background: rgba(207,224,241,.86); color: var(--ink); }
.conversion-card .funnel-step:nth-child(3) span { color: var(--muted); }
.conversion-card .funnel-step:nth-child(3) b { color: #577ba4; }
.callout, .decision-caution, .region-method, .analysis-pending { border-radius: 16px; }
.pill, .live-badge { border-radius: 999px; }
.image-download { border-radius: 13px; box-shadow: 0 6px 16px rgba(82,121,169,.2); }
.image-download, .image-download:hover:not(:disabled) { border-color: #6687ad; background: linear-gradient(145deg,#7899bf,#58799f); color: #fff; }
.region-province-toggle, .need-filter, .trend-legend { border-radius: 13px; }
.region-province-toggle:hover:not(:disabled), .need-filter:hover, .trend-legend:hover { background: rgba(220,233,248,.7); }
.region-buyer-panel .buyer-province-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; align-items: start; }
.region-province-group { min-width: 0; overflow: hidden; border: 1px solid rgba(101,120,149,.14); border-radius: 16px; background: rgba(255,255,255,.66); box-shadow: 0 4px 14px rgba(48,63,89,.035); transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.region-province-group:has(.region-province-toggle[aria-expanded="true"]) { border-color: rgba(100,137,179,.34); background: rgba(239,246,253,.82); box-shadow: 0 8px 20px rgba(58,88,126,.08); }
.region-province-toggle { display: grid; width: 100%; min-height: 64px; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 3px 10px; padding: 11px 13px; border: 0; border-radius: 0; background: transparent; color: var(--ink); text-align: left; transition: background .18s ease; }
.region-province-toggle:hover:not(:disabled) { background: rgba(222,235,249,.56); }
.region-province-toggle:disabled { cursor: default; opacity: .7; }
.region-province-toggle .province-label { display: flex; min-width: 0; grid-row: 1 / span 2; align-items: center; gap: 9px; color: var(--ink); font-size: 13px; font-weight: 600; }
.region-province-toggle .province-label i { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; background: rgba(105,139,177,.13); color: #597a9f; font-size: 17px; font-style: normal; line-height: 1; transition: transform .18s ease; }
.region-province-toggle[aria-expanded="true"] .province-label i { transform: rotate(90deg); }
.region-province-toggle>b { padding: 3px 8px; border-radius: 999px; background: rgba(104,139,179,.13); color: #55779d; font-size: 12px; font-weight: 700; white-space: nowrap; }
.region-province-toggle>small { grid-column: 2; color: var(--muted); font-size: 10px; line-height: 1.2; text-align: right; white-space: nowrap; }
.region-province-details { padding: 5px 13px 10px 46px; border-top: 1px solid rgba(101,120,149,.1); background: rgba(255,255,255,.4); }
.region-city-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(101,120,149,.1); color: #566273; font-size: 12px; }
.region-city-row:last-child { border-bottom: 0; }
.region-city-row>b { color: var(--ink); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.foot-row { border-color: rgba(101,120,149,.17); }
@media (max-width: 700px) {
  .topbar { position: static; padding: 12px; border-radius: 18px; }
}
@media (max-width: 560px) { .region-buyer-panel .buyer-province-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-transparency: reduce) {
  .topbar, .control, .card, .mini-stat, .profile-stat, .role-row, .inviter-item, .demand-metric, .region-panel, .period-section, .split-panel { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.96); }
}