/* SinaMedic — shared styles for login, signup, account & admin pages.
   Tokens mirror the colors/fonts already used across the site's
   pages so these feel native rather than bolted on. */

:root {
  --sm-bg: oklch(0.965 0.014 88);
  --sm-surface: oklch(0.98 0.008 95);
  --sm-cream: oklch(0.97 0.012 95);
  --sm-border: oklch(0.89 0.015 100);
  --sm-border-soft: oklch(0.85 0.015 100);
  --sm-text: oklch(0.24 0.018 130);
  --sm-text-soft: oklch(0.45 0.02 130);
  --sm-label: oklch(0.52 0.02 130);
  --sm-muted: oklch(0.53 0.02 130);
  --sm-accent: oklch(0.40 0.055 128);
  --sm-accent-hover: oklch(0.30 0.05 128);
  --sm-accent-soft: oklch(0.48 0.07 132);
  --sm-footer-bg: oklch(0.24 0.018 130);
  --sm-footer-text: oklch(0.88 0.012 100);
  --sm-error: oklch(0.5 0.17 25);
  --sm-error-bg: oklch(0.95 0.04 25);
  --sm-error-border: oklch(0.85 0.08 25);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--sm-bg); }
html { scroll-behavior: smooth; }
body {
  font-family: Karla, system-ui, sans-serif;
  color: var(--sm-text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: var(--sm-accent); text-decoration: none; transition: color 220ms ease, background 220ms ease, border-color 220ms ease; }
a:hover { color: var(--sm-accent-hover); }
button { font-family: inherit; cursor: pointer; transition: background 220ms ease, color 220ms ease, border-color 220ms ease, opacity 220ms ease; }
input, select, textarea { font-family: inherit; font-size: inherit; transition: border-color 220ms ease; }
::selection { background: var(--sm-accent); color: var(--sm-cream); }
:focus-visible { outline: 2px solid var(--sm-accent-soft); outline-offset: 2px; }

.sm-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--sm-bg); }
.sm-main { flex: 1 0 auto; }

/* ---- Header / nav (matches the marketing pages) ---- */
.sm-header {
  position: sticky; top: 0; z-index: 40;
  background: oklch(0.965 0.014 88 / 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sm-border);
}
.sm-header-inner {
  max-width: 1240px; margin: 0 auto; padding: 16px 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.sm-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: Newsreader, serif; font-size: 25px; letter-spacing: -0.01em;
  color: var(--sm-text);
}
.sm-logo svg { width: 23px; height: 23px; color: var(--sm-accent-soft); }
.sm-nav { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; font-size: 15px; letter-spacing: 0.01em; }
.sm-nav a.sm-link { color: oklch(0.35 0.02 130); }
.sm-nav a.sm-link:hover { color: var(--sm-accent-soft); }
.sm-nav a.sm-link.is-active { color: var(--sm-accent); font-weight: 500; }
.sm-auth-group { display: flex; align-items: center; gap: 14px; }
.sm-btn-pill-solid {
  display: inline-block; background: var(--sm-accent); color: var(--sm-cream);
  padding: 11px 20px; border-radius: 999px; font-weight: 500; font-size: 14.5px; border: 0;
}
.sm-btn-pill-solid:hover { background: var(--sm-accent-hover); color: var(--sm-cream); }
.sm-btn-pill-outline {
  display: inline-block; background: transparent; color: oklch(0.30 0.03 130);
  padding: 10px 18px; border-radius: 999px; font-weight: 500; font-size: 14px;
  border: 1px solid oklch(0.80 0.02 110);
}
.sm-btn-pill-outline:hover { border-color: var(--sm-accent-soft); color: var(--sm-accent); }

/* Simplified header for logged-in / admin shells (no marketing nav) */
.sm-app-header-inner { max-width: 1240px; margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sm-app-user { display: flex; align-items: center; gap: 18px; font-size: 14.5px; color: var(--sm-text-soft); }
.sm-app-user strong { color: var(--sm-text); font-weight: 500; }

/* ---- Auth page layout (login / signup) ---- */
.sm-auth-wrap { max-width: 1240px; margin: 0 auto; padding: 64px 28px 100px; }
.sm-auth-eyebrow {
  display: flex; align-items: center; gap: 13px; font-size: 12.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sm-muted); margin-bottom: 20px;
}
.sm-auth-eyebrow span { width: 30px; height: 1px; background: oklch(0.75 0.02 120); }
.sm-auth-title {
  font-family: Newsreader, serif; font-weight: 300; font-size: clamp(2.1rem, 4vw, 3rem);
  letter-spacing: -0.02em; margin: 0 0 14px; line-height: 1.08; max-width: 20ch;
}
.sm-auth-sub { font-size: 16px; line-height: 1.6; color: var(--sm-text-soft); margin: 0 0 44px; max-width: 52ch; }

.sm-card {
  background: var(--sm-surface); border: 1px solid var(--sm-border); border-radius: 3px;
  display: flex; flex-wrap: wrap; overflow: hidden;
}
.sm-card-side {
  flex: 1 1 320px; min-width: 280px; padding: 48px 44px;
  border-right: 1px solid var(--sm-border);
  background: var(--sm-footer-bg); color: var(--sm-footer-text);
  display: flex; flex-direction: column; justify-content: center;
}
.sm-card-side h2 { font-family: Newsreader, serif; font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -0.02em; margin: 0 0 16px; color: var(--sm-cream); }
.sm-card-side p { font-size: 15px; line-height: 1.65; color: oklch(0.80 0.015 110); margin: 0 0 28px; max-width: 36ch; }
.sm-card-side .sm-switch-link { color: var(--sm-cream); font-weight: 500; border: 1px solid oklch(0.5 0.03 130); padding: 12px 22px; border-radius: 999px; display: inline-block; align-self: flex-start; font-size: 14.5px; }
.sm-card-side .sm-switch-link:hover { border-color: oklch(0.75 0.04 125); color: var(--sm-cream); }
.sm-card-form { flex: 1 1 380px; min-width: 300px; padding: 48px 44px; }

