:root{--primary: #0088cc;--primary-hover: #0077b5;--bg: #0f172a;--card-bg: rgba(30, 41, 59, .7);--text: #f8fafc;--text-muted: #94a3b8;--border: rgba(255, 255, 255, .1);--success: #10b981;--error: #ef4444;--pending: #f59e0b}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Outfit,sans-serif;background:radial-gradient(circle at top right,#1e1b4b,#0f172a);color:var(--text);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:1.5rem}.container{max-width:480px;width:100%}header{text-align:center;margin-bottom:1.5rem;animation:fadeInDown .6s ease-out}header h1{font-size:2.25rem;font-weight:700;background:linear-gradient(to right,#38bdf8,#818cf8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem}header p{color:var(--text-muted);font-size:1rem}.tabs{display:flex;background:#ffffff0d;padding:.25rem;border-radius:1rem;margin-bottom:1.5rem;border:1px solid var(--border)}.tab-btn{flex:1;padding:.75rem;border:none;background:transparent;color:var(--text-muted);font-family:inherit;font-weight:600;cursor:pointer;border-radius:.75rem;transition:all .2s}.tab-btn.active{background:var(--card-bg);color:#fff;box-shadow:0 4px 6px -1px #0000001a}.glass-form{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:1.5rem;padding:2rem;box-shadow:0 25px 50px -12px #00000080;animation:scaleIn .5s ease-out}.form-group{margin-bottom:1.5rem}label{display:block;font-weight:600;margin-bottom:.5rem;font-size:.875rem;color:#e2e8f0}input[type=text],input[type=password]{width:100%;background:#0f172a99;border:1px solid var(--border);border-radius:.75rem;padding:.75rem 1rem;color:#fff;font-family:inherit;transition:all .2s}input[type=text]:focus,input[type=password]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #08c3}.file-upload-wrapper{position:relative;display:flex;align-items:center;gap:1rem}.file-upload-wrapper input[type=file]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.file-custom-btn{background:#ffffff0d;border:1px dashed var(--border);border-radius:.75rem;padding:.75rem 1.25rem;font-size:.875rem;transition:all .2s}.file-upload-wrapper:hover .file-custom-btn{background:#ffffff1a;border-color:var(--primary)}#file-name{font-size:.75rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.id-input-wrapper{display:flex;gap:.5rem;margin-bottom:.75rem}.remove-btn{background:#ef44441a;color:var(--error);border:none;border-radius:.5rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.remove-btn:hover{background:var(--error);color:#fff}.secondary-btn{background:transparent;color:var(--primary);border:1px solid var(--primary);border-radius:.75rem;padding:.5rem 1rem;font-size:.8125rem;font-weight:600;cursor:pointer;transition:all .2s;width:100%;margin-top:.25rem}.secondary-btn:hover{background:#0088cc1a}.submit-btn{width:100%;background:linear-gradient(135deg,#0ea5e9,#6366f1);color:#fff;border:none;border-radius:.75rem;padding:1rem;font-size:1rem;font-weight:700;cursor:pointer;margin-top:1rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000004d}.submit-btn.loading .loader{display:block;position:absolute;top:50%;left:50%;margin:-10px 0 0 -10px}.submit-btn.loading span{opacity:0}.status-message{margin-top:1.5rem;padding:1rem;border-radius:.75rem;text-align:center;font-size:.875rem}.status-message.success,.status-message.accepted{background:#10b9811a;color:var(--success);border:1px solid rgba(16,185,129,.2)}.status-message.error,.status-message.rejected{background:#ef44441a;color:var(--error);border:1px solid rgba(239,68,68,.2)}.status-message.pending{background:#f59e0b1a;color:var(--pending);border:1px solid rgba(245,158,11,.2)}.hidden{display:none!important}.subscriptions-list{display:flex;flex-direction:column;gap:1.5rem}.sub-card{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:1.25rem;padding:1.5rem;display:flex;gap:1.5rem;align-items:flex-start;transition:transform .2s}.sub-card:hover{transform:translateY(-4px);border-color:#fff3}.sub-info{flex:1}.sub-date{font-size:.75rem;color:var(--text-muted);display:block;margin-bottom:.5rem}.sub-ids{font-size:1rem;margin-bottom:1rem}.sub-status-badge{display:inline-block;padding:.25rem .75rem;border-radius:1rem;font-size:.75rem;font-weight:700;text-transform:uppercase;background:#ffffff1a}.sub-photo img{width:100px;height:100px;object-fit:cover;border-radius:.75rem;border:1px solid var(--border)}.sub-actions{display:flex;flex-direction:column;gap:.5rem}.accept-btn{background:var(--success);color:#fff;border:none;padding:.5rem;border-radius:.5rem;cursor:pointer}.reject-btn{background:var(--error);color:#fff;border:none;padding:.5rem;border-radius:.5rem;cursor:pointer}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}.loader{display:none;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.animate-slide{animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.channels-list{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem;width:100%}.channel-link{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:#ffffff08;border:1px solid var(--border);border-radius:1rem;color:#fff;text-decoration:none;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.channel-link:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);transform:translate(-100%);transition:transform .5s}.channel-link:hover{background:#ffffff12;border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 12px #0003}.channel-link:hover:before{transform:translate(100%)}.channel-link .channel-name{display:flex;align-items:center;gap:.75rem}.channel-link .channel-name:before{content:"📢";font-size:1.1rem}.channel-link .join-tag{font-size:.75rem;background:var(--primary);padding:.25rem .75rem;border-radius:2rem;text-transform:uppercase;letter-spacing:.5px}.success-hero{text-align:center;padding:3rem 1rem;animation:fadeIn .8s ease-out}.success-icon{font-size:5rem;margin-bottom:1.5rem;filter:drop-shadow(0 0 15px rgba(16,185,129,.4));animation:bounceIn .8s cubic-bezier(.68,-.55,.265,1.55)}.success-hero h1{font-size:2.5rem;margin-bottom:1rem;background:#fff;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.success-hero p{color:var(--text-muted);max-width:400px;margin:0 auto 2.5rem}.premium-channels-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:2rem}.premium-channel-card{background:linear-gradient(145deg,#ffffff0d,#ffffff03);border:1px solid var(--border);border-radius:1.5rem;padding:1.5rem;display:flex;align-items:center;gap:1.5rem;text-decoration:none;color:#fff;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.premium-channel-card:hover{transform:translateY(-8px) scale(1.02);border-color:var(--primary);background:linear-gradient(145deg,#ffffff14,#ffffff05);box-shadow:0 20px 40px -10px #0006}.channel-icon-wrapper{width:60px;height:60px;background:#0088cc1a;border-radius:1.25rem;display:flex;align-items:center;justify-content:center;font-size:1.75rem;transition:all .3s}.premium-channel-card:hover .channel-icon-wrapper{background:var(--primary);transform:rotate(12deg)}.channel-content{flex:1}.channel-content h3{font-size:1.125rem;margin-bottom:.25rem}.channel-content p{font-size:.875rem;color:var(--text-muted)}.action-arrow{width:32px;height:32px;background:#ffffff1a;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s}.premium-channel-card:hover .action-arrow{background:#fff;color:var(--bg);transform:translate(4px)}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05);opacity:1}70%{transform:scale(.9)}to{transform:scale(1)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
