:root{
  --bg: #0b0b10;
  --bg2:#0b0b10;
  --text:#f4f4ff;
  --muted: rgba(244,244,255,.65);
  --card: rgba(255,255,255,.04);
  --border: rgba(255,255,255,.12);
  --shadow: rgba(0,0,0,.35);
  --accent1:#ff4d8d;
  --accent2:#ff79a8;
}

/* Thème clair */
:root[data-theme="light"]{
  --bg:#f6f7fb;
  --bg2:#ffffff;
  --text:#12121a;
  --muted: rgba(18,18,26,.65);
  --card: rgba(0,0,0,.03);
  --border: rgba(0,0,0,.10);
  --shadow: rgba(0,0,0,.10);
  --accent1:#ff2e7a;
  --accent2:#ff7aa8;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  min-height:100vh;

  /* Fond plus propre */
  background:
    radial-gradient(900px 500px at 20% 0%, color-mix(in srgb, var(--accent1) 18%, transparent), transparent 70%),
    radial-gradient(900px 500px at 80% 10%, color-mix(in srgb, var(--accent2) 14%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

/* petit grain léger (optionnel mais ça rend mieux) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

a{color:inherit}
.container{max-width:1050px;margin:0 auto;padding:18px}

.top{padding:32px 0 18px;border-bottom:1px solid var(--border)}
.top.compact{padding:20px 0}

h1{margin:0 0 10px;font-size:32px;letter-spacing:-.02em}
p{margin:0 0 12px}
.muted{color:var(--muted)}
.small{font-size:12px}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
.btn.primary{
  border-color:transparent;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  color:#0b0b10;
  font-weight:700;
}
:root[data-theme="light"] .btn.primary{ color:#fff; }

.btn:hover{border-color:color-mix(in srgb, var(--border) 50%, transparent)}

.card{
  background:linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 60%, transparent));
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 30px var(--shadow);
  backdrop-filter: blur(8px);
}
.card.big{padding:22px;border-radius:22px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
@media (max-width:900px){.grid3{grid-template-columns:1fr}}

.two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;align-items:start;margin-top:16px}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}

.form label{display:block;font-weight:600;margin:12px 0 6px}
input,textarea{
  width:100%;
  background:color-mix(in srgb, var(--bg2) 35%, transparent);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  outline:none;
}
textarea{resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){.row{grid-template-columns:1fr}}

.templates{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:900px){.templates{grid-template-columns:repeat(2,1fr)}}

.tplbtn{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:color-mix(in srgb, var(--bg2) 25%, transparent);
  color:var(--text);
  cursor:pointer;
  text-align:left;
}
.tplbtn.active{
  border-color:color-mix(in srgb, var(--accent1) 80%, transparent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent1) 18%, transparent);
}

.preview .preview-head{display:flex;justify-content:space-between;align-items:center}
.pill{font-size:12px;border:1px solid var(--border);padding:6px 10px;border-radius:999px;color:var(--muted)}

.footer{padding:20px 0;border-top:1px solid var(--border);margin-top:24px}

/* templates */
.tpl{padding:22px 0}
.tpl.rose{
  background:
    radial-gradient(60% 60% at 30% 20%, rgba(255,77,141,.35), transparent 60%),
    radial-gradient(60% 60% at 70% 60%, rgba(255,121,168,.22), transparent 60%);
}
.badge{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(255,77,141,.18);
  border:1px solid rgba(255,77,141,.35);
  margin-bottom:10px;
}
.meta{color:var(--muted);margin:0 0 14px}
.message{font-size:18px;line-height:1.5}
.hearts{margin-top:16px;display:flex;gap:8px;opacity:.85}
.hearts span{filter:drop-shadow(0 6px 16px rgba(255,77,141,.25))}

.tpl.letter .message{font-size:18px}
.tpl.letter .sign{margin-top:16px;font-weight:700}

.tpl.polaroid .pol{
  transform:rotate(-1deg);
}
.fake-photo{
  height:160px;border-radius:16px;
  border:1px dashed rgba(255,255,255,.25);
  display:grid;place-items:center;
  font-size:54px;
  background:rgba(255,255,255,.02);
}
.pol-title{font-weight:900;font-size:22px;margin-top:10px}

/* Valentine widget */
.stv-val-wrap{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 50;
  width: min(420px, calc(100vw - 28px));
}

.stv-val-card{
  padding: 14px;
}

.stv-val-q{
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 10px;
}

.stv-val-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}