/* Petiction account website (resources/views/account/*). Lives in public/site, not public/account, so the folder never shadows the /account pages. Shares the landing page's palette and type. */
:root{
  --bg:#FFF8F0;--surface:#FFFFFF;--surface-2:#FBF6FF;
  --ink:#2B2340;--muted:#6A6386;--line:#EFE3D6;
  --pink:#FF6F9F;--pink-ink:#FFFFFF;--purple:#7C6CF2;--yellow:#FFC93C;--mint:#53C98C;
  --lilac:#ECE8FF;--butter:#FFF0C2;--mint-soft:#DDF5E5;--danger:#D9365E;
  --shadow:0 1px 2px rgba(43,35,64,.06),0 12px 32px -14px rgba(43,35,64,.2);
  --r:20px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#16132A;--surface:#221E3B;--surface-2:#2A2548;
  --ink:#F4F1FF;--muted:#B1ABD0;--line:#38325A;
  --pink:#FF7EA9;--pink-ink:#1B1530;--purple:#9C90FF;
  --lilac:#2D2852;--butter:#3A3424;--mint-soft:#1F3A30;--danger:#FF7A95;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -14px rgba(0,0,0,.6);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#16132A;--surface:#221E3B;--surface-2:#2A2548;
  --ink:#F4F1FF;--muted:#B1ABD0;--line:#38325A;
  --pink:#FF7EA9;--pink-ink:#1B1530;--purple:#9C90FF;
  --lilac:#2D2852;--butter:#3A3424;--mint-soft:#1F3A30;--danger:#FF7A95;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px -14px rgba(0,0,0,.6);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 "Nunito",ui-rounded,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Fredoka","Nunito",ui-rounded,sans-serif;font-weight:600;letter-spacing:-.01em;line-height:1.15;margin:0}
h1{font-size:clamp(26px,3.4vw,34px)}
h2{font-size:20px}
p{margin:0}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* top bar */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;padding:12px clamp(16px,4vw,40px);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font:600 20px/1 "Fredoka",sans-serif;text-decoration:none;margin-right:auto}
.logo img{width:32px;height:32px}
.who{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
.who img,.avatar-fallback{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--lilac);display:grid;place-items:center;font-weight:800}
.who .name{max-width:20ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* shell */
.shell{max-width:1080px;margin:0 auto;padding:28px clamp(16px,4vw,40px) 80px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;align-items:start}
.side{position:sticky;top:84px;display:flex;flex-direction:column;gap:4px}
.side a,.side button{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;text-decoration:none;font-weight:700;color:var(--muted);border:0;background:none;cursor:pointer;text-align:left;width:100%}
.side a:hover,.side button:hover{background:var(--surface);color:var(--ink)}
.side a[aria-current=page]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.side svg{width:20px;height:20px;flex:none;fill:currentColor}
.side a[aria-current=page] svg{fill:var(--pink)}
.side hr{border:0;border-top:1px solid var(--line);margin:10px 4px}
.main{display:flex;flex-direction:column;gap:22px;min-width:0}
.page-head{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.page-head p{color:var(--muted)}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(18px,3vw,26px)}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.card-head p{color:var(--muted);font-size:14px}

.hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:linear-gradient(135deg,var(--lilac),var(--surface) 70%)}
.hero .avatar{width:76px;height:76px;border-radius:50%;object-fit:cover;border:4px solid var(--surface);box-shadow:var(--shadow);background:var(--lilac);display:grid;place-items:center;font:700 30px "Fredoka"}
.hero .id{flex:1;min-width:200px;display:flex;flex-direction:column;gap:4px}
.hero .handle{color:var(--muted);font-weight:700}
.badge{display:inline-flex;align-items:center;gap:6px;font:800 12px/1 "Nunito";text-transform:uppercase;letter-spacing:.06em;padding:7px 11px;border-radius:999px;background:var(--butter);color:var(--ink);width:max-content}
.badge.pro{background:var(--pink);color:var(--pink-ink)}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stat{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.stat b{display:block;font:600 26px/1.1 "Fredoka",sans-serif}
.stat span{color:var(--muted);font-size:13px;font-weight:700}

.pets{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.pet{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px 12px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);text-align:center}
.pet .pp-sprite{width:78px;height:78px}
.pet b{font-size:15px}
.pet small{color:var(--muted);font-weight:700;font-size:12px}
.pet.asleep{opacity:.55}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label,.label{font-weight:800;font-size:14px}
.field .hint{color:var(--muted);font-size:13px}
.input{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);transition:border-color .15s,box-shadow .15s}
.input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px color-mix(in srgb,var(--purple) 20%,transparent)}
.input[readonly]{background:var(--surface-2);color:var(--muted)}
.prefix{position:relative}
.prefix .input{padding-left:32px}
.prefix::before{content:"@";position:absolute;left:14px;top:50%;translate:0 -50%;color:var(--muted);font-weight:800}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.error{color:var(--danger);font-size:13px;font-weight:700}
.actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:800 15px/1 "Nunito",sans-serif;border-radius:999px;padding:12px 20px;border:2px solid transparent;text-decoration:none;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.6,.5,1),background .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--pink);color:var(--pink-ink);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.btn-ghost{background:var(--surface);border-color:var(--line)}
.btn-sm{font-size:13px;padding:8px 14px}
.btn-google{background:#fff;color:#2B2340;border-color:#E3DFEF;width:100%;padding:15px 20px;font-size:16px}
.btn-google svg{width:20px;height:20px}
.btn:focus-visible,.input:focus-visible,.side a:focus-visible,.switch input:focus-visible+.track,.choice input:focus-visible+span{outline:3px solid var(--purple);outline-offset:2px}

/* toggles */
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0;padding-top:0}
.row .txt{display:flex;flex-direction:column;gap:2px}
fieldset.row{border:0;border-top:1px solid var(--line);margin:0;padding-inline:0;min-width:0}
.row.stack{flex-direction:column;align-items:stretch}
.error.spaced{margin-top:8px}
.row .txt small{color:var(--muted);font-size:13px}
.switch{position:relative;flex:none}
.switch input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.switch .track{display:block;width:50px;height:30px;border-radius:999px;background:var(--line);transition:background .2s;position:relative}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.switch input:checked+.track{background:var(--mint)}
.switch input:checked+.track::after{transform:translateX(20px)}
.range{display:flex;align-items:center;gap:14px;min-width:min(260px,100%)}
.range input{flex:1;accent-color:var(--pink)}
.range output{font-weight:800;min-width:46px;text-align:right}

.choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:4px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choice span{display:flex;flex-direction:column;gap:4px;height:100%;padding:14px;border-radius:16px;border:2px solid var(--line);background:var(--surface-2);transition:border-color .15s,background .15s}
.choice b{font-size:15px}
.choice small{color:var(--muted);font-size:12.5px;line-height:1.4}
.choice input:checked+span{border-color:var(--pink);background:color-mix(in srgb,var(--pink) 10%,var(--surface))}

.sites{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.sites li{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.sites .host{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sites form{margin:0}
.empty{color:var(--muted);padding:18px;border:2px dashed var(--line);border-radius:16px;text-align:center;margin-bottom:16px}
.add-site{display:flex;gap:10px}
.add-site .input{flex:1}

.flash{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:var(--mint-soft);font-weight:700;transition:opacity .4s,transform .4s}
.flash.gone{opacity:0;transform:translateY(-6px);pointer-events:none}
.flash.bad{background:color-mix(in srgb,var(--danger) 15%,var(--surface))}
.note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:var(--lilac);color:var(--ink);font-size:14px}

/* login */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.auth-card{width:min(420px,100%);text-align:center;display:flex;flex-direction:column;gap:18px;align-items:center}
.auth-card .castle{width:110px;height:110px}
.auth-card .castle svg{width:100%;height:100%;overflow:visible}
.auth-card p{color:var(--muted)}
.auth-card .fine{font-size:13px}

@media (max-width:820px){
  .shell{grid-template-columns:1fr;gap:18px;padding-top:16px}
  .side{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:none}
  .side a,.side button{width:auto;white-space:nowrap;padding:9px 14px}
  .side hr,.side .signout{display:none}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .choices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2{grid-template-columns:1fr}
  .who .name{display:none}
}
@media (max-width:420px){.add-site{flex-direction:column}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* calendar */
.lede{color:var(--muted);margin-bottom:18px}
.cal-account{border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:14px;background:var(--surface-2)}
.cal-account.warn{border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.cal-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cal-logo{width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;flex:none}
.cal-logo svg{width:22px;height:22px}
.cal-id{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px}
.cal-id b{overflow-wrap:anywhere}
.cal-id small{color:var(--muted);font-size:13px;font-weight:700}
.bad-text{color:var(--danger)}
.cal-actions{display:flex;gap:8px;flex-wrap:wrap}
.cal-actions form{margin:0}
.btn.danger{color:var(--danger)}
.cal-list{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.cal-list fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.cal-list legend{font-weight:800;font-size:14px;margin-bottom:6px;padding:0}
.check{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;cursor:pointer}
.check:hover{background:var(--surface)}
.check input{width:18px;height:18px;accent-color:var(--pink);margin:0;flex:none}
.check-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.dot{width:10px;height:10px;border-radius:50%;background:var(--c,var(--purple));flex:none}
.tag{font:800 11px/1 "Nunito";text-transform:uppercase;letter-spacing:.05em;padding:5px 8px;border-radius:999px;background:var(--lilac)}
.connect{display:flex;gap:10px;flex-wrap:wrap}
.btn-provider{background:var(--surface);border-color:var(--line);color:var(--ink);padding:13px 18px}
.btn-provider svg{width:20px;height:20px}
.btn-provider.is-off{opacity:.55;cursor:not-allowed}
.btn-provider.is-off:hover{transform:none}
.segmented{display:flex;flex-wrap:wrap;gap:8px}
.segmented label{position:relative}
.segmented input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.segmented span{display:block;padding:9px 16px;border-radius:999px;border:2px solid var(--line);background:var(--surface-2);font-weight:800;font-size:14px}
.segmented input:checked+span{border-color:var(--pink);background:color-mix(in srgb,var(--pink) 12%,var(--surface))}
.segmented input:focus-visible+span{outline:3px solid var(--purple);outline-offset:2px}
.quiet{display:flex;gap:12px;flex-wrap:wrap}
.quiet label{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--muted)}
.quiet .input{width:auto}
.agenda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.agenda li{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.agenda time{display:flex;flex-direction:column;min-width:78px}
.agenda time small,.agenda-title small{color:var(--muted);font-size:12.5px;font-weight:700}
.agenda-title{flex:1;min-width:0;display:flex;flex-direction:column;font-weight:700;overflow-wrap:anywhere}
.note p{margin:0}
.limit-note{margin-bottom:4px}
.connect[hidden]{display:none}