*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

:root{
  --bg:#0c0c10;
  --bg2:#13131a;
  --bg3:#1a1a24;
  --bg4:#1f1f2e;
  --border:rgba(255,255,255,0.07);
  --border2:rgba(255,255,255,0.14);
  --accent:#3ddba8;
  --adim:rgba(61,219,168,0.1);
  --aborder:rgba(61,219,168,0.25);
  --purple:#a78bdb;
  --pdim:rgba(167,139,219,0.12);
  --pborder:rgba(167,139,219,0.28);
  --coral:#f07060;
  --cdim:rgba(240,112,96,0.12);
  --cborder:rgba(240,112,96,0.32);
  --text:#eeeef5;
  --text2:#a0a0bc;
  --text3:#52526e;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Manrope',system-ui,sans-serif;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.6;
}

/* ── Nav ── */
nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;height:62px;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
  background:rgba(12,12,16,0.93);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.logo{
  font-family:var(--serif);
  font-size:22px;
  color:var(--text);
  letter-spacing:-.02em;
}
.logo em{color:var(--accent);font-style:italic}
.nav-links{display:flex;gap:4px;list-style:none}
.nav-links a{
  font-size:13px;font-weight:500;
  color:var(--text3);text-decoration:none;cursor:pointer;
  transition:all .2s;padding:6px 14px;border-radius:999px;
}
.nav-links a:hover{color:var(--text2);background:var(--bg3)}
.nav-links a.active{color:var(--accent);background:var(--adim)}
.live{display:flex;align-items:center;gap:7px}
.dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--coral);
  box-shadow:0 0 0 3px var(--cdim);
  animation:blink 2s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.live-lbl{font-size:11px;font-weight:700;color:var(--coral);letter-spacing:.06em;text-transform:uppercase}

/* ── Ticker ── */
.ticker{
  height:36px;border-bottom:1px solid var(--border);
  background:var(--bg2);display:flex;align-items:center;overflow:hidden;
}
.ticker-label{
  font-size:10px;font-weight:700;color:var(--accent);
  letter-spacing:.12em;text-transform:uppercase;
  padding:0 16px;border-right:1px solid var(--border);
  flex-shrink:0;height:100%;display:flex;align-items:center;
  background:var(--adim);
}
.ticker-wrap{overflow:hidden;flex:1}
.ticker-scroll{display:flex;gap:56px;white-space:nowrap;animation:scrollx 15s linear infinite;padding-left:24px;}

@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-scroll span{font-size:12px;font-weight:500;color:var(--text3)}
.ticker-scroll span::before{content:'·';margin-right:12px;color:var(--accent);opacity:.7}

