*{box-sizing:border-box}

:root{
  --accent:#2f8f57;
  --accent-strong:#267847;
  --accent-soft:#e4f4e9;
  --accent-soft-2:#d6ecdd;
  --accent-shadow:rgba(47,143,87,.22);
  --bg:#e9efeb;
  --app-bg:#fafcfb;
  --surface:#fff;
  --surface-2:#f2f6f3;
  --surface-3:#e9f0eb;
  --text:#162019;
  --muted:#748078;
  --muted-2:#89938c;
  --border:#dfe7e1;
  --border-soft:#e9eeea;
  --danger:#b44949;
  --danger-soft:#fdeaea;
  --warning:#a86308;
  --warning-soft:#fff2d9;
  --shadow:0 7px 24px rgba(32,64,41,.065);
  --app-shadow:0 0 70px rgba(20,45,28,.10);
  --control-h:54px;
  --tap:44px;
  --card-pad:16px;
  --radius:18px;
  --radius-lg:21px;
  --content-gap:16px;
  --nav-h:78px;
  --top-pad:18px;
}

html[data-accent="blue"]{--accent:#3478f6;--accent-strong:#2264cf;--accent-soft:#e6efff;--accent-soft-2:#d5e4ff;--accent-shadow:rgba(52,120,246,.22)}
html[data-accent="violet"]{--accent:#7756d8;--accent-strong:#6242bd;--accent-soft:#eee9ff;--accent-soft-2:#dfd5ff;--accent-shadow:rgba(119,86,216,.22)}
html[data-accent="orange"]{--accent:#d97706;--accent-strong:#b85f00;--accent-soft:#fff0dd;--accent-soft-2:#ffe2bd;--accent-shadow:rgba(217,119,6,.22)}

html[data-ui-scale="large"]{--control-h:60px;--tap:48px;--card-pad:18px;--radius:20px;--radius-lg:23px;--content-gap:18px;--nav-h:84px;--top-pad:20px}
html[data-ui-scale="xlarge"]{--control-h:66px;--tap:52px;--card-pad:20px;--radius:22px;--radius-lg:25px;--content-gap:20px;--nav-h:92px;--top-pad:22px}

html{font-size:16px;background:var(--bg);color-scheme:light}
html[data-font-scale="large"]{font-size:18px}
html[data-font-scale="xlarge"]{font-size:20px}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0e1310;
  --app-bg:#111713;
  --surface:#18201b;
  --surface-2:#1d2721;
  --surface-3:#263229;
  --text:#f1f6f2;
  --muted:#a7b2aa;
  --muted-2:#8e9a91;
  --border:#2b3830;
  --border-soft:#222d26;
  --danger:#ff8585;
  --danger-soft:#3a2020;
  --warning:#ffbe62;
  --warning-soft:#352a17;
  --shadow:0 8px 26px rgba(0,0,0,.22);
  --app-shadow:0 0 70px rgba(0,0,0,.28);
}

@media(prefers-color-scheme:dark){
  html[data-theme="system"]{
    color-scheme:dark;
    --bg:#0e1310;
    --app-bg:#111713;
    --surface:#18201b;
    --surface-2:#1d2721;
    --surface-3:#263229;
    --text:#f1f6f2;
    --muted:#a7b2aa;
    --muted-2:#8e9a91;
    --border:#2b3830;
    --border-soft:#222d26;
    --danger:#ff8585;
    --danger-soft:#3a2020;
    --warning:#ffbe62;
    --warning-soft:#352a17;
    --shadow:0 8px 26px rgba(0,0,0,.22);
    --app-shadow:0 0 70px rgba(0,0,0,.28);
  }
}

body{
  margin:0;
  min-width:320px;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:1rem;
  color:var(--text);
  background:radial-gradient(circle at 50% -10%,var(--app-bg),var(--bg) 56%);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
a{color:var(--accent);text-decoration:none}
h1{font-size:1.82rem;line-height:1.08;margin:.12rem 0;letter-spacing:-.035em}
h2{font-size:1.12rem;line-height:1.25;margin:1.48rem 0 .72rem;letter-spacing:-.015em}

.app{
  max-width:590px;
  min-height:100dvh;
  margin:0 auto;
  background:var(--app-bg);
  position:relative;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 18px);
  box-shadow:var(--app-shadow);
  overflow-x:hidden;
}
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:calc(var(--top-pad) + env(safe-area-inset-top)) 18px 10px;
  position:sticky;top:0;background:color-mix(in srgb,var(--app-bg) 91%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:5;
}
.eyebrow{font-size:.75rem;color:var(--muted);font-weight:750}
.avatar{width:var(--tap);height:var(--tap);min-width:var(--tap);border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-strong);font-weight:900}
.content{padding:12px var(--content-gap) 32px}.narrow{padding-top:18px}

.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:var(--card-pad);box-shadow:var(--shadow)}
.muted{color:var(--muted)}.hint{font-size:.69rem;color:var(--muted-2);font-weight:450}.center{text-align:center}.tiny{font-size:.75rem;color:var(--muted-2)}

