/*
 * BSMS Web
 * Copyright © 2026 Jellyfish Jelly
 * SPDX-License-Identifier: AGPL-3.0-only
 */



*,*::before,*::after{box-sizing:border-box}
:root{
  --theme-rgb: 187,0,30;
  --red: rgb(var(--theme-rgb));
  --red-h: #d10022;
  --red-glow: rgba(var(--theme-rgb), 0.35);
  --bg: #000;
  --fg: #fff;
  --fg2: rgba(255,255,255,0.6);
  --border: rgba(255,255,255,0.13);
  --msg-bg: rgba(255,255,255,0.06);
  --input-bg: rgba(255,255,255,0.08);
  --font: 'Patrick Hand', cursive;
}

body.light-mode {
  --bg: #f0f2f5;
  --fg: #1c1e21;
  --fg2: rgba(0,0,0,0.6);
  --border: rgba(0,0,0,0.15);
  --msg-bg: #fff;
  --input-bg: #fff;
}

html,body{margin:0;padding:0;height:100%;width:100%;font-family:var(--font);background:var(--bg);color:var(--fg);overflow:hidden; transition:background 0.3s, color 0.3s;}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes slideLeft{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
@keyframes notifIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Offline Banner */
#offlineBanner {
  position: fixed; top: 0; left: 0; width: 100%; background: #ef4444; color: #fff;
  text-align: center; padding: 10px; font-family: var(--font); font-size: 18px;
  z-index: 10000; transform: translateY(-100%); transition: transform 0.3s ease;
}
#offlineBanner.show { transform: translateY(0); }

/* UI Elements */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:none;align-items:center;justify-content:center;z-index:3000;opacity:0;transition:opacity 0.3s ease;backdrop-filter:blur(4px);}
.overlay.show{display:flex;opacity:1;}
.popup{background:var(--bg);border:2px solid var(--red);border-radius:20px;padding:26px 24px 20px;width:min(420px,92vw);animation:popIn .22s ease; display:flex; flex-direction:column; max-height: 90vh; overflow-y:auto; box-shadow:0 10px 40px rgba(0,0,0,0.5);}
.popup h2{font-size:28px;margin:0 0 8px; color:var(--fg);}
.popup p{font-size:18px;color:var(--fg2);margin:0 0 14px;line-height:1.45}

