:root{
  --bg:#0f172a; --card:#111827; --muted:#94a3b8; --border:#1f2937;
  --accent:#22d3ee; --accent2:#38bdf8; --text:#e5e7eb; --danger:#f87171;
}
:root.light{
  --bg:#f8fafc; --card:#ffffff; --muted:#475569; --border:#e2e8f0;
  --accent:#06b6d4; --accent2:#0ea5e9; --text:#0f172a; --danger:#ef4444;
}

html,body{height:100%;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, Arial, sans-serif;
  background: radial-gradient(1000px 600px at 10% -10%, #0b1224 0%, var(--bg) 55%);
  color:var(--text);
  letter-spacing:.02em;
}
:root.light body{
  background: radial-gradient(900px 500px at 10% -10%, #e6f9ff 0%, var(--bg) 55%);
}

.wrap{max-width:900px; margin-inline:auto; padding:24px;}
header{margin-bottom:14px;}
.title{
  font-size:clamp(20px, 2.4vw, 28px); margin:0 0 6px; font-weight:800;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.desc{margin:0;color:var(--muted);font-size:14px;}
.muted{ color:var(--muted); font-size:13px; margin-top:4px; }

.toolbar{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.file-pill{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:10px 14px; border-radius:999px; border:1px dashed var(--border);
  color:var(--muted); cursor:pointer; user-select:none;
}
.file-pill input{ position:absolute; inset:0; opacity:0; cursor:pointer; }

/* カード/グリッド */
.card{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border-radius:16px; padding:18px; margin-bottom:16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03);
}
:root.light .card{ box-shadow: 0 8px 18px rgba(0,0,0,.06); }
.card h3{margin:4px 0 14px; font-size:18px; font-weight:700;}

.grid{display:grid; grid-template-columns:1fr; gap:12px;}
@media (min-width:700px){ .grid{ grid-template-columns: repeat(3, 1fr); } }

.input-row{display:flex; flex-direction:column; gap:6px;}
label{font-size:13px; color:#cbd5e1;}
:root.light label{ color:#334155; }
.note{color:var(--muted); font-size:12px; margin:0;}

input[type="number"]{
  background:#0b1020; color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; font-size:16px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
:root.light input[type="number"]{ background:#ffffff; }
input[type="number"]:focus{ border-color:#2dd4bf; box-shadow:0 0 0 4px rgba(45,212,191,.15); }
input.invalid{ border-color:var(--danger); box-shadow:0 0 0 4px rgba(248,113,113,.15); }

/* ボタン */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:none; border-radius:999px; padding:12px 18px;
  font-size:16px; font-weight:700; cursor:pointer;
  background:linear-gradient(90deg, var(--accent), var(--accent2)); color:#0b1020;
  box-shadow: 0 10px 24px rgba(34,211,238,.25);
  transition: transform .04s ease, filter .15s ease;
}
.btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--border); box-shadow:none; }
.btn:hover{ filter:brightness(1.05); }
.btn:active{ transform: translateY(1px); }

/* アクションバー／結果表示 */
.actions{
  position:sticky; bottom:0;
  background:linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.85) 35%, rgba(15,23,42,.95));
  backdrop-filter: blur(6px);
  padding:16px 0 8px; display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
:root.light .actions{
  background: linear-gradient(180deg, rgba(248,250,252,0), rgba(248,250,252,.85) 35%, rgba(248,250,252,.95));
}
#result{ margin-top:6px; font-weight:800; font-size:clamp(18px, 3.2vw, 24px); letter-spacing:.04em; }