:root { --bg: #0f172a; --card: #111827; --text: #e5e7eb; --brand: #22c55e; }
* { box-sizing: border-box; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial; background: var(--bg); color: var(--text); }
.container { max-width: 960px; margin: 0 auto; padding: 2rem; }
.hero { display: grid; gap: 1rem; grid-template-columns: 1.2fr 1fr; align-items: center; }
.card { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 1.5rem; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
h1 { font-size: 2rem; margin: 0 0 .5rem; }
h2 { font-size: 1.25rem; margin-top: 1.5rem; }
.btn { display: inline-block; padding: .9rem 1.2rem; background: var(--brand); color: #051b0d; border-radius: 12px; font-weight: 700; text-decoration: none; }
.small { opacity: .85; font-size: .95rem; }
.feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; }
input, select, textarea { width: 100%; padding: .7rem .9rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: var(--text); }
label { display: block; margin-top: 1rem; margin-bottom: .25rem; opacity: .9; }
.kbd { padding: .2rem .4rem; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; font-size: .9rem; }
footer { margin-top: 3rem; opacity: .85; }
a { color: #93c5fd; }
hr { border: none; border-top: 1px solid rgba(255,255,255,.12); margin: 1.5rem 0; }
.success { text-align: center; padding: 2rem 1rem; }
.notice { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.35); padding: 1rem; border-radius: 12px; }