:root{
  /* Outdoorsy palette */
  --bg:#06100a;
  --panel:#0f1c14;
  --line:rgba(255,255,255,.10);
  --text:#f3f6f3;
  --muted:rgba(255,255,255,.72);

  /* Brand */
  --brand:#68d391; /* forest mint */
  --accent:#f6ad55; /* sunset orange */

  --good:#36d399;
  --bad:#ff5c7a;
  --warn:#f6d26b;
  --r:16px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 700px at 15% 10%, rgba(104,211,145,.18), transparent 58%),
              radial-gradient(900px 650px at 90% 20%, rgba(246,173,85,.12), transparent 58%),
              radial-gradient(900px 650px at 60% 95%, rgba(255,255,255,.05), transparent 55%),
              var(--bg);
  color:var(--text);
}

a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(6,16,10,.72);
  border-bottom:1px solid var(--line);
}
.topbar-inner{display:flex;gap:12px;align-items:center;justify-content:space-between}
.brand{font-weight:800;text-decoration:none;letter-spacing:.2px}
.nav{display:flex;gap:10px;align-items:center}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--text)}
.btn{
  background:linear-gradient(135deg, rgba(104,211,145,1), rgba(246,173,85,1));
  border:0;color:#081018;
  padding:10px 12px;border-radius:12px;
  font-weight:700;text-decoration:none;
  box-shadow: var(--shadow);
  cursor:pointer;
}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}
.btn.danger{background:linear-gradient(135deg, rgba(255,92,122,1), rgba(246,173,85,1));}
.linkbtn{background:transparent;border:0;color:var(--muted);cursor:pointer}
.linkbtn:hover{color:var(--text)}
.inline{display:inline}

.search{display:flex;gap:8px;align-items:center;flex:1;max-width:420px}
.search input{
  width:100%;
  padding:10px 12px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--text);
  outline:none;
}
.search button{
  padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  color:var(--text);
  cursor:pointer;
}

.panel{
  background: linear-gradient(180deg, rgba(19,24,39,.92), rgba(19,24,39,.75));
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding:16px;
  margin:14px 0;
}
.muted{color:var(--muted)}
.small{font-size:12px}
.chip{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  padding:6px 10px;border-radius:999px;
  color:var(--muted);
}
.flash{
  padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);
  margin:12px 0;
}
.flash.ok{border-color:rgba(54,211,153,.35);background:rgba(54,211,153,.10)}
.flash.bad{border-color:rgba(255,92,122,.35);background:rgba(255,92,122,.10)}
.row-between{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}

.hero h1{margin:8px 0 6px 0;font-size:34px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.tip{border-left:4px solid rgba(246,210,107,.75)}
.tip-title{font-weight:800;margin-bottom:6px}
code{font-family:var(--mono);font-size:12px;background:rgba(255,255,255,.06);padding:2px 6px;border-radius:8px;border:1px solid var(--line)}

.board-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px}
.board{
  display:block;
  text-decoration:none;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  position:relative;
}
.board:hover{background:rgba(255,255,255,.06)}
.board-title{font-weight:800;margin-bottom:4px}
.badge{
  position:absolute;top:10px;right:10px;
  font-size:12px;color:var(--warn);
  border:1px solid rgba(246,210,107,.35);
  background:rgba(246,210,107,.10);
  padding:3px 8px;border-radius:999px;
}

