*{margin:0;padding:0;box-sizing:border-box}body,html{width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 50%,#0a0a2c 0,#00001a 70%,#000010 100%);font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#EEE}a{color:inherit;text-decoration:none}button{cursor:pointer;border:none;outline:none;background:none}#fireflyCanvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;background:transparent;display:block}.overlay{position:relative;z-index:1;min-height:100vh;background:rgba(10,10,40,.7);flex-direction:column;gap:24px;padding:0 24px;overflow-y:auto}.navbar,.overlay{width:100%;display:flex;align-items:center}.navbar{position:sticky;top:0;max-width:1000px;justify-content:space-between;padding:12px 16px;background:rgba(10,10,30,.9);border-radius:8px;margin-top:16px;z-index:2}.navbar .nav-left{display:flex;align-items:center;gap:12px}.navbar .nav-left .logo{font-size:1.8rem;font-weight:700;color:#4A90E2;text-shadow:0 0 6px rgba(74,144,226,.7)}.navbar .nav-left .slogan{font-size:.9rem;color:#CCC;opacity:.85}.navbar .nav-right{display:flex;gap:20px;align-items:center}.navbar .nav-right a{font-size:.95rem;color:#DDD;padding:6px 8px;border-radius:6px;transition:background .2s,color .2s}.navbar .nav-right a:hover{background:rgba(74,144,226,.2);color:#FFF}.navbar .nav-right a.active{background:#4A90E2;color:#000}.header{text-align:center;margin-top:8px}.header .tagline{font-size:1rem;color:#CCC;opacity:.85}.clip-form{margin-top:16px;width:100%;max-width:600px;display:flex;gap:8px}.clip-form input[type=text]{flex:1;padding:12px 16px;border-radius:6px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#FFF;font-size:1rem;outline:none;transition:border-color .2s,background .2s}.clip-form input[type=text]::-moz-placeholder{color:rgba(255,255,255,.6)}.clip-form input[type=text]::placeholder{color:rgba(255,255,255,.6)}.clip-form input[type=text]:focus{border-color:#4A90E2;background:rgba(74,144,226,.1)}.clip-form button{padding:0 24px;border-radius:8px;background:linear-gradient(135deg,#4A90E2,#3B7AC6);color:#FFF;font-size:1rem;font-weight:700;position:relative;transition:transform .1s,filter .2s;box-shadow:0 0 12px rgba(74,144,226,.4)}.clip-form button:hover{background:linear-gradient(135deg,#3B7AC6,#3375A9)}.clip-form button:active{transform:scale(.97)}.list-header{width:100%;max-width:960px;display:flex;justify-content:space-between;align-items:center;margin-top:32px}.list-header h2{font-size:1.5rem;color:#EEE}.tabs{display:flex;gap:12px}.tab{padding:6px 14px;border-radius:20px;font-size:.9rem;background:rgba(255,255,255,.1);color:#EEE;transition:background .2s,color .2s}.tab.active{background:#4A90E2;color:#000}.tab:hover{background:rgba(74,144,226,.2)}.clip-list{width:100%;max-width:960px;margin-top:16px;display:flex;flex-direction:column;gap:12px;padding-bottom:32px}.clip-card{display:flex;align-items:center;background:rgba(10,10,60,.5);border-radius:12px;padding:12px 16px;transition:background .2s}.clip-card:hover{background:rgba(10,10,60,.7)}.clip-thumb{width:120px;height:70px;flex-shrink:0;border-radius:8px;overflow:hidden;background:#333;display:flex;align-items:center;justify-content:center}.clip-thumb img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.clip-info{flex:1;margin-left:16px;display:flex;flex-direction:column;gap:4px}.clip-date-title{display:flex;align-items:center;gap:12px;font-size:.9rem}.clip-date{color:#CCC;opacity:.8}.clip-title{font-size:1rem;font-weight:500;color:#FFF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clip-meta{margin-top:4px;display:flex;gap:12px;font-size:.85rem;color:#DDD}.badge,.clip-meta{align-items:center}.badge{display:inline-flex;gap:4px;padding:4px 8px;border-radius:12px;font-size:.78rem;background:rgba(255,255,255,.15);color:#FFF}.badge svg{width:16px;height:16px}.clip-ratio{margin-left:auto;font-size:.9rem;color:#EEE;font-weight:500}.clip-action{margin-left:16px;color:#CCC;opacity:.8;transition:color .2s}.clip-action:hover{color:#FFF}footer{margin-top:auto;width:100%;max-width:960px;text-align:center;padding:16px 0;font-size:.8rem;background:rgba(10,10,30,.8);border-radius:8px;color:#AAA;opacity:.8;margin-bottom:24px}@media (max-width:768px){.clip-form{flex-direction:column}.clip-form button{width:100%}.clip-thumb{width:100px;height:60px}.clip-date-title{flex-direction:column;align-items:flex-start;gap:2px}.clip-meta{flex-wrap:wrap;gap:8px}.clip-action{margin-left:8px}.navbar .nav-right{gap:12px}}@media (max-width:480px){.logo{font-size:1.6rem}.clip-thumb,.slogan{display:none}.clip-card{padding:10px 14px}.clip-ratio{display:none}.navbar{padding:10px 12px;flex-wrap:wrap}.navbar .nav-right{flex-wrap:wrap;gap:8px}.navbar .nav-right a{font-size:.85rem;padding:4px 6px}}