:root{
  --bg:#f6f7f5; --panel:#ffffff; --ink:#1b2321; --muted:#667370; --line:#e1e6e3; --accent:#0f766e; --accent-ink:#ffffff; --accent-soft:#dff3ef;
  --red:#b42318; --red-soft:#fde8e6; --green:#157f3b; --green-soft:#e1f4e7; --amber:#9a5b00; --amber-soft:#fff1d6; --blue:#245a9e; --blue-soft:#e3eefb;
  --shadow:0 1px 2px rgba(20,30,28,.06),0 4px 14px rgba(20,30,28,.05); --r:12px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#111715; --panel:#1a2220; --ink:#e8efec; --muted:#98a7a2; --line:#2b3633; --accent:#2fb5a7; --accent-ink:#06211e; --accent-soft:#17403c;
  --red:#ff8a7a; --red-soft:#3d1f1b; --green:#5bd68a; --green-soft:#17331f; --amber:#f0b45a; --amber-soft:#3a2c10; --blue:#8bb8f0; --blue-soft:#182a40; --shadow:none;}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-variant-numeric:tabular-nums}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
h1{font-size:1.6rem;margin:0;line-height:1.2} h2{font-size:1.1rem;margin:1.6rem 0 .6rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem} h3{font-size:1rem;margin:0}
p{margin:.4rem 0}
.muted{color:var(--muted)} .lead{font-size:1.05rem}
button,input,select,textarea{font:inherit;color:inherit}
input[type=text],input[type=search],input[type=password],input[type=number],input[type=date],select,textarea{width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px;background:var(--panel);min-height:44px}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:1px}
textarea{resize:vertical}
.app{max-width:1000px;margin:0 auto;padding:0 16px 96px}
.top{display:flex;align-items:center;gap:14px;padding:14px 0;position:sticky;top:0;background:var(--bg);z-index:5;border-bottom:1px solid var(--line);margin-bottom:12px}
.brand{font-weight:700;font-size:1.2rem;color:var(--ink);letter-spacing:.2px}
.tabs{display:flex;gap:4px;flex:1}
.tabs a{padding:.5rem .8rem;border-radius:10px;color:var(--muted);font-weight:600;position:relative;white-space:nowrap}
.tabs a:hover{text-decoration:none;background:var(--panel)}
.tabs a.on{background:var(--accent-soft);color:var(--accent)}
.badge-n{display:inline-block;margin-left:6px;min-width:1.4em;padding:0 .4em;border-radius:99px;background:var(--amber);color:#fff;font-size:.75rem;line-height:1.4em;text-align:center}
.who{color:var(--muted);font-weight:600;padding:.5rem .6rem;border-radius:10px} .who.on{background:var(--accent-soft);color:var(--accent)}
/* header on two rows at every width: logo, Stream switch and name on top, the tabs below (eight tabs plus the switch never fit in one row) */
.top{flex-wrap:wrap;gap:6px 10px} .tabs{order:3;flex-basis:100%;overflow-x:auto;scrollbar-width:none;margin:0 -4px} .tabs a{padding:.5rem .65rem}
.brand{margin-right:auto}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 14px;flex-wrap:wrap}
.head-actions{display:flex;gap:8px;align-items:center} .head-actions.wrap{flex-wrap:wrap;margin:10px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.5rem 1rem;border:1px solid var(--line);background:var(--panel);border-radius:10px;font-weight:600;cursor:pointer;color:var(--ink);text-decoration:none}
.btn:hover{border-color:var(--accent);text-decoration:none} .btn:disabled{opacity:.55;cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .btn.primary:hover{filter:brightness(1.07)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.danger-ghost{color:var(--red);background:transparent}
.btn.small{min-height:36px;padding:.25rem .7rem;font-size:.92rem} .btn.block{width:100%}
.icon-btn{border:0;background:transparent;font-size:1.5rem;line-height:1;width:40px;height:40px;border-radius:10px;cursor:pointer;color:var(--muted)} .icon-btn:hover{background:var(--line)}
.icon-btn.plus{color:var(--accent);font-weight:700;font-size:1.6rem}
.row{display:flex;gap:8px;align-items:center} .row>*{min-width:0} .row.wrap{flex-wrap:wrap}
.weeknav{display:flex;gap:8px;align-items:center;margin-bottom:6px} .range{font-weight:700;margin-left:6px;font-size:1.05rem}
.summary{color:var(--muted);margin:2px 0 12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{display:inline-block;padding:.05rem .55rem;border-radius:99px;background:var(--line);color:var(--muted);font-size:.8rem;font-weight:600;margin-left:6px;vertical-align:middle;white-space:nowrap}
.pill.warn{background:var(--amber-soft);color:var(--amber)} .pill.bad{background:var(--red-soft);color:var(--red)}
.days{display:grid;gap:10px}
.day{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:6px 10px 8px;box-shadow:var(--shadow)}
.day.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.day-head{display:flex;align-items:center;gap:6px;min-height:40px} .day-head .plus{margin-left:auto}
.none{color:var(--muted);padding:6px 4px 8px;font-size:.95rem}
.lesson{display:flex;gap:12px;align-items:center;padding:10px 8px;border-radius:10px;border-top:1px solid var(--line);cursor:pointer}
.lesson:first-of-type{border-top:0} .lesson:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.lesson .time{width:54px;flex:none;text-align:center;line-height:1.15} .lesson .time b{display:block;font-size:1.1rem} .lesson .time small{color:var(--muted)}
.lesson .main{flex:1;min-width:0} .lesson .name{font-weight:650;overflow-wrap:anywhere} .sub{color:var(--muted);font-size:.9rem}
.lesson .side{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none} .lesson .side small{color:var(--muted)}
.lesson.cancelled .name,.lesson.cancelled .time b{text-decoration:line-through;color:var(--muted)}
.lesson.needs{background:var(--amber-soft)} .lesson.clash{outline:2px solid var(--red);outline-offset:-2px}
.lesson .qa{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.badge{display:inline-block;padding:.1rem .6rem;border-radius:99px;font-size:.82rem;font-weight:650;white-space:nowrap}
.badge.scheduled{background:var(--blue-soft);color:var(--blue)} .badge.completed{background:var(--green-soft);color:var(--green)}
.badge.cancelled{background:var(--red-soft);color:var(--red)} .badge.interrupted{background:var(--amber-soft);color:var(--amber)}
.cards{display:grid;gap:8px}
.card{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;color:var(--ink);box-shadow:var(--shadow)}
.card:hover{border-color:var(--accent);text-decoration:none} .card .grow{flex:1;min-width:0} .card .name{font-weight:650;overflow-wrap:anywhere}
.card .right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.bal{font-weight:700;white-space:nowrap} .bal.owes{color:var(--red)} .bal.prepaid{color:var(--green)} .bal.zero{color:var(--muted);font-weight:600} .bal.big{font-size:1.5rem} .bal.small{font-size:.85rem}
.totals{display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap} .totals>div{flex:1;min-width:150px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px} .totals small{display:block;color:var(--muted)} .totals b{font-size:1.25rem} b.owes{color:var(--red)} b.prepaid{color:var(--green)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px} .toolbar .row{flex:1;min-width:240px} .toolbar input{flex:1}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--line);padding:3px;border-radius:12px}
.segbtn{border:0;background:transparent;padding:.45rem .9rem;border-radius:9px;font-weight:600;cursor:pointer;color:var(--muted);min-height:38px} .segbtn.on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.back{display:inline-block;margin:4px 0 8px;font-weight:600}
.profile-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap} .balbox{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0} .stats-row>div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px;text-align:center} .stats-row b{display:block;font-size:1.4rem} .stats-row small{color:var(--muted);font-size:.8rem}
@media (max-width:560px){.stats-row{grid-template-columns:repeat(2,1fr)}}
.cols{display:grid;grid-template-columns:1.5fr 1fr;gap:20px} @media (max-width:820px){.cols{grid-template-columns:1fr}}
.slot{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:6px}
.hrow{display:flex;gap:10px;align-items:center;padding:9px 10px;border-bottom:1px solid var(--line);cursor:pointer;flex-wrap:wrap} .hrow:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.hrow .d{width:140px;flex:none;white-space:nowrap} .hrow .r{flex:1;min-width:80px;font-size:.92rem} .hrow .p{margin-left:auto;font-weight:600} .hrow.wide .who{width:160px;flex:none;font-weight:600}
.listbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.contact{display:flex;align-items:center;gap:8px;padding:4px 0} .ctype{width:76px;color:var(--muted);font-size:.85rem;text-transform:capitalize} .cval{flex:1;overflow-wrap:anywhere}
.notes{white-space:pre-wrap;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px}
.empty{padding:40px 16px;text-align:center;color:var(--muted)} .empty.ok{color:var(--green);font-weight:600} .empty.bad{color:var(--red)}
.review-bar{margin:8px 0 12px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:6px 16px 16px;margin-bottom:14px}
.reason-row{display:flex;gap:10px;align-items:center;margin:6px 0;flex-wrap:wrap} .reason-row input[type=text]{flex:1;min-width:180px}
/* forms & modal */
.form{display:grid;gap:14px} .form.tight{gap:10px;padding:10px;border:1px dashed var(--line);border-radius:10px}
.field .lbl,.lbl{display:block;font-weight:650;margin-bottom:5px;font-size:.95rem} .hint{color:var(--muted);font-size:.85rem;margin-top:4px}
.check{display:flex;gap:8px;align-items:center;cursor:pointer} .check input{width:20px;height:20px;accent-color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .chips.small{margin-top:6px}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:99px;padding:.35rem .85rem;cursor:pointer;font-weight:600;min-height:38px} .chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .chip.ghost{border-style:dashed;color:var(--muted)}
.chips.small .chip{min-height:30px;padding:.15rem .65rem;font-size:.85rem;font-weight:500}
.dur-custom{width:84px !important;min-height:38px !important} .dur-custom.wide{width:170px !important}
.inline-add{display:inline-flex;gap:6px;align-items:center}
.timef{display:flex;gap:6px;align-items:center;font-weight:700} .timef select{width:86px}
.tz-info{display:block;color:var(--muted);font-size:.85rem;margin-top:4px} .tz-info.bad{color:var(--red)}
.preview{background:var(--accent-soft);border-radius:10px;padding:10px 12px;display:grid;gap:3px} .preview:empty{display:none} .note{color:var(--amber);font-size:.9rem}
.pricechips{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px}
.pc{border:2px solid var(--line);background:var(--panel);border-radius:12px;padding:10px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:68px} .pc b{font-size:1.3rem} .pc small{color:var(--muted)} .pc.on,.pc input.on{border-color:var(--accent);background:var(--accent-soft)} .pc.custom{cursor:default} .pc.custom input{text-align:center;min-height:36px;padding:.2rem}
.money{max-width:160px}
.modal-back{position:fixed;inset:0;background:rgba(10,18,16,.55);display:flex;align-items:flex-start;justify-content:center;padding:4vh 12px;overflow:auto;z-index:50}
.modal{background:var(--panel);border-radius:16px;width:100%;max-width:460px;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:pop .14s ease-out} .modal.wide{max-width:560px}
@keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 8px 0 18px} .modal-head h2{margin:0;font-size:1.2rem}
.modal-body{padding:10px 18px 4px} .modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px 16px;flex-wrap:wrap;position:sticky;bottom:0;background:var(--panel);border-radius:0 0 16px 16px}
.form-error{color:var(--red);font-weight:600;margin-top:10px;min-height:0;overflow-wrap:anywhere} .form-error:empty{display:none}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0} .kv dt{color:var(--muted)} .kv dd{margin:0;overflow-wrap:anywhere}
details{margin:2px 0} summary{cursor:pointer;font-weight:650;padding:6px 0}
.row select{width:auto;min-width:92px}
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;display:grid;gap:8px;z-index:80;width:min(92vw,420px);pointer-events:none}
.toast{background:var(--ink);color:var(--bg);padding:.7rem 1rem;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.3);font-weight:600;transition:opacity .4s} .toast.bad{background:var(--red);color:#fff} .toast.out{opacity:0}
.login{max-width:360px;margin:12vh auto 0;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:16px;display:grid;gap:14px;box-shadow:var(--shadow)} .logo{font-size:1.6rem;font-weight:700;text-align:center}
/* charts */
.bignum b{font-size:2.6rem;margin-right:.3rem} .bignum span{color:var(--muted)}
.chartbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:4px 16px 16px;margin:12px 0}
.bars.v{display:flex;gap:10px;align-items:flex-end;min-width:min-content} .bars.v .bar{flex:1;min-width:46px;text-align:center;display:flex;flex-direction:column;align-items:center}
.bars.v .val{font-weight:700;margin-bottom:3px} .bars.v .col{height:150px;width:100%;display:flex;align-items:flex-end;justify-content:center;border-bottom:2px solid var(--line)}
.bars.v .col i{display:block;width:70%;max-width:46px;background:var(--accent);border-radius:6px 6px 0 0;min-height:2px}
.bars.v .lab{font-weight:650;margin-top:4px} .bars.v .sub{font-size:.75rem;white-space:nowrap}
.scrollx{overflow-x:auto;padding-bottom:6px}
.hbar{display:flex;align-items:center;gap:10px;margin:7px 0} .hbar .lab{width:150px;flex:none;overflow-wrap:anywhere} .hbar .track,.relrow .track{flex:1;height:14px;background:var(--line);border-radius:8px;overflow:hidden} .hbar .track i,.relrow .track i{display:block;height:100%;background:var(--accent);border-radius:8px} .hbar .val{width:34px;text-align:right;font-weight:700}
.relrow{display:flex;gap:10px;align-items:center;padding:9px 4px;border-bottom:1px solid var(--line);color:var(--ink)} .relrow:hover{text-decoration:none;background:color-mix(in srgb,var(--accent) 7%,transparent)} .relrow .n{width:170px;flex:none;font-weight:600;overflow-wrap:anywhere} .relrow .pct{width:46px;text-align:right;font-weight:700} .relrow .cnt{width:70px;text-align:right;font-size:.85rem}
@media (max-width:560px){.relrow .n{width:110px}.hbar .lab{width:100px}.hrow .d{width:auto;flex:1 1 130px}.hrow .r{flex-basis:100%;order:5}.hrow.wide .who{width:100%}}
@media print{.top,#toasts{display:none}}

/* ---- palette for charts (categorical slots 1-4 of the validated palette) */
:root{--s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--s4:#eda100}
@media (prefers-color-scheme:dark){:root{--s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500}}

/* ---- avatars */
.av{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--s,36px);height:var(--s,36px);border-radius:50%;overflow:hidden;
  background:hsl(var(--h,200) 45% 86%);color:hsl(var(--h,200) 45% 28%);font-weight:700;font-size:calc(var(--s,36px)*.38);line-height:1;user-select:none}
@media (prefers-color-scheme:dark){.av{background:hsl(var(--h,200) 30% 26%);color:hsl(var(--h,200) 60% 85%)}}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.who-box{display:flex;gap:14px;align-items:center}
.real{display:block;color:var(--muted);font-weight:500;font-size:.85rem}
.real-name{color:var(--muted);font-size:.95rem} .real-name b{color:var(--ink)}
.photo-row{display:flex;gap:14px;align-items:center}
.card .name .real{display:inline;margin-left:8px}

/* ---- stats */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.tile small{color:var(--muted)} .tile b{font-size:1.45rem;line-height:1.2;overflow-wrap:anywhere} .tile .muted{font-size:.82rem}
.rangebar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:4px 0} .rangebar label{display:block;min-width:150px;flex:1;max-width:240px} .rangebar .lbl{margin-bottom:3px;font-weight:600;font-size:.85rem;color:var(--muted)}
.rangenote{margin:4px 0 8px;font-size:.9rem}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0;font-size:.88rem;color:var(--muted)} .legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-1px}
.chartbox.tight{padding:10px 12px}
.bars.stacked .col{align-items:flex-end}
.stack{display:flex;flex-direction:column-reverse;width:70%;max-width:46px;gap:2px;border-radius:5px 5px 0 0;overflow:hidden} .stack i{display:block;min-height:3px}
.stack.h{flex-direction:row;height:20px;max-width:none;border-radius:5px;gap:2px}
.bars.v .bar{cursor:default} .bars.v .bar:hover .col i,.bars.v .bar:hover .stack i{filter:brightness(1.12)}
.srows{display:grid;gap:6px}
.srow{display:grid;grid-template-columns:minmax(120px,210px) 1fr 40px;gap:10px;align-items:center;padding:4px 6px;border-radius:10px;color:var(--ink)} .srow:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);text-decoration:none}
.srow .who{display:flex;gap:8px;align-items:center;min-width:0;font-weight:600} .srow .who span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srow .track{height:20px;display:flex} .srow .num{text-align:right;font-weight:700}
@media (max-width:560px){.srow{grid-template-columns:100px 1fr 32px}}
.ranking{list-style:none;margin:8px 0;padding:0;display:grid;gap:2px}
.rk{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:10px;color:var(--ink)} .rk:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);text-decoration:none}
.rk .pos{width:30px;height:30px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted);background:var(--line)} .rk .pos.top{background:var(--accent);color:var(--accent-ink)}
.rk .nm{flex:1;min-width:0;font-weight:600;display:flex;flex-direction:column;gap:4px} .rk .track{display:block;height:8px;background:var(--line);border-radius:6px;overflow:hidden} .rk .track i{display:block;height:100%;background:var(--s1);border-radius:6px}
.rk .v{text-align:right;font-weight:700;display:flex;flex-direction:column;white-space:nowrap} .rk .v small{color:var(--muted);font-weight:500}
h2 .inl{font-size:.9rem;font-weight:500;display:flex;gap:8px;align-items:center} h2 .inl select{width:auto;min-height:38px}
.tablewrap{margin-top:12px} .dt{border-collapse:collapse;width:100%;font-size:.9rem} .dt th,.dt td{padding:6px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap} .dt .n{text-align:right}
.tip{position:fixed;z-index:90;pointer-events:none;background:var(--ink);color:var(--bg);padding:.4rem .65rem;border-radius:8px;font-size:.85rem;max-width:300px;opacity:0;transition:opacity .08s} .tip.on{opacity:1}
/* ---- past lessons */
.note-box{background:var(--accent-soft);border-radius:10px;padding:10px 14px;margin:12px 0;display:grid;gap:4px}
.cu-head,.cu-row{display:grid;grid-template-columns:155px 150px 105px 1.3fr 125px 40px;gap:8px;align-items:center}
.cu-head{font-weight:650;font-size:.85rem;color:var(--muted);padding:0 4px} .cu-head span:last-child{grid-column:5 / span 2}
.cu-rows{display:grid;gap:6px;margin-top:4px} .cu-row{padding:6px 4px;border-top:1px solid var(--line)} .cu-row.cancelled{background:color-mix(in srgb,var(--red-soft) 55%,transparent);border-radius:8px}
.cu-row .c-out{display:grid;gap:6px} .cu-row .c-price{display:flex;gap:4px;align-items:center} .cu-row .money{max-width:90px;min-height:40px}
.cu-row select,.cu-row input[type=date]{min-height:40px} .cu-row .timef select{width:68px;padding:.5rem .3rem}
.cu-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
@media (max-width:860px){.cu-head{display:none} .cu-row{grid-template-columns:1fr 1fr 40px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:10px} .cu-row .c-dur,.cu-row .c-out{grid-column:1 / span 2} .cu-row .c-price{grid-column:1} .cu-row .icon-btn{grid-column:3;grid-row:1}}

