*{box-sizing:border-box}
html{background:var(--ground)}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-family:var(--f-display);font-weight:600;line-height:1.25}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
::selection{background:var(--accent-soft)}

textarea,input[type="text"],input[type="url"],input[type="password"],select{
  width:100%;background:var(--surface);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:8px 10px;font-family:inherit;font-size:13.5px;
}
textarea{resize:vertical;min-height:70px;line-height:1.5}
textarea.paste{font-family:var(--f-mono);font-size:12.8px}
textarea.tall{min-height:160px}
input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent)}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field .lab{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.field .lab .hint{font-weight:400;color:var(--ink-3);margin-left:4px}

.btn{
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  border-radius:var(--radius-sm);padding:7px 12px;
  font-size:13.5px;font-weight:500;white-space:nowrap;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease;
}
a.btn{text-decoration:none;display:inline-flex;align-items:center;gap:5px;font-family:inherit}
.btn:hover{background:var(--surface-2);border-color:var(--ink-3)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
.btn-ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn-danger:hover{background:var(--mark-soft);border-color:var(--mark);color:var(--mark)}
.btn-sm{padding:4px 9px;font-size:12.5px}

.note{
  font-size:13px;color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;
}
.note.calm{background:transparent;border-style:dashed}
.note.warn{background:var(--warn-soft);border-color:var(--warn);color:var(--ink)}
.note.error{background:var(--mark-soft);border-color:var(--mark);color:var(--ink)}

.tag{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);
}

/* toast */
#toast{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,12px);
  background:var(--ink);color:var(--ground);font-size:13px;font-weight:500;
  padding:9px 16px;border-radius:999px;opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;z-index:200;box-shadow:var(--shadow);
}
#toast.show{opacity:1;transform:translate(-50%,0)}

.spinner{
  display:inline-block;width:13px;height:13px;border-radius:50%;
  border:2px solid var(--line-strong);border-top-color:var(--accent);
  animation:spin .7s linear infinite;vertical-align:-2px;
}
@keyframes spin{to{transform:rotate(360deg)}}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}