:root{
  --wl-ink:#f6f2e8;
  --wl-muted:#aeb9aa;
  --wl-bg:#0b120e;
  --wl-bg-2:#121c15;
  --wl-panel:#172219;
  --wl-panel-2:#203024;
  --wl-line:rgba(246,242,232,0.12);
  --wl-moss:#7fb069;
  --wl-moss-2:#4f7d42;
  --wl-river:#4d8ba8;
  --wl-clay:#b57945;
  --wl-danger:#b55343;
  --wl-warning:#c79a45;
  --wl-shadow:0 18px 55px rgba(0,0,0,0.28);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  min-height:100%;
  background:
    radial-gradient(circle at top left, rgba(127,176,105,0.18), transparent 36rem),
    linear-gradient(135deg, #0b120e 0%, #111b14 52%, #1b2018 100%);
}

body{
  min-height:100vh;
  color:var(--wl-ink) !important;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing:0;
  background:
    linear-gradient(rgba(11,18,14,0.78), rgba(11,18,14,0.88)),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 18px) !important;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.045), transparent 18rem);
  z-index:-1;
}

.admin-locked > *{
  display:none !important;
}

button,
input,
textarea,
select{
  font:inherit;
}

button{
  cursor:pointer;
}

h1,h2,h3{
  line-height:1.1;
  letter-spacing:0;
}

h1{
  font-size:clamp(28px, 4vw, 42px);
}

h2{
  font-size:clamp(22px, 3vw, 30px);
}

.wrapper{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width:260px;
  padding:30px 20px;
}

.main{
  flex:1;
  overflow-y:auto;
  padding:35px;
}

.section{
  display:none;
}

.section.active{
  display:block;
}

.page,
.container,
.wrapper{
  position:relative;
}

.page{
  max-width:1400px;
  margin:auto;
  padding:40px;
}

.container{
  max-width:1200px;
  margin:auto;
  padding:40px 20px;
}

header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:24px 40px;
  border-bottom:1px solid var(--wl-line);
}

.login-screen{
  align-items:center;
  display:flex;
  height:100vh;
  justify-content:center;
  padding:22px;
}

.login-card{
  max-width:420px;
  padding:40px;
  width:100%;
}

.hidden{
  display:none !important;
}

.sidebar,
header,
.card,
.login-card,
.user-card,
.account,
.post-card,
.stat-card{
  background:linear-gradient(180deg, rgba(28,42,31,0.98), rgba(18,28,21,0.98)) !important;
  border:1px solid var(--wl-line) !important;
  box-shadow:var(--wl-shadow);
}

.card,
.login-card,
.user-card,
.account,
.post-card,
.stat-card{
  border-radius:8px !important;
}

.sidebar{
  border-right:1px solid var(--wl-line) !important;
  box-shadow:12px 0 40px rgba(0,0,0,0.22);
}

.logo{
  font-weight:800;
  margin-bottom:40px;
}

.logo,
.card-value,
.stat-value,
.status,
.status-success{
  color:var(--wl-moss) !important;
}

.logo{
  font-size:24px !important;
  letter-spacing:0.08em;
}

