:root { --bg1:#0b3a53; --bg2:#1d7a8c; --sun:#f6b94a; --ink:#fdfaf3; --muted:rgba(253,250,243,.75); }
* { box-sizing:border-box; margin:0; }
html,body { min-height:100%; }
body {
  min-height:100vh; display:grid; place-items:center; padding:24px 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  color:var(--ink);
  background: radial-gradient(circle at 78% 18%, var(--sun) 0 70px, transparent 72px),
              linear-gradient(160deg, var(--bg1), var(--bg2)) fixed;
  text-align:center;
}
main { width:100%; max-width:640px; }
a { color:var(--ink); }
.plane { font-size:44px; display:inline-block; animation: fly 6s ease-in-out infinite; }
@keyframes fly { 0%,100% { transform:translate(0,0) rotate(-6deg);} 50% { transform:translate(12px,-10px) rotate(4deg);} }
@media (prefers-reduced-motion: reduce) { .plane { animation:none; } }
h1 { font-size:clamp(2.4rem, 8vw, 4.5rem); letter-spacing:-.02em; line-height:1.05; margin:16px 0 12px; }
h1.sm { font-size:clamp(2rem, 6vw, 3rem); }
h2 { font-size:1.2rem; margin-bottom:12px; }
.tag { display:inline-block; padding:6px 14px; border:1px solid var(--muted); border-radius:999px;
       font-size:.85rem; letter-spacing:.18em; text-transform:uppercase; }
p { color:var(--muted); font-size:1.1rem; line-height:1.6; margin-top:18px; }
.muted { color:var(--muted); font-size:.9rem; }
footer { margin-top:40px; font-size:.85rem; color:var(--muted); }
footer a { color:var(--muted); }
footer .sep { margin:0 8px; }

.login { margin:28px auto 0; max-width:320px; display:grid; gap:10px; text-align:left; }
.login label { font-size:.9rem; color:var(--muted); }
.login input { font:inherit; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.35);
               background:rgba(255,255,255,.12); color:var(--ink); }
.login input:focus { outline:2px solid var(--sun); outline-offset:1px; }
.login button { font:inherit; font-weight:600; padding:12px; border:0; border-radius:10px;
                background:var(--sun); color:#10283a; cursor:pointer; margin-top:6px; }
.err { color:#ffd9d2; font-size:.95rem; margin-top:0; }

.client main { max-width:760px; }
.card { margin-top:32px; padding:24px; border-radius:16px; background:rgba(255,255,255,.1);
        border:1px solid rgba(255,255,255,.2); text-align:left; }
.card p { margin-top:0; }
.files { list-style:none; padding:0; display:grid; gap:10px; }
.files li { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
            padding:10px 0; border-bottom:1px solid rgba(255,255,255,.15); }
.files li:last-child { border-bottom:0; }

.client main { max-width:1040px; }
.designs { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:20px; margin-top:20px; }
.design { display:block; text-decoration:none; color:var(--ink); border-radius:12px; overflow:hidden;
          background:rgba(0,0,0,.15); border:1px solid rgba(255,255,255,.2); transition:transform .15s, box-shadow .15s; }
.design:hover, .design:focus-visible { transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.25); }
.design:focus-visible { outline:2px solid var(--sun); outline-offset:2px; }
/* Live mini-render: the page is laid out at 1280x800 and scaled to the card width */
.thumb { display:block; position:relative; aspect-ratio:16/10; overflow:hidden; background:#fff; }
.thumb iframe { position:absolute; top:0; left:0; width:1280px; height:800px; border:0; pointer-events:none;
                transform-origin:0 0; transform:scale(var(--s, .25)); }
.label { display:block; padding:12px 14px; font-size:.95rem; }
.label strong { color:var(--sun); font-weight:700; margin-right:4px; }