.inact-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: rgba(5,13,24,0.88);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    opacity: 0; pointer-events: none;
    transition: opacity .35s ease;
}
.inact-overlay.active { opacity: 1; pointer-events: auto; }

.inact-card {
    background: var(--white); border-radius: var(--radius-lg, 24px);
    padding: 40px 36px; max-width: 400px; width: calc(100% - 32px);
    text-align: center;
    box-shadow:
        0 25px 60px rgba(0,0,0,.25),
        0 0 0 1px rgba(255,255,255,.06),
        0 0 80px rgba(211,47,47,.06);
    transform: scale(0.92) translateY(20px);
    transition: transform .4s var(--bounce);
    position: relative; overflow: hidden;
}
/* Top urgency stripe */
.inact-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--warning), var(--red-500), var(--warning));
    background-size: 200% 100%;
    animation: urgencyStripe 1.5s linear infinite;
}
@keyframes urgencyStripe { to { background-position: 200% 0; } }

.inact-overlay.active .inact-card { transform: scale(1) translateY(0); }

.inact-icon {
    width: 64px; height: 64px; margin: 0 auto 16px;
    background: #fff7ed; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    animation: iconPulse 2s ease-in-out infinite;
}
@keyframes iconPulse { 0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.15)}50%{box-shadow:0 0 0 10px rgba(245,158,11,0)} }
.inact-icon svg { width: 32px; height: 32px; color: #f59e0b; }

.inact-title { font-size: 1.25rem; font-weight: 800; color: var(--navy-800); margin-bottom: 8px; }
.inact-desc { font-size: .88rem; color: var(--g500); line-height: 1.5; margin-bottom: 20px; }

.inact-timer {
    font-family: var(--mono); font-size: 3rem; font-weight: 700;
    color: var(--red-500); line-height: 1;
    text-shadow: 0 0 20px rgba(211,47,47,.15);
}
.inact-seconds-label { font-size: .75rem; color: var(--g400); margin-bottom: 20px; text-transform: uppercase; letter-spacing: .1em; }

.inact-bar { width: 100%; height: 5px; background: var(--g100); border-radius: 10px; overflow: hidden; margin-bottom: 28px; }
.inact-bar-fill {
    height: 100%; width: 100%;
    background: linear-gradient(90deg, var(--red-500), var(--warning));
    border-radius: 10px; transition: width 1s linear;
    box-shadow: 0 0 8px rgba(211,47,47,.2);
}

.inact-actions { display: flex; flex-direction: column; gap: 10px; }
.inact-btn-stay {
    width: 100%; padding: 14px; border-radius: 14px; border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
    color: white; font-size: .95rem; font-weight: 700; font-family: var(--font);
    transition: all .25s var(--ease);
    position: relative; overflow: hidden;
}
.inact-btn-stay::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(105deg,transparent 40%,rgba(255,255,255,.1) 45%,transparent 55%);
    background-size: 250% 100%; animation: bsh 3s ease-in-out infinite;
}
.inact-btn-stay:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(10,22,40,.25); }

.inact-btn-leave {
    width: 100%; padding: 12px; border-radius: 14px;
    border: 2px solid var(--g200); background: transparent; cursor: pointer;
    color: var(--g500); font-size: .88rem; font-weight: 600; font-family: var(--font);
    transition: all .25s var(--ease);
}
.inact-btn-leave:hover { border-color: var(--red-400); color: var(--red-500); background: #fef2f2; transform: translateY(-1px); }