.primary,.ghost,.icon-btn{border:0;cursor:pointer}
.primary{min-height:var(--control-h);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 92%,white),var(--accent-strong));color:#fff;border-radius:calc(var(--radius) - 2px);font-weight:850;padding:12px 18px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 7px 18px var(--accent-shadow)}
.primary.small{min-height:44px;padding:9px 14px;border-radius:13px;font-size:.82rem}.primary.wide,.ghost.wide{width:100%}
.ghost{min-height:44px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:13px;padding:9px 13px;font-weight:750;display:inline-flex;align-items:center;justify-content:center}.ghost.compact{min-height:38px;font-size:.75rem;padding:7px 10px}
.icon-btn{width:var(--tap);height:var(--tap);border-radius:12px;background:transparent;color:var(--muted);font-weight:850;font-size:1.06rem;display:grid;place-items:center}.icon-btn:hover{background:var(--surface-2)}
.danger-text{color:var(--danger)!important}

.bottom-nav{
  position:fixed;z-index:10;bottom:0;left:50%;transform:translateX(-50%);
  width:min(590px,100%);height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding:7px 8px env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface) 93%,transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)
}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);border-radius:14px;min-width:0;font-weight:750}
.bottom-nav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.bottom-nav small{font-size:.64rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.bottom-nav a.active{color:var(--accent)}
.bottom-nav .nav-add svg{width:28px;height:28px}.bottom-nav .nav-add{color:#fff;background:var(--accent);margin:4px 8px 5px;border-radius:18px;box-shadow:0 7px 16px var(--accent-shadow)}.bottom-nav .nav-add small{color:#fff}

.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:12px}
.summary-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:16px;padding:13px 11px;box-shadow:var(--shadow);min-width:0}.summary-card span{font-size:.69rem;color:var(--muted);font-weight:700;display:block;line-height:1.15}.summary-card b{display:block;margin-top:7px;font-size:1.55rem;line-height:1;letter-spacing:-.04em}.summary-card.danger{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 20%,var(--border))}.summary-card.danger b{color:var(--danger)}.summary-card-link{display:block;color:var(--text);cursor:pointer;outline:none}.summary-card-link:hover{border-color:color-mix(in srgb,var(--accent) 36%,var(--border))}.summary-card-link:focus-visible{box-shadow:0 0 0 3px var(--accent-soft),var(--shadow)}.summary-card-link.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft),var(--shadow)}.summary-card-link.danger.active{border-color:var(--danger);box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 15%,transparent),var(--shadow)}
.add-hero{margin-bottom:13px}

.search-panel{display:grid;grid-template-columns:minmax(0,1fr) 145px;gap:8px;margin:0 0 11px}.search-box{position:relative}.search-box>span{position:absolute;left:13px;top:50%;transform:translateY(-52%);font-size:1.4rem;color:var(--muted)}
.search-panel input,.search-panel select{width:100%;min-width:0;min-height:46px;border:1px solid var(--border);border-radius:13px;background:var(--surface);color:var(--text);outline:none;padding:10px 12px;font-size:max(16px,.92rem)}.search-panel input{padding-left:38px}.search-panel input:focus,.search-panel select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.filter-chips{display:flex;gap:7px;overflow-x:auto;padding:1px 0 3px;scrollbar-width:none}.filter-chips::-webkit-scrollbar{display:none}.chip{flex:0 0 auto;border:1px solid var(--border);border-radius:999px;background:var(--surface);padding:9px 13px;color:var(--muted);font-weight:800;font-size:.78rem}.chip.active{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 32%,var(--border));color:var(--accent-strong)}
.count-badge{display:inline-flex;min-width:22px;height:22px;align-items:center;justify-content:center;border-radius:999px;background:var(--surface-3);color:var(--muted);font-size:.68rem;margin-left:4px;vertical-align:2px}.danger-heading{color:var(--danger)}.active-status-filter{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:9px 0 3px;padding:9px 12px;border-radius:13px;background:var(--accent-soft);color:var(--accent-strong);font-size:.76rem;font-weight:800}.active-status-filter a{color:inherit;white-space:nowrap}

