/* Agrumaria device register — warm paper + ink, one citrus accent, hairlines instead of shadows. */
:root{
  color-scheme:light dark;
  --bg:#f2f0eb; --panel:#fbfaf7; --panel-2:#f6f4ef; --line:#dad6cc; --line-2:#e7e4dc;
  --text:#1d1c1a; --muted:#6e695f; --faint:#9a958a;
  --accent:#c4460f; --accent-2:#fbe8dc; --ink:#1d1c1a; --ink-text:#ebe8e1; --ink-muted:#a39e93;
  --good:#2e6b3c; --good-2:#e3eedf; --bad:#a1302a; --bad-2:#f6e1dc; --warn:#8a5d00; --warn-2:#f5ebcf;
  --sel:#ede6d8; --hover:#f0ece4; --mark:#fbe1a6;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --sans:"IBM Plex Sans",system-ui,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141311; --panel:#1b1a17; --panel-2:#201f1b; --line:#34322c; --line-2:#2a2824;
    --text:#e8e5de; --muted:#9d988c; --faint:#6f6a60;
    --accent:#ee7a36; --accent-2:#3a2417; --ink:#0e0d0c; --ink-text:#e8e5de; --ink-muted:#8f8a80;
    --good:#7fbf86; --good-2:#1d2a1e; --bad:#ec8a7f; --bad-2:#34201d; --warn:#dcb05a; --warn-2:#30281a;
    --sel:#2b2822; --hover:#23211d; --mark:#5a4515;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 var(--sans);display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* ---------- top loading bar ---------- */
#loadbar{position:fixed;left:0;right:0;top:0;height:2px;z-index:100;pointer-events:none}
#loadbar i{display:block;height:100%;width:0;background:var(--accent);opacity:0;
  transition:width .25s var(--ease),opacity .3s ease .15s}
#loadbar.on i{opacity:1;transition:width 8s cubic-bezier(.1,.6,.2,1),opacity .1s}
#loadbar.done i{opacity:0;width:100%!important;transition:width .2s var(--ease),opacity .25s ease .2s}

