/* uVote web pages: the app's emerald + bronze theme with its glossy glass
   finish (arched sheen and bright inner rim on cards, gel pill buttons). */
:root{
  --bg1:#F9F0DE;--bg2:#ECE8DA;--bg3:#D8E2D4;
  --card1:#FFFBF1;--card2:#F0E5D1;--card3:#FFFBF2;
  --text:#123D32;--muted:#586A60;--accent:#805B3D;--accent-soft:#D6B18B;
  --line:#D2C5B2;--sheen:rgba(255,243,224,.55);--rim:rgba(255,243,224,.95);
  --shadow:rgba(18,61,50,.12);--code:rgba(128,91,61,.12);
  --on-bronze:#052E26;
}
@media (prefers-color-scheme:dark){:root{
  --bg1:#1D654C;--bg2:#093D2F;--bg3:#031D17;
  --card1:#235E47;--card2:#124631;--card3:#0B3328;
  --text:#F8F2E8;--muted:#BACCC3;--accent:#D6B18B;--accent-soft:#E9CFAC;
  --line:#466255;--sheen:rgba(255,243,224,.14);--rim:rgba(255,243,224,.40);
  --shadow:rgba(0,0,0,.35);--code:rgba(214,177,139,.14);
}}
*{box-sizing:border-box}
html{background:var(--bg3)}
body{
  margin:0;min-height:100vh;color:var(--text);
  font:16px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:linear-gradient(135deg,var(--bg1) 0%,var(--bg2) 55%,var(--bg3) 100%) fixed;
}
main{max-width:780px;margin:0 auto;padding:28px 16px 64px}

/* Brand bar */
.brand{display:inline-flex;align-items:center;gap:12px;margin:0 0 18px;
  color:var(--text);text-decoration:none;font-weight:800;font-size:1.25rem;letter-spacing:-.01em}
.brand img{width:44px;height:44px;border-radius:12px;
  box-shadow:0 0 0 1px var(--rim),0 6px 16px var(--shadow)}

h1{font-size:clamp(1.6rem,4.5vw,2.1rem);line-height:1.25;margin:.3em 0 .15em;letter-spacing:-.02em}
h2{font-size:1.12rem;margin:0 0 .45em;color:var(--accent)}
p,li{color:var(--text)}
ul,ol{padding-left:1.3em}
.meta{color:var(--muted);font-size:.9rem;margin:0 0 22px}
a{color:var(--accent);text-underline-offset:3px}
strong{font-weight:700}
code{background:var(--code);padding:1px 7px;border-radius:7px;font-size:.92em}

/* Glossy pill navigation */
nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
nav a{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;
  padding:8px 16px;border-radius:999px;text-decoration:none;
  font-weight:600;font-size:.92rem;color:var(--accent);
  background:rgba(255,255,255,.05);border:1.2px solid color-mix(in srgb,var(--accent) 55%,transparent);
  transition:transform .12s ease,background .2s ease;
}
nav a::before{ /* gel highlight on the upper half */
  content:"";position:absolute;left:5px;right:5px;top:2px;height:52%;border-radius:999px;
  background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.02));pointer-events:none;
}
nav a:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
nav a:active{transform:scale(.97)}
nav a[aria-current="page"]{
  color:var(--on-bronze);border-color:rgba(255,255,255,.45);
  background:linear-gradient(#EBCFA8,#D6B18B 50%,#B88D66);
  box-shadow:0 8px 20px -6px rgba(214,177,139,.55),inset 0 0 0 1px rgba(255,255,255,.35);
}
nav a[aria-current="page"]::before{background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.06))}

/* Glossy glass cards */
.card{
  position:relative;overflow:hidden;isolation:isolate;
  margin:14px 0;padding:20px 22px;border-radius:22px;
  background:linear-gradient(135deg,var(--card1) 0%,var(--card2) 55%,var(--card3) 100%);
  border:1px solid var(--line);
  box-shadow:inset 0 0 0 1.2px var(--rim),0 14px 30px -10px var(--shadow);
}
.card::before{ /* arched sheen across the top */
  content:"";position:absolute;z-index:-1;left:-25%;right:-25%;top:-160px;height:250px;
  border-radius:50%;background:linear-gradient(var(--sheen),transparent 95%);pointer-events:none;
}
.card>:first-child{margin-top:0}
.card>:last-child{margin-bottom:0}

/* Home hero */
.hero{text-align:center;padding:34px 22px 28px}
.hero img{width:96px;height:96px;border-radius:24px;
  box-shadow:0 0 0 1.5px var(--rim),0 14px 30px -8px var(--shadow)}
.hero h1{margin:.45em 0 .1em}
.hero .meta{margin-bottom:18px}
.hero nav{justify-content:center}

footer{margin-top:30px;color:var(--muted);font-size:.85rem;text-align:center}
footer a{color:var(--accent)}

@media (max-width:480px){
  .card{padding:18px 16px;border-radius:20px}
  nav a{padding:7px 13px;font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){nav a{transition:none}}