:root{
  --green-950:#0b1f17;
  --green-900:#12281f;
  --green-800:#173327;
  --green-700:#20503c;
  --green-600:#2d6a4f;
  --green-500:#3fa06c;
  --green-400:#52b788;
  --green-300:#92d2b0;
  --accent:#43a047;
  --danger:#d32f2f;
  --card-bg:#0f1b16;
  --muted:#9fb3a8;
  --max-width:1100px;
  --radius:12px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background: radial-gradient(1200px 600px at 20% -10%, #1a3a2d 0%, transparent 60%),
              radial-gradient(1200px 600px at 120% 10%, #0f1f19 0%, transparent 55%),
              linear-gradient(180deg, #0b1f17 0%, #000 100%);
  color:#e6f5ee;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Dark mode palette (keeps green/white/black) */
.dark{
  background: radial-gradient(1200px 600px at 20% -10%, #0f1f19 0%, transparent 60%),
              radial-gradient(1200px 600px at 120% 10%, #07100c 0%, transparent 55%),
              linear-gradient(180deg, #000 0%, #000 100%);
  color:#ecfff6;
}
.dark header{background:linear-gradient(90deg,#143c2b,#0b1f17)}
.dark .tab-nav{background:linear-gradient(90deg, rgba(30,64,46,.35), rgba(8,18,14,.35))}
.dark .tab-btn{background:#1f5a41}
.dark .tab-btn.active{background:#0a1a13}
.dark .card{background:rgba(12,22,18,.7);border-color:rgba(94,167,128,.22)}
.dark .profile-section{background:rgba(12,22,18,.5)}
.dark .login-card,.dark .info-card,.dark .media-card,.dark .contact-card{background:#0d1914}
.dark .primary-btn{background:linear-gradient(90deg,#2e7a58,#0a1a13)}
.dark .mood{background:#0f1b16}

/* Surprise modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:1000}
.modal{width:min(420px,90%);background:linear-gradient(180deg,#11221b,#0b1713);border:1px solid rgba(94,167,128,.25);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.45);overflow:hidden}
.modal header{background:linear-gradient(90deg,#2d6a4f,#173327);padding:12px 16px}
.modal header h4{margin:0;font-size:16px}
.modal .content{padding:16px;color:#dff7ec}
.modal .actions{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;background:#0d1914}
.modal .btn{padding:8px 12px;border-radius:10px;border:1px solid rgba(226,255,239,.2);background:#173327;color:#eafff5;cursor:pointer}
.show-modal{display:flex}

/* Toast notifications */
.toast-container{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:1100}
.toast{min-width:260px;max-width:360px;background:linear-gradient(180deg,#0f1b16,#0b1512);border:1px solid rgba(94,167,128,.25);color:#eafff5;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.45);padding:12px 14px;display:flex;gap:10px;align-items:flex-start;transform:translateY(16px);opacity:0;animation:toast-in .35s ease forwards}
.toast.success{border-color:rgba(67,160,71,.6)}
.toast.error{border-color:rgba(211,47,47,.7)}
.toast .title{font-weight:700;margin:0 0 4px 0}
.toast .msg{margin:0;color:#cfe9dc}
.toast .icon{font-size:18px;line-height:1;margin-top:2px}
.toast .close{margin-left:auto;background:transparent;border:0;color:#9fb3a8;cursor:pointer;font-size:16px}
@keyframes toast-in{to{transform:translateY(0);opacity:1}}
@keyframes toast-out{to{transform:translateY(16px);opacity:0}}

header{
  background:linear-gradient(90deg,var(--green-700),var(--green-900));
  color:#fff;
  padding:18px 12px;
  box-shadow:0 4px 14px rgba(27,67,50,0.12);
}

.header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  gap:16px;
  align-items:center;
}

.logo{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  background:transparent;
  padding:0;
  border:1px solid rgba(94,167,128,.25);
  box-shadow:0 4px 10px rgba(0,0,0,0.25);
}

.title-wrap h1{
  margin:0;
  font-size:20px;
  letter-spacing:0.2px;
}

.subtitle{
  margin:2px 0 0 0;
  font-size:13px;
  opacity:0.9;
}

.tab-nav{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:12px;
  background:linear-gradient(90deg, rgba(47,94,73,.35), rgba(15,28,22,.35));
}

.tab-btn{
  background:var(--green-600);
  color:#fff;
  border:none;
  padding:10px 18px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
}

.tab-btn.active{background:#0e241c}

main{
  max-width:var(--max-width);
  margin:24px auto;
  width:92%;
  flex:1;
}

.card{
  background:rgba(17,30,25,.65);
  border:1px solid rgba(94,167,128,.2);
  backdrop-filter:blur(8px);
  border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
  padding:22px;
}

.tab-content{display:none}
.tab-content.active{display:block}

/* Form layout */
label{display:block;margin:12px 0 6px 0;font-weight:600;font-size:14px}
input[type="text"],input[type="email"],input[type="password"],select,textarea{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(226, 255, 239, .15);
  background:#0d1914;
  color:#e9fff6;
  font-size:14px;
}

.pw-row{display:flex;gap:8px;align-items:center}
.tiny-btn{padding:8px 10px;border-radius:8px;border:1px solid rgba(226,255,239,.2);background:#0f1b16;color:#e6fff3;cursor:pointer}

.form-actions{margin-top:16px}
.primary-btn{
  background:linear-gradient(90deg,#2d6a4f,#0e241c);
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}
.primary-btn:hover{filter:brightness(.95)}

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

.error{color:var(--danger);margin-top:6px}
.small{font-size:13px;color:var(--muted)}
.success-text{color:#43a047}

/* Products */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:14px}
.product-item{border-radius:10px;border:1px solid #eef6ef;padding:12px;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.product-item img{width:100%;height:140px;object-fit:cover;border-radius:8px}
.product-item h3{margin:0;font-size:16px}

/* Login cards */
.login-card{border-radius:10px;padding:14px;border:1px solid rgba(94,167,128,.25);background:#0f1b16;margin-bottom:12px}
.login-card h3{margin:0 0 10px 0}

/* Quiz */
.quiz-wrap{margin-top:14px}
.progress-bar-container{background:#0d1914;border-radius:6px;height:12px;overflow:hidden;margin-bottom:12px;border:1px solid rgba(94,167,128,.25)}
.progress-bar{height:100%;width:0%;background:var(--accent);transition:width .25s linear}
.choices{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.choice-btn{padding:10px 12px;border-radius:10px;border:0;background:#66bb6a;color:#fff;cursor:pointer;font-weight:600}
.choice-btn:hover{background:#58a14d}

/* Certificate area */
.cert-wrap{margin-top:12px}
.primary-link{display:inline-block;padding:10px 14px;background:var(--green-500);color:#fff;border-radius:8px;text-decoration:none}

/* Footer */
footer{max-width:var(--max-width);margin:22px auto 10px auto;text-align:center;color:#8aa097;padding-bottom:18px}

/* ---------- PROFILE THEME ---------- */
.profile-hero{background:linear-gradient(180deg, rgba(24,56,43,.7), rgba(6,14,11,.7));border-radius:16px;padding:24px;margin-bottom:18px;border:1px solid rgba(94,167,128,.25)}
.hero-inner{display:flex;gap:18px;align-items:center}
.avatar{width:96px;height:96px;border-radius:50%;border:3px solid #2d6a4f;background:#0f1b16;object-fit:cover}
.greeting{margin:0 0 6px 0}
.aka{margin:0 0 8px 0;color:#9fb3a8}
.bio{margin:0;color:#cfe9dc}
.hero-actions{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#1b3127;color:#dff7ec;border:1px solid rgba(94,167,128,.35);padding:8px 12px;border-radius:999px;cursor:pointer}
.chip.alt{background:#234236}
.chip.hollow{background:transparent}
.chip.shop{background:#2d6a4f}

.profile-section{background:rgba(17,30,25,.45);border:1px solid rgba(94,167,128,.2);padding:18px;border-radius:14px;margin:16px 0}
.profile-section h3{margin:0 0 12px 0}

.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.info-card{background:#0f1b16;border:1px solid rgba(94,167,128,.2);border-radius:12px;padding:14px}
.list{margin:0;padding-left:18px;color:#cfe9dc}

.favorite-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.favorite-card{position:relative;border-radius:14px;overflow:hidden;min-height:160px;background:#0f1b16}
.favorite-card::before{content:"";position:absolute;inset:0;background-image:var(--bg);background-size:cover;background-position:center;filter:grayscale(.2) brightness(.7)}
.favorite-overlay{position:relative;z-index:1;inset:0;padding:14px;color:#eafff5;background:linear-gradient(180deg,rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.favorite-overlay h5{margin:0 0 4px 0;font-size:18px}
.favorite-overlay p{margin:0;color:#cfe9dc}

.moods{display:flex;gap:12px}
.mood{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 18px;border-radius:12px;border:1px solid rgba(94,167,128,.25);background:#0f1b16;color:#eafff5;cursor:pointer}
.mood span{font-size:12px;color:#a9c9ba}
.mood.active{outline:2px solid #3fa06c}

.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.media-card{background:#0f1b16;border:1px solid rgba(94,167,128,.25);border-radius:14px;padding:14px}
.media{display:flex;gap:14px;align-items:flex-start}
.media img{width:220px;height:160px;object-fit:cover;border-radius:12px}
.media-text h4{margin:0 0 6px 0}
.media-card .wide{width:100%;height:260px;object-fit:cover;border-radius:12px}

.contact-card{background:#0f1b16;border:1px solid rgba(94,167,128,.25);border-radius:14px;padding:14px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.table-wrap{overflow:auto}
.skill-table{width:100%;border-collapse:separate;border-spacing:0 8px}
.skill-table thead th{text-align:left;color:#a9c9ba;font-weight:600}
.skill-table tbody td{background:#0f1b16;border:1px solid rgba(94,167,128,.2);padding:10px}
.skill-table tbody tr td:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}
.skill-table tbody tr td:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}

@media (max-width:900px){
  .cards-3,.favorite-grid{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .media{flex-direction:column}
}
@media (max-width:700px){
  .header-inner{flex-direction:column;gap:8px}
  .logo{width:60px;height:60px}
}