:root{
  --bg0:#0a0a0a;
  --bg1:#0f0a0a;

  --card:rgba(255,255,255,.035);
  --card2:rgba(255,255,255,.06);

  --stroke:rgba(139,0,0,.30);
  --stroke-strong:rgba(139,0,0,.50);

  --text:#e0e0e0;
  --muted:rgba(224,224,224,.55);

  --shadow:0 30px 80px rgba(0,0,0,.75);

  --accent:#8b0000;
  --accent-bright:#cc2222;
  --accent-glow:rgba(139, 0, 0, 0.5);
  --accent-glow-strong:rgba(139, 0, 0, 0.8);
}

/* ================= BASE ================= */

*{
  box-sizing:border-box;
  border-radius:0 !important;
}

html,body{height:100%}

body{
  margin:0;
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#0a0a0a;
  overflow:hidden;
}

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:64px;
  padding:12px 20px;
  z-index:5;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  pointer-events:none;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  pointer-events:auto;
}

.top-login-code{
  display:flex;
  align-items:center;
  gap:8px;
}

#topLoginCode{
  width:220px;
  height:34px;
  padding:0 10px;
  background:rgba(10,5,5,.8);
  border:1px solid var(--stroke);
  color:var(--accent-bright);
  font-weight:700;
  letter-spacing:0.16em;
  text-align:center;
  font-family:'Manrope', monospace;
}

.app-shell{
  position:fixed;
  inset:0;
  z-index:2;
}

.side-nav{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  z-index:30;
  width:220px;
  min-width:220px;
  height:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 10px;
  border-left:none;
  border-top:none;
  border-bottom:none;
  transition:width 0.2s ease, min-width 0.2s ease;
}

.side-link{
  position:relative;
  z-index:31;
  pointer-events:auto;
  border:1px solid var(--stroke);
  background:rgba(12, 6, 6, 0.85);
  color:var(--muted);
  letter-spacing:0.18em;
  text-align:left;
  padding:0 14px;
  height:44px;
  cursor:pointer;
  font-weight:700;
  transition:border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  overflow:hidden;
}

.side-icon{
  width:28px;
  min-width:28px;
  text-align:center;
  color:var(--accent-bright);
  font-weight:800;
  font-size:1.4rem;
}

.side-icon svg{
  display:block;
  margin:0 auto;
}

.side-label{
  display:inline-block;
  white-space:nowrap;
  overflow:hidden;
}

.nav-toggle{
  border:1px solid var(--stroke);
  background:rgba(12, 6, 6, 0.9);
  color:var(--text);
  padding:10px 12px;
  cursor:pointer;
  font-weight:800;
  letter-spacing:0.1em;
  text-align:center;
  transition:all 0.2s ease;
  box-shadow:0 0 0 rgba(0,0,0,0);
}

.nav-toggle:hover{
  border-color:var(--accent-bright);
  color:var(--accent-bright);
  background:rgba(139,0,0,0.16);
  box-shadow:0 0 18px rgba(139,0,0,0.25);
}

.side-link:hover{
  border-color:var(--accent-bright);
  color:var(--text);
}

.side-link.is-active{
  background:linear-gradient(135deg, rgba(139,0,0,0.35), rgba(40, 8, 8, 0.85));
  border-color:var(--accent-bright);
  color:var(--text);
  box-shadow:0 0 26px rgba(139,0,0,0.24);
}

.content-area{
  position:absolute;
  inset:0;
  z-index:1;
  padding-top:64px;
}

.view{
  display:none;
  width:100%;
  height:100%;
}

.view.is-active{
  display:block;
}

.side-nav.is-collapsed,
body.nav-collapsed .side-nav{
  width:64px;
  min-width:64px;
}

.side-nav.is-collapsed .side-link,
body.nav-collapsed .side-link{
  width:44px;
  height:44px;
  padding:0 8px;
  letter-spacing:0;
}

.side-nav.is-collapsed .side-link .side-label,
body.nav-collapsed .side-link .side-label{
  display:inline-block;
  max-width:0;
  opacity:0;
  margin-left:0;
  overflow:hidden;
}

