:root { --bg:#f7f8fa; --card:#fff; --pri:#2563eb; --err:#dc2626; --ok:#16a34a; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, "Apple SD Gothic Neo", sans-serif;
       background:var(--bg); color:#111; }
#app { max-width: 720px; margin:0 auto; padding:16px; }
.card { background:var(--card); border-radius:12px; padding:16px; margin:12px 0;
        box-shadow:0 1px 4px rgba(0,0,0,.06); }
h1{font-size:1.4rem;} h2{font-size:1.1rem;}
.hint { color:#666; font-size:.9rem; }
.error { color:var(--err); font-size:.9rem; min-height:1.2em; }
input[type=file], input[type=password] { width:100%; padding:10px; margin:8px 0;
        border:1px solid #ddd; border-radius:8px; }
button { background:var(--pri); color:#fff; border:0; border-radius:8px;
         padding:10px 16px; font-size:1rem; cursor:pointer; }
button.ghost { background:transparent; color:#666; border:1px solid #ccc; }
button:disabled { opacity:.5; cursor:not-allowed; }
.hidden { display:none; }
.steps { display:flex; gap:8px; flex-wrap:wrap; padding:8px 0; }
.step { font-size:.85rem; color:#999; }
.step.active { color:var(--pri); font-weight:600; }
.k-ok { color:var(--ok); } .k-err { color:var(--err); }
.loading { padding:12px; color:var(--pri); }
.result-item { border-left:3px solid var(--pri); padding:8px 12px; margin:8px 0; }
.result-item.ungrounded { border-color:var(--err); }
.sources { font-size:.8rem; color:#666; margin-top:4px; }
@media (min-width:600px){ #app{ padding:24px; } }