:root{
  --bg: #0a1a2f;
  --panel: #0f2036;
  --muted: #9fb4c9;
  --line: #223b5e;
  --brand1: #FF6A00;   /* orange */
  --brand2: #49E1E1;   /* aqua */
  --brand3: #2CC5FF;   /* sky */
  --white: #fff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--white);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.45}

.wrap{max-width:1100px;margin:0 auto;padding:0 18px}
.h{font-size:1.35rem;margin:0 0 12px}

.sitebar{
  background: radial-gradient(1200px 400px at 15% -100%, #153057 10%, transparent 60%),
              linear-gradient(90deg, #0b1c2e 0%, #10243e 60%, #0b1c2e 100%);
  border-bottom: 2px solid var(--brand1);
  position: sticky; top:0; z-index: 40;
}
.bar{display:flex;align-items:center;gap:16px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo{height:56px;width:auto;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.title{
  font-size:2rem;margin:0;font-weight:900;
  background: linear-gradient(90deg, var(--brand2), var(--brand3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing:.5px
}
.nav{margin-left:auto;display:flex;gap:16px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;font-weight:600}
.nav a:hover{color:var(--white)}

.melly-fab{
  margin-left:8px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;
}
.melly-fab img{height:52px;width:52px;border-radius:50%;border:2px solid var(--brand2);box-shadow:0 0 0 3px rgba(73,225,225,.15)}

.hero{
  background:
    radial-gradient(900px 300px at 0% -20%, rgba(73,225,225,.18), transparent 60%),
    radial-gradient(800px 260px at 100% -30%, rgba(255,106,0,.18), transparent 60%);
  padding:38px 0 26px;border-bottom:1px solid var(--line);
}
.hero-title{
  font-size:clamp(28px, 4.4vw, 44px);
  margin:0 0 6px;font-weight:900;
}
.hero-title .accent{
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.hero-sub{color:var(--muted);margin:0 0 16px}

.cta{display:flex;flex-wrap:wrap;gap:10px}
.btn{
  --bgbtn:#203652;
  background:var(--bgbtn);color:white;border:1px solid var(--line);
  padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:800
}
.btn:hover{transform:translateY(-1px)}
.btn.orange{--bgbtn:linear-gradient(90deg, #FF6A00, #FF8A33)}
.btn.blue{--bgbtn:linear-gradient(90deg, #2CC5FF, #49E1E1)}
.btn.aqua{--bgbtn:linear-gradient(90deg, #2ee6cf, #49E1E1)}

.panel{padding:22px 0;border-bottom:1px solid var(--line)}
.grid{display:grid;gap:12px}
.cols-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fieldset label{display:block;margin:2px 0 6px;color:var(--muted);font-size:.92rem}
.fieldset input,.fieldset select,.fieldset textarea{
  width:100%;padding:10px 12px;border-radius:10px;background:#0b1c2e;border:1px solid var(--line);color:white
}
.fieldset .actions{margin-top:12px;display:flex;align-items:center;gap:10px}
.hp{display:none}

.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.pill{
  display:inline-block;border:1px solid var(--brand2);color:var(--brand2);border-radius:999px;
  padding:2px 8px;font-size:.8rem;font-weight:800;margin-bottom:6px
}
.hint{border-color:#FFD27A;color:#FFD27A}

.posters img{width:100%;display:block;border-radius:10px;border:1px solid var(--line)}
.posters figure{margin:0}
.posters figcaption{color:var(--muted);font-size:.9rem;margin-top:6px}

.muted{color:var(--muted);margin-top:6px}

.footer{border-top:2px solid var(--brand1);padding:14px 0;background:#0b1626}
.foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;color:var(--muted);font-size:.95rem}

/* ===== Melly FAQ box ===== */
.melly-box{
  position:fixed; right:18px; bottom:90px; width:min(380px, 92vw);
  background:#0b1c2e;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.35); padding:12px; display:none; z-index:50;
}
.melly-box.open{display:block}
.melly-head{display:flex;align-items:center;gap:10px;padding:6px 6px 10px;border-bottom:1px solid var(--line)}
.melly-head img{height:36px;width:36px;border-radius:50%;border:2px solid var(--brand2)}
.melly-head .name{font-weight:900}
.melly-body{padding:10px 2px 2px;display:grid;gap:8px}
.faq a{display:block;background:#0f2036;border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-decoration:none;color:white}
.faq a:hover{border-color:var(--brand2)}
.melly-box .close{margin-left:auto;background:transparent;border:0;color:#fff;cursor:pointer;font-size:18px}

/* Welcome bubble near avatar */
.welcome-bubble{
  position:fixed; right:88px; top:84px; background:#0f2036; border:1px solid var(--line);
  border-radius:10px; padding:8px 10px; color:#fff; font-size:.92rem; box-shadow:0 10px 24px rgba(0,0,0,.3);
}
@media (max-width:700px){
  .nav{display:none}
  .melly-fab img{height:46px;width:46px}
  .title{font-size:1.6rem}
}