/* CG Studio Dashboard V2 - User Overview Styles */
.uov2-root{display:flex;flex-direction:column;gap:24px;padding-bottom:40px;animation:viewFadeIn .5s ease}
.uov2-banner{position:relative;border-radius:16px;padding:24px 32px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 15px 40px -10px rgba(0,0,0,0.5);background:linear-gradient(135deg, rgba(20, 16, 30, 0.98), rgba(12, 10, 18, 1));border:1px solid rgba(255, 255, 255, 0.04);}
.uov2-banner::before{content:'';position:absolute;top:-40%;left:-10%;width:50%;height:140%;background:radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 60%);pointer-events:none;}
.uov2-banner::after{content:'';position:absolute;top:-20%;right:-5%;width:40%;height:140%;background:radial-gradient(circle, rgba(249, 115, 22, 0.08) 0%, transparent 60%);pointer-events:none;}
.uov2-banner.morning{background:linear-gradient(135deg, rgba(25, 20, 25, 0.98), rgba(12, 10, 18, 1));}
.uov2-banner.day{background:linear-gradient(135deg, rgba(15, 20, 30, 0.98), rgba(12, 10, 18, 1));}

.uov2-banner-upper{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;position:relative;z-index:2;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,0.04);margin-bottom:20px;}
.uov2-banner-left{display:flex;flex-direction:column;}
.uov2-banner-eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:2px;font-weight:800;color:rgba(255,255,255,0.4);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.uov2-banner-eyebrow span{color:var(--accent-amber, #fbbf24);font-size:13px;}
.uov2-banner-greeting{font-family:var(--font-display,'Outfit',sans-serif);font-size:28px;font-weight:900;color:#fff;margin-bottom:4px;letter-spacing:-0.5px;}
.uov2-banner-greeting .colorful-name{background:linear-gradient(135deg, #38bdf8, #818cf8, #c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.uov2-banner-subtitle{color:rgba(255,255,255,0.5);font-size:13px;margin-bottom:2px;line-height:1.5;}
.uov2-banner-message{color:rgba(255,255,255,0.45);font-size:13px;line-height:1.5;}

.uov2-banner-right{display:flex;align-items:flex-start;gap:12px;position:relative;z-index:2;}
.uov2-banner-btn{display:flex;align-items:center;gap:8px;height:38px;padding:0 18px;border-radius:8px;font-size:13px;font-weight:800;cursor:pointer;border:none;transition:all .2s cubic-bezier(0.16, 1, 0.3, 1);}
.uov2-banner-btn.primary{background:linear-gradient(135deg, #ff8a65, #ff5252);color:#000;box-shadow:0 0 20px rgba(255,107,129,0.3);}
.uov2-banner-btn.primary:hover{transform:translateY(-1px);box-shadow:0 0 25px rgba(255,107,129,0.45);}
.uov2-banner-btn.ghost{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);color:#fff;}
.uov2-banner-btn.ghost:hover{background:rgba(255,255,255,0.08);transform:translateY(-1px);}

.uov2-banner-stats-inline{display:flex;width:100%;position:relative;z-index:2;flex-wrap:wrap;}
.uov2-stat-col{display:flex;flex-direction:column;gap:4px;position:relative;flex:1;min-width:140px;}
.uov2-stat-col:not(:last-child)::after{content:'';position:absolute;right:10%;top:4px;bottom:4px;width:1px;background:rgba(255,255,255,0.06);}
.uov2-stat-col .stat-label{font-size:9px;text-transform:uppercase;letter-spacing:1px;font-weight:800;color:rgba(255,255,255,0.4);}
.uov2-stat-col .stat-val{font-family:var(--font-display,'Outfit',sans-serif);font-size:15px;font-weight:800;color:rgba(255,255,255,0.95);}
.uov2-stat-col .stat-val.emerald{color:var(--accent-emerald, #34d399);}
.uov2-demo-toggle{display:flex;align-items:center;gap:12px;background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.05);border-radius:14px;padding:10px 14px;width:fit-content}
.uov2-demo-toggle .demo-label{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.55);display:flex;align-items:center;gap:6px}
.uov2-demo-toggle .demo-buttons{display:flex;gap:6px}
.uov2-demo-toggle button{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:6px 10px;border-radius:999px;cursor:pointer;transition:all .2s ease}
.uov2-demo-toggle button.active{background:linear-gradient(120deg,#f97316,#fb7185);border:none;box-shadow:0 8px 20px rgba(249,115,22,0.35)}
.uov2-alert-wrapper{position:relative;display:flex;flex-direction:column;gap:16px;margin-top:16px}
.uov2-alert-stage{width:100%;border-radius:24px;padding:20px 28px;background:rgba(13,17,28,0.7);border:1px solid rgba(255,255,255,0.06);box-shadow:0 15px 35px -10px rgba(0,0,0,0.6);display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:24px;transition:transform 0.2s ease, box-shadow 0.2s ease}
.uov2-alert-stage:hover{transform:translateY(-2px);box-shadow:0 20px 40px -10px rgba(0,0,0,0.7)}
.uov2-alert-stage.warning{background:linear-gradient(135deg,rgba(245,158,11,0.1),rgba(13,17,28,0.9));border-color:rgba(251,191,36,0.3)}
.uov2-alert-stage.critical{background:linear-gradient(135deg,rgba(239,68,68,0.1),rgba(13,17,28,0.9));border-color:rgba(248,113,113,0.3)}
.uov2-alert-stage.stable{background:linear-gradient(135deg,rgba(6,78,59,0.55),rgba(6,95,70,0.85));border-color:rgba(52,211,153,0.4)}
.uov2-alert-top{display:flex;align-items:center;gap:20px;flex:1}
.uov2-alert-emblem{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff}
.uov2-alert-stage.warning .uov2-alert-emblem{color:#f59e0b;background:rgba(251,191,36,0.15);box-shadow:0 0 15px rgba(251,191,36,0.2)}
.uov2-alert-stage.critical .uov2-alert-emblem{color:#ef4444;background:rgba(239,68,68,0.15);box-shadow:0 0 15px rgba(239,68,68,0.2)}
.uov2-alert-titlebox{display:flex;flex-direction:column;gap:4px}
.uov2-alert-eyebrow{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.5)}
.uov2-alert-stage.warning .uov2-alert-eyebrow{color:#fcd34d}
.uov2-alert-stage.critical .uov2-alert-eyebrow{color:#fecaca}
.uov2-alert-titlebox h3{font-family:var(--font-display,'Outfit',sans-serif);font-size:20px;font-weight:800;color:#fff;margin:0}
.uov2-alert-meta-line{color:rgba(255,255,255,0.7);font-size:13px;line-height:1.4;margin:0}
.uov2-countdown-grid{display:flex;align-items:center;gap:4px;padding:10px 14px;border-radius:16px;background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.12)}
.uov2-alert-stage.warning .uov2-countdown-grid{border-color:rgba(251,191,36,0.3)}
.uov2-alert-stage.critical .uov2-countdown-grid{border-color:rgba(248,113,113,0.3)}
.countdown-block{display:flex;flex-direction:column;align-items:center;min-width:44px}
.countdown-block .cd-num{font-family:var(--font-display,'Outfit',sans-serif);font-size:20px;font-weight:900;color:#fff;line-height:1}
.uov2-alert-stage.warning .countdown-block .cd-num{color:#fde68a}
.uov2-alert-stage.critical .countdown-block .cd-num{color:#fecaca}
.countdown-block .cd-label{font-size:9px;letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-top:4px}
.countdown-sep{font-size:16px;font-weight:800;color:rgba(255,255,255,0.3);margin-bottom:12px}
.uov2-alert-bottom{display:flex;align-items:center;gap:16px;flex-shrink:0}
.uov2-alert-actions{display:flex;gap:12px;flex-wrap:wrap}
.uov2-alert-cta{height:42px;padding:0 24px;border-radius:12px;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;transition:transform 0.2s ease,box-shadow 0.2s ease;background:linear-gradient(135deg,#f97316,#fb7185);color:#fff;box-shadow:0 10px 20px rgba(249,115,22,0.3)}
.uov2-alert-stage.critical .uov2-alert-cta{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 10px 20px rgba(239,68,68,0.3)}
.uov2-alert-stage.warning .uov2-alert-cta{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 10px 20px rgba(245,158,11,0.3)}
.uov2-alert-cta:hover{transform:translateY(-2px);box-shadow:0 14px 25px rgba(0,0,0,0.4)}
.uov2-alert-secondary{height:42px;padding:0 20px;border-radius:12px;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);color:#fff;cursor:pointer;transition:background 0.2s,transform 0.2s}
.uov2-alert-secondary:hover{background:rgba(255,255,255,0.1);transform:translateY(-2px)}
@media(max-width:800px){.uov2-alert-stage{flex-direction:column;align-items:flex-start}.uov2-alert-bottom{width:100%}.uov2-alert-actions{width:100%}.uov2-alert-cta,.uov2-alert-secondary{flex:1}}
.uov2-section-hdr{display:flex;justify-content:space-between;align-items:center}
.uov2-section-left{display:flex;align-items:center;gap:12px}
.uov2-dot-pulse{width:10px;height:10px;border-radius:50%;background:var(--accent-purple);box-shadow:0 0 14px var(--accent-purple);animation:uov2pulse 2s infinite}
@keyframes uov2pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.25)}}
.uov2-section-title{font-family:var(--font-display,'Outfit',sans-serif);font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.55)}
.uov2-count-badge{font-size:11px;font-weight:700;padding:4px 12px;border-radius:999px;background:rgba(155,109,255,0.1);border:1px solid rgba(155,109,255,0.2);color:var(--accent-purple)}
.uov2-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));gap:20px}
.uov2-card{background:var(--bg-card,rgba(13,17,28,0.5));border:1px solid var(--border-glass,rgba(255,255,255,0.06));border-radius:24px;overflow:hidden;transition:all .3s ease;box-shadow:0 20px 50px -10px rgba(0,0,0,0.5)}
.uov2-card:hover{transform:translateY(-5px);border-color:rgba(155,109,255,0.3);box-shadow:0 28px 60px -10px rgba(0,0,0,0.6)}
.uov2-card-stripe{height:3px}
.stripe-on{background:linear-gradient(90deg,var(--accent-emerald),#34d399,transparent)}
.stripe-off{background:linear-gradient(90deg,var(--accent-rose),#f87171,transparent)}
.uov2-card-header{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 24px 16px}
.uov2-card-identity{display:flex;align-items:center;gap:16px;flex:1;min-width:0}
.uov2-avatar-wrap{position:relative;flex-shrink:0}
.uov2-avatar{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display,'Outfit',sans-serif);font-size:20px;font-weight:900;color:#fff;box-shadow:0 8px 20px rgba(155,109,255,0.3)}
.uov2-status-ring{position:absolute;bottom:-3px;right:-3px;width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(10,12,25,0.95)}
.uov2-status-ring.on{background:var(--accent-emerald);box-shadow:0 0 10px rgba(16,185,129,0.6)}
.uov2-status-ring.off{background:var(--accent-rose);box-shadow:0 0 10px rgba(244,63,94,0.5)}
.uov2-bot-name{font-family:var(--font-display,'Outfit',sans-serif);font-size:17px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uov2-id-row{display:flex;align-items:center;gap:7px;margin-top:6px;flex-wrap:wrap}
.uov2-id-tag{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:rgba(155,109,255,0.85);background:rgba(155,109,255,0.1);border:1px solid rgba(155,109,255,0.2);padding:2px 7px;border-radius:4px;flex-shrink:0}
.uov2-id-val{font-family:monospace;font-size:12.5px;color:rgba(255,255,255,0.55);cursor:pointer;transition:color .2s}
.uov2-id-val:hover{color:var(--accent-cyan)}
.uov2-id-copy{font-size:11px;cursor:pointer;color:rgba(255,255,255,0.2);transition:all .2s;padding:2px 4px;border-radius:4px}
.uov2-id-copy:hover{color:var(--accent-cyan);background:rgba(34,211,238,0.1)}
.uov2-badges{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
.uov2-plan-badge{font-size:10px;font-weight:900;letter-spacing:1px;text-transform:uppercase;padding:5px 13px;border-radius:999px}
.uov2-plan-badge.premium{background:linear-gradient(135deg,rgba(251,191,36,0.2),rgba(245,158,11,0.07));border:1px solid rgba(251,191,36,0.45);color:#fbbf24}
.uov2-plan-badge.pro{background:linear-gradient(135deg,rgba(155,109,255,0.2),rgba(124,58,237,0.07));border:1px solid rgba(155,109,255,0.4);color:var(--accent-purple)}
.uov2-plan-badge.basic{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);color:var(--text-muted)}
.uov2-status-badge{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;padding:4px 12px;border-radius:999px;display:flex;align-items:center;gap:6px}
.uov2-status-badge.on{background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);color:var(--accent-emerald)}
.uov2-status-badge.off{background:rgba(244,63,94,0.08);border:1px solid rgba(244,63,94,0.25);color:var(--accent-rose)}
.uov2-server-section{margin:0 24px 16px;padding:14px 18px;background:rgba(34,211,238,0.04);border:1px solid rgba(34,211,238,0.14);border-radius:16px;display:flex;align-items:center;gap:14px}
.uov2-server-icon{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,rgba(34,211,238,0.2),rgba(34,211,238,0.05));border:1px solid rgba(34,211,238,0.2);display:flex;align-items:center;justify-content:center;color:var(--accent-cyan);font-size:17px;flex-shrink:0}
.uov2-server-info{flex:1;min-width:0}
.uov2-server-name{font-weight:700;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uov2-server-id-row{display:flex;align-items:center;gap:6px;margin-top:4px}
.uov2-server-id-tag{font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:rgba(34,211,238,0.8);background:rgba(34,211,238,0.07);border:1px solid rgba(34,211,238,0.18);padding:2px 7px;border-radius:4px}
.uov2-server-id-val{font-family:monospace;font-size:11.5px;color:rgba(255,255,255,0.45)}
.uov2-server-members{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;gap:2px}
.uov2-server-members-count{font-family:var(--font-display,'Outfit',sans-serif);font-size:16px;font-weight:800;color:var(--accent-cyan)}
.uov2-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,0.02);border-top:1px solid rgba(255,255,255,0.05);border-bottom:1px solid rgba(255,255,255,0.05)}
.uov2-stat-cell{padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:3px;border-right:1px solid rgba(255,255,255,0.04);transition:background .2s}
.uov2-stat-cell:last-child{border-right:none}
.uov2-stat-cell:hover{background:rgba(155,109,255,0.04)}
.uov2-cell-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text-muted)}
.uov2-cell-val{font-family:var(--font-display,'Outfit',sans-serif);font-size:17px;font-weight:800;color:#fff}
.uov2-cell-val.emerald{color:var(--accent-emerald)}
.uov2-cell-val.rose{color:var(--accent-rose)}
.uov2-cell-val.cyan{color:var(--accent-cyan)}
.uov2-cell-val.amber{color:var(--accent-amber)}
.uov2-cell-val.purple{color:var(--accent-purple)}
.uov2-expiry-row{display:flex;align-items:center;justify-content:space-between;padding:12px 24px 8px;gap:12px}
.uov2-expiry-pill{font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:999px;background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.22);color:var(--accent-amber)}
.uov2-expiry-pill.danger{background:rgba(244,63,94,0.08);border-color:rgba(244,63,94,0.25);color:var(--accent-rose)}
.uov2-bar-wrap{padding:0 24px 10px}
.uov2-bar-bg{height:3px;background:rgba(255,255,255,0.05);border-radius:999px;overflow:hidden}
.uov2-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent-emerald),#34d399);transition:width 1.2s ease}
.uov2-bar-fill.danger{background:linear-gradient(90deg,var(--accent-rose),#f87171)}
.uov2-actions{display:flex;gap:8px;padding:14px 24px 20px}
.uov2-btn{flex:1;height:40px;border-radius:12px;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;border:none;transition:all .2s;font-family:inherit}
.uov2-btn:hover{transform:translateY(-2px)}
.uov2-btn.stop{background:rgba(244,63,94,0.1);border:1px solid rgba(244,63,94,0.2);color:var(--accent-rose)}
.uov2-btn.start{background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.2);color:var(--accent-emerald)}
.uov2-btn.restart{background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.2);color:var(--accent-amber)}
.uov2-btn.manage{background:rgba(155,109,255,0.1);border:1px solid rgba(155,109,255,0.2);color:var(--accent-purple)}
.uov2-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;padding:70px 40px;background:var(--bg-card,rgba(13,17,28,0.5));border:1px dashed rgba(155,109,255,0.22);border-radius:24px;text-align:center;gap:16px}
@media(max-width:1100px){.uov2-cards-grid{grid-template-columns:1fr}}

/* Suspended (Locked) Bot card styling */
.stripe-suspended{background:linear-gradient(90deg,var(--accent-rose),#ef4444,transparent)}
.uov2-status-ring.suspended{background:#ef4444;box-shadow:0 0 10px rgba(239,68,68,0.6);display:flex;align-items:center;justify-content:center}
.uov2-status-ring.suspended::after{content:'\f023';font-family:'Font Awesome 6 Free';font-weight:900;font-size:7px;color:#fff}
.uov2-status-badge.suspended{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.25);color:#ef4444}

/* Expired (Abgelaufen) Bot card styling */
.stripe-expired{background:linear-gradient(90deg,#fbbf24,#f59e0b,transparent)}
.uov2-status-ring.expired{background:#fbbf24;box-shadow:0 0 12px rgba(251,191,36,0.5);display:flex;align-items:center;justify-content:center}
.uov2-status-ring.expired::after{content:'\f252';font-family:'Font Awesome 6 Free';font-weight:900;font-size:8px;color:#000}
.uov2-status-badge.expired{background:rgba(251,191,36,0.1);border:1px solid rgba(251,191,36,0.3);color:#fbbf24}

.uov2-card.expired .uov2-server-section,
.uov2-card.expired .uov2-stats-grid {
    filter: blur(1.5px) grayscale(0.5);
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

.uov2-card.expired .uov2-stats-grid {
    border-color: rgba(251, 191, 36, 0.1);
}

.uov2-btn.renew {
    background: linear-gradient(135deg,#fbbf24,#f59e0b);
    color:#000;
    font-weight:800;
    box-shadow:0 8px 20px rgba(245,158,11,0.2);
}
.uov2-btn.renew:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(245,158,11,0.35);
}

.uov2-btn.manage.disabled {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.2) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.uov2-card.expired {
    border-color: rgba(251, 191, 36, 0.15) !important;
}
.uov2-card.expired:hover {
    border-color: rgba(251, 191, 36, 0.3) !important;
    box-shadow: 0 25px 60px -10px rgba(251, 191, 36, 0.1);
}

/* Expired Inner Banner */
.uov2-expired-banner {
    margin: 16px 24px 0;
    padding: 14px 18px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px dashed rgba(239, 68, 68, 0.3);
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
}
.uov2-expired-banner:hover {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.5);
    transform: translateY(-1px);
}
.uov2-expired-banner i {
    font-size: 20px;
    color: #ef4444;
    animation: pulse-lock 1.5s infinite ease-in-out;
}
@keyframes pulse-lock {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 1; }
}
.expired-banner-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}
.expired-banner-text strong {
    font-size: 13px;
    font-weight: 800;
    color: #f87171;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.expired-banner-text span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.45;
}
.expired-banner-text span strong {
    color: #fbbf24;
    text-decoration: underline;
}

/* Modern Back Button for Bot Detail Pages */
.modern-back-btn {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px 6px 6px;
    margin-bottom: 24px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(10px);
}
.modern-back-btn .icon-wrap {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #a78bfa;
}
.modern-back-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: rgba(168, 85, 247, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 15px rgba(168, 85, 247, 0.1);
    transform: translateX(-4px);
}
.modern-back-btn:hover .icon-wrap {
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    transform: scale(1.05);
}

/* Ultra-Modern Onboarding UI */
.uov2-onboarding {
    grid-column: 1 / -1;
    position: relative;
    padding: 60px 40px;
    background: linear-gradient(145deg, rgba(16, 16, 26, 0.7), rgba(9, 9, 14, 0.9));
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.8), inset 0 2px 20px rgba(139, 92, 246, 0.05);
    animation: fadeUpOnboard 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fadeUpOnboard {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.onboarding-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(50px);
    z-index: 0;
    pointer-events: none;
    animation: floatGlow 15s infinite alternate ease-in-out;
}
.onboarding-glow.uov2-blob-1 { top: -100px; left: -100px; }
.onboarding-glow.uov2-blob-2 { bottom: -100px; right: -100px; background: radial-gradient(circle, rgba(34, 211, 238, 0.15) 0%, transparent 70%); animation-delay: -5s; }
@keyframes floatGlow {
    0% { transform: translate(0, 0); }
    100% { transform: translate(40px, 40px); }
}

.onboarding-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 800px;
    text-align: center;
}

.onboarding-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(34, 211, 238, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
    margin-bottom: 24px;
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.2);
    animation: iconPulse 3s infinite alternate ease-in-out;
}
@keyframes iconPulse {
    0% { transform: translateY(0); box-shadow: 0 0 30px rgba(139, 92, 246, 0.2); }
    100% { transform: translateY(-10px); box-shadow: 0 10px 40px rgba(34, 211, 238, 0.3); }
}

.onboarding-title {
    font-family: var(--font-display, 'Outfit', sans-serif);
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}
.onboarding-subtitle {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 500px;
}

.onboarding-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    margin-bottom: 40px;
}

.step-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 24px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(10px);
}
.step-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px -10px rgba(139, 92, 246, 0.2);
}

.step-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}
.step-card:hover .step-icon {
    background: rgba(34, 211, 238, 0.2);
    color: #22d3ee;
    transform: scale(1.1);
}

.step-text h4 {
    font-family: var(--font-display, 'Outfit', sans-serif);
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}
.step-text p {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}

.step-link {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.3s ease;
}
.step-link:hover {
    background: rgba(139, 92, 246, 0.2);
    color: #fff;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.onboarding-cta-btn {
    height: 52px;
    padding: 0 32px;
    border-radius: 16px;
    background: linear-gradient(135deg, #8b5cf6, #22d3ee);
    color: #fff;
    font-family: var(--font-display, 'Outfit', sans-serif);
    font-size: 15px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.onboarding-cta-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 40px rgba(34, 211, 238, 0.4);
}

@media(max-width: 900px) {
    .onboarding-steps { grid-template-columns: 1fr; }
}

/* INLINE MODERN ACTIVATION VIEW */
.modern-activation-view {
    padding: 20px;
}
.activation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: rgba(16, 18, 27, 0.6);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 24px;
    padding: 40px;
    position: relative;
    z-index: 2;
    backdrop-filter: blur(10px);
}
.act-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.act-icon {
    font-size: 50px;
    color: var(--accent-purple);
    margin-bottom: 20px;
    animation: wizFloatGlow 3s infinite alternate;
    filter: drop-shadow(0 10px 20px rgba(139,92,246,0.3));
}
.act-title {
    font-family: var(--font-display, 'Outfit', sans-serif);
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 16px;
    color: #fff;
}
.act-desc {
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    margin-bottom: 24px;
    font-size: 15px;
}
.act-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.act-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.8);
    font-weight: 600;
}
.act-features li i {
    color: var(--accent-emerald);
}
.act-form-block {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.act-btn {
    margin-top: 10px;
}
@media (max-width: 900px) {
    .activation-grid {
        grid-template-columns: 1fr;
    }
}

/* Light mode overrides for greeting banner and onboarding card */
body.light-mode .uov2-banner {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(243, 244, 246, 0.95)) !important;
    border-color: rgba(139, 92, 246, 0.15) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04) !important;
}

body.light-mode .uov2-banner::before {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.04) 0%, transparent 60%) !important;
}

body.light-mode .uov2-banner::after {
    background: radial-gradient(circle, rgba(249, 115, 22, 0.03) 0%, transparent 60%) !important;
}

body.light-mode .uov2-banner.morning,
body.light-mode .uov2-banner.day,
body.light-mode .uov2-banner.evening {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(240, 243, 248, 0.95)) !important;
}

body.light-mode .uov2-banner-eyebrow {
    color: rgba(0, 0, 0, 0.45) !important;
}

body.light-mode .uov2-banner-greeting {
    color: var(--text-main) !important;
}

body.light-mode .uov2-banner-subtitle {
    color: rgba(0, 0, 0, 0.6) !important;
}

body.light-mode .uov2-banner-message {
    color: rgba(0, 0, 0, 0.5) !important;
}

body.light-mode .uov2-banner-btn.ghost {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: var(--text-main) !important;
}

body.light-mode .uov2-banner-btn.ghost:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}

body.light-mode .uov2-banner-stats-inline {
    border-top-color: rgba(0, 0, 0, 0.06) !important;
}

body.light-mode .uov2-stat-col {
    border-right-color: rgba(0, 0, 0, 0.06) !important;
}

body.light-mode .stat-label {
    color: rgba(0, 0, 0, 0.45) !important;
}

body.light-mode .stat-val {
    color: var(--text-main) !important;
}

body.light-mode .uov2-onboarding {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(243, 244, 246, 0.95)) !important;
    border-color: rgba(139, 92, 246, 0.18) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03), inset 0 2px 20px rgba(139, 92, 246, 0.02) !important;
}

body.light-mode .onboarding-title {
    color: var(--text-main) !important;
}

body.light-mode .onboarding-subtitle {
    color: rgba(0, 0, 0, 0.6) !important;
}

body.light-mode .onboarding-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(34, 211, 238, 0.04)) !important;
    border-color: rgba(139, 92, 246, 0.25) !important;
    color: var(--accent-purple) !important;
}