:root { --fg:#1b1b1f; --muted:#6b7280; --bg:#fff; --card:#f8f9fb; --brand:#0a84ff; }
*{box-sizing:border-box} body{margin:0;font:16px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial}
.container{max-width:960px;margin:auto;padding:16px}
header{text-align:center;padding:24px 16px}
.logo{height:40px;margin-bottom:8px}
h1{margin:8px 0 0} .sub{color:var(--muted)}
.card{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:var(--card);padding:16px;border-radius:16px}
.card img{width:100%;border-radius:12px;background:#fff}
.card-body h3{margin:0 0 8px}
.muted{color:var(--muted)}
.muted.small{font-size:0.85em}
.specs{list-style:none;padding:0;margin:8px 0 16px 0;display:flex;flex-wrap:wrap;gap:8px}
.specs li{background:#fff;border-radius:999px;padding:6px 10px;border:1px solid #e5e7eb}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
button{background:var(--brand);color:#fff;border:0;padding:12px 16px;border-radius:10px;cursor:pointer;font-weight:600}
button.ghost{background:transparent;color:var(--fg);border:1px solid #e5e7eb}
.link{color:var(--brand);text-decoration:none;font-weight:600}
#calendar{margin-top:32px}
#picked.hidden{display:none}
dialog{border:0;border-radius:16px;padding:20px;max-width:420px;width:92%}
label{display:block;margin:12px 0 8px}
input[type="email"], input[type="date"]{width:100%;padding:10px;border-radius:10px;border:1px solid #e5e7eb}
.msg{min-height:1.2em;color:var(--muted);margin-top:8px}
.preview-wrap{position:relative}
.overlay-actions{position:absolute;top:8px;right:8px;display:flex;gap:8px}
.overlay-actions button,.overlay-actions .btn-link{
  padding:10px 12px;border-radius:10px;border:0;text-decoration:none;
  background:rgba(0,0,0,.6);color:#fff;font-weight:600;backdrop-filter:blur(2px)
}
@media (max-width:720px){ .card{grid-template-columns:1fr} }