/* Minimal dark theme
   Base BG: #000000
   Contrast: #222222
   Text: #FFFFFF
*/
:root{
  --bg:#000000;
  --panel:#000000;
  --text:#ffffff;
  --muted:rgba(255,255,255,0.75);
  --muted2:#000000;
  --border:#000000;
  --border2:#000000;
  --shadow: 0 20px 60px rgba(0,0,0,0.6);
  --radius:18px;
  --radius2:14px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
a:focus{outline:2px solid #000000; outline-offset:4px; border-radius:10px}

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

.sidebar{
  width:92px;
  background:linear-gradient(180deg, #000000, #000000);
  border-right:1px solid var(--border);
  padding:18px 14px;
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;
}

.brand{
  width:56px;
  height:56px;
  border-radius:16px;
  background:#000000;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.brand img{
  width:70%;
  height:70%;
  object-fit:contain;
  display:block;
}

.navlabel{
  margin-top:4px;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted2);
}

.socials{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:6px;
}

.social{
  width:56px;
  height:56px;
  border-radius:16px;
  border:1px solid var(--border);
  background:#000000;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.social:hover{
  transform:translateY(-1px);
  background:#000000;
  border-color:var(--border2);
}
.social img{
  width:26px;
  height:26px;
  object-fit:contain;
  filter:brightness(0) invert(1); /* ensure white-ish icons */
  opacity:0.95;
  user-select:none;
  pointer-events:none;
}

.content{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 22px;
}

.shell{
  width:min(880px, 100%);
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;
  text-align:center;
}

.hero{
  width:100%;
  padding:34px 22px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#000000;
  box-shadow:var(--shadow);
}
.hero h1{
  margin:0;
  font-weight:650;
  letter-spacing:-0.02em;
  font-size: clamp(26px, 4vw, 44px);
  line-height:1.05;
}
.hero p{
  margin:14px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
}

.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:18px;
}

.btn{
  appearance:none;
  border:1px solid var(--border);
  background:#000000;
  color:var(--text);
  padding:12px 16px;
  border-radius:999px;
  font-weight:600;
  letter-spacing:0.01em;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.07);
  border-color:var(--border2);
}
.btn:active{
  transform:translateY(0px);
}
.btn.primary{
  background:#000000;
  border-color:#000000;
}
.btn.primary:hover{
  background:rgba(255,255,255,0.14);
}

.topbar{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius2);
  background:#000000;
}
.breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted2);
  font-size:13px;
}
.breadcrumb strong{
  color:var(--text);
  font-weight:650;
}
.smallnote{
  color:var(--muted2);
  font-size:13px;
}

.page{
  width:100%;
  padding:26px 22px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#000000;
  box-shadow:var(--shadow);
  text-align:left;
}
.page h2{
  margin:0 0 10px;
  font-size:22px;
  letter-spacing:-0.01em;
}
.page p{
  margin:10px 0;
  color:var(--muted);
  line-height:1.65;
}
.page .grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top:14px;
}
.card{
  border:1px solid var(--border);
  background:#000000;
  border-radius:16px;
  padding:14px 14px;
}
.card .k{
  color:var(--muted2);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.card .v{
  margin-top:8px;
  font-weight:600;
}

.form{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
label{
  font-size:13px;
  color:var(--muted2);
}
input, textarea{
  width:100%;
  border:1px solid var(--border);
  background:#000000;
  color:var(--text);
  border-radius:14px;
  padding:12px 12px;
  font-family:var(--font);
  font-size:14px;
}
textarea{min-height:120px; resize:vertical}
input:focus, textarea:focus{
  outline:none;
  border-color:#000000;
  box-shadow:0 0 0 4px #000000;
}

/* Hover preview popup */
.preview{
  position:fixed;
  left:110px;
  top:24px;
  width:min(420px, calc(100vw - 140px));
  height:520px;
  border-radius:18px;
  border:1px solid var(--border);
  background:rgba(0,0,0,0.85);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:none;
  z-index:50;
}
.previewHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:#000000;
}
.previewHeader .title{
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:320px;
}
.previewHeader .hint{
  font-size:12px;
  color:var(--muted2);
}
.preview iframe{
  width:100%;
  height:100%;
  border:0;
  background:#000;
}

/* Mobile adjustments */
@media (max-width: 720px){
  .sidebar{width:76px; padding:14px 10px}
  .brand,.social{width:50px; height:50px; border-radius:14px}
  .preview{display:none !important;} /* many social sites block iframes anyway */
}

/* Hamburger + mobile menu (single "Rep your side") */
.hamburger{
  display:none;
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.04);
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.hamburger:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.07);
  border-color:var(--border2);
}
.hamburger:active{transform:translateY(0px);}
.hamburgerLines{ width:22px; height:14px; position:relative; }
.hamburgerLines span{
  position:absolute; left:0; right:0; height:2px;
  background:rgba(255,255,255,0.92);
  border-radius:999px;
}
.hamburgerLines span:nth-child(1){top:0;}
.hamburgerLines span:nth-child(2){top:6px;}
.hamburgerLines span:nth-child(3){top:12px;}

/* Desktop: center button shown; rep item in nav hidden */
.nav-rep{ display:none; }

@media (max-width: 720px){
  .layout{flex-direction:column !important; min-height:auto !important;}

  .topbar{
    display:grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items:center !important;
    gap:10px !important;
  }

  /* Mobile: hide centered rep button, show rep inside menu */
  .topbar .centerSlot{ display:none !important; }
  .nav-rep{ display:inline-flex !important; }

  .hamburger{
    display:inline-flex !important;
    justify-self:end !important;
  }

  .topbar nav{
    display:none !important;
    grid-column:1 / -1 !important;
    width:100% !important;
    flex-direction:column !important;
    gap:10px !important;
    align-items:stretch !important;
    padding-top:6px !important;
  }
  body.menu-open .topbar nav{ display:flex !important; }

  .topbar nav .btn{
    width:100% !important;
    text-align:left !important;
    padding:12px 14px !important;
  }

  /* Sidebar becomes horizontal socials strip */
  .sidebar{
    width:100% !important;
    height:auto !important;
    position:relative !important;
    top:0 !important;
    border-right:0 !important;
    border-bottom:1px solid var(--border) !important;
    flex-direction:row !important;
    justify-content:center !important;
    padding:12px 12px !important;
    gap:14px !important;
  }
  .socials{
    position:static !important;
    height:auto !important;
    margin-top:0 !important;
    flex-direction:row !important;
    gap:12px !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
  }
  .social{position:static !important; transform:none !important; width:50px !important; height:50px !important; border-radius:14px !important;}

  .content{padding:18px 14px !important; align-items:stretch !important;}
  .shell{width:100% !important; align-items:stretch !important;}
  .hero img{max-width:100% !important; height:auto !important;}
  .preview{display:none !important;}
}