:root{
  /* ===== Your core palette ===== */
  --bg:#ffffff;          /* white */
  --ink:#0a0a0a;         /* black */
  --muted:#6b7280;       /* gray */
  --card:#ffffff;        /* white */
  --border:#e5e7eb;      /* light gray */

  /* Accents */
  --accent:#ef4444;      /* red */
  --accent-2:#ec4899;    /* pink */

  /* Status */
  --good:#16a34a;        /* success */
  --bad:#dc2626;         /* error */

  /* Shape / effects */
  --radius:16px;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  color-scheme: light;

  /* ===== Mapped tokens (for the rest of the styles) ===== */
  --text: var(--ink);
  --surface: var(--card);          /* unify */
  --brand: var(--accent);
  --brand-2: var(--accent-2);
  --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);

  /* Logo colors */
  --flame-1:#C21E56; --flame-2:#AA0000; --flame-3:#C80815;
  --gap:#fff; --glow:#FF8A3D;
  --brand-red:#dc143c;
}

/* ===== Reset ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== Flame styling ===== */
.gap{ stroke:var(--gap); stroke-width:12; stroke-linejoin:round; stroke-linecap:round; paint-order:stroke fill; }
.flame-1{ fill:var(--flame-1); }
.flame-2{ fill:var(--flame-2); }
.flame-3{ fill:var(--flame-3); }
.halo{ opacity:.55; }
.brand__svg{ width: clamp(28px,3.2vw,40px); height:auto; display:block; }
.brand__text{
  font: 900 clamp(18px,2.6vw,28px)/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#dc143c;
}

/* ==========================
   Tangles Login Help Styles
   ========================== */
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--brand) 12%, transparent), transparent 60%),
    radial-gradient(900px 500px at 110% 0%, color-mix(in oklab, var(--brand-2) 10%, transparent), transparent 60%),
    var(--bg);
}

/* Layout */
.wrap{
  max-width:1100px;
  padding:20px 12px 30px;
  margin:0 auto;
}

/* Header / Navbar */
header{position:relative}
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:color-mix(in oklab, var(--surface) 86%, transparent);
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 4px);
  padding:10px 14px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--text); font-weight:700; letter-spacing:.2px;
}
.navbar a[href$=".html"], .navbar a[href="/Tangles-llc"], .navbar a[aria-label="Back to Home"]{
  color:var(--muted);
  text-decoration:none;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid transparent;
}
.navbar a:hover{color:var(--text); border-color:var(--border); background:color-mix(in oklab, var(--surface) 90%, transparent)}

/* Hero */
.hero{
  margin:26px 0 22px;
  padding:28px 20px;
  border-radius: var(--radius);
  background:
    radial-gradient(800px 300px at 0% 0%, color-mix(in oklab, var(--brand) 8%, transparent), transparent 60%),
    var(--surface);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}
.hero h1{margin:0 0 8px; font-size: clamp(26px, 3vw, 34px); letter-spacing:.2px}
.muted{color:var(--muted)}

/* Grid */
.grid{
  display:grid;
  grid-template-columns: 1.6fr .9fr;
  gap:22px;
}
@media (max-width: 980px){ .grid{ grid-template-columns: 1fr } }

/* Cards */
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: clip;
}
.card .pad{ padding:20px }
.card.side .block{ padding:18px 18px 0 }
.card.side .block:last-child{ padding-bottom:18px }

/* Fields */
.field{
  display:grid; gap:8px; margin:14px 0 16px;
}
label{font-weight:600; font-size:14px}
input{
  appearance:none;
  width:100%;
  border-radius:12px;
  border:1px solid var(--border);
  background:color-mix(in oklab, var(--surface) 90%, transparent);
  color:var(--text);
  padding:12px 14px;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease, background .2s ease;
}
input::placeholder{color:color-mix(in oklab, var(--muted) 80%, transparent)}
input:focus{ border-color: color-mix(in oklab, var(--brand) 35%, var(--border)); box-shadow: var(--ring) }
input:disabled{opacity:.7}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:10px 14px;
  border-radius:12px; border:1px solid var(--border);
  background:linear-gradient(180deg, color-mix(in oklab, var(--surface) 94%, transparent), color-mix(in oklab, var(--surface) 86%, transparent));
  color:var(--text); text-decoration:none; font-weight:600;
  cursor:pointer; user-select:none;
  transition: transform .06s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) scale(.99) }
.btn.primary{
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 88%, white 8%), var(--brand));
  border-color: color-mix(in oklab, var(--brand) 65%, black 10%);
  color: white;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  box-shadow: 0 6px 20px color-mix(in oklab, var(--brand) 30%, transparent);
}
.btn.primary:hover{ box-shadow: 0 10px 24px color-mix(in oklab, var(--brand) 38%, transparent) }
.btn.link{
  background: transparent; border-color: var(--border);
}
.btn[disabled]{opacity:.6; cursor:not-allowed}

/* Lists / pills */
.tips{margin:0; padding-left:18px}
.pill{
  display:inline-block; font-size:13px; color:var(--muted);
  border:1px dashed var(--border); padding:6px 10px; border-radius:999px;
  margin:6px 6px 0 0; background: color-mix(in oklab, var(--surface) 90%, transparent);
}

/* Inline rows */
.row{ display:flex; flex-wrap:wrap; gap:10px }

/* Status zones */
#resetMsg, #verifyMsg{
  margin-top:10px; font-size:14px;
  padding:10px 12px; border-radius:10px; border:1px solid transparent;
  background: transparent; color: var(--muted);
}
.status--ok{ color: var(--good); border-color: color-mix(in oklab, var(--good) 35%, var(--border)); background: color-mix(in oklab, var(--good) 12%, transparent) }
.status--warn{ color: #f59f00; border-color: color-mix(in oklab, #f59f00 35%, var(--border)); background: color-mix(in oklab, #f59f00 12%, transparent) }
.status--err{ color: var(--bad); border-color: color-mix(in oklab, var(--bad) 35%, var(--border)); background: color-mix(in oklab, var(--bad) 12%, transparent) }

/* Footer */
footer{
  margin-top:26px; padding:18px 8px; text-align:center; color:var(--muted);
}

/* Subtle halo animation (kept) */
.halo{animation: haloPulse 4s ease-in-out infinite; transform-origin: center}
@keyframes haloPulse{ 0%, 100%{ opacity:.55 } 50%{ opacity:.35 } }

/* Utilities */
hr{opacity:.6}
.block + .block{ border-top:1px dashed var(--border) }
@media (pointer:coarse){
  .btn{ padding:12px 16px }
  input{ padding:14px 16px }
}

/* ===== Compact mode (apply via <body class="compact">) ===== */
/* Compact grid applies only above 920px */
@media (min-width: 921px) {
  .compact .grid { gap:16px; grid-template-columns: 1.4fr .8fr; }
}

/* Stack at 920px and below (for both regular and compact) */
@media (max-width: 920px) {
  .grid,
  .compact .grid {
    grid-template-columns: 1fr !important;
    gap: 18px;
  }
}