.task-list{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}.task-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;min-height:82px;padding:10px 10px 10px 13px;border-bottom:1px solid var(--border-soft)}.task-row:last-child{border-bottom:0}.task-row.overdue{background:linear-gradient(90deg,var(--danger-soft),transparent 42%)}
.task-check-form{margin:0}.task-check{width:29px;height:29px;border-radius:50%;border:2px solid var(--border);background:var(--surface);color:#fff;font-size:.92rem;font-weight:900;display:grid;place-items:center;cursor:pointer}.task-check.checked{background:var(--accent);border-color:var(--accent)}.task-main{min-width:0;color:var(--text)}.task-title-line{display:flex;align-items:flex-start;gap:7px}.task-title{display:block;min-width:0;overflow-wrap:anywhere;font-size:.98rem;line-height:1.25}.task-title.done{text-decoration:line-through;color:var(--muted)}
.task-meta{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:.70rem;margin-top:5px;white-space:nowrap;overflow:hidden}.task-meta span{overflow:hidden;text-overflow:ellipsis}.task-due{font-size:.72rem;color:var(--muted-2);margin-top:4px;font-weight:650}.task-chevron{font-size:1.55rem;color:var(--muted-2);padding-right:2px}
.priority-dot{width:19px;height:19px;flex:0 0 19px;border-radius:7px;display:grid;place-items:center;font-size:.70rem;font-weight:950;margin-top:-1px}.priority-high{background:var(--danger-soft);color:var(--danger)}.priority-normal{background:var(--surface-3);color:var(--muted)}.priority-low{background:var(--accent-soft);color:var(--accent-strong)}

.form-stack{display:flex;flex-direction:column;gap:18px}.form-stack label{font-weight:780;font-size:.92rem;min-width:0}.form-stack input,.form-stack select,.form-stack textarea,.member-row input,.dialog-form input{width:100%;min-width:0;min-height:var(--control-h);margin-top:7px;border:1px solid var(--border);border-radius:calc(var(--radius) - 3px);background:var(--surface);padding:12px 14px;font-size:max(16px,1rem);color:var(--text);outline:none}.form-stack textarea{resize:vertical;min-height:112px;line-height:1.45}.date-time-grid>label{min-width:0;overflow:hidden}.date-time-grid input[type="date"],.date-time-grid input[type="time"]{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}.form-stack input:focus,.form-stack select:focus,.form-stack textarea:focus,.member-row input:focus,.dialog-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.form-stack input::placeholder,.form-stack textarea::placeholder{color:var(--muted-2)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}.pref-group{border:0;padding:0;margin:0;min-width:0}.pref-group legend{font-size:.9rem;font-weight:800;margin-bottom:9px}.segmented{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.segmented label{min-width:0}.segmented input{display:none}.segmented span{min-height:48px;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--surface-2);border:1px solid transparent;border-radius:13px;padding:9px;font-size:.77rem;font-weight:760}.segmented input:checked+span{background:var(--accent);color:#fff;box-shadow:0 5px 15px var(--accent-shadow)}
.task-form{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:var(--card-pad);box-shadow:var(--shadow)}
.task-status{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.task-status>div span,.task-status>div strong{display:block}.task-status>div strong{margin-top:4px}.completion-note,.task-audit{font-size:.75rem;line-height:1.45;padding:0 5px}.delete-form{margin-top:14px}

.auth-wrap{padding:calc(58px + env(safe-area-inset-top)) 22px 24px;max-width:430px;margin:auto}.auth-wrap h1{text-align:center}.brand-mark{width:72px;height:72px;border-radius:22px;margin:0 auto 12px;display:grid;place-items:center;font-size:3rem;font-weight:950;background:var(--accent);color:#fff;box-shadow:0 12px 28px var(--accent-shadow)}.auth-wrap>.muted{text-align:center;margin-bottom:24px}.flash{padding:12px 14px;border-radius:13px;margin:0 0 14px;background:var(--accent-soft);color:var(--accent-strong);font-weight:650}.flash.error{background:var(--danger-soft);color:var(--danger)}
.empty-state{text-align:center;padding:30px 20px;margin-top:16px}.empty-state h2{margin:8px 0}.empty-state p{margin:0 auto 18px;max-width:370px;line-height:1.5}.empty-icon{font-size:2.6rem;margin-bottom:4px}.empty{text-align:center;color:var(--muted)}

.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}.list-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;padding:11px 12px}.list-main{display:flex;align-items:center;gap:11px;min-width:0}.list-main>div{min-width:0}.list-main strong,.list-main small{display:block}.list-main strong{overflow:hidden;text-overflow:ellipsis}.list-main small{font-size:.68rem;color:var(--muted);margin-top:4px}.list-icon{width:42px;height:42px;border-radius:13px;background:var(--accent-soft);display:grid;place-items:center;font-size:1.25rem;flex:0 0 auto}.row-actions{display:flex;align-items:center;gap:1px;flex:0 0 auto}.row-actions form{margin:0}

dialog{border:0;border-radius:20px;padding:0;background:var(--surface);color:var(--text);box-shadow:0 20px 70px rgba(0,0,0,.30);width:min(420px,calc(100% - 30px))}dialog::backdrop{background:rgba(0,0,0,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.dialog-form{padding:20px;display:flex;flex-direction:column;gap:14px}.dialog-form label{font-weight:780}.dialog-form h2{margin:0 0 4px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px}

.overview-summary{margin-top:2px}.bars-card{padding-top:12px;padding-bottom:12px}.bar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 10px;padding:9px 0}.bar-row+.bar-row{border-top:1px solid var(--border-soft)}.bar-row span{overflow:hidden;text-overflow:ellipsis}.bar-row b{font-size:.85rem}.bar{grid-column:1/-1;height:7px;border-radius:99px;background:var(--surface-3);overflow:hidden}.bar i{display:block;height:100%;background:var(--accent);border-radius:inherit}

.settings-card{margin-bottom:14px}.settings-card h2{margin-top:0}.member-row{display:grid;grid-template-columns:1.15fr 1fr auto;align-items:end;gap:10px;padding:12px 0;border-top:1px solid var(--border-soft)}.member-meta strong,.member-meta small{display:block}.member-meta strong{font-size:.82rem;word-break:break-all}.member-meta small{font-size:.7rem;color:var(--muted-2);margin-top:4px}.member-row input{margin:0;padding:10px 11px}.invite-code{font-size:1.86rem;font-weight:900;letter-spacing:.25em;padding:12px 0;color:var(--accent)}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.choice{min-width:0}.choice input,.accent-choice input{position:absolute;opacity:0;pointer-events:none}.choice span{min-height:48px;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2);color:var(--text);font-weight:750;font-size:.78rem}.choice input:checked+span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 15%,transparent)}.accent-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.accent-choice{display:flex;min-width:0;min-height:72px;flex-direction:column;gap:7px;align-items:center;justify-content:center;padding:8px 5px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);cursor:pointer}.accent-choice b{font-size:.69rem;overflow:hidden;text-overflow:ellipsis;max-width:100%}.accent-choice:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.accent-swatch{width:30px;height:30px;border-radius:50%;display:block;border:3px solid color-mix(in srgb,#fff 75%,transparent);box-shadow:0 0 0 1px rgba(0,0,0,.12)}.accent-green{background:#2f8f57}.accent-blue{background:#3478f6}.accent-violet{background:#7756d8}.accent-orange{background:#d97706}.appearance-preview{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-radius:14px;background:var(--surface-2);border:1px dashed var(--border)}.appearance-preview>span{font-weight:750;color:var(--muted)}

.sync-toast{position:fixed;z-index:20;left:50%;top:calc(env(safe-area-inset-top) + 12px);transform:translateX(-50%);border:1px solid color-mix(in srgb,var(--accent) 32%,var(--border));background:var(--surface);color:var(--accent-strong);box-shadow:0 9px 30px rgba(0,0,0,.16);padding:10px 14px;border-radius:999px;font-weight:800;font-size:.76rem;cursor:pointer}.sync-toast[hidden]{display:none}

@media(max-width:520px){
  .search-panel{grid-template-columns:1fr}.search-panel select{min-height:44px}
  .form-grid{grid-template-columns:1fr}.date-time-grid{grid-template-columns:minmax(0,1fr)}
  .member-row{grid-template-columns:1fr auto}.member-meta{grid-column:1/-1}.member-row input{grid-column:1}.member-row button{grid-column:2}
  .row-actions .icon-btn{width:39px;height:39px}.list-row{align-items:flex-start}.list-main{padding-top:1px}
}
@media(max-width:420px){
  .summary-card{padding:11px 9px}.summary-card span{font-size:.62rem}.summary-card b{font-size:1.35rem}
  .task-row{grid-template-columns:auto minmax(0,1fr) auto;gap:9px;padding-left:11px}.task-meta{font-size:.65rem}.task-chevron{display:none}
  .choice-grid{grid-template-columns:1fr}.accent-grid{grid-template-columns:repeat(2,1fr)}
  .toolbar{align-items:stretch}.toolbar .primary,.toolbar .ghost{flex:1;text-align:center}
  .list-row{display:grid;grid-template-columns:1fr}.row-actions{justify-content:flex-end;border-top:1px solid var(--border-soft);padding-top:6px}
}
@media(max-width:360px){.bottom-nav small{font-size:.58rem}.bottom-nav .nav-add{margin-left:4px;margin-right:4px}.summary-grid{gap:6px}}
@media(min-width:700px){body{padding:24px 0}.app{min-height:calc(100dvh - 48px);border-radius:28px;overflow:hidden}.bottom-nav{bottom:24px;border-radius:0 0 28px 28px}}
@media(prefers-reduced-motion:no-preference){.primary,.ghost,.card,.bottom-nav a,.choice span,.accent-choice,.task-check,.chip,.summary-card-link{transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s ease}.primary:active,.ghost:active,.bottom-nav a:active,.task-check:active{transform:scale(.985)}}