/* ==========================================================
   Numogist · a Healer — customer-facing styles
   Shares the palette of the report itself so sign-in, the
   dashboard and the report all read as one product.
   ========================================================== */

:root{
  --gold:#B8860B;
  --gold2:#D4A830;
  --gold-light:#FFF8E7;
  --deep-navy:#0D1B3E;
  --royal-purple:#4A0E8F;
  --purple-dark:#2E0A5C;
  --bg-page:#F8F6FC;
  --surface-0:#FFFFFF;
  --surface-1:#F5F1FA;
  --surface-2:#EDE8F5;
  --text-primary:#1A1128;
  --text-secondary:#3D2B5E;
  --text-muted:#6B5B7E;
  --border:#D6CEE8;
  --border-strong:#B8A8D4;
  --success:#0B6E4F;
  --success-bg:#E8F8F2;
  --danger:#9B1C1C;
  --danger-bg:#FDEDEC;
  --warning:#7D6608;
  --warning-bg:#FEF9E7;
  --info:#1A3C6E;
  --info-bg:#EAF2FF;
  --radius:14px;
  --radius-sm:9px;
  --shadow-card:0 8px 32px rgba(74,14,143,.10),0 2px 8px rgba(74,14,143,.06);
  --shadow-lift:0 14px 44px rgba(74,14,143,.16);
  --transition:.25s cubic-bezier(.25,.46,.45,.94);
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-serif:'Playfair Display',Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:var(--font-sans);
  background:var(--bg-page);
  color:var(--text-primary);
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--royal-purple);text-decoration:none;transition:var(--transition)}
a:hover{text-decoration:underline}

.container{max-width:1080px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ── Site header ─────────────────────────────────────────── */
.site-header{
  background:linear-gradient(135deg,var(--purple-dark),var(--royal-purple));
  color:#fff;position:sticky;top:0;z-index:60;
  box-shadow:0 2px 18px rgba(46,10,92,.28);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:62px;flex-wrap:wrap;
}
.brand{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-serif);font-size:18px;font-weight:700;
  color:#fff;letter-spacing:.01em;
}
.brand:hover{text-decoration:none;color:#fff}
.brand-mark{color:var(--gold2);font-size:17px}

.nav-toggle{
  display:none;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  color:#fff;border-radius:var(--radius-sm);padding:6px 11px;font-size:17px;
  cursor:pointer;line-height:1;
}
.nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nav a{
  color:rgba(255,255,255,.86);font-size:14px;font-weight:500;
  padding:8px 13px;border-radius:var(--radius-sm);
}
.nav a:hover{background:rgba(255,255,255,.13);color:#fff;text-decoration:none}
.nav a.active{background:rgba(212,168,48,.22);color:var(--gold2);font-weight:600}
.nav-user{display:inline-flex;align-items:center;gap:9px;margin-left:8px;
  padding-left:14px;border-left:1px solid rgba(255,255,255,.2)}
.nav-avatar{
  width:31px;height:31px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  color:#2A1A00;display:grid;place-items:center;font-weight:700;font-size:13.5px;
}

@media(max-width:820px){
  .nav-toggle{display:block}
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;
       gap:2px;padding:8px 0 14px}
  .nav.open{display:flex}
  .nav-user{margin:8px 0 0;padding:12px 0 0;border-left:none;
            border-top:1px solid rgba(255,255,255,.2)}
}

/* ── Main ────────────────────────────────────────────────── */
.main{padding:30px 0 60px}
.page-head{margin-bottom:22px}
.page-head h1{
  font-family:var(--font-serif);font-size:27px;font-weight:700;
  color:var(--text-primary);line-height:1.25;
}
.page-head .sub{color:var(--text-muted);font-size:14.5px;margin-top:5px}

/* ── Cards ───────────────────────────────────────────────── */
.card{
  background:var(--surface-0);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-card);
  padding:26px;margin-bottom:20px;
}
.card-head{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--surface-2)}
.card-head h2{font-family:var(--font-serif);font-size:19px;color:var(--text-secondary)}
.card-head .sub{font-size:13.5px;color:var(--text-muted);margin-top:3px}

/* ── Auth screens ────────────────────────────────────────── */
.auth-wrap{
  min-height:calc(100vh - 62px);display:flex;align-items:center;justify-content:center;
  padding:38px 20px 60px;
}
.auth-card{
  width:100%;max-width:452px;background:var(--surface-0);
  border:1px solid var(--border);border-radius:20px;
  box-shadow:var(--shadow-lift);overflow:hidden;
}
.auth-head{
  background:linear-gradient(135deg,var(--purple-dark),var(--royal-purple) 60%,#5C1A9E);
  color:#fff;padding:30px 30px 26px;text-align:center;position:relative;
}
.auth-head::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold2),transparent);
}
.auth-head .logo{font-family:var(--font-serif);font-size:21px;font-weight:700;color:var(--gold2)}
.auth-head .divider{
  width:64px;height:1px;margin:11px auto;
  background:linear-gradient(90deg,transparent,rgba(212,168,48,.7),transparent);
}
.auth-head h1{font-size:17px;font-weight:600;letter-spacing:.01em}
.auth-head p{font-size:13.5px;color:rgba(255,255,255,.76);margin-top:5px;line-height:1.5}
.auth-body{padding:28px 30px 30px}
.auth-foot{
  padding:16px 30px;background:var(--surface-1);border-top:1px solid var(--border);
  text-align:center;font-size:14px;color:var(--text-muted);
}
.auth-foot a{font-weight:600}

