:root {
  --bg: #eef0f8; --ink: #14151f; --muted: #4c4f63; --line: rgb(255 255 255 / .7); --edge: rgb(20 21 40 / .1);
  --glass: rgb(255 255 255 / .55); --glass-solid: #f8f9fd; --field: rgb(255 255 255 / .7);
  --accent: #6d3df5; --accent-ink: #ffffff; --star: #e09400; --star-off: #b9bccb;
  --pink: #d6337a; --blue: #2b6fe0; --ok: #1f7a3a; --err: #b42318; --focus: #2f5bff;
  --glow1: rgb(255 120 180 / .45); --glow2: rgb(90 150 255 / .45); --glow3: rgb(150 110 255 / .35);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --shadow: 0 10px 30px -12px rgb(30 30 70 / .25);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0c16; --ink: #eef0fa; --muted: #a9adc4; --line: rgb(255 255 255 / .12); --edge: rgb(0 0 0 / .4);
    --glass: rgb(28 30 52 / .55); --glass-solid: #1b1d31; --field: rgb(10 11 24 / .55);
    --accent: #a98bff; --accent-ink: #120c2a; --star: #ffc53d; --star-off: #4a4d66;
    --pink: #ff7ab3; --blue: #79a8ff; --ok: #6fd18a; --err: #ff8a7a; --focus: #9db4ff;
    --glow1: rgb(255 70 150 / .28); --glow2: rgb(60 120 255 / .3); --glow3: rgb(130 80 255 / .25);
    --shadow: 0 10px 30px -12px rgb(0 0 0 / .6);
  }
}
.tint-0 { --tint: var(--pink); }
.tint-1 { --tint: var(--blue); }

[x-cloak] { display: none !important; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 17px/1.5 var(--font);
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
  background:
    radial-gradient(40rem 30rem at 0% 0%, var(--glow1), transparent 60%),
    radial-gradient(36rem 30rem at 100% 30%, var(--glow2), transparent 60%),
    radial-gradient(30rem 26rem at 30% 100%, var(--glow3), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Glass surface; solid fallback below when backdrop-filter is missing. */
.glass {
  background: var(--glass); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: inset 0 1px 0 var(--line), var(--shadow);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .tabs, .appbar { background: var(--glass-solid); }
}
.glass[class*="tint-"] { background-image: linear-gradient(135deg, color-mix(in srgb, var(--tint) 16%, transparent), transparent 70%); border-left: 4px solid var(--tint); }

.appbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 16px; max-width: 640px; margin: 0 auto;
}
h1 { font: 800 1.5rem/1 var(--font); margin: 0; letter-spacing: -.03em; }
h1 span { background: linear-gradient(90deg, var(--pink), var(--accent), var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { font: 800 1.4rem/1.2 var(--font); margin: 8px 0 14px; letter-spacing: -.02em; }
h3 { font: 700 .8rem var(--font); margin: 24px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
main { max-width: 640px; margin: 0 auto; padding: 8px 16px 24px; }
form.glass, .rate-card { padding: 16px; }

.me-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; cursor: pointer; white-space: nowrap; flex: none;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--tint) 50%, transparent);
  background: color-mix(in srgb, var(--tint) 14%, var(--glass)); font-weight: 650; font-size: .9rem;
}
.me-chip span:first-child { color: var(--tint); }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-weight: 650; font-size: .9rem; margin-bottom: 6px; }
small { color: var(--muted); font-weight: 400; }
textarea {
  width: 100%; min-height: 44px; padding: 12px 14px; background: var(--field); resize: vertical;
  border: 1px solid var(--edge); border-radius: 14px;
}
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1 1 140px; }

.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  flex: 1 1 auto; min-height: 44px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  background: var(--glass); border: 1px solid var(--line); font-weight: 600; transition: background .2s, color .2s;
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.filters { display: grid; gap: 8px; margin-bottom: 8px; }

