/* ============================================================
   AvenDate — App shell (auth pages + logged-in product)
   Builds on tokens defined in style.css
   ============================================================ */

.auth-body{
  min-height:100vh;
  background:
    radial-gradient(60% 55% at 85% 0%, rgba(217,164,65,0.12), transparent 60%),
    radial-gradient(55% 55% at 5% 100%, rgba(226,78,107,0.1), transparent 60%),
    var(--ivory);
  display:flex; flex-direction:column; align-items:center;
  padding:40px 20px;
}
.auth-logo{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--plum);
  margin-bottom:28px;
}
.auth-wrap{ width:100%; display:flex; justify-content:center; flex:1; align-items:flex-start; }
.auth-card{
  background:var(--paper);
  border-radius:var(--radius-lg);
  padding:44px 40px;
  width:100%; max-width:440px;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(43,15,30,0.05);
}
.auth-card h1{ font-size:28px; margin-top:12px; }
.auth-sub{ color:var(--mauve); font-size:14.5px; margin-top:8px; margin-bottom:24px; }
.auth-form .field{ margin-bottom:16px; }
.auth-form label{ display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--mauve); margin-bottom:6px; }
.auth-form input, .auth-form select, .auth-form textarea{
  width:100%; padding:12px 14px; border-radius:10px;
  border:1.5px solid rgba(43,15,30,0.14);
  font-family:var(--font-body); font-size:14.5px; background:var(--ivory); outline:none;
  transition:border-color .2s;
}
.auth-form input:focus, .auth-form select:focus, .auth-form textarea:focus{ border-color:var(--rose); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.auth-legal{ font-size:12px; color:var(--mauve-soft); line-height:1.5; margin:18px 0; }
.auth-switch{ text-align:center; font-size:14px; color:var(--mauve); margin-top:22px; }
.auth-switch a{ color:var(--rose-deep); font-weight:700; }
.form-errors{ background:rgba(226,78,107,0.1); border:1px solid rgba(226,78,107,0.28); border-radius:12px; padding:14px 16px; margin-bottom:20px; }
.form-errors p{ font-size:13.5px; color:var(--rose-deep); margin:4px 0; }
.form-errors p:first-child{ margin-top:0; }

/* ============================================================
   App shell (logged-in pages)
   ============================================================ */
.app-body{ background:var(--ivory); min-height:100vh; }
.app-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,246,236,0.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(43,15,30,0.07);
  padding:0 24px;
}
.app-nav-inner{
  max-width:1080px; margin:0 auto;
  height:68px; display:flex; align-items:center; justify-content:space-between;
}
.app-logo{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--plum); }
.app-nav-links{ display:flex; align-items:center; gap:6px; }
.app-nav-links a{
  font-size:13.5px; font-weight:700; color:var(--mauve); padding:8px 14px; border-radius:999px;
  transition:background .2s, color .2s;
  display:flex; align-items:center; gap:6px;
}
.app-nav-links a:hover, .app-nav-links a.active{ background:var(--ivory-dim); color:var(--rose-deep); }
.app-nav-links .badge-count{
  background:var(--rose); color:#fff; font-size:10.5px; font-family:var(--font-mono); font-weight:700;
  border-radius:999px; padding:1px 6px; margin-left:2px;
}
.app-main{ max-width:1080px; margin:0 auto; padding:40px 24px 80px; }
.app-avatar{
  width:34px; height:34px; border-radius:50%; background:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:var(--plum); font-size:14px;
  overflow:hidden;
}
.app-avatar img{ width:100%; height:100%; object-fit:cover; }

.page-head{ margin-bottom:32px; }
.page-head h1{ font-size:clamp(26px,3.4vw,34px); }
.page-head p{ color:var(--mauve); margin-top:8px; font-size:15px; }