.sm-field { display: grid; gap: 8px; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sm-label); margin-bottom: 20px; }
.sm-field:last-of-type { margin-bottom: 0; }
.sm-input {
  border: 0; border-bottom: 1px solid var(--sm-border-soft); background: transparent;
  padding: 11px 2px; font-size: 16px; color: var(--sm-text); letter-spacing: normal;
  text-transform: none; outline: none; width: 100%;
}
.sm-input:focus { border-bottom-color: var(--sm-accent-soft); }
.sm-form-grid { display: grid; gap: 20px; }
.sm-form-row-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; }

.sm-submit {
  margin-top: 8px; background: var(--sm-accent); color: var(--sm-cream); border: 0;
  padding: 15px 32px; border-radius: 999px; font-weight: 500; font-size: 15.5px; cursor: pointer;
}
.sm-submit:hover { background: var(--sm-accent-hover); }
.sm-submit:disabled { opacity: 0.6; cursor: default; }

.sm-error-banner {
  background: var(--sm-error-bg); border: 1px solid var(--sm-error-border); color: var(--sm-error);
  border-radius: 3px; padding: 13px 16px; font-size: 14px; line-height: 1.5; margin-bottom: 22px;
}
.sm-help { font-size: 13px; color: var(--sm-muted); margin-top: 22px; line-height: 1.6; }
.sm-help a { font-weight: 500; }

/* ---- Minimal footer for utility pages ---- */
.sm-footer-mini {
  border-top: 1px solid var(--sm-border); padding: 26px 28px; margin-top: auto;
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between;
  max-width: 1240px; width: 100%; margin-left: auto; margin-right: auto; font-size: 13px; color: var(--sm-muted);
}
.sm-footer-mini a { color: var(--sm-text-soft); font-weight: 500; }

/* ---- Account page ---- */
.sm-account-wrap { max-width: 760px; margin: 0 auto; padding: 72px 28px 110px; }
.sm-account-card { background: var(--sm-surface); border: 1px solid var(--sm-border); border-radius: 3px; padding: 44px; }
.sm-account-row { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid var(--sm-border); font-size: 15px; }
.sm-account-row:first-child { border-top: 0; }
.sm-account-row dt { color: var(--sm-muted); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.sm-account-row dd { margin: 0; font-weight: 500; }

/* ---- Admin shell ---- */
.sm-admin-header { background: var(--sm-footer-bg); }
.sm-admin-header .sm-app-header-inner { color: var(--sm-footer-text); }
.sm-admin-header .sm-logo { color: var(--sm-cream); }
.sm-admin-header .sm-app-user { color: oklch(0.78 0.015 110); }
.sm-admin-header .sm-app-user strong { color: var(--sm-cream); }
.sm-admin-header a.sm-btn-pill-outline { border-color: oklch(0.45 0.03 130); color: var(--sm-cream); }
.sm-admin-header a.sm-btn-pill-outline:hover { border-color: oklch(0.75 0.04 125); color: var(--sm-cream); }

.sm-admin-wrap { max-width: 1160px; margin: 0 auto; padding: 48px 28px 100px; }
.sm-admin-title { font-family: Newsreader, serif; font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.02em; margin: 0 0 6px; }
.sm-admin-sub { color: var(--sm-text-soft); font-size: 15px; margin: 0 0 36px; }

.sm-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; margin-bottom: 40px; }
.sm-stat-card { background: var(--sm-surface); border: 1px solid var(--sm-border); border-radius: 3px; padding: 22px 24px; }
.sm-stat-num { font-family: Newsreader, serif; font-size: 34px; font-weight: 300; line-height: 1; color: var(--sm-accent); }
.sm-stat-label { font-size: 13px; color: var(--sm-muted); margin-top: 8px; }

.sm-panel { background: var(--sm-surface); border: 1px solid var(--sm-border); border-radius: 3px; margin-bottom: 32px; overflow: hidden; }
.sm-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--sm-border); flex-wrap: wrap; }
.sm-panel-head h2 { font-family: Newsreader, serif; font-weight: 400; font-size: 19px; margin: 0; }
.sm-panel-search input { border: 1px solid var(--sm-border-soft); border-radius: 999px; padding: 8px 16px; font-size: 14px; min-width: 220px; background: var(--sm-cream); }
.sm-panel-search input:focus { border-color: var(--sm-accent-soft); }

.sm-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.sm-table th { text-align: left; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sm-muted); font-weight: 500; padding: 12px 24px; border-bottom: 1px solid var(--sm-border); background: oklch(0.95 0.012 95); }
.sm-table td { padding: 14px 24px; border-bottom: 1px solid var(--sm-border); vertical-align: top; }
.sm-table tr:last-child td { border-bottom: 0; }
.sm-table tr:hover td { background: oklch(0.96 0.012 95); }
.sm-table-empty { padding: 40px 24px; text-align: center; color: var(--sm-muted); font-size: 14.5px; }
.sm-msg-cell { max-width: 340px; color: var(--sm-text-soft); }
.sm-tag { display: inline-block; font-size: 11.5px; padding: 3px 10px; border-radius: 999px; background: oklch(0.90 0.03 130); color: var(--sm-accent-hover); font-weight: 500; }

@media (max-width: 640px) {
  .sm-card-side { border-right: 0; border-bottom: 1px solid var(--sm-border); }
  .sm-table th:nth-child(3), .sm-table td:nth-child(3) { display: none; }
}