:root{
  --bg:#eef0ec;
  --ink:#1c1b17;
  --muted:#7c7a6d;
  --card:#f9f8f4;
  --card-ink:#1c1b17;
  --card-muted:#78766a;
  --chip:#eeece4;
  --field:#ffffff;
  --nav-bg:#16160f;
  --a:#f0b35d;--a-badge:#dd9a3a;--a-ink:#4a2c00;
  --b:#b7dc9c;--b-badge:#8ec46e;--b-ink:#1f3a12;
  --c:#a7ccef;--c-badge:#7cadea;--c-ink:#0d2c4a;
  --radius:30px;
  --glass-line:rgba(255,255,255,.4);
  --glass-line-soft:rgba(255,255,255,.22);
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}
:root[data-theme=sun]{--a:#ffc266;--a-badge:#eea63c;--a-ink:#402700;--b:#ffdfa0;--b-badge:#f0bd63;--b-ink:#402700;--c:#ffe9a8;--c-badge:#f0cd6a;--c-ink:#402f00}
:root[data-theme=sky]{--a:#8fd0ff;--a-badge:#5cb3f0;--a-ink:#052236;--b:#c2e8ff;--b-badge:#8dcdf5;--b-ink:#052236;--c:#79bdec;--c-badge:#4a9bd6;--c-ink:#052236}
:root[data-theme=berry]{--a:#f0b0d4;--a-badge:#e086b8;--a-ink:#3d0a22;--b:#dab6ec;--b-badge:#c48ade;--b-ink:#2a0a3d;--c:#f0c3ae;--c-badge:#e29c7a;--c-ink:#3d1a0a}
:root[data-theme=mono]{--a:#dcdcd3;--a-badge:#bcbbaf;--a-ink:#16160f;--b:#eeede5;--b-badge:#cfceC4;--b-ink:#16160f;--c:#b9b8ad;--c-badge:#96958a;--c-ink:#16160f}

*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{font-family:"Space Grotesk",sans-serif}

/* soft frosted glow behind everything, tinted by the active theme */
body::before,body::after{content:"";position:fixed;z-index:0;border-radius:50%;filter:blur(60px) saturate(1.6);opacity:.85;pointer-events:none}
body::before{width:60vmax;height:60vmax;top:-24vmax;left:-20vmax;background:color-mix(in srgb,var(--a) 88%,transparent)}
body::after{width:54vmax;height:54vmax;bottom:-22vmax;right:-18vmax;background:color-mix(in srgb,var(--c) 88%,transparent)}
.shell::before{content:"";position:fixed;z-index:0;border-radius:50%;filter:blur(60px) saturate(1.6);opacity:.75;pointer-events:none;
  width:44vmax;height:44vmax;top:30vh;left:50%;transform:translateX(-50%);background:color-mix(in srgb,var(--b) 85%,transparent)}
#app,#toast{position:relative;z-index:1}

.splash{min-height:100vh;display:grid;place-content:center;color:var(--ink)}
.shell{max-width:560px;min-height:100vh;margin:auto;padding:env(safe-area-inset-top) 12px calc(104px + env(safe-area-inset-bottom))}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;padding:20px 5px 18px}
.brand{font:700 19px "Space Grotesk",sans-serif;letter-spacing:-.02em;color:var(--ink)}
.brand span{display:block;color:#5c9f52;font:700 9px "IBM Plex Mono",monospace;letter-spacing:.18em;margin-top:2px}
.avatar{
  border:1px solid var(--glass-line);border-radius:50%;width:42px;height:42px;
  background:rgba(255,255,255,.5);backdrop-filter:blur(12px);
  color:var(--card-ink);font-weight:700;font-size:15px;box-shadow:0 6px 16px -8px rgba(0,0,0,.25)
}

.date{font:700 10px "IBM Plex Mono",monospace;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;padding:0 3px}
.page-title{font:700 32px "Space Grotesk",sans-serif;letter-spacing:-.03em;line-height:1.02;margin:5px 3px 14px;color:var(--ink)}
.title-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 3px}
.title-row .page-title{margin-left:0;margin-right:0}
input[type=month]{border:1px solid var(--glass-line);border-radius:12px;background:rgba(255,255,255,.55);backdrop-filter:blur(10px);color:var(--card-ink);padding:10px 12px;font:600 13px "Space Grotesk",sans-serif}
.round{width:44px;height:44px;border:0;border-radius:14px;background:var(--card-ink);color:var(--card);font-size:22px}

/* hero card — dark glass, glowing, always the biggest element on the screen */
.hero-card{
  position:relative;overflow:hidden;border-radius:36px;padding:22px 20px 24px;margin-bottom:14px;
  background:
    radial-gradient(130% 100% at 10% -8%, rgba(255,140,195,.32), transparent 55%),
    radial-gradient(120% 100% at 105% 4%, rgba(120,170,255,.28), transparent 55%),
    linear-gradient(165deg,#182430 0%,#1c3a45 55%,#241a3a 100%);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:
    0 1px 0 rgba(255,255,255,.26) inset,
    0 0 24px 4px rgba(255,120,190,.5),0 0 60px 14px rgba(140,120,255,.45),0 0 110px 24px rgba(120,170,255,.3),
    0 30px 60px -24px rgba(20,15,35,.55);
  color:#fff;
}
.hero-card .date{padding:0 1px;color:rgba(255,255,255,.62)}
.hero-card .page-title{margin:5px 1px 16px;color:#fff}

/* mini stat row — glass chips inside the hero card */
.micro-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:4px}
.micro-stats span{padding:13px 11px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:18px;backdrop-filter:blur(6px)}
.micro-stats small,.micro-stats b{display:block}
.micro-stats small{font:700 8px "IBM Plex Mono",monospace;letter-spacing:.09em;color:rgba(255,255,255,.6);text-transform:uppercase}
.micro-stats b{font:800 20px "Doto","Space Grotesk",sans-serif;margin-top:5px;color:#fff}

/* bento cards — pill-shaped, saturated glass, glowing */
.bento-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.bento{min-height:150px;border-radius:32px;padding:17px;overflow:hidden;position:relative;border:1px solid rgba(255,255,255,.22)}
.bento-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;position:relative;z-index:1}
.bento>small,.bento-head small{font:700 9px "IBM Plex Mono",monospace;letter-spacing:.1em}
.bento-icon,.bento-count{position:relative;z-index:1;flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font:700 11px "IBM Plex Mono",monospace;backdrop-filter:blur(4px)}
.bento-icon svg{display:block}
.bento>strong{display:block;font:800 30px "Doto","Space Grotesk",sans-serif;letter-spacing:.01em;margin-top:auto;position:relative;z-index:1;text-shadow:0 0 20px rgba(255,255,255,.3)}
.bento>span{font:600 10px "IBM Plex Mono",monospace;position:relative;z-index:1}
.bento-sub{margin:5px 0 0;font:600 9px "IBM Plex Mono",monospace;opacity:.78;position:relative;z-index:1}
.bento-chart{position:absolute;left:0;right:0;bottom:0;width:100%;height:56%;opacity:.28;pointer-events:none}
.bento-line{position:absolute;left:17px;right:17px;bottom:44px;pointer-events:none}
.bento-line .flag{position:absolute;right:-3px;top:-9px}
.bento{display:flex;flex-direction:column}
.earned{
  color:#fff;border-color:rgba(255,255,255,.32);
  background:
    radial-gradient(140% 130% at 30% 10%, rgba(255,255,255,.32), transparent 58%),
    linear-gradient(165deg,#ff7fae 0%,#c2436f 48%,#1c0a12 100%);
  box-shadow:0 0 20px 3px rgba(255,90,150,.55),0 0 54px 10px rgba(255,90,150,.45),0 0 100px 18px rgba(255,90,150,.25);
}
.earned .bento-icon,.earned .bento-count{background:rgba(255,255,255,.24);color:#fff}
.week{
  color:#fff;border-color:rgba(255,255,255,.32);
  background:
    radial-gradient(140% 130% at 30% 10%, rgba(255,255,255,.28), transparent 58%),
    linear-gradient(165deg,#8a7bff 0%,#4c3ba0 48%,#0c0a1c 100%);
  box-shadow:0 0 20px 3px rgba(120,90,255,.55),0 0 54px 10px rgba(120,90,255,.45),0 0 100px 18px rgba(120,90,255,.25);
}
.week .bento-icon,.week .bento-count{background:rgba(255,255,255,.24);color:#fff}
.progress{
  grid-column:1/3;min-height:auto;color:var(--card-ink);
  background:rgba(255,255,255,.5);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 14px 28px -18px rgba(0,0,0,.2);
}
.progress .bento-head small{color:var(--card-muted)}
.progress .bento-icon,.progress .bento-count{background:var(--chip);color:var(--card-ink)}
.progress p{font:700 13px "Space Grotesk",sans-serif;margin:10px 0 0}
.seg{display:flex;background:rgba(0,0,0,.06);border-radius:999px;padding:3px;gap:2px;position:relative;z-index:1}
.seg button{border:0;background:none;color:inherit;padding:6px 12px;border-radius:999px;font:700 10px "Space Grotesk",sans-serif;opacity:.6}
.seg button.active{background:var(--card-ink);color:var(--card);opacity:1}
.day-row{display:flex;gap:5px;margin-top:14px;position:relative;z-index:1}
.day-row i{flex:1;height:22px;border-radius:7px;background:rgba(0,0,0,.08);display:block;font-style:normal}
.day-row i.on{background:var(--card-ink)}
.claim-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1.5px solid rgba(0,0,0,.1);position:relative;z-index:1}
.claim-row:first-of-type{margin-top:14px}
.claim-row .ci{width:32px;height:32px;border-radius:10px;background:rgba(0,0,0,.08);display:grid;place-items:center;font-size:15px;flex:0 0 auto}
.claim-row .ct{flex:1;min-width:0}
.claim-row .ct b{display:block;font:700 12px "Space Grotesk",sans-serif}
.claim-row .ct small{font:600 9px "IBM Plex Mono",monospace;opacity:.7}
.claim-row .cv{font:700 11px "IBM Plex Mono",monospace;white-space:nowrap}

section h2{font:700 18px "Space Grotesk",sans-serif;margin:26px 5px 11px;color:var(--ink)}

/* task / claim cards — light frosted glass rows */
.cards{display:grid;gap:9px}
.task{
  display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;padding:14px;border-radius:26px;
  background:rgba(255,255,255,.5);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.65);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 22px -16px rgba(0,0,0,.18);
}
.task-icon{width:48px;height:48px;border-radius:16px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;font-size:23px}
.task h3{font:700 15px "Space Grotesk",sans-serif;margin:0 0 4px;color:var(--card-ink)}
.task p{font:600 10px "IBM Plex Mono",monospace;color:var(--card-muted);margin:0}
.task.inactive{opacity:.5}
.alarm{display:inline-flex;margin-top:7px;padding:5px 8px;border-radius:8px;background:#fbe6b8;color:#6d4c00;font:700 9px "IBM Plex Mono",monospace}
.task-actions{display:flex;flex-direction:column;gap:6px}
.task-actions button{border:0;background:rgba(0,0,0,.06);color:var(--card-ink);border-radius:9px;padding:7px 10px;font:700 9px "IBM Plex Mono",monospace}
.small-action{border:0;border-radius:13px;background:var(--card-ink);color:var(--card);padding:10px 13px;font:700 10px "Space Grotesk",sans-serif}
.small-action:disabled{opacity:.35}
.empty{padding:30px;border:2px dashed rgba(0,0,0,.14);border-radius:26px;text-align:center;color:var(--muted);font:600 11px "IBM Plex Mono",monospace;background:rgba(255,255,255,.28)}

.create-task{
  width:100%;display:flex;gap:13px;align-items:center;text-align:left;border:1px solid rgba(255,255,255,.3);border-radius:26px;padding:18px;margin-bottom:22px;
  color:#fff;background:linear-gradient(150deg,#ff85b3,#ea3f7d);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 0 16px 2px rgba(234,63,125,.4),0 16px 30px -14px rgba(234,63,125,.5);
}
.create-task>span{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.22);color:#fff;font-size:26px;font-weight:700}
.create-task b,.create-task small{display:block}
.create-task b{font:700 15px "Space Grotesk",sans-serif}
.create-task small{font:600 10px "IBM Plex Mono",monospace;color:rgba(255,255,255,.8);margin-top:4px}

.section-label{display:flex;justify-content:space-between;margin:14px 5px 10px;font:700 10px "IBM Plex Mono",monospace;letter-spacing:.07em;color:var(--muted)}
.section-label span{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:rgba(255,255,255,.5);color:var(--card-ink);backdrop-filter:blur(6px)}

.alert-panel{display:grid;grid-template-columns:46px 1fr;gap:13px;padding:18px;border-radius:24px;background:#f4a698;margin:-2px 0 14px;color:#3d0f04}
.alert-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#16160f;color:white;font-size:22px;font-weight:700}
.alert-panel small{font:700 8px "IBM Plex Mono",monospace;letter-spacing:.1em}
.alert-panel h2{font:700 17px "Space Grotesk",sans-serif;margin:4px 0 8px;color:inherit}
.alert-panel p{font:600 10px "IBM Plex Mono",monospace;margin:4px 0}

/* nav — liquid glass dock, active tab glows */
.nav{
  position:fixed;z-index:5;bottom:16px;left:50%;transform:translateX(-50%);width:min(300px,calc(100% - 40px));
  display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:8px;border-radius:28px;
  background:rgba(20,20,14,.4);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(26px) saturate(1.6);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 0 30px 4px rgba(255,255,255,.1),0 18px 36px -16px rgba(0,0,0,.45);
  color:#a8a79a;
}
.nav button{border:0;background:none;color:inherit;padding:10px;border-radius:19px;display:grid;place-items:center;position:relative}
.nav button svg{display:block;position:relative;z-index:1}
.nav button.active{color:#1c1b17}
.nav button.active::before{
  content:"";position:absolute;inset:3px;border-radius:15px;z-index:0;
  background:#fff;
  box-shadow:0 0 18px 3px rgba(255,255,255,.6),0 6px 14px -6px rgba(0,0,0,.3);
}

/* settlements */
.settlement-card{
  border-radius:28px;padding:20px;margin:10px 0;color:var(--card-ink);
  background:rgba(255,255,255,.55);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.65);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 12px 26px -18px rgba(0,0,0,.16);
}
.settle-head{display:flex;justify-content:space-between;align-items:center}
.settle-head small,.settle-head strong{display:block}
.settle-head small{font:700 8px "IBM Plex Mono",monospace;letter-spacing:.08em;color:var(--card-muted)}
.settle-head strong{font:800 30px "Doto","Space Grotesk",sans-serif;margin-top:5px}
.ledger{margin-top:17px;border-top:1.5px solid rgba(0,0,0,.08)}
.ledger>div{display:flex;justify-content:space-between;padding:10px 0;font:600 10px "IBM Plex Mono",monospace;border-bottom:1px solid rgba(0,0,0,.06)}
.ledger .detail{padding:6px 0 6px 12px;color:var(--card-muted)}
.ledger .paid{color:#2f6b34}
.ledger .ledger-total{font:800 18px "Doto","Space Grotesk",sans-serif;padding-top:15px;border:0}

/* settings */
.settings-card{
  border-radius:26px;padding:17px;color:var(--card-ink);
  background:rgba(255,255,255,.55);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.65);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 12px 26px -18px rgba(0,0,0,.16);
}
.allowance-form{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;align-items:center;padding:11px 0;border-bottom:1.5px solid rgba(0,0,0,.07)}
.allowance-form:last-child{border:0}
.allowance-form label{font-weight:700;font-size:12px}
.allowance-form div{display:flex}
.allowance-form input{min-width:0;width:100%;border:0;background:rgba(0,0,0,.05);border-radius:10px 0 0 10px;padding:10px;font:600 13px "IBM Plex Mono",monospace;color:var(--card-ink)}
.allowance-form button{border:0;background:var(--card-ink);color:var(--card);border-radius:0 10px 10px 0;padding:0 14px;font-weight:700}

.field{display:grid;gap:6px;margin:12px 0}
.field label{font:700 9px "IBM Plex Mono",monospace;letter-spacing:.04em;color:var(--card-muted)}
.field input,.field select{width:100%;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.55);backdrop-filter:blur(8px);border-radius:12px;color:var(--card-ink);padding:12px;font:600 14px "Space Grotesk",sans-serif}
.primary{
  border:1px solid rgba(255,255,255,.3);width:100%;border-radius:18px;padding:15px;
  color:#fff;background:linear-gradient(150deg,#ff85b3,#ea3f7d);
  font:700 14px "Space Grotesk",sans-serif;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 0 16px 2px rgba(234,63,125,.4),0 16px 30px -14px rgba(234,63,125,.5);
}
.intro,.hint{font:500 11px "IBM Plex Mono",monospace;line-height:1.55;color:var(--card-muted)}

.themes{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.theme{
  display:flex;gap:10px;align-items:center;border:1px solid rgba(255,255,255,.6);color:var(--card-ink);border-radius:20px;padding:13px;
  background:rgba(255,255,255,.5);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}
.theme i{width:28px;height:28px;border-radius:9px}
.theme:nth-child(1) i{background:linear-gradient(135deg,#f0b35d,#a7ccef)}
.theme:nth-child(2) i{background:linear-gradient(135deg,#ffc266,#ffe9a8)}
.theme:nth-child(3) i{background:linear-gradient(135deg,#8fd0ff,#79bdec)}
.theme:nth-child(4) i{background:linear-gradient(135deg,#f0b0d4,#dab6ec)}
.theme:nth-child(5) i{background:linear-gradient(135deg,#ddd,#999)}
.theme.selected{box-shadow:0 0 0 2.5px var(--card-ink) inset}
.theme b{font:700 11px "Space Grotesk",sans-serif}

.switch-row{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:13px 0;border-top:1.5px solid rgba(0,0,0,.07);border-bottom:1.5px solid rgba(0,0,0,.07)}
.switch-row b,.switch-row small{display:block}
.switch-row b{font:700 13px "Space Grotesk",sans-serif}
.switch-row small{font:500 9px "IBM Plex Mono",monospace;color:var(--card-muted);margin-top:3px}
.switch-row input{width:22px;height:22px;accent-color:var(--card-ink)}

fieldset{border:0;padding:0;margin:13px 0}
legend{font:700 10px "IBM Plex Mono",monospace;margin-bottom:8px;color:var(--card-muted)}
.day-picks{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.day-picks label input{position:absolute;opacity:0}
.day-picks span{display:grid;place-items:center;height:33px;border-radius:9px;background:rgba(0,0,0,.05);font:700 9px "IBM Plex Mono",monospace}
.day-picks input:checked+span{background:var(--card-ink);color:var(--card)}
.member-picks{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.member-picks label input{position:absolute;opacity:0}
.member-picks span{display:flex;align-items:center;justify-content:center;height:38px;border-radius:12px;background:rgba(0,0,0,.05);font:700 11px "Space Grotesk",sans-serif}
.member-picks input:checked+span{background:var(--card-ink);color:var(--card)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.dialog-head{display:flex;justify-content:space-between;align-items:start}
.dialog-head small{font:700 8px "IBM Plex Mono",monospace;letter-spacing:.1em;color:var(--card-muted)}
.dialog-head h2{font:700 26px "Space Grotesk",sans-serif;margin:5px 0 12px}
.dialog-head button{border:0;background:rgba(0,0,0,.06);width:35px;height:35px;border-radius:50%;font-size:20px;color:var(--card-ink)}

/* login / setup */
.login{max-width:430px;min-height:100vh;margin:auto;padding:50px 22px;display:flex;flex-direction:column;justify-content:center;color:var(--ink)}
.login-mark{font:700 44px "Space Grotesk",sans-serif}
.login h1{font:700 40px "Space Grotesk",sans-serif;letter-spacing:-.03em;margin:20px 0 8px}
.login>p{font:500 12px "IBM Plex Mono",monospace;color:var(--muted)}
.people{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:20px 0}
.person{
  border:1px solid rgba(255,255,255,.6);color:var(--card-ink);border-radius:22px;padding:16px;text-align:left;
  background:rgba(255,255,255,.5);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}
.person.selected{
  background:linear-gradient(150deg, color-mix(in srgb,var(--b) 85%,white 15%), color-mix(in srgb,var(--b) 55%,#04210a 45%));
  color:#fff;border-color:transparent;
  box-shadow:0 0 20px 2px color-mix(in srgb,var(--b) 55%,transparent),0 12px 26px -16px rgba(0,0,0,.3);
}
.person b,.person small{display:block}
.person b{margin-top:7px;font:700 15px "Space Grotesk",sans-serif}
.person small{font:600 9px "IBM Plex Mono",monospace;opacity:.65}
.setup-grid{display:grid;gap:8px;margin:18px 0}
.setup-row{display:grid;grid-template-columns:1fr 100px;gap:7px}
.setup-row input{border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.6);backdrop-filter:blur(8px);color:var(--card-ink);border-radius:12px;padding:12px;font:600 13px "Space Grotesk",sans-serif}
.error{color:#c23b2a;font:600 10px "IBM Plex Mono",monospace}

dialog{
  border:1px solid rgba(255,255,255,.5);border-radius:30px;padding:22px;width:min(420px,calc(100% - 28px));
  background:rgba(249,248,244,.86);backdrop-filter:blur(20px);color:var(--card-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 25px 70px rgba(0,0,0,.35);
}
dialog::backdrop{background:rgba(10,10,8,.55)}
.dialog-actions{display:flex;gap:8px;margin-top:17px}
.dialog-actions button{flex:1;border:0;background:rgba(0,0,0,.06);color:var(--card-ink);border-radius:16px;padding:12px;font:700 12px "Space Grotesk",sans-serif}
.dialog-actions button.primary{background:linear-gradient(150deg,#ff85b3,#ea3f7d);color:#fff}

.toast{
  position:fixed;z-index:20;left:50%;bottom:112px;transform:translate(-50%,20px);
  background:rgba(22,22,15,.82);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);
  color:#fff;padding:12px 18px;border-radius:16px;font:600 12px "Space Grotesk",sans-serif;opacity:0;transition:.2s
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.hidden{display:none!important}
:focus-visible{outline:3px solid #4a9bd6;outline-offset:3px}

@media(min-width:700px){.shell{padding-left:24px;padding-right:24px}.cards{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}