/* ---------- header ---------- */
header.top{display:flex;align-items:center;gap:18px;padding:0 16px;height:48px;background:var(--ink);color:var(--ink-text);flex:none}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.brand span:not(.mark){font-weight:400;color:var(--ink-muted)}
.mark{width:10px;height:10px;background:var(--accent);border-radius:50%}
.nav{display:flex;height:100%}
.nav a{display:flex;align-items:center;padding:0 12px;text-decoration:none;color:var(--ink-muted);border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s}
.nav a:hover{color:var(--ink-text)}
.nav a.on{color:var(--ink-text);border-bottom-color:var(--accent)}
.grow{flex:1}
.meter{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-muted);min-width:150px}
.meter b{color:var(--ink-text);font-weight:500}
.meter-bar{height:3px;background:#3a3833;border-radius:2px;overflow:hidden}
.meter-bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .6s var(--ease)}
.feed{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-muted);white-space:nowrap}
.feed i{width:7px;height:7px;border-radius:50%;background:#6d6a62}
.feed.ok i{background:#6cc27a;box-shadow:0 0 0 0 rgba(108,194,122,.6);animation:pulse 2.4s infinite}
.feed.warn i{background:#e0b04a} .feed.bad i{background:#e5675b}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(108,194,122,.5)}70%{box-shadow:0 0 0 6px rgba(108,194,122,0)}100%{box-shadow:0 0 0 0 rgba(108,194,122,0)}}
.who{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-muted)}
.who #who{color:var(--ink-text);font-weight:500;white-space:nowrap}
.who .link{background:none;border:0;padding:0;color:var(--ink-muted);cursor:pointer;font-size:12px;text-decoration:underline;text-underline-offset:2px}
.who .link:hover{color:var(--ink-text)}
@keyframes shake{25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
.hbtn{font-size:12px;color:var(--ink-text);text-decoration:none;border:1px solid #3a3833;border-radius:3px;padding:4px 9px;white-space:nowrap;transition:background .15s}
.hbtn:hover{background:#2a2925}

.banner{display:none;padding:7px 16px;font-size:13px;border-bottom:1px solid var(--line);flex:none}
.banner.show{display:block;animation:drop .25s var(--ease)}
.banner.warn{background:var(--warn-2);color:var(--warn)} .banner.bad{background:var(--bad-2);color:var(--bad)}
@keyframes drop{from{transform:translateY(-6px);opacity:0}}

/* ---------- layout ---------- */
main{flex:1;display:grid;grid-template-columns:330px 1fr;min-height:0}
.side{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.side-tools{padding:12px 12px 8px;display:grid;gap:8px;border-bottom:1px solid var(--line-2)}
.search{position:relative}
.search input{width:100%;padding:7px 30px 7px 9px;border:1px solid var(--line);border-radius:3px;background:var(--bg);transition:border-color .15s}
.search input:focus{outline:none;border-color:var(--accent)}
.search kbd,.search .x{position:absolute;right:6px;top:50%;transform:translateY(-50%)}
kbd{font:11px var(--mono);color:var(--faint);border:1px solid var(--line);border-radius:3px;padding:0 5px;background:var(--panel)}
.search .x{display:none;border:0;background:none;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;padding:2px 4px}
.search.has .x{display:block} .search.has kbd{display:none}
.side-row{display:flex;gap:6px;align-items:center}
.side-row select{flex:1}
select{border:1px solid var(--line);border-radius:3px;background:var(--bg);padding:5px 6px}
button.link{border:0;background:none;color:var(--muted);font-size:12px;cursor:pointer;padding:3px 4px;border-radius:3px}
button.link:hover{color:var(--text);background:var(--hover)}
.side-count{font-size:12px;color:var(--faint)}

/* tree */
.tree{overflow:auto;flex:1;padding:4px 0 24px;scroll-behavior:smooth}
.tree summary{list-style:none;cursor:pointer;user-select:none}
.tree summary::-webkit-details-marker{display:none}
.l1>summary{display:grid;grid-template-columns:14px 1fr auto;gap:6px;align-items:center;padding:7px 12px 5px;position:relative}
.l1>summary:hover,.l2>summary:hover{background:var(--hover)}
.chev{width:14px;height:14px;display:grid;place-items:center;color:var(--faint);transition:transform .18s var(--ease)}
.chev::before{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
details[open]>summary .chev{transform:rotate(90deg)}
.l1 .code{font:500 13px var(--mono)}
.l1 .name{color:var(--muted);margin-left:6px;font-size:13px}
.l1 .frac{font-size:11px;color:var(--faint)}
.l1 .lbar{grid-column:2/4;height:2px;background:var(--line-2);border-radius:1px;overflow:hidden;margin-top:3px}
.l1 .lbar i{display:block;height:100%;background:var(--good);transition:width .5s var(--ease)}
.l2>summary{display:grid;grid-template-columns:14px 1fr auto;gap:6px;align-items:center;padding:4px 12px 4px 30px;font-size:13px}
.l2 .code{font:12px var(--mono);color:var(--muted);margin-right:6px}
.l2 .cnt{font-size:11px;color:var(--faint)}
details>.kids{animation:open .18s var(--ease)}
@keyframes open{from{opacity:0;transform:translateY(-3px)}}
.dev{display:grid;grid-template-columns:auto 1fr 8px;gap:8px;align-items:center;padding:3px 12px 3px 50px;cursor:pointer;
  border-left:2px solid transparent;transition:background .1s}
.dev:hover{background:var(--hover)}
.dev.sel{background:var(--sel);border-left-color:var(--accent)}
.dev .c{font:13px var(--mono)}
.dev .d{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq{width:8px;height:8px;border-radius:2px;background:var(--line);transition:background .3s}
.sq.identified{background:var(--good)}
mark{background:var(--mark);color:inherit;border-radius:2px}
.tree .none{padding:40px 16px;color:var(--muted);text-align:center}

/* ---------- main view ---------- */
.view{overflow:auto;min-height:0;padding:20px 28px 60px}
.view>.page{max-width:1180px;animation:enter .2s var(--ease)}
@keyframes enter{from{opacity:0;transform:translateY(4px)}}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-bottom:6px}
.crumbs a{text-decoration:none;padding:1px 3px;margin:0 -3px;border-radius:3px;transition:background .12s,color .12s}
.crumbs a:hover{color:var(--accent);background:var(--accent-2)}
.crumbs .sep{color:var(--faint)}
.crumbs .here{color:var(--text)}
.title{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.title h1{font:500 28px/1.1 var(--mono);margin:0;letter-spacing:-.02em}
.title h1.sans{font:600 24px/1.2 var(--sans);letter-spacing:-.01em}
.title .sub{font-size:15px;color:var(--muted);padding-bottom:2px}
.stepper{margin-left:auto;display:flex;gap:4px}
.facts{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--muted);margin:10px 0 22px}
.facts b{color:var(--text);font-weight:500}
.tag{display:inline-block;font-size:11px;border-radius:3px;padding:0 5px;border:1px solid transparent;white-space:nowrap}
.tag.doc{color:var(--good);border-color:currentColor} .tag.inferred{color:var(--warn);border-color:currentColor}
.tag.guess{color:var(--bad);border-color:currentColor}

.btn{border:1px solid var(--line);background:var(--panel);border-radius:3px;padding:5px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;transition:background .12s,border-color .12s,transform .08s}
.btn:hover{background:var(--hover);border-color:var(--faint)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.07)}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:default;pointer-events:none}
.btn.sm{padding:3px 8px;font-size:12px}
.btn.busy::before{content:"";width:10px;height:10px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:4px;margin-bottom:18px}
.panel>.ph{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-2)}
.panel>.ph h2{font-size:13px;font-weight:600;margin:0}
.panel>.ph .n{font-size:12px;color:var(--faint)}
.panel>.ph .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.panel>.pb{padding:14px}
.panel>.pb.flush{padding:0}

/* identification form */
.form{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px 14px}
.form .full{grid-column:1/-1}
.form label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.form input,.form select,.form textarea{width:100%;border:1px solid var(--line);border-radius:3px;background:var(--bg);padding:7px 9px;transition:border-color .15s,background .15s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent);background:var(--panel)}
.form textarea{min-height:64px;resize:vertical}
.form .changed{border-color:var(--warn)}
.suggest{font-size:12px;color:var(--muted);margin-top:4px}
.suggest button{border:0;background:none;color:var(--accent);cursor:pointer;padding:0;font-size:12px}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.actions .meta{margin-left:auto;font-size:12px;color:var(--faint)}
.dirty{font-size:12px;color:var(--warn);opacity:0;transition:opacity .2s}
.dirty.on{opacity:1}

/* values */
.vbar{display:flex;align-items:center;gap:10px;margin:26px 0 10px;flex-wrap:wrap}
.vbar h2{font-size:15px;font-weight:600;margin:0}
.vbar .fresh{font-size:12px;color:var(--faint)}
.vbar input{border:1px solid var(--line);border-radius:3px;background:var(--panel);padding:4px 8px;width:200px;margin-left:auto}
.vbar input:focus{outline:none;border-color:var(--accent)}
.btn.spin svg{animation:spin .7s linear}
table{width:100%;border-collapse:collapse}
th{font-size:11px;font-weight:500;color:var(--faint);text-align:left;padding:7px 14px;border-bottom:1px solid var(--line-2);white-space:nowrap}
td{padding:7px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}
tr:last-child>td{border-bottom:0}
tbody tr{transition:background .1s}
tbody tr:hover{background:var(--panel-2)}
.attr .lbl{font-weight:500}
.attr .ctx{color:var(--muted);font-weight:400}
.attr .raw{font:11px var(--mono);color:var(--faint);cursor:copy}
.attr .raw:hover{color:var(--accent)}
.attr .help{font-size:12px;color:var(--muted);margin-top:1px;max-width:520px}
.attr .note{font-size:12px;margin-top:3px;color:var(--text)}
.attr .note::before{content:"SCADA";font:10px var(--mono);color:var(--accent);border:1px solid currentColor;border-radius:2px;padding:0 3px;margin-right:6px;vertical-align:1px}
.conf-guess{font-size:10px;color:var(--warn);margin-left:6px;cursor:help;border-bottom:1px dotted currentColor}
td.val{font:14px var(--mono);white-space:nowrap;text-align:right;width:1%}
td.val .u{color:var(--muted);font-size:12px;margin-left:3px}
td.val.dead{color:var(--faint)}
td.val .bits{display:block;font-size:11px;color:var(--faint)}
.bool{display:inline-flex;align-items:center;gap:6px}
.bool::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--faint)}
.bool.on::before{background:var(--accent);border-color:var(--accent)}
.gauge{display:block;width:90px;height:3px;background:var(--line-2);border-radius:2px;margin:5px 0 0 auto;position:relative;overflow:hidden}
.gauge i{position:absolute;left:0;top:0;bottom:0;background:var(--muted);border-radius:2px;transition:width .6s var(--ease)}
.gauge-r{display:block;font-size:10px;color:var(--faint);text-align:right}
td.q{width:1%;white-space:nowrap}
.ql{font-size:11px;display:inline-flex;align-items:center;gap:5px;color:var(--muted)}
.ql::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint)}
.ql.good{color:var(--good)} .ql.good::before{background:var(--good)}
.ql.bad{color:var(--bad)} .ql.bad::before{background:var(--bad)}
.ql.cfg{color:var(--warn)} .ql.cfg::before{background:var(--warn)}
td.since{width:1%;white-space:nowrap;font-size:12px;color:var(--faint)}
tr.chg td.val{animation:flash 1.6s ease-out}
@keyframes flash{0%{background:var(--accent-2);color:var(--accent)}100%{background:transparent}}
table.thr td,table.thr th{text-align:right;font-variant-numeric:tabular-nums}
table.thr td:first-child,table.thr th:first-child{text-align:left;white-space:nowrap;font-family:var(--sans)}
table.thr th .m{display:block;font-weight:400;color:var(--muted);font-size:11px;white-space:normal;min-width:70px}
table.thr td{font-family:var(--mono)}
.foot{padding:9px 14px;font-size:12px;color:var(--muted);border-top:1px solid var(--line-2)}

