/* Design tokens and component tweaks for 2026 refresh */
:root{
  --brand-900:#0b2545;
  --brand-700:#0f3b6b;
  --accent:#ff7a59;
  --accent-2:#0ea5a4;
  --paper:#f6f4ee;
  --ink-soft:#24364d;
  --muted-600:#6b7280;
  --surface:#ffffff;
  --surface-2:#fbfdff;
  --card-bg:linear-gradient(180deg, rgba(15,59,107,0.03), rgba(11,37,69,0.02));
  --glass: rgba(255,255,255,0.7);
  --radius-lg:14px;
  --font-ui:"Manrope", "Segoe UI", sans-serif;
  --font-display:"Fraunces", Georgia, serif;
}

body{
  font-family:var(--font-ui);
  background:
    radial-gradient(circle at top left, rgba(255,122,89,0.12), transparent 28%),
    radial-gradient(circle at top right, rgba(14,165,164,0.12), transparent 26%),
    linear-gradient(180deg, #fffdf8 0%, #f7fbff 54%, #ffffff 100%);
  color:var(--brand-900);
}

.page-content{
  position:relative;
  padding-top:32px;
  padding-bottom:56px;
}

h1,h2,h3,h4,.brand{
  font-family:var(--font-display);
  letter-spacing:-0.02em;
  text-wrap:balance;
}

/* Header modernized */
.site-header{border-bottom:1px solid rgba(15,59,107,0.04);backdrop-filter:blur(6px)}
.brand{letter-spacing:0.04em;font-weight:700;font-size:1.16rem;text-transform:lowercase}

.nav a{
  font-family:var(--font-ui);
  font-weight:700;
  color:#c8d5e8;
}

/* Product card uplift */
.product-card{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:0 6px 18px rgba(11,37,69,0.06);overflow:hidden;display:flex;flex-direction:column}
.product-card .thumbnail{height:160px;background-size:cover;background-position:center;border-bottom:1px solid rgba(11,37,69,0.04)}
.product-card .card-body{padding:16px 18px}
.product-card .title{font-weight:700;color:var(--brand-700);margin-bottom:6px}
.product-card .meta{color:var(--muted-600);font-size:0.92rem}
.product-card .price{margin-top:10px;font-weight:700;color:var(--brand-900)}

/* Floating support button refinement */
.support-fab{background:var(--accent);color:#fff;border-radius:14px;padding:10px 14px;box-shadow:0 8px 24px rgba(15,59,107,0.12);right:18px;bottom:18px}

/* Flash messages subtle */
.flash-msg{border-radius:10px;padding:10px 12px;backdrop-filter:blur(4px);border:1px solid rgba(11,37,69,0.03)}

/* Accessibility: focus outlines */
a:focus{outline:3px solid rgba(15,59,107,0.12);outline-offset:3px}

.site-footer{
  background:linear-gradient(180deg, rgba(11,37,69,0), rgba(11,37,69,0.03));
}

.auth-wrapper{
  display:grid;
  gap:24px;
  align-items:start;
  justify-items:center;
}

.auth-card,
.profile-card,
.legal-panel{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.96));
  border:1px solid rgba(15,59,107,0.08);
  box-shadow:0 22px 60px rgba(11,37,69,0.08);
  border-radius:24px;
  padding:28px;
}

.auth-card::before,
.profile-card::before,
.legal-panel::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:8px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}

.auth-card h2,
.profile-card h2,
.legal-panel h2{
  font-size:clamp(2rem, 4vw, 2.7rem);
  line-height:1;
  margin-bottom:14px;
}

.auth-form label{
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:800;
  color:var(--muted-600);
}

.auth-form input,
.auth-form textarea{
  border-radius:16px;
  border:1px solid rgba(15,59,107,0.12);
  background:var(--surface-2);
  padding:14px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.8);
}

.auth-form input:focus,
.auth-form textarea:focus{
  border-color:rgba(255,122,89,0.6);
  box-shadow:0 0 0 4px rgba(255,122,89,0.12);
  outline:none;
}

.auth-switch{
  margin-top:12px;
  color:var(--ink-soft);
}

.auth-switch a{
  font-weight:700;
}

.support-card{
  max-width:820px;
}

.legal-panel{
  max-width:920px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.98)),
    linear-gradient(135deg, rgba(255,122,89,0.05), rgba(14,165,164,0.05));
}

.legal-sections{
  display:grid;
  gap:18px;
}

.legal-section{
  background:rgba(246,244,238,0.6);
  border:1px solid rgba(15,59,107,0.08);
  border-radius:18px;
  padding:18px 20px;
}

.legal-section h3{
  margin-bottom:8px;
  font-size:1.15rem;
}

.profile-info,
.activation-card,
.danger-zone,
.purchase-item{
  border-radius:18px;
}

.purchase-item,
.activation-card{
  background:rgba(251,253,255,0.95);
  border:1px solid rgba(15,59,107,0.08);
}

.activation-card{
  padding:18px 20px;
  background:linear-gradient(135deg, rgba(255,122,89,0.08), rgba(14,165,164,0.08));
}

.profile-divider{
  border:none;
  border-top:1px solid rgba(15,59,107,0.08);
  margin:28px 0;
}

.danger-zone{
  background:rgba(255,122,89,0.06);
  border:1px solid rgba(255,122,89,0.2);
  padding:16px 18px;
}

.danger-zone summary{
  cursor:pointer;
  font-weight:800;
}

@media (min-width:900px){
  .product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .auth-wrapper{
    grid-template-columns:minmax(0, 1fr);
  }
  .auth-card,
  .profile-card,
  .legal-panel{
    padding:34px;
  }
}

/* Dark mode overrides for design-2026 tokens */
@media (prefers-color-scheme: dark) {
  :root {
    --brand-900: #e2e8f0;
    --brand-700: #93c5fd;
    --paper: #0f172a;
    --ink-soft: #cbd5e1;
    --muted-600: #94a3b8;
    --surface: #1e293b;
    --surface-2: #1e293b;
    --card-bg: linear-gradient(180deg, rgba(30,41,59,0.6), rgba(15,23,42,0.4));
    --glass: rgba(30,41,59,0.82);
  }
  body {
    background: #0f172a;
  }
  .auth-card,
  .profile-card,
  .legal-panel {
    background: linear-gradient(180deg, rgba(30,41,59,0.88), rgba(30,41,59,0.96));
    border-color: rgba(51,65,85,0.5);
  }
  .auth-card::before,
  .profile-card::before,
  .legal-panel::before {
    background: linear-gradient(90deg, #818cf8, #34d399);
  }
  .legal-section {
    background: rgba(30,41,59,0.6);
    border-color: rgba(51,65,85,0.5);
  }
  .purchase-item,
  .activation-card {
    background: rgba(30,41,59,0.8);
    border-color: rgba(51,65,85,0.5);
  }
  .danger-zone {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.3);
  }
  .auth-form input,
  .auth-form textarea {
    background: #0f172a;
    border-color: rgba(51,65,85,0.5);
    color: #e2e8f0;
  }
}