.crit { margin-top: 10px; }
.crit-label { font-size: .95rem; }
.stars { display: flex; }
.star {
  width: 48px; height: 48px; border: 0; background: none; cursor: pointer; padding: 0;
  font-size: 2rem; line-height: 1; color: var(--star-off); border-radius: 12px;
  transition: transform .15s ease, color .15s;
}
.star.on { color: var(--star); text-shadow: 0 0 12px color-mix(in srgb, var(--star) 60%, transparent); }
.star:active { transform: scale(1.2); }

.primary, .danger, .secondary {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 12px;
  border-radius: 14px; border: 0; font-weight: 750; cursor: pointer; text-decoration: none; padding: 10px 16px;
  transition: filter .2s, transform .15s;
}
.primary { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--blue))); color: var(--accent-ink); box-shadow: 0 8px 20px -8px var(--accent); }
.primary:hover { filter: brightness(1.08); }
.primary:disabled { opacity: .5; }
.danger { background: transparent; color: var(--err); border: 1.5px solid currentColor; }
.secondary { margin-top: 24px; border: 1px solid var(--line); background: var(--glass); color: var(--ink); }
.link { background: none; border: 0; color: var(--muted); cursor: pointer; min-height: 44px; min-width: 44px; padding: 0 8px; }
.err { color: var(--err); font-weight: 600; }
.ok { color: var(--ok); font-weight: 600; }
.empty { color: var(--muted); font-style: italic; }

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fact {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; padding: 12px; min-height: 44px;
  transition: transform .2s ease;
}
button.fact:hover { transform: translateY(-1px); }
.fact-card .fact:hover { transform: none; }
.rank { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--field); font-weight: 800; }
ol.ranked li:first-of-type .rank, .month-best .rank { background: var(--star); color: #1d1a16; }
.body { flex: 1; min-width: 0; }
.text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; margin: 0; }
.fact-card { padding: 0; overflow: hidden; transition: box-shadow .2s ease; }
.fact-card .fact { background: none; border: 0; border-radius: inherit; }
.fact-card.open { box-shadow: 0 0 0 2px var(--tint, var(--accent)), var(--shadow); }
.fact-card.open .text { display: block; }
.fact-edit { padding: 4px 16px 16px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.fact-edit .crit:first-child { margin-top: 8px; }
.meta { display: block; font-size: .85rem; color: var(--muted); }
.score { flex: none; text-align: right; }
.score b { font-size: 1.4rem; font-weight: 800; color: var(--tint, var(--accent)); }
.month-best { box-shadow: 0 0 0 2px var(--star), var(--shadow); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.tile { padding: 14px; }
.tile b { display: block; font-size: 2rem; line-height: 1.1; font-weight: 800; }
.tile span { color: var(--muted); font-size: .9rem; }

.tabs {
  position: fixed; inset: auto 0 0; display: flex; z-index: 5; padding-bottom: env(safe-area-inset-bottom);
  background: var(--glass); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
.tabs button {
  flex: 1; min-height: 64px; background: none; border: 0; cursor: pointer; font-size: .8rem; font-weight: 650;
  color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.tabs button span { font-size: 1.3rem; line-height: 1; }
.tabs button[aria-current="page"] { color: var(--accent); }

.picker {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 16px; padding: 16px; background: inherit; background-color: var(--bg);
}
.picker h2 { font-size: 2rem; }
.pick-card {
  width: 100%; max-width: 380px; min-height: 120px; display: flex; align-items: center; gap: 18px; padding: 20px 24px;
  cursor: pointer; font-size: 1.5rem; font-weight: 750; text-align: left; transition: transform .2s ease;
}
.pick-card:hover { transform: scale(1.02); }
.avatar {
  flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem;
  color: #fff; background: linear-gradient(135deg, var(--tint), color-mix(in srgb, var(--tint) 55%, #000));
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } .star:active, .fact:hover, .pick-card:hover { transform: none; } }