/* ===== UselessFi — Dark Theme ===== */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700;900&display=swap');

:root{
  --bg1:#0b0c10; --bg2:#111318; --bg3:#171a21;
  --panel:#13151b; --panel2:#1a1d26;
  --border:#252a33; --border2:#2f3545;
  --ink:#f2f2f2; --muted:#9ea3b0;
  --accent:#ff4d6d; --accent2:#00e5ff; --accent3:#a78bfa;
  --glow1:rgba(255,77,109,.15); --glow2:rgba(0,229,255,.12);
  --maxw:1100px;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh;
  color:var(--ink);
  background:var(--bg2);
  background-image:
    radial-gradient(ellipse 1200px 900px at 15% -8%, #1e2230, transparent),
    radial-gradient(ellipse 800px 600px at 85% 110%, #1a1428, transparent);
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",
              "Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  font-weight:700; line-height:1.7;
}

/* === Layout === */
.page{max-width:820px;margin:0 auto;padding:24px 16px}
.page-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
h1{margin:0 0 8px;font-weight:900;font-size:clamp(1.4rem,4vw,2rem);color:#fff;text-align:center}
h2{margin:0 0 8px;font-weight:900;color:#fff;text-align:center}
p{margin:8px 0;color:var(--muted)}
b,strong{color:var(--ink)}

/* === Cards === */
.cardgrid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  max-width:var(--maxw); margin:0 auto; padding:0 14px;
}
.card{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink);
  background:linear-gradient(165deg,var(--panel),var(--panel2));
  border:1px solid var(--border); padding:16px; border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  transition:transform .1s,border-color .2s,box-shadow .25s;
}
.card:hover{
  transform:translateY(-3px);
  border-color:var(--border2);
  box-shadow:0 14px 32px rgba(0,0,0,.6),0 0 20px var(--glow2);
}
.card .em{font-size:1.5rem;flex-shrink:0}
.card b{font-weight:800;font-size:.92rem;display:block}

/* === Buttons === */
button,.cta{
  font:inherit; font-weight:800; font-size:.9rem;
  display:inline-block; padding:12px 20px;
  border-radius:12px; border:1px solid var(--border);
  background:linear-gradient(180deg,#181b24,#0f1116);
  color:#fff; text-decoration:none; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  transition:transform .08s,box-shadow .2s;
}
button:hover,.cta:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.6);
  transform:translateY(-1px);
}
button:active,.cta:active{transform:translateY(1px)}

/* === Inputs === */
input,select,textarea{
  font:inherit; font-weight:700;
  background:var(--panel); color:var(--ink);
  border:1px solid var(--border); border-radius:10px;
  padding:10px 14px; outline:none;
}
input:focus,textarea:focus{border-color:var(--accent2)}
input::placeholder{color:#555}
label{color:var(--muted)}

/* === Media === */
img,canvas,video,svg{max-width:100%;height:auto}
progress{accent-color:var(--accent);width:100%;height:22px;border-radius:12px;border:none;background:var(--panel)}

/* === Utilities === */
.muted{color:var(--muted)}
.glow-text{text-shadow:0 0 14px var(--glow1),0 0 28px var(--glow2)}

/* === Responsive === */
@media(max-width:1100px){.cardgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:750px){.cardgrid{grid-template-columns:repeat(2,1fr);gap:10px;padding:0 10px}}
@media(max-width:480px){
  .page{padding:16px 10px}
  h1{font-size:1.25rem}
  .cardgrid{gap:8px}
  .card{padding:12px;gap:8px}
  .card .em{font-size:1.2rem}
  .card b{font-size:.82rem}
  button,.cta{padding:10px 16px;font-size:.85rem}
}