@media (min-width: 769px){
  .nav-toggle{
    display:none;
  }

  .side-nav{
    width:64px;
    min-width:64px;
    overflow:hidden;
  }

  .side-nav .side-link{
    width:100%;
    height:44px;
    padding:0 8px;
    letter-spacing:0;
  }

  .side-nav .side-label{
    max-width:0;
    opacity:0;
    margin-left:0;
    transition:max-width 0.2s ease, opacity 0.15s ease, margin-left 0.2s ease;
  }

  .side-nav:hover,
  .side-nav:focus-within,
  body.nav-collapsed .side-nav:hover,
  body.nav-collapsed .side-nav:focus-within{
    width:220px;
    min-width:220px;
  }

  .side-nav:hover .side-link,
  .side-nav:focus-within .side-link{
    width:100%;
    height:44px;
    padding:0 8px;
    letter-spacing:0.18em;
  }

  .side-nav:hover .side-label,
  .side-nav:focus-within .side-label,
  body.nav-collapsed .side-nav:hover .side-label,
  body.nav-collapsed .side-nav:focus-within .side-label{
    display:inline-block;
    max-width:160px;
    opacity:1;
    margin-left:2px;
  }
}

/* ================= SCANLINES ================= */

.scanlines{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.1) 0px,
    rgba(0,0,0,0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  opacity:0.3;
  z-index:1;
  animation: scanline-move 8s linear infinite;
}

@keyframes scanline-move{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(10px); }
}

/* ================= BACKGROUND GLOW ================= */

.bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:#0a0a0a;
  z-index:0;
}

/* ================= HERO SECTION ================= */

.hero{
  min-height:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2rem 1rem;
  position:relative;
  z-index:2;
}

.hero-content{
  max-width:800px;
  margin:0 auto;
}

/* Hero Title */
.hero-title{
  font-size:4.5rem;
  font-weight:1000;
  letter-spacing:0.25em;
  margin-bottom:1.5rem;
  color:var(--accent);
  text-transform:uppercase;
  text-shadow: 0 0 40px var(--accent-glow), 0 0 80px var(--accent-glow);
  animation: title-glow 4s ease-in-out infinite;
  display:inline-block;
}

.hero-title .ch{
  display:inline-block;
  transition:color 0.1s ease;
}

.hero-title .ch.flicker{
  animation: ch-flicker 0.1s ease-in-out infinite;
  color:var(--accent-bright);
}

@keyframes ch-flicker{
  0%, 100%{ opacity:1; text-shadow:0 0 20px var(--accent-glow); }
  50%{ opacity:0.7; text-shadow:0 0 40px var(--accent-glow-strong); }
}

@keyframes title-glow{
  0%, 100%{ 
    text-shadow: 0 0 15px var(--accent-glow);
    color: var(--accent);
  }
  50%{ 
    text-shadow: 0 0 25px var(--accent-glow-strong);
    color: var(--accent-bright);
  }
}

/* Hero Tagline */
.hero-tagline{
  font-size:1rem;
  font-weight:700;
  letter-spacing:0.35em;
  color:var(--muted);
  margin-bottom:1.25rem;
  text-transform:uppercase;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0.5em;
  flex-wrap:nowrap;
}

/* TDC Expand Effect */
.tdc-expand{
  color:#ffffff;
  font-weight:800;
  cursor:pointer;
  position:relative;
  display:inline-block;
  width:3.6ch;
  height:1.15em;
  overflow:hidden;
  vertical-align:-0.08em;
  transition:width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  text-shadow:0 0 10px rgba(255,255,255,0.3);
  white-space:nowrap;
  letter-spacing:0;
}

