/* Global Styles */
:root{
  --primary:#0A1D4D; /* Dark Blue */
  --accent:#2F6BFF; /* Electric Blue */
  --bg:#070B1A;
  --card: rgba(255,255,255,0.08);
  --text:#EAF0FF;
  --muted:#B8C0D9;
  --glass: rgba(255,255,255,0.12);
  --shadow: 0 20px 60px rgba(10,29,77,0.35);
  --radius:28px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial; color:var(--text); background: radial-gradient(1200px 800px at 10% -20%, #13244f, #070B1A 60%), linear-gradient(120deg, #091537, #070B1A);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1100px,92%);margin:0 auto}

/* Auth */
.auth-body{overflow:hidden; position:relative}
#bg-particles{position:fixed; inset:0; z-index:-1}
.auth-wrapper{min-height:100vh; display:grid; place-items:center; padding:40px}
.auth-card{width:min(520px,95%); padding:32px; border-radius:var(--radius); background:linear-gradient(140deg,rgba(255,255,255,0.14),rgba(255,255,255,0.08)); backdrop-filter: blur(18px); box-shadow: var(--shadow); border:1px solid rgba(255,255,255,0.18)}
.tabs{display:flex; gap:10px; margin-bottom:18px}
.tab-btn{flex:1; padding:12px 14px; border-radius:16px; border:1px solid transparent; background:rgba(255,255,255,0.08); color:var(--text); cursor:pointer; transition:all .25s}
.tab-btn.active{background:var(--accent); color:white; box-shadow:0 10px 30px rgba(47,107,255,.45)}
.tab-content{display:none; animation:fade .3s ease}
.tab-content.active{display:block}
.title{margin:8px 0 18px}
.input-group{display:grid; gap:8px; margin:12px 0}
.input-group label{font-size:.9rem;color:var(--muted)}
.input-group input, .input-group select, .input-group textarea{padding:14px 16px; border-radius:16px; border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.06); color:var(--text); outline:none; transition: box-shadow .25s, transform .1s}
.input-group.glow input:focus{box-shadow:0 0 0 3px rgba(47,107,255,.35)}
.input-hint{color:#9fb1ff;font-size:.78rem}
.password-field{display:flex; align-items:center; gap:10px}
.password-field .icon-btn{background:transparent;border:0;color:#cfe0ff;cursor:pointer;font-size:1rem}
.strength{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px}
.strength span{height:6px;border-radius:6px;background:rgba(255,255,255,0.15)}
.strength[data-score="1"] span:nth-child(-n+1){background:#ff6b6b}
.strength[data-score="2"] span:nth-child(-n+2){background:#ffd166}
.strength[data-score="3"] span:nth-child(-n+3){background:#6ee7b7}
.strength[data-score="4"] span:nth-child(-n+4){background:#38bdf8}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:14px; border:1px solid transparent; cursor:pointer; transition: transform .08s ease, box-shadow .25s ease, background .25s}
.btn.primary{background:var(--accent); color:white; box-shadow:0 12px 30px rgba(47,107,255,.45)}
.btn.primary:hover{transform:translateY(-2px)}
.btn.secondary{background:rgba(255,255,255,0.08)}
.btn.ghost{background:transparent; border-color:rgba(255,255,255,0.18)}
.btn.success{background:#22c55e; color:#03150a; box-shadow:0 12px 30px rgba(34,197,94,.35); border-color:rgba(34,197,94,.35)}
.btn.success:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(34,197,94,.45)}
.btn.link{background:transparent; color:#9fc1ff; padding:0}
.btn.w-100{width:100%}
.btn.center{width:min(260px,100%); justify-content:center; margin:10px auto 0 auto; display:flex}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.06);cursor:pointer}
.icon-btn.danger{border-color:#ff7b7b;color:#ff7b7b}

.toast{position:fixed; left:50%; top:24px; transform:translateX(-50%) translateY(-30px); background:rgba(0,0,0,.75); color:white; padding:12px 16px; border-radius:12px; opacity:0; pointer-events:none; transition: all .3s; z-index:1000}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* Hero */
.hero{background: radial-gradient(1200px 800px at 80% -20%, rgba(47,107,255,0.25), transparent), linear-gradient(120deg, #0A1D4D, #0b235c 40%, #0a1030);
  padding:72px 0 40px; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06)}
.hero-content{display:grid; grid-template-columns: 180px 1fr; gap:24px; align-items:center; width:min(1100px,92%); margin:0 auto}
.avatar{width:160px;height:160px;border-radius:50%; object-fit:cover}
.glow-outline{box-shadow:0 0 0 6px rgba(47,107,255,0.25)}
.title{font-size:clamp(32px, 5vw, 48px); margin:0}
.subtitle{margin:8px 0 12px; color:#cde0ff}
.intro{color:#d7e2ff}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.badge{padding:8px 12px; border-radius:999px; background:rgba(255,255,255,0.08); color:#cfe0ff; border:1px solid rgba(255,255,255,0.12)}
.actions{margin-top:18px; display:flex; gap:10px; flex-wrap:wrap}

/* Cards */
.cards-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; margin:36px auto; width:min(1100px,92%)}
.cards-grid.one{grid-template-columns:1fr; justify-items:center}
.cards-grid.one .card{width:100%; max-width:720px}
.card{background:var(--glass); border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius); padding:24px; box-shadow: var(--shadow)}
.card.floating{transition: transform .25s, box-shadow .25s; position:relative}
.card.floating:hover{transform: translateY(-6px); box-shadow: 0 30px 80px rgba(10,29,77,0.45)}
.card-icon{width:56px;height:56px;border-radius:18px;display:grid;place-items:center; margin-bottom:10px; color:white}
.card-icon.gradient{background:linear-gradient(135deg, var(--accent), #4fa1ff)}

/* Video */
.video-wrap{position:relative; width:100%; aspect-ratio:16/9; border-radius:18px; overflow:hidden; box-shadow:0 20px 50px rgba(10,29,77,0.35); margin:10px 0 14px}
.video{width:100%; height:100%; object-fit:cover; display:block}

/* WS101 */
.topbar{display:flex; justify-content:center; padding:12px}
.ws-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:20px; margin:30px auto}
.grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; margin:10px 0}
.code-block{display:block; background:rgba(0,0,0,0.35); padding:12px; border-radius:12px; font-size:.9rem}
.alert{padding:10px 12px; border-radius:12px; margin:10px 0}
.alert.error{background:rgba(255,99,99,.12); color:#ffb4b4}
.alert.success{background:rgba(99,255,171,.12); color:#b6ffd9}
.notes-list{display:grid; gap:10px; margin-top:10px}
.note-item{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:12px; border-radius:12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12)}

/* SPT1 demo */
.sample-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
.sample-item{background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); border-radius:16px; padding:24px; text-align:center}

/* Footer */
.footer{margin-top:40px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border-top:1px solid rgba(255,255,255,0.06)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 0}
.socials{display:flex; gap:10px}
.social{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); transition:transform .2s, box-shadow .2s}
.social:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(47,107,255,.35)}

/* Utils */
.glass{background:linear-gradient(140deg,rgba(255,255,255,0.14),rgba(255,255,255,0.08)); backdrop-filter: blur(18px)}
.typewriter{overflow:hidden; white-space:nowrap; border-right:2px solid #9fc1ff; animation: typing 3.2s steps(26,end), blink .8s step-end infinite alternate}

@keyframes typing{from{width:0} to{width:100%}}
@keyframes blink{50%{border-color:transparent}}
@keyframes fade{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

/* Responsive */
@media (max-width: 900px){
  .hero-content{grid-template-columns:1fr; text-align:center}
  .cards-grid{grid-template-columns:1fr}
  .ws-grid{grid-template-columns:1fr}
  .sample-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 520px){
  .sample-grid{grid-template-columns:1fr}
}