/* app.css — sdílený styl aplikace.
   Zdroj vzhledu: návrhy z Claude Design (Pozvánka A + Admin přehled).
   Generováno skriptem z HTML návrhů — barvy/typografii neměnit. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap');
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:'Figtree',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;}

/* ===== Veřejná stránka (mobile) ===== */
:root{
  --bg:#fff5ea; --surface:#ffffff; --text:#2c2017; --muted:#9a8472; --line:#f0e2d2;
  --accent:#e0592a; --accent-ink:#fff;
  --can:#5a9d54; --maybe:#e6a02e; --cant:#d65440;
  --radius:16px; --radius-sm:13px;
  --font-head:'Bricolage Grotesque','Figtree',system-ui,sans-serif;
  --font-body:'Figtree',system-ui,-apple-system,sans-serif;
}
12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap');



body.public{ background:#f3e6d6; color:var(--text); font-size:16px; line-height:1.5; }
.page{
  max-width:480px; margin:0 auto; min-height:100vh;
  background:var(--bg); position:relative;
  box-shadow:0 0 60px -20px rgba(120,70,30,.25);
}
form{margin:0;}
h1,h2{font-family:var(--font-head); letter-spacing:-.02em; margin:0;}

/* ---------- header ---------- */
.hd{padding:24px 20px 20px; background:linear-gradient(170deg,#ffe9d2,#fff5ea 80%);}
.kick{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--accent);}
.hd h1{margin:10px 0 8px; font-weight:800; font-size:28px; line-height:1.1;}
.place{display:flex; align-items:center; gap:7px; font-size:14.5px; color:var(--muted); font-weight:500;}

/* ---------- sections ---------- */
section{padding:18px 20px 6px;}
section > h2{font-weight:800; font-size:19px; margin-bottom:13px; display:flex; align-items:center; gap:9px;}
section > h2 .n{font-size:13px; font-weight:700; color:var(--muted); font-family:var(--font-body);}

/* ---------- invite text (more/less, pure CSS) ---------- */
.invite-wrap{background:var(--surface); border:1.5px solid #f3e7d8; border-radius:var(--radius); padding:17px;}
.more-toggle{position:absolute; opacity:0; pointer-events:none;}
.invite{white-space:pre-line; line-height:1.55; font-size:15px; margin:0; transition:none;}
.invite-wrap:not(:has(.more-toggle:checked)) .invite{
  max-height:8.1em; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);
  mask-image:linear-gradient(180deg,#000 62%,transparent);
}
.morebtn{display:inline-flex; align-items:center; gap:5px; margin-top:9px; cursor:pointer;
  font-weight:700; font-size:14px; color:var(--accent); user-select:none;}
.morebtn::after{content:'…více ⌄';}
.invite-wrap:has(.more-toggle:checked) .morebtn::after{content:'…méně ⌃';}

/* ---------- date cards ---------- */
.dates{display:flex; flex-direction:column; gap:12px;}
.datecard{background:var(--surface); border:2px solid var(--line); border-radius:var(--radius); padding:14px;}
.datecard:not(:has(input:checked)){border-style:dashed;}
.datecard:has(.opt--can input:checked){border-color:color-mix(in srgb,var(--can) 45%,var(--line));}
.datecard:has(.opt--maybe input:checked){border-color:color-mix(in srgb,var(--maybe) 45%,var(--line));}
.datecard:has(.opt--cant input:checked){border-color:color-mix(in srgb,var(--cant) 42%,var(--line));}
.datehead{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:11px;}
.d-day{font-family:var(--font-head); font-weight:700; font-size:16px; letter-spacing:-.01em;}
.d-time{font-size:13.5px; color:var(--muted); font-weight:600; white-space:nowrap;}

.opts{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}
.opt{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:60px; border-radius:var(--radius-sm); border:2px solid color-mix(in srgb,var(--c) 24%,transparent);
  background:color-mix(in srgb,var(--c) 11%,var(--surface)); color:color-mix(in srgb,var(--c) 58%,var(--text));
  font-weight:700; font-size:13.5px; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .08s, background .12s;}
.opt input{position:absolute; opacity:0; width:0; height:0;}
.opt .ic{font-size:17px; font-weight:800; line-height:1;}
.opt:hover{background:color-mix(in srgb,var(--c) 18%,var(--surface));}
.opt:active{transform:scale(.96);}
.opt:has(input:checked){background:var(--c); color:#fff; border-color:var(--c);
  box-shadow:0 4px 12px -3px color-mix(in srgb,var(--c) 55%,transparent);}
.opt:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--c) 40%,transparent); outline-offset:2px;}
.opt--can{--c:var(--can);} .opt--maybe{--c:var(--maybe);} .opt--cant{--c:var(--cant);}

