* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, Arial, sans-serif;
  background: #0f1220;
  color: #f4f6ff;
}
.wrap { max-width: 1100px; margin: 28px auto; padding: 0 16px 28px; }
h1 { margin: 0 0 6px; font-size: 2rem; }
.sub { margin: 0 0 18px; opacity: .88; }
.card {
  background: #171b2f;
  border: 1px solid #2a3157;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
}
.grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1.4fr .9fr;
}
label { display: block; margin-bottom: 8px; font-weight: 700; }
.row { display: flex; gap: 10px; }
input, textarea {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #3a4374;
  background: #0f1220;
  color: #f4f6ff;
}
textarea { margin-top: 10px; }
button {
  border: 0;
  border-radius: 10px;
  background: #5b7cfa;
  color: #fff;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
button:disabled { opacity: .65; cursor: not-allowed; }
button.ghost { background: #2a3157; }
details summary { cursor: pointer; margin-top: 10px; }
h2, h3 { margin: 0 0 10px; }
.title-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.btns { display: flex; gap: 8px; }
.meta { opacity: .85; margin-bottom: 12px; font-size: .95rem; }
ul, ol { margin: 8px 0 0; padding-left: 20px; }
li { margin: 5px 0; }
.saved-list { max-height: 520px; overflow: auto; }
.saved-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.saved-list a { color: #a9bcff; text-decoration: none; }
.saved-list a:hover { text-decoration: underline; }
button.tiny { padding: 6px 10px; font-size: .85rem; }
button.danger { background: #8e2f3d; }
button.danger:hover { background: #a63b4a; }
.row-mini { display: flex; gap: 6px; align-items: center; }
.linklike { background: transparent; border: 0; color: #a9bcff; padding: 0; font-weight: 600; text-align: left; }
.linklike:hover { text-decoration: underline; }
.link-btn { text-decoration: none; display: inline-block; }
.hint { opacity: .75; font-size: .92rem; margin-top: 8px; }
.muted { opacity: .6; font-size: .85rem; }

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  .title-row { flex-direction: column; align-items: flex-start; }
}