:root { font-family: system-ui, Arial, sans-serif; }
body { margin: 0; background: #f6f7fb; }
header { padding: 18px 16px; background: white; border-bottom: 1px solid #e5e7ef; }
h1 { margin: 0; font-size: 20px; }
.sub { margin: 6px 0 0; color: #666; }

main { padding: 16px; max-width: 980px; margin: 0 auto; }
.card { background: white; border: 1px solid #e5e7ef; border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.hidden { display: none; }

label { display: grid; gap: 6px; font-size: 14px; }
input { padding: 10px; border: 1px solid #d7daea; border-radius: 8px; }

button { padding: 10px 12px; border: 0; border-radius: 8px; background: #2b59ff; color: white; cursor: pointer; }
button:hover { filter: brightness(0.95); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.secondary { background: #111827; }

.row { display: flex; gap: 10px; align-items: center; }
.between { justify-content: space-between; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

.grid { display: grid; grid-template-columns: 1fr 160px auto; gap: 10px; align-items: end; }
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }

.list { display: grid; gap: 8px; margin-top: 12px; }
.item { padding: 10px; border: 1px solid #e5e7ef; border-radius: 10px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.badge { margin-left: 10px; padding: 4px 8px; border-radius: 999px; background: #eef1ff; color: #2b59ff; font-size: 12px; }

.hint { color: #666; font-size: 13px; }
.warn { color: #8a5a00; font-size: 13px; background: #fff7e6; padding: 10px; border-radius: 8px; border: 1px solid #ffe1a6; }
.move { display: flex; justify-content: space-between; gap: 10px; padding: 10px 8px; border-bottom: 1px dashed #eee; }
.move small { color: #666; }

.details { margin-top: 6px; }
details summary { cursor: pointer; color: #111827; font-size: 13px; }
ul.tips { margin: 6px 0 0 18px; color: #111827; font-size: 13px; }