/* Shared visual language: report-agrinesia.inspace.id/app/globals.css.
   Forest palette, matching light/dark surface tokens and soft report cards. */
:root {
  --h:155; --primary:oklch(.46 .115 var(--h));
  --background:oklch(.985 .004 var(--h)); --foreground:oklch(.24 .03 var(--h));
  --card:oklch(1 0 0); --surface-muted:oklch(.967 .008 var(--h));
  --secondary:oklch(.955 .022 var(--h)); --muted-foreground:oklch(.49 .025 var(--h));
  --border:oklch(.918 .012 var(--h)); --sidebar:var(--card);
  --green:var(--primary); --green-light:var(--secondary); --ink:var(--foreground);
  --muted:var(--muted-foreground); --bg:var(--background); --white:var(--card);
  --shadow:0 8px 30px rgba(18,55,35,.045);
  --scroll-thumb:oklch(.76 .025 var(--h)); --scroll-hover:oklch(.58 .045 var(--h));
  color-scheme:light;
}
:root.dark {
  --primary:oklch(.66 .14375 var(--h)); --background:oklch(.175 .012 var(--h));
  --foreground:oklch(.95 .008 var(--h)); --card:oklch(.215 .014 var(--h));
  --surface-muted:oklch(.26 .014 var(--h)); --secondary:oklch(.29 .04 var(--h));
  --muted-foreground:oklch(.72 .02 var(--h)); --border:oklch(1 0 0 / 11%);
  --sidebar:oklch(.195 .013 var(--h)); --shadow:0 8px 30px #00000020;
  --scroll-thumb:oklch(.38 .025 var(--h)); --scroll-hover:oklch(.53 .04 var(--h));
  color-scheme:dark;
}
/* Native scrolling and OS accessibility retained; no custom JS scroll layer. */
* { scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--scroll-thumb); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:var(--scroll-hover); }
html { scrollbar-gutter:stable; }
body { background:var(--background); color:var(--foreground); }
.sidebar { background:var(--sidebar); }
.topbar { background:var(--card); }
.corporate-logo { display:block; width:150px; height:43px; object-fit:contain; }
.brandmark { padding:0 10px 24px; }
.brand-sub { font-size:9px; letter-spacing:2.1px; color:var(--muted); }
.dark .corporate-logo { background:white; padding:5px 10px; border-radius:8px; }
.workspace,.nav-item,.button,.filter-select,.search-field input { border-radius:10px; }
.nav-item { color:var(--muted); }
.nav-item:hover,.icon-button:hover { background:var(--secondary); color:var(--green); }
.workspace-icon,.avatar,.count-pill,.view-toggle,.quality-bar { background:var(--secondary); color:var(--green); }
.avatar { border-color:var(--border); }
.theme-control { display:flex; align-items:center; gap:6px; padding:7px 10px; background:var(--surface-muted); border:1px solid var(--border); border-radius:10px; color:var(--muted); }
.theme-control>span { font-size:19px; line-height:1; }
.theme-control select { border:0; background:transparent; color:var(--foreground); font-size:12px; max-width:95px; cursor:pointer; }
.theme-control select option { background:var(--card); color:var(--foreground); }
.top-right { gap:16px; }
.breadcrumb strong,.brand-name,.metric-number,.footer strong { color:var(--foreground); }
.brand-handle,.metric-missing,.metric-note,.stat-label,.stat-note,.stat:last-child .stat-note,
.area-mini small,.area-mini .area-n,.directory-heading p,.filter-info,.table-footer,.notice,
.footer,.card-numbers small,.card-actions label,.competitor-names,.area-card-body>p,
.panel p,.panel li,.source-card small,.detail-intro p,.account-evidence,.metric-context,
.metric-grid small,.social-card.missing p,.hypothesis p,.notes-label small,.research-status,
.research-status small,.nav-label,.edition,.breadcrumb,.comparison-table small,
.comparison-table th:first-child,.comparison-table td:first-child,.area-summary p { color:var(--muted); }
.stat,.stat:last-child,.directory,.area-mini,.area-card,.compare-content,.panel,.source-card,
.brand-card,.social-card,dialog,.secondary,.view-toggle button.active,.pagination button,
.search-field input,.filter-select,.snapshot-dialog input,.snapshot-dialog select,
.snapshot-dialog textarea,.notes-label textarea { background:var(--card); color:var(--foreground); border-color:var(--border); }
.stat,.directory,.area-card,.compare-content,.panel,.source-card,.brand-card,dialog { border-radius:16px; box-shadow:var(--shadow); }
.stat { padding:21px; min-height:132px; }
.stat-label { max-width:calc(100% - 42px); line-height:1.5; }
.stat-value { font-size:34px; }
.stat-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; top:20px; right:18px; color:var(--green); background:linear-gradient(145deg,var(--card),var(--secondary)); border:1px solid var(--border); box-shadow:2px 4px 0 color-mix(in oklch,var(--green) 18%,var(--card)),5px 8px 14px #0000000c,inset 0 1px 0 #ffffff70; transform:rotate(-7deg); }
.stat-icon .icon { width:21px; height:21px; filter:drop-shadow(0 2px 0 #00000012); }
.stat:nth-child(2) .stat-icon { transform:rotate(7deg); }
.stat:nth-child(3) .stat-icon { transform:rotate(-5deg); }
.primary { background:linear-gradient(180deg,color-mix(in oklch,var(--primary) 82%,white),color-mix(in oklch,var(--primary) 92%,black)); border-color:var(--green); color:white; box-shadow:0 2px 3px #0001; }
.dark .primary { color:oklch(.17 .03 155); }
.primary:hover { background:var(--primary); }
.secondary:hover { background:var(--secondary); border-color:var(--green); }
.area-mini { border-radius:12px; padding:15px; transition:transform .18s,border-color .18s; }
.area-mini:hover { transform:translateY(-2px); border-color:var(--green); }
.area-mini.selected,.area-summary { background:var(--secondary); border-color:color-mix(in oklch,var(--green) 40%,var(--border)); }
.area-mini-top>span { height:11px; width:11px; background:radial-gradient(circle at 30% 25%,#ffffffad,var(--area-color) 65%); box-shadow:1px 2px 0 color-mix(in srgb,var(--area-color),black 30%),2px 4px 7px #0002; margin-right:3px; }
.area-summary { border-radius:16px; }
.tag,.tag.slate { background:var(--surface-muted); color:var(--muted); border-color:var(--border); border-radius:6px; }
.tag.own { background:var(--secondary); color:var(--green); border-color:var(--border); }
.tag.amber { background:color-mix(in oklch,#d9a62e 12%,var(--card)); color:oklch(.52 .12 70); border-color:var(--border); }
.dark .tag.amber { color:oklch(.8 .13 80); }
.card-grid { gap:20px; padding-top:8px; }
.brand-card { padding:18px; overflow:hidden; transition:transform .18s,box-shadow .18s; }
.brand-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px #12372312; border-color:color-mix(in oklch,var(--primary) 35%,var(--border)); }
.brand-cover { position:relative; height:150px; overflow:hidden; margin:-18px -18px 18px; background:var(--secondary); isolation:isolate; }
.brand-cover>img { width:100%; height:100%; object-fit:cover; display:block; }
.brand-cover.has-photo:after { content:''; position:absolute; inset:55% 0 0; background:linear-gradient(transparent,#0009); z-index:0; pointer-events:none; }
.cover-area { position:absolute; bottom:11px; left:14px; border:1px solid #ffffff45; background:#16271ee0; color:#fff; border-radius:999px; padding:4px 9px; font-size:10px; z-index:1; }
.asset-credit { position:absolute; bottom:15px; right:12px; color:white; font-size:9px; z-index:1; background:#16271ee0; padding:3px 6px; border-radius:5px; }
.cover-placeholder { background:radial-gradient(ellipse at 75% 0%,color-mix(in oklch,var(--green) 15%,transparent),transparent 65%),var(--surface-muted); }
.cover-emblem { position:absolute; left:50%; top:42%; transform:translate(-50%,-50%) rotate(-8deg); display:grid; place-items:center; width:74px; height:65px; border-radius:18px; color:var(--green); background:linear-gradient(135deg,var(--card),var(--secondary)); box-shadow:5px 6px 0 color-mix(in oklch,var(--green) 12%,var(--card)),10px 14px 24px #0001; border:1px solid var(--border); }
.cover-emblem>.icon { width:32px; height:32px; }
.cover-emblem:has(img) { width:140px; background:white; }
.cover-emblem img { width:115px; height:55px; object-fit:contain; }
.cover-caption { position:absolute; right:12px; bottom:16px; font-size:8px; letter-spacing:.7px; color:var(--muted); }
.cover-placeholder:has(.asset-credit) .cover-caption { display:none; }
.brand-card-top { min-height:47px; }
.brand-card-top>div { min-width:0; }
.brand-card .brand-name { font-size:14px; line-height:1.4; }
.brand-card .brand-handle { font-size:10px; white-space:normal; }
.brand-card .monogram { width:45px; height:45px; border:1px solid var(--border); }
.monogram.real-logo { background:white; padding:5px; }
.real-logo img { width:100%; height:100%; object-fit:contain; }
.dark .monogram:not(.real-logo) { color:var(--foreground); background:var(--secondary); }
.brand-card .area-list { flex-wrap:wrap; }
.card-numbers { display:grid; grid-template-columns:1fr 1fr; gap:12px; background:var(--surface-muted); border:1px solid var(--border); border-radius:10px; padding:12px; margin-top:15px; }
.brand-card .metric-number { font-size:21px; }
.social-icon { background:var(--surface-muted); border-color:var(--border); color:var(--foreground); }
.brand-card .social-icon { width:29px; height:29px; border-radius:9px; box-shadow:0 2px 0 var(--border),0 4px 7px #00000008; }
.social-icon[data-platform=Instagram] { background:linear-gradient(145deg,#be2484,#e65746); color:white; border-color:#ffffff25; }
.social-icon[data-platform=TikTok] { background:#172229; color:#7df6ed; border-color:#ffffff25; text-shadow:1px 1px #ef4770; }
.social-icon[data-platform=Facebook],.social-icon[data-platform=LinkedIn] { background:#206ac8; color:white; border-color:#ffffff25; }
.social-icon[data-platform=YouTube] { background:#cf2838; color:white; border-color:#ffffff25; }
.brand-table th,.comparison-table th,.detail-header,.social-card.missing,.hypothesis { background:var(--surface-muted); }
.brand-table th,.brand-table td,.nav-count,.pagination button,dialog,.snapshot-dialog input,.snapshot-dialog select,.snapshot-dialog textarea { border-color:var(--border); }
.brand-table th { color:var(--muted); }
.brand-table tbody tr:hover { background:var(--secondary); }
.pagination button.active { background:var(--green); color:var(--card); }
.icon-button { color:var(--muted); }
.icon-button.bookmarked { color:var(--green); background:var(--secondary); }
.icon-button.bookmarked .icon { fill:var(--secondary); }
.area-card-head { background:color-mix(in oklch,var(--area-color) 10%,var(--card)); }
.detail-dialog .brand-cover { margin:0; height:210px; }
.detail-header .close { background:var(--card); border:1px solid var(--border); color:var(--foreground); }
.search-field input::placeholder { color:var(--muted); }
.panel,.source-card,.social-card { box-shadow:var(--shadow); }
@media(max-width:950px) { .stat-icon { width:30px; height:30px; right:13px; } .stat { padding:17px; } }
@media(max-width:760px) {
  .top-right { gap:7px; } .top-right .avatar { display:none; }
  .theme-control { padding:5px 7px; } .theme-control select { font-size:11px; max-width:72px; }
  .area-strip { grid-template-columns:repeat(2,1fr); } .area-mini { padding:13px; }
  .area-mini-top { font-size:12px; } .area-mini small { display:block; font-size:10px; }
  .area-mini:last-child .area-mini-top { font-size:12px; }
  .stat-icon { top:15px; right:12px; width:29px; height:29px; }
  .stat-label { font-size:10px; max-width:calc(100% - 27px); }
  .stat-note { line-height:1.6; } .stat { min-height:140px; }
  .brand-card { padding:17px; } .brand-cover { margin:-17px -17px 17px; height:170px; }
  .brand-card .card-numbers { gap:12px; } .brand-card .brand-name { font-size:15px; }
  .card-grid { gap:18px; } .detail-dialog .brand-cover { height:170px; }
}
@media(forced-colors:active) { * { scrollbar-color:auto; } }

/* Compact workspace rhythm: 4 / 8 / 12 / 16 / 24px. */
main { padding-top:24px; }
.topbar { height:64px; }
.page-heading { margin-bottom:20px; }
h1 { font-size:26px; margin:6px 0 7px; letter-spacing:-.8px; }
.stats { gap:12px; margin-bottom:22px; }
.stat { min-height:108px; padding:16px 18px; }
.stat-value { font-size:28px; margin-top:5px; }
.stat-note { margin-top:6px; }
.stat-icon { top:17px; width:32px; height:32px; border-radius:10px; }
.area-strip { margin-bottom:20px; gap:8px; }
.area-mini { padding:12px 14px; }
.directory-heading { padding-top:17px; }
.filters { padding-top:14px; padding-bottom:12px; }
.card-grid { gap:14px; }
.brand-card { padding:14px; display:flex; flex-direction:column; border-radius:14px; }
.brand-cover { height:112px; flex-shrink:0; margin:-14px -14px 13px; }
.cover-emblem { width:57px; height:47px; border-radius:13px; top:39%; }
.cover-emblem>.icon { width:25px; height:25px; }
.cover-emblem:has(img) { width:112px; }
.cover-emblem img { width:95px; height:40px; }
.cover-area { bottom:9px; left:10px; }
.asset-credit { bottom:11px; right:9px; }
.cover-caption { bottom:13px; right:10px; font-size:7px; }
.brand-card-top { margin-bottom:12px; min-height:44px; gap:9px; align-items:flex-start; }
.brand-card .monogram { width:39px; height:39px; border-radius:9px; }
.brand-card .brand-name { font-size:13px; }
.brand-card-top .icon-button { flex-shrink:0; width:26px; height:28px; }
.brand-card .platform-links { margin-top:auto; }
.brand-card .area-list { margin-top:10px; }
.brand-card .card-numbers { margin:12px 0; padding:10px; min-height:84px; }
.brand-card .metric-number { font-size:19px; }
.brand-card .metric-note { line-height:1.5; }
.card-actions { min-height:28px; gap:8px; }
.brand-card:hover { transform:translateY(-2px); }
.theme-control:focus-within { outline:2px solid var(--primary); outline-offset:2px; }
.theme-control select:focus-visible { outline:0; }
.button,.icon-button,.nav-item,.view-toggle button { transition:background .15s,border-color .15s; }
@media(max-width:760px) {
  main { padding:20px 14px 16px; } .topbar { height:58px; padding:0 14px; }
  h1 { font-size:23px; } .page-heading { margin-bottom:18px; }
  .stats { gap:10px; margin-bottom:18px; }
  .stat { min-height:116px; padding:14px; } .stat-icon { right:12px; width:26px; height:26px; }
  .stat-icon .icon { width:16px; height:16px; } .stat-value { font-size:27px; }
  .area-mini { padding:11px 12px; } .area-strip { margin-bottom:18px; }
  .brand-card { padding:14px; } .brand-cover { height:128px; margin:-14px -14px 13px; }
  .brand-card .brand-name { font-size:14px; }
  .card-grid { gap:12px; padding:0 12px 12px; }
  .brand-card .social-icon { width:30px; height:30px; }
  .card-actions { min-height:32px; }
  .card-actions .text-button { padding:9px 0; }
  .brand-card-top .icon-button { width:32px; height:32px; }
  .pagination button { width:32px; height:32px; }
  .view-toggle button { padding:8px; }
}

/* Unified header; independently scrolling navigation and workspace. */
:root { --nav-width:204px; --header-height:56px; }
html { height:100%; scrollbar-gutter:auto; }
body { height:100%; overflow:hidden; }
.topbar { position:fixed; inset:0 0 auto; height:var(--header-height); padding:0 24px 0 0; z-index:40; gap:20px; background:var(--card); }
.header-brand { width:var(--nav-width); height:100%; flex-shrink:0; display:flex; align-items:center; padding:0 18px; border-right:1px solid var(--border); }
.brandmark { margin:0; padding:0; }
.corporate-logo { width:119px; height:34px; }
.dark .corporate-logo { padding:4px 7px; border-radius:6px; }
.breadcrumb { flex:1; min-width:0; font-size:12px; gap:10px; }
.breadcrumb strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-name { white-space:nowrap; }
.edition,.top-right .avatar { display:none; }
.sidebar { top:var(--header-height); bottom:0; width:var(--nav-width); padding:14px 10px; overflow-y:auto; overscroll-behavior:contain; background:var(--card); }
.sidebar .nav-item { font-size:12px; padding:10px; gap:9px; margin:2px 0; border-radius:8px; min-height:38px; }
.sidebar .nav-count { font-size:10px; padding:1px 5px; }
.sidebar-bottom { padding-top:12px; margin-top:12px; border-top:1px solid var(--border); }
.shell { margin:0 0 0 var(--nav-width); padding-top:var(--header-height); height:100dvh; }
main { width:100%; max-width:none; height:100%; overflow-y:auto; overscroll-behavior:contain; padding:22px 24px; scrollbar-gutter:stable; }
.page-heading { margin-bottom:16px; }
.page-heading .eyebrow { display:none; }
h1 { font-size:22px; letter-spacing:-.6px; margin:0 0 6px; }
.page-heading p { font-size:12px; }
.page-heading .button { margin-top:0; padding:9px 12px; }
.stats { gap:0; margin-bottom:18px; border:1px solid var(--border); border-radius:10px; background:var(--card); overflow:hidden; }
.stat,.stat:last-child { padding:12px 16px; min-height:0; border:0; border-radius:0; border-right:1px solid var(--border); box-shadow:none; background:transparent; }
.stat:last-child { border-right:0; }
.stat-label { max-width:none; font-size:11px; }
.stat-value { font-size:22px; margin-top:5px; }
.stat-note,.stat-icon { display:none; }
.directory { border-radius:12px; box-shadow:none; }
.directory-heading { padding:16px 16px 0; }
.directory-heading p { display:none; }
.primary-filters { display:flex; align-items:flex-end; padding:14px 16px 12px; gap:12px; }
.primary-filters .search-field { min-width:180px; flex:1; }
.primary-filters .search-field input { height:38px; font-size:12px; }
.primary-filters .search-field .icon { top:12px; }
.filter-field { display:flex; flex-direction:column; gap:6px; font-size:11px; color:var(--muted); min-width:0; }
.filter-field>span { font-weight:550; }
.filter-field .filter-select { width:100%; max-width:none; min-width:0; height:38px; font-size:12px; padding-right:25px; }
.primary-filters>.filter-field { width:190px; flex-shrink:0; }
.advanced-filters { margin:0 16px; border-top:1px solid var(--border); }
.advanced-filters summary { width:fit-content; cursor:pointer; padding:10px 0; font-size:12px; color:var(--muted); user-select:none; }
.advanced-filters summary:hover { color:var(--green); }
.advanced-filters summary:focus-visible { outline:2px solid var(--primary); outline-offset:3px; border-radius:3px; }
#advanced-count:not(:empty) { margin-left:6px; border-radius:4px; background:var(--secondary); color:var(--green); padding:2px 5px; font-size:10px; }
.advanced-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:4px 0 14px; }
.metrics-filter { grid-column:1/-1; display:flex; gap:7px; align-items:center; font-size:11px; color:var(--muted); }
.filter-info { padding:9px 16px 13px; align-items:center; }
.reference-context { padding:0 16px; }
.area-summary { padding:10px 12px; gap:10px; border-radius:8px; margin-bottom:14px; flex-wrap:wrap; }
.area-summary .monogram { width:32px; height:32px; font-size:11px; }
.area-summary h2 { font-size:12px; margin:3px 0; }
.area-summary .eyebrow { font-size:8px; }
.area-summary p { font-size:10px; }
.area-summary .button { padding:7px 9px; font-size:10px; }
.area-summary .button+.button { margin-left:0; }
.card-grid { padding:0 16px 16px; gap:12px; }
.brand-cover { height:86px; }
.cover-emblem { width:43px; height:35px; border-radius:9px; top:34%; }
.cover-emblem>.icon { width:20px; height:20px; }
.cover-emblem img { height:29px; }
.brand-card { border-radius:10px; box-shadow:none; }
.brand-card:hover { transform:none; box-shadow:var(--shadow); }
.brand-card .card-numbers { min-height:74px; padding:8px; margin:10px 0; }
.brand-card .metric-number { font-size:17px; }
.compare-tray { left:calc(50% + 102px); }
.nav-backdrop { position:fixed; inset:var(--header-height) 0 0; background:#0007; border:0; z-index:29; }
@media(min-width:761px) { .nav-backdrop { display:none; } }
@media(max-width:1000px) { .app-name,.crumb-slash { display:none; } }
@media(max-width:760px) {
  :root { --nav-width:204px; }
  .topbar { padding-right:12px; gap:10px; }
  .header-brand { width:auto; padding:0 0 0 12px; border:0; }
  .corporate-logo { width:95px; height:30px; }
  .breadcrumb { font-size:11px; gap:4px; }
  .breadcrumb strong { display:none; }
  #menu-toggle { width:34px; height:34px; }
  .sidebar { width:var(--nav-width); }
  .shell { margin-left:0; }
  main { padding:18px 12px; }
  h1 { font-size:20px; }
  .page-heading p { font-size:11px; }
  .page-heading { align-items:flex-start; gap:12px; }
  .stats { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:14px; }
  .stat { padding:10px 8px; min-height:0; }
  .stat-label { font-size:9px; line-height:1.5; min-height:27px; }
  .stat-value { font-size:20px; }
  .primary-filters { flex-wrap:wrap; gap:10px; }
  .primary-filters .search-field { min-width:100%; }
  .primary-filters>.filter-field { width:100%; }
  .advanced-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .filter-field .filter-select { flex:none; width:100%; min-width:0; }
  .area-summary .button { margin-left:0; }
  .brand-cover { height:96px; }
  .compare-tray { left:50%; }
  .footer { margin-top:20px; }
}