:root{
  --bg:#0b0f12; --surface:#0f1621; --panel:#0d121a; --text:#f0f3f8; --muted:#a4b1c2;
  --accent:#ffcf4a; --accent-2:#46e1b6; --line:#1c2534; --ring:rgba(255,207,74,.35);
  --shadow:0 14px 40px rgba(0,0,0,.5);
}
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0; background:linear-gradient(180deg,#0a0f16,var(--bg) 18%); color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial; font-size:16px; line-height:1.45;
}
a{ color:#9dc6ff; text-decoration:none } a:hover{ text-decoration:underline }
.header{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:.75rem;
  padding:.75rem .875rem; background:rgba(15,22,33,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.brand{ font-weight:900; letter-spacing:.3px; font-size:1rem }
.spacer{ flex:1 }
.btn{
  appearance:none; border:none; border-radius:.9rem; padding:.7rem .9rem; font-weight:800; cursor:pointer;
  background:var(--accent); color:#14161b; box-shadow:var(--shadow);
}
.btn.ghost{ background:#12161f; color:var(--text); border:1px solid var(--line); box-shadow:none }
.container{ max-width:1000px; margin:0 auto; padding:1rem }
.hero{ padding:1rem 0 .5rem }
.hero h1{ margin:.25rem 0; font-size:clamp(1.4rem, 3.8vw, 2rem) }
.hero p{ margin:.25rem 0; color:var(--muted); font-size:.95rem }
.bar{ margin-top:.75rem; display:flex; gap:.5rem }
.input{
  flex:1; padding:.9rem 1rem; border-radius:1rem; background:#0a0f16; color:var(--text);
  border:1px solid var(--line); outline:none; font-size:16px;
}
.input:focus{ border-color:var(--accent); box-shadow:0 0 0 .35rem var(--ring) }
.tags{ margin-top:.6rem; display:flex; flex-wrap:wrap; gap:.5rem }
.tag{ padding:.55rem .8rem; border-radius:999px; border:1px solid var(--line); background:#0b1220; color:var(--muted); cursor:pointer }
.grid{ display:grid; grid-template-columns:1fr; gap:.8rem; margin-top:1rem }
@media (min-width: 820px){ .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.card{
  border:1px solid var(--line); background: radial-gradient(130% 100% at 0% 0%, rgba(255,207,74,.07), rgba(13,18,26,.85)), var(--panel);
  padding:1rem; border-radius:1rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.5rem
}
.card h3{ margin:0; font-size:1.05rem }
.card .meta{ color:var(--muted); font-size:.8rem }
.card .tags{ margin-top:.25rem }
.pill{ font-size:.75rem; border:1px solid var(--line); padding:.15rem .6rem; border-radius:999px; color:var(--muted) }
.footer{ padding:1rem; border-top:1px solid var(--line); background:#0a0f16; color:var(--muted); text-align:center; font-size:.9rem }
.split{ display:grid; grid-template-columns:1fr; gap:.9rem }
@media (min-width: 980px){ .split{ grid-template-columns: 1fr 360px; } }
.panel{
  border:1px solid var(--line); background: linear-gradient(180deg, #0f1621, #0a0f16);
  padding:1rem; border-radius:1rem; box-shadow: var(--shadow);
}
label{ display:block; font-size:.85rem; color:var(--muted); margin:.4rem 0 .3rem }
textarea{ min-height:140px; resize:vertical }
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:15;
  display:flex; gap:.5rem; padding:.5rem; background:rgba(10,15,22,.9); backdrop-filter:blur(8px); border-top:1px solid var(--line);
}
.bottom-nav a{ flex:1; text-align:center }
.bottom-nav .btn{ width:100%; padding:.85rem 0 }
:focus-visible{ outline:2px dashed var(--accent); outline-offset:2px }
.touch { min-height:44px }