:root{
  --bg-1: #f6fbff;
  --panel: #ffffff;
  --accent: #8ad4ff;
  --accent-2: #ffd7a6;
  --home-1: #ffffff;
  --home-2: #000000;
  --card: #ffffff;
  --muted: #6b7b8b;
  --text: #14303f;
  --shadow: 0 8px 20px rgba(20,30,50,0.06);
  --radius: 16px;
  --toggle-bg: rgba(255,255,255,0.9);
  --toggle-ico-filter: none;
  --icon-color: #0b4b56;
}

body.dark{
  --bg-1: linear-gradient(180deg,#071423,#05202b);
  --panel: #071423;
  --card: #0b2330;
  --accent: #5eead4;
  --accent-2: #ffd86b;
  --muted: #9fb6bd;
  --text: #e6f6f4;
  --shadow: 0 10px 30px rgba(2,6,23,0.5);
  --toggle-bg: rgba(10,20,30,0.6);
  --toggle-ico-filter: hue-rotate(140deg) brightness(1.05);
  --icon-color: #120f0f; 
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg-1);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.wrapper{
  width:100%;
  max-width:980px;
  background: transparent;
  border-radius:20px;
  padding:20px;
  position:relative;
  overflow:visible;
}

header{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:18px;
}

.logo{
  width:64px;height:64px;border-radius:18px;
  display:grid;place-items:center;
  background: linear-gradient(135deg,var(--accent), var(--accent-2));
  font-family: 'Baloo 2', cursive;
  font-size:20px;color:#083048;
  box-shadow: var(--shadow);
}

h1{font-family:'Baloo 2',cursive;margin:0;font-size:20px}
p.lead{color:var(--muted);margin:0;font-size:13px}

.grid{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:18px;
  align-items:start;
}

.card-wrap{display:flex;flex-direction:column;gap:10px}

.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:18px;
  min-height:180px;
  position:relative;
  overflow:visible;
  border:1px solid rgba(10,30,50,0.04);
  transition:transform .35s ease, box-shadow .35s ease, background .35s;
  box-shadow: var(--shadow);
}

.card:hover{transform:translateY(-6px)}

.card .top{display:flex;align-items:center;gap:12px}
.icon-wrap{
  width:60px;height:60px;border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.7), rgba(250,250,250,0.9));
  display:grid;place-items:center;border:1px solid rgba(10,30,50,0.03);
  color:var(--icon-color);
}

.title{font-size:18px;margin:0;color: var(--text)}
.subtitle{margin:6px 0 0;color:var(--muted);font-size:13px}

.card .description{margin-top:12px;color: #355b6a;font-size:14px;line-height:1.35}

.card-actions{display:flex;gap:12px;align-items:center}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 18px;border-radius:12px;border:none;outline:none;font-weight:700;cursor:pointer;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#083048;box-shadow:0 6px 18px rgba(10,30,50,0.08);
  transition:transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s, filter .18s;
  transform: scale(0.98) translateZ(0);
  text-decoration:none;
}

.btn:hover, .btn:focus{
  transform: translateY(-4px) scale(1.06);
  box-shadow:0 12px 30px rgba(10,30,50,0.12);
}
.btn:active{transform:translateY(1px) scale(1.01);}

.btn-ghost{background:transparent;border:1px solid rgba(8,48,72,0.08);color:var(--muted);padding:8px 14px;border-radius:10px}

.theme-toggle{
  position:fixed;right:18px;top:18px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--toggle-bg);border:1px solid rgba(10,30,50,0.06);box-shadow:var(--shadow);cursor:pointer;transition:transform .12s, box-shadow .12s, background .18s;
  z-index:1100;
}
.theme-toggle:hover{transform:translateY(-3px)}
.theme-toggle svg{width:22px;height:22px;filter:var(--toggle-ico-filter);transition:transform .18s}
.theme-toggle[aria-pressed="true"] svg{transform:rotate(20deg) scale(1.02)}

@media (max-width:820px){
  .grid{grid-template-columns:1fr}
  body{padding:16px}
  .logo{width:56px;height:56px}
  .theme-toggle{right:12px;top:12px}
}

.card{opacity:0;transform:translateY(12px)}
.card.visible{opacity:1;transform:translateY(0);transition:all .6s cubic-bezier(.22,.9,.3,1)}

.btn:focus{outline:3px solid rgba(135,206,250,0.25);outline-offset:3px}
.theme-toggle:focus{outline:3px solid rgba(135,206,250,0.18);outline-offset:3px}

.home-btn{
  position:fixed;
  left:18px;
  top:18px;
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:var(--toggle-bg);
  border:1px solid rgba(10,30,50,0.06);
  box-shadow:var(--shadow);
  cursor:pointer;
  z-index:1102; 
  transition:transform .12s, box-shadow .12s, background .18s;
}
.home-btn:hover{ transform: translateY(-3px); }
.home-btn:active{ transform: translateY(1px) scale(.99); }

.home-btn.contrast{
  color: linear-gradient(90deg, var(--home-2), var(--home-1));
  box-shadow: 0 14px 36px rgba(8,24,40,0.14);
  border-color: rgba(0,0,0,0.06);
}

.home-btn:focus{ outline:3px solid rgba(135,206,250,0.18); outline-offset:3px; }

@media (max-width:820px){
  .home-btn{ left:12px; top:12px; width:40px; height:40px; }
}