/* ===========================================================
   Earnlix — premium dark / gold / green design system (v2)
   Mobile-first, fully responsive
   =========================================================== */
:root{
  --bg:#06090d; --bg-2:#0b1118; --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --gold:#f5c542; --gold-2:#ffe28a; --green:#22c55e; --green-2:#5eea8f;
  --text:#eef2f7; --muted:#97a3b6; --danger:#f87171;
  --r:20px; --r-sm:14px;
  --shadow:0 24px 70px rgba(0,0,0,.5);
  --font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.6;min-height:100vh;overflow-x:hidden;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.icon{flex-shrink:0;vertical-align:middle}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.text-center{text-align:center}
.hide-xs{display:inline}
@media(max-width:420px){.hide-xs{display:none}}

/* ambient background */
.bg-orbs{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(900px 520px at 88% -8%,rgba(34,197,94,.17),transparent 62%),
  radial-gradient(800px 480px at -8% 6%,rgba(245,197,66,.15),transparent 62%),
  linear-gradient(180deg,var(--bg),var(--bg-2))}
.bg-orbs span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;animation:drift 18s ease-in-out infinite}
.bg-orbs span:nth-child(1){width:340px;height:340px;background:var(--gold);left:-120px;bottom:10%}
.bg-orbs span:nth-child(2){width:300px;height:300px;background:var(--green);right:-100px;top:45%;animation-delay:-9s}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}

/* ---------- Navbar ---------- */
.navbar{position:sticky;top:0;z-index:60;background:rgba(6,9,13,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.navbar-inner{max-width:1180px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-icon{width:38px;height:38px;object-fit:contain}
.brand-word{height:26px;width:auto;object-fit:contain}
.nav-links{display:none;gap:28px;font-size:.92rem;color:var(--muted)}
.nav-links a{transition:color .2s}.nav-links a:hover{color:var(--gold-2)}
.nav-actions{display:flex;gap:8px;align-items:center}
@media(min-width:900px){.nav-links{display:flex}.brand-icon{width:42px;height:42px}.brand-word{height:30px}}
@media(max-width:380px){.brand-word{display:none}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:999px;font:600 .95rem var(--font);cursor:pointer;border:1px solid transparent;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap;text-align:center}
.btn:active{transform:scale(.98)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1b1500;box-shadow:0 10px 28px rgba(245,197,66,.22)}
.btn-gold:hover{box-shadow:0 14px 36px rgba(245,197,66,.4);transform:translateY(-1px)}
.btn-green{background:linear-gradient(135deg,var(--green),var(--green-2));color:#04250f;box-shadow:0 10px 28px rgba(34,197,94,.24)}
.btn-green:hover{box-shadow:0 14px 36px rgba(34,197,94,.42);transform:translateY(-1px)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--gold);background:var(--surface-2)}
.btn-block{width:100%}.btn-sm{padding:9px 16px;font-size:.85rem}.btn-lg{padding:16px 32px;font-size:1rem}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.btn .spinner{width:16px;height:16px;border:2px solid rgba(0,0,0,.25);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn.loading .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Landing: hero ---------- */
.hero{padding:56px 0 40px}
.hero-grid{display:grid;gap:44px;align-items:center}
@media(min-width:960px){.hero{padding:88px 0 60px}.hero-grid{grid-template-columns:1.1fr .9fr;gap:60px}}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--gold-2);font-size:.8rem;font-weight:500}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(34,197,94,.2)}
.hero h1{font-size:clamp(2.1rem,6.2vw,3.7rem);line-height:1.1;font-weight:800;margin:20px 0 18px;letter-spacing:-.02em}
.grad{background:linear-gradient(120deg,var(--gold) 10%,var(--green-2) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);font-size:clamp(1rem,2.2vw,1.12rem);max-width:560px;margin:0 0 30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:480px){.hero-cta .btn{width:100%}}
.trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;color:var(--muted);font-size:.85rem}
.trust span{display:inline-flex;align-items:center;gap:8px}.trust .icon{color:var(--green-2)}