.tdc-expand .tdc-track{
  display:flex;
  flex-direction:column;
  transform:translateY(0);
  transition:transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.tdc-expand .short,
.tdc-expand .full{
  display:inline-block;
  white-space:nowrap;
  line-height:1.15em;
}

.tdc-expand .short{
  letter-spacing:0.08em;
}

.tdc-expand .full{
  display:inline-block;
  letter-spacing:0.02em;
  text-transform:none;
}

/* T, D, C letters in red */
.tdc-expand .full .tc{
  color:#cc2222 !important;
  text-shadow:0 0 8px rgba(204,34,34,0.6), 0 0 15px rgba(139,0,0,0.4);
}

/* Expand container width on hover/focus to fit full text */
.tdc-expand:hover,
.tdc-expand.is-expanded{
  width:14.2ch;
}

.tdc-expand:focus-visible{
  width:14.2ch;
}

.tdc-expand:hover .tdc-track,
.tdc-expand.is-expanded .tdc-track{
  transform:translateY(-1.15em);
}

.tdc-expand:focus-visible .tdc-track{
  transform:translateY(-1.15em);
}

/* Hero Description */
.hero-description{
  font-size:1.1rem;
  color:rgba(224,224,224,.85);
  margin-bottom:2.5rem;
  font-weight:300;
}

.hero-description .highlight{
  color:var(--accent-bright);
  font-weight:700;
  text-shadow: 0 0 20px rgba(139,0,0,0.5);
  position:relative;
  display:inline-block;
}

.hero-description .highlight::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent-bright), transparent);
  animation: underline-pulse 3s ease-in-out infinite;
}

@keyframes underline-pulse{
  0%, 100%{ opacity:0.4; width:80%; left:10%; }
  50%{ opacity:1; width:100%; left:0; }
}

/* Typing Text Effect */
.typing-text{
  color:var(--accent-bright);
  font-weight:600;
  position:relative;
  display:inline-block;
  min-width:200px;
}

.typing-text::after{
  content:'|';
  position:absolute;
  right:-10px;
  color:var(--accent-bright);
  animation: blink 0.7s step-end infinite;
}

.typing-text.typing::after{
  animation: blink 0.7s step-end infinite;
}

.typing-text:not(.typing)::after{
  content:'';
}

@keyframes blink{
  0%, 100%{ opacity:1; }
  50%{ opacity:0; }
}

/* Hero Stats */
.hero-stats{
  display:flex;
  justify-content:center;
  gap:4rem;
  margin-bottom:3rem;
  flex-wrap:wrap;
}

.stat-item{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.stat-number{
  font-size:3rem;
  font-weight:800;
  color:var(--text);
  line-height:1;
  letter-spacing:0.05em;
  text-shadow: 0 0 20px rgba(139,0,0,0.3);
}

.stat-label{
  font-size:0.75rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.2em;
  margin-top:0.5rem;
}

/* Hero Buttons */
.hero-buttons{
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1.5rem;
}

.btn{
  appearance:none;
  border:1px solid var(--stroke);
  padding:1rem 2.5rem;
  cursor:pointer;
  font-weight:700;
  letter-spacing:0.15em;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  transition:all 0.3s ease;
  text-transform:uppercase;
  font-size:0.85rem;
  position:relative;
  overflow:hidden;
}

.btn::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(139,0,0,0.3), transparent);
  transition: left 0.5s ease;
}

.btn:hover::before{
  left:100%;
}

.btn:active{transform:translateY(2px)}
.btn[disabled]{opacity:.4;cursor:not-allowed}

.btn.ghost{
  background:rgba(139,0,0,0.12);
  color:var(--text);
}

.btn.small{
  padding:0.55rem 1rem;
  font-size:0.72rem;
}

