/* v24 OBS finish. Geometry and data/animation logic remain in the existing components. */
.theme-overlay{--ui-accent:#ff002b;--ui-accent-2:#ff4d5f;--ui-panel:#151515;--ui-line:rgba(255,255,255,.14)}
/* Counter overlay: contained layers and framed icons. */
.overlay-counter .overlay-card{background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 52%),rgba(21,21,21,.96);border-color:var(--ui-line);box-shadow:inset 0 1px rgba(255,255,255,.06),0 12px 26px rgba(0,0,0,.2)}
.overlay-counter .overlay-card:before{inset:8px;border-radius:20px;border:1px solid rgba(255,255,255,.045);box-shadow:none}
.overlay-counter .overlay-card:after{left:24px;right:24px;top:0;bottom:auto;width:auto;height:1px;border-radius:0;background:linear-gradient(90deg,transparent,rgba(255,0,43,.5),transparent);filter:none;opacity:1}
.overlay-counter .overlay-big-icon.eye,.overlay-counter .overlay-big-icon.like{background:linear-gradient(145deg,rgba(255,0,43,.14),rgba(255,0,43,.035));border-color:rgba(255,0,43,.25);box-shadow:inset 0 1px rgba(255,255,255,.06)}
.overlay-counter .overlay-title{color:#efefef}.overlay-counter .overlay-card small{color:#9c9c9c}.overlay-counter .overlay-card strong{text-shadow:none}
/* Chat overlay: header and message well follow the same surface stack. */
.overlay-chat .chat-header{background:linear-gradient(130deg,rgba(255,255,255,.04),transparent),rgba(27,27,27,.97);border-color:var(--ui-line);box-shadow:inset 0 1px rgba(255,255,255,.06);color:#efefef}
.overlay-chat .messages-wrap{background:linear-gradient(135deg,rgba(255,255,255,.025),transparent 52%),rgba(21,21,21,.94);border-color:var(--ui-line);box-shadow:0 12px 26px rgba(0,0,0,.2),inset 0 0 0 7px rgba(255,255,255,.008)}
.overlay-chat .chat-avatar{background:linear-gradient(145deg,#ff002b30,#2a2a2a);box-shadow:inset 0 1px #ffffff10}.overlay-chat .chat-content p{text-shadow:none}.overlay-chat .live-dot{background:#ff002b;box-shadow:none}
/* Social overlay: original brand icons and dimensions remain intact. */
.overlay-social .social-item{background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 52%),rgba(21,21,21,.96);border-color:var(--ui-line);box-shadow:inset 0 1px rgba(255,255,255,.06),0 12px 26px rgba(0,0,0,.2)}
.overlay-social .social-item:before{inset:6px;border:1px solid rgba(255,255,255,.045);background:none;opacity:1}
.overlay-social .social-item:after{left:20px;right:20px;top:0;bottom:auto;width:auto;height:1px;border-radius:0;filter:none;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5}
.overlay-social .social-item.minimal{background:rgba(21,21,21,.88);box-shadow:inset 0 1px rgba(255,255,255,.025),0 8px 20px rgba(0,0,0,.16)}
.overlay-social .social-icon{box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.1)}
.overlay-social .social-handle{text-shadow:none}.overlay-social .social-name{color:#aaaaaa}
.overlay-social.preview-mode{background:#0d0d0d!important}
/* Goal paint only: no size, padding, font, display, transform or placement changes. */
.overlay-goal .goal{background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 52%),rgba(var(--bg),var(--op));border-color:rgba(255,255,255,.15);box-shadow:inset 0 1px rgba(255,255,255,.05),0 12px 26px rgba(0,0,0,.2),0 0 calc(18px * var(--glow)) color-mix(in srgb,var(--accent) 16%,transparent)}
.overlay-goal .goal:before{inset:8px;width:auto;height:auto;background:none;border:1px solid rgba(255,255,255,.045);border-radius:max(0px,calc(var(--radius) - 8px));transform:none;animation:none;pointer-events:none}
.overlay-goal .goal.ring{background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.045),transparent 60%),rgba(var(--bg),var(--op))}
.overlay-goal .goal.ring:before{border-radius:50%}
.overlay-goal .goal.capsule:before{border-radius:999px}
.overlay-goal .goal.minimal{background:transparent;border-color:transparent;box-shadow:none}
.overlay-goal .goal.minimal:before{display:none}
.overlay-goal .goal.glass-card{background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.015)),rgba(var(--bg),var(--op));border-color:rgba(255,255,255,.16)}
.overlay-goal .goal-copy span,.overlay-goal .vertical-copy span,.overlay-goal .ring-center small{color:color-mix(in srgb,var(--text) 75%,transparent)}
.overlay-goal .goal-copy b{border-color:color-mix(in srgb,var(--accent2) 25%,transparent);background:color-mix(in srgb,var(--accent2) 8%,transparent);border-radius:6px}
.overlay-goal .bar-track{box-shadow:inset 0 2px 5px rgba(0,0,0,.2),inset 0 0 0 1px rgba(255,255,255,.035)}
.overlay-goal .bar-track i,.overlay-goal .vertical-meter i,.overlay-goal .milestone-line>i{box-shadow:inset 0 1px rgba(255,255,255,.16)}
.overlay-goal .bar-track i:after{opacity:.22}
.overlay-goal .ring-wrap svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.overlay-goal .segments i{border-color:rgba(255,255,255,.065)}
.overlay-goal .segments i.filled{box-shadow:inset 0 1px rgba(255,255,255,.15),0 3px 7px rgba(0,0,0,.12)}
.overlay-goal .vertical-meter{border-color:rgba(255,255,255,.11);box-shadow:inset 0 3px 9px rgba(0,0,0,.2)}
.overlay-goal .vertical-glow{opacity:.2}
.overlay-goal .vertical-copy small{border-top-color:rgba(255,255,255,.14);color:color-mix(in srgb,var(--text) 65%,transparent)}
.overlay-goal .milestone-dot{box-shadow:inset 0 1px rgba(255,255,255,.12)}
.overlay-goal .milestone-labels{color:color-mix(in srgb,var(--text) 55%,transparent)}
/* Retain the slow 5.2s opacity completion effect, confined to the goal. */
.overlay-goal .goal.complete{box-shadow:inset 0 1px rgba(255,255,255,.05),0 12px 26px rgba(0,0,0,.2),0 0 20px color-mix(in srgb,var(--accent2) 12%,transparent)!important}
.overlay-goal .goal.complete .celebrate{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 65%);box-shadow:inset 0 0 18px color-mix(in srgb,var(--accent2) 20%,transparent);animation:goalCompleteGlowOpacity 5.2s cubic-bezier(.45,0,.2,1) infinite!important}
@keyframes cardGlowPink{0%,100%{box-shadow:inset 0 1px #ffffff0f,0 12px 26px #00000033}30%{box-shadow:inset 0 1px #ffffff12,0 12px 26px #00000033,0 0 18px #ff002b25}}
@keyframes cardGlowBlue{0%,100%{box-shadow:inset 0 1px #ffffff0f,0 12px 26px #00000033}30%{box-shadow:inset 0 1px #ffffff12,0 12px 26px #00000033,0 0 18px #ff4d5f25}}
.overlay-goal .goal:before{opacity:1}
.overlay-goal .stage{--accent:#ff002b;--accent2:#ff4d5f;--bg:21,21,21}
.overlay-goal .stage.preview-mode{background:#0c0c0c}

/* V26 dimensional glass finish: paint only; all goal formats remain intact. */
.overlay-counter .overlay-card,.overlay-social .social-item{background:linear-gradient(140deg,rgba(255,255,255,.075),transparent 55%),rgba(30,30,30,.95);border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px rgba(255,255,255,.12),inset 0 -1px rgba(0,0,0,.25),0 12px 26px rgba(0,0,0,.24)}
.overlay-chat .chat-header{background:linear-gradient(140deg,rgba(255,255,255,.07),transparent),rgba(36,36,36,.96)}
.overlay-chat .messages-wrap{background:linear-gradient(140deg,rgba(255,255,255,.04),transparent),rgba(30,30,30,.94)}
.overlay-social.preview-mode{background:#0c0c0c!important}
.overlay-goal .goal{background:linear-gradient(135deg,rgba(255,255,255,.085),transparent 52%),rgba(var(--bg),var(--op));border-color:rgba(255,255,255,.19);box-shadow:inset 0 1px rgba(255,255,255,.12),inset 0 -1px rgba(0,0,0,.15),0 12px 26px rgba(0,0,0,.24)}
.overlay-goal .goal.minimal{background:transparent;border-color:transparent;box-shadow:none}
.overlay-goal .goal.ring{background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.08),transparent 65%),rgba(var(--bg),var(--op))}
.overlay-goal .goal.glass-card{background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.015)),rgba(var(--bg),var(--op))}
.overlay-goal .stage.preview-mode{background:#0c0c0c}

/* V27: vivid red and neutral black/gray/white; no goal layout changes. */
.overlay-counter .overlay-title,.overlay-chat .chat-header{color:#eee}
.overlay-counter .overlay-card small,.overlay-social .social-name{color:#a9a9a9}
.overlay-counter .overlay-big-icon.eye,.overlay-counter .overlay-big-icon.like{background:linear-gradient(140deg,#ff002b24,#ff002b0b);border-color:#ff002b4a;color:#ff3c5c}
.overlay-chat .chat-header{background:linear-gradient(140deg,#ffffff05,transparent),#1a1a1af5}
.overlay-chat .messages-wrap{background:linear-gradient(140deg,#ffffff04,transparent),#121212f2}
.overlay-social .social-item,.overlay-counter .overlay-card{background:linear-gradient(140deg,#ffffff07,transparent),#141414f5;border-color:#ffffff26}
.overlay-social.preview-mode,.overlay-goal .stage.preview-mode{background:#090909!important}