/* ===========================================
   RESET TIMER PAGE - TradeRune Elite
   Pure Vanilla CSS
=========================================== */

:root {
    --rst-purp-main: #a855f7;
    --rst-purp-light: #c084fc;
    --rst-purp-deep: #7e22ce;
    --rst-purp-glow: rgba(168, 85, 247, 0.4);
    
    --rst-white-pure: #ffffff;
    --rst-white-soft: rgba(255, 255, 255, 0.95);
    --rst-white-muted: rgba(255, 255, 255, 0.6);
    --rst-white-faded: rgba(255, 255, 255, 0.4);
    
    --rst-cyan: #06b6d4;
    --rst-green: #22c55e;
    --rst-red: #ef5350;
    --rst-gold: #fbbf24;

    --rst-bg-card: rgba(255, 255, 255, 0.03); /* Lighter glass */
    --rst-bg-hover: rgba(255, 255, 255, 0.06);
    --rst-border-base: rgba(255, 255, 255, 0.08);
    
    --rst-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Utilities */
.rst-text-cyan { color: var(--rst-cyan); text-shadow: 0 0 10px rgba(6,182,212,0.4); }
.rst-text-green { color: var(--rst-green); text-shadow: 0 0 10px rgba(34,197,94,0.4); }
.rst-text-red { color: var(--rst-red); text-shadow: 0 0 10px rgba(239,83,80,0.4); }
.rst-text-gold { color: var(--rst-gold); text-shadow: 0 0 10px rgba(251,191,36,0.4); }
.rst-muted-text { color: var(--rst-white-muted); font-size: 11px; font-weight: 500; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 1px; }

/* Main Wrapper */
.rst-main-wrapper {
    margin-left: 20px; padding: 30px 40px; font-family: 'Inter', sans-serif;
    color: var(--rst-white-soft); display: flex; flex-direction: column; gap: 24px; min-height: calc(100vh - 100px);
}

/* Glass Card Global */
.rst-glass-card {
    background: var(--rst-bg-card); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--rst-border-base); border-radius: 24px; padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: all 0.4s var(--rst-ease);
}

/* Header */
.rst-header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 8px; }
.rst-subtitle { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--rst-purp-light); text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.rst-pulse-icon { animation: rsPulse 2s infinite; opacity: 0.8; }
@keyframes rsPulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 1; text-shadow: 0 0 15px var(--rst-purp-light); } }

.rst-title { font-size: 42px; font-weight: 900; margin: 0; letter-spacing: -1px; color: var(--rst-white-pure); line-height: 1.1; }
.rst-text-gradient { background: linear-gradient(90deg, var(--rst-white-pure), var(--rst-purp-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 30px var(--rst-purp-glow); }
.rst-desc { margin: 8px 0 0 0; color: var(--rst-white-muted); font-family: 'JetBrains Mono', monospace; font-size: 12px; }

/* Stats Row */
.rst-stats-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; }
.rst-stat-card { background: var(--rst-bg-card); backdrop-filter: blur(24px); border: 1px solid var(--rst-border-base); border-radius: 16px; padding: 16px 20px; min-width: 140px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); transition: all 0.4s var(--rst-ease); display: flex; flex-direction: column; justify-content: center; }
.rst-stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--rst-white-muted); margin-bottom: 6px; }
.rst-stat-val { font-size: 26px; font-weight: 800; color: var(--rst-white-pure); font-variant-numeric: tabular-nums; line-height: 1; }
.rst-stat-sub { font-size: 10px; color: var(--rst-white-faded); margin-top: 6px; }
.rst-icon-btn { background: var(--rst-bg-card); border: 1px solid var(--rst-border-base); color: var(--rst-white-muted); width: 44px; border-radius: 16px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.rst-icon-btn:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: var(--rst-purp-light); }

/* Buttons */
.rst-btn-primary { background: linear-gradient(135deg, var(--rst-purp-deep), var(--rst-purp-main)); color: var(--rst-white-pure); border: 1px solid var(--rst-purp-light); padding: 12px 24px; border-radius: 12px; font-weight: 800; font-size: 12px; letter-spacing: 1px; cursor: pointer; transition: all 0.3s var(--rst-ease); box-shadow: 0 8px 24px var(--rst-purp-glow); text-transform: uppercase; }
.rst-btn-primary:hover:not(.disabled) { transform: translateY(-3px); box-shadow: 0 12px 32px var(--rst-purp-glow); filter: brightness(1.1); }
.rst-btn-primary.disabled { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: var(--rst-white-muted); box-shadow: none; cursor: not-allowed; }