.unanswered{margin:11px 0 0; font-size:12.5px; color:var(--muted); font-weight:600;
  display:flex; align-items:center; gap:6px;}
.datecard:has(input:checked) .unanswered{display:none;}
.unanswered .dot{width:7px; height:7px; border-radius:50%; background:var(--muted); opacity:.55;}

details.note{margin-top:11px;}
details.note > summary{list-style:none; cursor:pointer; font-size:12.5px; font-weight:700; color:var(--accent);}
details.note > summary::-webkit-details-marker{display:none;}
details.note > summary::before{content:'+ Přidat poznámku';}
details.note[open] > summary::before{content:'Skrýt poznámku';}
.note input{margin-top:9px; width:100%; border:1.5px solid var(--line); background:#fffaf3;
  border-radius:var(--radius-sm); padding:9px 11px; font:inherit; font-size:13.5px; color:var(--text);}
.note input:focus{outline:none; border-color:var(--accent);}

/* ---------- questions ---------- */
.q{background:var(--surface); border:1.5px solid #f3e7d8; border-radius:var(--radius); padding:15px; margin-bottom:12px;}
.q > .qlabel{display:block; font-weight:700; font-size:15px; margin-bottom:11px; line-height:1.3;}
.qlabel .opt-tag{font-weight:600; color:var(--muted); font-size:13px;}
.yn{display:grid; grid-template-columns:1fr 1fr; gap:9px;}
.choices{display:flex; flex-wrap:wrap; gap:8px;}
.chip{position:relative; border:2px solid var(--line); background:#fffaf3; border-radius:999px;
  padding:9px 14px; font:inherit; font-weight:600; font-size:14px; color:var(--text); cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:transform .08s, background .12s;}
.yn .chip{border-radius:var(--radius-sm); text-align:center; padding:13px; font-weight:700; justify-content:center;}
.chip input{position:absolute; opacity:0; width:0; height:0;}
.chip:active{transform:scale(.96);}
.chip:has(input:checked){background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.chip:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent); outline-offset:2px;}

/* conditional sub-question — revealed by CSS when "Ano" is checked */
.cond{display:none; margin-top:13px; padding:13px 13px 13px 15px;
  border-left:3px solid color-mix(in srgb,var(--accent) 55%,var(--line));
  background:color-mix(in srgb,var(--accent) 7%,var(--surface));
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
.cond.show{display:block;}
.condhint{font-size:11.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  color:var(--accent); margin-bottom:9px;}
.cond .qlabel{display:block; font-weight:700; font-size:14.5px; margin-bottom:9px;}
.numrow{display:flex; align-items:center; gap:10px;}
.numrow input{width:84px; border:2px solid var(--line); background:#fffaf3; border-radius:var(--radius-sm);
  padding:11px; font:inherit; font-weight:800; font-size:17px; text-align:center; color:var(--text);}
.numrow input:focus{outline:none; border-color:var(--accent);}
.numrow span{font-size:13.5px; color:var(--muted); font-weight:600;}

.field{width:100%; border:1.5px solid var(--line); background:#fffaf3; border-radius:var(--radius-sm);
  padding:12px 13px; font:inherit; font-size:15px; color:var(--text);}
.field::placeholder{color:var(--muted);}
.field:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);}
textarea.field{resize:vertical; min-height:74px; line-height:1.45;}

/* ---------- who responded ---------- */
.whoblock{margin-bottom:14px;}
.whohead{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px;}
.whohead b{font-family:var(--font-head); font-weight:700; font-size:14.5px;}
.counts{display:flex; gap:9px; font-size:12.5px; font-weight:800;}
.counts i{font-style:normal;}
.counts .c-can{color:var(--can);} .counts .c-maybe{color:var(--maybe);} .counts .c-cant{color:var(--cant);}
.gchips{display:flex; flex-wrap:wrap; gap:6px;}
.gchip{display:inline-flex; align-items:center; gap:6px; padding:6px 11px 6px 9px; border-radius:999px;
  font-size:13px; font-weight:600; border:1.5px solid transparent;}