/* edit log */
.log td{font-size:13px}
.log .when{white-space:nowrap;color:var(--faint);font-size:12px;width:1%}
.log .ch{color:var(--muted)} .log .ch b{color:var(--text);font-weight:500}
.log del{color:var(--faint)}

/* lists (line / type pages, home) */
table.list td{padding:6px 14px}
table.list tbody tr{cursor:pointer}
table.list .c{font:13px var(--mono);white-space:nowrap}
table.list .dsc{color:var(--muted)}
.pct{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.pct i{display:inline-block;width:40px;height:3px;background:var(--line-2);border-radius:2px;overflow:hidden;position:relative}
.pct i b{position:absolute;inset:0 auto 0 0;background:var(--good)}
.st{display:inline-flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-bottom:22px}
.lcard{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:12px 14px;transition:border-color .15s,transform .15s}
.lcard:hover{border-color:var(--accent)}
.lcard .t{display:flex;align-items:baseline;gap:8px}
.lcard .t .code{font:500 15px var(--mono)}
.lcard .t .nm{color:var(--muted)}
.lcard .t .tag{margin-left:auto}
.lcard .s{font-size:12px;color:var(--faint);margin-top:8px}
.lcard .lbar{height:3px;background:var(--line-2);border-radius:2px;overflow:hidden;margin-top:6px}
.lcard .lbar i{display:block;height:100%;background:var(--good)}
.lcard.dead{opacity:.7}

/* skeleton */
.sk{background:linear-gradient(90deg,var(--line-2) 0%,var(--hover) 50%,var(--line-2) 100%);background-size:200% 100%;animation:sk 1.1s linear infinite;border-radius:3px}
@keyframes sk{to{background-position:-200% 0}}

.empty{color:var(--muted);padding:70px 20px;text-align:center}
.hint{font-size:12px;color:var(--faint)}
.hint kbd{margin:0 2px}

/* floor plan */
.plan-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.plan-tools input{border:1px solid var(--line);border-radius:3px;background:var(--panel);padding:5px 8px;width:230px}
.placing-bar{background:var(--accent-2);color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:8px 12px;margin-bottom:12px;display:flex;gap:10px;align-items:center;animation:drop .25s var(--ease)}
.plan-wrap{position:relative;display:inline-block;max-width:100%;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--panel-2)}
.plan-wrap img{display:block;max-width:100%;transition:opacity .3s}
.plan-wrap img.loading{opacity:0}
.plan-wrap.placing{cursor:crosshair;outline:2px solid var(--accent);outline-offset:-2px}
.pin{position:absolute;transform:translate(-50%,-100%);background:var(--ink);color:#fff;font:500 10px var(--mono);padding:2px 5px;border-radius:3px;cursor:pointer;white-space:nowrap;
  transition:transform .12s var(--ease),background .12s;animation:pinin .3s var(--ease) backwards}
