*{box-sizing:border-box}body{background:#0b1120;min-height:100vh;margin:0;padding:40px 20px;font-family:system-ui,-apple-system,sans-serif}#root{flex-direction:column;justify-content:center;max-width:600px;min-height:calc(100vh - 80px);margin:0 auto;display:flex}h2{color:#f8fafc;margin:0;font-size:32px}h3{color:#f8fafc;margin:0;font-size:18px}p{color:#94a3b8;margin:0 0 24px}input{color:#f8fafc;background:#1e293b;border:2px solid #334155;border-radius:8px;width:100%;padding:14px 16px;font-size:16px;transition:border-color .1s}input:focus{border-color:#38bdf8;outline:none}input.valid{border-color:#38bdf8}input.invalid{border-color:#ef4444}input::placeholder{color:#64748b}button{cursor:pointer;color:#94a3b8;background:0 0;border:2px solid #334155;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;transition:all .1s}button:hover{color:#38bdf8;background:0 0;border-color:#38bdf8}.btn-fill{color:#94a3b8;background:0 0;border:2px solid #334155}.btn-fill:hover{color:#0b1120;background:#38bdf8;border-color:#38bdf8}.btn-outline{color:#94a3b8;background:0 0;border:2px solid #334155;transition:all .1s}.btn-outline:hover{color:#fff;background:#ef4444;border-color:#ef4444}.error{color:#ef4444;margin:8px 0;font-size:14px}.header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.header-actions{align-items:center;gap:8px;display:flex}.section-title{color:#64748b;text-transform:uppercase;letter-spacing:1px;margin:24px 0 12px;font-size:12px;font-weight:600}.centered{text-align:center}.centered h2{margin-bottom:24px;font-size:36px}.login-buttons{flex-direction:row;justify-content:center;gap:12px;display:flex}.btn-help{color:#94a3b8;background:0 0;border:2px solid #334155;transition:all .1s}.btn-help:hover{color:#0b1120;background:#38bdf8;border-color:#38bdf8}.link-item{background:#1e293b;border:2px solid #334155;border-radius:12px;justify-content:space-between;align-items:center;margin-bottom:12px;padding:16px;display:flex}.link-info{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.link-path{color:#38bdf8;font-size:15px}.link-url{color:#64748b;text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.link-actions{gap:8px;margin-left:16px;display:flex}.icon-btn{color:#94a3b8;background:0 0;border:2px solid #334155;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;padding:0;transition:all .1s;display:flex;position:relative}.icon-btn:hover{color:#38bdf8;border-color:#38bdf8}.icon-btn.danger{color:#94a3b8;background:0 0;border:2px solid #334155;transition:all .1s}.icon-btn.danger:hover{color:#fff;background:#dc2626;border-color:#dc2626}.icon-btn.submit{color:#94a3b8;background:0 0;border:2px solid #334155;transition:all .1s}.icon-btn.submit:hover{color:#fff;background:#38bdf8;border-color:#38bdf8}.tooltip{color:#f8fafc;white-space:nowrap;background:#334155;border-radius:4px;margin-bottom:4px;padding:4px 8px;font-size:12px;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.add-link-form{align-items:center;gap:8px;margin-bottom:15px;display:flex}.add-link-form input{flex:1}.username-setup{text-align:center}.username-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.username-header h2{margin:0}.username-form{gap:12px;display:flex}.username-form button{width:auto;height:auto;padding:12px 24px}.username-form input{flex:1;margin-bottom:0}.loading{color:#64748b;text-align:center}.help-btn{margin-left:8px}.modal-overlay{z-index:100;background:#000000d9;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{background:#1e293b;border:2px solid #334155;border-radius:16px;width:100%;max-width:600px;max-height:80vh;padding:24px;overflow-y:auto}.modal-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.modal-header h2{margin:0}.help-section{margin-bottom:24px}.help-section:last-child{margin-bottom:0}.help-section h2{margin-bottom:8px}.help-section h3{color:#38bdf8;margin-bottom:8px}.help-section p{margin-bottom:12px;font-size:16px}.mock-ui{background:#0b1120;border:2px solid #334155;border-radius:8px;padding:12px}.mock-ui h2{margin:0;font-size:24px}.example-link{color:#64748b;flex-wrap:wrap;align-items:center;gap:12px;font-size:13px;display:flex}.example-link .arrow{color:#38bdf8}.spinner{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}button:disabled{opacity:.7;cursor:not-allowed}
