:root{
  --bg:#222222;
  --header:#2d2d2d;
  --panel:#262626;
  --text:#e9e9e9;
  --muted:#a7a7a7;
  --line:#363636;
  --accent:#7bdcff;
  --accent2:#b58cff;
  --radius:14px;
  --shadow:0 10px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.5 ui-sans-serif,system-ui,Segoe UI,Roboto,Inter,Arial;
  letter-spacing:.2px;
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(123,220,255,.08), transparent 60%),
    radial-gradient(1200px 600px at 110% 10%, rgba(181,140,255,.08), transparent 60%);
}

/* Layout: Sidebar + Content (feel like Discord/Spotify) */
.shell{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height:100dvh;
}

.sidebar{
  background:var(--header);
  border-right:1px solid var(--line);
  padding:18px 14px;
  position:sticky; top:0; height:100dvh;
}
.brand{
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.brand .avatar{
  width:40px; height:40px; border-radius:12px;
  background: url("thumbnail.png") center/cover no-repeat;
  box-shadow:var(--shadow);
}
.brand .title{font-weight:800; letter-spacing:.3px}

.nav{
  display:flex; flex-direction:column; gap:8px;
}
.nav a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px; color:#e0e0e0; text-decoration:none;
  border:1px solid transparent;
}
.nav a.active, .nav a:hover{
  background:#2b2b2b; border-color:#3a3a3a;
}
a {
  color: #fff;
  text-decoration: none;
}
a:hover {
  color: var(--accent); /* opsional kalau mau pas hover jadi warna cyan */
}


/* Topbar */
.topbar{
  background:var(--header);
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; border-bottom:1px solid var(--line);
}
.topbar .profile{
  display:flex; align-items:center; gap:10px;
}
.profile .pic{
  width:34px; height:34px; border-radius:12px;
  background: url("thumbnail.png") center/cover no-repeat;
}
.profile .name{font-weight:700}

/* Content area */
.content{padding:22px; max-width:1200px; margin:0 auto;}
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
}
h1,h2,h3{margin:0 0 12px}
.muted{color:var(--muted)}

/* Cards / grid buttons */
.grid{
  display:grid; gap:16px;
}
.grid.cols-auto{
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.card{
  background:#242424; border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; transition:transform .15s ease, border-color .15s ease;
}
.card:hover{ transform:translateY(-2px); border-color:#4a4a4a; }
.card .cta{margin-top:10px}

.btn, button{
  display:inline-grid; grid-auto-flow:column; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; cursor:pointer; border:1px solid #3a3a3a;
  background:#262626; color:#efefef; text-decoration:none; font-weight:600;
}
.btn:hover, button:hover{ background:#303030 }

input[type="text"], input[type="url"], input[type="email"], textarea, select{
  width:100%; background:#1f1f1f; color:var(--text);
  border:1px solid #3a3a3a; border-radius:12px; padding:10px 12px;
}
textarea{min-height:130px; resize:vertical}
.field-row{display:grid; gap:12px; grid-template-columns:1fr auto}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
pre{background:#1e1e1e; border:1px solid #333; padding:12px; border-radius:12px; overflow:auto}

/* Home hero */
.hero{
  display:grid; grid-template-columns:1.2fr .8fr; gap:22px; align-items:center;
}
.biglogo{
  width:140px; height:140px; border-radius:30px; margin:0 auto 14px;
  background: url("thumbnail.png") center/cover no-repeat;
  box-shadow:var(--shadow);
}

/* Shell (downloads) cards */
/* default grid for shells: 3 columns on wide screens */
.shell-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:1100px){
  .shell-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .shell-grid{grid-template-columns:1fr}
}
.card .tag{display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid #3a3a3a; color:#d9d9d9}
.card .meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

/* Footer */
.footer-min{padding:18px; text-align:center; color:#aaa}

/* Mobile */
.mobilebar{
  display:none; position:sticky; top:0; z-index:40; background:var(--header); border-bottom:1px solid var(--line);
  padding:12px 16px; justify-content:space-between; align-items:center;
}
.hamburger{cursor:pointer; font-weight:800}

@media (max-width: 960px){
  .shell{grid-template-columns: 1fr;}
  .sidebar{display:none}
  .mobilebar{display:flex}
  .hero{grid-template-columns:1fr}
}

/* small utilities */
.center{display:flex; align-items:center; justify-content:center}
.small{font-size:13px;color:var(--muted)}