/* shared.css — Solvulator unified design tokens + base reset */
:root {
  --bg:#050403; --bg2:#0b0805; --panel:rgba(12,9,6,.77); --panel2:rgba(18,13,7,.84);
  --border:#604b26; --border-hi:#92733c;
  --gold:#d8b45e; --hot:#ffd27a; --text:#ecdbb5; --muted:#aa9364; --dim:#6a6460;
  --red:#e06b5a; --green:#84d59b; --blue:#8cb6ff; --violet:#d5a3ff;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  --sans:system-ui,-apple-system,'Segoe UI',sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--text);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.4}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
button{cursor:pointer;font-family:var(--mono);background:none;border:none;
  color:inherit;-webkit-touch-callout:none;min-height:44px}
input,textarea,select{font-family:inherit;color:var(--text);background:rgba(0,0,0,.3);
  border:1px solid var(--border);border-radius:12px;padding:10px;
  font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{border-color:var(--gold);box-shadow:0 0 12px rgba(216,180,94,.15)}
a{color:var(--gold);text-decoration:none;transition:opacity .2s}
a:hover{opacity:.8;text-decoration:none}

/* glass panel */
.glass{backdrop-filter:blur(22px) saturate(1.18);background:var(--panel);border:1px solid var(--border)}

/* Shared UI Components */
.bar {
  display: flex; align-items: center; gap: 10px;
  padding-inline: max(14px, var(--safe-l)) max(14px, var(--safe-r));
  background: linear-gradient(180deg, rgba(19,14,8,.92), rgba(8,6,4,.75));
  backdrop-filter: blur(20px) saturate(1.22);
  border-bottom: 1px solid var(--border);
  min-height: 46px;
  position: sticky; top: 0; z-index: 100;
}
.footer-nav {
  display: flex; align-items: center; gap: 10px;
  padding: 9px max(14px, var(--safe-l)) calc(9px + var(--safe-b));
  background: linear-gradient(0deg, rgba(19,14,8,.92), rgba(8,6,4,.75));
  backdrop-filter: blur(20px) saturate(1.22);
  border-top: 1px solid var(--border);
  overflow-x: auto;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  scrollbar-width: none;
}
.footer-nav::-webkit-scrollbar { display: none; }

.brand { font-size: 14px; font-weight: 750; letter-spacing: .02em; color: var(--hot); white-space: nowrap; }
.brand small { color: var(--muted); font-weight: 500; font-size: 10px; }
.spacer { flex: 1; }
.pill, .badge, .footer-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(11,8,5,.78);
  color: var(--text);
  white-space: nowrap;
  text-decoration: none;
  font: 10px var(--mono);
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: border-color .2s, background .2s;
}
.footer-nav a:hover, .pill:hover { border-color: var(--gold); background: rgba(216,180,94,.08); }
.pill.hot { border-color: var(--gold); box-shadow: 0 0 15px rgba(216,180,94,.12); }
.pill.info { border-color: var(--blue); color: var(--blue); }
.pill.good { border-color: var(--green); color: var(--green); }
.pill.warn { border-color: var(--red); color: var(--red); }

/* toast notification */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--s1);border:1px solid var(--border);color:var(--text);
  padding:10px 20px;border-radius:8px;font-size:12px;font-family:var(--mono);
  opacity:0;transition:opacity .3s;pointer-events:none;z-index:100}
.toast.show{opacity:1}

/* animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fade-in{animation:fadeIn .25s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.slide-up{animation:slideUp .3s ease}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
.pulse{animation:pulse 1.5s ease infinite}