/* Choresy shared UI — loaded after each page's compatibility styles. */
:root{
  color-scheme:dark;
  --bg:#07111f;
  --panel:rgba(13,24,43,.82);
  --card:rgba(16,30,52,.88);
  --input:rgba(5,15,30,.78);
  --line:rgba(148,163,184,.18);
  --line-strong:rgba(148,163,184,.34);
  --text:#f4f7fb;
  --muted:#9eacc0;
  --accent:#8b7cff;
  --accent2:#35d7b1;
  --accent3:#35b8ff;
  --danger:#ff6b7a;
  --danger-bg:rgba(127,29,29,.34);
  --glow:rgba(139,124,255,.22);
  --shadow:0 22px 60px rgba(0,0,0,.30);
  --shadow-soft:0 10px 30px rgba(0,0,0,.18);
  --radius:20px;
  --radius-sm:13px;
}

:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f3f6fb;
  --panel:rgba(255,255,255,.84);
  --card:rgba(255,255,255,.94);
  --input:rgba(255,255,255,.96);
  --line:rgba(51,65,85,.13);
  --line-strong:rgba(51,65,85,.26);
  --text:#172033;
  --muted:#65728a;
  --accent:#6d5ce8;
  --accent2:#10a981;
  --accent3:#078fd1;
  --danger:#dc4054;
  --danger-bg:rgba(254,226,226,.88);
  --glow:rgba(109,92,232,.14);
  --shadow:0 22px 60px rgba(51,65,85,.14);
  --shadow-soft:0 10px 30px rgba(51,65,85,.09);
}

html{scroll-behavior:smooth}
body{
  min-height:100%;
  color:var(--text);
  background:
    radial-gradient(900px 600px at -5% -10%, rgba(53,184,255,.18), transparent 58%),
    radial-gradient(800px 560px at 105% 5%, rgba(139,124,255,.20), transparent 58%),
    radial-gradient(720px 520px at 55% 115%, rgba(53,215,177,.12), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  letter-spacing:-.006em;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,black,transparent 70%);
}

button,input,textarea,select{font:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}

header{
  background:color-mix(in srgb,var(--bg) 72%,transparent)!important;
  border-color:var(--line)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.025);
}

.head,.head-inner,.password-head{min-height:72px}
.head-inner,.password-head{max-width:1100px;margin:0 auto;padding:.8rem .9rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}

h1{display:flex;align-items:center;gap:.6rem;letter-spacing:-.025em}
h2,h3{letter-spacing:-.018em}
.brand-mark{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:11px;
  color:#07111f;
  background:linear-gradient(135deg,var(--accent3),var(--accent2));
  box-shadow:0 8px 24px rgba(53,215,177,.2),inset 0 1px rgba(255,255,255,.45);
  font-size:1.05rem;
  font-weight:900;
}
.eyebrow{margin:0 0 .25rem;color:var(--accent2);font-size:.74rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.muted{color:var(--muted)!important}

.container{padding-top:1.4rem!important}
.wrap{position:relative;z-index:1}

.card,.panel,.tabs,.help{
  border-color:var(--line)!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--card) 96%,white 4%),var(--panel))!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(18px);
}
.card,.panel{position:relative;overflow:hidden}
.card::before,.panel::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  pointer-events:none;
}

button{
  min-height:40px;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  background:color-mix(in srgb,var(--panel) 92%,white 8%)!important;
  color:var(--text)!important;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,filter .16s ease;
}
button:hover:not(:disabled){transform:translateY(-1px);border-color:var(--line-strong)!important;box-shadow:0 8px 22px rgba(0,0,0,.14)}
button:active:not(:disabled){transform:translateY(0) scale(.98)}
button:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--accent3) 46%,transparent);outline-offset:2px}
button.primary,.tab[aria-selected="true"]{
  border-color:transparent!important;
  color:#06111d!important;
  background:linear-gradient(135deg,var(--accent3),var(--accent2))!important;
  box-shadow:0 8px 24px rgba(53,184,255,.16);
}
button.primary:hover:not(:disabled),.tab[aria-selected="true"]:hover{filter:saturate(1.12) brightness(1.05)}
button.ghost,button.secondary{background:color-mix(in srgb,var(--panel) 68%,transparent)!important}
button.danger{color:#ffdce0!important;background:var(--danger-bg)!important;border-color:color-mix(in srgb,var(--danger) 44%,transparent)!important}
:root[data-theme="light"] button.danger{color:#9f1239!important}
button:disabled{opacity:.48!important}

.theme-toggle{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;padding:.45rem .7rem!important}
.theme-toggle-icon{font-size:1rem;line-height:1}
.theme-toggle-label{font-size:.8rem;font-weight:750}

input,textarea,select{
  border-color:var(--line)!important;
  background:var(--input)!important;
  color:var(--text)!important;
  border-radius:12px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
input:hover,textarea:hover,select:hover{border-color:var(--line-strong)!important}
input:focus,textarea:focus,select:focus{
  outline:none!important;
  border-color:var(--accent3)!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent3) 15%,transparent),inset 0 1px rgba(255,255,255,.03)!important;
}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 76%,transparent)}
label{font-weight:650;letter-spacing:.005em}

