:root{ --roi-bg: linear-gradient(180deg,#0ea5e9 0%, #38bdf8 35%, #f59e0b 100%); --roi-card:#0b1220; --roi-muted:#94a3b8; --roi-text:#e5e7eb; --roi-accent:#f59e0b; --roi-good:#22c55e; --roi-bad:#ef4444; --roi-border:rgba(148,163,184,.25); --pad:16px; --radius:18px; } .roi-container{background:var(--roi-bg); color:var(--roi-text); padding:var(--pad); max-width:1400px; margin:0 auto; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;} .roi-hero{padding:8px 0 16px} .roi-title{font-size:1.4rem;margin:.25rem 0} .roi-subtitle{color:var(--roi-text);opacity:.9;margin:0 0 .5rem} /* Tabs */ .roi-tabs{position:sticky; bottom:0; display:flex; gap:8px; padding:8px; background:rgba(2,6,23,.45); backdrop-filter:blur(8px); border-radius:999px; justify-content:space-between; z-index:10} .roi-tab{flex:1; min-height:44px; border:1px solid var(--roi-border); border-radius:999px; background:#0f172a; color:var(--roi-text); font-weight:600; cursor:pointer} .roi-tab.active{border-color:var(--roi-accent); box-shadow:0 0 0 2px rgba(245,158,11,.25) inset} /* Layout */ .roi-grid{display:grid; gap:16px} .roi-card{background:linear-gradient(180deg,#0a0f1c 0%,#0c1220 100%); border:1px solid var(--roi-border); border-radius:var(--radius); padding:16px} .roi-card-title{font-size:1.1rem; margin:.25rem 0 1rem} /* Controls */ .roi-btn{min-height:44px; padding:.6rem 1rem; border-radius:12px; border:1px solid var(--roi-border); background:#0f172a; color:var(--roi-text); cursor:pointer} .roi-btn.primary{background:var(--roi-accent); color:#1f1302; font-weight:700; border-color:transparent} .roi-btn.secondary{border-color:var(--roi-accent)} .roi-btn.ghost{background:transparent} .roi-btn[aria-busy="true"]{opacity:.6; pointer-events:none} .roi-fieldset{border:1px dashed var(--roi-border); padding:12px; border-radius:12px; margin-bottom:12px} .roi-radio{display:inline-flex; align-items:center; gap:8px; margin-right:14px} .roi-row{display:grid; gap:12px; grid-template-columns:1fr} .roi-row label{display:flex; flex-direction:column; gap:6px} .roi-row input, .roi-row select, textarea{background:#0b1220;color:var(--roi-text); border:1px solid var(--roi-border); border-radius:12px; padding:.65rem .75rem; min-height:44px} .roi-input-row{display:flex; flex-wrap:wrap; gap:6px; align-items:center} .roi-chip{min-height:36px; padding:.3rem .6rem; border-radius:999px; border:1px solid var(--roi-border); background:#0f172a; color:var(--roi-text); font-size:.9rem; cursor:pointer} .roi-mic{min-height:36px; min-width:36px; border-radius:999px; border:1px solid var(--roi-border); background:#0f172a; color:var(--roi-text); cursor:pointer} .roi-chipbar{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px} .roi-hint{color:var(--roi-muted); font-size:.9rem} .roi-adv{margin-top:10px} .roi-card-sub{margin-top:12px; padding:12px; border:1px solid var(--roi-border); border-radius:12px; background:#0a101c} .roi-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px} .roi-legal{color:var(--roi-muted); font-size:.8rem; margin-top:8px} .roi-results, .roi-analytics{display:grid; gap:10px} .roi-kv{display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; border:1px solid var(--roi-border); border-radius:14px} .roi-kv strong{font-size:1rem} .roi-kv span{color:var(--roi-muted)} .good{color:var(--roi-good)} .bad{color:var(--roi-bad)} /* Skeletons */ .skeleton > *{position:relative; overflow:hidden} .skeleton > *::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); animation:sh 1.2s infinite} @keyframes sh{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} .roi-pull-indicator{position:sticky; top:0; text-align:center; opacity:0; pointer-events:none} .roi-panel[hidden]{display:none} .roi-panel.active{display:block} /* Presentation mode */ .roi-container.fullscreen{position:fixed; inset:0; z-index:99999; overflow:auto; padding:24px} /* Tablet */ @media (min-width:768px){ .roi-grid{grid-template-columns:1fr 1fr} .roi-tabs{position:static; border-radius:16px; background:transparent} } /* Desktop */ @media (min-width:1024px){ .roi-grid{grid-template-columns:1.2fr .8fr; grid-auto-rows:minmax(100px,auto)} #roi-panel-analytics{grid-column:1 / span 2} .roi-title{font-size:1.8rem} } /* Large Desktop */ @media (min-width:1400px){ .roi-grid{grid-template-columns:1fr 1fr 1fr} #roi-panel-analytics{grid-column:auto} } /* Print */ @media print{ .roi-tabs, .roi-actions, .roi-pull-indicator{display:none!important} .roi-container{padding:0;background:#fff;color:#000} .roi-card{background:#fff;border-color:#ddd} }