:root { --transition-speed: 0.5s; }
[data-theme="dark"] {
  --bg-base: #020617;
  --bg-gradient: #020617;
  --glass-bg: rgba(15, 23, 42, 0.8);
  --glass-border: rgba(51, 65, 85, 0.4);
  --glass-bg-hover: rgba(30, 41, 59, 0.7);
  --text-main: #f1f5f9;
  --text-muted: #94a3b8;
  --btn-hover: rgba(51, 65, 85, 0.6);
  --pill-bg: rgba(0, 0, 0, 0.4);
  --pill-color: #e2e8f0;
  --sidebar-bg: rgba(2, 6, 23, 0.95);
  --input-bg: rgba(30, 41, 59, 0.6);
  --success: #10b981;
  --danger: #f43f5e;
  --warning: #f59e0b;
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --violet: #8b5cf6;
  --fuchsia: #d946ef;
  --sky: #0ea5e9;
  --nav-active-bg: rgba(99, 102, 241, 0.15);
  --nav-active-text: #a5b4fc;
  --table-header: rgba(15, 23, 42, 0.8);
  --table-row-hover: rgba(51, 65, 85, 0.3);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
  --border-radius-sm: 0.75rem;
  --border-radius: 1rem;
  --border-radius-lg: 1.25rem;
  --border-radius-xl: 1.5rem;
}
[data-theme="light"] {
  --bg-base: #f8fafc;
  --bg-gradient: #f8fafc;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(203, 213, 225, 0.6);
  --glass-bg-hover: rgba(255, 255, 255, 0.9);
  --text-main: #0f172a;
  --text-muted: #475569;
  --btn-hover: rgba(203, 213, 225, 0.6);
  --pill-bg: rgba(255, 255, 255, 0.6);
  --pill-color: #1e293b;
  --sidebar-bg: rgba(255, 255, 255, 0.95);
  --input-bg: rgba(255, 255, 255, 0.8);
  --success: #059669;
  --danger: #e11d48;
  --warning: #d97706;
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --violet: #7c3aed;
  --fuchsia: #c026d3;
  --sky: #0284c7;
  --nav-active-bg: rgba(79, 70, 229, 0.1);
  --nav-active-text: #4f46e5;
  --table-header: rgba(241, 245, 249, 0.8);
  --table-row-hover: rgba(203, 213, 225, 0.3);
  --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  --border-radius-sm: 0.75rem;
  --border-radius: 1rem;
  --border-radius-lg: 1.25rem;
  --border-radius-xl: 1.5rem;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--bg-base);
  color: var(--text-main);
  font-family: 'Inter', 'Noto Sans Arabic', sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}
