:root{
  --bg:#f5f5f7; --card:#ffffff; --line:#e5e5ea; --line2:#f2f2f4;
  --fg:#1d1d1f; --muted:#6e6e73; --muted2:#8e8e93;
  --accent:#007aff; --accent-tint:#eff6ff; --accent-line:#cfe4ff;
  --ok:#34c759; --warn:#ff9500; --danger:#ff3b30; --plan:#af52de;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font:16px/1.4 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--fg)}
a{color:var(--accent);text-decoration:none}

header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;
  padding:14px 16px;display:flex;align-items:center;gap:10px}
header .logo{width:28px;height:28px;border-radius:8px;flex:0 0 auto}
header h1{font-size:18px;font-weight:650;margin:0;flex:1}
header .who{font-size:13px;color:var(--muted)}
.linkbtn{background:none;border:0;color:var(--accent);font:inherit;font-size:14px;cursor:pointer;padding:6px}

main{max-width:1100px;margin:0 auto;padding:16px}
.sectionlabel{font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted2);
  font-weight:600;margin:20px 4px 8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}

/* ── матрица «агент × роль» ── */
.legend{display:flex;flex-wrap:wrap;gap:14px;margin:10px 4px 12px;font-size:12px;color:var(--muted)}
.legend .lg{display:inline-flex;align-items:center;gap:6px}
.legend .lg i{width:14px;height:14px;border-radius:5px;display:inline-block}
.mwrap{overflow-x:auto;border:1px solid var(--line2);border-radius:14px;background:var(--card);
  box-shadow:0 2px 8px rgba(0,0,0,.04);-webkit-overflow-scrolling:touch}
.matrix{border-collapse:separate;border-spacing:0;width:100%;min-width:760px;font-size:13px}
.matrix th,.matrix td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line2);vertical-align:middle;white-space:nowrap}
.matrix thead th{position:sticky;top:0;background:var(--card);z-index:3;font-size:11px;letter-spacing:.3px;
  text-transform:uppercase;color:var(--muted2);font-weight:600;border-bottom:1px solid var(--line)}
.matrix .cAgent{position:sticky;left:0;background:var(--card);z-index:2;min-width:186px;
  box-shadow:1px 0 0 var(--line2);white-space:normal}
.matrix thead th.cAgent{z-index:4}
.matrix tbody tr:hover td{background:#fafafb}
.matrix tbody tr:hover td.cAgent{background:#fafafb}
.matrix .grp td{background:var(--bg);font-weight:600;color:var(--muted2);font-size:11px;letter-spacing:.5px;
  text-transform:uppercase;position:sticky;left:0}
.anh{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.aname{font-weight:600;font-size:13.5px;color:var(--fg)}
.asub{font-size:11px;color:var(--muted2);margin-top:1px}
.abud{font-size:11px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:6px}
.abud .bar{width:54px;height:5px}
.cell{cursor:pointer}
.cell[data-ro="1"]{cursor:default}
.cell:hover .cmodel{filter:brightness(.96)}
.cmodel{display:inline-block;padding:4px 9px;border-radius:8px;font-weight:550;font-size:12.5px}
.k-cell-subscription{background:#eef7ee;color:#248a3d}
.k-cell-gateway{background:var(--accent-tint);color:var(--accent)}
.k-cell-metered{background:#fff4e5;color:#b25e00}
.k-cell-asr,.k-cell-image{background:#f6efff;color:#7a3ec8}
.k-cell-raw{background:#f2f2f4;color:var(--fg)}
.k-cell-none{background:transparent;color:var(--muted2)}

.card{background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:14px 16px;
  box-shadow:0 2px 8px rgba(0,0,0,.04)}
.card .top{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.card .name{font-weight:650;font-size:16px;flex:1}
.card .sub{font-size:12.5px;color:var(--muted);margin-bottom:10px}

.pill{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.p-ok{background:#e8faef;color:#248a3d}
.p-warn{background:#fff4e5;color:#b25e00}
.p-off{background:#f2f2f4;color:var(--muted)}
.p-plan{background:#f6efff;color:#7a3ec8}
.p-lock{background:#f2f2f4;color:var(--muted)}

.roles{display:flex;flex-direction:column;gap:1px;background:var(--line2);border-radius:10px;overflow:hidden}
.role{display:flex;align-items:center;gap:10px;background:var(--card);padding:10px 12px;cursor:pointer;
  transition:background .1s}
.role:hover{background:var(--accent-tint)}
.role.ro{cursor:default}.role.ro:hover{background:var(--card)}
.role .rt{flex:0 0 40%;font-size:13px;color:var(--muted)}
.role .rv{flex:1;font-size:13.5px;font-weight:550;text-align:right;color:var(--fg)}
.role .chev{color:var(--muted2);font-size:14px}
.kindtag{font-size:10px;font-weight:700;padding:1px 6px;border-radius:6px;margin-right:6px;vertical-align:1px}
.k-subscription{background:#eef7ee;color:#248a3d}
.k-gateway{background:var(--accent-tint);color:var(--accent)}
.k-metered{background:#fff4e5;color:#b25e00}
.k-asr,.k-image{background:#f6efff;color:#7a3ec8}

.budget{font-size:12px;color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:6px}
.bar{flex:1;height:6px;background:var(--line2);border-radius:999px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent)}

.btn{display:block;width:100%;padding:14px;border:0;border-radius:12px;background:var(--accent);
  color:#fff;font-size:17px;font-weight:600;cursor:pointer;transition:transform .06s,filter .06s}
.btn:active{transform:translateY(1px) scale(.99);filter:brightness(.94)}
.btn.secondary{background:var(--card);border:1px solid #d2d2d7;color:var(--fg)}
.btn.danger{background:var(--danger)}
.btn:disabled{opacity:.5}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:100;display:none;
  align-items:center;justify-content:center;padding:16px}
.overlay.on{display:flex}
.sheet{background:var(--card);border-radius:16px;width:100%;max-width:480px;max-height:88vh;
  overflow:auto;padding:20px;box-shadow:0 16px 48px rgba(0,0,0,.22)}
.sheet h2{margin:0 0 4px;font-size:18px}
.sheet .hint{color:var(--muted);font-size:13px;margin:0 0 14px}
.opt{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;
  margin-bottom:8px;cursor:pointer}
.opt:hover{border-color:var(--accent);background:var(--accent-tint)}
.opt.sel{border-color:var(--accent);background:var(--accent-tint)}
.opt .ol{flex:1}
.opt .oname{font-weight:600;font-size:14.5px}
.opt .onote{font-size:12px;color:var(--muted)}
.opt .radio{width:20px;height:20px;border-radius:50%;border:2px solid #c7c7cc;flex:0 0 auto}
.opt.sel .radio{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px #fff}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;background:#1d1d1f;
  color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;max-width:90%;opacity:0;
  transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}

.login{max-width:380px;margin:12vh auto;text-align:center;padding:24px}
.login .logo{width:64px;height:64px;border-radius:16px;margin:0 auto 16px}
.login h1{font-size:22px;margin:0 0 6px}
.login p{color:var(--muted);margin:0 0 22px}
.empty{color:var(--muted);text-align:center;padding:60px 0}

@media(max-width:620px){
  main{padding:11px}
  .grid{grid-template-columns:1fr}
  .overlay{align-items:flex-end;padding:0}
  .sheet{max-width:none;border-radius:18px 18px 0 0}
  .role{padding:12px}.role .rt{flex-basis:44%}
}