:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-size: 14px; font-synthesis: none; font-optical-sizing: auto;
  --canvas: #f5f5f7; --panel: #ffffff; --ink: #1d1d1f; --secondary: #68686e;
  --tertiary: #8a8a91; --line: rgba(60,60,67,.12); --inset: #efeff2;
  --accent: #0068d9; --accent-soft: #e7f0fd; --green: #2c8059; --negative: #c33b35;
  --sidebar: rgba(233,234,238,.72); --material: rgba(255,255,255,.95);
  --shadow: 0 12px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.05);
  --radius: 17px; --focus-ring: #007aff;
  background: var(--canvas); color: var(--ink);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 84px; }
body { margin: 0; font-size: 1rem; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .35; }
button { transition: background-color 100ms ease, box-shadow 100ms ease, transform 100ms ease; }
button:not(:disabled):active { transform: scale(.98); }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 2.35rem; font-weight: 700; line-height: 1.16; letter-spacing: -.045em; }
h2 { font-size: 1.2rem; font-weight: 650; line-height: 1.3; letter-spacing: -.025em; }
h3 { font-size: .92rem; font-weight: 650; line-height: 1.35; letter-spacing: -.012em; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.icon { display: block; width: 19px; height: 19px; flex-shrink: 0; }
[data-icon] { display: inline-flex; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 100; background: var(--accent); color: white; padding: 12px 18px; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.app { display: grid; grid-template-columns: 218px minmax(0,1fr); min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100dvh; padding: 34px 17px 20px; display: flex; flex-direction: column; background: var(--sidebar); backdrop-filter: blur(28px) saturate(140%); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 11px; }
.app-mark { display: grid; place-items: center; flex-shrink: 0; width: 39px; height: 39px; background: linear-gradient(150deg,#49a27b,#277b55); color: white; border-radius: 12px; font-size: 24px; font-weight: 600; letter-spacing: -1px; box-shadow: inset 0 1px 1px rgba(255,255,255,.25),0 2px 4px rgba(30,80,50,.1); }
.brand strong { display: block; font-size: 1rem; font-weight: 650; letter-spacing: -.02em; }
.brand small { display: block; margin-top: 2px; color: var(--secondary); font-size: .75rem; }
.nav-label { color: var(--secondary); font-size: .73rem; font-weight: 550; margin: 42px 13px 9px; letter-spacing: .015em; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 10px 13px; margin-bottom: 4px; border-radius: 9px; color: var(--secondary); font-size: .9rem; font-weight: 500; }
.nav-item .icon { width: 18px; height: 18px; }
.nav-item.selected { color: var(--ink); background: rgba(255,255,255,.72); box-shadow: 0 1px 2px rgba(0,0,0,.035); }
.nav-item.selected [data-icon] { color: var(--accent); }
.account-chip { margin-top: auto; border-top: 1px solid var(--line); padding: 18px 10px 0; display: flex; align-items: center; gap: 9px; }
.account-avatar { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; background: rgba(120,120,128,.13); color: var(--secondary); font-size: .7rem; font-weight: 600; }
.account-chip strong { display: block; font-size: .76rem; font-weight: 550; }
.account-chip small { display: block; font-size: .69rem; color: var(--secondary); margin-top: 2px; }
main { min-width: 0; padding-bottom: 35px; }
.toolbar { height: 69px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 35px; position: sticky; top: 0; z-index: 20; background: rgba(245,245,247,.83); backdrop-filter: blur(24px) saturate(140%); border-bottom: 1px solid rgba(60,60,67,.07); }
.toolbar-identity, .toolbar-actions { display: flex; align-items: center; gap: 15px; }
.platform-chip { display: flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 550; color: var(--secondary); }
.platform-chip .icon { width: 16px; height: 16px; }
.local-chip { font-size: .69rem; padding: 3px 8px; color: var(--secondary); background: rgba(120,120,128,.08); border-radius: 6px; }
.toolbar-actions { gap: 6px; }
.appearance-button { min-width: 83px; }
.theme-sun { display: none; }
:root[data-theme="dark"] .theme-sun { display: inline-flex; }
:root[data-theme="dark"] .theme-moon { display: none; }
.icon-button, .close-button { border: 0; background: transparent; border-radius: 8px; display: inline-grid; place-items: center; width: 34px; height: 34px; color: var(--secondary); }
.icon-button .icon { width: 18px; height: 18px; }
.close-button { width: 28px; height: 28px; background: var(--inset); border-radius: 50%; }
.close-button .icon { width: 13px; height: 13px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.03); font-size: .82rem; font-weight: 500; white-space: nowrap; }
.button .icon { width: 16px; height: 16px; }
.button.primary { background: var(--accent); color: #fff; border-color: transparent; }
.page-content { max-width: 1530px; margin: 0 auto; padding: 32px 35px 0; }
.intro { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin-bottom: 27px; scroll-margin-top: 100px; }
.intro p { font-size: .86rem; margin-top: 7px; color: var(--secondary); }
.range-control { flex-shrink: 0; }
.kpi-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 13px; }
.kpi { position: relative; min-width: 0; text-align: left; border: 1px solid rgba(60,60,67,.055); border-radius: var(--radius); padding: 19px 19px 18px; background: var(--panel); box-shadow: 0 2px 5px rgba(0,0,0,.025); }
.kpi-label { display: flex; align-items: center; gap: 7px; font-size: .79rem; font-weight: 500; color: var(--secondary); }
.kpi-label .icon { width: 16px; height: 16px; color: var(--metric-color); }
.kpi-value { display: block; font-size: clamp(1.7rem,2.2vw,2.5rem); font-weight: 650; letter-spacing: -.055em; font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 15px; white-space: nowrap; }
.kpi-arrow { position: absolute; right: 16px; top: 19px; opacity: 0; color: var(--secondary); }
.kpi-arrow .icon { width: 13px; height: 13px; }
.kpi.active { box-shadow: 0 0 0 1.5px var(--accent),0 2px 6px rgba(0,80,180,.04); }
.kpi[data-metric="views"] { --metric-color: #007aff; }
.kpi[data-metric="likes"] { --metric-color: #dd5076; }
.kpi[data-metric="comments"] { --metric-color: #bd7624; }
.kpi[data-metric="shares"] { --metric-color: #218b8f; }
.kpi[data-metric="saves"] { --metric-color: #7d5ad4; }
.kpi-missing { display: block; margin-top: 7px; font-size: .65rem; color: var(--secondary); }
.update-line { display: flex; align-items: center; gap: 6px; margin: 15px 2px 22px; color: var(--secondary); font-size: .72rem; }
.status-indicator { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.chart-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-bottom: 25px; }
.panel { min-width: 0; border-radius: var(--radius); background: var(--panel); border: 1px solid rgba(60,60,67,.055); box-shadow: 0 2px 5px rgba(0,0,0,.025); }
.followers-panel, .performance-panel { padding: 22px 23px 18px; scroll-margin-top: 90px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; min-height: 34px; gap: 12px; }
.chart-key { display: flex; align-items: center; gap: 5px; color: var(--secondary); font-size: .71rem; }
.chart-key i { background: var(--green); width: 6px; height: 6px; border-radius: 50%; }
.follower-summary, .performance-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; min-height: 58px; margin-top: 13px; }
.follower-summary strong, .performance-summary strong { font-size: 2.25rem; font-weight: 650; letter-spacing: -.055em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.follower-summary span, .performance-summary span { color: var(--secondary); font-size: .76rem; }
.positive { color: var(--green) !important; }
.negative { color: var(--negative) !important; }
.chart { height: 232px; touch-action: pan-y; cursor: crosshair; border-radius: 5px; position: relative; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart-axis { font-size: 10px; fill: var(--secondary); }
.chart-gridline { stroke: var(--line); stroke-dasharray: 3 4; stroke-width: 1; }
.chart-line { stroke: var(--green); fill: none; stroke-width: 2.3; stroke-linejoin: round; }
.chart-bar { fill: #88afdf; }
.chart-bar.selected { fill: var(--accent); }
.chart-marker { pointer-events: none; }
.chart-crosshair { stroke: var(--secondary); stroke-dasharray: 3 4; stroke-width: .8; opacity: .55; }
.chart-marker circle { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }
.follower-plot .chart-marker circle { fill: var(--green); }
.chart-footer { display: flex; justify-content: space-between; gap: 12px; color: var(--secondary); font-size: .68rem; margin-top: 10px; }
.chart-empty { display: grid; height: 100%; place-items: center; color: var(--secondary); font-size: .85rem; }
.content-panel { padding: 23px 23px 10px; scroll-margin-top: 90px; }
.stories-panel { padding:23px 23px 18px; margin-bottom:25px; scroll-margin-top:90px; }
.story-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:5px 0 23px; border-bottom:1px solid var(--line); gap:22px; }
.story-kpi { min-width:0; }
.story-kpi > span { display:block; color:var(--secondary); font-size:.78rem; }
.story-kpi strong { display:block; font-size:2rem; font-weight:650; letter-spacing:-.045em; line-height:1.2; margin-top:8px; font-variant-numeric:tabular-nums; }
.story-kpi small { display:block; font-size:.67rem; color:var(--secondary); margin-top:6px; }
.story-chart-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:23px 0 12px; }
.story-chart-heading > span { font-size:.7rem; color:var(--secondary); }
.content-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 20px; }
.content-heading h2 { font-size: 1.35rem; }
.content-heading p { color: var(--secondary); font-size: .75rem; margin-top: 5px; }
.table-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 18px; }
.table-controls { display: flex; align-items: center; gap: 8px; }
.search-box { display: flex; align-items: center; gap: 7px; width: 260px; min-width: 120px; border: 1px solid transparent; border-radius: 9px; background: var(--inset); padding: 0 10px; color: var(--secondary); min-height: 36px; }
.search-box > [data-icon] .icon { width: 15px; height: 15px; }
.search-box:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 3px rgba(0,122,255,.15); }
.search-box input { appearance: none; -webkit-appearance: none; border: 0; min-width: 0; width: 100%; padding: 8px 0; background: transparent; font-size: .82rem; outline: none; }
.search-box input::-webkit-search-decoration, .search-box input::-webkit-search-cancel-button, .search-box input::-webkit-search-results-button { appearance: none; -webkit-appearance: none; display: none; }
.search-clear { border: 0; background: rgba(120,120,128,.2); color: var(--secondary); border-radius: 50%; width: 17px; height: 17px; display: grid; place-items: center; padding: 0; flex-shrink: 0; }
.search-clear .icon { width: 10px; height: 10px; }
.filter-chip { border: 0; border-radius: 7px; background: var(--accent-soft); color: var(--accent); padding: 6px 9px; margin: 0 0 12px; display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; }
.filter-chip .icon { width: 12px; height: 12px; }
.table-scroll { width: 100%; overflow: auto; border-radius: 9px; }
table { border-collapse: collapse; width: 100%; text-align: left; font-size: .8rem; white-space: nowrap; }
thead { background: var(--canvas); color: var(--secondary); font-size: .69rem; }
th { padding: 10px 11px; font-weight: 500; }
th[aria-sort="descending"] { color: var(--accent); }
td { padding: 15px 11px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { min-width: 210px; max-width: 360px; padding-left: 12px; }
td:not(:first-child), th:not(:first-child) { text-align: right; }
td:nth-child(2) { color: var(--secondary); font-size: .73rem; }
.post-title { display: flex; align-items: center; gap: 10px; }
.post-icon { display: grid; place-items: center; width: 32px; height: 37px; border-radius: 8px; color: var(--secondary); background: var(--inset); flex-shrink: 0; }
.post-icon .icon { width: 17px; height: 17px; }
.post-cover { position:relative; display:block; width:44px; height:58px; flex-shrink:0; overflow:hidden; border-radius:8px; background:var(--inset); box-shadow:inset 0 0 0 1px var(--line); }
.post-cover .post-icon { width:100%; height:100%; }
.post-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.post-open { display:flex; align-items:center; gap:10px; min-width:0; border:0; padding:0; background:transparent; text-align:left; border-radius:8px; }
.post-name { min-width:0; }
.post-label { display:block; font-size:.8rem; font-weight:500; max-width:280px; overflow:hidden; text-overflow:ellipsis; }
.post-kind { display:block; }
.post-title > .post-instagram { margin-left:auto; flex-shrink:0; }
.post-instagram { color:var(--secondary); }
.post-title > .post-instagram { width:44px; height:44px; border-radius:12px; }
.post-detail-open { overflow:hidden; }
.post-dialog { position:fixed; inset:0; width:min(75rem,calc(100vw - 4rem)); max-width:none; max-height:calc(100dvh - 4rem); margin:auto; padding:0; border:1px solid var(--line); border-radius:1.8rem; color:var(--ink); background:var(--panel); box-shadow:0 2rem 7rem rgba(0,0,0,.2),0 .3rem 1rem rgba(0,0,0,.06); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scroll-padding-block:6.5rem 2rem; will-change:transform,opacity; }
.post-dialog::backdrop { background:rgb(18 18 22 / calc(var(--post-presence,1) * .28)); backdrop-filter:blur(8px); }
.post-dialog-header { position:sticky; top:0; z-index:2; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; padding:1rem 1.4rem; background:var(--material); backdrop-filter:blur(28px) saturate(150%); }
.post-dialog[data-scrolled="true"] .post-dialog-header { box-shadow:0 .5rem 1rem rgba(0,0,0,.035); }
.post-dialog-header h2 { font-size:.92rem; font-weight:600; letter-spacing:0; }
.post-dialog-header h2:focus { outline:none; }
.post-dialog .post-dialog-close { justify-self:start; width:44px; height:44px; border-radius:50%; background:var(--inset); color:var(--secondary); }
.post-dialog-close .icon { width:17px; height:17px; }
.post-dialog-actions { display:flex; align-items:center; justify-content:flex-end; gap:.6rem; }
.post-dialog-actions .post-instagram { min-height:40px; padding:.65rem .9rem; border:0; border-radius:2rem; background:var(--inset); box-shadow:none; color:var(--ink); font-size:.82rem; }
.post-dialog-actions .post-instagram:active { background:var(--line); }
.post-sheet-grab { display:none; }
.post-dialog-content { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr); column-gap:2.5rem; row-gap:1.25rem; padding:1.5rem 2rem 2rem; align-items:start; }
.post-detail-intro { grid-column:2; min-width:0; }
.post-detail-media { grid-column:1; grid-row:1 / span 2; min-width:0; position:sticky; top:6.5rem; }
.post-media-frame { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:9/16; max-height:min(39rem,calc(100dvh - 16rem)); overflow:hidden; isolation:isolate; border-radius:1.3rem; background:var(--inset); }
.post-media-frame.is-image { aspect-ratio:4/5; }
.post-cover-fallback { width:100%; height:100%; position:relative; }
.post-detail-cover,.post-media-frame video { display:block; width:100%; height:100%; object-fit:contain; }
.post-media-frame video { position:absolute; inset:0; background:#111; opacity:0; pointer-events:none; }
.post-media-frame.video-active video { opacity:1; pointer-events:auto; }
.post-play-button { position:absolute; inset:0; margin:auto; width:64px; height:64px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.6); border-radius:50%; background:rgba(255,255,255,.84); color:#1d1d1f; box-shadow:0 3px 22px rgba(0,0,0,.15); backdrop-filter:blur(14px); }
.post-play-button svg { width:27px; height:27px; fill:currentColor; }
.post-play-button:active { background:white; transform:scale(.94); }
.post-play-button[aria-disabled="true"] { opacity:1; cursor:progress; }
.post-media-frame.is-loading .post-play-button svg { visibility:hidden; }
.post-media-frame.is-loading .post-play-button::after { content:""; position:absolute; width:25px; height:25px; border:2px solid rgba(29,29,31,.2); border-top-color:#1d1d1f; border-radius:50%; animation:post-loading .8s linear infinite; }
@keyframes post-loading { to { transform:rotate(360deg); } }
.post-media-empty { height:100%; min-height:200px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1rem; color:var(--secondary); font-size:.85rem; }
.post-media-empty .icon { width:32px; height:32px; }
.post-media-status { color:var(--secondary); font-size:.78rem; margin-top:.8rem; line-height:1.5; }
.post-caption { margin-top:1rem; font-size:.85rem; }
.post-caption summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer; min-height:44px; color:var(--secondary); list-style:none; border-radius:.7rem; }
.post-caption summary::after { content:"+"; font-size:1.3rem; font-weight:350; }
.post-caption[open] summary::after { content:"−"; }
.post-caption p { white-space:pre-wrap; overflow-wrap:anywhere; margin-top:.5rem; line-height:1.65; }
.post-detail-info { grid-column:2; min-width:0; }
.post-detail-date { color:var(--secondary); font-size:.82rem; letter-spacing:.01em; margin-bottom:.65rem; }
.post-detail-heading { font-size:1.4rem; font-weight:650; line-height:1.35; letter-spacing:-.025em; overflow-wrap:anywhere; }
.post-primary-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2rem .85rem; margin:0; padding-bottom:1.6rem; border-bottom:1px solid var(--line); }
.post-primary-metrics > div { min-width:0; }
.post-primary-metrics > div:first-child { grid-column:1 / -1; }
.post-primary-metrics dt { font-size:.8rem; color:var(--secondary); letter-spacing:.01em; }
.post-primary-metrics dd { margin:.35rem 0 0; font-size:1.35rem; line-height:1.25; letter-spacing:-.03em; font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.post-primary-metrics > div:first-child dd { font-size:3rem; font-weight:650; line-height:1.1; letter-spacing:-.05em; }
.post-metric-group { margin-top:1.6rem; }
.post-metric-group h4 { font-size:.9rem; font-weight:600; margin:0 0 .7rem; letter-spacing:-.01em; }
.post-metric-group dl,.post-unavailable dl { margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem 1.5rem; }
.post-metric-group dl > div { min-width:0; padding:.7rem .8rem; background:var(--canvas); border-radius:.75rem; }
.post-metric-group [data-detail-metric="igReelsVideoViewTotalTime"] { grid-column:1 / -1; }
.post-metric-group dt,.post-unavailable dt { color:var(--secondary); font-size:.8rem; line-height:1.45; letter-spacing:.005em; overflow-wrap:anywhere; }
.post-metric-group dd,.post-unavailable dd { margin:.3rem 0 0; font-size:1.05rem; line-height:1.3; letter-spacing:-.015em; font-weight:550; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.post-unavailable { margin-top:1.5rem; border-top:1px solid var(--line); }
.post-unavailable summary { display:flex; align-items:center; gap:.6rem; min-height:48px; padding:.6rem 0; color:var(--secondary); font-size:.8rem; list-style:none; cursor:pointer; }
.post-unavailable summary::-webkit-details-marker,.post-caption summary::-webkit-details-marker { display:none; }
.post-disclosure-count { font-size:.72rem; background:var(--inset); padding:.15rem .45rem; border-radius:1rem; font-variant-numeric:tabular-nums; }
.post-unavailable summary .icon { width:14px; height:14px; margin-left:auto; }
.post-unavailable[open] summary .icon { transform:rotate(180deg); }
.post-unavailable dl { padding:.5rem 0 1rem; }
.post-unavailable dl > div { padding:.45rem 0; }
.post-detail-source { margin-top:1rem; font-size:.74rem; color:var(--secondary); line-height:1.6; }
.post-kind { color: var(--secondary); font-size: .65rem; margin-top: 4px; }
.empty-row { text-align: center !important; padding: 40px !important; color: var(--secondary); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; color: var(--secondary); font-size: .73rem; }
.pagination > div { display: flex; align-items: center; gap: 10px; }
.pagination .icon-button { width: 30px; height: 30px; }
.pagination .icon { width: 15px; height: 15px; }
.select-control { display: inline-flex; min-width: 0; }
.select-trigger { width: 100%; min-height: 35px; display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 7px 10px 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.035); font-size: .8rem; font-weight: 500; }
.select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-trigger .icon { width: 14px; height: 14px; color: var(--secondary); }
.select-trigger[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(0,122,255,.16); border-color: var(--focus-ring); }
.range-control .select-trigger { min-width: 160px; }
.chart-metric-control .select-trigger { border-color: transparent; box-shadow: none; background: var(--inset); min-height: 31px; min-width: 98px; padding-top: 5px; padding-bottom: 5px; font-size: .75rem; }
select:not([hidden]) { appearance: none; -webkit-appearance: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 25px 8px 12px; background: var(--panel); font-size: .8rem; }
.material { background: var(--material); backdrop-filter: blur(30px) saturate(150%); box-shadow: var(--shadow); border: 1px solid rgba(120,120,128,.16); }
.select-menu { position: fixed; z-index: 70; border-radius: 11px; padding: 5px; overflow-y: auto; overscroll-behavior: contain; }
.select-option { width: 100%; min-height: 34px; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 7px 9px; border: 0; border-radius: 6px; background: transparent; text-align: left; font-size: .83rem; font-weight: 450; }
.select-option .icon { visibility: hidden; width: 14px; height: 14px; }
.select-option[aria-selected="true"] .icon { visibility: visible; }
.select-option:focus { outline: none; color: #fff; background: var(--accent); }
.chart-popover { position: fixed; z-index: 60; width: 380px; max-width: calc(100vw - 24px); max-height: min(540px,calc(100dvh - 32px)); padding: 17px; border-radius: 15px; overflow: auto; overscroll-behavior: contain; }
.popover-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.popover-value { font-size: 1.85rem; line-height: 1.2; font-weight: 650; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.popover-value > span { margin-left: 7px; color: var(--secondary); font-size: .8rem; font-weight: 450; letter-spacing: 0; }
.popover-change { font-size: .8rem; margin-top: 6px; }
.popover-meta { font-size: .75rem; color: var(--secondary); margin-top: 6px; }
.popover-posts { margin-top: 14px; }
.popover-post { border-top: 1px solid var(--line); padding: 14px 0; }
.popover-post > a { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; font-size: .86rem; font-weight: 550; line-height: 1.45; }
.popover-post > a .icon { width: 12px; height: 12px; margin-top: 3px; color: var(--secondary); }
.post-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px 12px; margin: 12px 0 0; }
.post-metrics dt { font-size: .64rem; color: var(--secondary); }
.post-metrics dd { font-size: .82rem; font-weight: 500; font-variant-numeric: tabular-nums; margin: 3px 0 0; }
.post-metrics .emphasized dd { color: var(--accent); }
.popover-action { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 36px; border: 0; border-top: 1px solid var(--line); background: transparent; padding: 13px 0 0; width: 100%; color: var(--accent); font-size: .8rem; text-align: left; }
.popover-action .icon { width: 15px; height: 15px; }
.popover-empty { color: var(--secondary); font-size: .82rem; margin: 15px 0 4px; }
.info-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 17px 20px; margin-bottom: 22px; font-size: .83rem; }
.info-panel strong { font-weight: 600; }
.info-panel p { color: var(--secondary); margin-top: 7px; line-height: 1.6; }
.info-panel p:last-child { font-size: .73rem; }
.notice.error { background: #fff0ee; color: #aa302b; padding: 12px 16px; border-radius: 10px; font-size: .85rem; margin-bottom: 18px; }
.startup { min-height: 100dvh; display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--secondary); }
.login-screen { min-height: 100dvh; display: grid; place-items: center; padding: 28px; }
.login-card { width: 100%; max-width: 365px; padding: 32px; border-radius: 22px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 6px 28px rgba(0,0,0,.035); }
.login-card .app-mark { margin-bottom: 22px; width: 47px; height: 47px; border-radius: 14px; font-size: 29px; }
.login-card h1 { font-size: 1.65rem; letter-spacing: -.04em; }
.login-card > p { color: var(--secondary); font-size: .86rem; margin: 10px 0 25px; }
.login-card form { display: grid; gap: 8px; margin-top: 14px; }
.login-card label { font-size: .79rem; font-weight: 500; }
.login-card input { appearance: none; border: 1px solid var(--line); border-radius: 8px; padding: 11px; background: var(--canvas); width: 100%; }
.login-card label:not(:first-child) { margin-top: 8px; }
.login-card .setup-account { margin: 0 0 8px; font-size: .85rem; overflow-wrap: anywhere; }
.login-card .setup-scope, .login-card form small { font-size: .74rem; line-height: 1.5; color: var(--secondary); }
.login-card .setup-scope { margin: 8px 0 0; }
.login-card .button { margin-top: 8px; min-height: 40px; }
.login-card .message { font-size: .76rem; line-height: 1.6; margin-top: 15px; }
.message.error { color: var(--negative); }
.access-panel { padding: 24px; scroll-margin-top: 90px; }
.access-form { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.access-form > div { flex: 1 1 240px; max-width: 420px; display: grid; gap: 8px; }
.access-form label { font-size: .8rem; font-weight: 500; }
.access-form input, .invite-link-result input { appearance: none; width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); padding: 12px; font: inherit; min-height: 44px; }
.access-form .button { min-height: 44px; }
.access-members { list-style: none; padding: 0; margin: 20px 0 0; }
.access-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.access-person { min-width: 0; display: grid; gap: 6px; }
.access-person strong { font-size: .9rem; font-weight: 550; overflow-wrap: anywhere; }
.access-person span, .access-owner, .invite-link-result > div > span { font-size: .78rem; color: var(--secondary); }
.access-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.destructive-text { color: var(--negative); }
.invite-link-result { display: grid; gap: 12px; padding: 18px; border-radius: 14px; background: var(--canvas); border: 1px solid var(--line); }
.invite-link-result > div:first-child { display: grid; gap: 6px; overflow-wrap: anywhere; }
.access-panel .message { margin-top: 16px; font-size: .85rem; }
.access-confirm { width: min(400px,calc(100vw - 32px)); padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); color: var(--ink); box-shadow: 0 20px 80px #0003; }
.access-confirm::backdrop { background: #0005; }
.access-confirm h2 { font-size: 1.2rem; }
.access-confirm p { font-size: .85rem; line-height: 1.5; margin: 16px 0; overflow-wrap: anywhere; }
#invite-confirm-wrap { display: grid; gap: 8px; }
@media (max-width: 600px) {
  .access-panel { padding: 20px 18px; }
  .access-form input, .login-card input { font-size: 16px; }
  .access-form .button { width: 100%; }
}
@media (hover:hover) {
  .nav-item:not(.selected):hover, .icon-button:hover { background: rgba(120,120,128,.09); }
  .kpi:hover { box-shadow: 0 0 0 1px rgba(0,105,220,.3),0 4px 12px rgba(0,0,0,.04); }
  .kpi:hover .kpi-arrow, .kpi:focus-visible .kpi-arrow { opacity: 1; }
  .button:not(.primary):hover { background: var(--inset); }
  .select-option:hover { color: #fff; background: var(--accent); }
  .post-open:hover .post-label, .post-instagram:hover, .popover-post > a:hover { color: var(--accent); }
  .chart-bar:hover { fill: var(--accent); }
}
:root[data-theme="dark"] { color-scheme:dark; --canvas:#1b1b1d; --panel:#28282b; --ink:#f3f3f5; --secondary:#ababaf; --tertiary:#909096; --line:rgba(235,235,245,.13); --inset:#36363a; --accent:#75b6ff; --accent-soft:#233b55; --green:#75be94; --negative:#ff928c; --sidebar:rgba(35,35,38,.86); --material:rgba(49,49,53,.97); --shadow:0 14px 40px rgba(0,0,0,.3); --focus-ring:#75b6ff; }
:root[data-theme="dark"] .toolbar { background:rgba(27,27,29,.86); border-color:var(--line); }
:root[data-theme="dark"] .nav-item.selected { background:rgba(255,255,255,.08); }
:root[data-theme="dark"] .panel, :root[data-theme="dark"] .kpi { border-color:rgba(255,255,255,.035); }
:root[data-theme="dark"] .chart-bar { fill:#577faa; }
:root[data-theme="dark"] .button.primary, :root[data-theme="dark"] .select-option:focus { background:#0a64cf; color:white; }
:root[data-theme="dark"] .notice.error { background:#422826; color:#ffb0a5; }
@media (hover:hover) { :root[data-theme="dark"] .select-option:hover { background:#0a64cf; color:white; } }
@media (min-width:1600px) { .page-content { padding-top:39px; } .kpi { padding:23px; } .kpi-value { font-size:2.5rem; } .chart-grid { gap:23px; } }
@media (max-width:1150px) {
  .app { grid-template-columns:185px minmax(0,1fr); }
  .sidebar { padding-left:12px; padding-right:12px; }
  .toolbar { padding:0 24px; }
  .page-content { padding:28px 24px 0; }
  .kpi-grid { gap:10px; }
  .kpi { padding:16px 13px; }
  .kpi-value { font-size:1.85rem; }
  .kpi-label { font-size:.72rem; }
  .kpi-label .icon { width:14px; height:14px; }
  .kpi-arrow { display:none; }
  .followers-panel,.performance-panel { padding:20px 18px 16px; }
  .chart-grid { gap:15px; }
  .follower-summary strong,.performance-summary strong { font-size:2rem; }
  .table-toolbar { gap:10px; }
  .search-box { width:210px; }
}
@media (max-width:900px) {
  .story-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app { grid-template-columns:165px minmax(0,1fr); }
  .brand { padding-left:5px; gap:8px; }
  .brand .app-mark { width:32px; height:32px; font-size:21px; border-radius:10px; }
  .nav-item { padding-left:10px; font-size:.82rem; gap:9px; }
  .chart-grid { grid-template-columns:minmax(0,1fr); }
  .kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .kpi:nth-child(1),.kpi:nth-child(2) { grid-column:auto; }
  .kpi-value { font-size:2rem; }
  .table-toolbar { flex-wrap:wrap; }
  .search-box { width:100%; }
  .table-controls { width:100%; justify-content:flex-end; }
  .account-chip { padding-left:3px; gap:6px; }
  .account-chip strong { font-size:.67rem; }
}
@media (max-width:640px) {
  html { scroll-padding-top:76px; scroll-padding-bottom:90px; }
  .app { display:block; padding-bottom:72px; }
  .sidebar { height:67px; padding:0; position:fixed; bottom:0; top:auto; left:0; right:0; z-index:35; border-right:0; border-top:1px solid var(--line); background:var(--sidebar); padding-bottom:env(safe-area-inset-bottom); }
  .brand,.nav-label,.account-chip { display:none; }
  .sidebar nav { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; height:100%; padding:5px 12px; }
  .sidebar nav:has(#access-nav:not([hidden])) { grid-template-columns: repeat(5,1fr); }
  .nav-item { display:flex; flex-direction:column; justify-content:center; gap:4px; margin:0; padding:5px; min-height:48px; font-size:.64rem; border-radius:10px; }
  .nav-item .icon { width:19px; height:19px; }
  .nav-item.selected { background:transparent; box-shadow:none; color:var(--accent); }
  .toolbar { height:62px; padding:0 18px; }
  .toolbar-identity { gap:9px; }
  .toolbar-identity .local-chip { display:none !important; }
  .toolbar-actions { gap:3px; }
  .icon-button { width:37px; height:40px; }
  .page-content { padding:24px 16px 0; }
  .intro { margin-bottom:21px; gap:12px; }
  h1 { font-size:1.95rem; }
  .intro p { font-size:.75rem; margin-top:5px; }
  .range-control .select-trigger { min-width:135px; font-size:.75rem; min-height:38px; padding-left:10px; gap:9px; }
  .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .kpi:first-child { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px; }
  .kpi:first-child .kpi-value { margin:0; font-size:2.15rem; }
  .kpi { padding:16px; border-radius:15px; }
  .kpi-value { font-size:1.85rem; margin-top:11px; }
  .kpi-label { font-size:.79rem; }
  .kpi-label .icon { width:16px; height:16px; }
  .update-line { font-size:.67rem; margin:14px 1px 20px; }
  .chart-grid { gap:16px; margin-bottom:20px; }
  .followers-panel,.performance-panel { padding:18px 16px 16px; }
  .panel { border-radius:16px; }
  .follower-summary,.performance-summary { margin-top:12px; min-height:54px; gap:9px; }
  .follower-summary strong,.performance-summary strong { font-size:2.1rem; }
  .follower-summary span,.performance-summary span { font-size:.7rem; }
  .chart-footer { font-size:.62rem; }
  .content-panel { padding:18px 15px 9px; scroll-margin-top:80px; }
  .stories-panel { padding:18px 15px 16px; margin-bottom:20px; scroll-margin-top:80px; }
  .story-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 15px; }
  .story-kpi strong { font-size:clamp(1.4rem,6.4vw,1.85rem); }
  .story-kpi > span { font-size:.73rem; }
  .story-kpi small { font-size:.61rem; }
  .story-chart-heading { align-items:flex-start; flex-direction:column; gap:5px; margin-top:21px; }
  .stories-panel > .chart-footer { flex-wrap:wrap; gap:5px; }
  .content-heading { margin-bottom:17px; }
  .content-heading h2 { font-size:1.3rem; }
  .content-heading .button { font-size:.75rem; min-height:37px; }
  .table-toolbar { gap:10px; margin-bottom:15px; }
  .search-box { min-height:42px; }
  .search-box input { font-size:16px; padding:9px 0; }
  .search-clear { width:25px; height:25px; }
  .table-controls { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .table-controls .select-control { display:flex; }
  .select-trigger { min-height:40px; font-size:.76rem; gap:8px; }
  .select-option { min-height:43px; font-size:.9rem; }
  .select-menu { border-radius:13px; }
  .table-scroll { width:100%; }
  th:first-child,td:first-child { min-width:210px; }
  .post-label { max-width:220px; }
  .pagination { min-height:56px; font-size:.69rem; }
  .pagination .icon-button { width:37px; height:37px; }
  .chart-popover { left:12px !important; right:12px; top:auto !important; bottom:calc(12px + env(safe-area-inset-bottom)); width:auto; max-width:none; max-height:60dvh; padding:19px; border-radius:21px; z-index:80; }
  .popover-heading h3 { font-size:1rem; }
  .close-button { width:32px; height:32px; }
  .popover-value { font-size:2rem; }
  .post-metrics dt { font-size:.7rem; }
  .post-metrics dd { font-size:.9rem; }
  .popover-action { min-height:44px; }
}
@media (max-width:350px) {
  .toolbar { padding:0 12px; }
  .local-chip { display:none !important; }
  .page-content { padding-left:12px; padding-right:12px; }
  .intro { align-items:flex-start; flex-direction:column; gap:14px; }
  .range-control,.range-control .select-control { width:100%; }
  .range-control .select-trigger { width:100%; }
  .kpi-value { font-size:1.6rem; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
  button:active { transform:none !important; }
}
@media (max-width:700px) {
  .post-dialog { width:100%; max-height:94dvh; margin:auto 0 0; border-radius:1.8rem 1.8rem 0 0; border-bottom:0; scroll-padding-top:7rem; }
  .post-dialog-header { padding:1.8rem 1rem .6rem; gap:.6rem; }
  .post-sheet-grab { display:grid; place-items:center; position:absolute; top:0; left:0; right:0; height:24px; touch-action:none; cursor:grab; }
  .post-sheet-grab span { width:36px; height:5px; border-radius:5px; background:var(--tertiary); opacity:.5; }
  .post-sheet-grab:active { cursor:grabbing; }
  .post-sheet-grab:active span { opacity:.85; }
  .post-dialog-actions .post-instagram { width:44px; min-height:44px; height:44px; padding:0; justify-content:center; }
  .post-dialog-actions .post-instagram > span { display:none; }
  .post-dialog-content { grid-template-columns:minmax(0,1fr); padding:1rem 1.3rem calc(1.8rem + env(safe-area-inset-bottom)); gap:1.4rem; }
  .post-detail-intro,.post-detail-info,.post-detail-media { grid-column:1; grid-row:auto; }
  .post-detail-media { position:static; }
  .post-media-frame { height:min(38dvh,25rem); width:auto; max-width:100%; aspect-ratio:9/16; margin-inline:auto; border-radius:1rem; }
  .post-media-frame.is-image { aspect-ratio:4/5; }
  .post-media-empty { min-height:0; padding:1rem; text-align:center; }
  .post-detail-heading { font-size:1.25rem; }
  .post-detail-date { font-size:.78rem; }
  .post-primary-metrics { gap:1.1rem .7rem; }
  .post-primary-metrics dd { font-size:1.15rem; }
  .post-primary-metrics > div:first-child dd { font-size:2.6rem; }
  .post-primary-metrics dt { font-size:.76rem; }
  .post-metric-group dl,.post-unavailable dl { column-gap:.7rem; }
}
@media (max-width:360px) {
  .post-primary-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-transparency:reduce) { .sidebar,.toolbar,.material,.post-dialog-header { backdrop-filter:none; background:var(--panel); } .post-dialog::backdrop { backdrop-filter:none; } .post-play-button { backdrop-filter:none; background:#fff; } }
@media (prefers-contrast:more) { :root { --secondary:var(--ink); --line:currentColor; } .sidebar,.toolbar,.material,.post-dialog-header { backdrop-filter:none; background:var(--panel); } .kpi,.panel,.post-dialog { border-color:var(--ink); } .post-metric-group dl > div { outline:1px solid var(--line); } }
@media (forced-colors:active) { :focus-visible { outline:3px solid Highlight; } .chart-line,.chart-marker circle { stroke:CanvasText; } .chart-bar { fill:Highlight; } }