.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:300px}
.hero-visual::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(245,197,66,.28),rgba(34,197,94,.16) 55%,transparent 72%);filter:blur(28px)}
.hero-visual .ring{position:absolute;width:82%;aspect-ratio:1;border-radius:50%;border:1px dashed var(--line-2);animation:spin 40s linear infinite}
.hero-logo{position:relative;width:min(300px,62vw);filter:drop-shadow(0 26px 40px rgba(0,0,0,.55));animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.float-card{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:rgba(14,20,29,.82);border:1px solid var(--line-2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow);font-size:.78rem;line-height:1.25;animation:float 7s ease-in-out infinite}
.float-card b{display:block;font-size:.88rem}
.float-card .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(245,197,66,.25),rgba(34,197,94,.25));color:var(--gold-2)}
.fc-1{top:6%;left:0}.fc-2{bottom:10%;left:2%;animation-delay:-2s}.fc-3{top:26%;right:0;animation-delay:-4s}
@media(max-width:520px){.float-card{transform:scale(.86)}.fc-1{left:-4px}.fc-3{right:-4px}}

/* ---------- Sections ---------- */
.section{padding:64px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 44px}
.sec-head .eyebrow{color:var(--gold-2);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.sec-head h2{font-size:clamp(1.55rem,4vw,2.3rem);margin:10px 0;font-weight:700;letter-spacing:-.01em}
.sec-head p{color:var(--muted);margin:0}
.grid{display:grid;gap:18px}
.grid-features{grid-template-columns:1fr}
@media(min-width:600px){.grid-features{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.grid-features{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .25s,border-color .25s,background .25s}
.card:hover{transform:translateY(-5px);border-color:rgba(245,197,66,.4);background:var(--surface-2)}
.f-ic{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;margin-bottom:16px;color:var(--gold-2);background:linear-gradient(135deg,rgba(245,197,66,.2),rgba(34,197,94,.2));border:1px solid var(--line)}
.card h3{margin:0 0 6px;font-size:1.06rem}.card p{margin:0;color:var(--muted);font-size:.92rem}

.steps{display:grid;gap:18px;counter-reset:s}
@media(min-width:800px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;padding:28px 26px 26px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:24px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#1b1500;background:linear-gradient(135deg,var(--gold),var(--gold-2));box-shadow:0 8px 20px rgba(245,197,66,.3)}
.step h3{margin:6px 0 6px;font-size:1.05rem}.step p{margin:0;color:var(--muted);font-size:.92rem}

.cta{display:grid;gap:26px;align-items:center;padding:34px 26px;border-radius:26px;border:1px solid var(--line-2);background:linear-gradient(135deg,rgba(245,197,66,.14),rgba(34,197,94,.13))}
.cta img{width:120px;margin:0 auto}
.cta h2{margin:0 0 8px;font-size:clamp(1.4rem,3.6vw,2rem)}.cta p{margin:0 0 20px;color:var(--muted)}
@media(min-width:800px){.cta{grid-template-columns:auto 1fr;padding:44px 48px;gap:44px}.cta img{width:170px}}
@media(max-width:799px){.cta{text-align:center}.cta .hero-cta{justify-content:center}}

/* ---------- Auth (login / signup / verify) ---------- */
.auth{display:grid;min-height:calc(100vh - 62px)}
@media(min-width:980px){.auth{grid-template-columns:1fr 1fr}}
.auth-aside{display:none;position:relative;overflow:hidden;padding:60px 56px;border-right:1px solid var(--line);background:linear-gradient(160deg,rgba(245,197,66,.13),rgba(34,197,94,.1) 60%,transparent)}
@media(min-width:980px){.auth-aside{display:flex;flex-direction:column;justify-content:center}}
.auth-aside .big-logo{width:min(250px,60%);margin-bottom:28px;filter:drop-shadow(0 22px 34px rgba(0,0,0,.5));animation:float 6s ease-in-out infinite}
.auth-aside h2{font-size:2rem;line-height:1.2;margin:0 0 12px;font-weight:700}
.auth-aside p{color:var(--muted);margin:0 0 28px;max-width:420px}
.perks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.perks li{display:flex;gap:12px;align-items:center;color:#d6deea;font-size:.95rem}
.perks .pk{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--green-2);border:1px solid var(--line)}
.auth-main{display:flex;align-items:center;justify-content:center;padding:32px 16px 48px}
.auth-card{width:100%;max-width:480px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--line-2);border-radius:26px;padding:34px 28px;box-shadow:var(--shadow)}
@media(max-width:480px){.auth-card{padding:26px 18px;border-radius:22px}}
.auth-head{text-align:center;margin-bottom:24px}
.auth-head .mark{width:64px;height:64px;margin:0 auto 12px}
.auth-head h1{margin:0 0 4px;font-size:1.55rem;letter-spacing:-.01em}
.auth-head p{margin:0;color:var(--muted);font-size:.92rem}

.field{margin-bottom:16px}
.field>label{display:block;font-size:.82rem;font-weight:500;color:#c3cddc;margin-bottom:7px}
.field .opt{color:var(--muted);font-weight:400}
.row-2{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:520px){.row-2{grid-template-columns:1fr 1fr}}
.input-wrap{position:relative}
.input-wrap>.lead-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;transition:color .2s}
.input{width:100%;padding:14px 14px 14px 44px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);font:400 .95rem var(--font);outline:none;transition:border-color .2s,background .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.input::placeholder{color:#5f6c80}
.input:focus{border-color:var(--gold);background:rgba(255,255,255,.06);box-shadow:0 0 0 4px rgba(245,197,66,.12)}
.input-wrap:focus-within>.lead-ic{color:var(--gold-2)}
select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2397a3b6' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
select.input option{background:#0f1620;color:var(--text)}
.input.has-error{border-color:var(--danger)}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;border-radius:10px}
.eye:hover{color:var(--gold-2)}.eye .off{display:none}.eye.on .off{display:block}.eye.on .on{display:none}
.has-eye .input{padding-right:48px}
.error-text{color:var(--danger);font-size:.8rem;margin:6px 2px 0}
.help-text{color:var(--muted);font-size:.78rem;margin:6px 2px 0}
.alert{display:flex;gap:10px;padding:13px 15px;border-radius:14px;font-size:.88rem;margin-bottom:18px;border:1px solid transparent}
.alert-error{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.3);color:#fca5a5}
.alert-success{background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.3);color:#86efac}
.auth-foot{text-align:center;margin:22px 0 0;font-size:.9rem;color:var(--muted)}
.auth-foot a{color:var(--gold-2);font-weight:600}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.75rem;margin:20px 0;text-transform:uppercase;letter-spacing:.1em}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* password strength */
.strength{display:flex;gap:5px;margin-top:9px}
.strength i{flex:1;height:4px;border-radius:4px;background:var(--line);transition:background .25s}
.strength[data-s="1"] i:nth-child(-n+1){background:#f87171}
.strength[data-s="2"] i:nth-child(-n+2){background:#fb923c}
.strength[data-s="3"] i:nth-child(-n+3){background:var(--gold)}
.strength[data-s="4"] i:nth-child(-n+4){background:var(--green)}
.strength-label{font-size:.75rem;color:var(--muted);margin-top:5px}

/* ---------- Professional avatar picker ---------- */
.avatar-block{display:flex;flex-direction:column;align-items:center;margin-bottom:22px}
.avatar-drop{position:relative;width:132px;height:132px;border-radius:50%;padding:4px;cursor:pointer;background:conic-gradient(from 180deg,var(--gold),var(--green),var(--gold));transition:transform .2s,box-shadow .2s}
.avatar-drop:hover{transform:scale(1.03);box-shadow:0 12px 34px rgba(245,197,66,.25)}
.avatar-drop.drag{transform:scale(1.06);box-shadow:0 0 0 6px rgba(34,197,94,.25)}
.avatar-drop .avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#111925;border:3px solid var(--bg-2)}
.avatar-drop .cam{position:absolute;right:2px;bottom:4px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#1b1500;background:linear-gradient(135deg,var(--gold),var(--gold-2));border:3px solid var(--bg-2);box-shadow:0 6px 16px rgba(0,0,0,.4)}
.avatar-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.avatar-actions .btn{padding:8px 15px;font-size:.8rem}
.avatar-note{color:var(--muted);font-size:.78rem;margin:8px 0 0;text-align:center}
.avatar-note.ok{color:var(--green-2)}

/* crop modal */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(3,5,8,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal.open{display:flex;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{width:100%;max-width:400px;background:#0d141d;border:1px solid var(--line-2);border-radius:24px;padding:22px;box-shadow:var(--shadow)}
.modal-card h3{margin:0 0 4px;font-size:1.1rem}.modal-card p{margin:0 0 16px;color:var(--muted);font-size:.85rem}
.crop-stage{width:100%;max-width:320px;margin:0 auto;aspect-ratio:1;border-radius:18px;overflow:hidden;touch-action:none;cursor:grab;background:#05080c}
.crop-stage.grabbing{cursor:grabbing}
.crop-stage canvas{width:100%;height:100%;display:block}
.zoom-row{display:flex;align-items:center;gap:12px;margin:18px auto 4px;max-width:320px;color:var(--muted);font-size:.8rem}
.zoom-row input{flex:1;accent-color:var(--gold)}
.modal-actions{display:flex;gap:10px;margin-top:18px}.modal-actions .btn{flex:1}

/* OTP */
.otp-row{display:flex;gap:8px;justify-content:center;margin:8px 0 20px}
.otp-box{width:100%;max-width:52px;height:60px;text-align:center;font:700 1.5rem var(--font);border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s}
.otp-box:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(245,197,66,.12)}
.otp-box.filled{border-color:rgba(34,197,94,.6)}
@media(max-width:380px){.otp-row{gap:6px}.otp-box{height:52px;font-size:1.25rem}}

/* ---------- Dashboard ---------- */
.dash{padding:28px 0 64px}
.welcome{position:relative;overflow:hidden;border-radius:26px;padding:28px 24px;border:1px solid var(--line-2);background:linear-gradient(135deg,rgba(245,197,66,.17),rgba(34,197,94,.14) 70%);display:grid;gap:22px}
.welcome::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(245,197,66,.3),transparent 70%);pointer-events:none}
@media(min-width:760px){.welcome{grid-template-columns:auto 1fr;align-items:center;padding:36px 40px;gap:30px}}
.w-avatar{position:relative;width:96px;height:96px;border-radius:50%;padding:3px;background:conic-gradient(from 180deg,var(--gold),var(--green),var(--gold))}
.w-avatar img,.w-avatar .initials{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid #0b1118;background:#111925}
.w-avatar .initials{display:grid;place-items:center;font-weight:700;font-size:1.9rem;color:var(--gold-2)}
.w-avatar .badge-ok{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#04250f;border:3px solid #0b1118}
.welcome .eyebrow{color:var(--gold-2);font-weight:600;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}
.welcome h1{margin:4px 0 10px;font-size:clamp(1.55rem,4.4vw,2.25rem);line-height:1.2;letter-spacing:-.01em;word-break:break-word}
.welcome p{margin:0;color:#c5cfde;max-width:680px;font-size:.98rem}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;background:rgba(0,0,0,.28);border:1px solid var(--line);font-size:.78rem;color:#d6deea}
.chip b{color:var(--gold-2);font-weight:600}

.dash-grid{display:grid;gap:20px;margin-top:22px}
@media(min-width:960px){.dash-grid{grid-template-columns:1.15fr .85fr;align-items:start}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.panel-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.panel-head .ph-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:var(--gold-2);background:linear-gradient(135deg,rgba(245,197,66,.2),rgba(34,197,94,.2));border:1px solid var(--line)}
.panel h2{margin:0;font-size:1.15rem}
.panel .desc{color:var(--muted);font-size:.9rem;margin:0 0 20px}

.app-box{display:flex;gap:18px;align-items:center;padding:16px;border-radius:18px;background:rgba(0,0,0,.25);border:1px solid var(--line);margin-bottom:18px}
.app-box img{width:68px;height:68px;border-radius:18px;background:#0b1118;padding:8px;border:1px solid var(--line-2);object-fit:contain}
.app-box b{display:block;font-size:1.05rem}.app-box span{color:var(--muted);font-size:.82rem}
.ver{display:inline-block;margin-top:4px;padding:2px 10px;border-radius:999px;font-size:.72rem;background:rgba(34,197,94,.15);color:var(--green-2);border:1px solid rgba(34,197,94,.3)}
.progress{display:none;margin-top:18px}
.progress.show{display:block}
.bar{height:12px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.bar>i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--gold));background-size:200% 100%;animation:shine 1.6s linear infinite;transition:width .15s}
@keyframes shine{to{background-position:-200% 0}}
.prog-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:9px;font-size:.8rem;color:var(--muted)}
.prog-meta b{color:var(--text)}
.prog-done{display:none;margin-top:14px;padding:13px 15px;border-radius:14px;font-size:.86rem;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:#a7f3c4}
.prog-done.show{display:flex;gap:10px}
.install-steps{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px dashed var(--line);display:grid;gap:12px;counter-reset:i}
.install-steps li{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;color:#c5cfde}
.install-steps li::before{counter-increment:i;content:counter(i);flex-shrink:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700;color:#1b1500;background:var(--gold)}

.cred{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid var(--line);margin-bottom:12px}
.cred .meta{flex:1;min-width:0}
.cred label{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.cred .value{font:500 .93rem 'Courier New',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-btn{flex-shrink:0;height:38px;min-width:38px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:11px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font:500 .78rem var(--font);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.icon-btn:hover{border-color:var(--gold);color:var(--gold-2)}
.icon-btn.copied{background:var(--green);color:#04250f;border-color:var(--green)}
.icon-btn[disabled]{opacity:.45;cursor:not-allowed}
.note{display:flex;gap:10px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);font-size:.8rem;color:var(--muted)}
.note .icon{color:var(--green-2);margin-top:2px}
.why{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.why li{display:flex;gap:12px;align-items:center;font-size:.9rem;color:#d3dbe8}
.why .pk{width:34px;height:34px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--gold-2);border:1px solid var(--line)}
.stack{display:grid;gap:20px}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:90}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);font-size:.84rem}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer-word{height:24px;width:auto}.footer p{margin:0}
@media(max-width:560px){.footer-inner{justify-content:center;text-align:center;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ---------- Dashboard: mobile-first polish ---------- */
.dash{padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
.welcome{text-align:left}
.w-avatar{margin:0}
@media(max-width:759px){
  .container{padding:0 16px}
  .dash{padding-top:16px}
  .welcome{border-radius:22px;padding:24px 18px 22px;justify-items:center;text-align:center;gap:16px}
  .welcome p{font-size:.92rem}
  .welcome::after{width:180px;height:180px;right:-70px;top:-70px}
  .chips{justify-content:center;gap:8px}
  .chip{font-size:.74rem;max-width:100%;overflow:hidden}
  .chip b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:959px){
  .dash-grid{gap:16px;margin-top:16px}
  .stack{gap:16px}
}
@media(max-width:600px){
  .panel{padding:20px 16px;border-radius:18px}
  .panel-head{gap:10px}
  .panel-head .ph-ic{width:38px;height:38px;border-radius:12px}
  .panel h2{font-size:1.02rem;line-height:1.3}
  .panel .desc{font-size:.86rem;margin-bottom:16px}
  .app-box{gap:14px;padding:14px;border-radius:16px}
  .app-box img{width:58px;height:58px;border-radius:16px}
  .btn-lg{padding:16px 22px;min-height:54px}
  .prog-meta{font-size:.76rem}
  .install-steps{margin-top:18px;padding-top:16px;gap:14px}
  .install-steps li{font-size:.85rem}
  .cred{flex-wrap:wrap;gap:10px 8px;padding:12px}
  .cred .meta{flex:1 1 100%}
  .cred .value{font-size:.9rem}
  .cred .icon-btn{flex:1 1 0;height:42px}
  .why li{font-size:.88rem}
  .note{font-size:.78rem}
}
@media(max-width:360px){
  .container{padding:0 12px}
  .welcome h1{font-size:1.4rem}
  .app-box img{width:52px;height:52px}
}