[lang="ar"] body { font-family: 'Noto Sans Arabic', 'Inter', sans-serif; }
input, textarea { -webkit-user-select: text; user-select: text; }
.bg-blobs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.45; animation: blobFloat 24s ease-in-out infinite; }
.bg-blob:nth-child(1) { width: 500px; height: 500px; background: rgba(99, 102, 241, 0.15); top: -12%; left: -10%; }
.bg-blob:nth-child(2) { width: 400px; height: 400px; background: rgba(168, 85, 247, 0.12); top: 45%; right: -12%; animation-delay: -6s; animation-duration: 28s; }
.bg-blob:nth-child(3) { width: 350px; height: 350px; background: rgba(236, 72, 153, 0.10); bottom: -8%; left: 25%; animation-delay: -12s; animation-duration: 22s; }
@keyframes blobFloat { 0%,100%{transform:translate(0,0) scale(1);} 25%{transform:translate(55px,-75px) scale(1.12);} 50%{transform:translate(-30px,45px) scale(0.92);} 75%{transform:translate(-60px,-25px) scale(1.06);} }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fadeSlideRight { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
#viewLogin > *, #viewStudent > *, #viewAccount > *, #viewAdmin > * { animation: cardEnter 0.5s ease both; }
#viewLogin h1, #viewStudent h2, #viewAccount h1, #viewAdmin h1 { animation: fadeSlideDown 0.7s ease both; }
.stat-card { border-radius: var(--border-radius); padding: 1.25rem; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 20px 30px -12px rgba(0,0,0,0.3); border-color: rgba(99,102,241,0.4); }
.glass { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); box-shadow: var(--shadow); }
.text-gradient { background-clip: text; -webkit-background-clip: text; color: transparent; background-image: linear-gradient(to right, #818cf8, #c084fc, #f472b6); }
.animate-float { animation: float 6s ease-in-out infinite; }
.lang-container { position:relative; display:flex; background:var(--pill-bg); border-radius:99px; padding:4px; border:1px solid var(--glass-border); height:48px; width:100%; direction:ltr; }
.lang-pill { position:absolute; top:4px; bottom:4px; left:4px; width:calc(33.33% - 5px); background:var(--pill-color); border-radius:99px; transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); z-index:0; }
.lang-btn { flex:1; position:relative; z-index:1; font-size:0.9rem; font-weight:600; color:var(--text-muted); transition:color 0.3s; cursor:pointer; background:none; border:none; }
[data-theme="dark"] .lang-btn.active { color:#333; font-weight:800; }
[data-theme="light"] .lang-btn.active { color:#fff; font-weight:800; }
.theme-toggle-btn { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; overflow:hidden; color:var(--text-main); flex-shrink:0; background:none; border:none; }
.theme-toggle-btn:hover { background:var(--btn-hover); }
.theme-toggle-btn i { position:absolute; top:50%; left:50%; transition:all 0.5s cubic-bezier(0.23,1,0.32,1); }
[data-theme="dark"] .ph-moon { transform:translate(-50%,-50%) scale(1) rotate(0deg); opacity:1; }
[data-theme="dark"] .ph-sun  { transform:translate(-50%,-50%) scale(0.5) rotate(90deg); opacity:0; }
[data-theme="light"] .ph-sun  { transform:translate(-50%,-50%) scale(1) rotate(0deg); opacity:1; }
[data-theme="light"] .ph-moon { transform:translate(-50%,-50%) scale(0.5) rotate(-90deg); opacity:0; }
html[dir="rtl"] #sidebar { right:0; left:auto; transform:translateX(100%); border-left:1px solid var(--glass-border); border-right:none; }
html[dir="ltr"] #sidebar { left:0; right:auto; transform:translateX(-100%); border-right:1px solid var(--glass-border); border-left:none; }
#sidebar.open { transform:translateX(0) !important; }
html[dir="rtl"] #menuBtn { right:2rem; left:auto; }
html[dir="ltr"] #menuBtn { left:2rem; right:auto; }
.nav-link { display:flex; align-items:center; gap:0.75rem; width:100%; padding:1rem 1.5rem; border-radius:1rem; font-weight:500; text-decoration:none; color:var(--text-main); border:1px solid transparent; transition:all 0.2s ease; cursor:pointer; background:none; }
.nav-link:hover { background:var(--glass-bg-hover); transform:translateX(4px); box-shadow: var(--shadow); }
html[dir="rtl"] .nav-link:hover { transform:translateX(-4px); }
.nav-link.active { background:var(--nav-active-bg); color:var(--nav-active-text); border-color:var(--glass-border); font-weight:600; }
.calc-input { width:100%; background:var(--input-bg); border:1px solid var(--glass-border); color:var(--text-main); border-radius:var(--border-radius-sm); padding:0.75rem 1rem; outline:none; transition:border-color 0.3s, background 0.3s; font-family:'Inter', 'Noto Sans Arabic', sans-serif; font-size:0.95rem; }
.calc-input:focus { border-color:#818cf8; box-shadow:0 0 0 3px rgba(129,140,248,0.15); }
.field-label { display:block; font-size:0.8rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.5rem; }
.btn-main { width:100%; padding:0.9rem 1.5rem; border-radius:var(--border-radius-xl); font-weight:700; font-size:0.95rem; cursor:pointer; border:none; display:flex; align-items:center; justify-content:center; gap:0.5rem; transition:all 0.25s cubic-bezier(0.22,0.61,0.36,1); background:linear-gradient(135deg,#818cf8,#9333ea); color:white; box-shadow:0 4px 20px rgba(129,140,248,0.3); }
.btn-main:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(129,140,248,0.4); }
.btn-main:active { transform:scale(0.94); transition:transform 0.08s ease; }
.btn-main.loading { pointer-events:none; opacity:0.7; }
.btn-ghost { background:var(--btn-hover); color:var(--text-main); border:1px solid var(--glass-border); padding:0.6rem 1.2rem; border-radius:var(--border-radius-xl); font-weight:600; cursor:pointer; display:flex; align-items:center; gap:0.4rem; font-size:0.88rem; transition:all 0.25s cubic-bezier(0.22,0.61,0.36,1); }
.btn-ghost:hover { background:var(--glass-bg-hover); }
.btn-ghost:active { transform:scale(0.94); transition:transform 0.08s ease; }
.btn-sm { padding:0.5rem 1rem; border-radius:8px; font-size:0.82rem; font-weight:600; cursor:pointer; border:none; display:flex; align-items:center; gap:0.4rem; transition:all 0.2s; }
.btn-success-sm { background:rgba(42,212,165,0.15); color:var(--success); border:1px solid rgba(42,212,165,0.3); }
.btn-danger-sm { background:rgba(255,100,124,0.15); color:var(--danger); border:1px solid rgba(255,100,124,0.3); }
.btn-ghost-sm { background:var(--btn-hover); color:var(--text-muted); border:1px solid var(--glass-border); }
.btn-info-sm { background:rgba(129,140,248,0.15); color:#a5b4fc; border:1px solid rgba(129,140,248,0.3); }
.error-msg { background:rgba(255,100,124,0.1); border:1px solid rgba(255,100,124,0.3); color:var(--danger); padding:0.75rem 1rem; border-radius:var(--border-radius-sm); font-size:0.88rem; margin-bottom:1rem; display:none; align-items:center; gap:0.5rem; }
.error-msg.show { display:flex; }
.badge { display:inline-flex; align-items:center; gap:0.4rem; padding:0.4rem 0.9rem; border-radius:var(--border-radius-xl); font-size:0.82rem; font-weight:600; }
.badge-success { background:rgba(42,212,165,0.15); color:var(--success); border:1px solid rgba(42,212,165,0.3); }
.badge-warning { background:rgba(255,201,74,0.15); color:var(--warning); border:1px solid rgba(255,201,74,0.3); }
.badge-danger { background:rgba(255,100,124,0.15); color:var(--danger); border:1px solid rgba(255,100,124,0.3); }
.badge-bronze { background: rgba(205,127,50,0.2); color: #cd7f32; border:1px solid rgba(205,127,50,0.5); }
.badge-silver { background: rgba(192,192,192,0.2); color: #c0c0c0; border:1px solid rgba(192,192,192,0.5); }
.badge-gold { background: rgba(255,215,0,0.2); color: #ffd700; border:1px solid rgba(255,215,0,0.5); }
.badge-diamond { background: rgba(185,242,255,0.2); color: #b9f2ff; border:1px solid rgba(185,242,255,0.5); }
.badge-al { background:rgba(255,201,74,0.2); color:var(--warning); border:1px solid rgba(255,201,74,0.4); }
.stat-val { font-size:1.3rem; font-weight:800; font-family:'JetBrains Mono',monospace; }
.stat-lbl { font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-top:0.2rem; }
.res-table { width:100%; border-collapse:collapse; font-size:0.88rem; }
.res-table th { padding:0.75rem 1rem; text-align:left; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); background:var(--table-header); border-bottom:1px solid var(--glass-border); white-space:nowrap; }
[lang="ar"] .res-table th { text-transform: none; letter-spacing: 0; text-align: right; }
.res-table td { padding:0.85rem 1rem; border-bottom:1px solid rgba(255,255,255,0.06); white-space:nowrap; }
[data-theme="light"] .res-table td { border-bottom:1px solid rgba(0,0,0,0.06); }
.res-table tr:last-child td { border-bottom:none; }
.res-table tr:hover td { background:var(--table-row-hover); }
.mono { font-family:'JetBrains Mono',monospace; font-size:0.9rem; }
.note-good { color:var(--success); font-weight:600; }
.note-mid { color:var(--warning); font-weight:600; }
.note-bad { color:var(--danger); font-weight:600; }
.note-abs { color:var(--text-muted); font-style:italic; }
.coef-badge { display:inline-block; background:rgba(255,255,255,0.1); border:1px solid var(--glass-border); border-radius:6px; padding:1px 6px; font-size:0.72rem; color:var(--text-muted); margin-left:6px; }
[dir="rtl"] .coef-badge { margin-left:0; margin-right:6px; }
.tabs { display:flex; gap:0.5rem; background:var(--input-bg); border:1px solid var(--glass-border); border-radius:14px; padding:4px; margin-bottom:1.5rem; flex-wrap:wrap; }
.tab { flex:1; padding:0.6rem; border-radius:10px; font-size:0.85rem; font-weight:600; cursor:pointer; border:none; background:none; color:var(--text-muted); transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:0.4rem; white-space:nowrap; }
.tab.active { background:var(--glass-bg); color:var(--text-main); border:1px solid var(--glass-border); box-shadow:0 2px 8px rgba(0,0,0,0.15); }
.glass-select { width:100%; padding:0.75rem 1rem; background:var(--input-bg); border:1px solid var(--glass-border); border-radius:var(--border-radius-sm); color:var(--text-main); font-family:'Inter', 'Noto Sans Arabic', sans-serif; font-size:0.9rem; outline:none; cursor:pointer; }
.glass-select:focus { border-color:#818cf8; }
.notif-badge { background:var(--danger); color:white; border-radius:var(--border-radius-xl); font-size:0.7rem; font-weight:700; padding:2px 7px; margin-left:6px; }
.notif-card { border-radius:16px; padding:1rem 1.25rem; margin-bottom:0.75rem; }
.notif-unread { border:1px solid rgba(129,140,248,0.3); background:rgba(129,140,248,0.07); }
.notif-read { border:1px solid var(--glass-border); background:var(--glass-bg); }
.device-badge { display:inline-flex; align-items:center; gap:0.3rem; padding:0.25rem 0.6rem; border-radius:6px; font-size:0.72rem; font-weight:600; margin-top:0.3rem; }
.device-pc { background:rgba(99,102,241,0.15); color:#a5b4fc; border:1px solid rgba(99,102,241,0.3); }
.device-mobile { background:rgba(42,212,165,0.15); color:var(--success); border:1px solid rgba(42,212,165,0.3); }
.device-tablet { background:rgba(255,201,74,0.15); color:var(--warning); border:1px solid rgba(255,201,74,0.3); }
.spinner { width:20px; height:20px; border:2px solid var(--glass-border); border-top-color:#818cf8; border-radius:50%; animation:spin 0.7s linear infinite; }
#toastContainer { position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 0.75rem; pointer-events: none; max-width: 360px; }
.toast-item { padding: 0.9rem 1.25rem; border-radius: 1rem; background: rgba(0,0,0,0.55); backdrop-filter: blur(20px); border-left: 4px solid transparent; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.7); font-size: 0.9rem; font-weight: 500; color: #fff; display: flex; align-items: center; gap: 0.75rem; pointer-events: auto; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22,0.61,0.36,1); }
.toast-item.show { opacity: 1; transform: translateY(0); }
.toast-item i { font-size: 1.25rem; flex-shrink: 0; }
.toast-item.success { border-left-color: var(--success); background: rgba(42,212,165,0.15); }
.toast-item.danger { border-left-color: var(--danger); background: rgba(255,100,124,0.15); }
.toast-item.warning { border-left-color: var(--warning); background: rgba(255,201,74,0.15); }
.toast-item.info { border-left-color: #a5b4fc; background: rgba(165,180,252,0.15); }
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; }
.modal-overlay:not(.hidden) { opacity: 1; visibility: visible; }
.modal-box { background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--border-radius-lg); padding: 1.75rem; width: 100%; max-width: 700px; max-height: 90vh; overflow-y: auto; transform: scale(0.95) translateY(25px); opacity: 0; transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.22,0.61,0.36,1); box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.modal-overlay:not(.hidden) .modal-box { transform: scale(1) translateY(0); opacity: 1; }
#confirmModal .modal-box { background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 1.5rem; padding: 2rem; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
#breadcrumb { padding:3px 8px !important; }
.breadcrumb-btn { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--border-radius-xl); font-size:0.72rem; font-weight:500; color:var(--text-muted); transition:all 0.2s ease; cursor:pointer; background:none; border:none; }
.breadcrumb-btn:hover { color:var(--text-main); background:var(--btn-hover); }
.breadcrumb-sep { color:var(--text-muted); opacity:0.4; font-size:0.65rem; }
.hidden { display:none !important; }
.progress-bar-wrap { width:100%; height:5px; background:rgba(255,255,255,0.1); border-radius:var(--border-radius-xl); margin-top:0.5rem; overflow:hidden; }
.progress-bar-fill { height:100%; border-radius:var(--border-radius-xl); background:linear-gradient(90deg,#818cf8,#c084fc,#f472b6); transition:width 0.8s cubic-bezier(0.22,1,0.36,1); }
.motiv-banner { border-radius:14px; padding:0.65rem 1rem; font-size:0.83rem; font-weight:600; display:flex; align-items:center; gap:0.6rem; margin-bottom:1.5rem; }
.peer-chip { display:inline-flex; align-items:center; gap:0.5rem; background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:var(--border-radius-xl); padding:0.3rem 0.75rem; font-size:0.82rem; margin:0.2rem; }
.toggle-wrap { display:flex; align-items:center; gap:0.75rem; padding:0.75rem 1rem; border-radius:12px; cursor:pointer; border:1px solid var(--glass-border); background:var(--glass-bg); transition:all 0.2s; user-select:none; }
.toggle-wrap:hover { border-color:#818cf8; }
.toggle-wrap.active-all { border-color:rgba(255,201,74,0.5); background:rgba(255,201,74,0.08); }
.toggle-knob-track { position:relative; width:44px; height:24px; border-radius:var(--border-radius-xl); background:rgba(255,255,255,0.1); border:1px solid var(--glass-border); transition:all 0.3s; flex-shrink:0; }
.toggle-knob-track.on { background:rgba(255,201,74,0.4); border-color:rgba(255,201,74,0.6); }
.toggle-knob { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,0.6); transition:transform 0.3s; }
.toggle-knob-track.on .toggle-knob { transform:translateX(20px); background:#ffc94a; }
.peer-detail-wrapper { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
.peer-detail-wrapper.expanded { max-height: 800px; }
.sidebar-user { display: flex; align-items: center; padding: 0.75rem 1rem; border-radius: 1rem; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); cursor: pointer; }
.sidebar-user .user-info { flex: 1; min-width: 0; }
.sidebar-user .user-name { font-size: 0.85rem; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .user-role { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.1rem; }
#userMenuBtn { backdrop-filter: blur(16px); transition: all 0.2s ease; }
#userMenuBtn:hover { background: var(--glass-bg-hover); transform: scale(1.05); }
@media(max-width:640px) { .stat-val { font-size:1.1rem; } }