:root{
  --bg:#0A0A0C; --bg2:#0E0E12; --surf:#15151B; --surf2:#1C1C24; --surf3:#23232C;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --tx:#F4F4F7; --tx2:#A2A2AE; --tx3:#6C6C78;
  --acc:#FF5C36; --acc-d:#E84a26; --owned:#3DDC84; --soon:#FFC53D; --info:#36C5FF;
  --r:14px; --r2:18px; --rs:10px;
  --shadow:0 18px 40px -16px rgba(0,0,0,.65);
  --maxw:1320px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--tx);
  font-family:'Inter',system-ui,sans-serif; font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 600px at 80% -10%, rgba(255,92,54,.10), transparent 60%),
                   radial-gradient(900px 500px at -5% 0%, rgba(54,197,255,.06), transparent 55%);
  background-attachment:fixed;
}
h1,h2,h3,h4,.disp{font-family:'Space Grotesk',sans-serif;letter-spacing:-.01em}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:14px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--acc);color:#160a06}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#26262e;border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:var(--rs);font-weight:600;font-size:14px;transition:.16s ease;white-space:nowrap}
.btn-primary{background:var(--acc);color:#180a06}
.btn-primary:hover{background:#ff6e4d;transform:translateY(-1px);box-shadow:0 10px 26px -10px rgba(255,92,54,.7)}
.btn-ghost{background:var(--surf2);color:var(--tx);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--surf3);border-color:var(--line2)}
.btn-owned{background:rgba(61,220,132,.14);color:var(--owned);border:1px solid rgba(61,220,132,.3)}
.btn-owned:hover{background:rgba(61,220,132,.22)}
.btn-lg{height:50px;padding:0 26px;font-size:15px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

.badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:7px;font-size:11px;font-weight:600;letter-spacing:.02em;border:1px solid var(--line)}
.badge-live{color:var(--owned);background:rgba(61,220,132,.12);border-color:rgba(61,220,132,.25)}
.badge-soon{color:var(--soon);background:rgba(255,197,61,.12);border-color:rgba(255,197,61,.25)}
.badge-maint{color:var(--tx2);background:var(--surf2)}
.badge-plan{color:var(--info);background:rgba(54,197,255,.12);border-color:rgba(54,197,255,.25)}
.badge-owned{color:var(--owned);background:rgba(61,220,132,.12);border-color:rgba(61,220,132,.25)}
.badge-dark{background:rgba(0,0,0,.5);color:#fff;backdrop-filter:blur(6px);border-color:rgba(255,255,255,.18)}

/* ---------- LOGIN ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.login-art{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:48px}
.login-art::before{content:"";position:absolute;inset:0;background:
  radial-gradient(700px 700px at 20% 20%,rgba(255,92,54,.45),transparent 60%),
  radial-gradient(700px 700px at 90% 90%,rgba(54,120,255,.4),transparent 60%),
  linear-gradient(140deg,#1a0f0b,#0a0a0c 70%)}
.login-art>*{position:relative}
.login-art .grain{position:absolute;inset:0;opacity:.5;background-size:160px;background-image:var(--noise)}
.login-tag{font-family:'Space Grotesk';font-size:52px;line-height:1.05;font-weight:700;max-width:9em}
.login-tag span{color:var(--acc)}
.login-sub{color:#d8d2cf;margin-top:18px;font-size:15px;max-width:24em}
.login-foot{display:flex;gap:22px;color:#c9c4c1;font-size:12px}
.login-form-wrap{display:flex;align-items:center;justify-content:center;padding:40px}
.login-card{width:100%;max-width:380px}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{width:32px;height:32px;border-radius:8px;overflow:hidden;flex:none;display:block;box-shadow:0 6px 16px -8px rgba(0,0,0,.7)}
.brand-name{font-family:'Space Grotesk';font-weight:700;font-size:19px;letter-spacing:.01em}
.field{margin-top:16px}
.field label{display:block;font-size:12px;color:var(--tx2);margin-bottom:7px;font-weight:500}
.input{width:100%;height:46px;background:var(--surf);border:1px solid var(--line);border-radius:var(--rs);padding:0 14px;color:var(--tx);transition:.15s}
.input:focus{outline:none;border-color:var(--acc);background:#1a1a21;box-shadow:0 0 0 3px rgba(255,92,54,.14)}
textarea.input{height:auto;padding:11px 14px;resize:vertical;min-height:84px}
select.input{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23A2A2AE' stroke-width='2'><path d='M3 5l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 14px center}
.login-hint{margin-top:14px;font-size:12px;color:var(--tx3)}
.gbtn{width:100%;margin-top:24px;display:flex;align-items:center;justify-content:center;gap:11px;padding:13px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;color:#1f1f1f;font-weight:600;font-size:15px;cursor:pointer;transition:.15s}
.gbtn:hover{background:#f3f3f3;transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.25)}
.gbtn svg{width:18px;height:18px;flex:0 0 18px}
.auth-or{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:var(--tx3);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.auth-or::before,.auth-or::after{content:"";height:1px;background:var(--line);flex:1}
.auth-alt .field:first-child{margin-top:0}
.auth-links{display:flex;justify-content:space-between;align-items:center;margin-top:22px;font-size:13px}

/* ---------- APP SHELL ---------- */
.shell{min-height:100vh}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:20px;height:64px;padding:0 28px;
  background:rgba(10,10,12,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{padding:8px 13px;border-radius:9px;color:var(--tx2);font-weight:500;font-size:13.5px;transition:.14s}
.nav a:hover{color:var(--tx);background:var(--surf)}
.nav a.active{color:var(--tx);background:var(--surf2)}
.search{position:relative;margin-left:auto;width:320px;max-width:38vw}
.search .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--tx3);width:17px;height:17px}
.search input{width:100%;height:40px;background:var(--surf);border:1px solid var(--line);border-radius:11px;padding:0 14px 0 38px;color:var(--tx)}
.search input:focus{outline:none;border-color:var(--line2);background:#17171d}
.plan-chip{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:11px;background:var(--surf);border:1px solid var(--line);font-size:13px}
.plan-chip b{font-weight:600}
.plan-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--acc)}
.avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#2a2a33,#3a3a46);display:grid;place-items:center;font-weight:600;font-size:13px;border:1px solid var(--line2)}