.item{
  border-color:var(--line)!important;
  background:color-mix(in srgb,var(--input) 78%,transparent)!important;
  border-radius:14px!important;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.item:hover{border-color:var(--line-strong)!important;background:color-mix(in srgb,var(--input) 94%,white 6%)!important}

table{border-collapse:separate!important;border-spacing:0}
th{color:var(--muted)!important;font-size:.75rem!important;letter-spacing:.07em;text-transform:uppercase}
th,td{border-color:var(--line)!important;padding:.68rem .55rem!important}
tbody tr{transition:background .14s ease}
tbody tr:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
tbody tr:last-child td{border-bottom:0!important}
td:last-child,th:last-child{text-align:right}
.rank-col{width:58px}
.rank-badge{
  display:inline-grid;
  place-items:center;
  width:29px;
  height:29px;
  border:1px solid var(--line);
  border-radius:10px;
  background:color-mix(in srgb,var(--input) 86%,white 14%);
  color:var(--muted);
  font-size:.8rem;
  font-weight:850;
}
.rank-1{color:#3b2a00;border-color:rgba(251,191,36,.5);background:linear-gradient(135deg,#fde68a,#fbbf24);box-shadow:0 5px 18px rgba(251,191,36,.16)}
.rank-2{color:#273447;border-color:rgba(203,213,225,.5);background:linear-gradient(135deg,#f1f5f9,#aab6c7)}
.rank-3{color:#3f2113;border-color:rgba(251,146,60,.45);background:linear-gradient(135deg,#fdba74,#c56c3d)}

.tabs{overflow:hidden}
.tablist{
  gap:.45rem!important;
  padding:.6rem!important;
  flex-wrap:nowrap!important;
  overflow-x:auto;
  scrollbar-width:thin;
  background:color-mix(in srgb,var(--bg) 45%,transparent);
}
.tab{flex:0 0 auto;box-shadow:none!important}
.tab > span{margin-right:.35rem}
.tabpanes{padding:1.15rem!important}
.help{overflow:hidden}
.help > header{background:transparent!important;box-shadow:none!important}
.help .content{border-color:var(--line)!important}

.page-auth.page-login{padding:1.25rem}
.page-login .wrap{max-width:940px}
.page-login .card{box-shadow:var(--shadow)}
.page-login .card > header{position:relative;background:color-mix(in srgb,var(--panel) 78%,transparent)!important;padding:1.15rem 1.3rem!important}
.page-login .tabs{border-radius:0!important;border-width:0 0 1px!important;box-shadow:none;background:color-mix(in srgb,var(--bg) 62%,transparent)!important}
.page-login .content{gap:1.1rem;padding:1.15rem}
.page-login .panel{padding:1.25rem}
.page-login .help{border:0!important;border-radius:0!important;box-shadow:none!important;background:color-mix(in srgb,var(--bg) 52%,transparent)!important}
.auth-brand{display:flex;align-items:center;gap:.65rem}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:.8rem}

.page-password .wrap{padding-top:2rem}
.page-password > header{padding:0!important}
.page-password .card{box-shadow:var(--shadow);padding:1.4rem}
.password-head h1{font-size:1.15rem}

.page-family .grid{align-items:start}
.page-family .card,.page-leaderboards .card{padding:1.15rem}
.page-family #submitMsg{font-weight:700;color:var(--accent2)!important}
.page-family #recentList > div:last-child{border-bottom:0!important}

.page-leaderboards .card{border-top:2px solid color-mix(in srgb,var(--accent3) 70%,transparent)!important}
.page-leaderboards .card:nth-child(2){border-top-color:color-mix(in srgb,var(--accent2) 70%,transparent)!important}
.page-leaderboards .card:nth-child(3){border-top-color:color-mix(in srgb,var(--accent) 70%,transparent)!important}
.page-leaderboards .card:nth-child(4){border-top-color:color-mix(in srgb,#fbbf24 70%,transparent)!important}

.page-admin .centerstack{gap:1.1rem}
.page-admin .section h3{font-size:1.12rem;margin-bottom:.8rem}
.page-admin .toolbar{justify-content:flex-end}
.page-admin .table{min-width:680px}
.page-admin #balanceTable{overflow-x:auto}

[aria-live="polite"]{min-height:1.2em}

@media (min-width:900px){
  .page-family .grid{grid-template-columns:minmax(280px,.82fr) minmax(0,1.35fr)!important}
}

@media (max-width:720px){
  body{background-attachment:scroll}
  .head,.head-inner,.password-head{align-items:flex-start;min-height:auto;padding:.75rem}
  .head,.head-inner{flex-direction:column}
  .head > .row,.head-inner > .toolbar{width:100%;justify-content:flex-start}
  .toolbar,.head .row{overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:.2rem;max-width:100%}
  .toolbar button,.head .row button{flex:0 0 auto}
  .theme-toggle-label{display:none}
  .container{padding:.85rem .7rem 1.5rem!important}
  .tabpanes{padding:.85rem!important}
  .card,.panel{border-radius:17px!important}
  .page-login .card > header{align-items:flex-start;gap:.75rem}
  .page-login .header-actions .muted{display:none}
  .page-login .content{padding:.8rem}
  .item{align-items:flex-start!important}
  .item > .row{width:100%;justify-content:flex-start}
}

@media (max-width:440px){
  .page-auth.page-login{padding:.65rem}
  .page-login .card > header{padding:1rem!important}
  .brand-mark{width:31px;height:31px;flex-basis:31px}
  button{padding:.52rem .72rem!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}