:root{
  --sand:#E9E3D6;
  --clay:#C9B6A6;
  --olive:#7A8C6D;
  --forest:#3E4A3F;
  --charcoal:#2F2A26;
  --sunrise:#D9A66B;
  --card:#F6F1E8;
  --stroke:rgba(47,42,38,.12);
  --shadow: 0 10px 26px rgba(47,42,38,.10);
  --radius:18px;
  --radius-sm:14px;
  --max:980px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --serif: ui-serif, Georgia, "Times New Roman", Times, serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--charcoal);
  background: radial-gradient(1200px 800px at 50% 0%, #F9F4EC 0%, var(--sand) 55%, #E6DECF 100%);
  line-height:1.45;
}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max); margin:0 auto; padding:28px 18px 60px;}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 18px;
  background:rgba(246,241,232,.88);
  border:1px solid var(--stroke);
  border-radius:999px;
  box-shadow: 
    0 2px 14px rgba(47,42,38,.06),
    inset 0 1px 0 rgba(255,255,255,.5);
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}
/* Glossy shine on nav */
.nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.25) 0%,
    transparent 100%
  );
  pointer-events: none;
  border-radius: 999px 999px 0 0;
}
.brand{display:flex; align-items:center; gap:10px}
.brand img{width:34px; height:34px; border-radius:50%}
.brand .name{
  font-family:var(--serif); 
  letter-spacing:.12em; 
  text-transform:uppercase; 
  font-size:13px;
  color: #2F2A26;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}
.navlinks{display:flex; gap:14px; font-size:13px; color: #3E4A3F;}
.navlinks a{
  padding:8px 10px; 
  border-radius:999px;
  text-shadow: 0 1px 2px rgba(255,255,255,0.4);
}
.navlinks a:hover{background:rgba(122,140,109,.12); text-decoration:none}
.navcta{display:flex; gap:10px; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(246,241,232,.92);
  color:var(--charcoal);
  cursor:pointer;
  font-weight:600;
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 2px 8px rgba(47,42,38,.08),
    inset 0 1px 0 rgba(255,255,255,.4);
}
/* Glossy shine on buttons */
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.3) 0%,
    transparent 100%
  );
  pointer-events: none;
  border-radius: 999px 999px 0 0;
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 8px 20px rgba(47,42,38,.12), inset 0 1px 0 rgba(255,255,255,.5); text-decoration:none}
.btn:active{transform: translateY(0px)}
.btn.primary{
  background: linear-gradient(180deg, rgba(122,140,109,.98), rgba(94,112,84,.98));
  color:#F7F3EA;
  border-color: rgba(62,74,63,.35);
  box-shadow: 
    0 4px 12px rgba(62,74,63,.18),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.btn.primary::before {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.2) 0%,
    transparent 100%
  );
}
.btn.primary:hover{box-shadow: 0 10px 26px rgba(62,74,63,.22), inset 0 1px 0 rgba(255,255,255,.3)}
.btn.ghost{background: transparent; border-color: rgba(47,42,38,.18); box-shadow: none;}
.btn.ghost::before{display: none;}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background: rgba(201,182,166,.45);
  border:1px solid var(--stroke);
  font-size:12px;
  color: #2F2A26;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
