:root {
  --bg: #0e1a1f;
  --card: #152630;
  --card-2: #1b2f3c;
  --ink: #eef4f2;
  --muted: #93adb8;
  --gold: #d4af37;
  --gold-2: #b7901f;
  --green: #1f8f5a;
  --red: #c0392b;
  --border: #26404f;
  --radius: 14px;
  --shadow: 0 6px 18px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f3ea;
    --card: #ffffff;
    --card-2: #fbf7ea;
    --ink: #1a2c33;
    --muted: #647680;
    --gold: #9c7a1f;
    --gold-2: #6c530d;
    --border: #e4ddc5;
    --shadow: 0 2px 10px rgba(26,44,51,.08);
  }
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  min-height: 100vh; padding: 14px 14px 40px;
}
.hdr { margin-bottom: 12px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand .logo {
  width:46px; height:46px; border-radius:50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color:#0e1a1f;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow);
}
.brand h1 { margin:0; font-size:22px; letter-spacing:.3px; }
.brand .sub { margin:0; font-size:12px; color: var(--muted); font-family: system-ui, sans-serif; }

.pinned { margin: 8px 0 14px; }
.pinned h4 { margin: 0 0 6px; color: var(--gold); font-size:12px; letter-spacing:1px; text-transform: uppercase; font-family: system-ui, sans-serif; }
.pinned-list { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.pin-chip {
  background: var(--card-2); border:1px solid var(--border); color: var(--ink);
  border-radius:999px; padding:6px 12px; font-size:13px; white-space:nowrap; cursor:pointer;
  font-family: system-ui, sans-serif;
}
.pin-chip:active { background: var(--gold); color:#0e1a1f; }

.feed { display:flex; flex-direction:column; gap:10px; }
.card {
  background: var(--card); border:1px solid var(--border);
  border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
}
.card.open { background: var(--card-2); }
.card-hdr {
  display:flex; align-items:center; gap:10px; padding:14px;
  cursor:pointer; user-select:none;
}
.card-hdr .emo { font-size:22px; }
.card-hdr .t { flex:1; font-size:17px; font-weight:600; }
.card-hdr .pin {
  background: none; border:none; color: var(--muted); font-size:18px; cursor:pointer; padding:4px 8px;
}
.card-hdr .pin.on { color: var(--gold); }
.card-hdr .chev { color: var(--muted); transition: transform .15s ease; }
.card.open .card-hdr .chev { transform: rotate(180deg); color: var(--gold); }

.card-body { padding: 0 14px 14px; display:none; }
.card.open .card-body { display:block; }
.card-body .desc { margin: 2px 0 10px; color: var(--muted); font-family: system-ui, sans-serif; font-size:13px; }

form.tool-form { display:flex; flex-direction:column; gap:8px; font-family: system-ui, sans-serif; }
.field { display:flex; flex-direction:column; gap:4px; }
.field label { font-size:12px; color: var(--muted); }
.field input, .field select {
  background: #0e1a1f; color: var(--ink); border:1px solid var(--border);
  border-radius:10px; padding:11px; font-size:16px; width:100%;
}
@media (prefers-color-scheme: light) {
  .field input, .field select { background:#fff; }
}
button.go {
  margin-top:4px; background: var(--gold); color:#0e1a1f; border:none;
  border-radius: 10px; padding: 12px; font-size:15px; font-weight:700; cursor:pointer;
  font-family: system-ui, sans-serif;
}
button.go:active { background: var(--gold-2); color:#fff; }

.result {
  margin-top:12px; padding:12px; border:1px dashed var(--gold);
  border-radius:10px; font-family: system-ui, sans-serif;
}
.result.hidden { display:none; }
.result .big { font-size:22px; font-weight:700; color: var(--gold); margin-bottom:6px; }
.result ul { list-style:none; margin:0; padding:0; }
.result ul li { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px dotted var(--border); font-size:13px; }
.result ul li:last-child { border-bottom:none; }

.foot {
  margin-top:18px; color: var(--muted); font-size:12px; text-align:center;
  font-family: system-ui, sans-serif;
}