:root{
  --bg:#F5F7F4;--card:#FFFFFF;--line:#E3E8E3;--ink:#191D1B;--mut:#6B7671;
  --black:#14171A;--org:#FF6A13;--org-t:#FFF2E8;--green:#0E8A55;--green-b:#16BC77;--red:#D14343;
  --grafiitti:#22262B;--paperi:#F6F4EF;--betoni:#B7B1A7;--teras:#5C6B78;--isku:#FF6A13;--valmis:#0E8A55;
  --sha:0 8px 24px rgba(20,23,26,.06);
  --hd:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:var(--ui);background:var(--bg);color:var(--ink);font-size:15px;-webkit-font-smoothing:antialiased;overflow-x:hidden}html{overflow-x:hidden}
.num{font-variant-numeric:tabular-nums}.path{font-family:var(--mono);font-size:.82em;color:var(--mut)}
h1,h2,h3,.hd{font-family:var(--hd);font-weight:600;letter-spacing:-.01em}
.top{position:sticky;top:0;z-index:30;height:58px;background:var(--black);color:#eef2ee;display:flex;align-items:center;gap:12px;padding:0 18px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--hd);font-weight:600;font-size:18px}
.bmark{width:24px;height:24px;border-radius:7px;background:var(--grafiitti);display:flex;align-items:center;justify-content:center}
.envpill{font-size:11px;font-weight:600;background:#23282a;color:#9fb0a8;padding:4px 10px;border-radius:20px}
.top .sp{flex:1}.udot{width:32px;height:32px;border-radius:50%;background:#2c3330;border:2px solid #3a423e}
.tabs{position:sticky;top:58px;z-index:29;height:48px;background:var(--card);border-bottom:1px solid var(--line);display:flex;gap:4px;padding:0 12px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tab{border:0;background:transparent;font-family:var(--ui);font-weight:600;font-size:14px;color:var(--mut);padding:0 14px;cursor:pointer;position:relative;flex:0 0 auto;white-space:nowrap}
.tab.on{color:var(--ink)}.tab.on::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--org)}
.wrap{max-width:880px;margin:0 auto;padding:16px 14px 60px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sha);padding:18px;margin-bottom:14px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.h-lg{font-size:22px;margin:2px 0}.sub{color:var(--mut);font-size:13px}
.consumers{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.csys{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 12px;font-size:12.5px;font-weight:600}
.cdot{width:8px;height:8px;border-radius:50%;background:var(--green-b)}
.subtabs{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.subtabs::-webkit-scrollbar{display:none}.stab{flex:0 0 auto;white-space:nowrap}
.stab{border:1px solid var(--line);background:#fff;color:var(--mut);font-weight:600;font-size:14px;padding:9px 16px;border-radius:11px;cursor:pointer}
.stab.on{background:var(--org-t);color:var(--org);border-color:#f6d3b8}
label.f{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;color:var(--mut)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:560px){.grid{grid-template-columns:1fr}}
input,select{font-family:var(--ui);font-size:15px;color:var(--ink);border:1.5px solid var(--line);border-radius:11px;padding:10px 12px;background:#fbfdfb;font-variant-numeric:tabular-nums;width:100%}
input:focus,select:focus{outline:0;border-color:var(--org);box-shadow:0 0 0 3px rgba(255,106,19,.12);background:#fff}
.btn{border:0;border-radius:12px;padding:12px 16px;font-family:var(--ui);font-size:14.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:translateY(1px)}.btn-org{background:var(--org);color:#fff}.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.full{width:100%}.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.menekki{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:14px}
.mhead{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.mhead .tag{font-size:11px;font-weight:700;color:var(--green);background:#e7f5ee;padding:3px 9px;border-radius:20px}
table.rows{width:100%;border-collapse:collapse;margin-top:6px;font-size:13.5px}
table.rows th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700;padding:8px 6px;border-bottom:1px solid var(--line)}
table.rows td{padding:9px 6px;border-bottom:1px solid #f2f5f2}
table.rows td.r,table.rows th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rowtot td{border-top:2px solid var(--line);font-weight:700;background:#fafcfa}
.warn{color:var(--org);font-weight:600}
.legend{display:flex;gap:16px;font-size:12px;color:var(--mut);margin-top:10px}
.ld{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px}
.authwrap{min-height:calc(100vh - 58px);display:flex;align-items:flex-start;justify-content:center;padding:6vh 20px calc(45vh + 40px)}
.authcard{max-width:380px;width:100%}
.msg{font-size:12.5px;padding:9px 11px;border-radius:10px;margin-top:10px}
.msg.err{background:#fbeae7;color:#9c342a}.msg.info{background:var(--org-t);color:#95651a}
.ep{display:flex;gap:10px;align-items:baseline;padding:10px 0;border-bottom:1px solid #f2f5f2}.ep:last-child{border-bottom:0}
.ep .m{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--green);min-width:64px}
.ep .p{font-family:var(--mono);font-size:12.5px}.ep .d{font-size:12.5px;color:var(--mut);margin-left:auto;text-align:right}
.mbg{position:fixed;inset:0;background:rgba(20,23,26,.5);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}
.modal{background:#fff;border-radius:18px;max-width:440px;width:100%;box-shadow:var(--sha);padding:20px;max-height:86vh;overflow:auto}
.modal h3{margin:0 0 4px;font-size:17px;font-family:var(--hd)}
.osel{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 13px;border:1px solid var(--line);border-radius:12px;margin-top:9px;cursor:pointer}
.osel:hover{border-color:var(--org);background:var(--org-t)}
.osel .o-t{font-weight:600;font-size:14px}.osel .o-s{font-size:12px;color:var(--mut)}.osel .o-a{font-weight:700}
.wrap{max-width:880px;margin:0 auto;padding:16px 14px 60px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.pkt{position:relative}.pkt.pop{border:2px solid var(--org)}
.pop-tag{position:absolute;top:-9px;right:14px;background:var(--org);color:#fff;font-size:10px;font-weight:800;padding:2px 9px;border-radius:20px}
textarea{font-family:var(--ui);font-size:14px;border:1.5px solid var(--line);border-radius:11px;padding:10px 12px;background:#fbfdfb;width:100%}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.tw::-webkit-scrollbar{display:none}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:5px 11px;font-size:12.5px;color:var(--ink);cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--org);color:var(--org)}
.chip.valittu{border-color:var(--org);background:var(--org);color:#fff}

.kuvaph{width:54px;height:54px;border-radius:8px;background:#eef1ee;display:flex;align-items:center;justify-content:center;color:var(--mut);font-weight:800;flex:0 0 auto;font-family:var(--dis)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media(max-width:360px){.grid2{grid-template-columns:1fr}}

/* ===== Alapalkki (kiinteä), vasen valikko, avatar-valikko ===== */
.wrap{padding-bottom:84px}
.bnav{position:fixed;left:0;right:0;bottom:0;height:62px;background:var(--card);border-top:1px solid var(--line);display:flex;z-index:38;padding-bottom:env(safe-area-inset-bottom)}
.bnav button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;color:var(--mut);cursor:pointer;font-family:var(--ui);font-weight:600}
.bnav button .ic{font-size:20px;line-height:1}
.bnav button.on{color:var(--org)}
.drawerbg{position:fixed;inset:0;background:rgba(20,23,26,.42);z-index:44;opacity:0;pointer-events:none;transition:opacity .2s}
.drawerbg.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;left:0;width:284px;max-width:82vw;background:var(--card);z-index:45;transform:translateX(-100%);transition:transform .22s ease;overflow-y:auto;box-shadow:var(--sha);padding:16px 0 24px}
.drawer.on{transform:translateX(0)}
.drawer .dhead{display:flex;align-items:center;gap:9px;padding:6px 20px 14px;font-family:var(--dis);font-weight:800;font-size:19px}
.drawer .dhead .bmark{width:26px;height:26px;border-radius:7px;background:var(--grn,#0E8A55);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.drawer .grp{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);padding:16px 20px 4px}
.drawer .itm{display:block;width:100%;text-align:left;border:0;background:none;padding:11px 20px 11px 34px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer}
.drawer .itm.on{color:var(--org);background:var(--org-t)}
.avatarbtn{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.28);background:#2b3237;color:#fff;font-weight:800;font-size:14px;cursor:pointer;flex:0 0 auto}
.amenubg{position:fixed;inset:0;z-index:46;display:none}
.amenubg.on{display:block}
.amenu{position:fixed;top:56px;right:12px;background:var(--card);border-radius:14px;box-shadow:var(--sha);z-index:47;min-width:230px;padding:8px;display:none}
.amenu.on{display:block}
.amenu .ah{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.amenu .ah b{display:block;font-size:14px}.amenu .ah span{font-size:12px;color:var(--mut)}
.amenu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:none;padding:10px 12px;border-radius:9px;font-size:14px;color:var(--ink);cursor:pointer;font-weight:600}
.amenu button:hover{background:var(--bg)}
.amenu .ver{padding:8px 12px 2px;font-size:11px;color:var(--mut)}

/* Alapalkin alle jäävän sisällön korjaus (napit näkyviin) */
body{padding-bottom:100px}
#app{padding-bottom:24px}
.verpill{font-size:11px;font-weight:700;background:#23282a;color:#9fb0a8;padding:4px 10px;border-radius:20px;cursor:pointer;border:0;font-family:var(--ui)}
.verpill.uusi{background:var(--org);color:#fff;animation:verpuls 1.6s ease-in-out infinite}
@keyframes verpuls{0%,100%{opacity:1}50%{opacity:.7}}
.akkohd{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:14px 16px}
.akko .akkobody{display:none}
.akko.auki .akkobody{display:block;border-top:1px solid var(--line)}
.akkonuoli{display:inline-block;transition:transform .15s;margin-left:4px}
.akko.auki .akkonuoli{transform:rotate(180deg)}
.akko .tw{padding:4px 8px 8px}
.rows tr.rgrp td{background:#f3f5f2;font-weight:700;font-size:12px;color:var(--ink);padding-top:10px}

/* PWA: estä zoomaus ja tuplanäpäytys-suurennos (alanavigaatio pysyy paikallaan) */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
input,select,textarea{font-size:16px}/* iOS ei zoomaa kenttään kun >=16px */
.lnk{background:none;border:0;color:var(--org);font-weight:700;cursor:pointer;padding:0;font-size:inherit;font-family:inherit;text-decoration:underline}
.lbl2{display:block;font-size:12.5px;font-weight:600;margin:10px 0 3px;color:var(--teras)}
.gearbtn{display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:0;background:transparent;color:#cfd3d6;cursor:pointer;margin-right:2px}
.gearbtn:active{background:rgba(255,255,255,.08)}
.hakurivi{display:flex;gap:8px;align-items:stretch;margin-top:6px}
.hakurivi input{flex:1;min-width:0}
.filtbtn{display:inline-flex;align-items:center;justify-content:center;width:48px;flex:0 0 auto;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--teras);cursor:pointer}
.filtbtn:active{background:var(--org-t);color:var(--org);border-color:#f6d3b8}