.rst-btn-secondary { background: var(--rst-bg-card); color: var(--rst-white-soft); border: 1px solid var(--rst-border-base); padding: 12px 24px; border-radius: 12px; font-weight: 800; font-size: 12px; cursor: pointer; transition: 0.3s; text-transform: uppercase; letter-spacing: 1px; }
.rst-btn-secondary:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.3); }

.rst-btn-danger { background: var(--rst-red); color: #fff; border: none; padding: 12px 24px; border-radius: 12px; font-weight: 800; font-size: 12px; cursor: pointer; transition: 0.3s; text-transform: uppercase; box-shadow: 0 8px 24px rgba(239,83,80,0.4); letter-spacing: 1px; }
.rst-btn-danger:hover:not(.disabled) { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(239,83,80,0.6); }
.rst-btn-danger.disabled { background: rgba(239,83,80,0.2); color: rgba(255,255,255,0.4); box-shadow: none; cursor: not-allowed; }

/* Layouts */
.rst-content-layout { display: flex; gap: 32px; align-items: flex-start; }
.rst-main-col { flex: 2; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.rst-sidebar { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 24px; height: 100%; }
.rst-panel-title { font-size: 12px; font-weight: 800; color: var(--rst-white-pure); letter-spacing: 2px; text-transform: uppercase; margin: 0 0 20px 0; display: flex; align-items: center; gap: 8px; }
.rst-panel-title i { color: var(--rst-purp-main); }

@media (max-width: 1024px) {
    .rst-content-layout { flex-direction: column; }
    .rst-sidebar { width: 100%; height: 400px; }
    .rst-active-layout { flex-direction: column; }
}

/* Inputs */
.rst-input-group { display: flex; flex-direction: column; gap: 8px; }
.rst-input-group label { font-size: 11px; font-weight: 800; color: var(--rst-white-faded); text-transform: uppercase; letter-spacing: 1px; }
.rst-input { width: 100%; background: rgba(0,0,0,0.3); border: 1px solid var(--rst-border-base); padding: 14px 16px; border-radius: 12px; color: #fff; font-family: 'Inter', sans-serif; font-size: 14px; outline: none; transition: 0.3s; resize: vertical; }
.rst-input:focus { border-color: var(--rst-purp-light); background: rgba(0,0,0,0.5); box-shadow: 0 0 15px var(--rst-purp-glow); }
.rst-input-red:focus { border-color: var(--rst-red); box-shadow: 0 0 15px rgba(239,83,80,0.3); }

/* Config Pills & Cards */
.rst-pill-group { display: flex; gap: 12px; flex-wrap: wrap; background: rgba(0,0,0,0.2); padding: 8px; border-radius: 16px; border: 1px solid var(--rst-border-base); }
.rst-pill { flex: 1; min-width: 80px; background: transparent; border: none; color: var(--rst-white-muted); padding: 12px; border-radius: 10px; font-size: 12px; font-weight: 800; cursor: pointer; transition: 0.3s; }
.rst-pill:hover { color: #fff; background: rgba(255,255,255,0.05); }
.rst-pill.active { background: rgba(168, 85, 247, 0.15); color: var(--rst-purp-light); border: 1px solid rgba(168,85,247,0.4); box-shadow: 0 0 15px rgba(168,85,247,0.2); }

.rst-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rst-type-card { background: rgba(0,0,0,0.2); border: 1px solid var(--rst-border-base); padding: 20px; border-radius: 16px; cursor: pointer; transition: 0.3s; }
.rst-type-card:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.02); }
.rst-type-card.active { border-color: var(--rst-purp-main); background: rgba(168,85,247,0.1); box-shadow: inset 0 0 20px rgba(168,85,247,0.1); }
.rst-type-card i { font-size: 24px; margin-bottom: 12px; }
.rst-type-card h4 { margin: 0 0 8px 0; font-size: 13px; font-weight: 900; color: #fff; letter-spacing: 1px; }
.rst-type-card p { margin: 0; font-size: 11px; color: var(--rst-white-muted); line-height: 1.5; }

.rst-emo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 12px; }
.rst-emo-btn { background: rgba(0,0,0,0.3); border: 1px solid var(--rst-border-base); color: var(--rst-white-muted); padding: 12px; border-radius: 12px; font-size: 12px; font-weight: 700; cursor: pointer; transition: 0.3s; }
.rst-emo-btn:hover { background: rgba(255,255,255,0.05); color: #fff; }
.rst-emo-btn.active { background: rgba(168,85,247,0.2); border-color: var(--rst-purp-light); color: #fff; box-shadow: 0 0 15px var(--rst-purp-glow); }

/* History */
.rst-history-list { display: flex; flex-direction: column; gap: 12px; flex: 1; overflow-y: auto; padding-right: 8px; }
.rst-hist-row { background: rgba(0,0,0,0.2); border: 1px solid var(--rst-border-base); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; transition: 0.3s; }
.rst-hist-row:hover { background: rgba(255,255,255,0.05); transform: translateX(4px); }
.rst-hist-top { display: flex; justify-content: space-between; align-items: center; }
.rst-hist-date { font-size: 11px; font-weight: 800; color: var(--rst-white-faded); font-family: monospace; }
.rst-hist-type { font-size: 10px; font-weight: 900; padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,0.1); color: #fff; }
.rst-hist-mid { display: flex; justify-content: space-between; align-items: baseline; }
.rst-hist-dur { font-size: 16px; font-weight: 900; color: var(--rst-cyan); font-family: monospace; }
.rst-hist-res { font-size: 11px; color: var(--rst-white-soft); font-weight: 600; }
.rst-badge-pass { color: var(--rst-green); }
.rst-badge-fail { color: var(--rst-red); }

/* --- ACTIVE VIEW --- */
.rst-active-layout { display: flex; gap: 32px; height: 100%; }
.rst-active-left { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.rst-active-right { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* SVG Timer */
.rst-timer-wrapper { position: relative; width: 360px; height: 360px; display: flex; align-items: center; justify-content: center; margin: 40px 0; }
.rst-timer-svg { width: 100%; height: 100%; transform: rotate(-90deg); position: absolute; inset: 0; }
.rst-timer-bg { fill: none; stroke: rgba(255, 255, 255, 0.05); stroke-width: 16; }
.rst-timer-fill { fill: none; stroke: var(--rst-purp-main); stroke-width: 16; stroke-linecap: round; transition: stroke-dashoffset 0.1s linear, stroke 1s ease; }
.rst-timer-content { position: absolute; display: flex; flex-direction: column; align-items: center; z-index: 10; }
.rst-time-text { font-size: 72px; font-weight: 900; font-family: 'JetBrains Mono', monospace; color: #fff; line-height: 1; text-shadow: 0 0 30px var(--rst-purp-glow); font-variant-numeric: tabular-nums; }

/* Hold Bypass Button */
.rst-bypass-wrapper { margin-top: auto; width: 100%; max-width: 300px; text-align: center; }
.rst-btn-bypass { position: relative; width: 100%; background: rgba(239,83,80,0.1); border: 1px solid rgba(239,83,80,0.3); color: var(--rst-red); padding: 16px; border-radius: 12px; font-weight: 800; font-size: 12px; letter-spacing: 1px; cursor: pointer; overflow: hidden; user-select: none; -webkit-user-select: none; }
.rst-bypass-fill { position: absolute; top: 0; left: 0; bottom: 0; width: 0%; background: var(--rst-red); opacity: 0.5; transition: width 0.1s linear; }

/* Activity Views */
.rst-activity-box { display: flex; flex-direction: column; align-items: center; text-align: center; animation: fadeIn 0.5s ease; width: 100%; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Breath Anim */
.rst-breath-ring { width: 200px; height: 200px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; margin: 40px auto; position: relative; }
.rst-breath-orb { width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, var(--rst-cyan), var(--rst-purp-light)); box-shadow: 0 0 40px var(--rst-cyan); transition: transform 0.1s linear, background 1s, box-shadow 1s; }
.rst-breath-text { font-size: 24px; font-weight: 900; letter-spacing: 4px; margin-bottom: 8px; color: #fff; font-family: monospace; }
.rst-breath-sub { font-size: 12px; color: var(--rst-cyan); font-weight: 800; letter-spacing: 2px; }

/* MODALS */
.rst-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(12px); z-index: 100000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; padding: 20px; }
.rst-modal-backdrop.show { opacity: 1; pointer-events: all; }
.rst-modal-danger { background: rgba(30, 5, 5, 0.9); }

.rst-modal { width: 500px; max-width: 95vw; background: var(--rst-bg-card); backdrop-filter: blur(24px); border: 1px solid var(--rst-border-base); border-radius: 24px; padding: 32px; box-shadow: 0 32px 64px rgba(0,0,0,0.9); display: flex; flex-direction: column; transform: scale(0.95); transition: all 0.3s var(--rst-ease); }
.rst-modal-backdrop.show .rst-modal { transform: scale(1); }
.rst-modal-header { padding-bottom: 20px; border-bottom: 1px solid var(--rst-border-base); margin-bottom: 20px; }
.rst-modal-header h2 { margin: 0; font-size: 20px; font-weight: 900; }

/* Scrollbars */
.custom-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: var(--rst-purp-light); }