/* Accounts: teachers page account bar, /teachers/login|forgot|set-password|account/, /admin/. Uses the tokens from site.css. */

/* logged-in / logged-out pieces; auth.js sets html.kl-in or html.kl-out after asking /api/me */
.kl-in-only{display:none!important}
html.kl-in .kl-in-only{display:block!important}
html.kl-in form.kl-inline.kl-in-only{display:inline!important}
html.kl-in .btn.kl-in-only{display:inline-flex!important}
html.kl-in .kl-out-only{display:none!important}
.kl-inline{display:inline}

.kl-acct{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:12px 16px;margin:24px 0 0}
.kl-acct p{margin:0;font-weight:700;flex:1 1 260px}
.kl-acct svg,.kl-big svg{width:24px;height:24px;vertical-align:-6px;color:var(--leaf)}
.kl-acct .btn{min-height:46px;font-size:16px;padding:8px 18px}
.kl-acct + .wx-hint{margin:12px 0 0}

.kl-login{max-width:560px;padding-top:24px;padding-bottom:24px}
.kl-big{font:600 20px/1.4 var(--f-head)}
.kl-label{display:block;font:600 18px/1.3 var(--f-head);margin:0 0 8px}
.kl-input{display:block;width:100%;min-height:54px;padding:10px 14px;border:3px solid var(--ink);border-radius:16px;background:#fff;color:var(--ink);font:700 20px/1.2 var(--f-body);margin:0 0 14px}
.kl-input:focus{outline:3px solid var(--sky-mid);outline-offset:2px}
.kl-msg{background:#FDE3D6;border:2px solid var(--boot);color:#7A2E07;border-radius:14px;padding:10px 14px;margin:0 0 14px;font-weight:800}
.kl-msg-info{background:var(--sky-2);border-color:var(--sky-mid);color:#0E4B7E}
.kl-help{color:var(--ink-3);margin:6px 0 0}
.kl-note h2{font-size:22px}

/* admin (Zac only, English) */
.kl-admin{padding-top:24px;padding-bottom:24px}
.adm-grid{display:grid;grid-template-columns:1fr;gap:4px 16px}
.adm-grid label{font-weight:800;font-size:15px}
.adm-grid .kl-input{font-size:17px;min-height:46px;margin-top:4px}
.adm-wide{grid-column:1/-1}
@media (min-width:700px){.adm-grid{grid-template-columns:1fr 1fr}}
.adm-btn{min-height:42px;padding:6px 14px;font-size:15px}
.adm-actions{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 16px}
.adm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.adm-table{width:100%;border-collapse:collapse;font-size:15px}
.adm-table th,.adm-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.adm-table th{font:600 14px/1.2 var(--f-head);color:var(--ink-2)}
.adm-st{display:inline-block;font:800 12px/1 var(--f-body);padding:6px 10px;border-radius:999px;background:var(--leaf-2);color:var(--leaf)}
.adm-st-expired,.adm-st-disabled{background:#FDE3D6;color:#7A2E07}
.adm-st-notyet{background:var(--sun-2);color:var(--ink)}
.adm-code{margin-top:16px;background:var(--sun-2);border:3px dashed var(--sun-deep);border-radius:var(--r);padding:14px 16px}
.adm-codetext{font:700 clamp(22px,6vw,32px)/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;user-select:all;-webkit-user-select:all;margin:4px 0 8px}

/* Personal plan (Stripe): teachers page cards + /teachers/thanks/ */
.kl-plans{display:grid;gap:16px;margin:24px 0 0}
@media (min-width:768px){.kl-plans{grid-template-columns:1fr 1fr;align-items:stretch}}
.kl-plans .kl-acct{margin:0;flex-direction:column;align-items:flex-start;justify-content:center;padding:20px}
.kl-plans .kl-acct p{flex:none}
.kl-plans .kl-acct .btn{margin-left:3px}
html.kl-in .kl-plans .kl-acct form.kl-inline.kl-in-only{display:block!important}
.kl-school-line{display:flex;gap:8px;align-items:flex-start;font-weight:700!important;font-size:15px;color:var(--ink-2);margin:4px 0 0!important;padding-top:12px;border-top:2px dashed var(--line);width:100%}
.kl-school-line svg{width:22px;height:22px;flex:none;color:var(--sky-deep);margin-top:1px}
.kl-buy{position:relative;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:20px;border:3px solid var(--sun);scroll-margin-top:90px}
.kl-buy h2{font-size:clamp(26px,6vw,32px);margin:6px 0 2px}
.kl-buy-tag{display:inline-block;font:800 13px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;background:var(--sun);color:var(--ink);padding:7px 12px;border-radius:999px}
.kl-buy-tag .zh{letter-spacing:.12em}
.kl-price{margin:0 0 12px;font:600 18px/1.2 var(--f-head);color:var(--ink-2)}
.kl-price b{font:700 44px/1 var(--f-head);color:var(--ink)}
.kl-buy .checks{margin-bottom:14px}
.kl-buy-form{margin:0 0 4px}
.kl-pay{color:var(--ink-3);margin:4px 0 0}

.kl-thanks .kl-big svg{width:26px;height:26px}
.kl-mono{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;letter-spacing:.04em;white-space:nowrap}
.kl-save{margin:12px 0 16px}
.kl-thanks .checks{margin:0 0 16px}
.kl-spin{display:inline-block;width:22px;height:22px;border:4px solid var(--sky-2);border-top-color:var(--sky-deep);border-radius:50%;vertical-align:-4px;animation:kl-spin 1s linear infinite}
@keyframes kl-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.kl-spin{animation:none}}

/* admin: plan badges + filter */
.adm-plan{display:inline-block;font:800 12px/1 var(--f-body);padding:6px 10px;border-radius:999px;background:var(--sky-2);color:#0E4B7E}
.adm-plan-personal{background:var(--sun-2);color:var(--ink)}
.adm-filter{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px}
.adm-filter .kl-input{margin:0;min-height:42px;font-size:15px;padding:6px 10px;width:auto}
.kl-plans .kl-acct{justify-content:flex-start}
.kl-plans .kl-acct h2{font-size:clamp(26px,6vw,32px);margin:6px 0 2px}
.kl-tag-sky{background:var(--sky-2);color:#0E4B7E}
@media (min-width:768px){.kl-plans .kl-school-line{margin-top:auto!important}}

/* /teachers/account/ (account.js fills it from /api/me) */
.ka{padding-top:24px;padding-bottom:28px}
.ka [hidden]{display:none!important}
.ka-loading{max-width:560px}
.ka-grid{display:grid;gap:18px;align-items:start}
@media (min-width:900px){.ka-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:24px}}
.ka-card{background:var(--card);border-radius:var(--r-l);box-shadow:var(--shadow);padding:20px 18px}
@media (min-width:768px){.ka-card{padding:28px 30px}}
.ka-head{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.ka-avatar{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--sun);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.ka-avatar svg{width:30px;height:30px}
.ka-id{min-width:0}
.ka-id h2{margin:4px 0 0;font-size:clamp(24px,6.4vw,32px);overflow-wrap:anywhere}
.ka-plan{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.ka-badge,.ka-status{display:inline-block;font:800 12px/1 var(--f-body);letter-spacing:.05em;text-transform:uppercase;padding:6px 10px;border-radius:999px}
.ka-badge .zh,.ka-status .zh{letter-spacing:.1em}
.ka-badge-personal{background:var(--sun-2);color:var(--ink)}
.ka-badge-school{background:var(--sky-2);color:#0E4B7E}
.ka-status{background:var(--leaf-2);color:var(--leaf)}
.ka-status-soon{background:#FFF0C2;color:#8A5A00}
.ka-status-end{background:#FDE3D6;color:#7A2E07}

.ka-note{border-radius:14px;padding:12px 14px;margin:0 0 16px;background:#FFF6DA;border:2px solid var(--sun);font-weight:700}
.ka-note p{margin:0}
.ka-note-end{background:#FDE3D6;border-color:var(--boot);color:#7A2E07}
.ka-jump{font-weight:800;white-space:nowrap;color:inherit}

.ka-time{background:var(--paper);border-radius:var(--r);padding:16px;margin:0 0 16px}
.ka-left{margin:0 0 10px;display:flex;align-items:baseline}
.ka-num{font:600 46px/1 var(--f-head);color:var(--ink);letter-spacing:-.01em}
.ka-num-word{font-size:30px}
.ka-unit{font:600 19px/1.2 var(--f-head);color:var(--ink-2)}
.ka-bar{position:relative;height:18px;border-radius:999px;border:2px solid var(--ink);background:#F1E4C8;overflow:hidden}
.ka-fill{display:block;height:100%;width:0;border-radius:999px;background:var(--leaf-mid);box-shadow:inset 0 3px 0 rgba(255,255,255,.45);transition:width .6s cubic-bezier(.3,1.2,.5,1)}
.ka[data-tone="soon"] .ka-fill{background:var(--sun)}
.ka[data-tone="end"] .ka-fill{background:var(--boot)}
.ka-dates{display:flex;justify-content:space-between;gap:12px;margin-top:10px}
.ka-dates span{display:grid;gap:2px}
.ka-dates small{font:800 11px/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ka-dates b{font-size:15px}
.ka-dates .ka-end{text-align:right}

.ka-devices{display:flex;gap:14px;align-items:flex-start;padding:4px 2px 16px}
.ka-ico{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--sky-2);color:var(--sky-deep)}
.ka-ico svg{width:24px;height:24px}
.ka-dev-line{margin:0;font-weight:700}
.ka-dev-line b{font:600 20px/1 var(--f-head)}
.ka-pips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 6px}
.ka-pip{width:16px;height:16px;border-radius:5px;border:2px solid #C9BFAE;background:#fff}
.ka-pip.on{background:var(--sky-mid);border-color:var(--sky-deep)}
.ka-sub{color:var(--ink-3);margin:0}

.ka-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;border-top:2px dashed var(--line);padding-top:16px}
.ka-actions .btn{margin-bottom:6px}
.ka-logout{margin:0}
@media (max-width:599px){.ka-actions .btn,.ka-logout{width:100%}.ka-logout .btn{width:calc(100% - 6px)}}

.ka-renew{background:var(--card);border-radius:var(--r-l);box-shadow:var(--shadow);padding:20px 18px;border:3px solid var(--sun);scroll-margin-top:90px}
.ka[data-plan="school"] .ka-renew{border-color:var(--sky)}
@media (min-width:768px){.ka-renew{padding:24px}}
.ka-renew h2{font-size:clamp(26px,6vw,30px);margin:8px 0 12px}
.ka-renew .checks{margin-bottom:14px}
.ka-renew .checks li b{white-space:nowrap}
.ka-renew > div > p{color:var(--ink-2);font-weight:700}
.ka + .wx-hint,.ka .wx-hint{margin-top:16px}
.kl-acct-btns{display:flex;flex-wrap:wrap;gap:4px 8px}
html.kl-in .kl-acct-btns.kl-in-only{display:flex!important}

/* email + password forms: /teachers/login/, /forgot/, /set-password/, thanks page */
.kl-auth .panel{margin-bottom:18px}
.kl-auth .kl-input{font:600 19px/1.2 var(--f-body)}
.kl-auth .kl-input[type=password]{letter-spacing:.08em}
.kl-auth .kl-input[data-pw][type=text]{letter-spacing:normal}
.kl-input-ro{background:var(--paper);border-color:var(--line);color:var(--ink-2);cursor:default}
.kl-input-ro:focus{outline:none}
.kl-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.kl-label-row .kl-label{margin-bottom:8px}
.kl-forgot{font-weight:800;font-size:15px;white-space:nowrap}
.kl-show{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--ink-2);margin:-4px 0 16px;cursor:pointer;min-height:32px}
.kl-show input{width:20px;height:20px;accent-color:var(--sky-deep);margin:0}
.kl-hint{color:var(--ink-3);margin:-8px 0 14px}
.kl-for{background:var(--sky-2);border-radius:14px;padding:10px 14px;margin:0 0 16px;font-weight:700;color:#0E4B7E}
.kl-for:empty{display:none}
.kl-form .btn-block{margin-top:6px}
.kl-msg-ok{background:var(--leaf-2);border-color:var(--leaf-mid);color:#245A21}
.kl-who{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:10px}
.kl-who li{background:var(--paper);border-radius:14px;padding:12px 14px}
.kl-who b{display:block;font:600 17px/1.3 var(--f-head)}
.kl-who span{color:var(--ink-2);font-size:16px}
.kl-sent{text-align:center}
.kl-sent h2{margin:10px 0 6px}
.kl-sent .kl-acct-btns{justify-content:center}
.kl-mailicon{width:76px;height:76px;margin:4px auto 0;border-radius:50%;display:grid;place-items:center;background:var(--leaf-2);color:var(--leaf);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.kl-mailicon svg{width:38px;height:38px}
.kl-mailicon-warn{background:var(--sun-2);color:#8A5A00}

/* account page: welcome, side column, "Your login", members */
.ka-welcome{display:flex;align-items:center;gap:12px;background:var(--leaf-2);border:2px solid var(--leaf-mid);border-radius:var(--r);padding:12px 16px;margin:0 0 18px;color:#245A21}
.ka-welcome svg{flex:none;width:28px;height:28px;color:var(--leaf)}
.ka-welcome p{margin:0}
.ka-side{display:grid;gap:18px;align-content:start}
.ka-badge-role{background:var(--paper-2);color:var(--ink-2)}
.ka-actions:empty{display:none}
.ka-you{background:var(--card);border-radius:var(--r-l);box-shadow:var(--shadow);padding:20px 18px}
@media (min-width:768px){.ka-you{padding:24px}}
.ka-you h2{font-size:22px;margin:0 0 12px}
.ka-email{display:flex;align-items:center;gap:12px;margin:0 0 12px;min-width:0}
.ka-email b{overflow-wrap:anywhere;font-size:16px}
.ka-ico-sm{width:38px;height:38px}
.ka-ico-sm svg{width:20px;height:20px}
.ka-you .ka-devices{gap:12px;padding:0 0 14px}
.ka-you-btns{display:flex;flex-wrap:wrap;gap:4px 8px;border-top:2px dashed var(--line);padding-top:14px}
.ka-you-btns .btn{min-height:46px;font-size:16px;padding:8px 16px}
@media (max-width:599px){.ka-you-btns > *{flex:1 1 100%}.ka-you-btns .btn{width:calc(100% - 6px)}}
.ka-others{border-top:2px dashed var(--line);margin-top:14px;padding-top:14px}
.ka-others h3{font-size:17px;margin:0 0 8px}
.ka-others ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ka-others li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;background:var(--paper);border-radius:12px;padding:8px 12px}
.ka-other-end{color:var(--ink-2);font-weight:700}
.ka-none{max-width:640px}
.ka-flex{display:flex}
.ka-none-you{margin:0 0 12px}

.ka-members{margin-top:18px;scroll-margin-top:90px}
@media (min-width:900px){.ka-members{margin-top:24px}}
.ka-mhead{display:flex;align-items:flex-start;gap:14px;margin:0 0 16px}
.ka-mtitle{flex:1;min-width:0}
.ka-mtitle h2{margin:2px 0 2px;font-size:clamp(24px,6vw,30px)}
.ka-count{flex:none;margin:0;display:grid;grid-template-columns:auto auto auto;align-items:baseline;gap:0 2px;text-align:right;background:var(--paper);border-radius:14px;padding:8px 12px}
.ka-count b{font:600 26px/1 var(--f-head)}
.ka-count > span{font:600 20px/1 var(--f-head);color:var(--ink-3)}
.ka-count small{grid-column:1/-1;font:800 11px/1.4 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ka-members[data-full="1"] .ka-count{background:#FFF0C2}
.ka-add{background:var(--paper);border-radius:var(--r);padding:14px;margin:0 0 14px}
.ka-addrow{display:flex;gap:8px;align-items:flex-start}
.ka-addrow .kl-input{flex:1;min-width:0;margin:0;min-height:54px;font:600 18px/1.2 var(--f-body)}
.ka-addrow .btn{margin:0 3px;flex:none;min-height:54px;padding:8px 18px;box-shadow:0 0 0 3px #fff,0 4px 0 3px var(--ink)}
.ka-addrow .btn svg{width:20px;height:20px}
.ka-add .ka-sub{margin:8px 0 0}
.ka-add .kl-msg{margin:10px 0 0}
@media (max-width:420px){.ka-addrow{flex-direction:column;align-items:stretch}.ka-addrow .btn{width:calc(100% - 6px)}}
.ka-mlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ka-mrow{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:10px 12px;border:2px solid var(--line);border-radius:16px;background:#fff;transition:opacity .2s}
.ka-mrow.is-owner{background:var(--sun-2);border-color:#F3D27A}
.ka-mrow.is-busy{opacity:.55;pointer-events:none}
.ka-mavatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--sky-2);color:var(--sky-deep);font:600 18px/1 var(--f-head)}
.ka-mrow.is-owner .ka-mavatar{background:var(--sun);color:var(--ink)}
.ka-mwho{min-width:0;display:grid;gap:4px}
.ka-memail{font-weight:800;overflow-wrap:anywhere;line-height:1.3}
.ka-pills{display:flex;flex-wrap:wrap;gap:4px}
.ka-pill{display:inline-flex;align-items:center;gap:5px;font:800 11px/1 var(--f-body);letter-spacing:.05em;text-transform:uppercase;padding:5px 9px;border-radius:999px}
.ka-pill .zh{letter-spacing:.1em}
.ka-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.ka-pill-ok{background:var(--leaf-2);color:var(--leaf)}
.ka-pill-wait{background:#FFF0C2;color:#8A5A00}
.ka-pill-off{background:#FDE3D6;color:#7A2E07}
.ka-pill-owner{background:#fff;color:var(--ink-2)}
.ka-mbtns,.ka-mconfirm{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px}
.ka-mconfirm span{font-weight:800;font-size:14px;color:#7A2E07}
.ka-mbtn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:12px;font:800 14px/1 var(--f-body);color:var(--sky-deep);background:var(--sky-2)}
.ka-mbtn svg{width:17px;height:17px}
.ka-mbtn:hover{filter:brightness(.96)}
.ka-mbtn:focus-visible{outline:3px solid var(--sky-deep);outline-offset:2px}
.ka-mbtn-danger{color:#9A3412;background:#FDECE3}
.ka-mbtn-solid{background:#C2410C;color:#fff}
.ka-mbtn[hidden],.ka-mbtns[hidden],.ka-mconfirm[hidden]{display:none}
@media (max-width:599px){
  .ka-mrow{grid-template-columns:36px minmax(0,1fr)}
  .ka-mavatar{width:36px;height:36px;font-size:16px}
  .ka-mbtns,.ka-mconfirm{grid-column:1/-1;justify-content:flex-start;padding-left:48px}
}
.ka-mempty{color:var(--ink-3);font-weight:700;text-align:center;margin:14px 0 4px}
.adm-actions-tight{margin:0;gap:4px}

@media (max-width:599px){
  .ka-mhead{flex-wrap:wrap;gap:10px 12px}
  .ka-mtitle{flex:1 1 60%}
  .ka-mhead .ka-sub{font-size:15px}
  .ka-count{padding:6px 10px;margin-left:56px}
  .ka-count b{font-size:22px}
  .ka-mbtn{min-height:38px;padding:0 10px;font-size:13px}
  .ka-mbtns,.ka-mconfirm{padding-left:48px;gap:6px}
}