/* ───────────────────────────────────────────────────────────────────────────
   Pinecrest — shared design system (landing + UCP).
   Cinematic editorial theme: warm gold/terracotta on deep near-black, serif
   display (Fraunces) + clean sans (Inter). One place for the look so the whole
   site and the Control Panel stay consistent and easy to restyle.
   ─────────────────────────────────────────────────────────────────────────── */

:root{
  /* Vice City palette: neon hot-pink + teal on a deep Miami night. */
  --bg:#0b0a16; --bg2:#140f28; --elev:#1b1536;
  --text:#f6eff8; --muted:#aba0c4;
  --accent:#ff2d8e; --accent-2:#1fe3da; --accent-ink:#1a0714;
  --card:rgba(255,255,255,.04); --border:rgba(197,138,224,.22);
  --ok:#4ee0a0; --warn:#ffcf5c; --bad:#ff6b8b;
  --radius:14px; --radius-sm:10px; --maxw:1080px;
  --shadow:0 24px 60px rgba(0,0,0,.5);
}
[data-theme="light"]{
  /* Miami day: soft pink cream, deeper pink + teal for contrast. */
  --bg:#fdf0f4; --bg2:#fbe6ee; --elev:#ffffff;
  --text:#2a1226; --muted:#6e5a74;
  --accent:#e01a79; --accent-2:#0a9fa0; --accent-ink:#ffffff;
  --card:rgba(40,12,40,.035); --border:rgba(180,60,130,.2);
  --shadow:0 24px 50px rgba(120,20,80,.14);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#fdf0f4; --bg2:#fbe6ee; --elev:#ffffff;
    --text:#2a1226; --muted:#6e5a74;
    --accent:#e01a79; --accent-2:#0a9fa0; --accent-ink:#ffffff;
    --card:rgba(40,12,40,.035); --border:rgba(180,60,130,.2);
    --shadow:0 24px 50px rgba(120,20,80,.14);
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text); overflow-x:hidden; min-height:100vh;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
  transition:background .4s ease,color .4s ease;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,.display{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:600;line-height:1.08;letter-spacing:-.01em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.serif{font-family:'Fraunces',Georgia,serif}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ── Nav ── */
nav{position:fixed;top:0;left:0;right:0;height:66px;z-index:100;
    background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.logo{font-weight:800;font-size:1.15rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text)}
.logo .dot{color:var(--accent)}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{font-weight:500;color:var(--muted);transition:.2s;font-size:.92rem;letter-spacing:.02em}
.nav-links a:hover{color:var(--text)}
.nav-right{display:flex;gap:10px;align-items:center}
.chip{background:none;border:1px solid var(--border);color:var(--muted);border-radius:8px;
      padding:6px 12px;font-size:.78rem;cursor:pointer;font-family:inherit;transition:.2s;font-weight:600;letter-spacing:.03em}
.chip:hover{border-color:var(--accent);color:var(--text)}
.theme-btn{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem;padding:0}
.nav-cta{padding:9px 18px;border-radius:9px;font-size:.84rem;font-weight:700;letter-spacing:.02em;
  background:var(--accent);color:var(--accent-ink);transition:.2s}
.nav-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
@media(max-width:780px){.nav-links{display:none}}

/* ── Buttons ── */
.btn{font-family:'Inter',sans-serif;font-weight:700;font-size:.98rem;letter-spacing:.01em;
     padding:13px 26px;border-radius:10px;cursor:pointer;border:1px solid transparent;transition:.2s;
     display:inline-flex;align-items:center;justify-content:center;gap:9px;background:none;color:var(--text)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px rgba(255,45,142,.3)}
.btn-primary:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 14px 40px rgba(255,45,142,.45)}
.btn-ghost{border-color:var(--border);color:var(--text);background:var(--card)}
.btn-ghost:hover:not(:disabled){border-color:var(--accent-2);color:var(--accent-2)}
.btn-danger{border-color:rgba(224,122,107,.5);color:var(--bad);background:rgba(224,122,107,.08)}
.btn-danger:hover:not(:disabled){background:rgba(224,122,107,.16)}
.btn-sm{padding:8px 15px;font-size:.84rem}
.btn-block{width:100%}

/* ── Cards ── */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:26px;
      transition:.25s;animation:fadeUp .5s ease both}
.card:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));transform:translateY(-3px);box-shadow:var(--shadow)}

/* ── Forms ── */
.field{margin-bottom:17px;text-align:left}
.field label{display:block;font-weight:600;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
.input,select,textarea{width:100%;background:color-mix(in srgb,var(--bg) 60%,#000 6%);border:1px solid var(--border);color:var(--text);
  border-radius:var(--radius-sm);padding:12px 14px;font-family:inherit;font-size:1rem;transition:.2s;outline:none}
[data-theme="light"] .input,[data-theme="light"] select,[data-theme="light"] textarea{background:#fff}
.input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
textarea{resize:vertical;min-height:96px}
.hint{color:var(--muted);font-size:.82rem;margin-top:6px}

/* ── Alerts / badges ── */
.alert{border-radius:var(--radius-sm);padding:12px 15px;font-size:.95rem;margin-bottom:16px;border:1px solid var(--border)}
.alert-error{background:rgba(224,122,107,.12);border-color:rgba(224,122,107,.45);color:var(--bad)}
.alert-ok{background:rgba(108,192,139,.12);border-color:rgba(108,192,139,.4);color:var(--ok)}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;padding:3px 10px;border-radius:7px;border:1px solid var(--border);color:var(--muted)}
.badge-pending{color:var(--warn);border-color:rgba(224,178,80,.45);background:rgba(224,178,80,.1)}
.badge-approved{color:var(--ok);border-color:rgba(108,192,139,.4);background:rgba(108,192,139,.1)}
.badge-rejected{color:var(--bad);border-color:rgba(224,122,107,.45);background:rgba(224,122,107,.1)}

/* ── Footer ── */
footer{border-top:1px solid var(--border);padding:48px 24px 64px;margin-top:40px}
.foot-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
.foot-logo{font-family:'Fraunces',serif;font-weight:600;font-size:1.35rem}
.foot-logo .dot{color:var(--accent)}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{color:var(--muted);font-weight:500;transition:.2s}
.foot-links a:hover{color:var(--text)}
.legal{width:100%;color:var(--muted);font-size:.8rem;line-height:1.7;opacity:.85;margin-top:8px;max-width:880px}
.copy{color:var(--muted);font-size:.85rem;margin-top:14px}

/* ── Utilities ── */
.muted{color:var(--muted)}
.center{text-align:center}
.accent{color:var(--accent)}
.spin{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;
  display:inline-block;animation:rot .7s linear infinite;vertical-align:middle}
@keyframes rot{to{transform:rotate(360deg)}}