:root { color-scheme: dark; font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; background: #0a0a10; color: #f3f1f7; } * { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(60rem 36rem at 10% -15%, #38214e 0%, transparent 67%), #0a0a10; } main { width: min(66rem, calc(100% - 2rem)); margin: 0 auto; padding: 4.5rem 0; }
header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2rem; } .eyebrow { color: #b986d9; font-size: .69rem; letter-spacing: .15em; margin: 0 0 .45rem; } h1 { margin: 0; font-size: 2.2rem; letter-spacing: -.04em; } h2 { margin: 0; font-size: 1.08rem; } p { color: #a9a5b3; line-height: 1.6; } header > p { font-size: .8rem; margin: 0; }
.card { padding: 1.25rem; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); border-radius: 1rem; margin-bottom: 1rem; } .heading { display: flex; justify-content: space-between; gap: 1rem; align-items: start; } .heading p { font-size: .85rem; margin: .4rem 0 1rem; max-width: 45rem; }
textarea, input { background: #12121a; border: 1px solid rgba(255,255,255,.13); border-radius: .7rem; color: inherit; font: inherit; outline: none; } textarea:focus, input:focus { border-color: #c48beb; box-shadow: 0 0 0 .2rem rgba(196,139,235,.12); } .large { width: 100%; min-height: 28rem; resize: vertical; padding: .9rem; line-height: 1.62; } .fields { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .8rem; } label { display: grid; gap: .4rem; color: #b8b4c1; font-size: .78rem; } input { width: 100%; padding: .7rem; }
.documents { display: grid; gap: .8rem; }.document { padding: .85rem; border-radius: .8rem; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.07); }.document-head { display: flex; gap: .7rem; align-items: center; margin-bottom: .65rem; }.document-head input { flex: 1; }.toggle { display: flex; align-items: center; gap: .35rem; white-space: nowrap; }.toggle input { width: auto; }.doc-body { width: 100%; min-height: 8rem; padding: .7rem; resize: vertical; line-height: 1.55; }
button { border: 0; border-radius: .65rem; padding: .72rem 1rem; background: #e5c9fa; color: #25172d; font: inherit; font-weight: 700; cursor: pointer; } .secondary { background: rgba(255,255,255,.09); color: #e8e3ec; font-size: .85rem; } footer { display: flex; align-items: center; gap: 1rem; position: sticky; bottom: 0; padding: 1rem 0; background: linear-gradient(transparent, #0a0a10 22%); } #message { color: #a9a5b3; font-size: .85rem; }
@media (max-width: 640px) { main { width: min(100% - 1.2rem, 66rem); padding-top: 2rem; } header { align-items: start; flex-direction: column; gap: .7rem; }.fields { grid-template-columns: 1fr; }.document-head { align-items: stretch; flex-direction: column; }.toggle { justify-content: space-between; } }