.pin::after{content:"";position:absolute;left:50%;bottom:-4px;margin-left:-4px;border:4px solid transparent;border-bottom:0;border-top-color:var(--ink)}
.pin:hover{transform:translate(-50%,-100%) scale(1.12);z-index:2}
.pin.identified{background:var(--good)} .pin.identified::after{border-top-color:var(--good)}
.pin.sel{background:var(--accent);z-index:3} .pin.sel::after{border-top-color:var(--accent)}
@keyframes pinin{from{opacity:0;transform:translate(-50%,-140%)}}

/* toasts */
#toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:50}
.toast{background:var(--ink);color:var(--ink-text);font-size:13px;padding:9px 14px;border-radius:4px;border-left:3px solid var(--good);max-width:380px;
  animation:tin .22s var(--ease);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.toast.err{border-left-color:#e5675b}
.toast.out{animation:tout .2s ease forwards}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}
@keyframes tout{to{opacity:0;transform:translateX(12px)}}

@media (max-width:900px){
  main{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .side{max-height:42vh;border-right:0;border-bottom:1px solid var(--line)}
  .meter,.brand span:not(.mark){display:none}
  .form{grid-template-columns:1fr}
  .view{padding:16px}
  header.top{gap:10px;overflow-x:auto}
}

/* ---------- suggestions on inferred / guessed meanings ---------- */
[data-sug]{cursor:pointer;position:relative}
.tag[data-sug]:hover{color:var(--panel)!important}
.tag.inferred[data-sug]:hover{background:var(--warn)} .tag.guess[data-sug]:hover{background:var(--bad)}
.lbl[data-sug]{text-decoration:underline dotted var(--faint);text-underline-offset:3px;transition:text-decoration-color .15s}
.lbl[data-sug]:hover{text-decoration-color:var(--accent);color:var(--accent)}
.conf-guess[data-sug]{border-bottom:0;text-decoration:underline dotted;text-underline-offset:2px}
[data-sug][data-n]::after{content:attr(data-n);display:inline-block;margin-left:4px;min-width:15px;padding:0 4px;border-radius:7px;
  background:var(--accent);color:#fff;font:600 10px/15px var(--sans);text-align:center;vertical-align:1px}
#pop{position:fixed;z-index:60;width:320px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:12px 14px;
  box-shadow:0 6px 24px rgba(0,0,0,.18);display:none;font-size:13px}
#pop.on{display:block;animation:tin .15s var(--ease)}
#pop .pop-h{font-weight:600}
#pop .pop-cur{color:var(--muted);font-size:12px;margin-top:2px}
#pop .pop-sub{font-size:11px;color:var(--faint);margin:10px 0 4px;text-transform:none}
#pop .pop-list{list-style:none;margin:0;padding:0;max-height:200px;overflow:auto}
#pop .pop-list li{padding:5px 0;border-top:1px solid var(--line-2)}
#pop .pop-list li span{font-size:11px;color:var(--faint)}
#pop .pop-empty{color:var(--faint);font-size:12px;padding:2px 0}
#pop .pop-foot{margin-top:8px;font-size:12px;color:var(--accent)}
#pop textarea{width:100%;min-height:58px;margin-top:10px;border:1px solid var(--line);border-radius:3px;background:var(--bg);padding:6px 8px;resize:vertical;font:inherit}
#pop textarea:focus{outline:none;border-color:var(--accent)}
#pop .pop-act{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}

/* ---------- status (read-only) + users page ---------- */
.stat-ro{display:flex;align-items:center;gap:10px;min-height:34px}
.users-form{grid-template-columns:1fr 1fr 1fr}
.users-form .actions{display:flex;align-items:center;gap:14px;justify-content:space-between}
.chk{display:flex!important;align-items:center;gap:6px;margin:0!important;font-size:13px!important;color:var(--text)!important}
.chk input{width:auto!important}
table.users{width:100%;border-collapse:collapse}
table.users th{text-align:left;font-size:12px;font-weight:500;color:var(--muted);padding:8px 14px;border-bottom:1px solid var(--line-2)}
table.users td{padding:5px 14px;border-bottom:1px solid var(--line-2)}
table.users tr:last-child td{border-bottom:0}
table.users .cell{width:100%;border:1px solid transparent;border-radius:3px;background:transparent;padding:4px 6px;transition:border-color .15s,background .15s}
table.users .cell:hover{border-color:var(--line)}
table.users .cell:focus{outline:none;border-color:var(--accent);background:var(--bg)}
table.users .acts{white-space:nowrap;text-align:right}
table.users .acts .btn{margin-left:4px}
.btn.danger{color:var(--bad)}
.btn.danger:hover{background:var(--bad-2);border-color:var(--bad)}