:root{--bg: #0f1115;--surface: #1a1d23;--surface-hover: #2d333d;--primary: #3b82f6;--primary-dim: rgba(59, 130, 246, .1);--text: #e2e8f0;--text-dim: #94a3b8;--error: #ef4444;--success: #22c55e;--border: #334155}body{margin:0;background-color:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}.app-container{display:flex;flex-direction:column;min-height:100vh}.main-header{display:flex;justify-content:space-between;align-items:center;background:var(--surface);padding:.75rem 1.5rem;border-bottom:1px solid var(--border);height:64px;box-sizing:border-box}.brand{display:flex;align-items:center;gap:12px}.brand h1{margin:0;font-size:1.25rem;font-weight:700;background:linear-gradient(to right,#60a5fa,#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.header-right{display:flex;align-items:center;gap:16px}.user-info{display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--text-dim)}.logout-btn{display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--error);color:var(--error);width:36px;height:36px;border-radius:8px;cursor:pointer;transition:all .2s}.logout-btn:hover{background:var(--error);color:#fff}.layout{display:flex;flex:1}.sidebar{width:260px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:1rem;gap:.5rem}.sidebar-title{font-size:.75rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;margin:.5rem 0 1rem .5rem}.system-btn{display:flex;align-items:center;gap:10px;width:100%;padding:.75rem 1rem;border:1px solid transparent;border-radius:10px;background:none;color:var(--text);cursor:pointer;text-align:left;font-size:.9rem;transition:all .2s}.system-btn:hover{background:var(--surface-hover)}.system-btn.active{background:var(--primary-dim);border-color:var(--primary);color:#60a5fa}.main-content{flex:1;padding:2rem;max-width:1000px;margin:0 auto;width:100%;box-sizing:border-box}.search-box{position:relative;margin-bottom:2rem}.input-wrapper{display:flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.75rem 1rem;gap:.75rem;transition:border-color .2s}.input-wrapper:focus-within{border-color:var(--primary)}.search-input{flex:1;background:none;border:none;color:#fff;font-size:1rem;outline:none}.results-count{font-size:.75rem;color:var(--text-dim);margin:-1rem 0 1rem .5rem;display:flex;align-items:center;gap:6px}.user-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;margin-bottom:1rem;animation:fadeIn .3s ease-out}.card-row{display:flex;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--border);gap:1.5rem}.card-row:last-child{border-bottom:none}.user-main-info{flex:1}.username{font-weight:600;font-size:1rem;display:block}.full-name{font-size:.875rem;color:var(--text-dim)}.user-meta{display:flex;flex-direction:column;gap:4px;text-align:right}.user-id{font-family:monospace;font-size:.75rem;color:var(--text-dim)}.impersonate-btn{background:var(--primary-dim);color:#60a5fa;border:1px solid var(--primary);padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .2s}.impersonate-btn:disabled,.app-btn:disabled{background:var(--surface-hover);border-color:var(--border);color:var(--text-dim);cursor:not-allowed;opacity:.6}.impersonate-btn:disabled:hover,.app-btn:disabled:hover{opacity:.6;background:var(--surface-hover)}.app-picker{background:var(--primary-dim);border:1px solid var(--primary);border-radius:12px;padding:1.25rem;margin-bottom:1.5rem}.app-picker-title{font-size:.9rem;font-weight:600;margin-bottom:1rem;display:block}.app-grid{display:flex;gap:8px;flex-wrap:wrap}.app-btn{background:var(--primary);color:#fff;border:none;padding:.6rem 1.2rem;border-radius:8px;cursor:pointer;font-size:.875rem;transition:opacity .2s}.app-btn:hover{opacity:.9}.cancel-btn{background:var(--surface-hover);color:var(--text);border:1px solid var(--border);padding:.6rem 1.2rem;border-radius:8px;cursor:pointer;font-size:.875rem}.spinner{animation:spin 1s linear infinite;color:var(--primary)}.error-msg{background:#ef44441a;border:1px solid var(--error);color:var(--error);padding:.75rem 1rem;border-radius:10px;margin-bottom:1rem;font-size:.875rem}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;color:var(--text-dim);text-align:center;gap:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}