.gchip .gd{width:8px; height:8px; border-radius:50%;}
.gchip.can{background:color-mix(in srgb,var(--can) 13%,var(--surface)); color:color-mix(in srgb,var(--can) 64%,var(--text)); border-color:color-mix(in srgb,var(--can) 24%,transparent);}
.gchip.can .gd{background:var(--can);}
.gchip.maybe{background:color-mix(in srgb,var(--maybe) 14%,var(--surface)); color:color-mix(in srgb,var(--maybe) 62%,var(--text)); border-color:color-mix(in srgb,var(--maybe) 26%,transparent);}
.gchip.maybe .gd{background:var(--maybe);}
.gchip.cant{background:color-mix(in srgb,var(--cant) 12%,var(--surface)); color:color-mix(in srgb,var(--cant) 62%,var(--text)); border-color:color-mix(in srgb,var(--cant) 24%,transparent);}
.gchip.cant .gd{background:var(--cant);}

.youform{display:flex; flex-direction:column; gap:11px;}

/* ---------- sticky submit ---------- */
.spacer{height:14px;}
.submitbar{position:sticky; bottom:0; padding:13px 18px calc(15px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,var(--bg) 26%);}
.submit{width:100%; border:none; cursor:pointer; font-family:var(--font-head); font-weight:800; font-size:17px;
  color:var(--accent-ink); background:var(--accent); border-radius:var(--radius); padding:16px;
  box-shadow:0 10px 22px -8px rgba(224,89,42,.6); -webkit-tap-highlight-color:transparent;
  transition:transform .08s, filter .12s; display:flex; align-items:center; justify-content:center; gap:9px;}
.submit:hover{filter:brightness(1.05);}
.submit:active{transform:scale(.985);}

