@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600&display=swap');
:root{--bg:#090909;--panel:#111111;--text:#f4f0e8;--muted:#a8a29a;--gold:#c8a96b;--line:#2c2924;--danger:#f08b86}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;background:radial-gradient(ellipse at 50% 0%,#252016 0%,#11100e 33%,#080808 72%);color:var(--text);font-family:"Cairo",sans-serif;min-height:100vh}
.ambient{position:fixed;inset:0;pointer-events:none;opacity:.15;background-image:radial-gradient(#c8a96b 0.6px,transparent .6px);background-size:23px 23px;mask-image:linear-gradient(to bottom,black,transparent 80%)}
.shell{position:relative;width:min(760px,100%);margin:auto;padding:28px 20px 20px;min-height:100vh;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;color:#d7c49d;font-family:"Playfair Display",serif;font-size:12px;letter-spacing:3px;margin:4px 0 30px;direction:ltr}.brand-mark{font-size:20px;color:var(--gold)}
.panel{background:linear-gradient(145deg,rgba(23,23,22,.97),rgba(13,13,13,.98));border:1px solid #353027;border-radius:22px;padding:clamp(24px,6vw,54px);box-shadow:0 22px 70px #0008;animation:appear .45s ease both}
.hidden{display:none!important}.eyebrow{font-family:"Playfair Display",serif;letter-spacing:2px;font-size:11px;color:var(--gold);direction:ltr;text-align:right;margin:0 0 15px}
h1{font-size:clamp(27px,5vw,39px);line-height:1.5;font-weight:600;margin:0 0 17px;letter-spacing:-.5px}.rule{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:24px 0}
.message{white-space:pre-wrap;line-height:2.1;color:#ddd6ca;font-size:16px;overflow-wrap:anywhere}.muted{color:var(--muted);line-height:1.9;font-size:14px}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}.gallery:empty{display:none}.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid #55462e;filter:saturate(.82)}
.button{width:100%;border:1px solid #e0c58e;background:linear-gradient(135deg,#d9bd81,#ad8c4d);color:#17130d;padding:15px 18px;border-radius:11px;font:700 15px "Cairo",sans-serif;cursor:pointer;margin-top:20px;transition:transform .2s,filter .2s}.button:hover{filter:brightness(1.08);transform:translateY(-1px)}.button span{margin-right:8px}
.progress-wrap{height:4px;background:#2a2824;border-radius:10px;overflow:hidden;margin:22px 0 8px}.progress-wrap div{height:100%;width:10%;background:var(--gold);transition:width .2s}.progress-label{font-size:12px;color:var(--gold);margin:0 0 20px}
.question{padding:17px 0;border-bottom:1px solid var(--line)}.question label{display:block;font-weight:600;line-height:1.8;margin-bottom:10px}.question input,input[type=password]{width:100%;padding:13px 14px;border:1px solid #3b3832;border-radius:10px;background:#0a0a0a;color:var(--text);font:14px "Cairo",sans-serif;outline:none}.question input:focus,input[type=password]:focus{border-color:var(--gold);box-shadow:0 0 0 3px #c8a96b18}
label{display:block;margin:12px 0 8px;font-size:14px}.error{color:var(--danger);font-size:13px;line-height:1.8}.lock-icon,.final-star{text-align:center;color:var(--gold);font-size:42px;margin:8px 0 16px}.signature{text-align:left;color:var(--gold);margin-top:28px;font-size:14px}
footer{margin-top:auto;padding:25px 0 4px;text-align:center;color:#655d4f;font:10px "Playfair Display",serif;letter-spacing:2px;direction:ltr}footer span{color:var(--gold);margin-left:7px}
@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:480px){.shell{padding:20px 13px}.brand{margin-bottom:22px}.panel{border-radius:17px}.gallery{gap:8px}.message{font-size:15px}}