/* Glossy shine on pills */
.pill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.2) 0%,
    transparent 100%
  );
  pointer-events: none;
  border-radius: 999px 999px 0 0;
}
.hero{padding:46px 0 20px; display:flex; align-items:center; justify-content:center; text-align:center;}
.hero .logo{width:110px; height:110px; border-radius:50%; box-shadow: var(--shadow); border:1px solid var(--stroke); background: #F7F3EA}
.hero h1{
  margin:18px 0 8px; 
  font-family:var(--serif); 
  letter-spacing:.18em; 
  text-transform:uppercase; 
  font-size:24px;
  color: #2F2A26;
  text-shadow: 0 2px 8px rgba(255,255,255,0.9), 0 1px 3px rgba(246,241,232,0.8);
}
.hero .tag{
  margin:0; 
  font-family:var(--serif); 
  font-size:28px; 
  color: #2F2A26;
  text-shadow: 0 2px 8px rgba(255,255,255,0.9), 0 1px 3px rgba(246,241,232,0.8);
}
.hero .sub{
  max-width:760px; 
  margin:14px auto 22px; 
  color: #3E4A3F; 
  font-size:15px;
  text-shadow: 0 1px 4px rgba(255,255,255,0.8), 0 1px 2px rgba(246,241,232,0.7);
}
.section{margin:28px 0;}
.grid3{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px;}
.card{
  background: rgba(246,241,232,.92);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 
    0 6px 22px rgba(47,42,38,.12),
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(47,42,38,.04);
  padding:18px;
  position: relative;
  overflow: hidden;
}
/* Glossy glass effect */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.35) 0%,
    rgba(255,255,255,.08) 50%,
    transparent 100%
  );
  pointer-events: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.card h3{
  margin:0 0 8px; 
  font-family:var(--serif); 
  letter-spacing:.04em; 
  position: relative;
  color: #2F2A26;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}
.card p{
  margin:0; 
  color: #3E4A3F; 
  font-size:14px; 
  position: relative;
}
.softblock{
  background: rgba(201,182,166,.35); 
  border:1px solid var(--stroke); 
  border-radius: var(--radius); 
  padding:18px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
/* Glossy shine on softblock */
.softblock::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.15) 0%,
    transparent 100%
  );
  pointer-events: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.softblock h2{
  color: #2F2A26;
  text-shadow: 0 1px 3px rgba(255,255,255,0.7);
}
.softblock .small{
  color: #3E4A3F;
}
.form{max-width:720px; margin:16px auto 0;}
.stepper{display:flex; align-items:center; justify-content:space-between; gap:10px; margin: 10px 0 18px; color: rgba(47,42,38,.68); font-size:12px;}
.progress{height:10px; width:100%; background: rgba(47,42,38,.10); border-radius:999px; overflow:hidden; border:1px solid rgba(47,42,38,.10);}
.progress > div{height:100%; width:0%; background: rgba(122,140,109,.95);}
.field{margin:14px 0;}
.label{font-weight:700; margin-bottom:8px;}
.options{display:grid; gap:10px;}
.option{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px;
  border-radius: var(--radius-sm);
  border:1px solid var(--stroke);
  background: rgba(246,241,232,.72);
}
.option:hover{background: rgba(122,140,109,.10);}
.option input{margin-top:3px;}
.hint{color: rgba(47,42,38,.65); font-size:12px; margin-top:6px;}
.row{display:flex; gap:12px; flex-wrap:wrap;}
.row > *{flex:1;}
.footer{
  margin-top:38px; 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:12px; 
  color: #3E4A3F; 
  font-size:12px;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}
.footer a{
  color: #3E4A3F;
}
.center{display:flex; justify-content:center; align-items:center; text-align:center;}
.appShell{display:grid; grid-template-columns: 240px 1fr; gap:14px; margin-top:18px;}
.sidebar{
  position:sticky; top:18px; align-self:start;
  background: rgba(246,241,232,.78);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 0 6px 22px rgba(47,42,38,.08);
  padding:14px;
}
.sideTitle{font-family:var(--serif); letter-spacing:.12em; text-transform:uppercase; font-size:12px; margin: 2px 0 10px; color: rgba(47,42,38,.75);}
.sideLink{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius: 12px; color: rgba(47,42,38,.85);}
.sideLink:hover{background: rgba(122,140,109,.12); text-decoration:none;}
.sideLink.active{background: rgba(122,140,109,.18); font-weight:800;}
.main{min-height:70vh;}
.kv{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.energy{min-width:240px; background: rgba(201,182,166,.22); border:1px solid var(--stroke); border-radius: var(--radius); padding:14px;}
.energyTop{display:flex; justify-content:space-between; font-size:12px; color: rgba(47,42,38,.75);}
.energyBar{height:12px; background: rgba(47,42,38,.12); border-radius:999px; overflow:hidden; margin-top:8px; border:1px solid rgba(47,42,38,.10);}
.energyBar > div{height:100%; width:50%; background: rgba(122,140,109,.95);}
.badgeTest{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 8px; border-radius:999px;
  font-size:11px;
  border:1px solid rgba(217,166,107,.30);
  background: rgba(217,166,107,.18);
  color: rgba(47,42,38,.85);
}
.small{
  font-size:12px; 
  color: #3E4A3F;
  text-shadow: 0 1px 3px rgba(255,255,255,0.7);
}
hr.sep{border:0; border-top:1px solid rgba(47,42,38,.12); margin:14px 0;}
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:18px;
  background: rgba(47,42,38,.92);
  color:#F7F3EA;
  padding:12px 14px;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  font-size:13px;
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
  max-width:min(560px, calc(100% - 30px));
}
.toast.show{opacity:1}
@media (max-width: 860px){
  .grid3{grid-template-columns:1fr}
  .appShell{grid-template-columns:1fr}
  .sidebar{position:relative; top:0}
}


/* Background layer (Jellyfish Universe) */
.bgFrame{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-2;}
.bgOverlay{
  position:fixed;
  inset:0;
  z-index:-1;
  /* Warm tan glow with darker edges for space visibility */
  background:radial-gradient(
    ellipse at 50% 30%, 
    rgba(246,241,232,.78),      /* Warm cream center */
    rgba(233,227,214,.48) 35%,  /* Sand glow */
    rgba(217,166,107,.28) 55%,  /* Tan/sunrise light */
    rgba(201,182,166,.18) 75%,  /* Clay fade */
    rgba(2,4,10,.35) 100%       /* Dark space edges */
  );
  mix-blend-mode:soft-light;
  pointer-events:none;
}
body{background:transparent;}
.wrap{position:relative;}