/* ── Layout ── */
.page{max-width:1200px;margin:0 auto}
.cat-bar{
  padding:16px 32px;border-bottom:1px solid var(--border);
  display:flex;gap:8px;flex-wrap:wrap;
}
.cat-btn{
  font-size:13px;font-weight:600;color:var(--text3);
  background:var(--bg2);border:1px solid var(--border);
  border-radius:999px;padding:7px 18px;cursor:pointer;transition:all .2s;
}
.nav-links a.active-lokale{color:#e8632a;background:rgba(232,99,42,0.1)}
.cat-btn-lokale.active{color:#e8632a;border-color:#e8632a;background:rgba(232,99,42,0.1)}
.cat-btn:hover{color:var(--text);border-color:var(--border2);background:var(--bg3)}
.cat-btn.active{color:var(--accent);border-color:var(--aborder);background:var(--adim)}
.grid{display:grid;grid-template-columns:1fr 272px;min-height:100vh}

/* ── Feed ── */
.feed{padding:28px 32px;border-right:1px solid var(--border)}
.feed-label{
  font-size:11px;font-weight:700;color:var(--text3);
  letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:20px;display:flex;align-items:center;gap:10px;
}
.feed-label::after{content:'';flex:1;height:1px;background:var(--border)}
.feed-count{color:var(--accent);margin:0 2px}

/* ── Card ── */
.card{
  border:1px solid var(--border);border-radius:20px;
  padding:22px 24px;margin-bottom:12px;
  background:var(--bg2);
  transition:border-color .25s,background .25s,transform .2s;
}
.card:hover{border-color:var(--border2);background:var(--bg3);transform:translateY(-1px)}
.card.breaking{border-color:var(--cborder);background:rgba(240,112,96,0.04)}

.meta{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.badge{font-size:11px;font-weight:700;border-radius:999px;padding:4px 12px;letter-spacing:.02em}
.b-src{color:var(--accent);background:var(--adim);border:1px solid var(--aborder)}
.b-cat{color:var(--purple);background:var(--pdim);border:1px solid var(--pborder)}
.b-brk{color:var(--coral);background:var(--cdim);border:1px solid var(--cborder)}
.b-tr{color:var(--text3);background:var(--bg3);border:1px solid var(--border)}
.ago{font-size:12px;font-weight:500;color:var(--text3);margin-left:auto}

.title{
  font-family:var(--serif);font-size:20px;color:var(--text);
  line-height:1.35;margin-bottom:10px;letter-spacing:-.01em;
}
.tldr{font-size:14px;color:var(--text2);line-height:1.75;margin-bottom:16px}
.tldr strong{color:var(--text);font-weight:600}

.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn{
  font-size:12px;font-weight:600;border-radius:999px;
  padding:8px 18px;cursor:pointer;transition:all .2s;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
}
.btn-ghost{color:var(--text3);background:var(--bg3);border:1px solid var(--border)}
.btn-ghost:hover{color:var(--text);border-color:var(--border2);background:var(--bg4)}
.btn-expand{color:var(--accent);background:var(--adim);border:1px solid var(--aborder)}
.btn-expand:hover{background:rgba(61,219,168,0.18)}

.expanded{display:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.expanded.open{display:block}
.expanded-note{font-size:11px;font-weight:600;color:var(--text3);margin-bottom:10px;letter-spacing:.04em;text-transform:uppercase}
.expanded p{font-size:14px;color:var(--text2);line-height:1.75}

/* ── Load more ── */
.more{text-align:center;padding:24px 0 12px}
.more button{
  font-size:13px;font-weight:600;color:var(--text2);
  background:var(--bg2);border:1px solid var(--border);
  border-radius:999px;padding:11px 32px;cursor:pointer;transition:all .2s;
}
.more button:hover{color:var(--accent);border-color:var(--aborder);background:var(--adim)}
.more button:disabled{opacity:.3;cursor:not-allowed}

/* ── Sidebar ── */
.sidebar{padding:28px 22px}
.s-section{margin-bottom:32px}
.s-title{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text3);margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.s-title::after{content:'';flex:1;height:1px;background:var(--border)}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:14px;text-align:center}
.stat-n{font-family:var(--serif);font-size:34px;color:var(--accent);display:block;line-height:1}
.stat-l{font-size:10px;font-weight:700;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;margin-top:4px;display:block}

.src-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--border);
  cursor:pointer;transition:opacity .15s;
}
.src-row:hover{opacity:.7}
.src-name{font-size:13px;font-weight:500;color:var(--text2)}
.src-count{font-size:11px;font-weight:700;color:var(--accent);background:var(--adim);border-radius:999px;padding:2px 10px}

.tag-cloud{display:flex;flex-wrap:wrap;gap:7px}
.tag{
  font-size:12px;font-weight:600;color:var(--text3);
  border:1px solid var(--border);background:var(--bg2);
  border-radius:999px;padding:6px 14px;cursor:pointer;transition:all .2s;
}
.tag:hover{color:var(--text2);border-color:var(--border2)}
.tag.active{color:var(--accent);border-color:var(--aborder);background:var(--adim)}

/* ── Skeleton ── */
.sk{
  background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%);
  background-size:200% 100%;animation:shimmer 1.6s infinite;border-radius:10px;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Footer ── */
footer{border-top:1px solid var(--border);padding:20px 32px;display:flex;justify-content:space-between;align-items:center}
footer p{font-size:12px;font-weight:500;color:var(--text3)}

/* ── Mobile ── */
@media(max-width:768px){
  nav{padding:0 18px;height:56px}
  .logo{font-size:20px}
  .nav-links{display:none}
  .cat-bar{padding:12px 18px}
  .cat-btn{font-size:12px;padding:6px 14px}
  .grid{grid-template-columns:1fr}
  .sidebar{display:none}
  .feed{padding:16px 18px}
  .card{padding:18px 20px;border-radius:16px}
  .title{font-size:22px}
  .tldr{font-size:15px}
  .badge{font-size:12px}
  footer{padding:16px 18px}
  footer p:last-child{display:none}
  .ticker-scroll{animation-duration:10s;}
}
@media(max-width:480px){
  .title{font-size:20px}
  .tldr{font-size:14px}
}
.title{
    font-size: 30px !important;
}
/* ── Toggle ── */
.toggle-wrap{display:flex;align-items:center;gap:0;background:var(--bg2);border:1px solid var(--border);border-radius:999px;padding:4px;margin:16px 32px}
.toggle-btn{flex:1;font-size:13px;font-weight:600;color:var(--text3);background:none;border:2px solid transparent;border-radius:999px;padding:10px 16px;cursor:pointer;transition:all .25s;text-align:center;white-space:nowrap}
.toggle-btn:hover{color:var(--text2);background:var(--bg3)}
.toggle-btn.active-lokale{color:#e8632a;background:rgba(232,99,42,0.06);border-color:#e8632a}
.toggle-btn.active-all{color:var(--text);background:var(--bg3);border-color:var(--border2)}
.toggle-btn.active-bota{color:var(--accent);background:var(--adim);border-color:var(--aborder)}
.b-lokale{color:#e8632a;background:rgba(232,99,42,0.1);border:1px solid rgba(232,99,42,0.3)}

/* ── Category bar label ── */
.cat-bar{padding:12px 32px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cat-bar-label{font-size:10px;font-weight:700;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;padding-right:8px;border-right:1px solid var(--border);margin-right:2px;white-space:nowrap}

@media(max-width:768px){
  .toggle-wrap{margin:12px 18px}
  .toggle-btn{font-size:13px;padding:9px 10px}
  .cat-bar{padding:12px 18px}
  .cat-bar-label{display:none}
}
/* ── Expanded section ── */
.expanded{display:none;margin-top:0;padding-top:0;border-top:none}
.expanded.open{display:block;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.expanded-inner{background:var(--bg3);border-radius:14px;padding:18px 20px}
.expanded-body{font-size:14px;color:var(--text2);line-height:1.8;margin-bottom:14px}
.expanded-source-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:var(--accent);
  text-decoration:none;border-bottom:1px solid var(--aborder);
  padding-bottom:1px;transition:opacity .15s;
}
.expanded-source-link:hover{opacity:.75}

/* ── Lokale badge — Albanian flag style ── */
.b-lokale{
  color:#1a0000;
  background:#e41e20;
  border:1px solid #c01010;
  position:relative;
  overflow:hidden;
}
/*.b-lokale::before{*/
/*  content:'🦅';*/
/*  position:absolute;*/
/*  right:-2px;top:50%;*/
/*  transform:translateY(-50%);*/
/*  font-size:16px;*/
/*  opacity:0.18;*/
/*  pointer-events:none;*/
/*}*/
.b-lokale{color:#e8632a;background:rgba(232,99,42,0.1);border:1px solid rgba(232,99,42,0.3)}
.cat-btn-lokale{color:#e8632a;background:rgba(232,99,42,0.06);border:1px solid rgba(232,99,42,0.35)}
.cat-btn-lokale:hover{color:#e8632a;border-color:#e8632a;background:rgba(232,99,42,0.12)}
.cat-btn-lokale.active{color:#e8632a;border-color:#e8632a;background:rgba(232,99,42,0.1);box-shadow:0 0 0 1px rgba(232,99,42,0.3)}
.nav-links a.active-lokale{color:#e8632a;background:rgba(232,99,42,0.1)}
.expanded-inner{
    margin-bottom: 20px;
}
.cat-btn-breaking{color:#f07060;background:rgba(240,112,96,0.06);border:1px solid rgba(240,112,96,0.35)}
.cat-btn-breaking:hover{color:#f07060;border-color:#f07060;background:rgba(240,112,96,0.12)}
.cat-btn-breaking.active{color:#f07060;border-color:#f07060;background:rgba(240,112,96,0.1);box-shadow:0 0 0 1px rgba(240,112,96,0.3)}
@media(max-width:768px){
  .sidebar{display:block;padding:16px 18px;border-top:1px solid var(--border)}
  .s-section:not(:first-child){display:none}
  .stat-grid{grid-template-columns:repeat(3,1fr)}
}
/* ── Hamburger ── */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.hamburger span{display:block;width:22px;height:2px;background:var(--text2);border-radius:2px;transition:all .25s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Mobile menu ── */
.mobile-menu{display:none;position:fixed;top:56px;left:0;right:0;bottom:0;background:var(--bg);z-index:99;padding:24px 20px;overflow-y:auto}
.mobile-menu.open{display:block}
.mm-section{margin-bottom:8px;padding-bottom: 20px;}
.mm-title{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:12px}
.mm-links{display:flex;flex-direction:column;gap:4px}
.mm-links a{font-size:16px;font-weight:600;color:var(--text2);padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer;text-decoration:none;transition:color .15s}
.mm-links a:hover{color:var(--accent)}
.mm-divider{height:1px;background:var(--border2);margin:20px 0;display:none;}

@media(max-width:768px){
  .hamburger{display:flex}
  .nav-links{display:none}
  .live{margin-left:auto;margin-right:12px}
  .hamburger{display:flex}
  .nav-links{display:none}
}
.cat-btn-lokale {
    color: #c01010;
    background: var(--bg2);
    border: 1px solid var(--border);
}
.cat-btn-lokale:hover {
    color: #c01010;
    border-color: #c01010;
    background: rgb(239 2 2 / 6%);
}
.cat-btn-breaking {
    background: var(--bg2);
    border: 1px solid var(--border);
}
footer{
  border-top:1px solid var(--border);
  padding:28px 32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
}
.footer-top{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  justify-content:center;
}
.footer-copy,.footer-update{font-size:12px;font-weight:500;color:var(--text3)}
.footer-update{opacity:.6}
.footer-links{
  display:flex;gap:24px;
  flex-wrap:wrap;
  justify-content:center;
}
.footer-links a{
  font-size:12px;font-weight:500;
  color:var(--text3);text-decoration:none;transition:color .15s;
}
.footer-links a:hover{color:var(--accent)}

@media(max-width:768px){
  footer{padding:24px 18px;gap:14px}
  .footer-top{gap:12px}
  .footer-links{gap:12px 20px}
}
.lokale-nav-dekstop{
    color: #c01010 !important;
    background: var(--bg2) !important;
    border: 1px solid var(--border) !important;
}
.lokale-nav-dekstop:hover{
    color: #c01010 !important;
    border-color: #c01010 !important;
    background: rgb(239 2 2 / 6%) !important;
}
.breaking-nav-dekstop{color:#f07060 !important;background:rgba(240,112,96,0.06) !important;border:1px solid rgba(240,112,96,0.35) !important;}
.breaking-nav-dekstop:hover{color:#f07060 !important;border-color:#f07060 !important;background:rgba(240,112,96,0.12)!important;}
.breaking-nav-dekstop.active{color:#f07060 !important;border-color:#f07060 !important;background:rgba(240,112,96,0.1);box-shadow:0 0 0 1px rgba(240,112,96,0.3)!important;}

/* ── Legend ── */
.legend{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.legend-item{display:flex;align-items:flex-start;gap:10px;font-size:11px;color:var(--text3);line-height:1.5}
.legend-item .badge{flex-shrink:0;margin-top:1px}

.logo a {
    text-decoration: none;
    color: inherit;
}
#ai-translated-badge {
    color: #e4e4ef;
    background: var(--bg3);
    border: 1px solid rgb(255 255 255 / 54%);
}
/* ── Lokale cat button — Albanian flag style ── 
.cat-btn-lokale{
  color:#e41e20;
  background:rgba(228,30,32,0.08);
  border:1px solid rgba(228,30,32,0.35);
  position:relative;
  overflow:hidden;
}
.cat-btn-lokale::before{
  content:'🦅';
  position:absolute;
  right:4px;top:50%;
  transform:translateY(-50%);
  font-size:18px;
  opacity:0.15;
  pointer-events:none;
}
.cat-btn-lokale:hover{
  color:#e41e20;
  border-color:#e41e20;
  background:rgba(228,30,32,0.14);
}
.cat-btn-lokale.active{
  color:#fff;
  background:#e41e20;
  border-color:#c01010;
}
.cat-btn-lokale.active::before{
  opacity:0.25;
}
.nav-links a.active-lokale{
  color:#e41e20;
  background:rgba(228,30,32,0.1);
}*/
/* ── Article page card link ── */
.title-link{text-decoration:none;display:block}
.title-link .title{transition:color .2s}
.title-link:hover .title{color:var(--accent)}



/* ── PWA Install Popup ── */
#pwa-overlay{
  display:none;position:fixed;inset:0;z-index:9998;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  animation:fadeIn .22s ease;
}
#pwa-overlay.open{display:block}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

#pwa-popup{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;
  background:var(--bg2);
  border-top:1px solid var(--border2);
  border-radius:24px 24px 0 0;
  padding:0 0 env(safe-area-inset-bottom,12px);
  box-shadow:0 -8px 40px rgba(0,0,0,.5);
  transform:translateY(100%);
  transition:transform .36s cubic-bezier(.32,1.2,.64,1);
  max-width:520px;
  margin:0 auto;
  /* centre on wide screens */
  left:50%;
  transform:translateX(-50%) translateY(100%);
  width:100%;
}
#pwa-popup.open{
  display:block;
  transform:translateX(-50%) translateY(0);
}

/* drag handle */
.pwa-handle{
  width:36px;height:4px;border-radius:2px;
  background:var(--border2);margin:14px auto 0;
}

.pwa-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px 0;
}
.pwa-brand{
  display:flex;align-items:center;gap:12px;
}
.pwa-icon{
  width:44px;height:44px;border-radius:12px;
  background:var(--bg3);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:20px;color:var(--accent);
}
.pwa-brand-text{}
.pwa-brand-name{
  font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em;
}
.pwa-brand-sub{font-size:12px;color:var(--text3);margin-top:1px}
.pwa-close{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:50%;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text3);transition:all .15s;flex-shrink:0;
}
.pwa-close:hover{color:var(--text);border-color:var(--border2)}

/* OS toggle */
.pwa-tabs{
  display:flex;gap:0;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:12px;margin:18px 22px 0;overflow:hidden;
}
.pwa-tab{
  flex:1;font-size:13px;font-weight:700;color:var(--text3);
  background:none;border:none;padding:10px 0;cursor:pointer;
  transition:all .2s;letter-spacing:.02em;
}
.pwa-tab.active{
  color:var(--bg);background:var(--accent);
}

/* screenshot area */
.pwa-screenshot{
  margin:16px 22px 0;
  border-radius:16px;overflow:hidden;
  background:var(--bg3);border:1px solid var(--border);
  height:128px;display:flex;align-items:center;justify-content:center;
  position:relative;
}
.pwa-phone-mock{
  width:72px;height:100px;
  border:2px solid var(--border2);border-radius:12px;
  background:var(--bg4);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:6px;
  position:relative;
}
.pwa-phone-screen{
  width:56px;height:72px;border-radius:6px;
  background:linear-gradient(135deg,var(--adim),var(--bg3));
  display:flex;align-items:center;justify-content:center;
}
.pwa-step-badge{
  position:absolute;top:-10px;left:-10px;
  width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:var(--bg);
  font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.pwa-arrow-label{
  font-size:11px;font-weight:600;color:var(--accent);
  text-align:center;padding:0 8px;line-height:1.4;
  max-width:180px;
}

/* steps list */
.pwa-steps{
  list-style:none;padding:0;margin:16px 22px 0;
  display:flex;flex-direction:column;gap:0;
}
.pwa-steps li{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--border);
  font-size:13px;color:var(--text2);line-height:1.5;
}
.pwa-steps li:last-child{border-bottom:none}
.pwa-step-n{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:var(--adim);border:1px solid var(--aborder);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--accent);margin-top:1px;
}

/* iOS share icon inline */
.share-icon{
  display:inline-flex;align-items:center;gap:3px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:5px;padding:1px 5px;margin:0 2px;
  font-size:11px;color:var(--text2);vertical-align:middle;
}

/* CTA */
.pwa-cta{
  margin:16px 22px 20px;
  width:calc(100% - 44px);
  background:var(--accent);color:var(--bg);
  border:none;border-radius:14px;padding:14px;
  font-size:14px;font-weight:800;cursor:pointer;
  transition:all .2s;letter-spacing:.01em;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.pwa-cta:hover{background:#52ebb9;transform:translateY(-1px)}
.pwa-cta:active{transform:translateY(0)}

/* trigger button — bottom-right FAB */
#pwa-fab{
  position:fixed;bottom:24px;right:20px;z-index:9990;
  background:var(--accent);color:var(--bg);
  border:none;border-radius:999px;
  padding:12px 18px;
  font-size:13px;font-weight:800;
  display:flex;align-items:center;gap:8px;
  box-shadow:0 4px 24px rgba(61,219,168,0.3);
  cursor:pointer;
  transition:all .25s;
  animation:fabIn .5s cubic-bezier(.34,1.56,.64,1) 3s both;
}
#pwa-fab:hover{background:#52ebb9;transform:translateY(-2px);box-shadow:0 8px 32px rgba(61,219,168,0.4)}
@keyframes fabIn{from{transform:translateY(80px);opacity:0}to{transform:translateY(0);opacity:1}}

/* hide FAB when popup is open */
body.pwa-open #pwa-fab{opacity:0;pointer-events:none}

@media(min-width:520px){
  #pwa-popup{border-radius:24px;bottom:24px;left:50%;width:480px}
}
@media(max-width:360px){
  .pwa-header,.pwa-tabs,.pwa-screenshot,.pwa-steps,.pwa-cta{margin-left:14px;margin-right:14px}
  .pwa-cta{width:calc(100% - 28px)}
}