/* ===== reset / base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--accent:#a78bfa}

/* ===== layout ===== */
.flex{display:flex}
.inline-flex{display:inline-flex}
.flex-col{flex-direction:column}
.flex-grow{flex-grow:1}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.shrink-0{flex-shrink:0}
.block{display:block}
.hidden{display:none}
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.w-full{width:100%}
.h-full{height:100%}
.max-w-full{max-width:100%}
.mx-auto{margin-left:auto;margin-right:auto}
.overflow-hidden{overflow:hidden}
.overflow-y-auto{overflow-y:auto}
.object-contain{object-fit:contain}

/* ===== spacing (margin) ===== */
.mb-1{margin-bottom:4px}
.mb-4{margin-bottom:16px}
.mb-6{margin-bottom:24px}
.mb-12{margin-bottom:48px}
.mt-4{margin-top:16px}
.mt-8{margin-top:32px}
.gap-3{gap:12px}
.space-x-2>*+*{margin-left:8px}
.space-y-1>*+*{margin-top:4px}
.space-y-3>*+*{margin-top:12px}
.space-y-5>*+*{margin-top:20px}

/* ===== spacing (padding) ===== */
.p-1{padding:4px}
.p-5{padding:20px}
.p-6{padding:24px}
.px-3{padding-left:12px;padding-right:12px}
.px-5{padding-left:20px;padding-right:20px}
.py-2{padding-top:8px;padding-bottom:8px}
.py-2\\.5{padding-top:10px;padding-bottom:10px}
.py-3{padding-top:12px;padding-bottom:12px}
.py-4{padding-top:16px;padding-bottom:16px}
.py-8{padding-top:32px;padding-bottom:32px}
.py-12{padding-top:48px;padding-bottom:48px}
.pb-4{padding-bottom:16px}
.pt-8{padding-top:32px}
.h-32{height:128px}

/* ===== sizing (w/h) ===== */
.w-1\\.5{width:6px}.h-1\\.5{height:6px}
.w-2{width:8px}.h-2{height:8px}
.w-3\\.5{width:14px}.h-3\\.5{height:14px}
.w-5{width:20px}.h-5{height:20px}
.w-10{width:40px}.h-10{height:40px}
.max-h-240px{max-height:240px}

/* ===== z-index ===== */
.z-10{z-index:10}
.z-20{z-index:20}
.z-30{z-index:30}

/* ===== typography ===== */
.text-8px{font-size:8px}
.text-9px{font-size:9px}
.text-10px{font-size:10px}
.text-xs{font-size:12px;line-height:16px}
.text-sm{font-size:14px;line-height:20px}
.text-xl{font-size:20px;line-height:28px}
.text-2xl{font-size:24px;line-height:32px}
.text-3xl{font-size:30px;line-height:36px}
.font-light{font-weight:300}
.font-normal{font-weight:400}
.font-bold{font-weight:700}
.font-mono{font-family:'JetBrains Mono',monospace}
.tracking-tight{letter-spacing:-0.025em}
.tracking-wider{letter-spacing:0.05em}
.tracking-widest{letter-spacing:0.1em}
.leading-relaxed{line-height:1.625}
.leading-tight{line-height:1.25}
.text-center{text-align:center}
.uppercase{text-transform:uppercase}
.whitespace-pre-line{white-space:pre-line}

