:root{--bg-app:#121212;--bg-card:#1e1e1e;--bg-input:#2a2a2a;--text-primary:#e0e0e0;--text-secondary:#aaa;--accent:coral;--accent-hover:tomato;--border:#333;--danger:#ef4444;--shadow-md:0 4px 6px -1px #0000004d, 0 2px 4px -1px #0003;--transition:all .2s ease-in-out;background-color:var(--bg-app);color:var(--text-primary);font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif}body{min-width:320px;min-height:100vh;margin:0;display:flex}#root{width:100%}*{box-sizing:border-box}.site-card{background-color:var(--bg-card);border:1px solid var(--border);transition:var(--transition);border-radius:8px;flex-direction:column;display:flex;overflow:hidden}.site-card:hover{border-color:#444;transform:translateY(-3px);box-shadow:0 10px 15px -3px #0006}.card-link{color:inherit;flex-grow:1;padding:1.5rem;text-decoration:none;display:block}.card-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.card-header h3{color:var(--text-primary);margin:0;font-size:1.25rem;font-weight:700}.site-url{color:var(--accent);word-break:break-all;margin:0 0 1rem;font-family:Courier New,Courier,monospace;font-size:.9rem}.site-description{color:var(--text-secondary);-webkit-line-clamp:3;-webkit-box-orient:vertical;margin:0;font-size:.95rem;line-height:1.5;display:-webkit-box;overflow:hidden}.card-actions{border-top:1px solid var(--border);background-color:#0000001a;display:flex}.action-btn{color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;border:none;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px;font-size:.85rem;display:flex}.action-btn:not(:last-child){border-right:1px solid var(--border)}.action-btn.edit:hover{color:var(--accent);background-color:#ff7f501a}.action-btn.delete:hover{color:var(--danger);background-color:#ef44441a}.pricing-banner{letter-spacing:.5px;text-transform:uppercase;z-index:10;pointer-events:none;border-radius:20px;width:auto;padding:6px 14px;font-size:.65rem;font-weight:800;position:absolute;top:16px;right:16px;transform:none;box-shadow:0 4px 6px #0003}.pricing-banner.free{color:#121212;background-color:#10b981}.pricing-banner.paid{color:#fff;background-color:#f59e0b}.card-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;padding-right:130px;display:flex}.header-title-group{align-items:center;gap:10px;display:flex}.status-dot{border-radius:50%;width:12px;height:12px;display:inline-block;box-shadow:0 0 8px}.status-dot.online{color:#10b981;background-color:#10b981}.status-dot.offline{color:#ef4444;background-color:#ef4444}.card-meta{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.type-tag{border-radius:4px;align-items:center;gap:5px;padding:4px 8px;font-size:.75rem;font-weight:700;display:flex}.type-tag.download{color:#f3f4f6;background-color:#f97316}.type-tag.web{color:#d1d5db;background-color:#374151}.star{color:#4b5563;font-size:1.1rem}.star.active{color:#fbbf24;text-shadow:0 0 5px #fbbf2480}.site-card{position:relative}.site-card.draggable{cursor:grab;border:1px dashed #555}.site-card.draggable:active{cursor:grabbing;opacity:.8}.tags-container{flex-wrap:wrap;gap:6px;margin-bottom:1rem;display:flex}.mini-tag{border:1px solid var(--border);color:var(--text-secondary);text-transform:lowercase;background-color:#ffffff0d;border-radius:12px;padding:2px 8px;font-size:.65rem}.badge-temporal{text-transform:uppercase;letter-spacing:1px;vertical-align:middle;border-radius:4px;padding:2px 6px;font-size:.55rem;font-weight:800;animation:2s infinite pulse-glow;display:inline-block}.badge-temporal.new{color:#38bdf8;background-color:#0ea5e933;border:1px solid #0284c7}.badge-temporal.updated{color:#c084fc;background-color:#a855f733;border:1px solid #9333ea}@keyframes pulse-glow{0%{box-shadow:0 0 #ffffff1a}50%{box-shadow:0 0 8px #fff3}to{box-shadow:0 0 #ffffff1a}}.modern-form{background-color:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow-md);width:100%;max-width:700px;transition:var(--transition);border-radius:8px;padding:2rem}.modern-form.editing{border-color:var(--accent)}.modern-form h3{color:var(--text-secondary);text-transform:uppercase;margin:0 0 1.5rem;font-size:1.1rem}.input-group{grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;display:grid}.modern-form input,.modern-form textarea{background-color:var(--bg-input);border:1px solid var(--border);width:100%;color:var(--text-primary);transition:var(--transition);border-radius:4px;padding:12px;font-family:inherit}.modern-form textarea{resize:vertical;margin-bottom:1rem}.modern-form input:focus,.modern-form textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px #ff7f5033}.form-actions{gap:1rem;display:flex}.btn-submit,.btn-cancel{cursor:pointer;transition:var(--transition);border:none;border-radius:4px;align-items:center;gap:8px;padding:12px 20px;font-weight:600;display:flex}.btn-submit{background-color:var(--accent);color:#121212}.btn-submit:hover{background-color:var(--accent-hover)}.btn-cancel{color:var(--text-secondary);border:1px solid var(--border);background-color:#0000}.btn-cancel:hover{color:var(--text-primary);background-color:#ffffff0d}.options-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:1rem;display:grid}.app-layout{max-width:1200px;margin:0 auto;padding:2rem}.app-header{border-bottom:1px solid var(--border);margin-bottom:3rem;padding-bottom:1.5rem}.app-header h1{letter-spacing:-1px;margin:0;font-size:2.5rem;font-weight:800}.highlight{color:var(--accent)}.app-header p{color:var(--text-secondary);margin:.5rem 0 0}.form-section{justify-content:center;margin-bottom:3rem;display:flex}.grid-section h2{color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;margin-bottom:1.5rem;font-size:1.2rem}.sites-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;display:grid}.header-main{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.btn-toggle-mode{color:var(--text-secondary);border:1px solid var(--border);cursor:pointer;transition:var(--transition);background-color:#0000;border-radius:4px;align-items:center;gap:8px;padding:10px 16px;font-weight:600;display:flex}.btn-toggle-mode:hover{color:var(--text-primary);background-color:#ffffff0d;border-color:#555}.btn-toggle-mode.active{color:var(--accent);border-color:var(--accent);background-color:#ff7f501a}.section-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.search-bar{width:100%;max-width:300px;position:relative}.search-bar .search-icon{color:var(--text-secondary);position:absolute;top:50%;left:10px;transform:translateY(-50%)}.search-bar input{background-color:var(--bg-input);border:1px solid var(--border);width:100%;color:var(--text-primary);transition:var(--transition);border-radius:20px;padding:10px 10px 10px 35px}.search-bar input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px #ff7f5033}