/* OBPredict UI V3 — Sofascore-inspired presentation layer. No engine styles or values are changed. */
:root { --v3-navy:#101a34; --v3-blue:#0c5bd8; --v3-sky:#eaf2ff; --v3-surface:#fff; --v3-page:#f3f5f9; --v3-text:#18213a; --v3-muted:#76809a; --v3-line:#e6eaf1; --v3-green:#19a974; --v3-red:#e84659; }
body { background:var(--v3-page); color:var(--v3-text); }
.app-shell { width:min(1320px, calc(100% - 32px)); padding:0 0 42px; }
.hero { min-height:0!important; display:block; width:100vw; margin:0 0 18px calc(50% - 50vw); padding:0 max(calc((100vw - 1320px)/2),16px) 22px; border-radius:0; overflow:visible; background:linear-gradient(115deg,#101a34,#142752); box-shadow:none; }
.v3-topbar { height:64px; display:flex; align-items:center; gap:32px; border-bottom:1px solid rgba(255,255,255,.13); }
.v3-brand { display:flex; align-items:center; gap:9px; font-size:1.05rem; color:#fff; }.v3-brand span { display:grid; place-items:center; width:30px; height:30px; background:#fff; border-radius:8px; color:var(--v3-blue); font-size:.72rem; font-weight:900; }.v3-brand b { letter-spacing:-.04em; }
.v3-topbar nav { display:flex; align-self:stretch; gap:23px; }.v3-topbar nav a { display:grid; place-items:center; color:#aebbd5; font-size:.82rem; font-weight:700; text-decoration:none; border-bottom:3px solid transparent; }.v3-topbar nav a.active,.v3-topbar nav a:hover { color:#fff; border-color:#fff; }.v3-live-dot { margin-left:auto; display:flex; align-items:center; gap:7px; color:#cad4e8; font-size:.66rem; font-weight:800; letter-spacing:.08em; }.v3-live-dot i { width:7px;height:7px;border-radius:50%;background:#38d996;box-shadow:0 0 0 4px rgba(56,217,150,.12); }
.hero > .brand-lockup { margin-top:21px; }.hero .brand-lockup .mark { width:48px; height:48px; border-radius:12px; color:var(--v3-blue); }.hero h1 { font-size:2.1rem; }.hero .subcopy,.hero-stats,.desktop-market-filters { display:none!important; }.actions { position:absolute; top:76px; right:max(calc((100vw - 1320px)/2),16px); }.actions button { min-height:38px; border-radius:8px; }.actions #feedBtn { background:var(--v3-blue); border-color:var(--v3-blue); }
.feed-panel { overflow:visible; border:0; background:transparent; box-shadow:none; }.feed-heading { display:flex; flex-wrap:wrap; gap:4px 20px; padding:0 0 10px; border:0; }.feed-heading h2 { color:var(--v3-text); font-size:1.35rem; letter-spacing:-.035em; }.feed-heading .eyebrow { color:var(--v3-blue); }.feed-heading #feedStatus { margin-left:auto; color:var(--v3-muted); align-self:center; }
.v3-tabs { order:3; display:flex; width:100%; align-items:center; gap:7px; margin-top:12px; padding:5px; border:1px solid var(--v3-line); border-radius:10px; background:#fff; }.v3-tabs button { min-height:34px; padding:0 13px; border:0; border-radius:7px; background:transparent; color:var(--v3-muted); font-size:.76rem; font-weight:800; cursor:pointer; }.v3-tabs button.active { color:var(--v3-blue); background:var(--v3-sky); }.v3-count { margin-left:auto; padding-right:8px; color:var(--v3-muted); font-size:.7rem; font-weight:700; }
.v3-market-filters{order:4;display:flex;flex-wrap:wrap;align-items:center;gap:7px;width:100%;padding:11px 0 2px}.v3-market-filters>span{color:var(--v3-muted);font-size:.69rem;font-weight:850;text-transform:uppercase;letter-spacing:.07em}.v3-market-filters button{min-height:30px;padding:0 10px;border:1px solid var(--v3-line);border-radius:999px;background:#fff;color:#52617d;font-size:.69rem;font-weight:800;cursor:pointer}.v3-market-filters button.active{background:var(--v3-blue);border-color:var(--v3-blue);color:#fff}.v3-market-filters label{display:flex;align-items:center;gap:5px;margin-left:auto;color:var(--v3-muted);font-size:.68rem;font-weight:800}.v3-market-filters select{min-height:30px;border:1px solid var(--v3-line);border-radius:7px;background:#fff;color:var(--v3-text);font:inherit;font-weight:800}.v3-market-filters.is-loading{opacity:.6;pointer-events:none}
.feed-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.feed-card,.feed-card.v3-match-row { position:relative; display:grid; grid-template-columns:1fr auto; gap:10px; min-height:0; padding:16px; border:1px solid var(--v3-line); border-radius:12px; background:var(--v3-surface); box-shadow:0 2px 4px rgba(18,34,62,.025); }.feed-card:hover { transform:translateY(-2px); box-shadow:0 10px 25px rgba(18,34,62,.09); background:#fff; }.feed-card header { grid-column:1/-1; }.feed-card header>p:first-child { color:var(--v3-muted); font-size:.67rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }.feed-card h3 { color:var(--v3-text); font-size:1rem; }.feed-card p { color:var(--v3-muted); }.feed-scoreboard { position:absolute; top:15px; right:15px; margin:0; padding:0; border:0; background:transparent; }.feed-score { color:var(--v3-text); font-size:1rem; }.feed-score-status { font-size:.58rem; }.feed-pick { padding:0; border:0; background:transparent; }.feed-pick span { color:var(--v3-muted); font-size:.64rem; }.feed-pick strong { color:var(--v3-text); font-size:.79rem; }.feed-form { margin:0; gap:6px; }.feed-form-row { gap:6px; color:var(--v3-muted); font-size:.68rem; }.form-pill { width:19px;height:19px;font-size:.6rem; }.feed-markets { grid-column:1/-1; display:flex; gap:5px; flex-wrap:wrap; }.feed-markets span { padding:4px 6px; border:0; border-radius:5px; background:#f3f6fb; color:#52617d; font-size:.61rem; }.feed-card button { grid-column:2; grid-row:2; align-self:center; min-width:76px; min-height:32px; padding:0 8px; border:0; border-radius:7px; background:var(--v3-sky); color:var(--v3-blue); font-size:.67rem; }.feed-card button:hover { background:var(--v3-blue); color:#fff; }
.match-analysis-view { border:0; border-radius:12px; background:#fff; box-shadow:0 4px 18px rgba(18,34,62,.06); }.analysis-view-heading { border-color:var(--v3-line); }.back-to-feed { background:var(--v3-blue); }.analysis-summary { background:#f8faff; border-color:var(--v3-line); }.analysis-summary > div,.detail-market { border-color:var(--v3-line); box-shadow:none; }.detail-section h3,.analysis-view-heading h2,.history-tables h4 { color:var(--v3-text); }.table-wrap { border-color:var(--v3-line); }.table-wrap th { background:#f8faff; color:var(--v3-muted); }.table-wrap th,.table-wrap td { border-color:var(--v3-line); color:var(--v3-text); }.detail-market b { color:var(--v3-blue); }
@media (max-width:780px){.app-shell{width:100%;}.hero{width:auto;margin:0 0 12px;padding:0 16px 16px;border-radius:0 0 14px 14px;}.v3-topbar{height:56px;gap:15px;}.v3-topbar nav{display:none;}.v3-live-dot{font-size:.57rem;}.hero>.brand-lockup{margin-top:16px;}.hero h1{font-size:1.75rem;}.actions{top:66px;right:16px;}.actions #sampleBtn{display:none;}.feed-heading{padding:0 16px 8px;}.feed-heading h2{font-size:1.08rem;}.feed-heading #feedStatus{display:none;}.v3-tabs{margin-top:8px;}.v3-market-filters{gap:6px}.v3-market-filters>span{width:100%}.v3-market-filters label{margin-left:0}.feed-grid{grid-template-columns:1fr;gap:8px;}.feed-card,.feed-card.v3-match-row{border-radius:0;border-left:0;border-right:0;padding:14px 16px;}.match-analysis-view{border-radius:0;}.analysis-view-heading,.detail-section{padding-left:16px;padding-right:16px;}}
.feed-card .v3-table-toggle{position:absolute;right:14px;bottom:13px;min-width:52px;background:transparent;color:var(--v3-muted);border:1px solid var(--v3-line)}.feed-card .v3-table-toggle:hover{color:var(--v3-blue);background:var(--v3-sky);border-color:var(--v3-sky)}.v3-standings{grid-column:1/-1;margin-top:2px;border-top:1px solid var(--v3-line);padding-top:12px}.v3-standings-title{display:flex;justify-content:space-between;margin-bottom:7px;color:var(--v3-text);font-size:.73rem;font-weight:850}.v3-standings-title span,.v3-standings small{color:var(--v3-muted);font-size:.65rem;font-weight:700}.v3-standings table{width:100%;border-collapse:collapse;font-size:.69rem}.v3-standings th,.v3-standings td{padding:6px 4px;border-bottom:1px solid #f0f2f6;text-align:right}.v3-standings th{color:var(--v3-muted);font-size:.6rem}.v3-standings th:nth-child(2),.v3-standings td:nth-child(2){text-align:left}.v3-standings td:first-child{color:var(--v3-muted)}.v3-standings p{color:var(--v3-muted);font-size:.72rem}