*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;min-height:100vh;margin:0;padding:0;font-family:Arial,sans-serif;background:#0f0f0f;color:#eee}
.container{width:100%;min-height:100vh;background:#1a1a1a;display:flex;flex-direction:column}
header{background:linear-gradient(135deg,#00b4d8,#0077b6);padding:30px 20px;text-align:center}
h1{font-size:26px;margin-bottom:8px}
.subtitle{font-size:15px;opacity:.9}
main{flex:1;padding:20px}
.directions{display:grid;gap:15px;margin-bottom:30px}
.dir-btn{background:#222;border:none;color:#fff;padding:20px;font-size:18px;border-radius:12px;cursor:pointer;transition:.2s;text-align:left;position:relative}
.dir-btn:hover{background:#2a2a2a;padding-left:30px}
.dir-btn::after{content:">";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:24px;opacity:.6}
.form-container{display:none;background:#111;padding:25px;border-radius:12px;margin-top:10px}
.form-container.active{display:block}
label{display:block;margin:15px 0 8px;font-size:14px;opacity:.9}
input,select,textarea{width:100%;padding:14px;background:#222;border:none;border-radius:8px;color:#fff;font-size:16px}
input:focus,select:focus,textarea:focus{outline:2px solid #00b4d8}
.submit{width:100%;background:#00b4d8;color:#fff;border:none;padding:16px;font-size:18px;border-radius:12px;margin-top:20px;cursor:pointer;font-weight:bold}
.submit:hover{background:#0099b8}
.back{color:#00b4d8;text-decoration:underline;cursor:pointer;margin-top:20px}
footer{padding:20px;text-align:center;font-size:13px;color:#777;background:#0a0a0a}
.success{text-align:center;padding:60px 20px;font-size:19px;line-height:1.6}

@media (prefers-color-scheme: light){
    body{background:#f5f5f5;color:#333}
    .container{background:#fff}
    .dir-btn{background:#f0f0f0;color:#333}
    .dir-btn:hover{background:#e0e0e0}
    input,select,textarea{background:#f8f8f8;color:#333}
    .form-container{background:#f8f8f8}
    footer{background:#f0f0f0}
}