/* ---- add times / who counts / head to head */
.tm-row{display:grid;grid-template-columns:150px 110px auto 120px;gap:10px;align-items:center;padding:6px 4px;border-top:1px solid var(--line)} .tm-row.cancelled{background:color-mix(in srgb,var(--red-soft) 45%,transparent);border-radius:8px}
.tm-row select,.tm-fill select{min-height:40px} .tm-row .timef select,.tm-fill .timef select{width:68px;padding:.5rem .3rem}
.tm-fill{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0;padding:10px 12px;border:1px dashed var(--line);border-radius:10px}
@media (max-width:560px){.tm-row{grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:12px;margin-bottom:6px;padding:10px}}
.btn.warn{background:var(--amber-soft);color:var(--amber);border-color:transparent} .btn.on{border-color:var(--accent);color:var(--accent);font-weight:650}
.pill.few{background:transparent;border:1px dashed var(--muted);font-weight:500}
.pick-list{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:4px} .pick{display:flex;gap:10px;align-items:center;padding:6px 8px;border-radius:8px;cursor:pointer} .pick:hover{background:var(--accent-soft)} .pick input{width:18px;height:18px;flex:none}
.chk{display:inline-flex;gap:6px;align-items:center;margin-right:14px;cursor:pointer} .chk input{width:18px;height:18px}
.h2pick .vs{align-self:flex-end;padding-bottom:10px;color:var(--muted);font-weight:700}
.h2head{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.h2side{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--c);min-width:0} .h2side b{overflow-wrap:anywhere} .h2side small{display:block}
.h2row{display:grid;grid-template-columns:1fr minmax(120px,190px) 1fr;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line)} .h2row:first-child{border-top:0}
.h2lab{text-align:center;font-weight:600} .h2lab small{display:block;font-weight:400;color:var(--muted);font-size:.78rem}
.h2cell{display:flex;align-items:center;gap:8px;min-width:0} .h2cell .v{font-weight:700;min-width:3.2em;white-space:nowrap} .h2cell .v.small{font-size:.85rem;font-weight:600} .h2cell .bar{flex:1;height:16px;display:flex;background:var(--line);border-radius:8px;overflow:hidden}
.h2cell.l{flex-direction:row} .h2cell.l .v{text-align:right} .h2cell.l .bar{justify-content:flex-end} .h2cell.r{flex-direction:row-reverse} .h2cell.r .v{text-align:left} .h2cell .bar i{display:block;height:100%;border-radius:8px}
.h2row.dates .h2cell{justify-content:center}
.h2reasons-wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px} .h2reasons h3{display:flex;gap:8px;align-items:center;font-size:1rem;margin:0 0 6px} .sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.h2wd .col.pair{display:flex;gap:2px;align-items:flex-end} .h2wd .col.pair i{flex:1;border-radius:4px 4px 0 0;min-height:0}
@media (max-width:640px){.h2row{grid-template-columns:1fr 1fr;grid-template-areas:"lab lab" "l r"} .h2row .h2lab{grid-area:lab} .h2row .h2cell:first-child{grid-area:l} .h2row .h2cell:last-child{grid-area:r} .h2reasons-wrap{grid-template-columns:1fr}}
.tm-row select,.tm-fill select{width:auto} .tm-row>select,.tm-fill>select{width:112px}
.h2cell .v.small{white-space:normal;text-align:center}
@media (max-width:640px){.h2side{flex-direction:column;text-align:center;gap:6px}.h2side b{font-size:.95rem}.h2row.dates .h2cell{justify-content:center}.h2row{min-width:0}.h2row>*{min-width:0}}
.bars.v.h2wd{min-width:0;gap:4px} .bars.v.h2wd .bar{min-width:0} .h2wd .col.pair i{width:auto;max-width:none}
.timef.t12 select,.cu-row .timef.t12 select,.tm-row .timef.t12 select,.tm-fill .timef.t12 select{width:62px;padding:.5rem .2rem}
.tzbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:6px 0 10px;font-size:.9rem}
.tzbar.on{background:var(--accent-soft,#e8f0fe);border:1px solid var(--accent,#2f6fed);border-radius:10px;padding:8px 12px}
.lesson .side small.fee{color:var(--warn,#b45309);font-weight:600}
.plan-help{margin:0 0 8px} .plan-filters{margin:10px 0}
.plan-list{display:flex;flex-direction:column;gap:8px}
.plan-row{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px;border-left:5px solid var(--line)}
.plan-row.messaged{border-left-color:var(--amber)} .plan-row.scheduled{border-left-color:var(--accent)} .plan-row.skipped{opacity:.65}
.plan-row.skipped .name{text-decoration:line-through}
.plan-row .main{flex:1;min-width:0} .plan-row .name{font-weight:700;color:var(--ink)} .plan-row .sub{color:var(--muted);font-size:.88rem;margin-bottom:6px}
.plan-note{width:100%;min-height:34px;padding:.3rem .6rem;font-size:.9rem}
.pbtns{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.pbtn{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:10px;padding:.45rem .8rem;font-weight:600;cursor:pointer;min-height:40px}
.pbtn.on.messaged{background:var(--amber);border-color:var(--amber);color:#fff} .pbtn.on.scheduled{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .pbtn.on.skipped{background:var(--muted);border-color:var(--muted);color:var(--bg)}
@media (max-width:620px){.plan-row{flex-wrap:wrap}.plan-row .main{flex-basis:calc(100% - 60px)}.pbtns{width:100%;justify-content:stretch}.pbtns .pbtn{flex:1}}
.av.zoomable{cursor:zoom-in}
.pv-back{position:fixed;inset:0;z-index:200;background:rgba(8,12,11,.92);display:flex;flex-direction:column}
.pv-top{display:flex;align-items:center;gap:10px;padding:12px 16px;color:#fff}
.pv-name{font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-btn{border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;border-radius:10px;padding:.4rem .9rem;font:inherit;cursor:pointer}
.pv-btn[hidden]{display:none}
.pv-x{border:0;background:transparent;color:#fff;font-size:2rem;line-height:1;cursor:pointer;padding:0 6px}
.pv-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 12px 16px}
.pv-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.crop-form{align-items:center}
.crop-stage{position:relative;margin:4px auto;border-radius:10px;overflow:hidden;touch-action:none;cursor:grab;background:#fff;user-select:none}
.crop-stage:active{cursor:grabbing}
.crop-cv{display:block}
.crop-mask{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle closest-side,transparent calc(100% - 1px),rgba(0,0,0,.6) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.crop-zoomrow{display:flex;gap:10px;align-items:center;width:min(320px,100%);margin:6px auto 0;font-weight:700}
.crop-zoom{flex:1}
.datef{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.datef .dow{font-size:.82rem;color:var(--muted);font-weight:600;padding-left:2px}
.cu-row .datef .dow,.tm-row .datef .dow{font-size:.72rem}
a.btn.has-note{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.lesson .side{align-items:flex-end;gap:4px}
.lesson .side .btn.small{padding:.2rem .6rem;min-height:30px;font-size:.82rem}
.notelink{font-size:.8rem;font-weight:600;color:var(--accent);border:1px solid var(--accent);border-radius:8px;padding:0 .5rem;margin-left:6px}
.notelink:hover{text-decoration:none;background:var(--accent-soft)}
.av.golink{cursor:pointer}

/* ---- Diary */
:root{--e0:#c9d0cd;--e1:#86b6ef;--e2:#2a78d6;--e3:#104281}
@media (prefers-color-scheme:dark){:root{--e0:#3b4743;--e1:#184f95;--e2:#3987e5;--e3:#9ec5f4}}
a.segbtn{display:inline-flex;align-items:center;text-decoration:none} a.segbtn:hover{text-decoration:none;color:var(--ink)}
.check.inline{display:inline-flex;gap:6px;align-items:center;font-weight:500;cursor:pointer}
.small{font-size:.85rem} .lbl.small{font-weight:600;margin:6px 0 2px}
.daynow{margin:0 0 10px;font-size:1.05rem}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;align-items:start}
.dcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;min-width:0}
.dcard h2{margin:0 0 2px;font-size:1.1rem;justify-content:flex-start}
.dcard.wide{margin-bottom:14px}
.big-line{font-size:1.25rem;font-weight:700}
.bignum b{font-size:2.8rem;line-height:1;font-weight:700}
.dactions{margin-top:2px}
.btn.big{min-height:54px;font-size:1.15rem;padding:.5rem 1.6rem}
.chip.big{min-height:46px;padding:.4rem 1.1rem;font-size:1rem}
.chips.qual .chip{min-width:44px;padding:.3rem .5rem;text-align:center}
.lastline{display:block;text-align:left;width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer;min-height:40px}
.lastline:hover{border-color:var(--accent)} .lastline.static{cursor:default} .lastline.static:hover{border-color:var(--line)}
.smokes{display:flex;flex-wrap:wrap;gap:6px}
.smoke{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:4px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;line-height:1.2;min-width:64px}
.smoke:hover{border-color:var(--accent)} .smoke small{color:var(--muted);font-size:.75rem}
.when{display:grid;gap:6px}
.num-small{width:6.5em}
.toast.with-undo{display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto}
.toast-undo{border:0;background:rgba(127,127,127,.35);color:inherit;font-weight:700;padding:.35rem .9rem;border-radius:8px;cursor:pointer;min-height:36px}
.logbar{justify-content:space-between;margin-bottom:10px}
.loglist{display:grid;gap:6px;margin-bottom:12px}
.logrow{display:flex;justify-content:space-between;gap:10px;align-items:center;text-align:left;width:100%;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;cursor:pointer}
.logrow:hover{border-color:var(--accent)}
.lmain{display:flex;flex-direction:column;min-width:0} .lmain .muted{overflow-wrap:anywhere}
.lright{display:flex;gap:6px;flex:none}
.dbar{display:flex;flex-wrap:wrap;gap:8px 22px;margin:4px 0 14px}
.barlbl{font-size:.85rem;margin-right:2px}
.chart-title{display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;margin:16px 0 4px;font-size:1rem}
.chart-title .check{font-size:.85rem;font-weight:500;color:var(--muted)}
.chartbox{overflow-x:auto;max-width:100%}
svg.chart{display:block;max-width:none}
svg.chart .grid{stroke:var(--line);stroke-width:1} svg.chart .grid.strong{stroke:var(--muted);stroke-dasharray:3 3}
svg.chart .base{stroke:var(--muted);stroke-width:1}
svg.chart .ax{fill:var(--muted);font-size:11px}
svg.chart .hit{fill:transparent}
svg.chart .ln{fill:none;stroke-linecap:round;stroke-linejoin:round}
svg.chart .ln.faint{opacity:.35}
svg.chart .area{opacity:.16}
svg.chart .band{fill:var(--accent);opacity:.13}
svg.chart .dot{stroke:none} svg.chart .dot.ring{stroke:var(--panel);stroke-width:2}
svg.chart .crossline{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
svg.chart .seg-gap{stroke:var(--panel);stroke-width:1.5}
svg.chart .cell.none{fill:var(--line)}
.tip{white-space:pre-line}
.cal-wrap{padding-bottom:8px}
.rankgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 24px;margin-top:10px}
.rank-sep{grid-column:1/-1;margin:6px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:1.05rem}
.rankbox h3{margin-bottom:6px}
.rrow{display:grid;grid-template-columns:minmax(80px,1fr) minmax(40px,.8fr) auto;gap:8px;align-items:center;padding:3px 0;font-size:.92rem}
.rname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rtrack{height:8px;background:var(--line);border-radius:4px;overflow:hidden} .rfill{display:block;height:100%;background:var(--s1);border-radius:4px}
.rnum{font-weight:700;text-align:right;min-width:2.2em} .rnum small{font-weight:500;color:var(--muted)}
details.more summary{cursor:pointer;color:var(--accent);font-size:.9rem;margin-top:4px}
.dt.streaks th{white-space:normal;vertical-align:bottom}
@media (max-width:560px){.dgrid{grid-template-columns:1fr}.dcard{padding:12px}}

.logrow:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent)}
.ltitle{overflow-wrap:anywhere;font-size:.95rem} .ltitle a{font-weight:600}
.rname a{color:inherit;text-decoration:underline}

.kind-tag{display:inline-block;margin-left:8px;padding:0 .5rem;border-radius:99px;font-size:.75rem;font-weight:700;color:#fff;vertical-align:middle} .kind-tag.sex{background:var(--s1)} .kind-tag.masturbation{background:var(--s2)}
.lmain .kind-tag{align-self:flex-start;margin:2px 0}

.btn[hidden]{display:none}
svg.chart .sl{fill:var(--s1)} svg.chart .sl:hover{fill:var(--s2)}

/* Private → Masturbation search & filters */
.mfilter{display:grid;gap:10px;margin-bottom:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.mfgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 10px}
.mfgrid label,.mfgrid .field{margin:0}
.mfoot{justify-content:space-between}
.fcount{font-size:.9rem}

/* Stream mode */
.stream-sw{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-weight:600;font-size:.9rem;padding:.3rem .7rem .3rem .4rem;border-radius:999px;cursor:pointer;white-space:nowrap}
.stream-sw:hover{color:var(--ink)}
.sw-track{width:34px;height:20px;border-radius:999px;background:var(--line);position:relative;flex:none;transition:background .15s}
.sw-dot{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.stream-sw.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.stream-sw.on .sw-track{background:var(--accent)} .stream-sw.on .sw-dot{transform:translateX(14px)}
body.stream .top{box-shadow:inset 0 -3px 0 var(--accent)}
body.stream input.money,body.stream .cval,body.stream p.notes{filter:blur(7px);user-select:none}
body.stream .av.zoomable{cursor:default}
@media (max-width:640px){.stream-sw .sw-label{display:none} .stream-sw{padding:.3rem .4rem}}
.top .tabs{min-width:0;overflow-x:auto;scrollbar-width:none} .top .tabs::-webkit-scrollbar{display:none}

/* Personal pages switch (Diary | Private | ...) */
.subnav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.subnav a{padding:.3rem .95rem;border-radius:999px;font-weight:700;color:var(--muted);font-size:1.2rem;line-height:1.3}
.subnav a:hover{text-decoration:none;color:var(--ink)}
.subnav a.on{background:var(--ink);color:var(--bg)}