*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0f0f13;--bg2:#16161e;--bg3:#1e1e2a;--bg4:#252533;--border:#2a2a3a;--border2:#333348;--text:#e8e8f0;--text2:#9090a8;--text3:#6060788;--accent:#7c6af7;--accent2:#9d8fff;--cyan:#00d4ff;--teal:#00c896;--red:#ff4d6d;--violet:#b44fff;--orange:#ff8c42;--active:#00c896;--inactive:#ff4d6d;--card-radius:14px;--transition:0.18s ease}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:14px;line-height:1.6;min-height:100vh}
.loading-screen{display:flex;align-items:center;justify-content:center;min-height:100vh}
.spinner{width:40px;height:40px;border:3px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.page-wrapper{max-width:600px;margin:0 auto;padding:16px;padding-bottom:40px}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0 20px}
.topbar-left{display:flex;align-items:center;gap:10px}
.topbar-logo{width:32px;height:32px;border-radius:8px;object-fit:contain}
.topbar-title{font-size:16px;font-weight:700;color:var(--text)}
.topbar-actions{display:flex;gap:8px}
.icon-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text2);width:36px;height:36px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);text-decoration:none}
.icon-btn:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)}
.icon-btn svg{width:18px;height:18px}
.tier-switcher{display:flex;background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:16px}
.tier-tab{flex:1;padding:12px 10px;text-align:center;cursor:pointer;font-size:14px;font-weight:600;color:var(--text2);transition:var(--transition);border:none;background:none;display:flex;align-items:center;justify-content:center;gap:6px}
.tier-tab.active{background:var(--accent);color:#fff}
.tier-tab:hover:not(.active){background:var(--bg4);color:var(--text)}
.tier-status{font-size:11px;padding:1px 6px;border-radius:8px;font-weight:600}
.tier-status.on{background:rgba(0,200,150,.2);color:var(--teal)}
.tier-status.off{background:rgba(255,77,109,.15);color:var(--red)}
.user-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--card-radius);padding:18px;margin-bottom:16px}
.user-card-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.user-avatar{width:44px;height:44px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;flex-shrink:0}
.user-info-main{flex:1;min-width:0}
.user-id{font-size:15px;font-weight:700;color:var(--text);line-height:1.2}
.user-expiry-badge{font-size:12px;color:var(--text2);margin-top:2px}
.user-expiry-badge.expired{color:var(--red)}
.user-expiry-badge.active{color:var(--teal)}
.user-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.user-field{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.user-field-label{font-size:11px;color:var(--text2);display:flex;align-items:center;gap:5px;margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
.user-field-label svg{width:13px;height:13px}
.user-field-value{font-size:13px;font-weight:600;color:var(--text)}
.status-active{color:var(--active)}
.status-inactive{color:var(--inactive)}
.section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--card-radius);margin-bottom:16px;overflow:hidden}
.section-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.section-title{font-size:15px;font-weight:700;color:var(--text)}
.section-badge{background:var(--bg4);border:1px solid var(--border2);color:var(--text2);font-size:12px;padding:2px 8px;border-radius:20px;font-weight:600}
.platform-selector{padding:14px 18px;border-bottom:1px solid var(--border)}
.platform-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.platform-tabs::-webkit-scrollbar{display:none}
.platform-tab{display:flex;align-items:center;gap:6px;padding:7px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text2);cursor:pointer;white-space:nowrap;transition:var(--transition);font-size:13px;font-weight:500}
.platform-tab svg{width:15px;height:15px;flex-shrink:0}
.platform-tab:hover{background:var(--bg4);color:var(--text);border-color:var(--border2)}
.platform-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.app-tabs{display:flex;gap:6px;padding:12px 18px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.app-tabs::-webkit-scrollbar{display:none}
.app-tab{display:flex;align-items:center;gap:7px;padding:6px 12px;background:transparent;border:1px solid transparent;border-radius:8px;color:var(--text2);cursor:pointer;white-space:nowrap;transition:var(--transition);font-size:13px;font-weight:500;position:relative}
.app-tab-icon{width:22px;height:22px;flex-shrink:0}
.app-tab-icon svg{width:22px;height:22px}
.app-tab:hover{background:var(--bg3);color:var(--text)}
.app-tab.active{background:var(--bg3);border-color:var(--border2);color:var(--text)}
.app-tab.featured::after{content:'★';position:absolute;top:-4px;right:-4px;font-size:9px;color:var(--accent)}
.install-blocks{padding:14px 18px;display:flex;flex-direction:column;gap:10px}
.install-block{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px}
.install-block-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.block-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.block-icon svg{width:16px;height:16px}
.block-icon.cyan{background:rgba(0,212,255,.15);color:var(--cyan)}
.block-icon.teal{background:rgba(0,200,150,.15);color:var(--teal)}
.block-icon.red{background:rgba(255,77,109,.15);color:var(--red)}
.block-icon.violet{background:rgba(180,79,255,.15);color:var(--violet)}
.block-icon.orange{background:rgba(255,140,66,.15);color:var(--orange)}
.block-text{flex:1;min-width:0}
.block-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px}
.block-desc{font-size:12px;color:var(--text2);line-height:1.5}
.block-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;text-decoration:none;transition:var(--transition);white-space:nowrap}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2)}
.btn-outline{background:var(--bg4);border:1px solid var(--border2);color:var(--text)}
.btn-outline:hover{background:var(--bg3);border-color:var(--accent);color:var(--accent2)}
.btn-sub{background:rgba(0,200,150,.15);border:1px solid rgba(0,200,150,.3);color:var(--teal)}
.btn-sub:hover{background:rgba(0,200,150,.25);border-color:var(--teal)}
.keys-list{display:flex;flex-direction:column}
.key-item{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--border);transition:var(--transition)}
.key-item:last-child{border-bottom:none}
.key-item:hover{background:var(--bg3)}
.key-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}
.key-icon.active-key{background:rgba(0,200,150,.15)}
.key-icon.inactive-key{background:rgba(255,77,109,.15)}
.key-icon svg{width:16px;height:16px}
.key-info{flex:1;min-width:0}
.key-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.key-sub{font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.key-actions{display:flex;gap:6px;flex-shrink:0}
.key-action-btn{width:30px;height:30px;background:var(--bg4);border:1px solid var(--border);border-radius:7px;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.key-action-btn:hover{background:var(--bg3);color:var(--text);border-color:var(--border2)}
.key-action-btn svg{width:14px;height:14px}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
.modal-overlay.hidden{display:none}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--card-radius);width:100%;max-width:360px;overflow:hidden}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);font-weight:700;font-size:15px}
.modal-close{background:none;border:none;color:var(--text2);cursor:pointer;font-size:18px;line-height:1;padding:2px 6px;border-radius:6px;transition:var(--transition)}
.modal-close:hover{background:var(--bg3);color:var(--text)}
.modal-body{padding:20px;display:flex;flex-direction:column;align-items:center;gap:14px}
#qr-container{background:#fff;padding:12px;border-radius:10px;display:flex;align-items:center;justify-content:center}
#qr-container canvas,#qr-container img{display:block}
.qr-hint{font-size:12px;color:var(--text2);text-align:center;line-height:1.5}
.modal-sub-url{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:11px;color:var(--text2);word-break:break-all;width:100%;text-align:center;max-height:60px;overflow-y:auto}
.copy-btn-modal{width:100%;justify-content:center}
.get-link-modal{padding:20px}
.get-link-qr-wrap{display:flex;justify-content:center;margin-bottom:16px}
.sub-link-box{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--text2);word-break:break-all;margin-bottom:12px;line-height:1.5}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg4);border:1px solid var(--border2);color:var(--text);padding:10px 20px;border-radius:20px;font-size:13px;font-weight:500;z-index:2000;opacity:0;transition:all .3s ease;white-space:nowrap;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.error-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:16px;text-align:center;padding:20px}
.error-icon{font-size:48px}
.error-title{font-size:18px;font-weight:700;color:var(--text)}
.error-desc{font-size:14px;color:var(--text2);max-width:300px}
.tier-inactive-notice{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:20px;text-align:center;margin-bottom:16px}
.tier-inactive-notice p{color:var(--text2);margin-bottom:12px;font-size:13px}
.tier-inactive-notice .btn{display:inline-flex}
@media(max-width:480px){.page-wrapper{padding:12px}.user-grid{grid-template-columns:1fr 1fr}.block-buttons{flex-direction:column}.btn{width:100%;justify-content:center}}