@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:400;font-display:swap;src:url(vazirmatn-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:400;font-display:swap;src:url(vazirmatn-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:500;font-display:swap;src:url(vazirmatn-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:500;font-display:swap;src:url(vazirmatn-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:700;font-display:swap;src:url(vazirmatn-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:700;font-display:swap;src:url(vazirmatn-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:800;font-display:swap;src:url(vazirmatn-arabic-800-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:800;font-display:swap;src:url(vazirmatn-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lalezar';font-style:normal;font-weight:400;font-display:swap;src:url(lalezar-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Lalezar';font-style:normal;font-weight:400;font-display:swap;src:url(lalezar-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Layout: one narrow column — date bar, day counts, then the staff sheet as grid rows (name · +/− · attendance · reason); month, export and settings are sibling tabs. Copper + its patina green. */
:root{
  --bg:#EFF2F0; --surface:#FFFFFF; --ink:#18201D; --muted:#5F6A66; --line:#DCE1DE; --line-strong:#C3CBC7;
  --copper:#9E4F2A; --copper-soft:#F3E2D7; --open-bg:#F9F0EA;
  --patina:#1F6E5C; --patina-soft:#D6ECE5;
  --amber:#8A5700; --amber-soft:#F5E7C8; --amber-line:#D9C08F;
  --rust:#A3302A; --rust-soft:#F6DCD8; --rust-line:#DDAAA5;
  --sky:#2F5A93; --sky-soft:#DFE8F5; --sky-line:#AFC3E0;
  --off:#5F6A66; --off-soft:#E8EBE9;
  --desk:#DDE2DF;
  --font-ui:'Vazirmatn',Tahoma,sans-serif;
  --font-display:'Lalezar','Vazirmatn',Tahoma,sans-serif;
  --r:10px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#121615; --surface:#1B201E; --ink:#E6EBE8; --muted:#97A29D; --line:#2A312E; --line-strong:#3A4340;
    --copper:#E0905F; --copper-soft:#3A2920; --open-bg:#241E1A;
    --patina:#62C2AB; --patina-soft:#183A32;
    --amber:#E5AE4F; --amber-soft:#3A2F1B; --amber-line:#5E4C2A;
    --rust:#F07D72; --rust-soft:#42211E; --rust-line:#6B3A35;
    --sky:#8EB4EA; --sky-soft:#1C2A3E; --sky-line:#344A6A;
    --off:#A7B0AC; --off-soft:#262C2A;
    --desk:#0C0F0E;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  background:var(--bg); color:var(--ink);
  font-family:var(--font-ui); font-size:15px; line-height:1.6;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:max(20px,env(safe-area-inset-top,0px));
  padding-bottom:calc(104px + env(safe-area-inset-bottom,0px));
}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
input,select{font-size:16px} /* 16px stops iOS from zooming on focus */
button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed}
:focus-visible{outline:2px solid var(--copper);outline-offset:2px}
.num,bdi.n{font-variant-numeric:tabular-nums}
bdi.n{unicode-bidi:isolate;direction:ltr}
svg.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

.app{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:16px}

/* header */
.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px}
.brand h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:2rem;line-height:1.15;color:var(--copper)}
.brand p{margin:2px 0 0;color:var(--muted);font-size:.85rem}
.tabs{display:flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px;max-width:100%}
.tabs button{border:0;background:transparent;padding:6px 12px;border-radius:999px;font-weight:500;font-size:.9rem;color:var(--muted);white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--copper);color:var(--surface)}

/* banners */
.note{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;color:var(--muted);font-size:.9rem;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.note p{margin:0;flex:1 1 220px}
.note strong{color:var(--ink)}
.note.warn{border-color:var(--amber);color:var(--ink)}
.note .x{border:0;background:transparent;color:var(--muted);font-size:.85rem;padding:4px 6px}

/* date bar */
.datebar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
.navbtn{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:7px 12px;font-size:.88rem;white-space:nowrap}
.navbtn:disabled{opacity:.4}
.date{text-align:center;min-width:0}
.date strong{display:block;font-size:1.12rem;font-weight:800;line-height:1.4}
.date span{display:block;color:var(--muted);font-size:.8rem}
.date .today{display:inline-block;margin-top:2px;border:0;background:var(--copper-soft);color:var(--copper);border-radius:999px;padding:2px 12px;font-size:.8rem;font-weight:700}

/* counts */
.counts{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.count{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;display:flex;flex-direction:column;align-items:center}
.count b{font-family:var(--font-display);font-weight:400;font-size:1.6rem;line-height:1.2}
.count span{font-size:.78rem;color:var(--muted)}
.count.p b{color:var(--patina)} .count.v b{color:var(--sky)} .count.a b{color:var(--rust)} .count.o b{color:var(--off)} .count.n b{color:var(--muted)}

/* sheet */
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.head,.row{display:grid;grid-template-columns:11rem auto minmax(0,1fr);grid-template-areas:"name score att";align-items:center;gap:8px 14px;padding:10px 14px}
.row.has-why{grid-template-areas:"name score att" "why why why"}
.row.has-times{grid-template-areas:"name score att" "times times times"}
.row.has-times.has-why{grid-template-areas:"name score att" "times times times" "why why why"}
.head{font-size:.78rem;color:var(--muted);letter-spacing:.02em;border-bottom:1px solid var(--line);padding-block:8px}
.head .h-att{justify-self:end}
.row + .row{border-top:1px solid var(--line)}
.row.is-open{background:var(--open-bg)}
.name{grid-area:name;min-width:0;border:0;background:transparent;text-align:right;padding:0;display:flex;flex-direction:column}
.name .nm{font-weight:700;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.name .sub{font-size:.76rem;color:var(--muted)}
.name .sub u{text-decoration:none;color:var(--copper);font-weight:500}
.name .sub .chev{display:inline-block;transition:transform .15s}
.row.is-open .name .sub .chev{transform:rotate(180deg)}
.score{grid-area:score;display:flex;align-items:center;gap:6px}
.pm{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);font-size:1.3rem;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0}
.pm.plus{color:var(--patina)} .pm.minus{color:var(--rust)}
.pm:active{transform:scale(.92)}
.pm.plus:active{background:var(--patina-soft)}
.pm.minus:active{background:var(--rust-soft)}
.val{min-width:2.4rem;text-align:center;font-weight:800;font-size:1.05rem}
.val.pos{color:var(--patina)} .val.neg{color:var(--rust)} .val.zero{color:var(--muted)}
.att{grid-area:att;justify-self:end;display:inline-grid;grid-template-columns:repeat(4,auto);border:1px solid var(--line-strong);border-radius:999px;padding:3px;gap:2px}
.att button{border:0;background:transparent;border-radius:999px;padding:6px 12px;font-size:.88rem;font-weight:500;color:var(--muted)}
.att button[aria-pressed="true"][data-st="p"]{background:var(--patina-soft);color:var(--patina);font-weight:700}
.att button[aria-pressed="true"][data-st="v"]{background:var(--sky-soft);color:var(--sky);font-weight:700}
.att button[aria-pressed="true"][data-st="o"]{background:var(--off-soft);color:var(--off);font-weight:700}
.att button[aria-pressed="true"][data-st="a"]{background:var(--rust-soft);color:var(--rust);font-weight:700}
.why{grid-area:why;display:flex;align-items:center;gap:8px;min-width:0}
.why label{font-size:.82rem;font-weight:700;white-space:nowrap}
.why.a label{color:var(--rust)} .why.l label{color:var(--amber)} .why.v label{color:var(--sky)}
.why input{flex:1;min-width:0;width:100%;border:1px solid var(--line-strong);background:var(--bg);border-radius:8px;padding:7px 10px}
.why.a input{border-color:var(--rust-line)}
.why.l input{border-color:var(--amber-line)}
.why.v input{border-color:var(--sky-line)}

.details{grid-column:1/-1;border-top:1px dashed var(--line-strong);padding-top:10px;margin-top:2px;display:flex;flex-direction:column;gap:8px}
.details h3{margin:0;font-size:.8rem;font-weight:500;color:var(--muted)}
.details .none{margin:0;color:var(--muted);font-size:.86rem}
.marks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.marks li{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:10px}
.mv{font-weight:800;min-width:2.2rem;text-align:center;border-radius:6px;padding:2px 6px}
.mv.pos{background:var(--patina-soft);color:var(--patina)} .mv.neg{background:var(--rust-soft);color:var(--rust)}
.marks time{color:var(--muted);font-size:.82rem}
.marks input{min-width:0;width:100%;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:6px 10px}
.delbtn{display:inline-flex;align-items:center;gap:4px;min-height:38px;border:1px solid var(--rust-line);background:var(--surface);color:var(--rust);border-radius:8px;padding:4px 12px;font-size:.86rem;font-weight:700;white-space:nowrap}
.delbtn:active{background:var(--rust-soft)}

.empty{padding:28px 16px;text-align:center;color:var(--muted)}
.empty strong{display:block;color:var(--ink);font-size:1rem;margin-bottom:4px}
.empty .actions{justify-content:center;margin-top:12px}

@media (hover:hover){
  .pm.plus:hover{background:var(--patina-soft);border-color:var(--patina)}
  .pm.minus:hover{background:var(--rust-soft);border-color:var(--rust)}
  .delbtn:hover{background:var(--rust-soft)}
}

@media (max-width:620px){
  .tabs{width:100%}
  .tabs button{flex:1 1 auto;padding:7px 6px;font-size:.86rem}
  .head{display:none}
  .row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name score" "att att";padding:12px}
  .row.has-why{grid-template-areas:"name score" "att att" "why why"}
  .row.has-times{grid-template-areas:"name score" "att att" "times times"}
  .row.has-times.has-why{grid-template-areas:"name score" "att att" "times times" "why why"}
  .att{justify-self:stretch;grid-template-columns:repeat(4,1fr)}
  .att button{padding:7px 4px}
  .marks li{grid-template-columns:auto auto minmax(0,1fr) auto;row-gap:6px}
  .marks li .delbtn{grid-column:4;grid-row:1}
  .marks li input{grid-row:2;grid-column:1/-1}
  .counts{gap:6px}
  .count{padding:6px 4px}
}

/* month */
.monthbar{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px}
.monthbar h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.5rem;color:var(--ink)}
.monthbar p{margin:0;color:var(--muted);font-size:.85rem}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:.92rem}
th,td{padding:9px 12px;text-align:center;white-space:nowrap}
th{font-size:.78rem;font-weight:500;color:var(--muted);border-bottom:1px solid var(--line)}
td:first-child,th:first-child{text-align:right}
tbody tr + tr td{border-top:1px solid var(--line)}
td.p{color:var(--patina)} td.l{color:var(--amber)} td.a{color:var(--rust)}
td.net{font-weight:800}
td.net.pos{color:var(--patina)} td.net.neg{color:var(--rust)}
.rank{display:inline-block;min-width:1.6rem;color:var(--muted);font-size:.8rem}
tr.gone td:first-child{color:var(--muted)}

/* export */
.seg{display:inline-flex;gap:2px;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:3px;align-self:flex-start}
.seg button{border:0;background:transparent;border-radius:999px;padding:7px 16px;font-weight:500;font-size:.9rem;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.exwrap{display:flex;flex-direction:column;gap:12px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:9px 18px;font-weight:700;font-size:.92rem;text-decoration:none}
.btn.primary{background:var(--copper);border-color:var(--copper);color:var(--surface)}
.btn.danger{background:var(--rust);border-color:var(--rust);color:var(--surface)}
.btn:disabled{opacity:.5}
.actions .hint{flex-basis:100%}
.preview{background:var(--desk);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;align-items:center;gap:16px;min-height:220px;justify-content:center}
.paper{display:block;width:100%;max-width:520px;height:auto;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.12),0 8px 24px rgba(0,0,0,.12)}
.paper.land{max-width:100%}
.pv-wait{color:var(--muted);font-size:.9rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}

/* settings */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:12px}
.panel h2{margin:0;font-size:1rem;font-weight:800}
.panel p{margin:0}
.namelist{list-style:none;margin:0;padding:0}
.namelist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0}
.namelist li + li{border-top:1px solid var(--line)}
.namelist input{min-width:0;width:100%;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:7px 10px;font-weight:700}
.del{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:7px 14px;font-size:.86rem;color:var(--rust)}
.del.confirm{background:var(--rust);border-color:var(--rust);color:var(--surface)}
.addform{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.addform input{min-width:0;border:1px solid var(--line-strong);background:var(--bg);border-radius:999px;padding:8px 14px}
.addform button{border:0;background:var(--copper);color:var(--surface);border-radius:999px;padding:8px 18px;font-weight:700}
.confirmbox{border:1px solid var(--amber);background:var(--amber-soft);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:10px}
.hint{margin:0;color:var(--muted);font-size:.84rem}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;color:var(--muted)}
.kv b{color:var(--ink);font-weight:500}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--bg);border-radius:999px;padding:8px 10px 8px 18px;box-shadow:0 6px 24px rgba(0,0,0,.18);font-size:.9rem;max-width:calc(100% - 32px)}
.toast button{border:0;background:var(--copper);color:var(--surface);border-radius:999px;padding:6px 16px;font-weight:700}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.pm:active{transform:none}}

