/* /static/css/removals.css */
:root {
  --ink:#1a1d29; --soft:#54596b; --faint:#9499ad;
  --bg:#f4f3ef; --paper:#fff; --line:#e6e7ec; --line-2:#d9dbe3;
  --accent:#4769fc; --accent-ink:#2b46c8; --accent-soft:#eef2ff;
  --bad:#d23f3a; --bad-ink:#ad302c;
  --radius:16px; --shadow:0 1px 2px rgba(16,24,64,.05),0 10px 30px rgba(16,24,64,.07);
}
* { box-sizing:border-box; }
body { margin:0; font-family:"Inter",system-ui,Arial,sans-serif; background:var(--bg);
  color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
.wrap { max-width:760px; margin:0 auto; padding:0 20px 60px; }

.head { display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px; background:var(--paper); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; }
.logo { font-weight:800; letter-spacing:-.01em; font-size:17px; }
.logo .w1{color:#000} .logo .w2{color:#3F3F3F;margin-left:.28em} .logo .w3{color:#7B7B7B;margin-left:.28em}
.brand small { color:var(--faint); font-weight:600; font-size:12px;
  border-left:1px solid var(--line-2); padding-left:10px; }
.head-link { font-weight:600; font-size:14px; color:var(--soft); }

.hero { text-align:center; padding:46px 0 26px; }
.hero h1 { font-size:clamp(26px,4vw,38px); letter-spacing:-.025em; margin:0 0 12px; }
.hero .lead { font-size:17px; color:var(--soft); margin:0 auto; max-width:520px; }

/* choice cards */
.choices { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:14px; }
.choice { display:flex; flex-direction:column; gap:8px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px;
  box-shadow:var(--shadow); color:var(--ink); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.choice:hover { transform:translateY(-3px); box-shadow:0 14px 36px rgba(16,24,64,.12); border-color:var(--line-2); }
.choice-icon { font-size:26px; width:52px; height:52px; display:flex; align-items:center;
  justify-content:center; background:var(--accent-soft); color:var(--accent-ink);
  border-radius:13px; margin-bottom:6px; }
.choice h2 { font-size:18px; margin:0; }
.choice p { font-size:14px; color:var(--soft); margin:0; }
.choice-go { margin-top:8px; font-weight:700; color:var(--accent); font-size:14px; }
@media (max-width:600px){ .choices{ grid-template-columns:1fr; } }

/* search */
.search-box { display:flex; gap:10px; margin:6px 0 22px; }
.search-box input { flex:1; padding:13px 15px; border:1px solid var(--line-2);
  border-radius:12px; font:inherit; font-size:15px; }
.search-box input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.btn { border:none; background:var(--accent); color:#fff; font:inherit; font-weight:600;
  font-size:15px; padding:13px 18px; border-radius:12px; cursor:pointer;
  transition:background .15s ease, transform .1s ease; }
.btn:hover { background:var(--accent-ink); }
.btn:active { transform:translateY(1px); }
.btn.sm { padding:8px 13px; font-size:13px; }
.btn.ghost { background:#fff; border:1px solid var(--line-2); color:var(--ink); }
.btn.ghost:hover { background:#f6f7fb; }
.btn.bad { background:var(--bad); } .btn.bad:hover { background:var(--bad-ink); }

/* results */
.results { display:flex; flex-direction:column; gap:12px; }
.muted { color:var(--faint); text-align:center; padding:24px; }
.result { border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:16px;
  box-shadow:0 3px 10px rgba(0,0,0,.06); }
.r-to { font-weight:700; font-size:14px; padding-bottom:6px; border-bottom:1px solid rgba(0,0,0,.25); }
.r-msg { font-size:15px; color:#333; margin-top:10px; white-space:pre-wrap; word-break:break-word; }
.r-foot { display:flex; align-items:center; justify-content:space-between; margin-top:12px;
  font-size:12px; color:#777; }
.green{background:#A8E6A1}.blue{background:#A7D8F3}.yellow{background:#F9ECA1}
.pink{background:#F5A3B7}.purple{background:#D0A4E3}.orange{background:#F6C5A6}
.red{background:#F3A4A1}.teal{background:#A7D8D8}.white{background:#fff}

/* modal */
.modal { position:fixed; inset:0; background:rgba(20,24,40,.55); display:none;
  align-items:center; justify-content:center; padding:20px; z-index:100; }
.modal.open { display:flex; animation:fade .2s ease; }
@keyframes fade { from{opacity:0} to{opacity:1} }
.modal-card { background:#fff; border-radius:18px; padding:26px; max-width:460px; width:100%;
  box-shadow:0 24px 60px rgba(0,0,0,.4); animation:rise .28s cubic-bezier(.2,.7,.2,1); }
@keyframes rise { from{opacity:0;transform:translateY(12px) scale(.98)} to{opacity:1;transform:none} }
.modal-card h3 { margin:0 0 10px; font-size:19px; }
.modal-card p { font-size:14px; color:var(--soft); margin:0 0 12px; line-height:1.6; }
.m-card { border-radius:12px; padding:14px; margin:12px 0; }
.m-note { font-size:12.5px; color:var(--faint); }
.m-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }
.m-spin { text-align:center; padding:24px; color:var(--soft); }
.modal-card textarea { width:100%; border:1px solid var(--line-2); border-radius:11px;
  padding:11px 13px; font:inherit; font-size:14px; resize:vertical; }
.modal-card textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.modal-card textarea.err { border-color:var(--bad); box-shadow:0 0 0 3px var(--bad-soft,#fce8e7); }

.foot { text-align:center; padding:24px; color:var(--faint); font-size:13px;
  border-top:1px solid var(--line); background:var(--paper); }