:root { --bg:#f6f1e8; --ink:#1a140c; --card:#fffaf3; --ln:#ead9c0; --gold:#c9972a; --up:#1a8f5c; --dn:#c4453c; --m:#7a6a55; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:linear-gradient(180deg,#fff8ec,#f3ead8); color:var(--ink); font-family:"DM Sans",sans-serif; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
.btn,.ghost,.inst,.upb,.dnb,input { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease; }
.btn:hover,.ghost:hover { transform:translateY(-1px); }
.inst:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(26,20,12,.08); }
.modal { animation: fade .2s ease; }
@keyframes fade { from { opacity:0 } to { opacity:1 } }
#app { animation: fade .35s ease; }
h1,h2 { font-family:Fraunces,serif; margin:0; }
.nav { display:flex; justify-content:space-between; align-items:center; padding:16px 28px; border-bottom:1px solid var(--ln); background:#fffaf3cc; backdrop-filter:blur(10px); position:sticky; top:0; }
.logo { font-family:Fraunces,serif; font-size:22px; }
.logo span { color:var(--gold); }
.btn { background:var(--gold); color:#1a140c; border:0; border-radius:999px; padding:11px 18px; font-weight:700; cursor:pointer; }
.ghost { background:transparent; border:1px solid var(--ln); border-radius:999px; padding:9px 16px; cursor:pointer; }
.hero { max-width:1080px; margin:0 auto; padding:56px 24px 24px; }
.hero p { color:var(--m); font-size:18px; max-width:560px; line-height:1.5; }
.pills { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.pill { background:#fff; border:1px solid var(--ln); border-radius:999px; padding:8px 14px; font-size:13px; }
.board { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:1080px; margin:12px auto 40px; padding:0 24px; }
.inst { background:var(--card); border:1px solid var(--ln); border-radius:16px; padding:16px; cursor:pointer; }
.inst b { display:block; font-size:13px; color:var(--m); }
.inst .px { font-family:Fraunces,serif; font-size:26px; margin:6px 0; }
.term { display:grid; grid-template-columns:1fr 320px; gap:16px; max-width:1080px; margin:0 auto 40px; padding:0 24px; }
.panel { background:var(--card); border:1px solid var(--ln); border-radius:18px; padding:20px; min-height:320px; }
.upb,.dnb { width:48%; border:0; padding:16px; border-radius:12px; font-size:16px; font-weight:800; cursor:pointer; }
.upb { background:var(--up); color:#fff; } .dnb { background:var(--dn); color:#fff; }
input { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--ln); font:inherit; }
.k { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--m); }
.modal { position:fixed; inset:0; background:#1a140c88; display:grid; place-items:center; }
.box { background:#fffaf3; padding:24px; border-radius:16px; width:min(420px,92vw); }
@media (max-width:900px){ .board,.term { grid-template-columns:1fr; } }