/* ── Forms ───────────────────────────────────────────────── */
.field{margin-bottom:16px}
.field label{
  display:block;font-size:13px;font-weight:600;color:var(--text-secondary);
  margin-bottom:6px;letter-spacing:.01em;
}
.field label .req{color:#E74C3C;margin-left:2px}
.field .hint{font-size:12.5px;color:var(--text-muted);margin-top:5px;line-height:1.5}

.input,input[type=text],input[type=email],input[type=tel],
input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;padding:11px 14px;font-family:inherit;font-size:14.5px;
  color:var(--text-primary);background:var(--surface-0);
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  transition:var(--transition);
}
.input:focus,input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--royal-purple);
  box-shadow:0 0 0 4px rgba(74,14,143,.12);
}
input.error,select.error{border-color:#E74C3C;box-shadow:0 0 0 4px rgba(231,76,60,.12)}
textarea{resize:vertical;min-height:96px;line-height:1.6}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236B5B7E' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}

/* password reveal — eye toggle */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:48px}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:grid;place-items:center;padding:0;
  background:transparent;border:none;border-radius:8px;
  color:var(--text-muted);cursor:pointer;transition:var(--transition);
}
.pw-toggle:hover{background:var(--surface-1);color:var(--royal-purple)}
.pw-toggle:focus-visible{
  outline:none;background:var(--surface-1);color:var(--royal-purple);
  box-shadow:0 0 0 3px rgba(74,14,143,.18);
}
.pw-toggle .eye{width:19px;height:19px;display:block}
.pw-toggle .eye-off{display:none}
.pw-toggle.on{color:var(--royal-purple)}
.pw-toggle.on .eye-on{display:none}
.pw-toggle.on .eye-off{display:block}

.check-row{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--text-secondary)}
.check-row input{margin-top:3px;flex:0 0 auto;accent-color:var(--royal-purple)}

.form-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:22px}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border:none;border-radius:var(--radius-sm);
  font:600 14.5px var(--font-sans);cursor:pointer;transition:var(--transition);
  text-decoration:none;line-height:1.2;
}
.btn:hover{text-decoration:none}
.btn-primary{
  background:linear-gradient(135deg,var(--royal-purple),var(--purple-dark));
  color:#fff;box-shadow:0 4px 16px rgba(74,14,143,.28);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 26px rgba(74,14,143,.36);color:#fff}
.btn-gold{
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  color:#2A1A00;box-shadow:0 4px 16px rgba(184,134,11,.3);
}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 8px 26px rgba(184,134,11,.4);color:#2A1A00}
.btn-ghost{background:var(--surface-1);color:var(--text-secondary);border:1.5px solid var(--border)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--text-primary)}
.btn-danger{background:var(--danger-bg);color:var(--danger);border:1.5px solid rgba(155,28,28,.25)}
.btn-danger:hover{background:#F9DCDA}
.btn-block{width:100%}
.btn-sm{padding:8px 15px;font-size:13px}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

/* ── Alerts ──────────────────────────────────────────────── */
.alert{
  padding:12px 16px;border-radius:var(--radius-sm);font-size:14px;
  margin-bottom:16px;border:1px solid;line-height:1.55;
}
.alert-success{background:var(--success-bg);border-color:rgba(11,110,79,.28);color:var(--success)}
.alert-error  {background:var(--danger-bg); border-color:rgba(155,28,28,.28); color:var(--danger)}
.alert-warning{background:var(--warning-bg);border-color:rgba(125,102,8,.28); color:var(--warning)}
.alert-info   {background:var(--info-bg);   border-color:rgba(26,60,110,.24);  color:var(--info)}
.alert ul{margin:6px 0 0 18px}
.alert li{margin-bottom:3px}

/* ── Badges ──────────────────────────────────────────────── */
.badge{
  display:inline-block;padding:4px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;line-height:1.5;
}
.badge-success{background:var(--success-bg);color:var(--success)}
.badge-danger {background:var(--danger-bg); color:var(--danger)}
.badge-warning{background:var(--warning-bg);color:var(--warning)}
.badge-muted  {background:var(--surface-2); color:var(--text-muted)}

/* ── Tables ──────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}
table.data{width:100%;border-collapse:collapse;background:var(--surface-0);font-size:14px}
table.data th{
  background:var(--surface-1);color:var(--text-secondary);text-align:left;
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:12px 15px;white-space:nowrap;border-bottom:1px solid var(--border);
}
table.data td{padding:13px 15px;border-bottom:1px solid var(--surface-2);vertical-align:middle}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:var(--surface-1)}
.empty{padding:44px 20px;text-align:center;color:var(--text-muted);font-size:14.5px}
.empty .big{font-size:34px;display:block;margin-bottom:10px;opacity:.5}

/* ── Pagination ──────────────────────────────────────────── */
.pager{display:flex;gap:6px;justify-content:center;align-items:center;
  margin-top:20px;flex-wrap:wrap}
.pager a{
  padding:7px 13px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--surface-0);color:var(--text-secondary);font-size:13.5px;font-weight:500;
}
.pager a:hover{background:var(--surface-1);text-decoration:none;border-color:var(--border-strong)}
.pager a.on{background:var(--royal-purple);border-color:var(--royal-purple);color:#fff}
.pager .gap{color:var(--text-muted);padding:0 3px}

/* ── Small helpers ───────────────────────────────────────── */
.muted{color:var(--text-muted)}
.small{font-size:13px}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:16px}
.text-center{text-align:center}
.divider-or{
  display:flex;align-items:center;gap:12px;margin:20px 0;
  color:var(--text-muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;
}
.divider-or::before,.divider-or::after{
  content:'';flex:1;height:1px;background:var(--border);
}

/* ── Site footer ─────────────────────────────────────────── */
.site-footer{
  background:var(--purple-dark);color:rgba(255,255,255,.66);
  padding:22px 0;font-size:13px;text-align:center;margin-top:auto;
}
.site-footer a{color:var(--gold2)}