:root{
  --teal-600:#2EC4B6;
  --teal-200:#BFF3EC;
  --bg-white:#ffffff;
  --text-900:#0F1724;
  --muted:#6b7280;
  --shadow: 0 6px 18px rgba(2,6,23,0.06);
  --radius:10px;
  --sidebar-w:280px;
  --gap:20px;
  --bg-image: none;
  --bg-image-opacity: 0.08;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  background:var(--bg-white);
  color:var(--text-900);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:18px;
  position:relative;
  min-height:100vh;
}

/* background image layer */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: var(--bg-image);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: var(--bg-image-opacity);
  z-index: 0;
}

/* ensure UI sits above background */
.app, .main, .sidebar-inner, .modal-panel {
  position: relative;
  z-index: 1;
}

/* Layout */
.app{display:flex;gap:var(--gap);align-items:stretch}
.sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w)}
.sidebar-inner{display:flex;flex-direction:column;height:calc(100vh - 36px);background:var(--bg-white);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;gap:12px}
.main{flex:1;min-width:0}
.page-content{padding:6px 0}

/* Sidebar top spacer */
.spacer{height:44px}

/* Nav */
.sidebar-nav{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.nav-item{display:block;text-align:left;padding:12px;border-radius:8px;border:none;background:transparent;cursor:pointer;color:var(--text-900);font-weight:600}
.nav-item:hover{background:var(--teal-200)}
.nav-item.active{background:var(--teal-600);color:white}

/* Profile bottom */
.sidebar-bottom{margin-top:auto;border-top:1px solid #f0f6f5;padding-top:12px}
.profile{display:flex;gap:10px;align-items:center}
.pfp-square{width:48px;height:48px;border-radius:6px;background:linear-gradient(180deg,var(--teal-600),#1aa79a);display:flex;align-items:center;justify-content:center;color:white;font-weight:700}
.profile-name{font-weight:600}
.profile-points{font-size:13px;color:var(--muted)}
.sidebar-actions{margin-top:10px}

/* Buttons */
.btn{background:#fff;border:1px solid #e6eef0;padding:8px 12px;border-radius:8px;cursor:pointer}
.btn.small{padding:6px 10px;font-size:13px}
.btn.full{width:100%}
.btn.danger{background:#fff;border:1px solid #ffd6d6;color:#b91c1c}

/* Page header */
.page-header{margin-bottom:12px}
.page-title{margin:0;font-size:22px}
.subtitle{margin:6px 0 18px;color:var(--muted)}

/* Cards and grids */
.card{background:var(--bg-white);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.projects-card .card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.grid{display:grid;gap:12px}
.projects-grid .project, .shop-grid .item{background:#f8fffd;border-radius:10px;padding:10px;cursor:pointer}
.projects-grid .project .title{font-weight:600}
.announcements{margin-top:16px;display:flex;flex-direction:column;gap:12px}

/* Shop */
.center-box{display:flex;justify-content:center;margin-bottom:18px}
.points-box{text-align:center;max-width:520px}
.points-number{font-size:28px;color:var(--teal-600);font-weight:700}
.shop-grid{grid-template-columns:repeat(3,1fr)}

/* Controls */
.controls-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.filters select{padding:6px;border-radius:8px;border:1px solid #e6eef0}

/* Modal */
.modal{display:none;position:fixed;inset:0;align-items:center;justify-content:center;z-index:60}
.modal[aria-hidden="false"]{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,0.45)}
.modal-panel{position:relative;background:var(--bg-white);border-radius:12px;box-shadow:0 20px 50px rgba(2,6,23,0.25);max-width:720px;width:92%;padding:18px;z-index:61}
.modal-close{position:absolute;right:12px;top:8px;border:none;background:transparent;font-size:20px;cursor:pointer}

/* Responsive */
@media (max-width:1000px){
  .app{flex-direction:column}
  .sidebar{width:100%}
  .sidebar-inner{height:auto}
  .projects-grid{grid-template-columns:repeat(1,1fr)}
  .shop-grid{grid-template-columns:repeat(1,1fr)}
}

/* small helpers */
.muted{color:var(--muted)}