/* Status pill */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em;
  padding:5px 12px; border-radius:999px; font-weight:700;
}
.pill-pending{ background:rgba(217,164,65,0.18); color:#8A6317; }
.pill-approved{ background:rgba(80,160,110,0.18); color:#2E7D4F; }
.pill-rejected{ background:rgba(226,78,107,0.15); color:var(--rose-deep); }
.pill-notsubmitted{ background:rgba(122,59,84,0.12); color:var(--mauve); }

/* Dashboard cards */
.dash-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:22px; }
.dash-card{
  background:var(--paper); border-radius:var(--radius-md); padding:28px;
  box-shadow:var(--shadow-card); border:1px solid rgba(43,15,30,0.05);
}
.dash-card h3{ font-size:17px; margin-bottom:6px; }
.dash-card p{ color:var(--mauve); font-size:14px; }
.quota-bar{ height:8px; border-radius:999px; background:var(--ivory-dim); overflow:hidden; margin:14px 0 8px; }
.quota-bar-fill{ height:100%; background:var(--rose); border-radius:999px; transition:width .4s var(--ease); }
.quota-label{ font-family:var(--font-mono); font-size:12px; color:var(--mauve); }
.plan-tag{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11.5px; font-weight:700; background:var(--ivory-dim); padding:6px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:0.05em; color:var(--rose-deep); }
@media (max-width:780px){ .dash-grid{ grid-template-columns:1fr; } }

/* Profile setup */
.upload-box{
  border:1.5px dashed rgba(43,15,30,0.22); border-radius:var(--radius-md);
  padding:24px; text-align:center; cursor:pointer; transition:border-color .2s, background .2s;
  background:var(--ivory-dim);
}
.upload-box:hover{ border-color:var(--rose); }
.upload-box input[type=file]{ display:none; }
.upload-box .fname{ font-size:12.5px; color:var(--mauve); margin-top:8px; word-break:break-all; }
.photo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:10px; }
.photo-slot{ aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--ivory-dim); position:relative; }
.photo-slot img{ width:100%; height:100%; object-fit:cover; }

