:root{
  --bg:#0a0d13;
  --bg-elev:#11151e;
  --bg-elev-2:#161b26;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.14);
  --gold:#c9a876;
  --gold-soft:rgba(201,168,118,.14);
  --red:#a8323a;
  --text:#e9e7e1;
  --text-muted:#8b8f9b;
  --radius:14px;
  --radius-sm:9px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);min-height:100vh;}
body{font-family:'Inter',system-ui,sans-serif;}
h1,h2,h3,.display{font-family:'Space Grotesk','Inter',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--gold-soft);color:var(--gold);}

.topbar{height:3px;background:linear-gradient(90deg,var(--red),var(--gold));}
.app{display:flex;flex-direction:column;min-height:100vh;}

.login-screen{
  flex:1;display:flex;align-items:center;justify-content:center;padding:24px;
  background:
    radial-gradient(circle at 15% 20%, rgba(201,168,118,.06), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(168,50,58,.05), transparent 45%),
    var(--bg);
}
.login-card{
  width:100%;max-width:380px;background:var(--bg-elev);border:1px solid var(--border);
  border-radius:var(--radius);padding:36px 32px;position:relative;overflow:hidden;
}
.login-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--red),var(--gold));
}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:28px;}
.login-brand .seal{
  width:42px;height:42px;border-radius:50%;border:1.5px solid var(--gold);
  display:flex;align-items:center;justify-content:center;color:var(--gold);
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;flex-shrink:0;
}
.login-brand h1{font-size:19px;margin:0;font-weight:600;letter-spacing:.02em;}
.login-brand p{margin:2px 0 0;font-size:12px;color:var(--text-muted);}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:6px;letter-spacing:.02em;}
.field input{
  width:100%;padding:11px 13px;background:var(--bg-elev-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);font-size:14px;outline:none;transition:border-color .15s;
}
.field input:focus{border-color:var(--gold);}
.btn{
  width:100%;padding:11px 16px;border-radius:var(--radius-sm);border:none;
  font-size:14px;font-weight:600;letter-spacing:.01em;transition:opacity .15s, transform .1s;
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--gold);color:#181307;}
.btn-primary:hover{opacity:.9;}
.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--border-strong);color:var(--text);}
.btn-danger{background:transparent;color:#d97878;border:1px solid rgba(217,120,120,.3);}
.btn-danger:hover{background:rgba(217,120,120,.08);}
.error-msg{
  background:rgba(217,120,120,.08);border:1px solid rgba(217,120,120,.25);color:#e39a9a;
  border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;margin-bottom:16px;
}

.nav{
  display:flex;align-items:center;justify-content:space-between;padding:16px 28px;
  border-bottom:1px solid var(--border);background:var(--bg-elev);position:sticky;top:0;z-index:20;
}
.nav-left{display:flex;align-items:center;gap:14px;}
.nav-left .seal{
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--gold);
  display:flex;align-items:center;justify-content:center;color:var(--gold);
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;flex-shrink:0;
}
.nav-left h1{font-size:16px;margin:0;font-weight:600;}
.nav-tabs{display:flex;gap:4px;margin-left:16px;}
.nav-tabs button{
  background:transparent;border:none;color:var(--text-muted);font-size:13px;font-weight:500;
  padding:8px 14px;border-radius:20px;transition:all .15s;
}
.nav-tabs button.active{background:var(--gold-soft);color:var(--gold);}
.nav-tabs button:hover:not(.active){color:var(--text);}
.nav-right{display:flex;align-items:center;gap:12px;}
.badge-role{
  font-size:11px;padding:5px 10px;border-radius:20px;border:1px solid var(--border-strong);
  color:var(--text-muted);letter-spacing:.03em;text-transform:uppercase;
}
.badge-role.admin{color:var(--gold);border-color:rgba(201,168,118,.35);}
.menu-toggle{display:none;background:transparent;border:1px solid var(--border);color:var(--text);
  padding:7px 10px;border-radius:8px;}

.lib-layout{display:flex;flex:1;min-height:0;}
.sidebar{
  width:280px;flex-shrink:0;border-right:1px solid var(--border);background:var(--bg-elev);
  padding:20px 14px;overflow-y:auto;
}
.sidebar-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);
  padding:0 10px 10px;}
.ecole-block{margin-bottom:6px;}
.ecole-head{
  display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--radius-sm);
  cursor:pointer;font-size:13.5px;font-weight:600;transition:background .15s;
}
.ecole-head:hover{background:var(--bg-elev-2);}
.ecole-head .chev{color:var(--text-muted);font-size:11px;transition:transform .15s;flex-shrink:0;}
.ecole-head.open .chev{transform:rotate(90deg);}
.ecole-head .clearance-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex-shrink:0;}
.formation-list{padding-left:26px;overflow:hidden;}
.formation-item{
  padding:8px 10px;font-size:13px;color:var(--text-muted);border-radius:var(--radius-sm);
  cursor:pointer;transition:all .15s;
}
.formation-item:hover{background:var(--bg-elev-2);color:var(--text);}
.formation-item.active{background:var(--gold-soft);color:var(--gold);font-weight:600;}
.empty-sidebar{padding:20px 10px;font-size:13px;color:var(--text-muted);line-height:1.6;}

