:root{
  --bg:#f6fbfa;
  --card:#ffffff;
  --accent:#14b37b;
  --muted:#9aa8a3;
  --danger:#e85a5a;
  --glass: rgba(255,255,255,0.7);
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter, 'Segoe UI', Roboto, Arial, sans-serif; margin:0; background:linear-gradient(180deg,#0bb67f11 0%, #ffffff 60%); color:#173a35}
.app-shell{min-height:100vh; display:flex; flex-direction:column}
.topbar{height: auto; min-height: 70px; padding: 16px 0; display:flex; align-items:center; justify-content:space-between; background:var(--accent); color:white; background-color: #14B37B;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='27' viewBox='0 0 100 100'%3E%3Crect x='0' y='0' width='49' height='49' fill-opacity='0.19' fill='%236EC89F'/%3E%3C/svg%3E");}
.topbar h1{font-size:28px; margin:0; display:block; text-align: left;}
.xp-bubble{background:#fff2; padding:6px 10px; border-radius:20px; color:white; font-weight:600}
.container{padding:18px}
.splash{position:fixed; inset:0; background:linear-gradient(180deg,var(--accent), #12a57a); display:flex; align-items:center; justify-content:center; z-index:9999; transition:opacity .4s, transform .4s}
.splash.hidden{opacity:0; transform:scale(.98); pointer-events:none}
.logo img{width:120px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.18))}
.card{background:var(--card); border-radius:14px; padding:14px; box-shadow:0 6px 18px rgba(17,34,30,.06); margin-bottom:14px;     border: 1px solid #efefef;}
.dashboard{display:grid; grid-template-columns:1fr; gap:12px}
.level-card{display:flex; align-items:center; gap:12px}
.level{font-weight:700}
.xp-bar{height:10px; background:#f1f5f4; border-radius:8px; overflow:hidden}
.xp-bar > div{height:100%; background:linear-gradient(90deg,var(--accent), #1cd09a); width:0%; transition:width .6s ease}
.modules-list{display:flex; gap:10px; flex-wrap:wrap}
.module-tile{cursor:pointer;flex:0 0 48%; padding:14px; border-radius:12px; color:white; min-height:150px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.module-tile h3{margin:0}
.module-tile .meta{font-size:12px; opacity:.9}
.module-icon{height:3em;float:right;opacity:.8,margin-top: 10px}
.button{display:inline-block; padding:10px 14px; border-radius:10px; background:var(--accent); color:white; text-decoration:none}

/* Article and quiz layout */
.article-shell{padding:18px}
.article-card{background:var(--card); border-radius:12px; padding:18px}
.article-list-item{background:#f9fefe; border:1px solid #f0f4f3; transition:background .2s}
.article-list-item:hover{background:#f3f8f7}
.article-list-item.completed{opacity:.65}
.quiz-choices{display:flex; flex-direction:column; gap:10px; margin-top:18px}
.choice{background:#f4f7f7; padding:14px; border-radius:10px; cursor:pointer; border:1px solid transparent}
.choice:hover{background:#eef6f3}
.choice.correct{border-color:var(--accent); background:linear-gradient(90deg,#e9fff7,#f3fff9)}
.choice.wrong{border-color:var(--danger); background:#ffecec}

/* small devices styles */
@media(min-width:720px){
  .modules-list .module-tile{flex:0 0 31%}
  .container{max-width:920px; margin:0 auto}
}

/* subtle animations */
.module-tile{transform:translateY(6px); transition:transform .28s cubic-bezier(.2,.9,.25,1), box-shadow .28s}
.module-tile:hover{transform:translateY(0); box-shadow:0 12px 30px rgba(20,179,123,.12)}
.choice{transition:transform .18s ease, box-shadow .18s}
.choice:active{transform:scale(.998)}

/* small util */
.hidden{display:none}