.btn-primary{
  color:var(--text);
  background:linear-gradient(135deg, var(--accent), #5a0000);
  border-color:var(--accent-bright);
  box-shadow:0 0 30px rgba(139,0,0,0.4), inset 0 0 20px rgba(139,0,0,0.2);
}

.btn-primary:hover{
  background:linear-gradient(135deg, var(--accent-bright), var(--accent));
  box-shadow:0 0 50px rgba(139,0,0,0.6), inset 0 0 30px rgba(139,0,0,0.3);
  border-color:var(--accent-bright);
}

.btn.secondary{
  color:var(--text);
  background:transparent;
  border:1px solid var(--stroke-strong);
}

.btn.secondary:hover{
  background:rgba(139,0,0,0.1);
  border-color:var(--accent-bright);
  box-shadow:0 0 20px rgba(139,0,0,0.3);
}

/* ================= ANIMATIONS ================= */

.animate-fade-in{
  opacity:0;
  animation: fade-in 0.8s ease-out forwards;
}

@keyframes fade-in{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.delay-1{ animation-delay: 0.15s; }
.delay-2{ animation-delay: 0.3s; }
.delay-3{ animation-delay: 0.45s; }
.delay-4{ animation-delay: 0.6s; }

/* ================= CODEBOX ================= */

.codebox{
  margin-top:14px;
  padding:14px;
  background:linear-gradient(180deg, rgba(20,10,10,.9), rgba(10,5,5,.95));
  border:1px solid var(--stroke);
  box-shadow:0 0 40px rgba(139,0,0,0.2);
}

.code-title{
  font-weight:700;
  letter-spacing:0.1em;
  margin:0 0 10px 0;
  color:var(--text);
  text-transform:uppercase;
  font-size:0.85rem;
}

.code-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.code-input{
  flex:1;
  min-width:200px;
  padding:12px 12px;
  background:rgba(10,5,5,.8);
  border:1px solid var(--stroke);
  color:var(--accent-bright);
  font-weight:700;
  letter-spacing:0.3em;
  text-align:center;
  font-family:'Manrope', monospace;
}

.code-input:focus{
  outline:none;
  border-color:var(--accent-bright);
  box-shadow:0 0 20px rgba(139,0,0,0.3);
}

#copyBtn.btn.ghost{
  background:rgba(139,0,0,0.15);
  border-color:var(--stroke);
  color:var(--text);
}

#copyBtn.btn.ghost:hover{
  background:rgba(139,0,0,0.3);
  border-color:var(--accent-bright);
}

.code-help{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
}

#codeTimer{
  color:var(--accent-bright);
  font-weight:700;
}

/* ================= STATUS ================= */

.status{
  font-size:11px;
  letter-spacing:0.2em;
  color:var(--muted);
  padding:6px 12px;
  background:rgba(10,5,5,.6);
  border:1px solid var(--stroke);
  text-transform:uppercase;
  display:inline-block;
}

.profile-stub{
  max-width:640px;
  margin:80px auto 0;
  text-align:left;
  padding:24px;
}

.profile-stub h2{
  margin:0 0 14px 0;
  letter-spacing:0.16em;
  color:var(--accent-bright);
}

.profile-stub p{
  margin:0 0 10px 0;
  color:rgba(224,224,224,.8);
  line-height:1.5;
}

/* ================= PROFILE ================= */

.card{
  background:linear-gradient(180deg, rgba(20,10,10,.8), rgba(10,5,5,.9));
  border:1px solid var(--stroke);
  box-shadow:0 0 40px rgba(139,0,0,0.15);
  padding:14px;
}

.profile{
  display:flex;
  align-items:center;
  gap:14px;
  max-width:400px;
  margin:20px auto 0;
}

.avatar{
  width:190px;
  height:190px;
  display:grid;
  place-items:center;
  font-weight:900;
  background:rgba(139,0,0,0.2);
  border:1px solid var(--stroke);
  color:var(--accent-bright);
  position:relative;
  overflow:hidden;
}

.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.pname{
  font-weight:700;
  letter-spacing:0.05em;
  color:var(--text);
}

.pmeta{
  color:var(--muted);
  font-size:12px;
  margin-top:2px;
}

.admin-hidden-toggle{
  cursor:pointer;
  user-select:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border:1px solid var(--stroke);
  background:rgba(10,5,5,.45);
  border-radius:8px;
}

.admin-hidden-toggle:hover{
  color:var(--text);
  border-color:rgba(255,255,255,.2);
}

#adminShowHiddenChk{
  width:14px;
  height:14px;
  accent-color:#b84a4a;
  cursor:pointer;
  margin:0;
}

