/* BeWeb KD – modern, premium, mobile-first */
.beweb-kd-wrap{--bg:#0b1020;--card:#111735;--muted:#6b78a0;--text:#e9ecff;--acc:#5b8cff;--acc2:#24d39f;--border:rgba(255,255,255,.08);
  background: radial-gradient(1000px 600px at 10% -10%, rgba(91,140,255,.12), transparent 60%),
              radial-gradient(800px 500px at 110% 10%, rgba(36,211,159,.14), transparent 60%),
              var(--bg);
  padding: 24px; border-radius: 16px;
}
.beweb-kd-card{background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius: 18px; overflow:hidden; box-shadow: 0 10px 40px rgba(11,16,32,.35);}
.beweb-kd-header{padding: 22px 22px 0 22px;}
.beweb-kd-header h2{margin:0 0 8px; color:var(--text); font-size: clamp(22px, 2.4vw, 28px); letter-spacing:.2px}
.beweb-kd-header p{margin:0 0 16px; color: var(--muted);}

.beweb-kd-tabs{display:flex; gap:8px; padding:0 22px 10px 22px;}
.beweb-kd-tabs .tab{flex:0 0 auto; padding:10px 14px; border:1px solid var(--border); background: rgba(255,255,255,.02); color:var(--text); border-radius: 12px; cursor:pointer; transition: .2s; font-weight:600}
.beweb-kd-tabs .tab.active{background: linear-gradient(180deg, rgba(91,140,255,.2), rgba(91,140,255,.05)); border-color: rgba(91,140,255,.5); box-shadow: inset 0 0 0 1px rgba(91,140,255,.35);}

.beweb-kd-body{padding: 0 22px 22px 22px; display:grid; gap:14px;}
.beweb-kd-body label{display:block; margin:6px 0 6px; color:var(--muted); font-size:13px; font-weight:600; letter-spacing:.2px}
.beweb-kd-body input[type="url"],
.beweb-kd-body input[type="text"],
.beweb-kd-body textarea{width:100%; padding:12px 14px; border-radius: 12px; background: rgba(255,255,255,.03); border:1px solid var(--border); color:var(--text); outline:none}
.beweb-kd-body textarea{resize:vertical; min-height:140px}

.grid-2{display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:end}
@media (max-width:640px){.grid-2{grid-template-columns: 1fr;}.beweb-kd-tabs{flex-wrap:wrap}}

.btn-primary{position:relative; padding:12px 18px; background: linear-gradient(90deg, var(--acc), var(--acc2)); color:white; border:0; border-radius:12px; font-weight:700; cursor:pointer; overflow:hidden}
.btn-primary .spinner{display:none; width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.7); border-top-color:transparent; margin-right:8px; vertical-align:middle; animation:spin 1s linear infinite}
.btn-primary.loading .spinner{display:inline-block}
.btn-primary.loading{opacity:.85}

.tabpane{display:none}
.tabpane.active{display:block}

.beweb-kd-result{padding: 16px 22px 22px 22px; border-top:1px solid var(--border); background: rgba(255,255,255,.02)}
.stats{display:grid; grid-template-columns: repeat(4,1fr); gap:12px; margin-top:8px}
@media (max-width:760px){.stats{grid-template-columns: repeat(2,1fr);}}
.stat{background: rgba(255,255,255,.03); border:1px solid var(--border); border-radius:14px; padding:12px}
.stat-label{color:var(--muted); font-size:12px}
.stat-value{color:var(--text); font-size: clamp(18px, 2.5vw, 22px); font-weight:800; margin-top:4px}
.progress{height:8px; background: rgba(255,255,255,.06); border-radius:999px; overflow:hidden; margin-top:8px}
.progress .bar{height:100%; background: linear-gradient(90deg, var(--acc), var(--acc2)); width:0%; transition: width .35s ease}

.top-terms{margin-top:16px}
.top-terms h3{color:var(--text); margin:0 0 8px}
.top-terms ol{margin:0; padding:0 0 0 18px; color:var(--text)}

.cta{margin-top:18px; display:flex; justify-content:flex-start}
.btn-cta{display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:14px; border:1px solid rgba(36,211,159,.45); color:#0e2b23; background: linear-gradient(180deg, rgba(36,211,159,.95), rgba(36,211,159,.7)); font-weight:800; text-decoration:none}
.btn-cta:hover{filter:brightness(1.05)}

.beweb-kd-error{padding:14px 18px; color:#ffb9b9; background: linear-gradient(180deg, rgba(255,77,77,.16), rgba(255,77,77,.08)); border:1px solid rgba(255,77,77,.35); border-radius:12px; margin: 14px 22px 22px}
@keyframes spin{to{transform:rotate(360deg)}}