:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f7f8fb; background: #080b12; --cyan:#22d3ee; --blue:#2563eb; --panel:rgba(20,24,34,.82); --muted:#9299a8; }
* { box-sizing: border-box; }
html { background:#080b12; }
body { margin:0; min-height:100vh; overflow-x:hidden; background:radial-gradient(circle at 15% 0%,#0b2533 0,transparent 33%),radial-gradient(circle at 100% 35%,#0d1730 0,transparent 28%),#080b12; }
button,input { font:inherit; }
.ambient { position:fixed; z-index:-1; border-radius:50%; filter:blur(90px); opacity:.22; animation:float 9s ease-in-out infinite alternate; }
.ambient-one { width:240px;height:240px;background:#22d3ee;top:-90px;left:-100px; }
.ambient-two { width:280px;height:280px;background:#2563eb;right:-150px;top:38%;animation-delay:-4s; }
.topbar { min-height:106px; padding:calc(17px + env(safe-area-inset-top)) 18px 17px; display:flex;align-items:center;gap:13px;background:rgba(8,11,18,.82);border-bottom:1px solid rgba(34,211,238,.3);backdrop-filter:blur(18px);position:sticky;top:0;z-index:8;box-shadow:0 10px 30px #0007; }
.brand-logo { width:54px;height:54px;flex:0 0 auto;filter:drop-shadow(0 0 16px #22d3ee70);animation:logoIn .7s cubic-bezier(.2,1.3,.3,1) both; }
.brand-copy { min-width:0; }
.brand-copy p { margin:0;color:#fff;font-size:15px;font-weight:850;letter-spacing:.02em; }
.brand-copy p b { color:var(--cyan); }
.brand-copy h1 { margin:2px 0 1px;font-size:20px;letter-spacing:-.025em; }
.brand-copy span { display:block;color:var(--cyan);font-size:9px;font-weight:800;letter-spacing:.1em; }
.icon-button { margin-left:auto;border:1px solid #22d3ee66;width:44px;height:44px;border-radius:13px;background:#111722;color:var(--cyan);font-size:25px;box-shadow:0 0 18px #22d3ee18;transition:.2s; }
.icon-button:active { transform:scale(.94); }
.icon-button.spinning { animation:spin .8s linear infinite; }
main { width:min(100%,680px);margin:auto;padding:19px 15px calc(30px + env(safe-area-inset-bottom)); }
.alert { padding:13px 14px;margin-bottom:14px;border-radius:13px;background:#1b1920;border:1px solid #fbbf2460;color:#fde68a;font-size:12px;line-height:1.45;animation:rise .45s both; }
.alert.error { background:#211419;border-color:#fb718566;color:#fecdd3; }
.hidden { display:none !important; }
.code-card { min-height:164px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:23px 20px;border:1px solid #22d3ee66;border-radius:20px;background:linear-gradient(135deg,rgba(8,145,178,.23),rgba(37,99,235,.26)),#111622;box-shadow:0 14px 38px #0008,0 0 28px #22d3ee20;position:relative;overflow:hidden;animation:rise .55s .05s both; }
.code-card::after { content:"";position:absolute;inset:-100% auto -100% -45%;width:25%;background:linear-gradient(90deg,transparent,#ffffff18,transparent);transform:skewX(-17deg);animation:sweep 5s 1.2s infinite; }
.code-card .kicker { display:block;color:#67e8f9;font-size:10px;font-weight:900;letter-spacing:.13em; }
.code-card strong { display:block;margin:10px 0 5px;font-size:clamp(27px,9vw,42px);letter-spacing:.08em;line-height:1;text-shadow:0 0 24px #22d3ee55;overflow-wrap:anywhere; }
.code-card small { color:#aeb8ca;font-size:11px;line-height:1.35; }
.copy-button { flex:0 0 auto;border:0;border-radius:11px;padding:12px 14px;background:linear-gradient(135deg,#22d3ee,#3b82f6);color:#051019;font-weight:900;box-shadow:0 7px 20px #22d3ee3d;position:relative;z-index:1; }
.section-title { display:flex;justify-content:space-between;align-items:end;margin:25px 2px 12px;gap:10px;animation:rise .55s .12s both; }
.section-title h2 { margin:0 0 4px;font-size:19px; }
.section-title p { margin:0;color:var(--muted);font-size:11px;line-height:1.35; }
.badge { padding:6px 9px;border:1px solid #4ade8050;border-radius:999px;background:#12301e;color:#4ade80;font-size:9px;font-weight:900;white-space:nowrap;box-shadow:0 0 15px #4ade8020; }
.badge.offline { background:#321820;border-color:#fb718555;color:#fb7185; }
.collections { display:grid;gap:12px; }
.collection-card { padding:18px;border:1px solid rgba(255,255,255,.09);border-radius:17px;background:var(--panel);backdrop-filter:blur(10px);box-shadow:0 10px 28px #0005;animation:rise .55s both;transition:transform .2s,border-color .2s,box-shadow .2s; }
.collection-card:nth-child(2) { animation-delay:.1s; }
.collection-card:active { transform:scale(.99);border-color:#22d3ee66; }
.collection-head { display:flex;align-items:start;justify-content:space-between;gap:10px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08); }
.collection-head span { color:#8c95a6;font-size:10px;font-weight:850;letter-spacing:.09em;text-transform:uppercase; }
.collection-head h3 { margin:5px 0 0;font-size:24px;letter-spacing:-.035em; }
.status { padding:6px 9px !important;border:1px solid #4ade8045;border-radius:999px;background:#12301e;color:#4ade80 !important;letter-spacing:0 !important; }
.detail { display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;padding-top:14px; }
.detail + .detail { padding-top:10px; }
.detail-icon { width:40px;height:40px;display:grid;place-items:center;border:1px solid #22d3ee38;border-radius:12px;background:linear-gradient(135deg,#0e2934,#142143);font-size:18px;box-shadow:inset 0 0 16px #22d3ee10; }
.detail small { display:block;color:#8992a2;font-size:10px; }
.detail strong { display:block;margin-top:2px;font-size:14px; }
.help-card { margin-top:14px;padding:15px;display:flex;align-items:center;gap:12px;border:1px dashed #22d3ee55;border-radius:15px;background:#0d131e;animation:rise .55s .2s both; }
.help-card > span { width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:#103426;color:#4ade80;font-weight:900;box-shadow:0 0 18px #4ade8020; }
.help-card p { margin:3px 0 0;color:#8992a2;font-size:11px; }
.whatsapp-button { min-height:55px;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #4ade8060;border-radius:15px;background:linear-gradient(135deg,#16a34a,#25d366);color:#041b0d;font-weight:900;text-decoration:none;box-shadow:0 9px 25px #25d36630;animation:rise .55s .27s both,pulse 3s 1.5s infinite; }
.whatsapp-button:active { transform:translateY(1px) scale(.99); }
.signature { margin:25px auto 5px;display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;opacity:.88;animation:rise .55s .35s both; }
.signature img { width:39px;height:39px;filter:drop-shadow(0 0 10px #22d3ee55); }
.signature div { display:grid; }
.signature small { color:#7f8899;font-size:8px;font-weight:800;letter-spacing:.15em; }
.signature strong { font-size:13px; }
.signature span { color:var(--cyan);font-size:8px;font-weight:850;letter-spacing:.12em; }
.login-overlay { position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(4,7,12,.91);backdrop-filter:blur(14px); }
.login-card { width:min(100%,355px);padding:29px;border:1px solid #22d3ee55;border-radius:22px;background:linear-gradient(150deg,#151b28,#0b0f17);text-align:center;box-shadow:0 25px 70px #000,0 0 35px #22d3ee1c;animation:loginIn .45s cubic-bezier(.2,1.1,.3,1) both; }
.login-logo { width:70px;height:70px;filter:drop-shadow(0 0 18px #22d3ee66); }
.login-card h2 { margin:13px 0 5px; }
.login-card p { margin:0 0 18px;color:#9299a8;font-size:13px; }
.login-card input { width:100%;padding:15px;border:1px solid #334155;border-radius:12px;outline:0;background:#090e16;color:#fff;text-align:center;font-size:20px;letter-spacing:.15em;transition:border-color .2s,box-shadow .2s; }
.login-card input:focus { border-color:var(--cyan);box-shadow:0 0 0 3px #22d3ee18; }
.login-card button { width:100%;margin-top:10px;padding:14px;border:0;border-radius:12px;background:linear-gradient(135deg,#0891b2,#2563eb);color:white;font-weight:900;box-shadow:0 8px 24px #2563eb40; }
#loginError { display:block;min-height:20px;margin-top:9px;color:#fb7185;font-size:11px; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes float { to { transform:translate3d(25px,35px,0) scale(1.12); } }
@keyframes rise { from { opacity:0;transform:translateY(16px); } to { opacity:1;transform:none; } }
@keyframes logoIn { from { opacity:0;transform:scale(.55) rotate(-12deg); } to { opacity:1;transform:none; } }
@keyframes loginIn { from { opacity:0;transform:scale(.9) translateY(14px); } to { opacity:1;transform:none; } }
@keyframes sweep { 0%,55% { left:-45%; } 80%,100% { left:130%; } }
@keyframes pulse { 0%,100% { box-shadow:0 9px 25px #25d36630; } 50% { box-shadow:0 9px 34px #25d36660; } }
@media (min-width:700px) { .collections{grid-template-columns:repeat(2,1fr)} .topbar{padding-left:calc((100vw - 680px)/2);padding-right:calc((100vw - 680px)/2)} }
@media (max-width:430px) { .code-card strong{font-size:clamp(23px,7vw,32px);letter-spacing:.04em}.code-card{padding-right:104px}.copy-button{position:absolute;right:18px;top:70px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important;transition:none !important; } }