/* v2: times, reasons, sheet, lock, rules */
.times{grid-area:times;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;min-width:0}
.tf{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted)}
.tf input{border:1px solid var(--line-strong);background:var(--bg);border-radius:8px;padding:4px 8px;min-width:0;width:8.6rem}
.mini{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:5px 12px;font-size:.84rem;font-weight:700}
.chip{display:inline-flex;align-items:center;border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:700}
.chip.l{background:var(--amber-soft);color:var(--amber)}
.chip.ot{background:var(--patina-soft);color:var(--patina)}
.chip.ea{background:var(--rust-soft);color:var(--rust)}
.why{flex-wrap:wrap}
.why .picks{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px}
.pick{border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:4px 12px;font-size:.82rem}
.pick[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.ov{position:fixed;inset:0;z-index:30;background:rgba(10,14,12,.45);display:flex;align-items:flex-end;justify-content:center}
.ov .panel{width:100%;max-width:560px;border-radius:16px 16px 0 0;padding:16px max(16px,env(safe-area-inset-left,0px)) calc(16px + env(safe-area-inset-bottom,0px));max-height:85vh;overflow-y:auto;box-shadow:0 -8px 32px rgba(0,0,0,.2)}
.ov .panel h3{margin:0;font-size:1.05rem}
.ov .panel h3 .neg{color:var(--rust)} .ov .panel h3 .pos{color:var(--patina)}
.sheetchips{display:flex;flex-wrap:wrap;gap:8px}
.sheetchips button{border:1px solid var(--line-strong);background:var(--bg);border-radius:12px;padding:10px 14px;font-size:.92rem;text-align:right}
.sheetchips.neg button:active{background:var(--rust-soft)} .sheetchips.pos button:active{background:var(--patina-soft)}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted)}
.brandrow{display:flex;align-items:center;gap:10px}
.lock{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.lock h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:2rem;color:var(--copper)}
.lock p{margin:0;color:var(--muted)}
.dots{display:flex;gap:14px;direction:ltr}
.dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-strong);display:block}
.dots i.on{background:var(--copper);border-color:var(--copper)}
.pad{direction:ltr;display:grid;grid-template-columns:repeat(3,72px);gap:12px}
.pad button{height:64px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:1.5rem;font-weight:500}
.pad button:active{background:var(--copper-soft)}
.pad .blank{visibility:hidden}
.err{color:var(--rust)!important;font-weight:700;min-height:1.6em}
.linkish{border:0;background:transparent;color:var(--copper);font-weight:700;padding:6px}
.rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rules li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.rules select,.rules input{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:5px 8px}
.rules input.n{width:4rem;text-align:center}
.rules input.amt{width:8.5rem;text-align:left;direction:ltr}
.rules .del{margin-inline-start:auto}
.chiplist{display:flex;flex-wrap:wrap;gap:6px}
.chiplist span{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line-strong);border-radius:999px;padding:3px 4px 3px 10px;font-size:.84rem;background:var(--bg)}
.chiplist span button{border:0;background:transparent;color:var(--rust);font-size:1rem;line-height:1;padding:2px 6px}
.pcat{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.pcat h3{margin:0;font-size:.9rem}
.grid2{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.grid2 input{border:1px solid var(--line-strong);background:var(--bg);border-radius:8px;padding:5px 8px;width:8.6rem}
.grid2 input.n{width:5rem;text-align:center}
.namelist .shift{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.82rem;color:var(--muted)}
.namelist .shift input{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:3px 6px;width:8.6rem}
.eom{display:flex;align-items:center;gap:12px;background:var(--copper-soft);border:1px solid var(--copper);border-radius:var(--r);padding:10px 14px}
.eom b{font-family:var(--font-display);font-weight:400;font-size:1.3rem;color:var(--copper)}
.money.pos{color:var(--patina)} .money.neg{color:var(--rust)}
.recovery{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.4rem;letter-spacing:.12em;direction:ltr;text-align:center;background:var(--bg);border:1px dashed var(--copper);border-radius:var(--r);padding:10px}
.pinrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pinrow input{border:1px solid var(--line-strong);background:var(--bg);border-radius:8px;padding:6px 10px;width:8rem;text-align:center;letter-spacing:.3em;direction:ltr}
.pinrow select{border:1px solid var(--line-strong);background:var(--bg);border-radius:8px;padding:6px 8px}
@media (max-width:620px){
  .counts{gap:4px} .count b{font-size:1.35rem} .count span{font-size:.72rem}
  .tf input{width:8.2rem}
}

/* v3: online panels, management, analytics */
:root{--c-p:#1baf7a;--c-v:#2a78d6;--c-a:#eb6834;--c-1:#2a78d6;--c-2:#eb6834;--ok:#1F6E5C}
@media (prefers-color-scheme: dark){:root{--c-p:#199e70;--c-v:#3987e5;--c-a:#d95926;--c-1:#3987e5;--c-2:#d95926;--ok:#62C2AB}}
.top{align-items:stretch}
.brandrow{justify-content:space-between;width:100%}
.hdr-tools{display:flex;align-items:center;gap:8px}
.sync{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font-size:.8rem;font-weight:700;color:var(--muted);white-space:nowrap}
.sync i{width:8px;height:8px;border-radius:50%;background:currentColor}
.sync.ok{color:var(--ok)} .sync.warn{color:var(--amber);border-color:var(--amber-line)} .sync.bad{color:var(--rust);border-color:var(--rust-line)}
.tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;border:1px solid var(--line-strong);background:var(--surface);border-radius:999px;padding:5px 14px;font-size:.86rem;white-space:nowrap}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.grp{padding:6px 14px;background:var(--bg);color:var(--copper);font-size:.8rem;font-weight:800;border-top:1px solid var(--line)}
.grp:first-of-type{border-top:0}
.row + .grp{border-top:1px solid var(--line)}
.monthbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;text-align:center}
/* auth */
.auth{min-height:70vh;display:flex;align-items:center;justify-content:center}
.authcard{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:12px}
.authcard h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:2rem;color:var(--copper);text-align:center}
.authcard .sub{margin:0;text-align:center;color:var(--muted)}
.vform{display:flex;flex-direction:column;gap:12px}
.tf.col{flex-direction:column;align-items:stretch;gap:4px;font-size:.86rem}
.tf.col input{width:100%;padding:9px 12px}
.vform .btn{justify-content:center}
.ck{display:flex;align-items:center;gap:8px;font-size:.88rem}
.ck input{width:18px;height:18px;flex:none}
/* management */
.seg.wrap{display:flex;flex-wrap:wrap;border-radius:14px}
.seg.wrap button{padding:6px 12px;font-size:.86rem}
.subh{margin:6px 0 0;font-size:.92rem;font-weight:800}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.plist li{padding:10px 0;display:flex;flex-direction:column;gap:10px}
.plist li + li{border-top:1px solid var(--line)}
.plist li.off .pinfo b{color:var(--muted);text-decoration:line-through}
.prow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:start}
.dot{width:10px;height:10px;border-radius:50%;background:var(--line-strong);margin-top:7px}
.dot.on{background:var(--ok)}
.pinfo{display:flex;flex-direction:column;min-width:0;font-size:.86rem;color:var(--muted)}
.pinfo b{color:var(--ink);font-size:1rem}
.pinfo .tag{font-size:.72rem;font-weight:600;padding:1px 6px;border-radius:6px;background:var(--amber-soft);color:var(--amber);margin-inline-start:6px;vertical-align:middle}
.pform{display:flex;flex-direction:column;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.pform .grid2 input,.pform .grid2 select{width:11rem;border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:6px 10px}
.pform select{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:6px 10px}
.pform .pinrow input{letter-spacing:normal;text-align:right;direction:rtl;flex:1;min-width:10rem;width:auto}
.pform > input{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:8px 12px}
.checks{display:flex;flex-wrap:wrap;gap:6px 14px}
.checks .ck.d1{padding-inline-start:12px} .checks .ck.d2,.checks .ck.d3{padding-inline-start:24px}
.seclist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.seclist li{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.seclist li.d1{padding-inline-start:20px} .seclist li.d2,.seclist li.d3{padding-inline-start:40px}
.seclist input{flex:1 1 10rem;min-width:0;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:6px 10px;font-weight:700}
.mini.danger{color:var(--rust);border-color:var(--rust-line)}
.linkbox{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;background:var(--bg);border:1px dashed var(--line-strong);border-radius:8px;padding:8px 10px;word-break:break-all}
.loglist{list-style:none;margin:0;padding:0;font-size:.86rem}
.loglist li{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:4px 10px;padding:7px 0;align-items:baseline}
.loglist li + li{border-top:1px solid var(--line)}
.loglist time{color:var(--muted);font-size:.78rem}
.loglist span{color:var(--muted)}
.namelist li > .btn{font-size:.82rem;padding:6px 12px;max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.namelist li > .pform{grid-column:1/-1}
details summary{cursor:pointer;color:var(--copper);font-weight:700;font-size:.9rem}
/* analytics */
.anbar{display:flex;flex-direction:column;gap:10px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.stat span{font-size:.8rem;color:var(--muted)}
.stat b{font-size:1.45rem;font-weight:700;line-height:1.3}
.stat i{font-style:normal;font-size:.78rem;color:var(--muted)}
.charts{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:760px){.charts{grid-template-columns:1fr 1fr}}
.chart{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.chart figcaption{display:flex;flex-direction:column}
.chart figcaption b{font-size:.92rem}
.chart figcaption span{font-size:.78rem;color:var(--muted)}
.cv{width:100%;height:auto;display:block;overflow:visible;direction:ltr}
.cv .grid{stroke:var(--line);stroke-width:1}
.cv .base{stroke:var(--line-strong);stroke-width:1}
.cv text{fill:var(--muted);font-family:var(--font-ui);font-size:12px}
.cv text.ax{text-anchor:start} .cv text.ax.mid{text-anchor:middle}
.cv text.lb{fill:var(--ink);text-anchor:end;font-size:13px}
.cv text.val{fill:var(--ink);text-anchor:end;font-size:12px;font-weight:700}
.cv .hit{fill:transparent;cursor:pointer;outline:none}
.cv .hit:hover,.cv .hit:focus{fill:var(--ink);fill-opacity:.05}
.s-p{fill:var(--c-p)} .s-v{fill:var(--c-v)} .s-a{fill:var(--c-a)} .s1{fill:var(--c-1)} .s2{fill:var(--c-2)}
.lg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.8rem;color:var(--muted)}
.lg span{display:inline-flex;align-items:center;gap:6px}
.sw{width:10px;height:10px;border-radius:3px;display:inline-block}
.sw.s-p{background:var(--c-p)} .sw.s-v{background:var(--c-v)} .sw.s-a{background:var(--c-a)} .sw.s1{background:var(--c-1)} .sw.s2{background:var(--c-2)}
.tip{position:absolute;z-index:40;background:var(--ink);color:var(--bg);border-radius:8px;padding:6px 10px;font-size:.82rem;max-width:260px;pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.lbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.lb-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.lb-card h4{margin:0 0 6px;font-size:.9rem}
.lb-card ol{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:4px;font-size:.88rem}
.lb-card li{display:list-item}
.lb-card li span{margin-inline-end:8px}
.lb-card li b{float:left;font-weight:700}
.tview{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.tview .tablewrap{margin-top:8px;border:0}
@media (max-width:620px){
  .tabs button{flex:none}
  .brand h1{font-size:1.7rem}
  .prow{grid-template-columns:auto minmax(0,1fr)}
  .prow > .btn,.prow > .hint{grid-column:2}
}
.marks .mr{min-width:0;color:var(--ink);font-size:.9rem}
.prow > .btn{justify-self:start}
.note bdi,.hint bdi,.why bdi{white-space:nowrap}
/* 4.0: unsent marker, closed months, the authenticator setup, the audit trail */
.pend{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:0 8px;font-size:.72rem;font-weight:700;background:var(--amber-soft);color:var(--amber);text-decoration:none}
.pend::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
.note svg.i,.panel h2 svg.i,.monthbar svg.i,.subh svg.i{width:1em;height:1em;vertical-align:-.15em}
.periodp .confirmbox{margin-top:8px}
.qr{display:flex;justify-content:center;margin:10px 0}
.qr svg{max-width:240px;height:auto;border-radius:8px;border:1px solid var(--line)}
.steps{margin:6px 0 10px;padding-inline-start:20px;color:var(--muted);font-size:.9rem;line-height:1.9}
.loglist li.warn{border-inline-start:3px solid var(--amber);padding-inline-start:8px}
.loglist li .mini{margin-inline-start:auto}
button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed}
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}