.btn{display:block;width:100%;font-family:var(--font);font-size:21px;padding:10px 14px;border-radius:12px;border:2px solid var(--red);background:var(--red);color:#fff;cursor:pointer;transition:transform .13s,background .13s,border-color .13s,box-shadow .13s;margin-bottom:9px;line-height:1.2; text-align:center; text-decoration: none;}
.btn:last-child{margin-bottom:0}
.btn:hover:not(:disabled){background:var(--red-h);transform:scale(1.02);box-shadow:0 4px 18px var(--red-glow)}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:0.5;cursor:not-allowed;}
.btn.sec{background:transparent;border-color:var(--border);color:var(--fg);}
.btn.sec:hover:not(:disabled){background:var(--msg-bg);border-color:var(--fg2);box-shadow:none}
.btn.warn{background:#7a0010;border-color:#7a0010;color:#fff;}
.btn.warn:hover:not(:disabled){background:#9a0015;border-color:#9a0015}

input,textarea{width:100%;font-family:var(--font);font-size:20px;padding:10px 13px;border-radius:12px;border:2px solid var(--border);background:var(--input-bg);color:var(--fg);margin:5px 0 12px;display:block;transition:border-color .2s,box-shadow .2s; outline:none;}
input:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 14px var(--red-glow);}
input:disabled{opacity:0.5;cursor:not-allowed}
input::placeholder,textarea::placeholder{color:var(--fg2)}
textarea{resize:vertical;height:110px}

.color-swatch{
  width:32px; height:32px; border-radius:8px; border:2px solid var(--border);
  cursor:pointer; transition:transform 0.15s, border-color 0.15s; flex-shrink:0;
}
.color-swatch:hover{ transform:scale(1.15); border-color:#fff; }

.spinner{width:46px;height:46px;border:4px solid var(--border);border-top-color:var(--red);border-radius:50%;animation:spin 1s cubic-bezier(.4,0,.2,1) infinite;margin:0 auto 20px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Screens */
.screen{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity 0.3s ease;overflow-y:auto;}
.screen.show{display:flex;opacity:1;}
.card{width:min(440px,100%);background:var(--bg);border:3px solid var(--red);border-radius:26px;padding:32px 26px;animation:popIn .3s ease;text-align:center;box-shadow:0 0 60px rgba(var(--theme-rgb),0.15); position:relative;}
.card h1{font-size:42px;margin:0 0 4px;line-height:1.1; color:var(--fg);}
.card>p{font-size:19px;color:var(--fg2);margin:0 0 24px}
.logo-img{width:72px;height:72px;object-fit:contain;margin:0 auto 15px;display:block;border-radius:14px; background: var(--msg-bg); border: 2px solid var(--border);}

/* Dashboard Shell */
#appShell{position:fixed;inset:0;display:none;flex-direction:row;opacity:0;transition:opacity 0.3s ease;}
#appShell.show{display:flex;opacity:1;}
#sidebar{width:260px;min-width:260px;border-right:3px solid var(--red);padding:24px 16px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;background:var(--bg);z-index:50;}
.sidebar-title { font-size: 26px; margin: 0 0 15px 5px; color: var(--fg); font-weight: bold; border-bottom: 2px solid var(--border); padding-bottom: 10px; }
.navBtn{width:100%;font-family:var(--font);font-size:19px;padding:12px 16px;border-radius:12px;border:2px solid transparent;background:transparent;color:var(--fg2);cursor:pointer;text-align:left;transition:all .15s;display:flex;align-items:center;gap:12px;}
.navBtn:hover{background:var(--msg-bg);color:var(--fg);transform:translateX(4px);}
.navBtn.active{background:rgba(var(--theme-rgb),0.15);border-color:var(--red);color:var(--fg);box-shadow:0 2px 12px rgba(var(--theme-rgb),0.2);}
.sidebar-gap{flex:1}

/* Mobile Topbar */
#mobileTopbar{display:none;height:60px;border-bottom:3px solid var(--red);padding:0 16px;align-items:center;justify-content:space-between;background:var(--bg);flex-shrink:0;}
#mobileMenuBtn{font-family:var(--font);font-size:20px;padding:6px 14px;border-radius:10px;border:2px solid var(--red);background:transparent;color:var(--fg);cursor:pointer;}
#mobileMenuBtn:hover{background:rgba(var(--theme-rgb),0.1)}
.mobile-title { font-size: 24px; color: var(--fg); font-weight: bold;}

#mobileDrawerBackdrop{position:fixed;inset:0;top:60px;background:rgba(0,0,0,0.5);z-index:699;display:none;animation:fadeIn .2s ease}
#mobileDrawerBackdrop.show{display:block}
#mobileDrawer{position:fixed;top:60px;left:0;bottom:0;width:260px;background:var(--bg);border-right:3px solid var(--red);z-index:700;display:flex;flex-direction:column;gap:7px;padding:15px;overflow-y:auto;transform:translateX(-100%);transition:transform .25s cubic-bezier(.4,0,.2,1)}
#mobileDrawer.open{transform:translateX(0)}

/* Main View */
#mainView{flex:1;display:flex;flex-direction:column;overflow-y:auto;padding:30px;position:relative;}
.panel{display:none;flex-direction:column;animation:slideLeft .2s ease; max-width: 650px; margin: 0 auto; width: 100%;}
.panel.show{display:flex}
.panel-header{margin-bottom:24px;}
.panel-header h1{font-size:42px;margin:0 0 5px; color:var(--fg);}
.panel-header p{font-size:19px;color:var(--fg2);margin:0;}

.form-group { margin-bottom: 22px; }
.form-group label { display: block; font-size: 18px; margin-bottom: 8px; color: var(--fg); }
.avatar-preview { width: 110px; height: 110px; border-radius: 50%; border: 3px solid var(--red); background: var(--input-bg); margin-bottom: 15px; display:flex; align-items:center; justify-content:center; font-size: 46px; color: var(--fg); font-weight:bold; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.2);}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }

/* Sessions View */
.session-card { background: var(--input-bg); border: 1px solid var(--border); padding: 12px 16px; border-radius: 12px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.session-card.current { border-color: var(--red); box-shadow: 0 0 10px rgba(var(--theme-rgb), 0.2); }
.session-info { display: flex; flex-direction: column; gap: 4px; }
.session-info strong { font-size: 18px; color: var(--fg); }
.session-info span { font-size: 15px; color: var(--fg2); }

/* Notifications */
#notifContainer{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:9000;pointer-events:none;width:min(400px,92vw)}
.notif{background:rgba(20,20,20,0.96);border:2px solid var(--red);border-radius:12px;padding:10px 16px;font-size:17px;color:#fff;pointer-events:all;cursor:pointer;animation:notifIn .26s ease;width:100%;text-align:center;transition:opacity .28s,transform .28s; box-shadow: 0 6px 20px rgba(0,0,0,0.5);}

#deleteCountdownDisplay { font-size: 80px; font-weight: bold; color: #ff3333; margin: 10px 0 20px; font-family: 'VT323', monospace; line-height:1;}

@media (max-width:768px){
    #sidebar{display:none;}
    #mobileTopbar{display:flex;}
    #mainView{padding:20px 16px;}
}