/* ===== Admin přehled (desktop) ===== */
body.admin{ background:#e6e7ea; color:#1f2329; padding:32px 24px; }
.app{
  --bg:#eef0f2;--card:#fff;--text:#1f2329;--muted:#6b7280;--line:#e6e8eb;--line2:#eef0f2;
  --accent:#e0592a;--accent-ink:#fff;--accent-soft:#fbe7dc;
  --can:#4f9d4f;--maybe:#e0962a;--cant:#d6543f;--radius:14px;--font-head:'Bricolage Grotesque',sans-serif;
  max-width:1280px;margin:0 auto;background:var(--bg);color:var(--text);border-radius:14px;overflow:hidden;
  box-shadow:0 2px 4px rgba(20,20,30,.06),0 26px 54px -16px rgba(20,20,40,.22);border:1px solid #dfe2e6;
}
.topbar{background:var(--card);border-bottom:1px solid var(--line);padding:18px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.brand{width:38px;height:38px;border-radius:10px;background:linear-gradient(150deg,#e0592a,#e6962a);display:flex;align-items:center;justify-content:center;font-size:20px;flex:none;}
.tb-main{flex:1;min-width:240px;}
.tb-main h1{font-family:var(--font-head);font-weight:800;font-size:21px;letter-spacing:-.02em;margin:0 0 3px;display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
.tb-meta{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);font-weight:500;flex-wrap:wrap;}
.tb-meta .sep{opacity:.4;}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;}
.status .d{width:7px;height:7px;border-radius:50%;}
.status.collecting{background:#fdf2e3;color:#9a6a1a;}.status.collecting .d{background:var(--maybe);}
.status.locked{background:#e8f3e8;color:#2f6d2f;}.status.locked .d{background:var(--can);}
.tb-actions{display:flex;align-items:center;gap:9px;}
.btn{display:inline-flex;align-items:center;gap:7px;font-family:'Figtree',sans-serif;font-weight:700;font-size:13.5px;border-radius:10px;padding:10px 14px;cursor:pointer;border:1.5px solid var(--line);background:var(--card);color:var(--text);transition:background .12s,border-color .12s,filter .12s;white-space:nowrap;}
.btn:hover{background:#f7f8f9;border-color:#d6dadf;}
.btn .ic{font-size:15px;line-height:1;}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.btn.primary:hover{filter:brightness(1.06);}
.body{padding:22px 24px 28px;}
.stack{display:flex;flex-direction:column;gap:18px;}
.grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start;}
.grid > *{min-width:0;}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);}
.card .ch{padding:15px 18px 0;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.card .ch h2{font-family:var(--font-head);font-weight:700;font-size:16px;letter-spacing:-.01em;margin:0;}
.card .ch .sub{font-size:12.5px;color:var(--muted);font-weight:600;}
.card .cb{padding:14px 18px 18px;}
.hero{background:linear-gradient(165deg,#fff,#fff8f3);border:1.5px solid var(--accent-soft);border-radius:var(--radius);padding:18px 20px;overflow:hidden;}
.hero .hl{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
.hero .hl .lab{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:7px;}
.legend{display:flex;gap:16px;align-items:center;font-size:12.5px;color:var(--muted);font-weight:600;}
.legend i{display:inline-flex;align-items:center;gap:6px;font-style:normal;}
.legend .sw{width:11px;height:11px;border-radius:4px;}
.datecols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.datecol{position:relative;min-width:0;border:1.5px solid var(--line);border-radius:12px;padding:15px 14px;background:var(--card);}
.datecol.win{border-color:var(--accent);box-shadow:0 8px 22px -12px rgba(224,89,42,.4);}
.datecol .ribbon{position:absolute;top:-10px;left:14px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:6px;}
.datecol .dd{font-family:var(--font-head);font-weight:800;font-size:17px;letter-spacing:-.01em;}
.datecol .dt{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:11px;}
.minibar{display:flex;height:8px;border-radius:5px;overflow:hidden;margin-bottom:10px;background:var(--line2);}
.minibar .m{height:100%;}
.dc-tally{display:flex;gap:11px;font-size:12.5px;font-weight:800;}
.dc-tally i{font-style:normal;}.dc-tally .c-can{color:var(--can);}.dc-tally .c-maybe{color:var(--maybe);}.dc-tally .c-cant{color:var(--cant);}
.datecol .btn{width:100%;justify-content:center;margin-top:13px;}
.vtbl{display:flex;flex-direction:column;width:100%;font-size:13.5px;}
.vrow{display:flex;align-items:stretch;}
.vc{flex:1 1 0;min-width:0;padding:9px 8px;display:flex;align-items:center;justify-content:center;text-align:center;border-bottom:1px solid var(--line2);}
.vc.host{flex:0 0 188px;justify-content:flex-start;gap:9px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vc .av{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;font-family:var(--font-head);}
.vrow.hdr .vc{flex-direction:column;gap:2px;color:var(--muted);font-weight:700;font-size:12.5px;padding-bottom:11px;border-bottom:1.5px solid var(--line);line-height:1.2;}
.vrow.hdr .vc.host{flex-direction:row;align-items:flex-end;}
.vrow.hdr small{font-weight:600;opacity:.75;font-size:11px;}
.vc.win{background:#fef7f2;}
.vrow.hdr .vc.win{border-bottom-color:var(--accent);color:var(--accent);}
.vrow.foot .vc{border-top:1.5px solid var(--line);border-bottom:none;padding-top:11px;font-weight:800;}
.vrow.foot .vc.host{color:var(--muted);font-weight:700;font-size:12.5px;}
.vrow:not(.hdr):not(.foot):hover .vc{background:#fafbfc;}
.vrow:not(.hdr):not(.foot):hover .vc.win{background:#fdf0e8;}
.vcell{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:78px;padding:5px 9px;border-radius:8px;font-weight:700;font-size:12.5px;}
.vcell .ic{font-size:13px;font-weight:800;}
.vcell.can{background:#eaf4ea;color:var(--can);}.vcell.maybe{background:#fbf0dd;color:var(--maybe);}.vcell.cant{background:#fbe7e3;color:var(--cant);}
.vcell.none{background:transparent;color:#b6bcc4;border:1.5px dashed var(--line);min-width:46px;font-weight:600;}
.fcount{display:inline-flex;gap:9px;font-size:12.5px;}.fcount i{font-style:normal;}
.fcount .c-can{color:var(--can);}.fcount .c-maybe{color:var(--maybe);}.fcount .c-cant{color:var(--cant);}
.qs{display:flex;flex-direction:column;gap:18px;}
.qblock .qt{font-weight:700;font-size:14px;margin-bottom:10px;}
.segbar{display:flex;height:26px;border-radius:8px;overflow:hidden;border:1px solid var(--line);}
.segbar .s{display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;color:#fff;}
.kidsline{margin-top:9px;font-size:13px;color:var(--muted);font-weight:600;}
.kidsline b{color:var(--text);font-family:var(--font-head);font-size:15px;}
.dietlist{display:flex;flex-direction:column;gap:7px;}
.dietitem{font-size:13px;display:flex;gap:8px;align-items:baseline;}
.dietitem b{font-weight:700;color:var(--text);white-space:nowrap;}
.dietitem span{color:var(--muted);}
.msgs{display:flex;flex-direction:column;gap:2px;}
.msg{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line2);}
.msg:last-child{border-bottom:none;}
.msg .av{width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;font-family:var(--font-head);}
.msg .mn{font-weight:700;font-size:13.5px;}
.msg .mt{font-size:13.5px;color:#4b5159;line-height:1.45;margin-top:1px;}
.pending{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);}
.pending b{color:var(--text);font-weight:700;}
.pending .who{display:inline-flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.pchip{background:#f3f4f6;border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:600;color:#5b616b;}
@media(max-width:820px){.grid{grid-template-columns:1fr;}.datecols{grid-template-columns:1fr;}}

/* ===== Doplňky aplikace (mimo původní HTML návrhy) ===== */
/* neutrální jmenovka na veřejné stránce – „kdo už odpověděl" bez barvy hlasu */
.gchip.plain{ background:var(--surface); color:var(--text); border-color:var(--line); }
/* potvrzovací / informační / chybové hlášky na veřejné stránce */
.flash{ background:#fff; border:1.5px solid var(--line); border-radius:var(--radius); padding:13px 15px; font-size:14px; line-height:1.45; color:var(--text); }
.flash a{ color:var(--accent); font-weight:700; }
.flash-ok{ background:color-mix(in srgb,var(--can) 12%,#fff); border-color:color-mix(in srgb,var(--can) 35%,var(--line)); }
.flash-err{ background:color-mix(in srgb,var(--cant) 10%,#fff); border-color:color-mix(in srgb,var(--cant) 42%,var(--line)); }
/* admin formulářová pole (úpravy akce) */
.app .f-in{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font:inherit; font-size:14px; color:var(--text); background:#fff; }
.app .f-in:focus{ outline:none; border-color:var(--accent); }
.app .f-row{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.app .f-row > label{ font-size:13px; font-weight:600; color:var(--muted); }
.app .f-inline{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.app .editrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line2); font-size:14px; }
/* matice hlasování – při více termínech vodorovný scroll, sloupce se nezmáčknou */
.vtbl-wrap{ overflow-x:auto; }
.vtbl-wrap .vc:not(.host){ min-width:90px; }
.vtbl-wrap .vc.host{ flex-basis:160px; }
/* nebezpečné tlačítko (smazat) */
.app .btn.danger{ color:var(--cant); border-color:color-mix(in srgb,var(--cant) 40%,var(--line)); }
.app .btn.danger:hover{ background:color-mix(in srgb,var(--cant) 9%,#fff); border-color:var(--cant); }
/* levé menu (centrum Moje akce) */
.app .applayout{ display:flex; gap:18px; align-items:flex-start; }
.app .sidenav{ flex:0 0 190px; display:flex; flex-direction:column; gap:5px; }
.app .sidenav a{ display:flex; align-items:center; gap:9px; padding:10px 13px; border-radius:10px; font-size:14px; font-weight:600; color:var(--text); text-decoration:none; }
.app .sidenav a:hover{ background:#eef0f2; }
.app .sidenav a.active{ background:var(--accent); color:#fff; }
.app .sidemain{ flex:1; min-width:0; }
@media(max-width:720px){ .app .applayout{ flex-direction:column; } .app .sidenav{ flex-direction:row; flex-wrap:wrap; flex-basis:auto; } }
/* klikací logo (zpět na úvodní stránku) */
.app a.brand{ text-decoration:none; }
/* dlaždice na úvodní stránce */
.app .hometiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.app .hometile{ display:flex; flex-direction:column; gap:6px; padding:22px 20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); text-decoration:none; color:var(--text); transition:border-color .12s, box-shadow .12s, transform .08s; }
.app .hometile:hover{ border-color:var(--accent); box-shadow:0 8px 22px -12px rgba(224,89,42,.35); transform:translateY(-1px); }
.app .hometile .hticon{ font-size:30px; }
.app .hometile .htlabel{ font-family:var(--font-head); font-weight:700; font-size:17px; }
.app .hometile .htdesc{ font-size:13px; color:var(--muted); }