.page{max-width:var(--maxw);margin:0 auto;padding:26px 28px 70px}
.sec-head{display:flex;align-items:baseline;gap:12px;margin:30px 0 16px}
.sec-head h2{font-size:21px;font-weight:600}
.sec-head .count{color:var(--tx3);font-size:13px}
.sec-head .spacer{flex:1}

/* ---------- HERO CAROUSEL ---------- */
.hero{position:relative;height:340px;border-radius:var(--r2);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;display:flex;align-items:flex-end}
.hero-slide.on{opacity:1}
.hero-art{position:absolute;inset:0}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,10,.92) 0%,rgba(8,8,10,.55) 42%,transparent 75%)}
.hero-body{position:relative;padding:38px 42px;max-width:560px}
.hero-body .badge{margin-bottom:14px}
.hero-body h1{font-size:38px;font-weight:700;line-height:1.05}
.hero-body p{color:#cfcfd6;margin:12px 0 20px;font-size:15px;max-width:42ch}
.hero-actions{display:flex;gap:12px}
.hero-dots{position:absolute;right:24px;bottom:22px;display:flex;gap:7px;z-index:3}
.hero-dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3)}
.hero-dots button.on{background:#fff;width:22px;border-radius:5px}

/* ---------- CARD GRID ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:20px}
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:.2s ease;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:var(--shadow)}
.card-cover{position:relative;aspect-ratio:16/10;overflow:hidden}
.card-cover .art{position:absolute;inset:0;transition:transform .35s ease}
.card:hover .card-cover .art{transform:scale(1.06)}
.card-cover .top{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:6px;align-items:center}
.card-cover .pin{margin-left:auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);color:var(--acc)}
.card-body{padding:13px 14px 15px}
.card-title{font-family:'Space Grotesk';font-weight:600;font-size:15.5px}
.card-tag{color:var(--tx3);font-size:12.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-foot{display:flex;align-items:center;gap:8px;margin-top:12px;min-height:30px}
.card-price{margin-left:auto;font-weight:600;font-size:13px;color:var(--tx)}
.card-price .from{color:var(--tx3);font-weight:400;font-size:11px}
/* PLAN-FIRST card foot: the monthly plan is the dominant pill; the lifetime price is small + muted secondary text */
.card-plan{display:inline-flex;align-items:baseline;gap:6px;font-family:'Space Grotesk';font-weight:700;font-size:13.5px;color:var(--acc);
  padding:5px 10px;border-radius:9px;background:rgba(255,92,54,.12);border:1px solid rgba(255,92,54,.28);letter-spacing:.01em}
.card-plan .mo{font-family:'Inter';font-weight:600;font-size:11px;color:var(--tx2)}
.card-plan.free{color:var(--owned);background:rgba(61,220,132,.12);border-color:rgba(61,220,132,.28)}
.card-plan.owned{color:var(--owned);background:rgba(61,220,132,.12);border-color:rgba(61,220,132,.28);gap:5px}
.card-plan.owned .icon{width:14px;height:14px}
.card-life{margin-left:auto;color:var(--tx3);font-weight:400;font-size:11.5px;text-align:right}

/* generated key-art */
.art{background-position:center;background-size:cover}
.art .mono{position:absolute;inset:0;display:grid;place-items:center;font-family:'Space Grotesk';font-weight:700;font-size:64px;color:rgba(255,255,255,.16);letter-spacing:.04em}
.art .grain{position:absolute;inset:0;opacity:.35;background-size:140px;background-image:var(--noise);mix-blend-mode:overlay}

/* ---------- DETAIL ---------- */
.detail{max-width:var(--maxw);margin:0 auto;padding:20px 28px 80px}
.back{display:inline-flex;align-items:center;gap:7px;color:var(--tx2);font-size:13px;margin-bottom:18px;padding:7px 11px;border-radius:9px;transition:.15s}
.back:hover{background:var(--surf);color:var(--tx)}
.detail-grid{display:grid;grid-template-columns:1fr 392px;gap:30px;align-items:start}
.dmain{display:flex;flex-direction:column;gap:22px;min-width:0}

/* gallery: a bigger stage + a tidy thumbnail strip */
.gallery{border-radius:var(--r2);overflow:hidden;border:1px solid var(--line);background:var(--surf);box-shadow:var(--shadow)}
.stage{position:relative;aspect-ratio:16/9;background:#08080a}
.stage .art{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.stage .art.on{opacity:1}
.stage .stage-grad{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(0deg,rgba(6,6,8,.55),transparent 26%),linear-gradient(180deg,rgba(6,6,8,.32),transparent 22%)}
.stage .navbtn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;z-index:4;color:#fff;opacity:0;transition:.18s ease}
.gallery:hover .stage .navbtn{opacity:1}
.stage .navbtn:hover{background:rgba(0,0,0,.82);transform:translateY(-50%) scale(1.06)}
.stage .prev{left:14px}.stage .next{right:14px}
.stage .play{position:absolute;inset:0;margin:auto;width:70px;height:70px;border-radius:50%;background:rgba(255,92,54,.94);display:grid;place-items:center;color:#180a06;z-index:3;box-shadow:0 12px 34px -8px rgba(255,92,54,.75)}
.stage .vtag{position:absolute;left:14px;bottom:14px;z-index:5}
.stage .stage-chip{position:absolute;left:14px;top:14px;z-index:5;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:9px;font-family:'Space Grotesk';font-weight:700;font-size:12px;letter-spacing:.01em;color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.16)}
.stage .stage-chip .icon{width:14px;height:14px;color:var(--acc)}
.stage .stage-count{position:absolute;right:14px;top:14px;z-index:5;height:26px;padding:0 10px;border-radius:8px;display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;color:#e9e9ef;background:rgba(0,0,0,.5);backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.14)}
.thumbs{display:flex;gap:10px;padding:12px;background:var(--bg2);overflow-x:auto;border-top:1px solid var(--line)}
.thumb{position:relative;flex:none;width:118px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;cursor:pointer;border:2px solid transparent;opacity:.55;transition:.16s ease}
.thumb.on{opacity:1;border-color:var(--acc);box-shadow:0 6px 18px -8px rgba(255,92,54,.6)}
.thumb:hover{opacity:.92;transform:translateY(-2px)}
.thumb.on:hover{transform:none}
.thumb .art,.media-thumb .art{position:absolute;inset:0}
.av .art{position:absolute;inset:0}
.thumb .pl{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.18)}
.thumb .pl .icon{width:16px;height:16px}

.dside{position:sticky;top:84px;display:flex;flex-direction:column;gap:16px}
.dhead{padding-bottom:2px}
.dtitle{font-size:32px;font-weight:700;line-height:1.06;letter-spacing:-.015em}
.dtag{color:var(--tx2);font-size:15px;margin-top:7px}
.dbadges{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}

/* version picker — a row of selectable build pills (replaces the old <select>) */
.verbox{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:14px 14px 13px}
.verbox-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.verbox-t{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--tx2)}
.verbox-t .icon{width:14px;height:14px;color:var(--acc)}
.verbox-n{margin-left:auto;font-size:11.5px;color:var(--tx3);font-weight:500}
.ver-pills{display:flex;flex-wrap:wrap;gap:9px}
.ver-pill{position:relative;flex:1 1 auto;min-width:118px;text-align:left;display:flex;flex-direction:column;gap:3px;padding:11px 13px;border-radius:var(--rs);
  background:var(--surf2);border:1px solid var(--line);color:var(--tx);cursor:pointer;transition:.15s ease;overflow:hidden}
.ver-pill:hover{border-color:var(--line2);background:var(--surf3);transform:translateY(-1px)}
.ver-pill.on{border-color:var(--acc);background:rgba(255,92,54,.12);box-shadow:0 0 0 1px var(--acc) inset, 0 10px 24px -14px rgba(255,92,54,.7)}
.ver-pill .vp-label{font-family:'Space Grotesk';font-weight:700;font-size:14.5px;letter-spacing:-.01em}
.ver-pill.on .vp-label{color:var(--acc)}
.ver-pill .vp-sub{font-size:11.5px;color:var(--tx3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ver-pill .vp-check{position:absolute;top:9px;right:9px;width:18px;height:18px;border-radius:50%;background:var(--acc);color:#180a06;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:.15s ease}
.ver-pill .vp-check .icon{width:12px;height:12px;stroke-width:3}
.ver-pill.on .vp-check{opacity:1;transform:scale(1)}
.ver-pill .vp-label{padding-right:18px}
.ver-pills.single .ver-pill{cursor:default;flex:1 1 auto}
.ver-pills.single .ver-pill:hover{transform:none}
.verbox-note{display:flex;align-items:center;gap:7px;margin-top:11px;font-size:11.5px;color:var(--tx3)}
.verbox-note .icon{width:13px;height:13px;color:var(--owned);flex:none}

.panel{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.panel .row{display:flex;align-items:center;gap:10px}
.panel .row+.row{margin-top:13px}
.panel label{font-size:12px;color:var(--tx2);font-weight:500;flex:none;width:74px}
.panel-action{display:block}
.price-big{font-family:'Space Grotesk';font-weight:700;font-size:26px}
.price-big small{font-size:13px;color:var(--tx3);font-weight:400}
/* PLAN-FIRST detail hero: the monthly plan leads as the primary call-to-action */
.plan-hero{padding:14px 16px;border-radius:var(--r);background:rgba(255,92,54,.10);border:1px solid rgba(255,92,54,.26)}
.plan-hero-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.plan-hero-name{font-family:'Space Grotesk';font-weight:700;font-size:22px;color:var(--acc);letter-spacing:-.01em}
.plan-hero-price{font-family:'Space Grotesk';font-weight:700;font-size:24px;color:var(--tx)}
.plan-hero-price small{font-size:13px;color:var(--tx3);font-weight:400}
.plan-hero-sub{margin-top:7px;font-size:12.5px;color:var(--tx2);display:flex;align-items:center;gap:7px}
.plan-hero-sub .icon{width:15px;height:15px;color:var(--acc);flex:none}
.buy-row{display:flex;gap:10px}
.buy-row .btn{flex:1}
.access-note{font-size:12px;color:var(--tx3);display:flex;align-items:center;gap:7px}
.about{background:var(--surf);border:1px solid var(--line);border-radius:var(--r2);padding:22px 24px}
.about h3{font-size:18px;font-weight:600;margin-bottom:11px;letter-spacing:-.01em}
.about p{color:var(--tx2);font-size:14.5px;line-height:1.72}
.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:20px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.meta-i{background:var(--surf);padding:13px 15px}
.meta .k{color:var(--tx3);font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.meta .v{font-size:14px;font-weight:600;margin-top:3px;color:var(--tx)}
@media(max-width:560px){.meta{grid-template-columns:1fr 1fr}}

/* ---------- ADMIN ---------- */
.admin{display:grid;grid-template-columns:212px 1fr;min-height:calc(100vh - 64px)}
.admin-side{border-right:1px solid var(--line);padding:22px 14px;background:var(--bg2)}
.admin-side .lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);padding:0 10px;margin:6px 0 8px}
.admin-side a{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:10px;color:var(--tx2);font-weight:500;font-size:13.5px}
.admin-side a:hover{background:var(--surf);color:var(--tx)}
.admin-side a.active{background:var(--surf2);color:var(--tx)}
.admin-main{padding:26px 30px;max-width:1040px}
.admin-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.admin-head h1{font-size:24px;font-weight:600}
.admin-head .spacer{flex:1}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.kpi{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px}
.kpi .v{font-family:'Space Grotesk';font-weight:700;font-size:26px}
.kpi .k{color:var(--tx3);font-size:12px;margin-top:2px}
.table{width:100%;border-collapse:collapse;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.table th{text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--tx3);font-weight:600;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--bg2)}
.table td{padding:13px 16px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:rgba(255,255,255,.02)}
.tac{display:flex;gap:6px}
.iconbtn{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--surf2);border:1px solid var(--line);color:var(--tx2)}
.iconbtn:hover{background:var(--surf3);color:var(--tx)}
.iconbtn.danger:hover{color:#ff6b6b;border-color:rgba(255,107,107,.4)}
.cell-user{display:flex;align-items:center;gap:10px}
.cell-user .av{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#2a2a33,#3a3a46);display:grid;place-items:center;font-size:11px;font-weight:600}
.rank-pill{font-size:11px;font-weight:600;padding:3px 9px;border-radius:7px;background:var(--surf2);border:1px solid var(--line)}
.dropzone{border:1.5px dashed var(--line2);border-radius:var(--r);padding:22px;text-align:center;color:var(--tx3);background:var(--bg2);transition:.15s;cursor:pointer}
.dropzone:hover{border-color:var(--acc);color:var(--tx2);background:#141017}
.media-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.media-thumb{position:relative;width:130px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.media-thumb .x{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:6px;background:rgba(0,0,0,.6);display:grid;place-items:center;color:#fff}

/* ---------- MODAL ---------- */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(5,5,7,.6);backdrop-filter:blur(4px);display:grid;place-items:center;padding:24px;animation:fade .15s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{width:100%;max-width:540px;background:var(--surf);border:1px solid var(--line2);border-radius:var(--r2);box-shadow:0 30px 80px -20px #000;overflow:hidden;animation:pop .18s ease}
@keyframes pop{from{transform:translateY(10px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:18px;font-weight:600}
.modal-head .x{margin-left:auto;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--tx2);background:var(--surf2)}
.modal-head .x:hover{background:var(--surf3);color:var(--tx)}
.modal-body{padding:20px;max-height:70vh;overflow:auto}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 20px;border-top:1px solid var(--line)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.buy-opt{display:flex;gap:13px;align-items:center;padding:15px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;transition:.15s}
.buy-opt:hover{border-color:var(--line2);background:var(--surf2)}
.buy-opt.sel{border-color:var(--acc);background:rgba(255,92,54,.08)}
.buy-opt .ic{width:40px;height:40px;border-radius:11px;background:var(--surf2);display:grid;place-items:center;color:var(--acc)}
.buy-opt .t{font-weight:600}
.buy-opt .s{color:var(--tx3);font-size:12px}
.buy-opt .p{margin-left:auto;font-family:'Space Grotesk';font-weight:700;font-size:18px}

.plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.plan-card{position:relative;background:var(--surf2);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px;text-align:center}
.plan-card.cur{border-color:var(--owned)}
.plan-tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--acc);color:#180a06;font-size:10px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap}
.plan-name{font-family:'Space Grotesk';font-weight:600;font-size:17px}
.plan-price{font-family:'Space Grotesk';font-weight:700;font-size:26px;margin:6px 0 2px}
.plan-price span{font-size:13px;color:var(--tx3);font-weight:400}
.plan-blurb{font-size:12px;color:var(--tx3);min-height:32px;margin-bottom:12px}
.plan-card .btn{width:100%}
/* downgrade CTA — clearly free, no emerald cost */
.btn.plan-down{color:var(--tx2)}
.btn.plan-down:hover{color:var(--tx);border-color:var(--line2)}
/* "starts at your renewal date" — the deferred-downgrade note under a Downgrade CTA */
.plan-down-note{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:7px;font-size:11px;color:var(--tx3);line-height:1.3}
.plan-down-note .icon{width:13px;height:13px;color:var(--soon);flex:none}
.pricing-cta+.plan-down-note{margin-top:9px}
.btn .free-tag{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--owned);
  background:rgba(61,220,132,.14);border:1px solid rgba(61,220,132,.3);border-radius:6px;padding:1px 7px;margin-left:2px}
@media(max-width:620px){.plans-grid{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.plans-grid{grid-template-columns:1fr}}

/* install / get-app page */
.install-hero{text-align:center;padding:30px 0 26px}
.install-hero .badge{display:inline-flex}
.install-hero h1{font-family:'Space Grotesk';font-size:36px;font-weight:700;line-height:1.08}
.install-hero p{color:var(--tx2);font-size:16px;margin:14px auto 0;max-width:48ch;line-height:1.6}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 30px}
.step{display:flex;gap:13px;align-items:flex-start;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.step-n{flex:none;width:30px;height:30px;border-radius:9px;background:var(--acc);color:#180a06;font-family:'Space Grotesk';font-weight:700;display:grid;place-items:center;font-size:15px}
.step-t{font-weight:600;font-size:14.5px}
.step-s{color:var(--tx3);font-size:13px;margin-top:3px;line-height:1.5}
.dl-cta{text-align:center;padding:18px 0 10px}
.dl-cta .btn{min-width:300px}
.dl-note{color:var(--tx3);font-size:13px;margin-top:12px;display:flex;align-items:center;justify-content:center;gap:7px}
@media(max-width:680px){.steps{grid-template-columns:1fr}}

/* toasts */
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(22px);z-index:200;display:flex;align-items:stretch;gap:0;background:#15151c;border:1px solid var(--line2);color:var(--tx);border-radius:14px;box-shadow:0 26px 54px -20px rgba(0,0,0,.85);max-width:84vw;opacity:0;pointer-events:none;overflow:hidden;transition:opacity .26s ease, transform .26s cubic-bezier(.2,.9,.3,1)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .toast-ic{display:flex;align-items:center;justify-content:center;width:46px;background:rgba(255,92,54,.14);color:var(--acc)}
.toast .toast-ic .icon{width:19px;height:19px}
.toast .toast-msg{padding:13px 18px 13px 14px;font-size:13.5px;font-weight:500;line-height:1.45}
.toast-error .toast-ic{background:rgba(226,75,110,.18);color:#ff7a9c}
.toast-info .toast-ic{background:rgba(54,197,255,.15);color:var(--info)}
.toast-success .toast-ic{background:rgba(61,220,132,.15);color:var(--owned)}
.live-dot{display:flex;align-items:center;gap:6px;color:var(--owned);font-size:12px;font-weight:600}
.live-dot .icon{width:14px;height:14px}

.empty{text-align:center;color:var(--tx3);padding:70px 0}
.empty .icon{width:40px;height:40px;margin:0 auto 14px;color:var(--tx3)}

/* connection / agent */
.conn{display:flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:11px;background:var(--surf);border:1px solid var(--line);font-size:13px;color:var(--tx2);cursor:pointer}
.conn .d{width:7px;height:7px;border-radius:50%;background:#5a5a64}
.conn.on{color:var(--owned);border-color:rgba(61,220,132,.3);background:rgba(61,220,132,.08)}
.conn.on .d{background:var(--owned);box-shadow:0 0 0 3px rgba(61,220,132,.18)}
.conn-big{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid rgba(61,220,132,.3);background:rgba(61,220,132,.08);border-radius:var(--r);color:var(--owned)}
.conn-big.off{border-color:var(--line);background:var(--surf2);color:var(--tx2)}
.conn-big .icon{width:22px;height:22px;flex:none}
.conn-big .ct{font-weight:600;color:var(--tx)}
.conn-big .cs{font-size:12.5px;color:var(--tx3)}
.conflict{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:11px 13px;border:1px solid rgba(255,197,61,.35);background:rgba(255,197,61,.08);border-radius:var(--r);color:var(--soon);font-size:13px}
.conflict .icon{flex:none;margin-top:1px}
.conflict b{color:#ffd98a}
.dl-link{display:inline-flex;align-items:center;gap:7px;color:var(--tx2);font-size:12.5px;cursor:pointer}
.dl-link:hover{color:var(--tx)}
.agent-off{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--tx2);line-height:1.55}
.agent-off .icon{flex:none;margin-top:2px;color:var(--tx3)}
.agent-off b{color:var(--tx)}

/* ---------- LIVE LAUNCH PROGRESS BAR ---------- */
/* premium, on-theme inline bar shown under the Launch button while a launch is in flight */
.dlbar-host:empty{display:none}
.dlbar{margin-top:12px;padding:13px 14px 14px;border-radius:var(--r);background:linear-gradient(180deg,rgba(255,92,54,.10),var(--surf2));
  border:1px solid rgba(255,92,54,.30);box-shadow:0 14px 30px -18px rgba(255,92,54,.55);animation:dlbar-in .26s ease}
@keyframes dlbar-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dlbar-label{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--tx);margin-bottom:11px;line-height:1.3}
.dlbar-ic{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;flex:none;
  background:rgba(255,92,54,.16);color:var(--acc)}
.dlbar-ic .icon{width:15px;height:15px}
.dlbar-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlbar-pct{flex:none;font-family:'Space Grotesk';font-weight:700;font-size:13px;color:var(--acc);letter-spacing:.01em}
.dlbar-track{position:relative;height:9px;border-radius:6px;overflow:hidden;background:rgba(0,0,0,.42);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.dlbar-fill{position:absolute;inset:0 auto 0 0;width:0;height:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--acc-d),var(--acc));
  box-shadow:0 0 14px -2px rgba(255,92,54,.85);transition:width .5s cubic-bezier(.3,.8,.3,1)}
/* moving sheen on the determinate fill */
.dlbar-fill::after{content:"";position:absolute;inset:0;border-radius:6px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  background-size:200% 100%;animation:dlbar-sheen 1.5s linear infinite}
/* indeterminate (queued / launch) — a travelling segment, full-width track */
.dlbar.indet .dlbar-fill{width:38%;animation:dlbar-indet 1.25s ease-in-out infinite}
.dlbar.indet .dlbar-fill::after{animation:none}
@keyframes dlbar-sheen{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes dlbar-indet{0%{left:-40%;right:auto}50%{left:35%}100%{left:100%}}
/* success state — green fill, no sheen */
.dlbar-ok{background:linear-gradient(180deg,rgba(61,220,132,.12),var(--surf2));border-color:rgba(61,220,132,.34);
  box-shadow:0 14px 30px -18px rgba(61,220,132,.5)}
.dlbar-ok .dlbar-ic{background:rgba(61,220,132,.16);color:var(--owned)}
.dlbar-ok .dlbar-fill{background:linear-gradient(90deg,#2fb46b,var(--owned));box-shadow:0 0 14px -2px rgba(61,220,132,.8)}
.dlbar-ok .dlbar-fill::after{animation:none}
/* error state — red fill */
.dlbar-err{background:linear-gradient(180deg,rgba(226,75,110,.12),var(--surf2));border-color:rgba(226,75,110,.4);
  box-shadow:none}
.dlbar-err .dlbar-ic{background:rgba(226,75,110,.18);color:#ff7a9c}
.dlbar-err .dlbar-fill{background:linear-gradient(90deg,#c23a5a,#ff7a9c);box-shadow:none}
.dlbar-err .dlbar-fill::after{animation:none}

/* account page */
.account{max-width:920px;margin:0 auto;padding:30px 28px 70px}
.account .sec-head{align-items:center}
.acct-search{margin-left:0;width:260px;max-width:48vw}
.acct-search input{height:38px}
@media(max-width:560px){.acct-search{width:100%;max-width:none}}
.acct-hero{display:flex;align-items:center;gap:18px;margin-bottom:24px}
.acct-hero .av{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,#2a2a33,#3a3a46);display:grid;place-items:center;font-size:22px;font-weight:700;border:1px solid var(--line2)}
.acct-hero h1{font-size:26px;font-weight:600}
.acct-hero .sub{color:var(--tx2);margin-top:3px}
.panels{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.row2{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.row2 .ct2{font-weight:600;font-size:14px}
.row2 .cs2{font-size:12px;color:var(--tx3)}
.toggle{margin-left:auto;width:46px;height:27px;border-radius:20px;background:var(--surf3);border:1px solid var(--line2);position:relative;cursor:pointer;transition:.18s;flex:none}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:#cfcfd6;transition:.18s}
.toggle.on{background:var(--acc);border-color:var(--acc)}
.toggle.on::after{left:21px;background:#180a06}

/* client editor (admin) — sectioned modal */
.ce-sec{border:1px solid var(--line);border-radius:var(--r);padding:15px 16px 16px;background:var(--bg2);margin-bottom:14px}
.ce-sec:last-child{margin-bottom:0}
.ce-sec-t{display:flex;align-items:center;gap:8px;font-family:'Space Grotesk';font-weight:600;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--tx2);margin-bottom:13px}
.ce-sec-t .icon{width:16px;height:16px;color:var(--acc)}
.ce-sec-t small{text-transform:none;letter-spacing:0}
.ce-sec .field:first-of-type{margin-top:0}
.ce-check{display:flex;align-items:center;gap:9px;margin-top:13px;cursor:pointer;font-size:13.5px;color:var(--tx)}
.ce-check input{width:16px;height:16px;accent-color:var(--acc);flex:none}

/* version editor (admin) */
.veditor{display:flex;flex-direction:column;gap:10px}
.vrow{border:1px solid var(--line);border-radius:var(--r);padding:12px;background:var(--surf)}
.vrow-head{display:flex;gap:10px;align-items:center}
.vrow-head input{flex:1;height:40px}
.vmove{display:flex;flex-direction:column;gap:3px;flex:none}
.vmove .iconbtn{height:17px;min-width:26px;padding:0;line-height:1}
.vrow-default{border-color:rgba(61,220,132,.35);box-shadow:0 0 0 1px rgba(61,220,132,.12) inset}
.vup{display:flex;gap:8px;margin-top:10px}
.vup .dz{flex:1;border:1.4px dashed var(--line2);border-radius:9px;padding:9px;text-align:center;color:var(--tx3);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.vup .dz:hover{border-color:var(--acc);color:var(--tx2)}
.vup .dz.has{border-style:solid;border-color:rgba(61,220,132,.4);color:var(--owned);background:rgba(61,220,132,.06)}
.vup .dz .icon{flex:none}
.vempty{margin-top:10px;font-size:12px;color:var(--tx3);text-align:center;padding:8px;border:1px dashed var(--line);border-radius:8px}
.vminis{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.vmini{width:78px;aspect-ratio:16/10;border-radius:7px;overflow:hidden;border:1px solid var(--line);position:relative}
.vmini .art{position:absolute;inset:0}
.vmini-x{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:6px;background:rgba(0,0,0,.62);display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.18);z-index:2}
.vmini-x:hover{background:rgba(255,92,54,.9)}
.vmini-x .icon{width:13px;height:13px}

/* ---------- EMERALDS + REFERRAL ---------- */
/* emerald glyph + amount, used everywhere a balance/price appears */
.em{display:inline-flex;align-items:center;gap:5px;font-family:'Space Grotesk';font-weight:700}
.em b{font-weight:700}
.em-ic{width:18px;height:18px;flex:none;stroke:none}
.em-ic-sm{width:14px;height:14px;flex:none;stroke:none}
.em-ic-lg{width:34px;height:34px;flex:none;stroke:none}
/* topbar emerald chip — sits just before the plan-chip, same height/feel */
.em-chip{display:flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:11px;cursor:pointer;font-size:13px;
  background:rgba(61,220,132,.10);border:1px solid rgba(61,220,132,.30);color:var(--owned);transition:.15s}
.em-chip:hover{background:rgba(61,220,132,.18);border-color:rgba(61,220,132,.45)}
.em-chip b{font-family:'Space Grotesk';font-weight:700;font-size:14px;color:var(--tx)}
.em-chip .em-ic{width:17px;height:17px}

/* referral note on the signup screen */
.ref-note{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 13px;border-radius:var(--rs);
  background:rgba(61,220,132,.10);border:1px solid rgba(61,220,132,.28);color:var(--owned);font-size:13px;font-weight:500}
.ref-note .icon{width:17px;height:17px;flex:none;color:var(--owned)}

/* wallet / earn page */
.wallet-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:18px;align-items:start}
.wallet-balance{padding:22px}
.wb-label{font-size:12px;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.wb-amount{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:700;font-size:44px;line-height:1;margin:10px 0 6px}
.wb-amount b{font-weight:700}
.wb-sub{color:var(--tx2);font-size:13.5px}
.wb-buy-label{font-size:12px;color:var(--tx2);font-weight:600;margin:20px 0 10px}
.em-packs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.em-pack{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 10px;border-radius:var(--r);
  background:var(--surf2);border:1px solid var(--line);transition:.15s;cursor:pointer;text-align:center}
.em-pack:hover{border-color:rgba(61,220,132,.45);background:rgba(61,220,132,.08);transform:translateY(-2px)}
.em-pack-amt{display:flex;align-items:center;gap:6px;font-family:'Space Grotesk';font-weight:700;font-size:17px;color:var(--tx)}
.em-pack{position:relative}
.em-pack-usd{font-size:12.5px;color:var(--tx3);font-weight:600}
.em-pack-bonus{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--owned);color:#06371d;font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:20px;white-space:nowrap;box-shadow:0 4px 12px -4px rgba(61,220,132,.6)}

/* referral card */
.referral-card h3 .icon{width:18px;height:18px;color:var(--owned)}
.ref-link-row{display:flex;gap:9px;margin:6px 0 16px}
.ref-link-row .input{flex:1;font-size:13px;color:var(--tx2)}
.ref-link-row .btn{flex:none}
.ref-how{padding:14px 16px;border-radius:var(--r);background:var(--bg2);border:1px solid var(--line)}
.ref-how-t{font-weight:600;font-size:13.5px;margin-bottom:8px}
.ref-steps{margin:0;padding-left:18px;color:var(--tx2);font-size:13px;line-height:1.7}
.ref-steps li{margin-bottom:3px}
.ref-steps b{color:var(--owned)}
.ref-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.ref-stats .kpi{text-align:left}
.ref-stats .kpi .v{font-size:22px}

/* wallet history list */
.wallet-history{padding:6px 0}
.wh-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.wh-row:last-child{border-bottom:none}
.wh-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--surf2);color:var(--tx2)}
.wh-ic.pos{background:rgba(61,220,132,.12);color:var(--owned)}
.wh-ic.neg{background:rgba(255,92,54,.12);color:var(--acc)}
.wh-ic .icon{width:16px;height:16px}
.wh-main{flex:1;min-width:0}
.wh-note{font-weight:600;font-size:14px}
.wh-meta{color:var(--tx3);font-size:12px;margin-top:1px}
.wh-amt{display:flex;align-items:center;gap:5px;font-family:'Space Grotesk';font-weight:700;font-size:15px;flex:none}
.wh-amt.pos{color:var(--owned)}
.wh-amt.neg{color:var(--tx2)}
.wh-amt .em-ic-sm{width:15px;height:15px}

/* account page emerald row */
.acct-emeralds{display:flex;align-items:center;gap:13px;margin-top:14px;padding:13px 15px;border-radius:var(--r);cursor:pointer;
  background:rgba(61,220,132,.08);border:1px solid rgba(61,220,132,.26);transition:.15s}
.acct-emeralds:hover{background:rgba(61,220,132,.14);border-color:rgba(61,220,132,.42)}
.acct-emeralds .ae-bal{display:flex;align-items:center;gap:8px;font-family:'Space Grotesk';font-weight:700;font-size:24px}
.acct-emeralds .ae-t{font-weight:600;font-size:14px}
.acct-emeralds .ae-s{font-size:12px;color:var(--tx3)}

/* emerald price at spend points (buy modal + plans modal) */
.buy-opt .p-em{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.buy-opt .p-em .em{font-size:18px;color:var(--tx)}
.buy-opt .p-em small{font-size:11.5px;color:var(--tx3);font-weight:600}
.plan-price-em{display:flex;align-items:center;justify-content:center;gap:4px;font-family:'Space Grotesk';font-weight:700;font-size:23px;margin:6px 0 0}
.plan-price-em .em{font-size:23px}
.plan-price-em span{font-size:13px;color:var(--tx3);font-weight:400}
.plan-price-usd{font-size:11.5px;color:var(--tx3);font-weight:600;margin:0 0 2px}

/* emeralds-only price labels (gem + number, NO euro reference) */
.em-word{color:var(--tx3);font-weight:500;font-size:.86em}
.plan-hero-price .em{font-size:22px;color:var(--tx)}
.plan-hero-price .em b{font-weight:700}
/* buy-emeralds rate note — the ONE allowed euro line, in the buy section */
.wb-rate{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:12.5px;color:var(--tx2);font-weight:600}
.wb-rate .em-ic{width:15px;height:15px;stroke:none}

/* ---------- PRICING PAGE ---------- */
.pricing-page{max-width:1180px}
.pricing-hero{text-align:center;padding:34px 0 30px}
.pricing-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:20px;font-size:12.5px;font-weight:700;
  background:rgba(61,220,132,.12);border:1px solid rgba(61,220,132,.32);color:var(--owned);margin-bottom:20px}
.pricing-chip .em-ic{width:16px;height:16px;stroke:none}
.pricing-h1{font-family:'Space Grotesk';font-size:50px;font-weight:700;line-height:1.04;letter-spacing:-.02em}
.pricing-h1 span{color:var(--acc)}
.pricing-sub{color:var(--tx2);font-size:17px;line-height:1.6;max-width:54ch;margin:18px auto 0}
.pricing-reassure{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:8px 15px;border-radius:11px;
  background:var(--surf);border:1px solid var(--line);color:var(--tx2);font-size:13px}
.pricing-reassure .icon{width:16px;height:16px;color:var(--owned);flex:none}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start;margin-top:14px}
.pricing-card{position:relative;background:var(--surf);border:1px solid var(--line);border-radius:var(--r2);padding:26px 22px;display:flex;flex-direction:column;transition:.18s ease}
.pricing-card:hover{border-color:var(--line2);transform:translateY(-3px);box-shadow:var(--shadow)}
.pricing-card.best{border-color:rgba(255,92,54,.5);background:linear-gradient(180deg,rgba(255,92,54,.10),var(--surf) 42%);
  transform:translateY(-10px) scale(1.02);box-shadow:0 28px 60px -22px rgba(255,92,54,.45);z-index:2}
.pricing-card.best:hover{transform:translateY(-13px) scale(1.02)}
.pricing-card.cur{outline:2px solid rgba(61,220,132,.5);outline-offset:-2px}
.pricing-ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;
  background:var(--acc);color:#180a06;font-size:11px;font-weight:700;padding:5px 13px;border-radius:20px;white-space:nowrap;
  box-shadow:0 8px 20px -6px rgba(255,92,54,.7)}
.pricing-ribbon .icon{width:13px;height:13px;stroke:none;fill:#180a06}
.pricing-name{font-family:'Space Grotesk';font-weight:700;font-size:22px}
.pricing-price{margin-top:10px;display:flex;align-items:baseline;gap:6px}
.pricing-price .pp-eur{font-family:'Space Grotesk';font-weight:700;font-size:46px;line-height:1;letter-spacing:-.02em}
.pricing-price .pp-em{display:inline-flex;align-items:center;gap:8px}
.pricing-price .pp-em .em-ic-lg{width:34px;height:34px;stroke:none;flex:none}
.pricing-price .pp-num{font-family:'Space Grotesk';font-weight:700;font-size:46px;line-height:1;letter-spacing:-.02em}
.pricing-price .pp-per{color:var(--tx3);font-size:15px;font-weight:500}
.pricing-em{display:flex;align-items:center;gap:7px;margin-top:8px;color:var(--owned);font-size:13px;font-weight:600}
.pricing-em .em{font-size:15px;color:var(--owned)}
.pricing-em span{color:var(--tx3);font-weight:500}
.pricing-feats{list-style:none;margin:20px 0 22px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.pricing-feats li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--tx);line-height:1.45}
.pricing-feats li .icon{width:17px;height:17px;color:var(--owned);flex:none;margin-top:1px}
.pricing-card.best .pricing-feats li .icon{color:var(--acc)}
.pricing-cta{width:100%;margin-top:auto}

.pricing-free-note{display:flex;align-items:center;gap:10px;margin-top:22px;padding:15px 18px;border-radius:var(--r);
  background:var(--surf);border:1px solid var(--line);color:var(--tx2);font-size:13.5px;line-height:1.5}
.pricing-free-note b{color:var(--tx)}
.pricing-free-note .icon{width:19px;height:19px;color:var(--owned);flex:none}

.pricing-value{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.pv-item{text-align:center;background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:22px 14px}
.pv-v{font-family:'Space Grotesk';font-weight:700;font-size:38px;color:var(--acc);line-height:1}
.pv-v .em-ic-lg{width:36px;height:36px;stroke:none;vertical-align:middle}
.pv-k{color:var(--tx2);font-size:12.5px;margin-top:8px;line-height:1.4}

.pricing-faqs{margin-top:48px}
.pricing-h2{font-family:'Space Grotesk';font-size:26px;font-weight:700;text-align:center;letter-spacing:-.01em}
.pricing-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.pricing-faq{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.pf-q{font-family:'Space Grotesk';font-weight:600;font-size:15px;margin-bottom:7px}
.pf-a{color:var(--tx2);font-size:13.5px;line-height:1.6}
.pf-a b{color:var(--tx)}

.pricing-referral{display:flex;align-items:center;gap:18px;margin-top:44px;padding:24px 26px;border-radius:var(--r2);
  background:linear-gradient(120deg,rgba(61,220,132,.12),rgba(54,197,255,.06));border:1px solid rgba(61,220,132,.3)}
.pricing-referral .pr-ic{width:54px;height:54px;border-radius:15px;flex:none;display:grid;place-items:center;
  background:rgba(61,220,132,.16);color:var(--owned)}
.pricing-referral .pr-ic .icon{width:26px;height:26px}
.pricing-referral .pr-body{flex:1;min-width:0}
.pricing-referral .pr-title{font-family:'Space Grotesk';font-weight:700;font-size:19px}
.pricing-referral .pr-text{color:var(--tx2);font-size:13.5px;margin-top:5px;line-height:1.55;max-width:62ch}
.pricing-referral .pr-text b{color:var(--owned)}

.pricing-close{text-align:center;margin-top:50px;padding:42px 24px;border-radius:var(--r2);
  background:radial-gradient(800px 300px at 50% 0%,rgba(255,92,54,.12),transparent 70%),var(--surf);border:1px solid var(--line)}
.pricing-close-sub{color:var(--tx2);font-size:15px;margin:12px auto 0;max-width:46ch;line-height:1.6}
.pricing-close-cta{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap}

@media(max-width:980px){.wallet-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
  .pricing-card.best{transform:none;scale:1}.pricing-card.best:hover{transform:translateY(-3px)}
  .pricing-value{grid-template-columns:1fr 1fr}.pricing-faq-grid{grid-template-columns:1fr}
  .pricing-referral{flex-direction:column;text-align:center}.pricing-h1{font-size:38px}}
@media(max-width:1080px){.detail-grid{grid-template-columns:1fr}.dside{position:static}.kpis{grid-template-columns:1fr 1fr}.panels{grid-template-columns:1fr}}
@media(max-width:720px){.login{grid-template-columns:1fr}.login-art{display:none}.nav{display:none}.search{max-width:none}.em-packs{grid-template-columns:1fr}
  .pricing-value{grid-template-columns:1fr}}