:root{
  --bg:#f4f4f6; --panel:#ffffff; --panel2:#f7f7f9; --panel3:#ececf0; --line:#e3e3e8; --line2:#d4d4db;
  --red:#c8102e; --red-2:#a50d26; --red-soft:rgba(200,16,46,.12);
  --ink:#111114; --text:#1b1b1f; --muted:#62626b; --dim:#8d8d96;
  --ok:#147a43; --warn:#a86200; --bad:#c8102e;
  --r:8px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-weight:600;letter-spacing:-.01em}
a{color:var(--red)}

/* Header */
header{position:sticky;top:0;z-index:20;background:var(--ink);color:#fff;border-bottom:3px solid var(--red)}
.hwrap{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:28px;height:56px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:26px;height:26px;border-radius:5px;background:var(--red);position:relative}
.logo{display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px}
.brand h1{margin:0;font-size:16px;font-weight:700;letter-spacing:.02em;line-height:1.1}
.brand h1 span{color:inherit}
.team{color:#a9a9b2;font-size:12px;font-weight:500}
nav{display:flex;gap:2px;height:100%;overflow-x:auto;scrollbar-width:none}
nav a{display:flex;align-items:center;padding:0 12px;color:#b9b9c2;text-decoration:none;font-weight:500;font-size:14px;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-3px}
nav a:hover{color:#fff}
nav a.on{color:#fff;border-bottom-color:#fff}
nav a .badge{margin-left:6px}
.sync{margin-left:auto;font-size:12px;color:#a9a9b2;display:flex;align-items:center;gap:6px;white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:#6d6d75}
.dot.ok{background:#3fcf7f} .dot.warn{background:#f2a93b}
@media (max-width:860px){
  .hwrap{flex-wrap:wrap;height:auto;padding:10px 16px 0;gap:8px 16px}
  nav{order:3;width:100%;height:44px;margin:0 -12px}
  .sync{margin-left:auto}
}

main{max-width:1200px;margin:0 auto;padding:26px 20px 80px}
section{display:none} section.on{display:block}
.banner{background:#fff7e6;border:1px solid #f0d49a;color:#7a4a00;padding:10px 14px;border-radius:var(--r);margin-bottom:18px;font-size:13px}

/* Common */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar .grow{flex:1;min-width:200px}
.title-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.title-row h2{margin:0;font-size:22px}
.sub{color:var(--muted);font-size:13.5px;margin:0 0 18px;max-width:760px}
input[type=text],input[type=number],input[type=date],input[type=search],input[type=password],input[type=email],select,textarea{
  background:#fff;border:1px solid var(--line2);border-radius:6px;padding:8px 10px;outline:none;width:100%;height:36px}
textarea{height:auto;resize:vertical;min-height:70px}
input:focus,select:focus,textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,20,.08)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
.toolbar select,.toolbar input{width:auto}
.toolbar .grow input{width:100%}
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line2);background:#fff;border-radius:6px;padding:0 14px;height:36px;cursor:pointer;font-weight:500;white-space:nowrap;color:var(--text)}
.btn:hover{background:var(--panel2);border-color:#bdbdc6}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.primary:hover{background:var(--red-2);border-color:var(--red-2)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--panel3)}
.btn.danger{color:var(--bad);border-color:#efc6cd}
.btn.sm{height:28px;padding:0 10px;font-size:12.5px;border-radius:5px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.big{height:40px;padding:0 18px}
.badge{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;background:var(--panel3);color:var(--muted);font-size:11px;font-weight:600;text-align:center;line-height:18px}
.badge.red{background:var(--red);color:#fff}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;white-space:nowrap;color:var(--muted)}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-koeajalla{color:#b26a00}
.st-numero{color:var(--red)}
.st-nettisivut{color:#1d5fbf}
.st-valmis{color:var(--ok)}
.st-lopettanut{color:var(--dim)}
.muted{color:var(--muted)} .dim{color:var(--dim)}
.pos{color:var(--ok)} .neg{color:var(--bad)}
.num{font-variant-numeric:tabular-nums}
.empty{padding:40px 20px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--line2);border-radius:var(--r)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.seg{display:inline-flex;background:var(--panel3);border-radius:7px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:0 12px;height:30px;border-radius:5px;cursor:pointer;font-weight:500;color:var(--muted)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.1)}

/* Jersey number */
.jn{font-weight:700;font-size:14px;min-width:34px;height:28px;padding:0 6px;display:inline-grid;place-items:center;border-radius:5px;background:var(--ink);color:#fff;flex:none;font-variant-numeric:tabular-nums}
.jn.none{background:transparent;border:1px dashed var(--line2);color:var(--dim)}
.jn.dup{background:var(--warn)}

/* Player list (table) */
.plist{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.prow,.phead{display:grid;grid-template-columns:60px minmax(180px,1fr) 28px;gap:16px;align-items:center;padding:0 16px}
.phead{height:38px;background:var(--panel2);border-bottom:1px solid var(--line);font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.phead .r{text-align:right}
.phead-wrap{background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:var(--r) var(--r) 0 0}
.prow{height:48px;border-bottom:1px solid var(--line);cursor:pointer}
.prow:last-child{border-bottom:0}
.prow:hover{background:#fafafb}
.prow.inactive{color:var(--dim)}
.prow .name{font-weight:500}
.prow .bal{text-align:right;font-weight:500}
.arrow{color:var(--dim);text-align:right}
@media (max-width:700px){
  .prow,.phead{grid-template-columns:48px 1fr 20px;gap:10px}
}
.psec{margin-bottom:24px}
.psec-h{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:15px;font-weight:600}
.psec-h::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--ink)}
.psec-h.g-koeajalla::before{background:#b26a00}
.psec-h.g-haaste::before{background:#1d5fbf}
.psec-h.g-kilpa::before{background:var(--red)}
.psec-h.g-none::before{background:var(--dim)}
.psec-h.g-lopettaneet::before{background:var(--line2)}
.grp{display:inline-block;font-size:11px;font-weight:600;padding:0 7px;line-height:18px;border-radius:4px;letter-spacing:.02em}
.grp.kilpa{background:#fbe7ea;color:var(--red-2)}
.grp.haaste{background:#e6eefb;color:#1d5fbf}
.st-custom{color:#6b4fbf}
.stlist{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.strow{display:grid;grid-template-columns:24px 1fr 130px 92px;gap:10px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.strow .stepn{font-weight:700;color:#fff;background:var(--ink);font-size:11px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center}
.strow .feat{font-size:11.5px;color:var(--muted);white-space:nowrap}
.strow .ctl{display:flex;gap:2px}
.strow .ctl .btn{width:28px;padding:0}
.strow.final{background:#fff;border-style:dashed}
.summary-line{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:0 0 16px}
.summary-line b{color:var(--ink);font-weight:600}

/* Process board */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:14px;overflow-x:auto;padding-bottom:8px}
.col{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);min-height:200px;display:flex;flex-direction:column}
.col-h{padding:12px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);background:#fff;border-radius:var(--r) var(--r) 0 0}
.col-h h3{margin:0;font-size:13.5px;font-weight:600}
.col-h .step{font-weight:700;color:#fff;background:var(--ink);font-size:11px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center}
.col-h .badge{margin-left:auto}
.col-b{padding:10px;display:flex;flex-direction:column;gap:8px;flex:1}
.col-f{padding:0 12px 10px;font-size:12px;color:var(--dim)}
.card{background:#fff;border:1px solid var(--line);border-radius:7px;padding:11px 12px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card .t{display:flex;justify-content:space-between;gap:8px;align-items:center}
.card .t b{font-size:14px;font-weight:600}
.card .meta{font-size:12px;color:var(--muted);margin-top:3px}
.card .assign{display:flex;gap:6px;margin-top:9px}
.card .assign select{height:30px;padding:0 26px 0 8px;font-size:13px}
.card .assign .btn{height:30px}
.card .acts{display:flex;gap:6px;margin-top:10px;justify-content:space-between}
.card .acts2{margin-top:6px;text-align:center}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:12.5px;color:var(--muted);text-decoration:underline;cursor:pointer}
.linkbtn:hover{color:var(--red)}
.joined{min-height:36px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-weight:500;color:var(--ok)}
.join-row{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 12px;padding:12px;background:var(--panel2);border:1px solid var(--line);border-radius:8px}
.join-row .btn{flex:1 1 auto}
.card .warn{color:var(--warn);font-weight:500}
.card .bad{color:var(--bad);font-weight:500}
@media (max-width:860px){.board{grid-auto-flow:row;grid-auto-columns:auto}}

/* Numbers */
.num-layout{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:start}
@media (max-width:960px){.num-layout{grid-template-columns:1fr}}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:12px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:6px}
.grid-n{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:5px}
.tile{aspect-ratio:1.15;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--line2);background:#fff;padding:2px;min-width:0;color:var(--text)}
.tile b{font-size:15px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.tile small{font-size:9.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}
.tile.free:hover{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.tile.taken{background:var(--red);border-color:var(--red);color:#fff}
.tile.taken.dup{background:var(--warn);border-color:var(--warn)}
.tile.res{background:repeating-linear-gradient(135deg,#2a2a2f 0 5px,#1d1d21 5px 10px);border-color:#1d1d21;color:#fff}
.copybox{position:sticky;top:84px}
.copybox h3{margin:0 0 2px;font-size:16px}
.preview{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:12px;white-space:pre-wrap;font-size:13.5px;min-height:70px;margin:8px 0 14px}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field label,.lbl{font-size:12px;font-weight:500;color:var(--muted)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media (max-width:600px){.row2,.row3{grid-template-columns:1fr}}
.hint{font-size:12px;color:var(--dim)}

/* Ledger */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
@media (max-width:800px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.stat .k{font-size:12px;color:var(--muted);font-weight:500}
.stat .v{font-size:22px;font-weight:600;margin-top:4px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat.hl{border-top:3px solid var(--red)}
table.tx{width:100%;border-collapse:collapse;font-size:13.5px}
table.tx th{text-align:left;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--panel2);font-weight:600}
table.tx td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tx tr:last-child td{border-bottom:0}
table.tx tr.click{cursor:pointer}
table.tx tr.click:hover td{background:#fafafb}
table.tx .r{text-align:right}
table.tx tr.reversed td{color:var(--dim)}
table.tx tr.reversed td.desc{text-decoration:line-through}
.tag{display:inline-block;font-size:11px;padding:0 6px;line-height:18px;border-radius:4px;background:var(--panel3);color:var(--muted);font-weight:500;margin-left:6px}
.tag.batch{background:#fbe7ea;color:var(--red-2)}
.scroll-x{overflow-x:auto}
.tbl-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (max-width:700px){ table.tx .hide-m{display:none} }

/* Modal */
.overlay{position:fixed;inset:0;background:rgba(17,17,20,.45);display:none;align-items:flex-start;justify-content:center;z-index:50;padding:6vh 12px;overflow-y:auto}
.overlay.on{display:flex}
.modal{background:#fff;border-radius:10px;width:100%;max-width:480px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal.wide{max-width:920px}
.modal.mid{max-width:640px}
.mh{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.mh h3{margin:0;font-size:17px;flex:1}
.mh .x{background:none;border:0;font-size:22px;color:var(--muted);cursor:pointer;line-height:1}
.mb{padding:18px 20px}
.mf{padding:12px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;align-items:center;background:var(--panel2);border-radius:0 0 10px 10px}
.mf .left{margin-right:auto}
#confirm{z-index:60}
.split{display:grid;grid-template-columns:1fr 1.25fr;gap:24px}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.acct-bal{font-size:28px;font-weight:600;line-height:1.1;letter-spacing:-.01em}
.mini-tx{display:flex;flex-direction:column;max-height:320px;overflow-y:auto;margin-top:6px;border-top:1px solid var(--line)}
.mini-tx .it{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;align-items:center}
.mini-tx .it .d{font-size:12px;color:var(--dim)}
.mini-tx .it.reversed{color:var(--dim)}
.mini-tx .it.reversed .desc{text-decoration:line-through}

/* Batch */
.batch-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.batch-tbl th{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel2);font-weight:600}
.batch-tbl td{padding:5px 10px;border-bottom:1px solid var(--line)}
.batch-tbl .r{text-align:right}
.batch-tbl input[type=text]{width:110px;text-align:right;height:30px;padding:0 9px}
.batch-tbl tr.sel td{background:#fdf3f4}
.batch-scroll{max-height:46vh;overflow-y:auto;border:1px solid var(--line);border-radius:6px}
.helpers{display:flex;gap:18px;flex-wrap:wrap;margin:4px 0 14px;align-items:center}
.helpers .h{display:flex;gap:6px;align-items:center}
.helpers input{width:100px}
.totals{font-size:14px;font-weight:600}
input[type=checkbox]{accent-color:var(--red);width:16px;height:16px;cursor:pointer}
.check{display:flex;gap:8px;align-items:center;cursor:pointer}
.warnbox{background:#fff7e6;border:1px solid #f0d49a;color:#7a4a00;padding:10px 12px;border-radius:6px;font-size:13px;margin-top:10px}
.errbox{background:#fdecee;border:1px solid #f3c2c9;color:var(--red-2);padding:10px 12px;border-radius:6px;font-size:13px;margin-top:10px}

/* Toast */
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:7px;font-weight:500;opacity:0;transition:.2s;z-index:80;pointer-events:none;max-width:90vw;box-shadow:0 8px 24px rgba(0,0,0,.25)}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--red)}
.ro .write-only{display:none!important}

/* --- Palvelinversion lisäykset --- */
.userbox{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px;color:#c9c9d1;white-space:nowrap}
.userbox a{color:#c9c9d1;text-decoration:none}
.userbox a:hover{color:#fff}
.userbox .who{color:#fff;font-weight:500}
.rolechip{font-size:11px;padding:1px 7px;border-radius:9px;background:#2a2a30;color:#d9d9e0;font-weight:600}
@media (max-width:860px){.userbox{margin-left:auto}.userbox .who{display:none}}
.center-card{max-width:400px;margin:10vh auto 0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.center-card h2{margin:0 0 4px;font-size:20px}
.center-card .btn{width:100%;margin-top:6px}
.teamgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.teamcard{display:block;background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--r);padding:16px 18px;text-decoration:none;color:var(--text)}
.teamcard:hover{border-color:#bdbdc6;border-left-color:var(--red);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.teamcard b{display:block;font-size:16px;margin-bottom:4px}
.pwbox{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:18px;background:var(--panel2);border:1px solid var(--line);padding:10px 14px;border-radius:6px;text-align:center;letter-spacing:.04em;margin:10px 0}
table.tx select{height:30px;padding:0 26px 0 8px;width:auto}
.notadmin .admin-only{display:none!important}
.notadmin #procPanel{margin-top:0!important}

/* --- Tulostettava raportti --- */
#report{display:none}
.rep{font-family:Inter,system-ui,sans-serif;color:#111;font-size:10pt;line-height:1.35;background:#fff}
.rep-head{background:#111;color:#fff;padding:14px 18px;border-bottom:4px solid #c8102e;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.rep-head .brand-s{font-size:8pt;letter-spacing:.12em;text-transform:uppercase;color:#bbb;font-weight:600}
.rep-head h1{margin:2px 0 0;font-size:18pt;font-weight:700;letter-spacing:-.01em}
.rep-head .sub2{font-size:10pt;color:#ddd;margin-top:2px}
.rep-head .meta{font-size:8.5pt;color:#ccc;text-align:right;white-space:nowrap}
.rep-sec{margin-top:18px}
.rep-sec h2{font-size:13pt;margin:0 0 8px;border-left:4px solid #c8102e;padding-left:8px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.rep-sec h3{font-size:10pt;margin:14px 0 6px;color:#333}
.rep-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.rep-card{border:1px solid #ddd;border-radius:6px;padding:8px 10px}
.rep-card.hl{border-top:3px solid #c8102e;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.rep-card .k{font-size:7.5pt;color:#666;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.rep-card .v{font-size:13pt;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.rep table{width:100%;border-collapse:collapse;font-size:9pt;font-variant-numeric:tabular-nums}
.rep th{text-align:left;font-size:7.5pt;text-transform:uppercase;letter-spacing:.04em;color:#555;border-bottom:1.5px solid #111;padding:4px 6px;font-weight:600}
.rep td{padding:4px 6px;border-bottom:1px solid #e6e6e6}
.rep .r{text-align:right}
.rep tfoot td{font-weight:700;border-top:1.5px solid #111;border-bottom:0}
.rep .neg{color:#c8102e}
.rep .muted2{color:#777}
.rep .tagp{font-size:7.5pt;color:#777;border:1px solid #ccc;border-radius:3px;padding:0 4px;margin-left:4px}
.rep-foot{margin-top:20px;font-size:7.5pt;color:#777;border-top:1px solid #ddd;padding-top:6px;display:flex;flex-direction:column;gap:2px}
.rep-break{break-before:page}
.rep-preview{background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px;max-height:58vh;overflow:auto;margin-top:12px;box-shadow:inset 0 0 0 4px var(--panel2)}
@media print{
  @page{size:A4;margin:12mm}
  html,body.printing{background:#fff!important}
  body.printing > *:not(#report){display:none!important}
  body.printing #report{display:block}
  .rep tr{break-inside:avoid}
  .rep-sec h2,.rep-sec h3{break-after:avoid}
}

/* --- Viestipohjat --- */
.tplgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.tplcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column}
.tplcard .th{padding:14px 16px 6px;font-weight:600;font-size:15px}
.tplcard .tb{padding:0 16px;color:var(--muted);font-size:13px;white-space:pre-wrap;max-height:8.6em;overflow:hidden;position:relative;flex:1}
.tplcard .tb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2em;background:linear-gradient(transparent,#fff)}
.tplcard .tm{padding:8px 16px 0;font-size:11.5px;color:var(--dim)}
.tplcard .ta{display:flex;gap:6px;padding:12px 16px 14px;align-items:center}
.tplcard .ta .grow{flex:1}
/* Yläpalkki: mahtuu useampi välilehti */
.hwrap{gap:20px}
.brand .team{max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav a{padding:0 10px}
.userbox{gap:12px}
@media (max-width:1240px){.userbox .who{display:none}}
@media (max-width:1180px) and (min-width:861px){.brand .team{display:none}.userbox a[href^="/?"]{display:none}}

/* ===== Mobiili: alapalkki, kompakti yläpalkki, koko näytön ikkunat ===== */
.ub-toggle{display:none;background:none;border:1px solid #3a3a40;color:#fff;border-radius:7px;width:38px;height:34px;font-size:17px;cursor:pointer;line-height:1}
.ub-links{display:flex;align-items:center;gap:12px}
@media (max-width:860px){
  .hwrap{flex-wrap:nowrap;height:54px;padding:0 14px;gap:10px}
  .brand .team{display:block;max-width:180px}
  .userbox{position:relative;margin-left:auto}
  .ub-toggle{display:block}
  .ub-links{display:none;position:absolute;right:0;top:44px;background:#111114;border:1px solid #333;border-radius:10px;padding:12px 16px;flex-direction:column;align-items:flex-start;gap:14px;z-index:60;box-shadow:0 12px 30px rgba(0,0,0,.4);min-width:190px;font-size:15px}
  .userbox.open .ub-links{display:flex}
  .userbox .ub-links .who{display:inline;color:#fff;font-weight:600}
  .userbox .ub-links a{display:inline!important}
  nav{position:fixed;left:0;right:0;bottom:0;top:auto;height:calc(60px + env(safe-area-inset-bottom));padding:0 0 env(safe-area-inset-bottom);margin:0;width:auto;
      background:#111114;border-top:3px solid var(--red);display:flex;z-index:40;overflow:visible;order:0}
  nav a{flex:1;justify-content:center;align-items:center;padding:0 2px;font-size:0;border-bottom:0;border-top:3px solid transparent;margin:-3px 0 0;position:relative;color:#a9a9b2}
  nav a::before{content:attr(data-short);font-size:12px;font-weight:600;letter-spacing:.01em}
  nav a.on{border-top-color:#fff;color:#fff}
  nav a .badge{position:absolute;top:7px;left:calc(50% + 14px);font-size:10px;margin:0;min-width:16px;line-height:16px;padding:0 4px}
  main{padding:18px 14px calc(96px + env(safe-area-inset-bottom))}
  .title-row h2{font-size:20px}
  .toolbar .btn{flex:1 1 auto}
  .overlay{padding:0;align-items:stretch}
  .overlay.on{display:block}
  .modal,.modal.wide,.modal.mid{max-width:none;min-height:100%;border-radius:0;display:flex;flex-direction:column}
  .modal .mb{flex:1}
  .mf{position:sticky;bottom:0;border-radius:0;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .mf .left{flex-basis:100%}
  .batch-tbl .bc-grp,.batch-tbl .bc-now{display:none}
  .batch-tbl input[type=text]{width:86px}
  .batch-scroll{max-height:none}
  .helpers{gap:10px}
  #bDir button{padding:0 8px;font-size:13px}
  #toast{bottom:calc(80px + env(safe-area-inset-bottom))}
  .copybox{position:static}
  .num-layout{gap:16px}
  .stat .v{font-size:19px}
  .tplgrid{grid-template-columns:1fr}
}
@media (max-width:860px){.helpers .h{flex-wrap:wrap}}