.profile-pass-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  user-select:none;
  cursor:pointer;
  width:fit-content;
  padding:4px 8px;
  border:1px solid var(--stroke);
  background:rgba(10,5,5,.45);
  border-radius:8px;
}

.pactions{
  margin-left:auto;
}

.profile-pass-form{
  margin-top:10px;
  display:grid;
  gap:6px;
  max-width:320px;
}

.profile-pass-form input{
  width:100%;
  height:34px;
  padding:0 10px;
  border:1px solid var(--stroke);
  background:rgba(10,5,5,.8);
  color:var(--text);
}

.profile-pass-toggle:hover{
  color:var(--text);
  border-color:rgba(255,255,255,.2);
}

.profile-pass-toggle input[type="checkbox"]{
  margin:0;
  width:14px;
  height:14px;
  accent-color:#b84a4a;
  cursor:pointer;
}

.profile-pass-msg{
  font-size:12px;
  line-height:1.25;
  letter-spacing:0.02em;
}

.profile-pass-title{
  margin-top:8px;
  font-weight:700;
  color:var(--accent-bright);
}

.profile-pass-disabled{
  margin-top:8px;
  padding:8px 10px;
  border:1px solid rgba(184,74,74,.55);
  background:rgba(120,20,20,.25);
  color:#ffd1d1;
  border-radius:8px;
}

.profile-pass-msg.is-error{
  color:#ff5f5f;
}

.profile-pass-msg.is-success{
  color:#7cf196;
}

.clan-apply-form{
  display:grid;
  gap:10px;
}

.clan-auth-notice{
  margin-bottom:10px;
  border:1px solid var(--stroke);
  background:rgba(10,5,5,.75);
  padding:10px;
  display:grid;
  gap:8px;
}

.clan-apply-form input,
.clan-apply-form textarea{
  width:100%;
  height:36px;
  border:1px solid var(--stroke);
  background:rgba(10,5,5,.8);
  color:var(--text);
  padding:10px;
}

.clan-apply-form textarea{
  height:auto;
  resize:vertical;
}

.clan-apply-error{
  color:#ff5f5f;
  font-size:12px;
  line-height:1.25;
  letter-spacing:0.02em;
}

.clan-apply-status{
  margin-top:10px;
  border:1px solid var(--stroke);
  background:rgba(10,5,5,.75);
  padding:10px;
  display:grid;
  gap:6px;
}

.clan-apply-form input[type="number"]::-webkit-outer-spin-button,
.clan-apply-form input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.clan-apply-form input[type="number"]{
  -moz-appearance:textfield;
  appearance:textfield;
}

.admin-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(240px, 320px);
  gap:14px;
  max-width:1660px;
  margin:70px auto 0;
}

.admin-panel{
  display:grid;
  grid-template-columns: minmax(260px, 340px) minmax(280px, 1fr) minmax(280px, 420px);
  gap:14px;
  max-width:none;
  margin:0;
}

.admin-panel.role-clan-only{
  grid-template-columns:minmax(320px, 900px);
  max-width:900px;
}

.admin-panel.role-none{
  grid-template-columns:1fr;
  max-width:760px;
}

.admin-left,
.admin-middle,
.admin-right,
.admin-applicants-panel{
  border:1px solid var(--stroke);
  background:rgba(12, 6, 6, 0.7);
  padding:12px;
}

.admin-left-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}

.admin-left h2,
.admin-middle h2,
.admin-right h2,
.admin-applicants-panel h2{
  margin:0;
  font-size:0.95rem;
  letter-spacing:0.14em;
  color:var(--accent-bright);
}

.admin-add{
  display:grid;
  gap:6px;
  margin-bottom:10px;
}

.admin-add input,
#adminEditor input{
  width:100%;
  height:34px;
  padding:0 10px;
  border:1px solid var(--stroke);
  background:rgba(10,5,5,.8);
  color:var(--text);
}

.admin-users-list{
  display:grid;
  gap:6px;
  max-height:420px;
  overflow:auto;
}