.main-content{flex:1;overflow-y:auto;padding:28px 32px;min-width:0;}
.breadcrumb{font-size:12px;color:var(--text-muted);margin-bottom:18px;letter-spacing:.02em;}
.breadcrumb .sep{margin:0 6px;opacity:.5;}
.content-title{font-size:22px;font-weight:600;margin:0 0 22px;}

.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
.file-card{
  background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;cursor:pointer;transition:border-color .15s, transform .1s;
}
.file-card:hover{border-color:var(--gold);transform:translateY(-1px);}
.file-card .icon{font-size:20px;margin-bottom:10px;display:block;}
.file-card .name{font-size:13.5px;font-weight:500;word-break:break-word;line-height:1.4;}
.file-card .meta{font-size:11px;color:var(--text-muted);margin-top:6px;}
.folder-card .icon{color:var(--gold);}

.player-wrap{max-width:900px;}
.player-wrap video{width:100%;border-radius:var(--radius);background:#000;border:1px solid var(--border);}
.player-title{font-size:18px;font-weight:600;margin:16px 0 4px;}
.player-actions{display:flex;gap:10px;margin-top:14px;}
.player-actions .btn{width:auto;padding:9px 18px;}

.welcome-block{max-width:520px;}
.welcome-block h2{font-size:24px;margin-bottom:10px;}
.welcome-block p{color:var(--text-muted);font-size:14px;line-height:1.7;}

.admin-layout{padding:28px 32px;max-width:1100px;}
.admin-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:start;}
.panel{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:22px;}
.panel h2{font-size:15px;margin:0 0 16px;font-weight:600;}
.panel h2 .count{color:var(--text-muted);font-weight:400;font-size:13px;}

.user-row{
  display:flex;align-items:center;justify-content:space-between;padding:11px 12px;
  border-radius:var(--radius-sm);border:1px solid var(--border);margin-bottom:8px;
}
.user-row:hover{border-color:var(--border-strong);}
.user-row .u-name{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px;}
.user-row .u-perms{font-size:11px;color:var(--text-muted);margin-top:3px;}
.clearance-badge{
  font-size:10px;padding:3px 8px;border-radius:12px;border:1px solid var(--gold);color:var(--gold);
  letter-spacing:.04em;text-transform:uppercase;
}
.clearance-badge.user{border-color:var(--border-strong);color:var(--text-muted);}
.perm-chip{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;background:var(--bg-elev-2);
  border:1px solid var(--border);padding:3px 8px;border-radius:10px;margin:3px 4px 0 0;
}
.perm-chip button{background:none;border:none;color:var(--text-muted);font-size:12px;padding:0;line-height:1;}
.perm-chip button:hover{color:#e39a9a;}

.form-row{margin-bottom:12px;}
.form-row label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:5px;}
.form-row input,.form-row select{
  width:100%;padding:9px 11px;background:var(--bg-elev-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);font-size:13.5px;outline:none;
}
.form-row input:focus,.form-row select:focus{border-color:var(--gold);}
hr.divider{border:none;border-top:1px solid var(--border);margin:18px 0;}

.toast{
  position:fixed;bottom:22px;right:22px;background:var(--bg-elev-2);border:1px solid var(--border-strong);
  padding:12px 16px;border-radius:var(--radius-sm);font-size:13px;z-index:100;max-width:320px;
}
.toast.err{border-color:rgba(217,120,120,.4);color:#e39a9a;}

.pw-field{position:relative;}
.pw-field input{padding-right:68px;}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;
  color:var(--text-muted);font-size:11px;padding:5px 8px;cursor:pointer;letter-spacing:.02em;
}
.pw-toggle:hover{color:var(--gold);}

.modal-overlay{
  position:fixed;inset:0;background:rgba(4,5,8,.72);display:flex;align-items:center;
  justify-content:center;z-index:60;padding:20px;
}
.modal-card{
  width:100%;max-width:360px;background:var(--bg-elev);border:1px solid var(--border);
  border-radius:var(--radius);padding:26px;position:relative;
}
.modal-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--red),var(--gold));
}
.modal-card h3{margin:0 0 16px;font-size:16px;font-weight:600;}

.reset-form{
  margin-top:8px;padding:12px;background:var(--bg-elev-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);display:none;
}
.reset-form.open{display:block;}
.btn-small{width:auto;padding:6px 12px;font-size:12px;flex-shrink:0;}

@media (max-width: 860px){ .admin-grid{grid-template-columns:1fr;} }
@media (max-width: 768px){
  .nav{padding:12px 16px;}
  .nav-tabs{display:none;position:absolute;top:56px;left:0;right:0;background:var(--bg-elev);
    flex-direction:column;gap:2px;padding:10px;border-bottom:1px solid var(--border);}
  .nav-tabs.mobile-open{display:flex;}
  .nav-tabs button{width:100%;text-align:left;border-radius:8px;}
  .menu-toggle{display:block;}
  .lib-layout{position:relative;}
  .sidebar{
    position:fixed;top:57px;bottom:0;left:0;z-index:15;transform:translateX(-100%);
    transition:transform .2s;width:78%;max-width:300px;
  }
  .sidebar.mobile-open{transform:translateX(0);box-shadow:8px 0 24px rgba(0,0,0,.4);}
  .main-content{padding:20px 16px;}
  .admin-layout{padding:20px 16px;}
  .file-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
  .login-card{padding:28px 22px;}
}