/* Profile → Overview (see overview.js) */
.ov-hd{ display:flex; align-items:center; gap:8px; margin:0 2px 12px; }
.ov-hd b{ font:800 12px var(--sans); letter-spacing:.16em; } .ov-hd em{ font:700 11px var(--sans); color:var(--faint); font-style:normal; }
.ov-more{ margin-left:auto; border:0; background:none; color:var(--accent); font:700 12px var(--sans); cursor:pointer; padding:6px 2px; }
.ov-lg .soc-logo{ border-radius:var(--r,10px); }
.click{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
/* podium */
.ov-pod{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ov-card{ position:relative; overflow:hidden; border-radius:16px; padding:12px; background:var(--panel); border:1px solid var(--border); display:flex; flex-direction:column; gap:10px; min-width:0; }
.ov-card .big{ position:absolute; right:12px; top:-6px; font:800 64px var(--disp); color:rgba(255,255,255,.07); pointer-events:none; }
.ov-card b{ display:block; font:800 14.5px/1.25 var(--sans); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ov-card i{ display:block; font:600 12px var(--sans); color:var(--muted); font-style:normal; margin-top:3px; }
.ov-card.one{ grid-column:span 2; flex-direction:row; align-items:center; gap:14px; padding:14px; background:linear-gradient(110deg, rgba(124,92,255,.28), rgba(124,92,255,.06) 70%), var(--panel); border-color:rgba(124,92,255,.35); }
.ov-card.one .tx{ flex:1; min-width:0; } .ov-card.one b{ font-size:16px; -webkit-line-clamp:1; }
.ov-card .bar{ height:4px; border-radius:4px; background:rgba(255,255,255,.1); margin-top:9px; overflow:hidden; }
.ov-card .bar u{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#7c5cff,#c084fc); }
.ov-card:active{ background-color:#1a1a22; }
.ov-mini{ display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid var(--border); min-width:0; }
.ov-mini .n{ width:14px; color:var(--faint); font:700 13px var(--sans); } .ov-mini b{ flex:1; min-width:0; font:700 14px var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ov-mini i{ font:600 12.5px var(--sans); color:var(--muted); font-style:normal; flex:none; }
/* recent strip */
.ov-strip{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px 2px; -webkit-overflow-scrolling:touch; }
.ov-strip::-webkit-scrollbar{ display:none; }
.ov-rc{ flex:none; width:132px; border-radius:16px; padding:12px; background:var(--panel); border:1px solid var(--border); min-width:0; }
.ov-rc b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font:700 13px/1.25 var(--sans); margin-top:10px; height:33px; }
.ov-rc i{ display:block; font:600 11.5px var(--sans); color:var(--muted); font-style:normal; margin-top:5px; }
.ov-rc.now{ border-color:rgba(56,211,155,.5); background:linear-gradient(160deg, rgba(56,211,155,.14), var(--panel)); } .ov-rc.now i{ color:var(--ok); }
/* favorites grid */
.ov-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.ov-fv{ text-align:center; min-width:0; }
.ov-fv .tile{ position:relative; aspect-ratio:1; border-radius:16px; overflow:hidden; }
.ov-fv .tile .soc-logo{ width:100% !important; height:100% !important; border-radius:16px; font-size:clamp(18px, 7vw, 28px) !important; }
.ov-fv .hb{ position:absolute; z-index:2; right:7px; bottom:7px; color:#fff; opacity:.92; display:grid; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.ov-fv b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font:700 12px/1.25 var(--sans); margin-top:7px; height:30px; }
.ov-fv.more .tile{ background:rgba(255,255,255,.06); display:grid; place-items:center; } .ov-fv.more .plus{ font:800 20px var(--disp); }
.ov-fv.more b{ color:var(--muted); }
.ov-fv:active .tile{ opacity:.85; }
/* see all sheet */
.ov-all .ov-row{ display:flex; align-items:center; gap:12px; padding:9px 2px; border-bottom:1px solid var(--border); min-width:0; }
.ov-row b{ display:block; font:700 14.5px/1.25 var(--sans); } .ov-row i{ font:500 12px var(--sans); color:var(--muted); font-style:normal; }
.ov-row > div{ min-width:0; }

/* "this one is playing for you now": a quiet green play mark (and a hairline of green) */
.ov-on{ display:none; position:absolute; z-index:3; width:18px; height:18px; border-radius:50%; background:var(--ok); color:#06150f; place-items:center; box-shadow:0 0 0 3px rgba(56,211,155,.18); }
.ov-on svg{ margin-left:1px; }
.is-on > .ov-on{ display:grid; }
.ov-card > .ov-on{ right:10px; top:10px; } .ov-card.one > .ov-on{ right:12px; top:12px; }
.ov-rc > .ov-on{ right:10px; top:10px; } .ov-rc, .ov-fv, .ov-card{ position:relative; }
.ov-fv .tile > .ov-on{ left:7px; top:7px; } .ov-fv > .tile{ position:relative; }
.ov-mini, .ov-row{ position:relative; } .ov-mini > .ov-on, .ov-row > .ov-on{ position:static; flex:none; margin-left:auto; }
.ov-mini.is-on i{ display:none; }
.ov-card.is-on, .ov-rc.is-on{ border-color:rgba(56,211,155,.5); }
.ov-fv.is-on .tile{ box-shadow:0 0 0 2px rgba(56,211,155,.55); }
.ov-mini.is-on b, .ov-row.is-on b{ color:var(--ok); }
@media (prefers-reduced-motion:no-preference){ .is-on > .ov-on{ animation:ovon 2.4s ease-in-out infinite; } @keyframes ovon{ 50%{ box-shadow:0 0 0 5px rgba(56,211,155,.06); } } }
.ov-fv.is-on .tile > .ov-on{ display:grid; }