/* CopiePrompt — espace compte. Même charte que la landing (indigo → violet, fond nuit, Poppins). */

:root{
  --indigo-deep:#2E32A2;
  --violet-vibrant:#7A3DCC;
  --gradient-primary: linear-gradient(135deg, var(--indigo-deep) 0%, var(--violet-vibrant) 100%);
  --bg:#0F1117;
  --surface:#1A1C24;
  --surface-2:#21232D;
  --text:#F2F3F7;
  --text-secondary:#A3A6B3;
  --border: rgba(242,243,247,0.09);
  --border-strong: rgba(242,243,247,0.16);
  --danger:#F26D7D;
  --success:#5FD39A;
  --radius-lg: 24px;
  --radius-sm: 12px;
}

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(600px 400px at 85% -10%, rgba(122,61,204,.28), transparent 70%),
    radial-gradient(500px 360px at -10% 110%, rgba(46,50,162,.30), transparent 70%),
    var(--bg);
  color: var(--text);
  font-family:'Poppins', -apple-system, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
}
a{ color:inherit; }

.top{
  display:flex; align-items:center; justify-content:space-between;
  max-width: 1180px; margin:0 auto; padding: 16px 16px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ width:34px; height:34px; border-radius:10px; }
.brand span{ font-weight:700; font-size:1.08rem; }
.back{ color: var(--text-secondary); text-decoration:none; font-size:.9rem; }
.back:hover{ color: var(--text); }

.wrap{ max-width: 460px; margin: 24px auto 48px; padding: 0 16px; }

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  box-shadow: 0 30px 80px -40px rgba(122,61,204,.5);
}
@media (min-width: 520px){ .card{ padding: 40px 36px; } }

h1{ margin:0 0 6px; font-size:1.6rem; letter-spacing:-.02em; }
h2{ margin:0 0 12px; font-size:1.02rem; }
.lead{ margin:0 0 24px; color: var(--text-secondary); }
.muted{ color: var(--text-secondary); margin: 0 0 12px; font-size:.92rem; }
.loading{ color: var(--text-secondary); margin:0; }

form{ display:flex; flex-direction:column; gap:14px; }
label{ display:flex; flex-direction:column; gap:6px; font-size:.88rem; font-weight:500; }
label small{ color: var(--text-secondary); font-weight:400; }
input[type=email], input[type=password], input[type=text]{
  font: inherit; font-size: 1rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
input:focus{ border-color: var(--violet-vibrant); box-shadow: 0 0 0 3px rgba(122,61,204,.25); }
label.check{ flex-direction:row; align-items:flex-start; gap:10px; font-weight:400; color: var(--text-secondary); }
label.check input{ margin-top:4px; width:18px; height:18px; accent-color: var(--violet-vibrant); }
label.check a{ color: var(--text); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font: inherit; font-weight:600; font-size:.98rem;
  border-radius: 999px; padding: 13px 22px;
  border: 1px solid transparent; cursor:pointer; text-decoration:none;
  transition: transform .2s, opacity .2s, background .2s;
}
.btn:disabled{ opacity:.6; cursor: wait; }
.btn:not(:disabled):hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--gradient-primary); color:#fff; box-shadow: 0 10px 30px -10px rgba(122,61,204,.7); }
.btn-secondary{ background: var(--surface-2); color: var(--text); border-color: var(--border-strong); align-self:flex-start; }
.btn-ghost{ background: transparent; color: var(--text-secondary); border-color: var(--border-strong); }
.btn-danger{ background: transparent; color: var(--danger); border-color: rgba(242,109,125,.5); align-self:flex-start; }

.error{ color: var(--danger); font-size:.88rem; margin:0; min-height:0; }
.error:empty, .ok:empty{ display:none; }
.ok{ color: var(--success); font-size:.88rem; margin:0; }

.links{ margin: 16px 0 0; font-size:.9rem; }
.links a{ color: var(--text-secondary); }
.switch{ margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--border); font-size:.92rem; color: var(--text-secondary); }
.switch a{ color: var(--text); font-weight:600; }

.block{ padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--border); }
.danger summary{ cursor:pointer; color: var(--danger); font-weight:500; font-size:.92rem; }
.danger[open] summary{ margin-bottom: 12px; }

.sub-plans{ display:grid; gap:10px; }
.sub-plans .btn{ width:100%; flex-direction:column; gap:2px; border-radius: var(--radius-sm); padding: 14px 18px; }
.sub-plans .btn small{ font-weight:400; opacity:.85; font-size:.8rem; }
.sub-status{ margin:0 0 6px; font-weight:600; }
.sub-status .pill{ display:inline-block; margin-left:8px; padding:2px 10px; border-radius:999px; font-size:.75rem; font-weight:600; background: rgba(95,211,154,.15); color: var(--success); vertical-align: 2px; }
.sub-status .pill.warn{ background: rgba(242,109,125,.15); color: var(--danger); }
.sub-actions{ margin-top: 14px; display:flex; flex-wrap:wrap; gap:10px; }

.recap{ background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 16px 18px; margin: 4px 0 22px; }
.recap p{ margin:0; }
.recap-plan{ font-weight:600; }
.recap-price{ font-size:1.5rem; font-weight:700; margin: 2px 0 4px !important; }
.small{ font-size:.82rem; margin-top: 14px; }

.help{ text-align:center; color: var(--text-secondary); font-size:.85rem; margin-top: 20px; }

@media (prefers-reduced-motion: reduce){ .btn{ transition:none; } }