/* ===== text colors ===== */
.text-white{color:#fff}
.text-black{color:#000}
.text-zinc-400{color:#e2e4e9}
.text-zinc-500{color:#a1a1aa}
.text-zinc-600{color:#71717a}
.text-zinc-800{color:#27272a}
.text-rose-500{color:#f43f5e}
.text-accent{color:var(--accent)}
.bg-accent{background-color:var(--accent)}

/* ===== backgrounds ===== */
.bg-\\[\\#030303\\]{background-color:#030303}
.bg-\\[\\#050505\\]{background-color:#050505}
.bg-\\[\\#0a0a0a\\]{background-color:#0a0a0a}
.bg-\\[\\#0d0d0d\\]{background-color:#0d0d0d}
.bg-emerald-400{background-color:#34d399}
.bg-emerald-500{background-color:#10b981}

/* ===== borders ===== */
.border{border:1px solid}
.border-b{border-bottom:1px solid}
.border-white\/5{border-color:rgba(255,255,255,.03)}
.border-white\/10{border-color:rgba(255,255,255,.08)}
.rounded-2xl{border-radius:16px}
.rounded-xl{border-radius:12px}
.rounded-lg{border-radius:8px}
.rounded-full{border-radius:9999px}

/* ===== effects ===== */
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.opacity-75{opacity:.75}
.transition-colors{transition:color .15s,background-color .15s,border-color .15s}
.transition-all{transition:all .15s}
.outline-none{outline:none}
.pointer-events-none{pointer-events:none}
.cursor-pointer{cursor:pointer}

/* ===== hover ===== */
.hover\\:text-white:hover{color:#fff}
.hover\\:text-accent:hover{color:var(--accent)}
.hover\\:bg-accent\\/90:hover{background-color:rgba(167,139,250,.9)}

/* ===== focus ===== */
.focus\\:outline-none:focus{outline:none}
.focus\\:border-accent\\/40:focus{border-color:rgba(167,139,250,.4)}

/* ===== responsive (md ≥768px) ===== */
@media(min-width:768px){
  .md\:hidden{display:none}
  .md\:flex{display:flex}
  .md\:flex-row{flex-direction:row}
  .md\:w-\[220px\]{width:220px}
  .md\:min-h-screen{min-height:100vh}
  .md\:px-12{padding-left:48px;padding-right:48px}
  .md\:py-16{padding-top:64px;padding-bottom:64px}
  .md\:p-10{padding:40px}
  .md\:text-2xl{font-size:24px;line-height:32px}
}

/* ===== body ===== */
body{font-family:'Inter',sans-serif;background:radial-gradient(ellipse at 50% -10%,#0f0f1a 0%,#030303 60%);color:#f3f4f6;min-height:100vh}

/* ===== page layout: sidebar sticky + carousel at 33vh ===== */
.page-layout{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:60px;
  min-height:100vh;
  position:relative;
  width:100%;
  max-width:900px;
  margin:0 auto;
  gap:20px;
}
.sidebar{
  position:sticky;
  top:60px;
  width:220px;
  flex-shrink:0;
  box-shadow:0 8px 32px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .3s ease, box-shadow .3s ease;
}
.sidebar:hover{
  transform:translateX(2px);
  box-shadow:6px 0 32px rgba(0,0,0,.35);
}
.main-content{
  flex-grow:0;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:658px;
}

/* ===== carousel wrapper: responsive, ~600px wide ===== */
.carousel-wrapper{
  display:flex;
  align-items:flex-start;
  gap:16px;
  width:100%;
  max-width:658px;
  min-height:600px;
  position:relative;
  flex-shrink:0;
}
#carousel-outer{
  width:100%;
  height:100%;
  box-shadow:0 8px 32px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .3s ease, box-shadow .3s ease;
  border-top-color:rgba(167,139,250,.12);
}
#carousel-outer:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(167,139,250,.15);
}

/* ===== carousel inner ===== */
#carousel-inner{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  border-radius:16px;
  overflow:hidden;
  background-color:#0a0a0a;
}
.carousel-img-wrap{
  padding:32px 32px 0 32px;
  background-color:#0a0a0a;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  min-height:420px;
}
.carousel-img-wrap img{
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:6px;
  transition:opacity .2s ease;
}
.carousel-text-area{
  width:100%;
  height:500px;
  padding:32px 32px;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  flex-shrink:0;
  transition:filter .2s ease, opacity .2s ease;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.12) transparent;
}
.carousel-text-area::-webkit-scrollbar{width:6px}
.carousel-text-area::-webkit-scrollbar-track{background:transparent}
.carousel-text-area::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.carousel-text-area::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}
@media(min-width:768px){
  .carousel-text-area{padding:32px 32px}
}

/* ===== carousel arrows ===== */
.carousel-arrow{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 4px 12px rgba(0,0,0,.4);position:absolute;top:400px;z-index:20}
.carousel-arrow:hover{color:var(--accent);background:rgba(0,0,0,.7);border-color:rgba(167,139,250,.4)}
.carousel-arrow.prev{left:-20px}
.carousel-arrow.next{right:-20px}
@media(min-width:768px){.carousel-arrow.prev{left:-24px}.carousel-arrow.next{right:-24px}}

/* ===== carousel-btns: fixed at viewport right edge, aligned with carousel bottom ===== */
.carousel-btns{
  position:sticky;
  bottom:20px;
  align-self:flex-end;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:40;
  transition: opacity 0.2s;
}
@media(max-width:767px){
  .carousel-btns{
    position: absolute;
    bottom: 0;
    right: -52px;
    top: auto !important;
  }
}
.carousel-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#a1a1aa;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s;
}
.carousel-btn:hover{
  color:#fff;
  border-color:rgba(255,255,255,.16);
}

/* ===== login popover (inside carousel-btns, pops to the RIGHT) ===== */
#login-popover {
  position: absolute;
  bottom: 0;
  left: calc(100% + 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 100;
}
#login-popover.open {
  opacity: 1;
  pointer-events: auto;
}
.login-popover-content {
  width: 280px;
  padding: 20px;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.login-heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #a1a1aa;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-form input {
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}
.login-form input:focus {
  border-color: var(--accent);
}
.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:hover,
.login-form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px #050505 inset;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
}
.login-submit {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.login-submit:hover {
  opacity: 0.9;
}
.login-error {
  color: #f43f5e;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  text-align: center;
  margin-top: -4px;
  margin-bottom: 4px;
}

/* ===== sidebar link ===== */
.sidebar-link{transition:color .2s;color:#cdd6f4}
.sidebar-link:hover{color:var(--accent)}

/* ===== mobile ===== */
.mobile-nav{max-height:0;overflow:hidden;transition:max-height .3s ease}
.mobile-nav.open{max-height:500px}
.main-content::-webkit-scrollbar{width:4px}
.main-content::-webkit-scrollbar-track{background:transparent}
.main-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

/* ===== pulse dot ===== */
.pulse-dot{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}