:root{
  --pink:#ff6fa5;
  --pink-light:#ffe1ee;
  --purple:#7c5cbf;
  --purple-dark:#5b3d99;
  --bg:#fff8fb;
  --text:#3a2e4d;
  --muted:#7a6c8f;
}
*{box-sizing:border-box;}
html{scroll-padding-top:70px;}
html[data-theme="dark"]{
  --pink-light:#3a2540;
  --bg:#221a2e;
  --text:#f0e6f7;
  --muted:#b7a6c9;
}
html[data-theme="dark"] .card{background:#2c2138;border-color:#4a2f52;}
html[data-theme="dark"] table{color:#f0e6f7;}
html[data-theme="dark"] tr:nth-child(even){background:#2c2138;}
html[data-theme="dark"] .placeholder{background:#3a2233;color:#ffb3dd;}
html[data-theme="dark"] th,html[data-theme="dark"] td{border-color:#4a2f52;}
body{
  margin:0;
  font-family:"Quicksand",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  -webkit-text-size-adjust:100%;
}
header{
  background:linear-gradient(135deg,var(--purple),var(--pink));
  color:#fff;
  padding:1rem 1.5rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:.6rem;
  position:sticky;
  top:0;
  z-index:10;
  box-shadow:0 2px 10px rgba(124,92,191,.2);
}
header .logo{
  font-size:1.4rem;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:.4rem;
}
nav{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;}
nav a{color:#fff;text-decoration:none;font-size:.9rem;font-weight:600;opacity:.92;}
nav a:hover{opacity:1;text-decoration:underline;}
.tools{display:flex;gap:.5rem;}
.tool-btn{
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.4);
  color:#fff;
  font-weight:700;
  font-size:.8rem;
  padding:.35rem .7rem;
  border-radius:999px;
  cursor:pointer;
  font-family:inherit;
}
.tool-btn:hover{background:rgba(255,255,255,.35);}
main{max-width:880px;margin:0 auto;padding:2.2rem 1.3rem;}
h1{color:var(--purple-dark);font-size:2rem;}
h2{color:var(--purple-dark);margin-top:2rem;font-size:1.35rem;}
.hero{text-align:center;padding:1rem 0 1.5rem;}
.hero svg{width:120px;height:120px;margin-bottom:.5rem;}
.btn{
  display:inline-block;
  background:var(--pink);
  color:#fff;
  padding:.8rem 1.6rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  margin-top:1rem;
  box-shadow:0 4px 14px rgba(255,111,165,.35);
}
.btn:hover{background:var(--purple);}
.card{
  background:#fff;
  border:1px solid var(--pink-light);
  border-radius:16px;
  padding:1.3rem 1.5rem;
  margin-bottom:1.1rem;
  box-shadow:0 2px 8px rgba(124,92,191,.06);
}
table{width:100%;border-collapse:collapse;margin-top:1rem;border-radius:12px;overflow:hidden;}
th,td{border:1px solid var(--pink-light);padding:.7rem .9rem;text-align:left;}
th{background:var(--purple);color:#fff;}
tr:nth-child(even){background:#fff8fb;}
.placeholder{
  background:#fdf0f8;
  border:1px dashed var(--pink);
  padding:.7rem .9rem;
  font-size:.88rem;
  color:#9b3f74;
  border-radius:12px;
  margin:.6rem 0;
}
.tag{
  display:inline-block;
  padding:.25rem .7rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:700;
  margin:0 .4rem .5rem 0;
}
.tag-pink{background:var(--pink-light);color:var(--purple-dark);}
.tag-blue{background:#dcecfb;color:#1f4e79;}
.tag-green{background:#ddf5e3;color:#1f6b3a;}
html[data-theme="dark"] .tag-pink{background:#4a2f52;color:#ffd6ee;}
html[data-theme="dark"] .tag-blue{background:#22344a;color:#bcdcff;}
html[data-theme="dark"] .tag-green{background:#1f3a2a;color:#a6e6bd;}
ul{padding-left:1.2rem;}
footer{
  background:linear-gradient(135deg,var(--purple-dark),var(--purple));
  color:#f3e9ff;
  text-align:center;
  padding:1.6rem;
  margin-top:3rem;
  font-size:.85rem;
}
footer a{color:#ffd1e8;}
@media(max-width:480px){
  h1{font-size:1.6rem;}
  header{padding:.8rem 1rem;}
  nav{gap:.6rem;}
  nav a{font-size:.82rem;}
}