*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#e6f5ffe6;background:radial-gradient(900px 420px at 55% 55%,rgba(65,0,255,.14),transparent 65%),radial-gradient(700px 380px at 40% 65%,rgba(0,255,240,.1),transparent 60%),linear-gradient(180deg,#000,#03051a 55%,#04002a)}.page{min-height:100vh;display:grid;place-items:center;padding:40px 16px}#friends-view .page{min-height:calc(100vh - 70px);padding:24px 16px 60px}@property --angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}.login-card{width:min(760px,92vw);height:380px;border-radius:14px;position:relative;border:none;background:#0a101c73;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 0 0 1px #ffffff0d inset,0 20px 70px #0000008c}.login-card:before{content:"";position:absolute;inset:0;border-radius:14px;padding:2px;background:conic-gradient(from var(--angle),red,orange,yellow,lime,cyan,blue,violet,red);animation:spinColors 4s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;z-index:0}@keyframes spinColors{0%{--angle: 360deg}to{--angle: 0deg}}.card-inner{position:relative;z-index:1;height:100%;display:grid;justify-content:center;align-content:center;gap:22px;padding:28px}.field-label{width:520px;max-width:70vw;font-size:22px;font-weight:600;color:#e6f5ffc7;letter-spacing:.2px}.field-input{width:520px;max-width:70vw;height:56px;border-radius:10px;border:2px solid rgba(0,255,255,.2);outline:none;padding:0 18px;font-size:22px;color:#ebfaffeb;background:#091c348c;box-shadow:0 0 0 1px #00ffff1a inset,0 10px 30px #00000059;transition:border-color .18s ease-in-out,box-shadow .18s ease-in}.field-input::placeholder{color:#b9d4e659}.field-input:focus{border-color:#00fffff2;box-shadow:0 0 0 1px #00ffff8c inset,0 0 22px #00ffff59,0 0 40px #00ffff29}.field-input:focus::placeholder{color:transparent}.btn{width:520px;max-width:70vw;height:60px;border:0;border-radius:10px;cursor:pointer;font-size:26px;font-weight:700;letter-spacing:.3px;color:#e1f5fff2;background:linear-gradient(90deg,#2a86ff,#4d3bff 55%,#2c2ae0);box-shadow:0 0 0 1px #00ffff2e inset,0 0 20px #008cff38,0 0 30px #7846ff2e,0 16px 60px #0000008c;transition:transform .12s ease,filter .12s ease}.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}.btn:active{transform:translateY(0);filter:brightness(.98)}.topbar{padding:18px 0 0}.topbar-inner{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 16px}.welcome{font-size:14px;letter-spacing:.2px;color:#c8ebffe6;text-shadow:0 0 14px rgba(0,255,255,.15)}#logoutBtn{width:auto;height:28px;padding:0 12px;font-size:12px;border-radius:6px;box-shadow:none}.rainbow-line{height:2px;width:100%;margin-top:10px;background:linear-gradient(90deg,#00f0ff,#6b5bff,#ff4fd8,#ff4040);opacity:.9;box-shadow:0 0 18px #00ffff26}.friends-card{width:320px;border-radius:10px;position:relative;border:2px solid rgba(0,210,255,.85);background:#0a101c59;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 0 0 1px #00ffff14 inset,0 0 26px #00ffff1f,0 18px 60px #0000008c}.friends-inner{padding:14px 8px 16px 14px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;max-height:500px}.friends-inner::-webkit-scrollbar{width:8px;height:8px}.friends-inner::-webkit-scrollbar-track{background:transparent}.friends-inner::-webkit-scrollbar-thumb{background:#00c8ff66;border-radius:6px}.friends-inner::-webkit-scrollbar-thumb:hover{background:#00c8ffb3}.friend{min-height:44px;border-radius:8px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(90deg,#7800ff38,#ff008c24);border:1px solid rgba(255,255,255,.06);box-shadow:0 0 0 1px #00ffff0f inset,0 10px 24px #00000059}.friend--amigo{padding:10px;align-items:stretch;flex-direction:column}.friend-main{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;width:100%}.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#00000040;border:1px solid rgba(140,220,255,.25);box-shadow:0 0 14px #00ffff1a;flex-shrink:0}.avatar-icn{width:18px;height:18px;fill:#cdebffbf}.name{flex:1;min-width:0;font-size:15px;color:#dcf5ffd9;display:flex;align-items:center}.pill{height:22px;min-width:70px;padding:0 10px;border:0;border-radius:999px;font-size:12px;font-weight:700;color:#f0fffff2;cursor:pointer;box-shadow:0 0 0 1px #ffffff1a inset,0 10px 20px #00000059;transition:transform .12s ease,filter .12s ease;white-space:nowrap}.pill:hover{filter:brightness(1.05);transform:translateY(-1px)}.pill:active{transform:translateY(0);filter:brightness(.98)}.pill--agregar{background:linear-gradient(90deg,#6a4cff,#b24dff)}.pill--amigo{background:linear-gradient(90deg,#2dff7a,#00c2ff)}.pill--aceptar{background:linear-gradient(90deg,#44ff62,#c8ff3a);color:#0f2314f2;box-shadow:0 0 0 1px #ffffff24 inset,0 10px 20px #00000059}.pill--pending{background:linear-gradient(90deg,#f7d54a,#ff9f43);color:#000;box-shadow:0 0 0 1px #ffffff24 inset,0 10px 20px #00000059}.friend-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;position:relative;flex-shrink:0}.dropdown{position:relative}.dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:140px;display:none;flex-direction:column;background:linear-gradient(180deg,#34c283f5,#2483a7f5);border:1px solid rgba(255,255,255,.18);border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px #ffffff12 inset,0 12px 28px #00000059;z-index:30}.dropdown-menu.show{display:flex}.dropdown-item{border:none;background:transparent;color:#fffffff5;padding:10px 14px;text-align:left;font-size:12px;cursor:pointer;transition:background .12s ease}.dropdown-item:hover{background:#ffffff1f}.edit-btn{width:26px;height:26px;border:1px solid rgba(255,255,255,.12);border-radius:7px;background:#ffffff14;color:#fffffff5;cursor:pointer;display:grid;place-items:center;box-shadow:0 0 0 1px #00ffff0d inset,0 8px 16px #0000004d;transition:transform .12s ease,filter .12s ease,background .12s ease;flex-shrink:0}.edit-btn:hover{transform:translateY(-1px);filter:brightness(1.06);background:#ffffff1f}.edit-panel{width:100%;margin-top:10px;padding:14px;border-radius:10px;display:none;flex-direction:column;align-items:center;gap:12px;background:#060c18b8;border:1px solid rgba(0,255,255,.2);box-shadow:0 0 0 1px #ffffff0a inset,0 10px 24px #00000052}.edit-panel.show{display:flex}.edit-input{width:60%;min-width:160px;height:36px;padding:0 12px;border-radius:8px;border:1px solid rgba(0,255,255,.3);background:#ffffff0f;color:#f0fffff2;outline:none}.edit-input::placeholder{color:#dcf0ff73}.edit-input:focus{border-color:#00ffff8c;box-shadow:0 0 14px #00ffff1a}.edit-panel-actions{width:60%;min-width:160px;display:flex;gap:10px}.panel-btn{flex:1;height:34px;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:transform .12s ease,filter .12s ease}.panel-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.panel-btn--close{background:linear-gradient(90deg,#5a4cff,#8f54ff);color:#fffffff5}.panel-btn--send{background:linear-gradient(90deg,#29e36f,#00c2ff);color:#fffffff5}.empty-state{color:#fff;font-size:18px;text-align:center;padding:40px 20px}.loader-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:200px;gap:16px;color:#dcf5ffd9;font-size:15px}.spinner{width:36px;height:36px;border:3px solid rgba(0,255,255,.1);border-top-color:#0ffc;border-radius:50%;animation:spinner-spin .8s linear infinite}@keyframes spinner-spin{to{transform:rotate(360deg)}}@media(max-width:520px){.login-card{height:310px}.field-label{font-size:20px}.field-input{font-size:18px;height:52px}.btn{font-size:22px;height:56px}}@media(min-width:1024px){.friends-card{width:460px;border-radius:14px}.friends-inner{padding:20px;gap:16px}.friend{min-height:56px;padding:0 14px;border-radius:10px}.friend-main{min-height:56px}.avatar{width:36px;height:36px}.avatar-icn{width:22px;height:22px}.name{font-size:15px}.pill{height:28px;min-width:90px;font-size:13px;padding:0 14px}.edit-btn{width:30px;height:30px}.dropdown-menu{min-width:160px}.dropdown-item{font-size:13px}.edit-panel{padding:16px}.edit-input{height:40px}.panel-btn{height:38px;font-size:13px}}