/* Discover */
.discover-wrap{ display:flex; flex-direction:column; align-items:center; }
.quota-banner{
  width:100%; max-width:420px; display:flex; justify-content:space-between; align-items:center;
  background:var(--paper); border-radius:999px; padding:12px 20px; box-shadow:var(--shadow-card); margin-bottom:26px;
  font-size:13.5px; font-weight:700; color:var(--mauve);
}
.candidate-card{
  width:100%; max-width:420px; background:var(--paper); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft); overflow:hidden; border:1px solid rgba(43,15,30,0.05);
}
.candidate-photo{ width:100%; aspect-ratio:4/5; background:var(--ivory-dim); position:relative; overflow:hidden; }
.candidate-photo img{ width:100%; height:100%; object-fit:cover; }
.candidate-photo .no-photo{ display:flex; align-items:center; justify-content:center; height:100%; color:var(--mauve); font-family:var(--font-mono); font-size:12px; }
.candidate-seal{ position:absolute; top:14px; right:14px; width:38px; height:38px; filter:drop-shadow(0 4px 10px rgba(0,0,0,0.3)); }
.candidate-body{ padding:22px 24px 26px; }
.candidate-body h2{ font-size:22px; display:flex; align-items:baseline; gap:8px; }
.candidate-body .age{ font-family:var(--font-mono); font-size:15px; color:var(--mauve); font-weight:400; }
.candidate-meta{ font-size:13.5px; color:var(--mauve); margin-top:4px; }
.candidate-bio{ font-size:14.5px; margin-top:14px; line-height:1.6; }
.candidate-actions{ display:flex; gap:14px; margin-top:24px; }
.candidate-actions button{
  flex:1; padding:14px; border-radius:16px; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .2s var(--ease);
}
.candidate-actions button:active{ transform:scale(0.96); }
.btn-pass{ background:var(--ivory-dim); color:var(--mauve); }
.btn-like{ background:var(--rose); color:#fff; box-shadow:0 10px 24px -10px rgba(226,78,107,0.6); }
.empty-state{
  text-align:center; padding:60px 20px; color:var(--mauve); max-width:420px;
}
.empty-state svg{ margin:0 auto 18px; }
.empty-state h3{ color:var(--plum); font-size:19px; margin-bottom:8px; }

/* Matches grid */
.matches-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:18px; }
.match-card{ background:var(--paper); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); border:1px solid rgba(43,15,30,0.05); transition:transform .2s var(--ease); }
.match-card:hover{ transform:translateY(-3px); }
.match-photo{ width:100%; aspect-ratio:1; background:var(--ivory-dim); overflow:hidden; }
.match-photo img{ width:100%; height:100%; object-fit:cover; }
.match-photo .no-photo{ display:flex; align-items:center; justify-content:center; height:100%; color:var(--mauve); font-family:var(--font-mono); font-size:11px; }
.match-info{ padding:14px 16px; }
.match-info h4{ font-size:15px; }
.match-info .last-msg{ font-size:12.5px; color:var(--mauve); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Chat */
.chat-shell{ display:grid; grid-template-columns:280px 1fr; gap:0; background:var(--paper); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft); border:1px solid rgba(43,15,30,0.05); height:70vh; min-height:480px; }
.chat-list{ border-right:1px solid rgba(43,15,30,0.08); overflow-y:auto; }
.chat-list-item{ display:flex; gap:12px; align-items:center; padding:14px 16px; border-bottom:1px solid rgba(43,15,30,0.05); transition:background .2s; }
.chat-list-item:hover, .chat-list-item.active{ background:var(--ivory-dim); }
.chat-list-item .thumb{ width:42px; height:42px; border-radius:50%; overflow:hidden; background:var(--ivory-dim); flex-shrink:0; }
.chat-list-item .thumb img{ width:100%; height:100%; object-fit:cover; }
.chat-list-item .name{ font-size:14px; font-weight:700; }
.chat-list-item .preview{ font-size:12px; color:var(--mauve); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.chat-panel{ display:flex; flex-direction:column; }
.chat-header{ padding:16px 22px; border-bottom:1px solid rgba(43,15,30,0.08); display:flex; align-items:center; gap:12px; font-weight:700; }
.chat-messages{ flex:1; overflow-y:auto; padding:22px; display:flex; flex-direction:column; gap:10px; }
.msg{ max-width:70%; padding:11px 16px; border-radius:18px; font-size:14px; line-height:1.4; }
.msg.mine{ align-self:flex-end; background:var(--rose); color:#fff; border-bottom-right-radius:5px; }
.msg.theirs{ align-self:flex-start; background:var(--ivory-dim); color:var(--plum); border-bottom-left-radius:5px; }
.msg-time{ font-family:var(--font-mono); font-size:10px; opacity:0.6; margin-top:4px; display:block; }
.chat-input{ padding:16px 20px; border-top:1px solid rgba(43,15,30,0.08); display:flex; gap:10px; }
.chat-input input{ flex:1; padding:12px 16px; border-radius:999px; border:1.5px solid rgba(43,15,30,0.14); font-family:inherit; font-size:14px; outline:none; }
.chat-input input:focus{ border-color:var(--rose); }
.chat-empty{ display:flex; align-items:center; justify-content:center; height:100%; color:var(--mauve); font-size:14px; }

@media (max-width:760px){
  .chat-shell{ grid-template-columns:1fr; height:auto; }
  .chat-list{ max-height:220px; }
}

/* Settings / plans */
.settings-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:20px; }
.settings-plan{ background:var(--paper); border-radius:var(--radius-md); padding:26px 22px; border:2px solid transparent; box-shadow:var(--shadow-card); position:relative; }
.settings-plan.current{ border-color:var(--gold); }
.settings-plan .cur-badge{ position:absolute; top:-11px; right:18px; background:var(--gold); color:var(--plum); font-family:var(--font-mono); font-size:10px; font-weight:700; padding:4px 10px; border-radius:999px; }
.settings-plan h4{ font-size:16px; }
.settings-plan .price{ font-family:var(--font-display); font-size:30px; margin:10px 0 2px; }
.settings-plan .quota{ font-family:var(--font-mono); font-size:12px; color:var(--mauve); margin-bottom:16px; }
@media (max-width:780px){ .settings-grid{ grid-template-columns:1fr; } }

/* Toast */
.toast{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(140%); background:var(--plum); color:var(--ivory); padding:13px 22px; border-radius:14px; font-size:13.5px; box-shadow:var(--shadow-soft); transition:transform .4s var(--ease); z-index:300; }
.toast.show{ transform:translateX(-50%) translateY(0); }