.topic-list{list-style:none;padding:0;margin:0}
.topic-item{
  display:flex;gap:12px;justify-content:space-between;align-items:flex-start;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.topic-item:last-child{border-bottom:0}
.topic-title{text-decoration:none;font-weight:800}
.topic-title:hover{text-decoration:underline}
.topic-meta{text-align:right;min-width:190px}
.tag{
  display:inline-block;
  font-size:12px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  margin-right:6px;
  color:var(--muted);
}
.tag.warn{color:var(--warn);border-color:rgba(246,210,107,.35);background:rgba(246,210,107,.10)}

.post{padding:12px 0;border-bottom:1px solid var(--line)}
.post:last-child{border-bottom:0}
.post-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.post-user{font-weight:900}
.post-body{line-height:1.6}

/* attachments (images / video links) */
.attach{margin-top:10px;display:flex;flex-wrap:wrap;gap:10px}
.attach-img{display:block}
.attach-img img{display:block;max-width:160px;height:auto;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.attach-link{padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);color:var(--muted)}
.attach-link a{color:var(--text)}

/* video embeds */
.video-embed{width:100%;max-width:720px;margin-top:10px}
.video-embed iframe{width:100%;aspect-ratio:16/9;border-radius:14px;border:1px solid var(--line);background:#000}
.video-embed-tiktok iframe{aspect-ratio:9/16;max-height:760px}
.video-embed-ig iframe{min-height:520px;background:#111}
.video-embed-fb iframe{background:#000}

label{display:block;margin:10px 0 6px 0;color:var(--muted);font-size:13px}
input, textarea, select{
  width:100%;
  padding:10px 12px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--text);
  outline:none;
}
textarea{resize:vertical}

.pager{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.page{
  text-decoration:none;
  padding:8px 10px;border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--muted);
}
.page.active{background:rgba(79,140,255,.20);border-color:rgba(79,140,255,.35);color:var(--text)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hr{border:0;border-top:1px solid var(--line);margin:14px 0}
.table{width:100%;border-collapse:collapse;margin-top:10px}
.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}
.list{margin:0;padding-left:18px}
.footer{padding-top:0}

/* =========================
   Homepage coop
   ========================= */
.coop-panel{ padding:14px; }
.collab-strip{
  margin-top:12px;
  display:flex;
  gap:12px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}
.collab-strip::-webkit-scrollbar{ height:10px; }
.collab-strip::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius:999px; }
.collab-card{
  flex: 0 0 auto;
  width: 320px;
  max-width: calc(100vw - 80px);
  border-radius: 16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.collab-card:hover{ filter: brightness(1.03); }
.collab-card img{
  display:block;
  width:100%;
  height: 110px;
  object-fit: cover;
}

@media (max-width: 860px){
  .board-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .topic-meta{min-width:150px}
  .grid2{grid-template-columns:1fr}
  .search{display:none}
}
@media (max-width: 520px){
  .board-grid{grid-template-columns:1fr}
  .wrap{padding:12px}
  .hero h1{font-size:28px}
  .collab-card img{ height: 100px; }
}


/* =========================
   Admin tables: allow horizontal scroll (desktop + mobile)
   Prevent action buttons from being squashed
   ========================= */
.panel{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.panel .table{ width:max-content; min-width:980px; table-layout:auto; }
.panel .table th, .panel .table td{ white-space:nowrap; }
.panel .table td:nth-child(2){ white-space:normal; min-width:320px; max-width:520px; }
.panel .btn, .panel .btn.small, .panel select{ white-space:nowrap; }


/* =========================
   Mobile drawer menu
   - CSS only (checkbox)
   ========================= */
.nav-toggle{ display:none; }

.nav-burger{
  display:none;
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
}
.nav-burger span{
  display:block;
  width:18px;height:2px;
  background:rgba(255,255,255,.85);
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}

.nav-backdrop{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  z-index:60;
}

@media (max-width: 520px){
  /* topbar layout */
  .topbar-inner{ gap:10px; }
  .brand{
    white-space:nowrap;
    max-width:62%;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* show burger */
  .nav-burger{ display:flex; }

  /* drawer nav */
  .nav.nav-drawer{
    position:fixed;
    top:70px; right:12px;
    width:min(320px, calc(100vw - 24px));
    max-height: calc(100vh - 90px);
    overflow:auto;

    display:flex;
    flex-direction:column;
    gap:10px;

    padding:14px;
    border-radius:18px;
    border:1px solid var(--line);
    background: rgba(19,24,39,.92);
    box-shadow: var(--shadow);
    z-index:70;

    transform: translateY(-8px) scale(.98);
    opacity:0;
    pointer-events:none;
    transition: all .18s ease;
  }

  .nav.nav-drawer a,
  .nav.nav-drawer .linkbtn{
    display:flex;
    align-items:center;
    justify-content:center;
    height:42px;
    border-radius:14px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.05);
    text-decoration:none;
    color:var(--text);
    white-space:nowrap;
  }
  .nav.nav-drawer .chip{
    display:flex;
    align-items:center;
    justify-content:center;
    height:42px;
    border-radius:14px;
  }

  #navToggle:checked ~ .nav.nav-drawer{
    opacity:1;
    pointer-events:auto;
    transform: translateY(0) scale(1);
  }
  #navToggle:checked ~ .nav-backdrop{ display:block; }

  /* burger animation */
  #navToggle:checked + .nav-burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  #navToggle:checked + .nav-burger span:nth-child(2){ opacity:0; }
  #navToggle:checked + .nav-burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

/* =========================
   Drawer menu - FORCE unified size
   ========================= */
@media (max-width: 520px){

  .nav.nav-drawer{
    align-items: stretch;
  }

  /* Force unified drawer item size */
  .nav.nav-drawer > a,
  .nav.nav-drawer > form > .linkbtn,
  .nav.nav-drawer > .chip{

    width: 100%;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;
    box-sizing: border-box;
  }

  /* Normal button style */
  .nav.nav-drawer > a,
  .nav.nav-drawer > form > .linkbtn{
    background: rgba(255,255,255,.06);
    border: 1px solid var(--line);
    color: var(--text);
    text-decoration: none;
  }

  /* Current user chip size */
  .nav.nav-drawer > .chip{
    background: rgba(255,255,255,.08);
    border: 1px solid var(--line);
    color: var(--text);
  }

}

/* Admin dashboard should be full width like topics/users */
.admin-stack{
  display:block;
}
.admin-stack > .panel{
  width:100%;
}

/* ===================== UI ENHANCEMENTS v1.2.9 (Dynamic) ===================== */

/* Subtle animated blobs background */
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(550px 380px at 15% 25%, rgba(79,140,255,.18), transparent 60%),
    radial-gradient(520px 360px at 85% 20%, rgba(54,211,153,.14), transparent 60%),
    radial-gradient(520px 420px at 75% 85%, rgba(246,210,107,.10), transparent 60%);
  filter: blur(0px);
  transform: translate3d(0,0,0);
  animation: bgFloat 18s ease-in-out infinite;
  opacity:.9;
}
@keyframes bgFloat{
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  50%  { transform: translate3d(2%, 1%, 0) scale(1.03); }
  100% { transform: translate3d(-2%, -1%, 0) scale(1); }
}

/* Smooth transitions */
.btn, .panel, .board, .topic, .chip, .nav a, .nav-burger, .search input, .search button{
  transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

/* Lift on hover */
.panel:hover{ box-shadow: 0 22px 70px rgba(0,0,0,.55); transform: translateY(-1px); }
.board:hover, .topic:hover{ transform: translateY(-2px); }
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px) scale(.99); }

/* Better focus ring for keyboard users */
:focus{ outline: none; }
:focus-visible{
  box-shadow: 0 0 0 3px rgba(79,140,255,.35), 0 0 0 1px rgba(255,255,255,.12) inset;
  border-radius: 12px;
}

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(10px); }
.reveal.is-visible{ opacity:1; transform: translateY(0); transition: opacity .55s ease, transform .55s ease; }
html.page-ready .reveal.is-visible{ will-change: transform, opacity; }

/* Mobile nav drawer - nicer slide-in */
@media (max-width: 520px){
  .nav.nav-drawer{
    transform: translateY(-8px) translateX(8px);
    opacity:0;
    pointer-events:none;
    transition: transform .22s ease, opacity .22s ease;
  }
  #navToggle:checked ~ .nav.nav-drawer{
    transform: translateY(0) translateX(0);
    opacity:1;
    pointer-events:auto;
  }
  /* Burger morph */
  #navToggle:checked + .nav-burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  #navToggle:checked + .nav-burger span:nth-child(2){ opacity:0; }
  #navToggle:checked + .nav-burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

/* Scroll-to-top button */
.toTop{
  position: fixed;
  right: 16px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.08);
  color: var(--text);
  display: grid;
  place-items: center;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  z-index: 90;
}
.toTop.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.toTop:hover{ filter: brightness(1.1); transform: translateY(-1px); }
.toTop:active{ transform: translateY(0) scale(.99); }

/* Reduce motion support */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  body::before{ animation: none !important; }
  .reveal, .reveal.is-visible{ opacity:1 !important; transform:none !important; transition:none !important; }
  .btn, .panel, .board, .topic, .chip, .nav a, .nav-burger, .search input, .search button{
    transition:none !important;
  }
}