:root { --bg:#0e1116; --card:#161b22; --line:#2a313c; --txt:#e6edf3; --mut:#8b949e; --acc:#4a9eff; --good:#3fb950; --err:#f85149; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--txt); font:16px/1.6 system-ui,Segoe UI,Roboto,sans-serif; }

.topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(14,17,22,.9); backdrop-filter:blur(6px); z-index:20; }
.topbar .side { flex:1; display:flex; align-items:center; gap:8px; }
.topbar .side.right { justify-content:flex-end; }
.topbar .logo { font-weight:700; letter-spacing:.1em; color:var(--acc); font-size:18px; flex:0 0 auto; }
.btn { padding:8px 14px; border-radius:8px; font-size:14px; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--txt); }
.btn.cta { background:var(--acc); color:#06121f; border-color:var(--acc); font-weight:600; }
.btn.ghost { color:var(--mut); }
.topbar .btn { padding:7px 11px; font-size:13px; }
.btn:disabled { opacity:.5; }

.wrap { max-width:560px; margin:0 auto; padding:40px 20px 80px; }
.wrap.wide { max-width:680px; }
.view { display:none; } .view.on { display:block; }

.hero { text-align:center; }
.hero h1 { font-size:40px; margin:0; letter-spacing:.08em; color:var(--acc); }
.hero p { color:var(--mut); margin:10px 0 26px; font-size:16px; }

.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; }
label { display:block; font-size:13px; color:var(--mut); margin:12px 0 4px; }
input, textarea, select { width:100%; padding:10px 12px; background:#0e1116; border:1px solid var(--line); border-radius:8px; color:var(--txt); font-size:14px; font-family:inherit; }
textarea { resize:vertical; min-height:80px; }
button.primary { width:100%; margin-top:18px; padding:11px; background:var(--acc); color:#06121f; border:none; border-radius:9px; font-weight:600; font-size:15px; cursor:pointer; }
button.primary:disabled { opacity:.5; }
.msg { margin-top:12px; font-size:13px; min-height:18px; }
.msg.err { color:var(--err); } .msg.ok { color:var(--good); }
.hide { display:none !important; }

.menu { position:relative; }
.menuBox { position:absolute; right:0; top:42px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:6px; min-width:160px; z-index:30; display:flex; flex-direction:column; }
.menuBox button { text-align:left; background:none; border:none; color:var(--txt); padding:9px 12px; border-radius:7px; cursor:pointer; font-size:14px; }
.menuBox button:hover { background:#0e1116; }
.small { font-size:13px; color:var(--mut); }
.rowbtn { display:flex; gap:8px; margin-top:10px; }
.rowbtn .btn { flex:1; text-align:center; }

.backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:40; }
.modal { width:100%; max-width:420px; }
.modal .x { float:right; background:none; border:none; color:var(--mut); font-size:20px; cursor:pointer; }
.tabs { display:flex; gap:8px; margin:6px 0 18px; }
.tab { flex:1; text-align:center; padding:8px; border-radius:8px; cursor:pointer; color:var(--mut); font-size:14px; border:1px solid transparent; }
.tab.active { background:#0e1116; color:var(--txt); border-color:var(--line); }

.hstep { display:flex; justify-content:space-between; margin:6px auto 26px; }
.hstep .st { flex:1; text-align:center; position:relative; }
.hstep .st .dot { width:30px; height:30px; border-radius:50%; background:var(--card); border:2px solid var(--line); color:var(--mut); display:flex; align-items:center; justify-content:center; margin:0 auto 6px; font-size:13px; font-weight:600; position:relative; z-index:2; }
.hstep .st.done .dot { background:var(--good); border-color:var(--good); color:#04240f; }
.hstep .st.cur .dot { border-color:var(--acc); color:var(--acc); }
.hstep .st .lbl { font-size:12px; color:var(--mut); }
.hstep .st.done .lbl, .hstep .st.cur .lbl { color:var(--txt); }
.hstep .st:not(:last-child)::after { content:''; position:absolute; top:15px; left:50%; width:100%; height:2px; background:var(--line); z-index:1; }
.hstep .st.done:not(:last-child)::after { background:var(--good); }

.vstep { display:flex; flex-direction:column; }
.vs { display:flex; gap:12px; align-items:center; padding:11px 10px; border-radius:9px; }
.vs .vd { width:26px; height:26px; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:12px; flex:0 0 auto; color:var(--mut); }
.vs.done .vd { background:var(--good); border-color:var(--good); color:#04240f; }
.vs.cur .vd { border-color:var(--acc); color:var(--acc); }
.vs .vl { font-size:14px; }
.vs.locked { opacity:.45; }
.vs.click { cursor:pointer; }
.vs.click:hover { background:#0e1116; }
.vs.locked .vl { color:var(--mut); }

.status { margin-top:12px; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:#0e1116; font-size:14px; color:var(--mut); }
.status.wait { border-color:#1e3a5f; color:var(--acc); }
.kod { width:100%; min-height:60px; font-family:monospace; font-size:12.5px; background:#0e1116; border:1px solid var(--line); border-radius:8px; color:var(--acc); padding:12px; resize:vertical; }
.chk { display:flex; gap:10px; align-items:flex-start; margin-top:12px; font-size:13px; cursor:pointer; }
.chk input { width:auto; margin-top:3px; }
.spin { display:inline-block; width:15px; height:15px; border:2px solid var(--line); border-top-color:var(--acc); border-radius:50%; animation:sp .8s linear infinite; vertical-align:middle; }
@keyframes sp { to { transform:rotate(360deg); } }
h2.h { font-size:20px; margin:0 0 4px; }

.appwrap { display:flex; align-items:stretch; min-height:calc(100vh - 58px); }
.sidebar { width:250px; flex:0 0 auto; border-right:1px solid var(--line); padding:20px 14px; }
.main { flex:1; padding:26px 30px; min-width:0; }
.pcard { padding:4px 8px 16px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.pname { font-size:17px; font-weight:600; }
.pmail { font-size:12px; color:var(--mut); }
.pcat { font-size:12px; color:var(--acc); margin-top:4px; }
.snav button { display:block; width:100%; text-align:left; background:none; border:none; color:var(--txt); padding:10px; border-radius:8px; cursor:pointer; font-size:14px; margin-bottom:2px; }
.snav button:hover { background:#0e1116; }
.snav button.active { background:#0e1116; color:var(--acc); }
.rektbl { border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.rekhead, .rekrow { display:grid; grid-template-columns:2.4fr 1fr 1fr 1fr; align-items:center; gap:8px; padding:12px 14px; }
.rekhead { color:var(--mut); font-size:12px; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--line); background:#0e1116; }
.rekrow { border-bottom:1px solid #20262f; cursor:pointer; font-size:14px; }
.rekrow:last-child { border-bottom:none; }
.rekrow:hover { background:#0e1116; }
.rekname { display:flex; align-items:center; gap:10px; min-width:0; }
.rekname .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rekthumb { width:44px; height:32px; border-radius:6px; background:#0e1116; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--mut); overflow:hidden; flex:0 0 auto; }
.rekthumb img { width:100%; height:100%; object-fit:cover; }

@media (max-width:700px){
  .appwrap{ flex-direction:column; }
  .sidebar{ width:auto; border-right:none; border-bottom:1px solid var(--line); }
  .snav{ display:flex; overflow-x:auto; gap:8px; -webkit-overflow-scrolling:touch; }
  .snav button{ width:auto; white-space:nowrap; flex:0 0 auto; margin-bottom:0; }
  .rektbl{ overflow-x:auto; }
  .rekhead, .rekrow{ min-width:440px; }
}

/* ZGJEDHESI I FORMATIT */
.fmtgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:6px 0 16px; }
.fmt { border:1px solid var(--line); border-radius:10px; padding:12px 10px; cursor:pointer; text-align:center; background:#0e1116; }
.fmt:hover { border-color:var(--mut); }
.fmt.sel { border-color:#3b82f6; box-shadow:0 0 0 1px #3b82f6; }
.fmt .prev { height:80px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.fmt .shape { border:1px solid var(--mut); background:#161b22; border-radius:2px; }
.fmt.sel .shape { border-color:#3b82f6; background:#12233f; }
.fmt .lbl { font-size:13px; font-weight:600; }
.fmt .dim { font-size:11px; color:var(--mut); }

/* ===== FAQJA PUBLIKE (landing + legal) — brenda aplikacionit ===== */
:root{ --dark:#0e1116; --light:#f6f7f9; --light-txt:#1a1f27; --light-mut:#5b636e; --light-line:#e3e7ec; --acc-d:#2f7fd8; }
.container{max-width:1080px;margin:0 auto;padding:0 24px;}
.sbtn{display:inline-block;padding:12px 22px;border-radius:9px;font-size:15px;font-weight:600;cursor:pointer;border:1px solid var(--line);color:var(--txt);background:transparent;transition:.15s;text-align:center;}
.sbtn:hover{border-color:var(--mut);}
.sbtn.cta{background:var(--acc);color:#06121f;border-color:var(--acc);}
.sbtn.cta:hover{background:var(--acc-d);border-color:var(--acc-d);}
.sbtn.lg{padding:15px 28px;font-size:16px;}
.sec{padding:84px 0;}
.sec.light{background:var(--light);color:var(--light-txt);}
.sec.light .mut{color:var(--light-mut);}
.sec.dark{background:var(--dark);}
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:700;margin:0 0 14px;}
.sec h2{font-size:33px;line-height:1.2;margin:0 0 14px;letter-spacing:-.02em;}
.mut{color:var(--mut);}
.center{text-align:center;}
.center .lead{max-width:620px;margin:0 auto 8px;}
.shero{position:relative;padding:110px 0 92px;overflow:hidden;}
.shero::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 380px at 72% -10%,rgba(212,162,78,.15),transparent 60%);pointer-events:none;}
.shero h1{font-size:54px;line-height:1.06;letter-spacing:-.03em;margin:0 0 20px;max-width:760px;}
.shero h1 .g{color:var(--acc);}
.shero p.lead{font-size:20px;color:var(--mut);max-width:600px;margin:0 0 32px;}
.shero .actions{display:flex;gap:14px;flex-wrap:wrap;}
.trust{margin-top:28px;font-size:13px;color:var(--mut);}
@media(max-width:720px){ .shero h1{font-size:36px;} .shero p.lead{font-size:17px;} .sec h2{font-size:26px;} .sec,.shero{padding:56px 0;} }
.grid{display:grid;gap:20px;margin-top:38px;}
.grid.g3{grid-template-columns:repeat(3,1fr);}
.grid.g4{grid-template-columns:repeat(2,1fr);}
@media(max-width:820px){ .grid.g3,.grid.g4{grid-template-columns:1fr;} }
.tile{border:1px solid var(--line);border-radius:14px;padding:26px;background:var(--card);}
.sec.light .tile{background:#fff;border-color:var(--light-line);}
.tile .n{width:38px;height:38px;border-radius:10px;background:#0a1b2e;color:var(--acc);display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:14px;}
.sec.light .tile .n{background:#e8f1fd;}
.tile h3{font-size:18px;margin:0 0 8px;}
.tile p{margin:0;font-size:15px;}
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:38px auto 0;max-width:760px;}
@media(max-width:720px){ .plans{grid-template-columns:1fr;} }
.plan{border:1px solid var(--light-line);border-radius:16px;padding:30px;background:#fff;}
.plan.hi{border:2px solid var(--acc);position:relative;}
.plan .price{font-size:38px;font-weight:800;margin:6px 0 2px;letter-spacing:-.02em;}
.plan ul{list-style:none;padding:0;margin:18px 0 24px;}
.plan li{padding:7px 0 7px 26px;position:relative;font-size:15px;}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--good);font-weight:700;}
.tag{position:absolute;top:-12px;right:22px;background:var(--err);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;}
.faq{max-width:760px;margin:34px auto 0;}
.qa{border-bottom:1px solid var(--line);padding:20px 0;}
.qa h4{margin:0 0 8px;font-size:17px;}
.qa p{margin:0;color:var(--mut);font-size:15px;}
.strip{background:linear-gradient(120deg,#0a1b2e,#0e1116);border:1px solid var(--line);border-radius:20px;padding:46px;text-align:center;}
.strip h2{margin:0 0 10px;}
footer.site{background:#080a0e;border-top:1px solid var(--line);padding:54px 0 32px;}
.fgrid{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;}
.fcol h5{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin:0 0 12px;}
.fcol a{display:block;color:var(--mut);font-size:14px;padding:5px 0;}
.fcol a:hover{color:var(--txt);}
.brand-s{font-weight:800;letter-spacing:.14em;color:var(--acc);font-size:19px;}
.fbottom{margin-top:38px;padding-top:22px;border-top:1px solid var(--line);color:var(--mut);font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.legal{max-width:760px;margin:0 auto;padding:64px 24px 90px;}
.legal h1{font-size:36px;margin:0 0 6px;letter-spacing:-.02em;}
.legal .upd{color:var(--mut);font-size:14px;margin:0 0 30px;}
.legal h2{font-size:22px;margin:34px 0 10px;}
.legal p,.legal li{color:#c9d2dc;font-size:15.5px;}
.legal a{color:var(--acc);}

/* Zgjedhësi horizontal (B2B/B2C/të dyja) — një zgjedhje */
.seg{ display:flex; gap:8px; margin-top:4px; }
.seg button{ flex:1; padding:11px 8px; border-radius:9px; border:1px solid var(--line); background:#0e1116; color:var(--txt); font-size:13px; cursor:pointer; font-family:inherit; }
.seg button:hover{ border-color:var(--mut); }
.seg button.sel{ border-color:var(--acc); background:#0a1b2e; color:var(--acc); font-weight:600; }
@media(max-width:700px){ .seg{ flex-direction:column; } }

/* Kutia e kodit (snippet gjurmues) */
.kodbox{ background:#06090d; border:1px solid var(--line); border-radius:8px; padding:10px 12px;
  font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace; color:#9fb3c8; word-break:break-all; white-space:pre-wrap; }

/* ═══ ZILJA + NJOFTIMET ═══ */
.zile-wrap{ position:relative; display:inline-block; margin-right:8px; }
.zile{ background:none; border:none; color:var(--txt); cursor:pointer; padding:8px; border-radius:8px; display:inline-flex; align-items:center; }
.zile:hover{ background:var(--card); }
.zile-badge{ position:absolute; top:2px; right:2px; background:var(--err); color:#fff; font-size:10px;
  min-width:16px; height:16px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; font-weight:700; }
.njBox{ position:absolute; top:44px; right:0; width:320px; max-width:86vw; background:var(--card);
  border:1px solid var(--line); border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.5); z-index:60; overflow:hidden; }
.njHead{ padding:12px 14px; font-weight:700; border-bottom:1px solid var(--line); }
.njItem{ padding:12px 14px; border-bottom:1px solid var(--line); cursor:pointer; }
.njItem:hover{ background:#0e1116; }
.njT{ font-size:14px; font-weight:600; margin-bottom:3px; }
.njX{ font-size:12px; color:var(--mut); line-height:1.5; }
.njEmpty{ padding:16px 14px; color:var(--mut); font-size:13px; }
.njMore{ padding:11px 14px; text-align:center; color:var(--acc); font-size:13px; cursor:pointer; font-weight:600; }
.njMore:hover{ background:#0e1116; }
.njCard{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px; cursor:pointer; }
.njCard:hover{ border-color:var(--acc); }
.njGo{ color:var(--acc); font-size:13px; font-weight:600; margin-top:8px; }

/* ═══ PROFILI ═══ */
.avatar{ width:64px; height:64px; border-radius:50%; background:var(--acc); color:#06121f;
  display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:800; flex-shrink:0; }
.pikeCard{ display:inline-flex; flex-direction:column; align-items:center; background:#0e1116;
  border:1px solid var(--line); border-radius:12px; padding:14px 26px; margin-top:16px; }
.pikeNr{ font-size:34px; font-weight:800; color:var(--acc); line-height:1; }
.miniStat{ flex:1; min-width:150px; background:#0e1116; border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.miniStat .mv{ font-size:22px; font-weight:700; color:var(--txt); }
.mut{ color:var(--mut); }

/* ═══ LOGIN ME GOOGLE ═══ */
.gbtn{ width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  background:#fff; color:#1f1f1f; border:1px solid #dadce0; border-radius:8px;
  padding:11px 14px; font-size:15px; font-weight:600; cursor:pointer; font-family:inherit; }
.gbtn:hover{ background:#f7f8f8; }
.ndaresi{ display:flex; align-items:center; text-align:center; color:var(--mut); font-size:12px; margin:16px 0; }
.ndaresi::before,.ndaresi::after{ content:''; flex:1; height:1px; background:var(--line); }
.ndaresi span{ padding:0 12px; }