*{box-sizing:border-box}
:root{--bg:#050b13;--panel:#081522;--line:#18d9ff;--cyan:#37e7ff;--text:#e9f7ff;--muted:#9bb5c5;--purple:#b56cff;--pink:#ff4fd8;--gold:#f2c75c}
body{margin:0;background:radial-gradient(circle at top,#0b1a2a 0,#050b13 48%,#03070d 100%);color:var(--text);font-family:Arial,Helvetica,sans-serif}
.shell{width:min(1180px,94%);margin:20px auto 40px}
.crazychat-header-image{overflow:hidden;border-radius:14px;border:1px solid rgba(55,231,255,.35);box-shadow:0 0 24px rgba(0,210,255,.12);margin-bottom:12px}
.crazychat-header-image img{display:block;width:100%;height:auto}
.header{display:flex;align-items:center;gap:18px;padding:12px 4px 16px;flex-wrap:wrap}
.brand{font-size:1.45rem;font-weight:800;color:#fff;text-decoration:none;text-shadow:0 0 10px rgba(55,231,255,.5)}
.brand span{color:var(--cyan)}
nav{display:flex;gap:7px;flex-wrap:wrap}
nav a{color:#b9d5e3;text-decoration:none;padding:7px 9px;border-radius:8px;font-size:.9rem}
nav a:hover,nav a.active{color:#fff;border:1px solid rgba(55,231,255,.5);background:rgba(18,215,255,.07);box-shadow:0 0 12px rgba(18,215,255,.1)}
.panel{background:linear-gradient(180deg,rgba(10,27,42,.96),rgba(5,15,25,.96));border:1px solid rgba(55,231,255,.38);border-radius:14px;box-shadow:0 0 22px rgba(0,210,255,.08);padding:24px}
.kicker{margin:0 0 8px;color:var(--cyan);font-size:.78rem;letter-spacing:.16em;font-weight:700}
h1,h2,h3{margin:0 0 10px}
h1{font-size:clamp(1.8rem,4vw,2.8rem);text-shadow:0 0 14px rgba(55,231,255,.25)}
h2{font-size:1.55rem}
h3{font-size:1.3rem;color:#fff}
p{line-height:1.6}
.lead{color:var(--muted);max-width:850px}
.hero{margin-bottom:18px}
.login{border-color:rgba(181,108,255,.45);box-shadow:0 0 24px rgba(181,108,255,.08)}
.login-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.info-item{border:1px solid rgba(55,231,255,.18);border-radius:10px;padding:12px;background:rgba(0,0,0,.15)}
.info-item span{display:block;color:var(--muted);font-size:.78rem;margin-bottom:5px}
.info-item strong{display:block}
.info-item small{color:var(--muted)}
.command{margin-top:14px;border:1px solid rgba(242,199,92,.35);border-radius:10px;padding:12px;background:rgba(242,199,92,.04)}
.command span{display:block;color:var(--gold);font-size:.76rem;letter-spacing:.12em;margin-bottom:6px}
code{color:#fff;font-size:.95rem}
.programs{margin-top:24px}
.section-heading{margin:0 4px 14px}
.section-heading p:last-child{color:var(--muted)}
.program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.program{min-height:270px;display:flex;flex-direction:column}
.program-mark{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,79,216,.55);color:var(--pink);font-weight:800;font-size:1.2rem;box-shadow:0 0 15px rgba(255,79,216,.12);margin-bottom:14px}
.program p:not(.kicker){color:var(--muted);flex:1}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.button{display:inline-block;text-decoration:none;color:#061018;background:var(--cyan);border:1px solid var(--cyan);border-radius:8px;padding:9px 12px;font-weight:700;font-size:.88rem;box-shadow:0 0 12px rgba(55,231,255,.16)}
.button.secondary{color:#dff9ff;background:transparent}
.button:hover{filter:brightness(1.1)}
.note{margin-top:18px;color:#d6e9f2;border-color:rgba(242,199,92,.3)}
.footer{text-align:center;color:#6f8998;font-size:.82rem;padding:24px 0}
@media(max-width:850px){.login-grid,.program-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.shell{width:96%}.header{align-items:flex-start}.login-grid,.program-grid{grid-template-columns:1fr}.panel{padding:18px}}