.admin-user-item{
  border:1px solid var(--stroke);
  background:rgba(10,5,5,.7);
  color:var(--text);
  text-align:left;
  padding:8px 10px;
  cursor:pointer;
  display:grid;
  gap:4px;
}

.admin-user-item strong{
  font-size:0.85rem;
}

.admin-user-item span{
  font-size:0.76rem;
  color:var(--muted);
}

.admin-user-item.is-active{
  border-color:var(--accent-bright);
  box-shadow:0 0 14px rgba(139,0,0,0.2);
}

#adminEditor{
  display:grid;
  gap:8px;
}

#adminEditor label{
  display:grid;
  gap:4px;
  font-size:0.8rem;
  color:var(--muted);
}

.admin-meta-block{
  border:1px solid var(--stroke);
  background:rgba(10,5,5,.55);
  padding:8px;
  display:grid;
  gap:6px;
}

.admin-meta-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.admin-meta-block pre{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:12px;
  color:var(--text);
}

.admin-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}

.admin-clan-apps{
  display:grid;
  gap:8px;
  margin-top:8px;
  max-height:520px;
  overflow:auto;
}

.admin-clan-item{
  border:1px solid var(--stroke);
  background:rgba(10,5,5,.65);
  padding:8px;
  display:grid;
  gap:6px;
}

.admin-clan-item .head{
  font-size:0.8rem;
  color:var(--muted);
}

.admin-clan-item textarea{
  width:100%;
  min-height:56px;
  border:1px solid var(--stroke);
  background:rgba(10,5,5,.8);
  color:var(--text);
  padding:8px;
}

.admin-flag-field{
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  text-decoration:underline dotted;
}

.admin-flag-field.is-flagged{
  color:#ff4d4d;
}

#adminApplicantsList{
  max-height:520px;
  overflow:auto;
}

#adminHiddenAppsList{
  max-height:420px;
  overflow:auto;
}

#botLogsText{
  margin:0;
  max-height:68vh;
  overflow:auto;
  white-space:pre;
  word-break:normal;
  overflow-wrap:normal;
}

/* ================= FOOTER ================= */

.foot{
  position:fixed;
  bottom:1rem;
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  gap:10px;
  color:rgba(224,224,224,.35);
  font-size:12px;
  letter-spacing:0.1em;
  z-index:2;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 768px){
  .topbar{
    height:56px;
    padding:8px 10px;
  }

  .app-shell{
    inset:0;
  }

  .side-nav{
    position:fixed;
    top:56px;
    left:0;
    right:0;
    bottom:auto;
    width:100%;
    min-width:0;
    flex-direction:row;
    padding:8px 10px;
    height:auto;
    z-index:30;
  }

  .side-link{
    flex:1;
    text-align:center;
    justify-content:center;
  }

  .nav-toggle{
    min-width:52px;
  }

  .side-nav.is-collapsed,
  body.nav-collapsed .side-nav{
    width:100%;
    min-width:0;
  }

  .side-nav.is-collapsed .side-link,
  body.nav-collapsed .side-link{
    width:auto;
    height:auto;
    padding:12px 10px;
    flex:1;
    justify-content:center;
  }

  .content-area{
    padding-top:114px;
  }

  .hero-title{
    font-size:2.5rem;
    letter-spacing:0.4em;
  }

  .hero-tagline{
    font-size:0.8rem;
    letter-spacing:0.2em;
  }

  .hero-description{
    font-size:0.95rem;
  }

  .hero-stats{
    gap:2rem;
  }

  .admin-panel{
    grid-template-columns:1fr;
    margin:0;
  }

  .admin-layout{
    grid-template-columns:1fr;
    margin:20px 10px 0;
  }

  .stat-number{
    font-size:2rem;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:center;
  }

  .btn{
    width:100%;
    max-width:280px;
    justify-content:center;
  }

  #profileCard{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    max-width:none !important;
    margin:20px 10px 0 !important;
  }

  #profileCard .avatar{
    width:120px;
    height:120px;
    margin:0 auto;
  }

  #profileCard .pactions{
    margin-left:0 !important;
  }
}