:root{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-accent: #334155;--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent-color: #38bdf8;--accent-color-hover: #0ea5e9;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);height:100vh;overflow:hidden}#root{height:100%}.app-container{display:grid;grid-template-columns:var(--col-contacts, 240px) .5fr 265px 1fr 265px 1fr 220px;height:100vh;gap:0;background-color:var(--bg-primary);padding:0 1rem;transition:grid-template-columns .3s ease}.col-contacts-hidden{--col-contacts: 60px}.column{background-color:var(--bg-primary);display:flex;flex-direction:column;overflow:hidden;position:relative}.column-header{padding:1.5rem;background:linear-gradient(to bottom,var(--bg-secondary),var(--bg-primary));border-bottom:1px solid var(--glass-border);display:flex;align-items:center;gap:.75rem}.column-header h2{font-size:1.1rem;font-weight:600;color:var(--text-primary)}.list-container{flex:1;overflow-y:auto;padding:1rem}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:12px;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}.glass-card:hover{border-color:var(--accent-color);background:rgba(255,255,255,.08)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-accent);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.connection-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:5}.connection-dot{width:12px;height:12px;background:var(--bg-accent);border:2px solid var(--accent-color);border-radius:50%;position:absolute;cursor:crosshair;pointer-events:auto;transition:all .2s ease;z-index:20}.connection-dot:hover{transform:scale(1.3);background:var(--accent-color);box-shadow:0 0 10px var(--accent-color)}.connection-dot.active{background:var(--accent-color);box-shadow:0 0 15px var(--accent-color)}.connected-active{transform:scale(1.03);border-color:var(--accent-color)!important;box-shadow:0 0 15px #38bdf84d;z-index:10}.dot-magnetic{box-shadow:0 0 0 4px #38bdf84d}.delete-btn{opacity:0;transition:opacity .2s ease;background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.2);border-radius:4px;padding:2px 6px;font-size:.7rem;cursor:pointer}.glass-card:hover .delete-btn{opacity:1}.delete-btn:hover{background:#ef4444;color:#fff}.add-group-form{padding:1rem;display:flex;gap:.5rem;border-bottom:1px solid var(--glass-border)}.add-group-form input{flex:1;background:var(--bg-accent);border:1px solid var(--glass-border);border-radius:4px;color:#fff;padding:.4rem .6rem;font-size:.85rem}.add-group-form button{background:var(--accent-color);color:#fff;border:none;border-radius:4px;padding:.4rem .8rem;font-size:.85rem;cursor:pointer}.add-group-form button:hover{background:var(--accent-color-hover)}.group-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.group-tag{font-size:.65rem;background:var(--bg-accent);color:var(--text-secondary);padding:1px 6px;border-radius:4px;border:1px solid var(--glass-border)}.highlighted-path{stroke:var(--accent-color)!important;stroke-width:3px!important;opacity:1!important;filter:drop-shadow(0 0 5px var(--accent-color))}.search-input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);border-radius:4px;color:#fff;padding:4px 8px;font-size:.75rem;margin-top:8px;outline:none}.search-input:focus{border-color:var(--accent-color)}.connection-path{pointer-events:stroke;cursor:pointer;transition:stroke-width .2s ease,opacity .2s ease}.connection-path:hover{stroke-width:6px!important;opacity:1!important;filter:drop-shadow(0 0 3px var(--accent-color))}.hover-detail-container{position:absolute;top:100%;left:0;width:260px;z-index:10000;pointer-events:none;padding-top:12px}.hover-detail-content{background:var(--bg-secondary);border:1px solid var(--accent-color);border-radius:8px;box-shadow:0 10px 30px #00000080;padding:.75rem;pointer-events:auto}.hover-detail-title{font-size:.7rem;text-transform:uppercase;color:var(--accent-color);letter-spacing:.05em;margin-bottom:.5rem;font-weight:700}.hover-detail-item{font-size:.8rem;padding:4px 0;border-bottom:1px solid var(--glass-border);display:flex;align-items:center;gap:6px}.hover-detail-item:last-child{border-bottom:none}