sphaira/index.css

@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}body{font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;max-width:800px;margin:0 auto;padding:20px;background:linear-gradient(135deg,#111f28 0,#0b1519 100%);min-height:100dvh;min-height:-webkit-fill-available;color:#fbfbfb}.container{background:#143144;border-radius:15px;padding:20px;box-shadow:0 20px 40px rgba(0,0,0,.3);border:1px solid #335e77}@media (max-width:768px){body{padding:12px}.container{padding:15px;border-radius:12px}}.unsupported-splash{text-align:center;padding:30px 15px;background:#122430;border-radius:15px;border:2px solid #fa3a5d}.unsupported-splash h2{color:#fa3a5d;font-size:1.8em;margin-bottom:15px}.unsupported-splash p{font-size:1em;line-height:1.5;margin-bottom:12px;color:#bed0d6}.browser-link,button{background:linear-gradient(45deg,#32ffcf,#5cbeff);color:#111f28;border-radius:8px;font-weight:600;transition:transform .2s,box-shadow .2s}.browser-link{display:inline-block;padding:12px 24px;text-decoration:none;margin-top:15px}.browser-link:hover,button:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(50,255,207,.4)}h1{text-align:center;margin-bottom:25px;background:linear-gradient(45deg,#32ffcf,#69ff8f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:2.2em}@media (max-width:768px){h1{font-size:1.8em;margin-bottom:20px}.unsupported-splash{padding:20px 12px}.unsupported-splash h2{font-size:1.5em}}.section{margin-bottom:20px;padding:15px;border-radius:10px;background:#122430;border-left:4px solid #32ffcf}@media (max-width:768px){.section{padding:12px;margin-bottom:15px}}button{border:0;padding:14px 26px;cursor:pointer;font-size:16px;margin:5px;min-height:48px}@media (max-width:768px){button{width:100%;margin:8px 0;padding:16px}}button:disabled{background:#335e77;color:#bed0d6;cursor:not-allowed;transform:none}.device-info,.status{padding:10px;border-radius:5px;margin:10px 0;font-size:.95em}.status.success{background-color:rgba(105,255,143,.2);color:#69ff8f;border:1px solid #69ff8f}.status.error{background-color:rgba(250,58,93,.2);color:#fa3a5d;border:1px solid #fa3a5d}.status.info{background-color:rgba(92,190,255,.2);color:#5cbeff;border:1px solid #5cbeff}.device-info{background:#0b1519;padding:12px;border-radius:8px;border:1px solid #163951;color:#bed0d6;overflow-wrap:break-word}.transfer-text{color:#32ffcf;font-weight:600}.log{background:#071013;color:#bed0d6;padding:12px;border-radius:8px;font-family:"Courier New",monospace;max-height:200px;overflow-y:auto;margin-top:12px;border:1px solid #163951;white-space:pre-wrap;font-size:.9em}h3{color:#32ffcf;margin-top:0;font-size:1.3em}@media (max-width:768px){h3{font-size:1.2em}}.log-controls{display:flex;justify-content:flex-end;margin-top:10px;flex-wrap:wrap}.log-btn{background:#163951;color:#bed0d6;padding:8px 12px;font-size:14px;margin:4px;min-height:36px}.file-queue{margin-top:15px;background:#0b1519;border-radius:8px;padding:12px;border:1px solid #163951}.file-item{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid #163951;flex-wrap:wrap}.file-item:last-child{border-bottom:none}.file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;margin-right:8px}.file-size{color:#bed0d6;margin:0 8px;font-size:.9em;white-space:nowrap}.file-actions{display:flex;gap:8px;flex-shrink:0}.queue-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap}.queue-title{font-weight:600;color:#32ffcf;margin-right:10px}.queue-count{background:#163951;color:#bed0d6;padding:4px 10px;border-radius:10px;font-size:.9em}.btn-remove{background:#ff3232;color:#fff;border:0;border-radius:4px;padding:6px 10px;cursor:pointer;font-size:13px;min-height:32px}.file-controls{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}@media (max-width:768px){.file-controls{flex-direction:column}.file-controls button{width:100%}}.btn-add{background:linear-gradient(45deg,#69ff8f,#32ffcf)}.btn-clear{background:linear-gradient(45deg,#ff3232,#ff5c5c)}.device-list{background:#0b1519;border-radius:8px;padding:12px;margin:10px 0;border:1px solid #163951}.device-list-item{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid #163951;margin-bottom:8px;flex-wrap:wrap}.device-list-item:last-child{border-bottom:none;margin-bottom:0}.device-id,.device-name{overflow:hidden;text-overflow:ellipsis}.device-name{flex:1;color:#bed0d6;min-width:0;margin-right:8px}.device-id{color:#5cbeff;font-size:.85em;margin-right:10px;max-width:40%}.hidden{display:none}.connection-toast{position:fixed;top:20px;right:20px;background:linear-gradient(45deg,#32ffcf,#69ff8f);color:#111f28;padding:15px 20px;border-radius:10px;box-shadow:0 10px 30px rgba(50,255,207,.3);font-weight:600;font-size:14px;z-index:1000;transform:translateX(400px);transition:transform .3s ease-in-out,opacity .3s ease-in-out;opacity:0;display:flex;align-items:center;gap:10px;border:2px solid rgba(50,255,207,.5);max-width:350px}@media (max-width:768px){.connection-toast{top:10px;right:10px;left:10px;max-width:none;padding:12px 16px}}.connection-toast.show{transform:translateX(0);opacity:1}.connection-toast.disconnect{background:linear-gradient(45deg,#ff3232,#ff5c5c);color:#fff;box-shadow:0 10px 30px rgba(255,50,50,.3);border:2px solid rgba(255,50,50,.5)}.connection-toast.info{background:linear-gradient(45deg,#5cbeff,#32ffcf);color:#111f28;box-shadow:0 10px 30px rgba(92,190,255,.3);border:2px solid rgba(92,190,255,.5)}.connection-toast.success{background:linear-gradient(45deg,#69ff8f,#32ffcf);color:#111f28;box-shadow:0 10px 30px rgba(105,255,143,.3);border:2px solid rgba(105,255,143,.5)}.connection-toast.error{background:linear-gradient(45deg,#ff3232,#ff5c5c);color:#fff;box-shadow:0 10px 30px rgba(255,50,50,.3);border:2px solid rgba(255,50,50,.5)}.toast-icon{font-size:18px;animation:pulse 2s infinite}.toast-close{background:0 0;border:0;color:inherit;font-size:18px;cursor:pointer;padding:0;margin:0 0 0 10px;opacity:.7;transition:opacity .2s;flex-shrink:0}.toast-close:hover{opacity:1}.progress-bar-container{margin:10px 0}.progress-bar{height:8px;background:#163951;border-radius:4px;overflow:hidden;margin-bottom:4px}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#32ffcf,#5cbeff);transition:width .3s ease}.time-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:.85em;margin-top:8px}.time-info div{display:flex;justify-content:space-between}@media (max-width:768px) and (orientation:portrait){.device-list-item{flex-direction:column;align-items:flex-start}.device-id{margin:5px 0;max-width:100%}.file-item{flex-direction:column;align-items:flex-start}.file-actions{margin-top:8px;width:100%;justify-content:flex-end}}@media (max-width:768px) and (orientation:landscape){.container{padding:12px}h1{font-size:1.6em}.section,body{padding:10px}}