:root{
  --teal-deep:#0f4d55;
  --teal:#1b7a83;
  --teal-light:#3fa8a8;
  --amber:#e8a23a;
  --amber-light:#f4c877;
  --cream:#f7f2e4;
  --ink:#1f2b28;
  --ok:#3f9142;
  --bad:#c85a4a;
  --paper:#fffdf8;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 8%, rgba(63,168,168,0.18), transparent 40%),
    radial-gradient(circle at 90% 85%, rgba(232,162,58,0.18), transparent 45%),
    var(--cream);
  font-family:'Space Grotesk', sans-serif;
  color:var(--ink);
}
.app{width:100%;max-width:640px;margin:0 auto;padding:32px 16px 60px;}
.masthead{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.pin{
  width:44px;height:44px;flex:none;
  border-radius:50% 50% 50% 0;
  background:linear-gradient(135deg,var(--amber),var(--amber-light));
  transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
}
.pin::after{content:"";width:16px;height:16px;background:var(--paper);border-radius:50%;transform:rotate(45deg);}
h1{font-family:'Fredoka', sans-serif;font-size:clamp(24px,5vw,32px);margin:0;line-height:1.05;color:var(--teal-deep);}
.subtitle{font-size:14px;color:#5b6b66;margin-top:2px;}

.card{
  background:var(--paper);
  border:2px solid var(--teal-deep);
  border-radius:20px;
  padding:22px 22px 20px;
  box-shadow:6px 6px 0 rgba(15,77,85,0.15);
  position:relative;
  margin-bottom:16px;
}

.btn{
  border:none;
  border-radius:12px;
  padding:13px 18px;
  font-family:'Fredoka', sans-serif;
  font-weight:600;
  font-size:15.5px;
  cursor:pointer;
  transition:transform .08s ease;
}
.btn:active{transform:translateY(2px);}
.btn-primary{background:var(--teal-deep);color:#fff;box-shadow:0 3px 0 #0a373d;}
.btn-primary:active{box-shadow:0 1px 0 #0a373d;}
.btn-amber{background:var(--amber);color:#3a2508;box-shadow:0 3px 0 #b87a1e;}
.btn-amber:active{box-shadow:0 1px 0 #b87a1e;}
.btn-block{width:100%;display:block;}

input[type="text"], input[type="password"]{
  width:100%;
  border:2px solid #dcd4bc;
  background:#fffef9;
  border-radius:12px;
  padding:12px 14px;
  font-family:'Space Grotesk', sans-serif;
  font-size:16px;
  color:var(--ink);
  outline:none;
}
input[type="text"]:focus, input[type="password"]:focus{border-color:var(--teal-light);}

.badge{
  display:inline-block;
  font-family:'Fredoka', sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:999px;
  background:#e6f3f2;
  color:var(--teal-deep);
}
.badge.crucigrama{background:#fdf1dc;color:#8a5a10;}
.badge.memotest{background:#e6f3f2;color:#1b7a83;}

footer{text-align:center;font-size:12px;color:#a49d84;margin-top:18px;}