*{box-sizing:border-box}
:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172033;background:#f5f7fb}
body{margin:0;min-height:100vh}
.topbar{height:70px;background:#fff;border-bottom:1px solid #e5e9f0;display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:750;letter-spacing:-.3px}.brand svg{width:22px}
.top-actions{display:flex;align-items:center;gap:12px}.user-name{font-size:13px;color:#657086}
.search-wrap{position:relative;width:min(480px,42vw)}.search-wrap>svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;color:#7c879b}.search-wrap input{width:100%;height:42px;border:1px solid #dfe4ec;border-radius:11px;background:#f8f9fb;padding:0 40px 0 40px;outline:none;font-size:14px}.search-wrap input:focus{border-color:#8fa4c8;background:#fff;box-shadow:0 0 0 3px #e9eef7}.search-clear{position:absolute;right:7px;top:7px;width:28px;height:28px;border:0;background:transparent;cursor:pointer;color:#768197}
.icon-btn,.dots-btn,.small-icon{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;color:#667187;border-radius:8px}.icon-btn{width:36px;height:36px}.icon-btn:hover,.dots-btn:hover,.small-icon:hover{background:#eef2f7;color:#172033}
.page{max-width:1250px;margin:0 auto;padding:28px}
.clients-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.client-card{background:#fff;border:1px solid #e3e7ee;border-radius:15px;box-shadow:0 3px 14px rgba(27,39,64,.05);overflow:visible;min-width:0}
.client-head,.device-head{display:flex;align-items:center;gap:6px;padding:10px 12px}
.entity-button{display:flex;align-items:center;gap:11px;flex:1;min-width:0;border:0;background:transparent;text-align:left;padding:5px;border-radius:10px;cursor:pointer;color:inherit}.entity-button:hover{background:#f6f8fb}
.entity-icon{width:37px;height:37px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#edf2f8;flex:none}.entity-icon svg{width:19px}
.entity-main{display:flex;flex-direction:column;min-width:0}.entity-main strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.entity-main small{font-size:11px;color:#7a8496;margin-top:2px}.chevron{width:16px;margin-left:auto;color:#8490a5;transition:transform .18s}
.client-children,.software-children{display:none}.client-children.open,.software-children.open{display:block}
.client-children{border-top:1px solid #edf0f4;padding:5px 10px 10px}
.device-block{border-bottom:1px solid #eef1f5}.device-block:last-child{border-bottom:0}
.device-head{padding:7px 4px}.device-head .entity-icon{width:31px;height:31px;border-radius:8px}
.device-head .entity-main strong{font-size:13px}
.software-children{padding:0 6px 8px 42px}.software-row{display:flex;align-items:center;gap:9px;padding:8px 6px;border-top:1px solid #f0f2f5;min-width:0}.software-icon{width:29px;height:29px;display:flex;align-items:center;justify-content:center;border-radius:7px;background:#f0f3f7;flex:none}.software-icon svg{width:15px}.software-info{display:flex;flex-direction:column;min-width:0;flex:1}.software-info strong{font-size:12px}.software-info small{font-size:10px;color:#7c8798;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.software-actions{display:flex;gap:2px}.small-icon{width:28px;height:28px}.danger-text{color:#c94b4b!important}
.dots-wrap{position:relative;flex:none}.dots-btn{width:32px;height:32px}.dots-menu{display:none;position:fixed;z-index:9999;min-width:160px;background:#fff;border:1px solid #dfe4eb;border-radius:10px;padding:5px;box-shadow:0 12px 30px rgba(20,30,50,.16)}.dots-menu.open{display:block}.dots-menu button{width:100%;display:flex;align-items:center;gap:9px;border:0;background:#fff;border-radius:7px;padding:9px 10px;font-size:12px;text-align:left;cursor:pointer;white-space:nowrap}.dots-menu button:hover{background:#f1f4f8}.dots-menu button svg{width:15px}.dots-menu .danger{color:#c33e3e}
.search-results{background:#fff;border:1px solid #dfe4ec;border-radius:12px;margin-bottom:16px;box-shadow:0 10px 28px rgba(20,30,50,.10);overflow:hidden}.result-row{width:100%;display:flex;align-items:center;gap:11px;text-align:left;background:#fff;border:0;border-bottom:1px solid #edf0f4;padding:10px 13px;cursor:pointer}.result-row:last-child{border-bottom:0}.result-row:hover{background:#f6f8fb}.result-icon{width:31px;height:31px;border-radius:8px;background:#eef2f7;display:flex;align-items:center;justify-content:center}.result-icon svg{width:16px}.result-row span:nth-child(2){display:flex;flex-direction:column;min-width:0}.result-row strong{font-size:12px}.result-row small{font-size:10px;color:#7d8798}.no-results{padding:15px;color:#7c8796;font-size:13px}
.btn{border:1px solid #dce2ea;background:#fff;color:#263247;border-radius:9px;padding:9px 14px;cursor:pointer;font-weight:600;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn.primary{background:#172033;color:#fff;border-color:#172033}.btn.full{width:100%}.btn:hover{filter:brightness(.98)}
.modal{display:none;position:fixed;inset:0;z-index:10000}.modal.open{display:block}.modal-backdrop{position:absolute;inset:0;background:rgba(13,20,32,.42)}.modal-box{position:relative;width:min(460px,calc(100vw - 30px));margin:9vh auto 0;background:#fff;border-radius:15px;box-shadow:0 25px 70px rgba(0,0,0,.2);padding:18px}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.modal-head h3{margin:0;font-size:17px}.modal-box label{display:block;font-size:12px;font-weight:650;color:#4d586b;margin:10px 0}.modal-box input,.modal-box select{width:100%;height:40px;margin-top:6px;border:1px solid #dce2ea;border-radius:9px;padding:0 11px;background:#fff;outline:none}.modal-box input:focus,.modal-box select:focus{border-color:#8ea3c7;box-shadow:0 0 0 3px #edf1f8}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.password-input{position:relative}.password-input input{padding-right:42px}.password-input input.masked-password{-webkit-text-security:disc;text-security:disc;}.password-input button{position:absolute;right:5px;bottom:5px;height:30px;width:30px;border:0;background:transparent;color:#748095;cursor:pointer}.error{color:#c43d3d;font-size:12px;min-height:18px;margin-top:9px}.muted{color:#7b8596;font-size:13px;line-height:1.5}.login-page{display:grid;place-items:center;background:#f5f7fb}.login-card{width:min(390px,calc(100vw - 30px));background:#fff;border:1px solid #e2e6ed;border-radius:17px;padding:28px;box-shadow:0 12px 40px rgba(24,35,56,.08)}.login-card .brand{justify-content:center;margin-bottom:8px}.login-card .muted{text-align:center;margin:0 0 22px}.login-card label{display:block;font-size:12px;font-weight:650;color:#4c5769;margin:12px 0}.login-card input{width:100%;height:42px;margin-top:6px;border:1px solid #dce2ea;border-radius:9px;padding:0 11px;outline:none}.login-card input:focus{border-color:#8ea3c7}.login-card .btn{margin-top:8px}
@media(max-width:800px){.clients-grid{grid-template-columns:1fr}.topbar{padding:0 14px}.page{padding:16px}.search-wrap{width:45vw}.user-name{display:none}}
@media(max-width:520px){.topbar{height:auto;min-height:64px;flex-wrap:wrap;gap:8px;padding:10px}.top-actions{width:100%}.search-wrap{width:100%}.brand{font-size:18px}}

/* Restored compact visual style */
.topbar{background:#fff;box-shadow:0 1px 0 rgba(30,42,62,.03)}
.brand svg{stroke-width:2}
.client-card{border-radius:12px;box-shadow:0 2px 10px rgba(27,39,64,.045)}
.client-head{padding:9px 10px}
.entity-icon{background:#f0f2ff;color:#5b5ce2;border-radius:9px}
.device-head .entity-icon{background:#eef6ff;color:#3d78c8}
.software-icon{background:#f4f0ff;color:#7355c9}
.software-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;align-items:center}
.data-badge,.copy-all{border:1px solid #e0e5ed;background:#f8fafc;color:#465166;border-radius:7px;padding:4px 7px;font-size:10px;line-height:1.1;cursor:pointer;display:inline-flex;align-items:center;gap:5px;max-width:260px}
.data-badge span{font-weight:700;color:#788398}
.data-badge{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.data-badge:hover,.copy-all:hover{background:#eef2f7;border-color:#d4dbe5}
.data-badge.copied,.copy-all.copied{background:#edf8f0;border-color:#b9dfc2;color:#26713b}
.copy-all{font-weight:700;background:#172033;color:#fff;border-color:#172033}.copy-all svg{width:12px;height:12px}
.password-badge{letter-spacing:.3px}
@media(max-width:800px){.software-badges{max-width:100%}.data-badge{max-width:45vw}}

/* Final visual polish */
.topbar .brand svg{
    color:#6757e8;
    stroke:#6757e8;
    width:23px;
    height:23px;
    stroke-width:2.25;
}
.topbar .brand{font-size:19px}

.dots-menu{
    display:none;
    position:fixed !important;
    z-index:99999 !important;
    min-width:190px !important;
    max-width:260px;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    background:#fff !important;
    border:1px solid #dfe4eb;
    border-radius:10px;
    padding:6px !important;
    box-shadow:0 14px 34px rgba(20,30,50,.18);
}
.dots-menu.open{display:block !important}
.dots-menu button{
    min-height:38px !important;
    height:38px !important;
    line-height:20px !important;
    padding:8px 11px !important;
    font-size:13px !important;
    overflow:visible !important;
}
.dots-menu button svg{
    width:16px !important;
    height:16px !important;
    flex:0 0 16px;
}

body{
    font-size:14px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.client-head{padding:10px 11px}
.entity-main strong{font-size:15px;font-weight:650;letter-spacing:-.08px}
.entity-main small{font-size:11.5px}
.device-head .entity-main strong{font-size:13.5px}
.device-head .entity-main small{font-size:11px}
.software-info strong{font-size:13px;font-weight:600}
.software-info small{font-size:11px}
.data-badge,.copy-all{font-size:11px;padding:5px 8px;min-height:27px}
.copy-all{font-weight:650}
.result-row strong{font-size:13px}
.result-row small{font-size:11px}
.btn{font-size:13.5px}
.modal-box label{font-size:12.5px}
.modal-box input,.modal-box select{font-size:13.5px}

/* Client focus mode */
.clients-grid{transition:grid-template-columns .28s ease,transform .28s ease}
.client-card{transition:opacity .24s ease,transform .28s ease,box-shadow .28s ease}
.clients-grid.focus-mode{grid-template-columns:minmax(0,760px);justify-content:center}
.client-card.client-hidden{display:none}
.client-card.client-focused{
    animation:clientFocusIn .32s ease both;
    box-shadow:0 12px 34px rgba(35,48,75,.11);
}
@keyframes clientFocusIn{
    from{opacity:.55;transform:translateY(12px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
.password-reveal{
    font-size:11px;
    color:#4f596b;
    max-width:170px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.software-actions .small-icon{min-width:28px}

.client-card.client-focused{will-change:transform,opacity;transition:opacity .3s ease,transform .3s ease,box-shadow .3s ease}
.client-children{transition:opacity .22s ease}

.dots-menu{position:fixed!important;z-index:99999!important;display:none;min-width:190px!important;height:auto!important;max-height:none!important;overflow:visible!important;transform:none!important}
.dots-menu.open{display:block!important}
.dots-menu button{min-height:38px!important;height:38px!important;line-height:20px!important;padding:8px 11px!important;font-size:13px!important}
.password-reveal{font-size:11px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saving-spinner{width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:vsdSpin .7s linear infinite}
@keyframes vsdSpin{to{transform:rotate(360deg)}}
button:disabled{opacity:.65;cursor:not-allowed}

.topbar .brand{
  gap:9px;
  font-size:15px;
  font-weight:650;
  letter-spacing:0;
}
.topbar .brand svg{
  width:37px;height:37px;padding:9px;
  border-radius:10px;
  background:#f0f2ff;
  color:#6757e8;
  stroke:#6757e8;
  stroke-width:2.2;
}
.search-loading,.no-results{padding:14px 16px;font-size:13px}
.search-loading{display:flex;align-items:center;gap:8px;color:#667187}
.no-results{display:flex;flex-direction:column;gap:3px}
.no-results strong{font-size:13px}.no-results small{font-size:11px;color:#7b8596}
.result-copy{flex:1;min-width:0}
.result-kind{font-size:9px;text-transform:uppercase;letter-spacing:.6px;color:#8b94a4}
.password-value{font-weight:600;color:#566175;margin-left:4px}
.password-badge .password-value{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* AJAX busy state: completely hidden until an AJAX operation starts. */
.ajax-busy-overlay[hidden]{display:none !important}
.ajax-busy-overlay{position:fixed;inset:0;z-index:11000;background:rgba(248,250,253,.52);backdrop-filter:blur(1.5px);display:flex;align-items:center;justify-content:center}
.ajax-busy-overlay.show{display:flex !important}
.ajax-busy-box{display:flex;align-items:center;gap:9px;padding:11px 15px;border:1px solid #e0e5ed;border-radius:10px;background:#fff;box-shadow:0 12px 35px rgba(25,35,55,.14);font-size:13px;font-weight:650;color:#39455a}
body.ajax-busy{cursor:wait}
.ajax-busy-overlay *{cursor:wait}

