/* Dez direções visuais independentes. O painel padrão não é afetado. */
.visual-option-label { min-height: 30px; padding: 0 11px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; color: var(--muted-light); background: var(--surface-soft); font-size: 9px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }

body[data-visual] main { display:grid; grid-template-areas:"hero" "resources" "kpis" "workspace" "supplementary"; gap:24px; }
body[data-visual] .hero { grid-area:hero; }
body[data-visual] .resource-ribbon { grid-area:resources; }
body[data-visual] .kpi-grid { grid-area:kpis; margin-top:0; }
body[data-visual] .workspace { grid-area:workspace; margin-top:0; min-width:0; }
body[data-visual] .supplementary-panels { grid-area:supplementary; }
.resource-ribbon { min-width:0; padding:12px; display:grid; grid-template-columns:auto repeat(4,minmax(0,1fr)); gap:8px; align-items:stretch; border:1px solid var(--line-soft); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.resource-reference { padding:0 12px; display:flex; align-items:center; color:var(--muted); border-right:1px solid var(--line-soft); font-size:9px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.resource-stat { min-width:0; padding:9px 12px; display:flex; gap:10px; align-items:center; border-radius:10px; background:var(--surface-soft); }
.resource-icon { width:31px; height:31px; display:grid; flex:0 0 auto; place-items:center; border-radius:9px; color:var(--orange); background:var(--orange-soft); font-size:15px; }
.resource-stat span:last-child { min-width:0; display:grid; grid-template-columns:auto 1fr; align-items:baseline; column-gap:7px; }
.resource-stat small { grid-column:1/-1; color:var(--muted); font-size:8px; font-style:normal; font-weight:750; letter-spacing:.075em; text-transform:uppercase; }
.resource-stat strong { color:var(--text); font-size:17px; letter-spacing:-.03em; }
.resource-stat em { overflow:hidden; color:var(--muted); font-size:8px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.supplementary-panels { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.insight-panel { min-width:0; overflow:hidden; border:1px solid var(--line-soft); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.insight-heading { min-height:72px; padding:15px 18px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line-soft); }
.insight-heading span { display:block; }.insight-heading small { display:block; margin-bottom:5px; color:var(--orange); font-size:8px; font-weight:850; letter-spacing:.12em; }.insight-heading strong { font-size:14px; }
.insight-heading > b { min-width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:var(--orange); background:var(--orange-soft); font-size:12px; }
.insight-list { padding:7px 14px 12px; }
.insight-item, .machine-item { min-height:48px; padding:9px 4px; display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:9px; align-items:center; border-bottom:1px solid var(--line-soft); }
.insight-item:last-child, .machine-item:last-child { border-bottom:0; }
.insight-item > i { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; color:#ffbc45; background:rgba(255,188,69,.11); font-size:11px; font-style:normal; font-weight:900; }
.insight-item.critical > i { color:var(--red); background:color-mix(in srgb,var(--red) 12%,transparent); }
.insight-item span, .machine-item span { min-width:0; }.insight-item strong, .machine-item strong { display:block; overflow:hidden; color:var(--muted-light); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.insight-item small, .machine-item small { display:block; overflow:hidden; margin-top:3px; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.insight-item > b { color:var(--red); font-size:10px; white-space:nowrap; }
.machine-item > i { width:8px; height:8px; border-radius:50%; background:var(--machine-accent,var(--green)); box-shadow:0 0 0 5px color-mix(in srgb,var(--machine-accent,var(--green)) 12%,transparent); }
.machine-item > em { max-width:120px; overflow:hidden; color:var(--muted); font-size:8px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.insight-empty { min-height:118px; display:grid; place-items:center; color:var(--muted); font-size:10px; text-align:center; }
.data-caveat { padding:9px 18px; border-top:1px solid var(--line-soft); color:var(--muted); background:rgba(0,0,0,.06); font-size:8px; }

/* 01 — Executivo claro: editorial, leve e institucional. */
body[data-visual="01"] { --bg:#f1f2ec; --surface:#fffefa; --surface-soft:#f7f7f1; --line:#d7d9cf; --line-soft:#e4e5dd; --text:#172019; --muted:#6e766f; --muted-light:#485149; --orange:#537a3c; --orange-soft:rgba(83,122,60,.12); --green:#3b8b5b; --red:#c94f45; --blue:#3a78b8; --radius:8px; --shadow:0 12px 34px rgba(42,53,43,.08); color-scheme:light; background:linear-gradient(140deg,#f4f4ee,#e9eee5); font-family:Georgia,"Times New Roman",serif; }
body[data-visual="01"] .app-shell { grid-template-columns:260px minmax(0,1fr); }
body[data-visual="01"] .sidebar { padding:24px 18px; background:#203027; border-color:#34483a; color:#f4f5ef; }
body[data-visual="01"] .sidebar .brand small, body[data-visual="01"] .sidebar-footer, body[data-visual="01"] .sidebar-footer small, body[data-visual="01"] .nav-item { color:#b7c1b8; }
body[data-visual="01"] .nav-item.active { color:#fff; background:#344b3b; box-shadow:inset 3px 0 #a4c768; }
body[data-visual="01"] .nav-section, body[data-visual="01"] .nav-item.active .nav-icon { color:#b9d37f; }
body[data-visual="01"] .topbar { background:rgba(255,254,250,.88); }
body[data-visual="01"] .hero h1 { max-width:620px; font-size:48px; font-weight:500; }
body[data-visual="01"] .kpi-card { border-top:3px solid var(--orange); }
body[data-visual="01"] .kpi-card strong, body[data-visual="01"] .panel-heading h2 { font-family:ui-sans-serif,system-ui,sans-serif; }
body[data-visual="01"] .farm-dashboard-row { box-shadow:0 5px 18px rgba(30,50,35,.05); }
body[data-visual="01"] main { grid-template-areas:"hero" "kpis" "resources" "workspace"; }
body[data-visual="01"] .resource-ribbon { box-shadow:none; }

/* 02 — Blue glass: tecnologia e profundidade. */
body[data-visual="02"] { --bg:#07111f; --surface:rgba(15,31,51,.76); --surface-soft:rgba(20,42,67,.78); --line:#29435e; --line-soft:rgba(96,155,207,.16); --text:#eef8ff; --muted:#85a1b8; --muted-light:#bfd1df; --orange:#39c6e8; --orange-soft:rgba(57,198,232,.13); --green:#54e2ad; --red:#ff6f7f; --blue:#4aa8ff; --radius:18px; --shadow:0 24px 70px rgba(0,13,29,.44); background:radial-gradient(circle at 75% 0,#173d62 0,transparent 34%),linear-gradient(145deg,#050d18,#0a1728); }
body[data-visual="02"] .app-shell { grid-template-columns:84px minmax(0,1fr); }
body[data-visual="02"] .sidebar { align-items:center; padding:18px 10px; background:rgba(5,14,25,.78); backdrop-filter:blur(24px); }
body[data-visual="02"] .sidebar-brand { width:100%; justify-content:center; }
body[data-visual="02"] .sidebar-brand > span:last-child, body[data-visual="02"] .nav-section, body[data-visual="02"] .nav-item > span:last-child, body[data-visual="02"] .sidebar-footer { display:none; }
body[data-visual="02"] .sidebar-nav { width:100%; align-items:center; gap:9px; }
body[data-visual="02"] .nav-item { width:48px; justify-content:center; padding:0; }
body[data-visual="02"] .nav-item.active { box-shadow:inset 0 0 0 1px rgba(57,198,232,.25),0 10px 25px rgba(57,198,232,.12); }
body[data-visual="02"] .brand-mark { background:linear-gradient(145deg,#44dbec,#2488f4); }
body[data-visual="02"] .topbar { background:rgba(5,14,25,.7); backdrop-filter:blur(22px); }
body[data-visual="02"] .kpi-card, body[data-visual="02"] .panel, body[data-visual="02"] .farm-dashboard-row { backdrop-filter:blur(18px); }
body[data-visual="02"] .kpi-card { background:linear-gradient(145deg,rgba(75,155,224,.12),rgba(7,19,34,.62)); }
body[data-visual="02"] .panel { background:linear-gradient(160deg,rgba(23,53,83,.72),rgba(7,20,35,.84)); }
body[data-visual="02"] main { grid-template-areas:"hero" "resources" "workspace" "kpis"; }
body[data-visual="02"] .resource-ribbon { background:rgba(11,28,46,.72); backdrop-filter:blur(18px); }
body[data-visual="02"] .kpi-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
body[data-visual="02"] .kpi-card { min-height:118px; }

/* 03 — Agro premium: verde profundo e dourado. */
body[data-visual="03"] { --bg:#0d1813; --surface:#15231c; --surface-soft:#1b2d23; --line:#30463a; --line-soft:#263a30; --text:#f3f0df; --muted:#91a397; --muted-light:#c2cec3; --orange:#d9b760; --orange-soft:rgba(217,183,96,.14); --green:#76b881; --red:#e37668; --blue:#66a4d9; --radius:14px; --shadow:0 22px 54px rgba(0,0,0,.3); background:linear-gradient(145deg,#0a140f,#122018); }
body[data-visual="03"] .sidebar { width:280px; padding:26px 22px; background:#101d17; }
body[data-visual="03"] .app-shell { grid-template-columns:280px minmax(0,1fr); }
body[data-visual="03"] .brand-mark { border-radius:50%; background:#d9b760; }
body[data-visual="03"] .nav-item { min-height:46px; border-radius:12px; }
body[data-visual="03"] .nav-item.active { background:linear-gradient(90deg,rgba(217,183,96,.2),transparent); }
body[data-visual="03"] .hero { padding:26px 28px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(120deg,#1c3325,#14251c); }
body[data-visual="03"] .hero h1 { font-family:Georgia,serif; font-weight:500; }
body[data-visual="03"] .kpi-grid { gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
body[data-visual="03"] .kpi-card { border:0; border-right:1px solid var(--line); border-radius:0; box-shadow:none; }
body[data-visual="03"] .kpi-card:last-child { border-right:0; }
body[data-visual="03"] .tab-button.active { color:#172018; }
body[data-visual="03"] main { grid-template-areas:"hero" "resources" "workspace" "supplementary" "kpis"; }
body[data-visual="03"] .supplementary-panels { grid-template-columns:.8fr 1.2fr; }

/* 04 — Sala de controle: compacto, técnico e de alta densidade. */
body[data-visual="04"] { --bg:#050706; --surface:#0b0f0d; --surface-soft:#101612; --line:#263129; --line-soft:#18211b; --text:#e6f2e9; --muted:#6f8073; --muted-light:#a9b9ad; --orange:#72e04f; --orange-soft:rgba(114,224,79,.1); --green:#72e04f; --red:#ff5a54; --blue:#46a2ff; --radius:3px; --shadow:none; background:#050706; font-family:"Cascadia Code","Consolas",monospace; }
body[data-visual="04"] .app-shell { grid-template-columns:188px minmax(0,1fr); }
body[data-visual="04"] .sidebar { padding:12px 8px; background:#070a08; }
body[data-visual="04"] .sidebar-brand { min-height:40px; padding-bottom:10px; }
body[data-visual="04"] .brand-mark { width:30px; height:30px; border-radius:2px; box-shadow:none; }
body[data-visual="04"] .brand strong { font-size:11px; }
body[data-visual="04"] .brand small { font-size:8px; }
body[data-visual="04"] .nav-section { margin:11px 8px 4px; font-size:7px; }
body[data-visual="04"] .nav-item { min-height:31px; border-radius:2px; font-size:9px; }
body[data-visual="04"] .topbar { height:50px; background:#070a08; }
body[data-visual="04"] main { width:calc(100% - 28px); padding:18px 0 36px; }
body[data-visual="04"] .hero h1 { font-size:27px; letter-spacing:-.02em; text-transform:uppercase; }
body[data-visual="04"] .kpi-grid { margin-top:18px; gap:7px; }
body[data-visual="04"] .kpi-card { min-height:104px; padding:14px; }
body[data-visual="04"] .kpi-card strong { margin-top:10px; font-size:22px; }
body[data-visual="04"] .workspace { margin-top:14px; }
body[data-visual="04"] .farm-rows { gap:6px; padding:7px; }
body[data-visual="04"] .farm-dashboard-row, body[data-visual="04"] .farm-operation-card, body[data-visual="04"] .climate-card { border-radius:2px; }
body[data-visual="04"] main { grid-template-columns:.78fr 1.22fr; grid-template-areas:"hero kpis" "resources kpis" "workspace workspace" "supplementary supplementary"; gap:10px; }
body[data-visual="04"] .hero { align-items:flex-start; flex-direction:column; }
body[data-visual="04"] .filters { width:100%; display:grid; grid-template-columns:1fr 1fr; }
body[data-visual="04"] .filters label:first-child { grid-column:1/-1; }.filters select { max-width:100%; }
body[data-visual="04"] .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; }
body[data-visual="04"] .kpi-card:last-child { grid-column:1/-1; }
body[data-visual="04"] .resource-ribbon { grid-template-columns:repeat(2,minmax(0,1fr)); padding:6px; }
body[data-visual="04"] .resource-reference { display:none; }
body[data-visual="04"] .supplementary-panels { gap:7px; }

/* 05 — Terra editorial: quente, orgânico e humano. */
body[data-visual="05"] { --bg:#eee8dc; --surface:#fffaf0; --surface-soft:#f6eddf; --line:#d7c9b5; --line-soft:#e7dac8; --text:#392e27; --muted:#85766b; --muted-light:#65574e; --orange:#b95f3d; --orange-soft:rgba(185,95,61,.12); --green:#618b57; --red:#bd4f43; --blue:#547e9f; --radius:22px; --shadow:0 18px 45px rgba(79,56,39,.1); color-scheme:light; background:linear-gradient(130deg,#f2ecdf,#e8dfd0); }
body[data-visual="05"] .app-shell { display:block; }
body[data-visual="05"] .sidebar { height:auto; padding:11px clamp(18px,4vw,64px); display:grid; grid-template-columns:auto 1fr auto; align-items:center; border:0; border-bottom:1px solid var(--line); background:#3e3029; position:sticky; }
body[data-visual="05"] .sidebar-brand { padding:0; border:0; color:#fff8ea; }
body[data-visual="05"] .sidebar-nav { padding:0; flex-direction:row; justify-content:center; overflow:visible; }
body[data-visual="05"] .nav-section, body[data-visual="05"] .nav-item:nth-of-type(n+6), body[data-visual="05"] .sidebar-footer { display:none; }
body[data-visual="05"] .nav-item { min-height:36px; color:#cdbfb4; }
body[data-visual="05"] .nav-item.active { color:#fff; background:#5a4438; box-shadow:none; }
body[data-visual="05"] .topbar { top:59px; background:rgba(255,250,240,.88); }
body[data-visual="05"] .hero h1 { font-family:Georgia,serif; font-size:50px; font-weight:500; }
body[data-visual="05"] .kpi-card:nth-child(odd) { transform:translateY(9px); }
body[data-visual="05"] .panel { border-radius:28px; }
body[data-visual="05"] main { grid-template-areas:"hero" "workspace" "resources" "kpis"; }
body[data-visual="05"] .resource-ribbon { border:0; background:transparent; box-shadow:none; }

/* 06 — Aurora: vidro escuro com violeta e azul. */
body[data-visual="06"] { --bg:#100d19; --surface:rgba(28,24,43,.78); --surface-soft:rgba(39,32,58,.82); --line:rgba(181,158,255,.22); --line-soft:rgba(181,158,255,.12); --text:#faf7ff; --muted:#9f95b5; --muted-light:#cfc5df; --orange:#a98cff; --orange-soft:rgba(169,140,255,.14); --green:#5ee2bd; --red:#ff758f; --blue:#61b4ff; --radius:20px; --shadow:0 25px 70px rgba(4,2,12,.5); background:radial-gradient(circle at 20% 0,rgba(134,78,255,.25),transparent 28%),radial-gradient(circle at 90% 35%,rgba(37,162,255,.18),transparent 30%),#100d19; }
body[data-visual="06"] .app-shell { grid-template-columns:272px minmax(0,1fr); gap:18px; padding:18px; }
body[data-visual="06"] .sidebar { height:calc(100vh - 36px); border:1px solid var(--line); border-radius:26px; background:rgba(21,17,33,.8); backdrop-filter:blur(25px); top:18px; }
body[data-visual="06"] .topbar { height:58px; border:1px solid var(--line); border-radius:18px; background:rgba(21,17,33,.65); top:18px; margin-right:0; }
body[data-visual="06"] main { width:100%; padding:34px 0 50px; }
body[data-visual="06"] .kpi-card { background:linear-gradient(145deg,rgba(169,140,255,.12),rgba(27,23,42,.74)); backdrop-filter:blur(20px); }
body[data-visual="06"] .kpi-card:nth-child(2), body[data-visual="06"] .kpi-card:nth-child(4) { background:linear-gradient(145deg,rgba(61,170,255,.12),rgba(27,23,42,.74)); }
body[data-visual="06"] .panel { backdrop-filter:blur(24px); }
body[data-visual="06"] main { grid-template-columns:1fr .42fr; grid-template-areas:"hero hero" "resources resources" "kpis kpis" "workspace workspace" "supplementary supplementary"; }
body[data-visual="06"] .supplementary-panels { grid-template-columns:1fr 1.35fr; }
body[data-visual="06"] .insight-panel, body[data-visual="06"] .resource-ribbon { background:rgba(28,24,43,.72); backdrop-filter:blur(20px); }

/* 07 — Swiss light: plano, objetivo e tipográfico. */
body[data-visual="07"] { --bg:#f7f7f5; --surface:#ffffff; --surface-soft:#f2f2ef; --line:#cfcfca; --line-soft:#e4e4df; --text:#11110f; --muted:#74746f; --muted-light:#444440; --orange:#e63b2e; --orange-soft:rgba(230,59,46,.09); --green:#278957; --red:#e63b2e; --blue:#2467b2; --radius:0; --shadow:none; color-scheme:light; background:#f7f7f5; font-family:Arial,Helvetica,sans-serif; }
body[data-visual="07"] .app-shell { grid-template-columns:1fr; }
body[data-visual="07"] .sidebar { display:none; }
body[data-visual="07"] .topbar { height:58px; padding:0 3.5vw; border-bottom:2px solid #111; background:#fff; }
body[data-visual="07"] main { width:93%; max-width:none; }
body[data-visual="07"] .hero { padding:24px 0 30px; border-bottom:2px solid #111; }
body[data-visual="07"] .hero h1 { font-size:56px; font-weight:800; letter-spacing:-.055em; }
body[data-visual="07"] .eyebrow { color:#e63b2e; }
body[data-visual="07"] .kpi-grid { gap:0; margin-top:0; border-bottom:2px solid #111; }
body[data-visual="07"] .kpi-card { min-height:150px; border:0; border-right:1px solid #bbb; }
body[data-visual="07"] .kpi-card:last-child { border-right:0; }
body[data-visual="07"] .operation-tabs { padding-top:24px; }
body[data-visual="07"] .tab-button { border-width:0 0 2px; }
body[data-visual="07"] .tab-button.active { color:#fff; background:#111; }
body[data-visual="07"] .panel { border:2px solid #111; }
body[data-visual="07"] main { grid-template-columns:.75fr 1.25fr; grid-template-areas:"hero hero" "resources kpis" "workspace workspace"; }
body[data-visual="07"] .resource-ribbon { grid-template-columns:repeat(2,minmax(0,1fr)); align-self:stretch; border-width:2px; border-color:#111; box-shadow:none; }
body[data-visual="07"] .resource-reference { grid-column:1/-1; padding:4px 8px 10px; border-right:0; border-bottom:1px solid #bbb; }
body[data-visual="07"] .kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); border-top:2px solid #111; }

/* 08 — Industrial copper: robusto e mecânico. */
body[data-visual="08"] { --bg:#17191a; --surface:#222526; --surface-soft:#292d2e; --line:#4a4f50; --line-soft:#353a3b; --text:#f4f0e9; --muted:#969b9a; --muted-light:#c8ccca; --orange:#c9854b; --orange-soft:rgba(201,133,75,.14); --green:#71a96e; --red:#dc685c; --blue:#5d95c4; --radius:6px; --shadow:8px 8px 0 rgba(0,0,0,.2); background:repeating-linear-gradient(135deg,#17191a,#17191a 20px,#191b1c 20px,#191b1c 40px); font-family:"Arial Narrow",Arial,sans-serif; }
body[data-visual="08"] .app-shell { grid-template-columns:238px minmax(0,1fr); }
body[data-visual="08"] .sidebar { border-right:3px solid var(--orange); background:#1c1f20; }
body[data-visual="08"] .brand-mark, body[data-visual="08"] .kpi-icon { border-radius:2px; }
body[data-visual="08"] .nav-item { border:1px solid transparent; border-radius:2px; text-transform:uppercase; letter-spacing:.04em; }
body[data-visual="08"] .nav-item.active { border-color:#69513d; background:#322a24; box-shadow:none; }
body[data-visual="08"] .topbar { background:#1c1f20; }
body[data-visual="08"] .hero h1 { font-size:46px; text-transform:uppercase; }
body[data-visual="08"] .kpi-card { border-left:5px solid var(--orange); }
body[data-visual="08"] .panel-heading { border-bottom:3px solid var(--orange); }
body[data-visual="08"] .farm-dashboard-row { border-left:4px solid #626969; }
body[data-visual="08"] main { grid-template-columns:1.25fr .75fr; grid-template-areas:"hero hero" "workspace workspace" "resources kpis" "supplementary supplementary"; }
body[data-visual="08"] .resource-ribbon { grid-template-columns:1fr; border-left:5px solid var(--orange); }
body[data-visual="08"] .resource-reference { padding:4px 8px 10px; border-right:0; border-bottom:1px solid var(--line); }
body[data-visual="08"] .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
body[data-visual="08"] .kpi-card:last-child { grid-column:1/-1; }

/* 09 — Ocean navigation: azul-petróleo e navegação superior. */
body[data-visual="09"] { --bg:#eaf3f2; --surface:#ffffff; --surface-soft:#f2f8f7; --line:#c4d8d5; --line-soft:#dce8e6; --text:#133332; --muted:#6e8885; --muted-light:#3e6562; --orange:#008c83; --orange-soft:rgba(0,140,131,.1); --green:#008c63; --red:#d55752; --blue:#247ba0; --radius:14px; --shadow:0 16px 38px rgba(24,76,72,.09); color-scheme:light; background:linear-gradient(#e7f1f0,#f5f9f8); }
body[data-visual="09"] .app-shell { display:block; }
body[data-visual="09"] .sidebar { height:76px; padding:0 4vw; display:grid; grid-template-columns:270px 1fr auto; align-items:center; border:0; background:#0b4443; position:sticky; }
body[data-visual="09"] .sidebar-brand { padding:0; border:0; color:#fff; }
body[data-visual="09"] .sidebar-nav { padding:0; flex-direction:row; justify-content:flex-end; gap:4px; overflow:visible; }
body[data-visual="09"] .nav-section, body[data-visual="09"] .sidebar-footer, body[data-visual="09"] .nav-item:nth-of-type(n+7) { display:none; }
body[data-visual="09"] .nav-item { color:#a9cfcc; }
body[data-visual="09"] .nav-item.active { color:#fff; background:#17605e; box-shadow:none; }
body[data-visual="09"] .topbar { top:76px; background:rgba(255,255,255,.9); }
body[data-visual="09"] main { width:92%; max-width:1660px; }
body[data-visual="09"] .hero { padding:24px 28px; border-radius:20px; color:#eefafa; background:linear-gradient(120deg,#0b5551,#137a74); }
body[data-visual="09"] .hero .eyebrow, body[data-visual="09"] .hero p { color:#bce4df; }
body[data-visual="09"] .filters select, body[data-visual="09"] .filters input { border-color:rgba(255,255,255,.24); color:#fff; background:rgba(0,0,0,.14); }
body[data-visual="09"] .filters label { color:#d0ebe8; }
body[data-visual="09"] .kpi-card { border-bottom:4px solid var(--orange); }
body[data-visual="09"] main { grid-template-columns:1.05fr .95fr; grid-template-areas:"hero kpis" "resources kpis" "workspace workspace" "supplementary supplementary"; }
body[data-visual="09"] .hero { align-items:flex-start; flex-direction:column; }
body[data-visual="09"] .filters { width:100%; }.filters select { max-width:100%; }
body[data-visual="09"] .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
body[data-visual="09"] .kpi-card:last-child { grid-column:1/-1; }
body[data-visual="09"] .resource-ribbon { grid-template-columns:repeat(2,minmax(0,1fr)); box-shadow:none; }
body[data-visual="09"] .resource-reference { display:none; }

/* 10 — Luminous bento: contraste alto e hierarquia forte. */
body[data-visual="10"] { --bg:#08090b; --surface:#111318; --surface-soft:#171a20; --line:#30353e; --line-soft:#242831; --text:#f8fafc; --muted:#7f8794; --muted-light:#bac1ca; --orange:#ffb000; --orange-soft:rgba(255,176,0,.12); --green:#5de38d; --red:#ff6565; --blue:#319cff; --radius:24px; --shadow:0 24px 70px rgba(0,0,0,.38); background:radial-gradient(circle at 50% -20%,rgba(49,156,255,.16),transparent 35%),#08090b; }
body[data-visual="10"] .app-shell { grid-template-columns:96px minmax(0,1fr); }
body[data-visual="10"] .sidebar { align-items:center; padding:20px 12px; background:#0d0f13; }
body[data-visual="10"] .sidebar-brand { width:100%; justify-content:center; }
body[data-visual="10"] .sidebar-brand > span:last-child, body[data-visual="10"] .nav-section, body[data-visual="10"] .nav-item > span:last-child, body[data-visual="10"] .sidebar-footer { display:none; }
body[data-visual="10"] .sidebar-nav { width:100%; align-items:center; gap:10px; }
body[data-visual="10"] .nav-item { width:54px; min-height:54px; justify-content:center; padding:0; border:1px solid transparent; border-radius:18px; }
body[data-visual="10"] .nav-item.active { border-color:rgba(255,176,0,.24); background:rgba(255,176,0,.1); box-shadow:none; }
body[data-visual="10"] main { width:min(1640px,calc(100% - 54px)); }
body[data-visual="10"] .hero h1 { font-size:52px; }
body[data-visual="10"] .kpi-grid { grid-template-columns:1.25fr repeat(4,1fr); }
body[data-visual="10"] .kpi-card:first-child { background:linear-gradient(145deg,#172a43,#11151b); }
body[data-visual="10"] .kpi-card:nth-child(3), body[data-visual="10"] .kpi-card:nth-child(4) { background:linear-gradient(145deg,rgba(255,176,0,.09),#111318); }
body[data-visual="10"] .panel { border-radius:28px; }
body[data-visual="10"] .farm-rows { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
body[data-visual="10"] .farm-dashboard-row { grid-template-columns:1fr; }
body[data-visual="10"] .climate-strip { border-top:1px solid var(--line-soft); border-left:0; }
body[data-visual="10"] main { grid-template-areas:"hero" "resources" "kpis" "workspace" "supplementary"; }
body[data-visual="10"] .resource-ribbon { grid-template-columns:auto repeat(4,minmax(0,1fr)); background:#111318; }
body[data-visual="10"] .supplementary-panels { grid-template-columns:.9fr 1.1fr; }

@media (max-width:1050px) {
  body[data-visual] main { display:grid; grid-template-columns:1fr; grid-template-areas:"hero" "resources" "kpis" "workspace" "supplementary"; }
  body[data-visual] .app-shell { display:grid; grid-template-columns:1fr; padding:0; }
  body[data-visual] .sidebar { width:224px; height:100vh; padding-top:82px; display:flex; align-items:stretch; border-radius:0; position:fixed; top:0; }
  body[data-visual] .sidebar-brand { justify-content:flex-start; }
  body[data-visual] .sidebar-brand > span:last-child, body[data-visual] .nav-section, body[data-visual] .nav-item > span:last-child, body[data-visual] .sidebar-footer { display:initial; }
  body[data-visual] .sidebar-nav { width:auto; align-items:stretch; flex-direction:column; justify-content:flex-start; }
  body[data-visual] .nav-item { width:auto; justify-content:flex-start; }
  body[data-visual] .topbar { top:0; margin:0; border-radius:0; }
  body[data-visual="10"] .farm-rows { grid-template-columns:1fr; }
  body[data-visual="03"] .kpi-grid { border:0; }
  body[data-visual="03"] .kpi-card { border:1px solid var(--line); border-radius:14px; }
  body[data-visual] .resource-ribbon { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-visual] .resource-reference { grid-column:1/-1; padding:4px 8px 10px; border-right:0; border-bottom:1px solid var(--line-soft); }
}

@media (max-width:680px) {
  .visual-option-label { display:none; }
  body[data-visual="05"] .kpi-card:nth-child(odd) { transform:none; }
  body[data-visual="07"] .hero h1, body[data-visual="09"] .hero h1, body[data-visual="10"] .hero h1 { font-size:36px; }
  body[data-visual] .resource-ribbon, body[data-visual] .supplementary-panels { grid-template-columns:1fr; }
}