.logo::after{
  content:"OUTDOORS";
  display:block;
  margin-top:6px;
  color:var(--wl-muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.22em;
}

.nav-btn{
  display:block;
  margin-bottom:12px;
  padding:16px;
  text-align:left;
  width:100%;
}

.nav-btn,
.back-btn,
.save-btn,
.action-btn,
.login-btn,
.btn,
.send-btn,
button{
  border-radius:8px !important;
  font-family:inherit !important;
  transition:background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.back-btn,
.save-btn,
.action-btn,
.login-btn,
.btn,
.send-btn,
button{
  border:0;
  padding:12px 16px;
}

.login-btn,
.send-btn{
  width:100%;
}

.nav-btn,
.back-btn{
  background:rgba(246,242,232,0.06) !important;
  border:1px solid transparent !important;
  color:var(--wl-ink) !important;
}

.nav-btn:hover,
.back-btn:hover,
.user-card:hover,
.outing-row:hover{
  background:rgba(127,176,105,0.12) !important;
  border-color:rgba(127,176,105,0.28) !important;
}

.login-btn,
.save-btn,
.admin-btn,
.send-btn,
.btn,
button:not(.nav-btn):not(.back-btn):not(.delete-btn):not(.btn-delete){
  background:linear-gradient(180deg, var(--wl-moss), var(--wl-moss-2)) !important;
  color:#07100a !important;
  font-weight:800 !important;
}

.mod-btn{
  background:linear-gradient(180deg, var(--wl-river), #35677f) !important;
  color:white !important;
}

.suspend-btn{
  background:linear-gradient(180deg, var(--wl-warning), #8b6730) !important;
  color:#171105 !important;
}

.ban-btn,
.delete-btn,
.btn-delete,
.logout-btn{
  background:linear-gradient(180deg, var(--wl-danger), #81382f) !important;
  color:white !important;
}

.stats-grid,
.stat-grid{
  display:grid;
  gap:18px;
}

.stats-grid{
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom:30px;
}

.stat-grid{
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}

.card{
  margin-bottom:25px;
  padding:25px;
}

.card-title{
  margin-bottom:10px;
}

.page-title,
.block-title{
  margin-bottom:25px;
}

.block-title{
  margin-bottom:30px;
}

.card-value{
  font-size:42px;
  font-weight:800;
}

.stat-card{
  padding:18px;
}

.stat-value{
  font-size:28px;
  font-weight:800;
  margin-top:10px;
}

input,
textarea,
select,
.input,
.textarea,
.select{
  background:rgba(246,242,232,0.07) !important;
  border:1px solid rgba(246,242,232,0.12) !important;
  border-radius:8px !important;
  color:var(--wl-ink) !important;
  font-family:inherit !important;
}

input,
textarea,
select,
.input,
.textarea,
.select{
  display:block;
  padding:15px 16px;
  width:100%;
}

textarea,
.textarea{
  min-height:160px;
  resize:vertical;
}

.compact-textarea{
  min-height:120px;
}

input:disabled,
textarea:disabled{
  opacity:0.7;
}

input::placeholder,
textarea::placeholder{
  color:rgba(246,242,232,0.45);
}

input:focus,
textarea:focus,
select:focus,
.input:focus,
.textarea:focus,
.select:focus{
  outline:2px solid rgba(127,176,105,0.72) !important;
  outline-offset:2px;
}

.small,
.card-title,
.label,
label,
.subtitle,
.meta,
.post-content p,
.email{
  color:var(--wl-muted) !important;
}

.role{
  background:rgba(127,176,105,0.18) !important;
  border:1px solid rgba(127,176,105,0.34);
  color:#d9f5cc !important;
}

.users-top,
.topbar,
.panel-top{
  align-items:center;
  display:flex;
  justify-content:space-between;
}

.panel-top{
  margin-bottom:25px;
}

.button-row{
  display:flex;
  gap:10px;
}

.scroll-x{
  overflow-x:auto;
}

.grid{
  display:grid;
  gap:25px;
  grid-template-columns:350px 1fr;
}

.actions,
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.filters{
  margin-bottom:20px;
}

.user-card,
.account{
  margin-top:15px;
  padding:20px;
}

.user-top{
  align-items:center;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
}

.role{
  border-radius:999px !important;
  font-size:12px;
  font-weight:800;
  padding:7px 12px;
}

.small{
  font-size:14px;
  margin-top:8px;
}

.section-title{
  font-size:24px;
  font-weight:800;
  margin-bottom:24px;
}

.info-row,
.form-group{
  margin-bottom:24px;
}

.label,
label{
  display:block;
  font-weight:700;
  margin-bottom:10px;
}

.profile-image{
  display:block;
  height:140px;
  margin:0 auto 20px;
  object-fit:cover;
  width:140px;
}

.username{
  font-size:30px;
  font-weight:800;
  margin-bottom:8px;
  text-align:center;
}

.email{
  margin-bottom:20px;
  text-align:center;
}

.table-cell{
  border-bottom:1px solid var(--wl-line) !important;
  padding:16px;
  text-align:left;
}

thead tr{
  background:rgba(127,176,105,0.1) !important;
}

table{
  border-collapse:collapse;
  width:100%;
}

.row{
  display:grid;
  gap:20px;
  grid-template-columns:1fr 1fr;
}

.profile-image,
.preview,
.image-preview,
.post-card img{
  border-radius:8px !important;
  border:1px solid var(--wl-line);
}

.image-preview,
.preview{
  display:none;
  margin-top:20px;
  max-height:600px;
  object-fit:cover;
  width:100%;
}

.posts-grid{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}

.post-card{
  overflow:hidden;
}

.post-card img{
  height:220px;
  object-fit:cover;
  width:100%;
}

.post-content{
  padding:24px;
}

.post-content h3{
  font-size:24px;
  margin-bottom:12px;
}

.post-content p,
.meta{
  margin-bottom:16px;
}

.title{
  font-size:clamp(30px, 5vw, 42px);
  font-weight:800;
  margin-bottom:10px;
}

.subtitle{
  line-height:1.7;
  margin-bottom:36px;
}

.status{
  font-weight:800;
  margin-top:20px;
}

.loading{
  opacity:0.7;
  pointer-events:none;
}

.topbar,
header{
  gap:16px;
}

.topbar{
  margin-bottom:24px;
}

.topbar-narrow{
  margin:0 auto 24px;
  max-width:900px;
}

.topbar button,
header .back-btn{
  width:auto !important;
}

.status-error,
.error{
  color:#ffad9f !important;
}

@media(max-width:800px){
  .wrapper{
    flex-direction:column;
  }

  .sidebar{
    width:100% !important;
    padding:20px !important;
  }

  .main,
  .page,
  .container{
    padding:22px !important;
  }

  .users-top,
  .topbar{
    align-items:flex-start !important;
    flex-direction:column;
  }

  header{
    align-items:flex-start;
    flex-direction:column;
    padding:20px;
  }

  .grid,
  .row{
    grid-template-columns:1fr;
  }
}