*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Arial, sans-serif;background:#f3f6fb;padding:28px;color:#0f172a}

.tabs-wrap{
  max-width:960px;
  margin:0 auto;
  display:flex;
  background:white;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,0.08);
}

/* taburi verticale */
.tabs-left{
  min-width:200px;
  background:#f8fafc;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:16px;
}

.tab{
  background:transparent;
  border:0;
  text-align:left;
  padding:10px 14px;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
  color:#334155;
}

.tab:hover{background:#e2e8f0}
.tab.active{
  background:#4f46e5;
  color:#fff;
}

/* panouri */
.tabs-right{flex:1;padding:20px}
.panel{animation:fadeIn .2s ease}
.panel h2{margin-bottom:10px;color:#0b1220}

/* responsive */
@media (max-width:640px){
  .tabs-wrap{flex-direction:column}
  .tabs-left{flex-direction:row;overflow-x:auto}
  .tab{white-space:nowrap}
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}